/* ============================================================================
   CTL design system — warm near-monochrome
   ----------------------------------------------------------------------------
   Sampled from https://fiilo.webflow.io/ by extracting the rendered page's
   COMPUTED styles (not eyeballed): see `sample_design.py` and the probe in
   CLAUDE.md. The reference is a marketing page, but it embeds a real app shell,
   and that shell is what was measured — the marketing hero deliberately did not
   transfer.

   What was measured, and used verbatim:
     body ground   rgb(251,250,249)  #fbfaf9   warm off-white, 24% of page area
     surfaces      #ffffff           cards, top bar, sidebar
     dark action   rgb(17,17,17)     #111111   primary buttons
     subtle fill   #f6f5f3 / #fcfaf8 active nav, segmented controls
     type          Inter only, weights 400/500/600 — no 700/800 anywhere
     scale         16/27.2  14/23.8  18/30.6  32/44.8  44/52.8  64/67.2
     radii         4, 8, 12, 16, 24, 100px
     shadows       effectively none on content; one soft shadow on overlays

   TWO DELIBERATE DEVIATIONS, both for reasons the reference cannot know about:

   1. Accent is CTL's brand red #c2202a, not the reference's orange #ff4c0d.
      They are adjacent hues; importing the orange would put two competing warm
      accents on a page that already carries the red CTL wordmark. The red is
      used in the ROLE the reference gives orange — logo, unread markers, small
      highlights — so the structure is faithful even though the hue is ours.

   2. Content hairlines are #ecebe8, not the reference's #f8f8f8. At #f8f8f8 a
      row divider is invisible, which is fine on a marketing page with lots of
      air and wrong in a 25-row member table. The ultra-light value is kept for
      large surface separations where it does read.

   Structure: Tailwind still does layout and spacing; every surface, control and
   type role comes from here. The whole look is swappable from this one file —
   this is the third look it has carried (glass -> flat replica -> this).
   ========================================================================= */

:root {
  /* ── Ground and surfaces ─────────────────────────────────────────────── */
  --ctl-ground:       #fbfaf9;   /* sampled: page background */
  --ctl-surface:      #ffffff;   /* sampled: cards, chrome */
  --ctl-sunk:         #f6f5f3;   /* sampled: subtle fills */
  --ctl-tint:         #fcfaf8;   /* sampled: active nav fill */

  /* ── Lines. See deviation 2 above. ───────────────────────────────────── */
  --ctl-border:       #ecebe8;
  --ctl-border-soft:  #f3f2ef;
  --ctl-rule:         #f8f8f8;   /* the reference's own hairline, for big splits */
  --ctl-divider:      #f0efec;

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --ctl-ink:          #111111;   /* sampled: headings */
  --ctl-body:         #333333;   /* sampled: body copy */
  --ctl-muted:        #4e5158;
  --ctl-faint:        #6d7077;   /* darkened from the sampled tone: at #85888f
                                    timestamps and table headers fell to 3.3:1,
                                    and this token only ever carries small text */

  /* ── Action ──────────────────────────────────────────────────────────── */
  /* Near-black is the primary action, as in the reference. Blue means "go
     somewhere", black means "do this" — links stay legible as links rather than
     disappearing into body text. */
  --ctl-action:       #111111;
  --ctl-action-hover: #000000;
  --ctl-blue:         #2f5fd0;   /* links and informational accents */
  --ctl-blue-hover:   #2450b8;

  /* Brand. The one warm accent, used sparingly. */
  --ctl-red:          #c2202a;
  --ctl-accent:       #c2202a;

  /* Legacy token names kept alive because ~140 inline `style=` uses in the
     templates reference them. Remapping here rather than editing the markup is
     the whole reason a restyle costs one file. */
  --ctl-frame:        #111111;
  --ctl-navy:         #111111;
  --ctl-violet:       #111111;   /* no violet in the reference; Create is primary */
  --ctl-purple:       #111111;
  --ctl-lavender:     #f6f5f3;
  --ctl-chip:         #f6f5f3;
  --ctl-sidebar:      #ffffff;

  /* ── Semantic. Muted to sit on a warm ground. ────────────────────────── */
  --ctl-good:         #1a7f52;
  --ctl-good-bg:      #edf7f1;
  --ctl-warn:         #8a5410;
  --ctl-warn-bg:      #fbf3e8;
  --ctl-bad:          #b3261e;
  --ctl-bad-bg:       #fdeeec;
  --ctl-info:         #2f5fd0;
  --ctl-info-bg:      #eff3fd;

  /* ── Geometry. Sampled radii. ────────────────────────────────────────── */
  --ctl-radius:       12px;
  --ctl-radius-sm:    10px;
  --ctl-radius-xs:    8px;
  --ctl-topbar-h:     68px;
  --ctl-sidebar-w:    296px;   /* fits the real nav labels; 276 truncated them */

  /* Overlays only. The reference puts no shadow on content. */
  --ctl-shadow-pop:   0 1px 2px rgba(17,17,17,0.04),
                      0 8px 24px -6px rgba(17,17,17,0.10);

  --ctl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, Helvetica, Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { background: var(--ctl-ground); }

body {
  font-family: var(--ctl-font);
  font-size: 16px;
  line-height: 1.7;              /* sampled: 16/27.2 */
  color: var(--ctl-body);
  background: var(--ctl-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No-op shims kept so templates need no sweep. Do not build on these. */
.ctl-ground { display: none; }
.ctl-sheen  { position: relative; }
.ctl-rise   { animation: none; }
.ctl-glass, .ctl-glass-dark { background: var(--ctl-surface); }

/* ── App frame ────────────────────────────────────────────────────────────── */
/* The coloured 8px frame of the previous look is gone: the reference has none.
   Chrome is white, separated by hairlines, and the warm ground shows only in the
   content column so white cards read as raised without shadows. */
.ctl-app {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--ctl-topbar-h));
}

.ctl-topbar {
  height: var(--ctl-topbar-h);
  background: var(--ctl-surface);
  border-bottom: 1px solid var(--ctl-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
}

.ctl-logo-tile {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.25rem;
}

/* Search: white field, hairline, generous radius — as measured. */
.ctl-topbar-search {
  width: 100%;
  height: 42px;
  font-size: 14px;
  color: var(--ctl-ink);
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius-sm);
  padding: 0 0.875rem 0 2.375rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ctl-topbar-search::placeholder { color: var(--ctl-faint); }
.ctl-topbar-search:focus {
  outline: none;
  border-color: #d8d6d1;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.04);
}

.ctl-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--ctl-radius-sm);
  color: var(--ctl-muted);
  transition: background 140ms ease, color 140ms ease;
}
.ctl-topbar-icon:hover { background: var(--ctl-sunk); color: var(--ctl-ink); }

/* Unread marker: the accent, used at the smallest possible size. */
.ctl-topbar-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ctl-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--ctl-surface);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.ctl-sidebar {
  width: var(--ctl-sidebar-w);
  flex-shrink: 0;
  background: var(--ctl-surface);
  border-right: 1px solid var(--ctl-border);
  padding: 1.25rem 0.875rem;
}
.ctl-sidebar-inner {
  position: sticky;
  top: calc(var(--ctl-topbar-h) + 1.25rem);
  max-height: calc(100vh - var(--ctl-topbar-h) - 2.5rem);
  overflow-y: auto;
}

.ctl-main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ctl-ground);
  padding: 2rem 2rem 4rem;
}

/* Group headings: quiet, letterspaced. */
.ctl-sidebar-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ctl-faint);
  transition: color 140ms ease;
}
.ctl-sidebar-group:hover { color: var(--ctl-muted); }

.ctl-sidebar-divider {
  height: 1px;
  background: var(--ctl-divider);
  border: 0;
  margin: 1rem 0.75rem;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.ctl-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--ctl-radius-sm);
  font-size: 15px;
  font-weight: 400;
  color: var(--ctl-body);
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ctl-nav-link:hover { background: var(--ctl-sunk); color: var(--ctl-ink); }

/* Active: a warm tint with a hairline, not a saturated block. Exactly what the
   reference does — position is marked by contrast of weight, not of colour. */
.ctl-nav-link-active,
.ctl-nav-link-active:hover {
  background: var(--ctl-tint);
  border-color: var(--ctl-border);
  color: var(--ctl-ink);
  font-weight: 500;
}

.ctl-space-row { font-weight: 400; color: var(--ctl-body); }
.ctl-nav-link-active .ctl-space-row { color: var(--ctl-ink); font-weight: 500; }

.ctl-space-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: var(--ctl-radius-xs);
  background: var(--ctl-sunk);
  border: 1px solid var(--ctl-border);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ctl-muted);
}
.ctl-nav-link-active .ctl-space-badge { background: #fff; color: var(--ctl-ink); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.ctl-card {
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
}
.ctl-card-interactive { transition: border-color 160ms ease, transform 160ms ease; }
.ctl-card-interactive:hover { border-color: #ddd9d2; }

/* Overlays: the one place the reference uses elevation. */
.ctl-raised {
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  box-shadow: var(--ctl-shadow-pop);
}

.ctl-sunk { background: var(--ctl-sunk); border-radius: var(--ctl-radius-sm); }

hr.ctl-rule-brass, .ctl-rule-brass {
  height: 1px; border: 0; background: var(--ctl-divider);
}

/* ── Typography ───────────────────────────────────────────────────────────── */
/* The single biggest change from the previous look: display type is LARGER and
   LIGHTER. The reference tops out at weight 600 and sets 64px display at 1.05
   line-height. The old look used 700/800 at small sizes, which reads busy. */
.ctl-display {
  font-family: var(--ctl-font);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ctl-ink);
  text-wrap: balance;
}

.ctl-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ctl-faint);
}

.ctl-prose { max-width: 68ch; line-height: 1.7; color: var(--ctl-body); }
.ctl-prose p + p { margin-top: 1em; }
.ctl-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ctl-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--ctl-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease,
              color 140ms ease, opacity 140ms ease;
}
.ctl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ctl-btn:focus-visible { outline: 2px solid var(--ctl-ink); outline-offset: 2px; }

/* Primary is near-black, as measured. */
.ctl-btn-primary { background: var(--ctl-action); color: #fff; }
.ctl-btn-primary:hover { background: var(--ctl-action-hover); }

/* No violet in the reference — Create is simply the primary action. */
.ctl-btn-violet { background: var(--ctl-action); color: #fff; }
.ctl-btn-violet:hover { background: var(--ctl-action-hover); }

.ctl-btn-ghost, .ctl-btn-brass {
  background: var(--ctl-surface);
  color: var(--ctl-ink);
  border-color: var(--ctl-border);
}
.ctl-btn-ghost:hover, .ctl-btn-brass:hover {
  background: var(--ctl-sunk);
  border-color: #ddd9d2;
}

.ctl-btn-danger { background: var(--ctl-bad); color: #fff; }
.ctl-btn-danger:hover { background: #9a1f18; }

.ctl-btn-sm { padding: 0.4375rem 0.75rem; font-size: 13px; border-radius: var(--ctl-radius-xs); }

/* White pill on a dark field. */
.ctl-btn-on-blue { background: #fff; color: var(--ctl-ink); }
.ctl-btn-on-blue:hover { background: var(--ctl-sunk); }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.ctl-input, .ctl-select, .ctl-textarea {
  width: 100%;
  font-family: var(--ctl-font);
  font-size: 14px;
  color: var(--ctl-ink);
  background: var(--ctl-surface);
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ctl-input::placeholder, .ctl-textarea::placeholder { color: var(--ctl-faint); }
.ctl-input:focus, .ctl-select:focus, .ctl-textarea:focus {
  outline: none;
  border-color: #cfccc5;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.05);
}
.ctl-textarea { resize: vertical; line-height: 1.65; }
.ctl-select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235c5f66' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}
.ctl-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ctl-muted);
  margin-bottom: 0.375rem;
}

/* ── Feed filter chips ────────────────────────────────────────────────────── */
/* Was a grey block; now a hairline pill, matching the reference's date picker
   and segmented controls. */
.ctl-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 12px;
  color: var(--ctl-faint);
  cursor: pointer;
  transition: border-color 140ms ease;
}
.ctl-filter-chip:hover { border-color: #ddd9d2; }
.ctl-filter-chip select {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ctl-ink);
  text-transform: none;
  cursor: pointer;
  padding-right: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23111111' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.ctl-filter-chip select:focus { outline: none; }

/* ── Filter pills ─────────────────────────────────────────────────────────── */
.ctl-pill {
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ctl-body);
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.ctl-pill:hover { background: var(--ctl-sunk); border-color: #ddd9d2; }
/* Active is dark, as the reference's segmented control is. */
.ctl-pill-active, .ctl-pill-active:hover {
  background: var(--ctl-action);
  border-color: var(--ctl-action);
  color: #fff;
  font-weight: 500;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.ctl-tab {
  padding: 0.625rem 0 0.875rem;
  font-size: 15px;
  font-weight: 400;
  color: var(--ctl-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}
.ctl-tab:hover { color: var(--ctl-ink); }
.ctl-tab-active {
  color: var(--ctl-ink);
  font-weight: 500;
  border-bottom-color: var(--ctl-ink);
}

/* ── Chips ────────────────────────────────────────────────────────────────── */
.ctl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  font-weight: 500;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;             /* sampled: 100px pills */
  border: 1px solid transparent;
}
.ctl-chip-good { color: var(--ctl-good); background: var(--ctl-good-bg); }
.ctl-chip-warn { color: var(--ctl-warn); background: var(--ctl-warn-bg); }
.ctl-chip-bad  { color: var(--ctl-bad);  background: var(--ctl-bad-bg); }
.ctl-chip-info { color: var(--ctl-info); background: var(--ctl-info-bg); }
/* Provenance, not status. good/warn/bad are a scale about how a thing IS;
   this says where it CAME FROM, so it gets an outline instead of a fill and
   sits outside that scale — otherwise "Global" reads as a severity. */
.ctl-chip-global {
  color: var(--ctl-info);
  background: transparent;
  border-color: color-mix(in srgb, var(--ctl-info) 40%, transparent);
}
.ctl-chip-mute { color: var(--ctl-muted); background: var(--ctl-sunk); }

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.ctl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ctl-muted);
  background: var(--ctl-sunk);
  border: 1px solid var(--ctl-border);
}
.ctl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ctl-avatar-brass { background: var(--ctl-sunk); color: var(--ctl-ink); }

.ctl-online {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #22a06b;
  box-shadow: 0 0 0 2px var(--ctl-surface);
}

/* ── The in-post prompt ───────────────────────────────────────────────────── */
/* Was a saturated blue block. Now near-black, which is how the reference treats
   its one high-emphasis surface. */
.ctl-prompt {
  background: var(--ctl-ink);
  border-radius: var(--ctl-radius);
  padding: 2.5rem 2rem;
  text-align: center;
}
.ctl-prompt-title {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.ctl-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.ctl-table thead th, .ctl-thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ctl-faint);
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}
.ctl-table thead th, .ctl-thead {
  background: var(--ctl-sunk);
  border-bottom: 1px solid var(--ctl-border);
}
.ctl-table tbody td { padding: 0.8125rem 1.25rem; color: var(--ctl-body); }
.ctl-table tbody tr { border-top: 1px solid var(--ctl-divider); }
.ctl-table tbody tr:first-child { border-top: 0; }
.ctl-table tbody tr:hover { background: var(--ctl-tint); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.ctl-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ctl-scroll::-webkit-scrollbar-track { background: transparent; }
.ctl-scroll::-webkit-scrollbar-thumb { background: #dcd9d3; border-radius: 999px; }
.ctl-scroll::-webkit-scrollbar-thumb:hover { background: #c8c4bc; }

/* Native controls default to the browser's blue, which is the last bright accent
   left over from the previous look. accent-color aligns them with the palette
   without replacing them with divs — they keep full keyboard and AT behaviour. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ctl-ink);
  width: 15px;
  height: 15px;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--ctl-ink);
  outline-offset: 2px;
}

[x-cloak] { display: none !important; }
.ctl-overflow-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1024px) {
  .ctl-app { flex-direction: column; }
  .ctl-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--ctl-border); }
  .ctl-sidebar-inner { position: static; max-height: none; }
  .ctl-main { padding: 1.25rem 1.25rem 3rem; }
}

/* ── Usage meters ─────────────────────────────────────────────────────────
   A budget bar. The FILL WIDTH is set inline because it is data, not styling;
   the colour never is — an inline background on a control beats the class and
   silently flattens it, which has already happened once in this file's history.
   State comes from the semantic tokens, so "over budget" reads the same here as
   everywhere else. */
.ctl-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--ctl-sunk);
  overflow: hidden;
}
.ctl-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ctl-ink);
  transition: width .3s ease;
}
.ctl-meter-fill.is-warn { background: var(--ctl-warn); }
.ctl-usage-link { color: inherit; }
.ctl-usage-link.is-warn { color: var(--ctl-warn); }
.ctl-usage-link.is-over { color: var(--ctl-bad); font-weight: 600; }
.ctl-meter-fill.is-over { background: var(--ctl-bad); }

/* Figure + label pair sitting above a meter. */
.ctl-meter-value { font-size: 20px; font-weight: 600; color: var(--ctl-ink);
                   font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ctl-meter-of    { font-size: 13px; font-weight: 500; color: var(--ctl-faint);
                   font-variant-numeric: tabular-nums; }

/* ── Risk dashboard components ────────────────────────────────────────────
   Built on the existing tokens rather than a second palette, so /ciso does not
   read as a different product from the rest of CTL. The reference look is flat,
   so these carry a hairline and no shadow like every other surface here. */

/* KPI card: label, figure, signed delta, sparkline. */
.ctl-kpi { display: flex; flex-direction: column; gap: 6px; }
.ctl-kpi-label { font-size: 12px; font-weight: 500; color: var(--ctl-faint);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-kpi-value { font-size: 25px; font-weight: 700; letter-spacing: -.035em;
                 line-height: 1.05; color: var(--ctl-ink);
                 font-variant-numeric: tabular-nums; }
.ctl-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 10px; }
.ctl-kpi-note { font-size: 11px; color: var(--ctl-faint); }
.ctl-kpi-note.is-alarm { color: var(--ctl-bad); font-weight: 500; }

/* The delta is an arrow plus a number, and its colour follows the
   INTERPRETATION, not the sign: falling exposure and rising coverage are both
   good news with opposite signs. */
.ctl-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
             font-weight: 600; white-space: nowrap;
             font-variant-numeric: tabular-nums; }
.ctl-delta.is-good { color: var(--ctl-good); }
.ctl-delta.is-bad  { color: var(--ctl-bad); }

/* Attention strip — the one block on the page that asks for action. */
.ctl-attention { background: var(--ctl-bad-bg); border: 1px solid var(--ctl-bad);
                 border-radius: var(--ctl-radius-sm); padding: 9px 13px; }
.ctl-attention-title { font-size: 12.5px; font-weight: 600; color: var(--ctl-bad); }
.ctl-attention-item { font-size: 12.5px; color: var(--ctl-body); }

/* Posture gauge, sized for the page header. */
.ctl-gauge { display: flex; align-items: center; gap: 11px;
             background: var(--ctl-sunk); border: 1px solid var(--ctl-border);
             border-radius: var(--ctl-radius-sm); padding: 7px 13px 7px 9px; }
.ctl-gauge-num { font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
                 color: var(--ctl-ink); font-variant-numeric: tabular-nums; }
.ctl-gauge-meta { font-size: 11px; color: var(--ctl-faint); line-height: 1.35; }

/* Severity rows. Severity is an ORDERED status scale, so it gets one hue
   stepped light-to-dark, not four separate warm hues — red against orange
   against amber is indistinguishable to a colour-blind reader, and every row
   carries its name in text regardless. */
.ctl-sev-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; display: block; }
.ctl-sev-critical { background: #7f1d1d; }
.ctl-sev-high     { background: #b91c1c; }
.ctl-sev-medium   { background: #ef4444; }
.ctl-sev-low      { background: #f87171; }
.ctl-sev-info     { background: var(--ctl-faint); }

/* A part-to-whole strip. 2px surface gaps between fills, per the mark spec. */
.ctl-stack { display: flex; gap: 2px; height: 10px; }
.ctl-stack > span { display: block; border-radius: 2px; }
.ctl-stack > span:first-child { border-radius: 5px 2px 2px 5px; }
.ctl-stack > span:last-child  { border-radius: 2px 5px 5px 2px; }

/* A denser table, for a wide grid of small values — the platform console's
   network list, where eight columns of counts otherwise spend 320px on cell
   padding alone and force a horizontal scrollbar on a laptop. */
/* Reserve room for a two-word network name only where there is room to
   reserve; below the fit threshold the cell shrinks and the name wraps. */
@media (min-width: 1401px) { .ctl-name-cell { min-width: 176px; } }

.ctl-table-compact th,
.ctl-table-compact td { padding-left: 12px; padding-right: 12px; }
.ctl-table-compact td { font-size: 13px; }
/* On a dense table the HEADERS are what set the minimum width — the values are
   two or three digits, while "MEMBERS" in wide uppercase tracking needs 80px.
   Tightening the header alone buys back ~40px across six columns. */
.ctl-table-compact thead th { font-size: 10px; letter-spacing: .05em; }

/* A long hostname is the table's width floor — it cannot shrink and no amount
   of trimming elsewhere gets past it. Below the width where the table fits, let
   it break instead, so a narrow window wraps one cell rather than scrolling the
   whole table sideways. Two lines of hostname beats a scrollbar. */
/* Between the point where the sidebar still takes its full 296px and the point
   where the shell reflows, the content column is at its tightest — so the shell
   gives back some of its own padding there rather than letting a table scroll. */
@media (max-width: 1200px) {
  .ctl-main { padding-left: 1rem; padding-right: 1rem; }
  .max-w-7xl.px-6 { padding-left: .75rem; padding-right: .75rem; }
}

@media (max-width: 1400px) {
  .ctl-break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
  /* Anything held on one line above the fit threshold has to be allowed to
     wrap below it, or a single nowrap cell re-creates the scrollbar the rest of
     this work removed. */
  .ctl-nowrap-wide { white-space: normal; }
}

/* ── Tool tiles ───────────────────────────────────────────────────────────
   Square cards in a grid. `aspect-ratio: 1` sets the shape, but the tile is
   also given a min-height and allowed to grow past the square — a tile that
   clips its own description to stay geometrically perfect is a worse tile.
   The three rows (mark, text, action) are a grid so the button sits on the
   same baseline across the row no matter how long the copy is. */
.ctl-tile {
  aspect-ratio: 1 / 1;
  min-height: 250px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 18px;
  background: var(--ctl-surface);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  transition: border-color .15s ease;
}
.ctl-tile:hover { border-color: #d8d7d2; }
/* Not built yet: recessive, so the live tools read first. */
.ctl-tile.is-planned { background: var(--ctl-tint); }
.ctl-tile.is-planned .ctl-tile-mark { opacity: .5; }
.ctl-tile.is-planned .ctl-tile-name { color: var(--ctl-muted); }

.ctl-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctl-tile-mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--ctl-sunk);
  color: var(--ctl-muted);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

.ctl-tile-body { min-width: 0; overflow: hidden; }
.ctl-tile-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em;
                 color: var(--ctl-ink); }
.ctl-tile-tagline { font-size: 11.5px; margin-top: 2px; color: var(--ctl-faint); }
/* Clamped rather than truncated at a character count: the cut lands on a line
   boundary and adapts to the tile's real width. */
.ctl-tile-desc {
  font-size: 12.5px; line-height: 1.5; margin-top: 8px; color: var(--ctl-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.ctl-tile-foot { align-self: end; }

/* A usable tool's whole tile is the link, so the click target is the thing the
   member is looking at rather than a button in the corner of a square. */
a.ctl-tile-link { color: inherit; text-decoration: none; }
a.ctl-tile-link:hover { border-color: var(--ctl-blue); }
a.ctl-tile-link:focus-visible {
  outline: 2px solid var(--ctl-blue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  /* One per row on a phone, where a square would waste most of the screen. */
  .ctl-tile { aspect-ratio: auto; min-height: 0; }
  .ctl-tile-desc { -webkit-line-clamp: 3; }
}

/* ============================================================================
   Tailwind utility remap
   ----------------------------------------------------------------------------
   ~450 inherited `slate-*` / `blue-*` utilities in the templates. Tailwind's
   slate is cool-toned and fights a warm ground, so they are remapped here in one
   place rather than edited across 44 files. Loads after the Tailwind CDN and
   matches its specificity, so it wins on order.

   New markup should use the semantic classes above.
   ========================================================================= */
.text-slate-900, .text-slate-800, .text-slate-700 { color: var(--ctl-ink) !important; }
.text-slate-600 { color: var(--ctl-body) !important; }
.text-slate-500 { color: var(--ctl-muted) !important; }
.text-slate-400, .text-slate-300 { color: var(--ctl-faint) !important; }

.bg-slate-50  { background-color: var(--ctl-tint) !important; }
.bg-slate-100 { background-color: var(--ctl-sunk) !important; }
.bg-slate-200 { background-color: #e8e6e1 !important; }

.border-slate-100, .border-slate-200 { border-color: var(--ctl-border-soft) !important; }
.border-slate-300, .border-slate-400 { border-color: var(--ctl-border) !important; }

.text-blue-600, .text-blue-700 { color: var(--ctl-blue) !important; }
.bg-blue-500, .bg-blue-600 { background-color: var(--ctl-action) !important; }
.bg-blue-700, .hover\:bg-blue-700:hover { background-color: var(--ctl-action-hover) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--ctl-info-bg) !important; }
.border-blue-200, .border-blue-400 { border-color: #cdd8f5 !important; }
.bg-violet-600, .bg-violet-500 { background-color: var(--ctl-action) !important; }
.text-violet-600 { color: var(--ctl-ink) !important; }
.border-violet-400 { border-color: var(--ctl-ink) !important; }
.bg-violet-50 { background-color: var(--ctl-sunk) !important; }
.text-indigo-300, .text-indigo-400 { color: var(--ctl-blue) !important; }
.border-indigo-500 { border-color: var(--ctl-ink) !important; }
.bg-indigo-500 { background-color: var(--ctl-action) !important; }