/* ============================================================================
   GTC AI Control Center — portal.css
   The CRM-shaped portal design system: a persistent left rail with NESTED
   navigation, a working top bar, and a content region that shows exactly ONE
   view at a time. Every page is its own view. Nothing stacks.

   This file is standalone. It does not extend admin.css and does not need it.
   Prefix: every class is `cc-`. Never rely on element selectors for layout —
   the server renders this markup from Python f-strings and must be able to
   reproduce every class name literally.

   Palette meaning (fixed for this product, do not repurpose):
     TEAL      = Convrs / customer world
     MULBERRY  = Lark / staff world
     ok/warn/crit = STATUS ONLY. Never decorative.

   Type roles:
     DISPLAY = grotesque, headings
     BODY    = the same grotesque — this is an application, not a document
     MONO    = every number, identifier, status and label. Tabular always.

   Contrast note: --ink-3 measures ~4.1:1 on white in the light theme, under AA
   for body text. It is used ONLY for gridlines, icon strokes, chart axes and
   disabled affordances. All secondary TEXT uses --ink-2.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light dark;

  /* surfaces + ink */
  --paper:      #F2F5F6;
  --surface:    #FFFFFF;
  --surface-2:  #E9EEF0;
  --ink:        #0D1A1E;
  --ink-2:      #3D5158;
  --ink-3:      #6C8189;
  --hairline:   #D2DDE0;

  /* worlds */
  --teal:       #0B6E7C;
  --mulberry:   #8A3F63;
  /* Ink that sits ON a solid teal/mulberry fill. Light theme teal is dark, so
     white; dark theme teal is bright, so near-black. A token, never a
     component override inside a media query. */
  --on-teal:      #FFFFFF;
  --on-mulberry:  #FFFFFF;

  /* status */
  --ok:         #2C7048;
  --warn:       #96650B;
  --crit:       #A62F26;
  --on-crit:    #FFFFFF;
  --on-ok:      #FFFFFF;
  --on-warn:    #FFFFFF;

  /* The boundary of an interactive control. WCAG 1.4.11 wants 3:1 for that,
     which --hairline (a card edge, 1.4:1) never had. Measured against both
     --surface and --surface-2. Card edges and table rules keep --hairline. */
  --field-line: #74888F;

  /* Flat pre-computed tints, so no color-mix support is required.
     --warn-tint is lifted to #FCF6E6 because --warn is the darkest of the
     three status colours and the pill text has to clear 4.5:1. Measured. */
  --teal-tint:      #DDEEF1;
  --mulberry-tint:  #F3E3EB;
  --ok-tint:        #E4F1EA;
  --warn-tint:      #FCF6E6;
  --crit-tint:      #F8E5E3;
  --neutral-tint:   #E9EEF0;

  /* chrome — the rail is its own dark world in both themes */
  --rail-bg:            #0D1A1E;
  --rail-ink:           #C8D6DA;
  --rail-ink-strong:    #FFFFFF;
  --rail-hairline:      #22343A;
  --rail-hover:         #17282E;
  --rail-active:        #10333A;
  --rail-accent:        #48B4C2;
  --rail-ink-dim:       #9DB1B8;
  /* The rail is a dark surface in BOTH themes, so the status colours inside
     it cannot be the theme-flipping ones: the light theme's --ok on the rail
     measures 2.97:1. These are pinned to the dark-theme values, which measure
     8.4 / 8.6 / 6.4 on the rail whichever theme is on. */
  --rail-ok:            #5FBE87;
  --rail-warn:          #D9A63F;
  --rail-crit:          #E1776B;

  --focus:      #0B6E7C;
  --shadow-1:   0 1px 2px rgba(13, 26, 30, .06), 0 1px 1px rgba(13, 26, 30, .04);
  --shadow-2:   0 8px 24px rgba(13, 26, 30, .10), 0 2px 6px rgba(13, 26, 30, .06);
  --shadow-3:   0 24px 60px rgba(13, 26, 30, .22);
  --backdrop:   rgba(13, 26, 30, .48);

  /* type */
  --font-display: ui-sans-serif, system-ui, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    ui-sans-serif, system-ui, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
                  "Liberation Mono", monospace;

  /* space + shape */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --gap:  16px;
  --pad:  20px;
  --rail-w:    260px;
  --topbar-h:  60px;
  --content-max: 1360px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0D1418;
    --surface:    #141E23;
    --surface-2:  #1B272D;
    --ink:        #E3EDEF;
    --ink-2:      #A9BEC5;
    --ink-3:      #78919A;
    --hairline:   #26353C;

    --teal:       #48B4C2;
    --mulberry:   #D2799F;
    --on-teal:      #06181C;
    --on-mulberry:  #200D17;

    --ok:         #5FBE87;
    --warn:       #D9A63F;
    --crit:       #E1776B;
    --on-crit:    #2A0E0B;
    --on-ok:      #06210F;
    --on-warn:    #241A02;

    --field-line: #5E7278;

    --teal-tint:      #10333A;
    --mulberry-tint:  #33192A;
    --ok-tint:        #16311F;
    --warn-tint:      #33280E;
    --crit-tint:      #3A1E1A;
    --neutral-tint:   #1B272D;

    --rail-bg:          #1B2A32;
    --rail-ink:         #C2D3D9;
    --rail-ink-strong:  #F2F8F9;
    --rail-hairline:    #35474F;
    --rail-hover:       #24363E;
    --rail-active:      #17414A;
    --rail-accent:      #6ECDD9;
    --rail-ink-dim:     #9DB1B8;
    --rail-ok:          #5FBE87;
    --rail-warn:        #D9A63F;
    --rail-crit:        #E1776B;

    --focus:      #48B4C2;
    --shadow-1:   0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2:   0 8px 24px rgba(0, 0, 0, .48), 0 2px 6px rgba(0, 0, 0, .32);
    --shadow-3:   0 24px 60px rgba(0, 0, 0, .62);
    --backdrop:   rgba(4, 9, 11, .66);
  }
}

/* An explicit choice must beat the OS in BOTH directions, so both are
   restated in full. Never style a component inside a media query. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #0D1418;
  --surface:    #141E23;
  --surface-2:  #1B272D;
  --ink:        #E3EDEF;
  --ink-2:      #A9BEC5;
  --ink-3:      #78919A;
  --hairline:   #26353C;

  --teal:       #48B4C2;
  --mulberry:   #D2799F;
  --on-teal:      #06181C;
  --on-mulberry:  #200D17;

  --ok:         #5FBE87;
  --warn:       #D9A63F;
  --crit:       #E1776B;
  --on-crit:    #2A0E0B;
  --on-ok:      #06210F;
  --on-warn:    #241A02;

  --field-line: #5E7278;

  --teal-tint:      #10333A;
  --mulberry-tint:  #33192A;
  --ok-tint:        #16311F;
  --warn-tint:      #33280E;
  --crit-tint:      #3A1E1A;
  --neutral-tint:   #1B272D;

  --rail-bg:          #1B2A32;
  --rail-ink:         #C2D3D9;
  --rail-ink-strong:  #F2F8F9;
  --rail-hairline:    #35474F;
  --rail-hover:       #24363E;
  --rail-active:      #17414A;
  --rail-accent:      #6ECDD9;
  --rail-ink-dim:     #9DB1B8;
  --rail-ok:          #5FBE87;
  --rail-warn:        #D9A63F;
  --rail-crit:        #E1776B;

  --focus:      #48B4C2;
  --shadow-1:   0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2:   0 8px 24px rgba(0, 0, 0, .48), 0 2px 6px rgba(0, 0, 0, .32);
  --shadow-3:   0 24px 60px rgba(0, 0, 0, .62);
  --backdrop:   rgba(4, 9, 11, .66);
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper:      #F2F5F6;
  --surface:    #FFFFFF;
  --surface-2:  #E9EEF0;
  --ink:        #0D1A1E;
  --ink-2:      #3D5158;
  --ink-3:      #6C8189;
  --hairline:   #D2DDE0;

  --teal:       #0B6E7C;
  --mulberry:   #8A3F63;
  --on-teal:      #FFFFFF;
  --on-mulberry:  #FFFFFF;

  --ok:         #2C7048;
  --warn:       #96650B;
  --crit:       #A62F26;
  --on-crit:    #FFFFFF;
  --on-ok:      #FFFFFF;
  --on-warn:    #FFFFFF;

  --field-line: #74888F;

  --teal-tint:      #DDEEF1;
  --mulberry-tint:  #F3E3EB;
  --ok-tint:        #E4F1EA;
  --warn-tint:      #FCF6E6;
  --crit-tint:      #F8E5E3;
  --neutral-tint:   #E9EEF0;

  --rail-bg:          #0D1A1E;
  --rail-ink:         #C8D6DA;
  --rail-ink-strong:  #FFFFFF;
  --rail-hairline:    #22343A;
  --rail-hover:       #17282E;
  --rail-active:      #10333A;
  --rail-accent:      #48B4C2;
  --rail-ink-dim:     #9DB1B8;
  --rail-ok:          #5FBE87;
  --rail-warn:        #D9A63F;
  --rail-crit:        #E1776B;

  --focus:      #0B6E7C;
  --shadow-1:   0 1px 2px rgba(13, 26, 30, .06), 0 1px 1px rgba(13, 26, 30, .04);
  --shadow-2:   0 8px 24px rgba(13, 26, 30, .10), 0 2px 6px rgba(13, 26, 30, .06);
  --shadow-3:   0 24px 60px rgba(13, 26, 30, .22);
  --backdrop:   rgba(13, 26, 30, .48);
}

/* ------------------------------------------------------------- baseline -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-underline-offset: 2px; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Utilities ---------------------------------------------------------------- */

.cc-mono { font-family: var(--font-mono); }
.cc-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cc-muted { color: var(--ink-2); }
.cc-strong { color: var(--ink); font-weight: 600; }
.cc-teal { color: var(--teal); }
.cc-mulberry { color: var(--mulberry); }
.cc-right { text-align: right; }
.cc-nowrap { white-space: nowrap; }

.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cc-skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 10px 14px; font-weight: 600;
  transition: top .12s ease;
}
.cc-skip:focus { top: 8px; }

/* ============================================================== APP SHELL ==
   Three regions: rail | (topbar + content). The content region is the only
   thing that changes between views.
   ========================================================================= */

.cc-app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}
.cc-app.is-collapsed { --rail-w: 68px; }

.cc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* ------------------------------------------------------------ left rail -- */

.cc-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-hairline);
  color: var(--rail-ink);
  /* Above the prototype bar and the scrim: at phone width the drawer's own
     close button was being covered and read as a dead control. */
  z-index: 60;
}

.cc-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--rail-hairline);
  flex: 0 0 auto;
  overflow: hidden;
}
.cc-rail__mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #0B6E7C 0%, #8A3F63 100%);
  color: #FFFFFF;
}
.cc-rail__mark svg { display: block; }
.cc-rail__name {
  min-width: 0;
  display: flex; flex-direction: column; line-height: 1.15;
}
.cc-rail__name b {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  color: var(--rail-ink-strong);
  white-space: nowrap;
}
.cc-rail__name span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--rail-accent);
  white-space: nowrap;
}

.cc-rail__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px 18px;
  scrollbar-width: thin;
}

.cc-rail__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--rail-hairline);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.cc-rail__env {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rail-ink);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--rail-hairline);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.cc-rail__collapse {
  margin-left: auto;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rail-hairline);
  border-radius: var(--r-sm);
  color: var(--rail-ink);
  cursor: pointer;
}
.cc-rail__collapse:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.cc-rail__collapse svg { transition: transform .16s ease; }
.cc-app.is-collapsed .cc-rail__collapse svg { transform: rotate(180deg); }

.cc-rail__close {
  display: none;
  margin-left: auto;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--rail-hairline);
  border-radius: var(--r-sm); color: var(--rail-ink); cursor: pointer;
}

/* ------------------------------------------------- nested navigation ----- */

.cc-nav { display: flex; flex-direction: column; gap: 2px; }

.cc-nav__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rail-ink-dim);
  padding: 14px 12px 6px;
}

/* A top-level row: either a plain link (Overview) or a section toggle. */
.cc-nav__link,
.cc-nav__section {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--rail-ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.cc-nav__link:hover,
.cc-nav__section:hover {
  background: var(--rail-hover);
  color: var(--rail-ink-strong);
}
.cc-nav__link:focus-visible,
.cc-nav__section:focus-visible,
.cc-nav__item:focus-visible {
  outline: 2px solid var(--rail-accent);
  outline-offset: -2px;
}

.cc-nav__icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--rail-ink);
}
.cc-nav__link:hover .cc-nav__icon,
.cc-nav__section:hover .cc-nav__icon { color: var(--rail-ink-strong); }
.cc-nav__icon svg { display: block; width: 17px; height: 17px; }

.cc-nav__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-nav__chev {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  color: var(--rail-ink-dim);
  transition: transform .16s ease;
}
.cc-nav__group.is-open > .cc-nav__section .cc-nav__chev { transform: rotate(90deg); }

/* Count chip on a section header — e.g. how many alerts are firing. */
.cc-nav__count {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--rail-ink);
}
.cc-nav__count--crit { background: var(--rail-crit); color: #2A0E0B; }

/* The current SECTION stays marked even when it is collapsed shut. */
.cc-nav__group.is-current > .cc-nav__section { color: var(--rail-ink-strong); }
.cc-nav__group.is-current > .cc-nav__section .cc-nav__icon { color: var(--rail-accent); }

/* The animated sub-panel. Closed = zero rows AND hidden, so the links inside
   are genuinely out of the tab order rather than merely invisible. */
.cc-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .18s ease, visibility 0s linear .18s;
}
.cc-nav__group.is-open > .cc-nav__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .18s ease, visibility 0s linear 0s;
}
.cc-nav__sub { overflow: hidden; }

.cc-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 16px;
  margin: 1px 0 1px 18px;
  border-left: 1px solid var(--rail-hairline);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--rail-ink-dim);
  font-size: 13px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cc-nav__item:hover { background: var(--rail-hover); }

.cc-nav__item.is-active,
.cc-nav__item:hover {
  color: var(--rail-ink-strong);
}
.cc-nav__item.is-active {
  background: var(--rail-active);
  border-left-color: var(--rail-accent);
  box-shadow: inset 2px 0 0 var(--rail-accent);
  font-weight: 600;
}

.cc-nav__link.is-active {
  background: var(--rail-active);
  color: var(--rail-ink-strong);
  box-shadow: inset 3px 0 0 var(--rail-accent);
}
.cc-nav__link.is-active .cc-nav__icon { color: var(--rail-accent); }

.cc-nav__dot {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rail-ok);
}
.cc-nav__dot--warn { background: var(--rail-warn); }
.cc-nav__dot--crit { background: var(--rail-crit); }

/* Collapsed rail: icons only, sub-panels shut, labels gone. */
.cc-app.is-collapsed .cc-nav__text,
.cc-app.is-collapsed .cc-nav__chev,
.cc-app.is-collapsed .cc-nav__dot,
.cc-app.is-collapsed .cc-nav__eyebrow,
.cc-app.is-collapsed .cc-rail__name,
.cc-app.is-collapsed .cc-rail__env { display: none; }

/* Hiding the alert count in icon mode removed the one urgent signal in the
   rail. It stays, as a dot on the icon; the text survives for screen
   readers and the row's aria-label still reads the number. */
.cc-app.is-collapsed .cc-nav__count {
  position: absolute;
  top: 5px; right: 13px;
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  background: var(--rail-ink-dim);
  border: 1.5px solid var(--rail-bg);
}
/* The digit is clipped, not tinted away: there is no glyph left to have a
   contrast ratio, and a screen reader still hears the number. */
.cc-app.is-collapsed .cc-nav__count-n {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cc-app.is-collapsed .cc-nav__count--crit { background: var(--rail-crit); }
.cc-app.is-collapsed .cc-nav__panel { display: none; }
.cc-app.is-collapsed .cc-nav__link,
.cc-app.is-collapsed .cc-nav__section { justify-content: center; padding: 10px 0; }
.cc-app.is-collapsed .cc-rail__brand { justify-content: center; padding: 0; }
.cc-app.is-collapsed .cc-rail__foot { justify-content: center; padding: 10px 0; }
.cc-app.is-collapsed .cc-rail__collapse { margin-left: 0; }
.cc-app.is-collapsed .cc-nav__group.is-current > .cc-nav__section {
  background: var(--rail-active);
  box-shadow: inset 3px 0 0 var(--rail-accent);
}

.cc-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 55;
}

/* -------------------------------------------------------------- top bar -- */

.cc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.cc-topbar__menu {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
}

.cc-search {
  position: relative;
  flex: 1 1 420px;
  max-width: 480px;
  min-width: 0;
}
.cc-search__icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.cc-search__input {
  width: 100%;
  height: 36px;
  padding: 0 74px 0 34px;
  background: var(--surface-2);
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 13.5px;
}
.cc-search__input::placeholder { color: var(--ink-2); }
.cc-search__input:focus {
  background: var(--surface);
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.cc-search__kbd {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  pointer-events: none;
}

.cc-topbar__spacer { flex: 1 1 auto; }

.cc-topbar__actions { display: flex; align-items: center; gap: 8px; }

.cc-iconbtn {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cc-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.cc-iconbtn__dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--crit);
  border: 1.5px solid var(--surface);
}

.cc-account {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  cursor: pointer;
}
.cc-account:hover { background: var(--surface-2); }
.cc-account__avatar {
  width: 27px; height: 27px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mulberry);
  color: var(--on-mulberry);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
/* It is a link to your own profile, and it should not look like body copy that
   happens to be clickable — the underline appears on hover so the affordance is
   there when you go looking for it, without turning the top bar into a link. */
.cc-account__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}

.cc-account__name:hover,
.cc-account__name:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------- content region -- */

.cc-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 24px 56px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* One view visible at a time. This is the whole point. */
.cc-view { display: none; }
.cc-view.is-active { display: block; animation: cc-fade .16s ease both; }

@keyframes cc-fade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- page header -- */

.cc-pagehead {
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.cc-pagehead__main { flex: 1 1 380px; min-width: 0; }

.cc-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.cc-crumb__sep { color: var(--ink-2); }
.cc-crumb b { color: var(--ink); font-weight: 600; }
.cc-crumb a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
.cc-crumb a:hover { color: var(--teal); text-decoration-color: currentColor; }

.cc-pagehead h1 { font-size: 25px; }
.cc-pagehead__desc {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 76ch;
}
.cc-pagehead__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ tab strip -- */

.cc-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cc-tabs::-webkit-scrollbar { display: none; }

.cc-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cc-tab:hover { color: var(--ink); }
.cc-tab.is-active { color: var(--ink); border-bottom-color: var(--teal); }
.cc-tab__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.cc-tabpane { display: none; }
.cc-tabpane.is-active { display: block; }

/* =============================================================== LAYOUT ==== */

.cc-stack { display: flex; flex-direction: column; gap: var(--gap); }

.cc-grid { display: grid; gap: var(--gap); }
.cc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cc-grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* Without this a short card is stretched to match the tall column beside it,
   which leaves a blank half-panel. Cards size to their own content. */
.cc-grid--main > *,
.cc-grid--aside > * { align-self: start; }

@media (max-width: 1180px) {
  .cc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-grid--main,
  .cc-grid--aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cc-grid--2,
  .cc-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .cc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ CARDS ==== */

.cc-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cc-card--flush { box-shadow: none; }
.cc-card--teal   { border-top: 3px solid var(--teal); }
.cc-card--mulberry { border-top: 3px solid var(--mulberry); }

.cc-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px var(--pad);
  border-bottom: 1px solid var(--hairline);
}
.cc-card__head--plain { border-bottom: 0; padding-bottom: 0; }
.cc-card__titles { flex: 1 1 auto; min-width: 0; }
.cc-card__title {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-card__desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cc-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cc-card__body { padding: var(--pad); }
.cc-card__body--tight { padding: 12px var(--pad); }
.cc-card__body--flush { padding: 0; }
.cc-card__foot {
  padding: 12px var(--pad);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
}

.cc-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 4px 0 -2px;
}

/* =========================================================== STAT TILES ==== */

.cc-tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cc-tile__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-tile__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}
.cc-tile__unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 3px;
}
.cc-tile__foot {
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cc-tile__delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
}
.cc-tile__delta--up { color: var(--ok); }
.cc-tile__delta--down { color: var(--crit); }
.cc-tile__delta--flat { color: var(--ink-2); }

.cc-tile--teal .cc-tile__value { color: var(--teal); }
.cc-tile--mulberry .cc-tile__value { color: var(--mulberry); }
.cc-tile--crit .cc-tile__value { color: var(--crit); }
.cc-tile--warn .cc-tile__value { color: var(--warn); }

/* ================================================================ PILLS ==== */

.cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neutral-tint);
  color: var(--ink-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.cc-pill--ok   { background: var(--ok-tint);   color: var(--ok); }
.cc-pill--warn { background: var(--warn-tint); color: var(--warn); }
.cc-pill--crit { background: var(--crit-tint); color: var(--crit); }
.cc-pill--teal { background: var(--teal-tint); color: var(--teal); }
.cc-pill--mulberry { background: var(--mulberry-tint); color: var(--mulberry); }
.cc-pill--idle { background: var(--neutral-tint); color: var(--ink-2); }
.cc-pill--outline { background: transparent; border-color: var(--hairline); color: var(--ink-2); }

.cc-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.cc-pill--live .cc-pill__dot { animation: cc-pulse 2s ease-in-out infinite; }

@keyframes cc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.cc-badge--rank {
  min-width: 22px;
  justify-content: center;
  font-weight: 700;
  color: var(--ink);
}

/* Identifiers: model names, keys, ids. Never a raw key — eight dots + last 4. */
.cc-ident {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  white-space: nowrap;
}
.cc-ident--model { color: var(--teal); }
.cc-ident--key { letter-spacing: .04em; color: var(--ink-2); }
.cc-ident--muted { color: var(--ink-2); }

/* =============================================================== BUTTONS ==== */

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease,
              box-shadow .12s ease;
}
.cc-btn svg { flex: 0 0 auto; }

/* --on-teal is a token, not a per-theme override, because the light theme's
   teal is dark (white text) and the dark theme's teal is light (ink text).
   Styling this inside a media query would break the viewer's toggle. */
.cc-btn--primary {
  background: var(--teal);
  color: var(--on-teal);
  border-color: var(--teal);
}
.cc-btn--primary:hover { filter: brightness(1.08); }

.cc-btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--field-line);
}
.cc-btn--secondary:hover { background: var(--surface-2); border-color: var(--ink-2); }

.cc-btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}
.cc-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.cc-btn--danger {
  background: transparent;
  color: var(--crit);
  border-color: var(--crit);
}
.cc-btn--danger:hover { background: var(--crit-tint); }

.cc-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.cc-btn--icon { width: 30px; height: 30px; padding: 0; }
.cc-btn[disabled], .cc-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.cc-btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ================================================================= FORMS ==== */

.cc-form { display: flex; flex-direction: column; gap: 15px; }

.cc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.cc-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-label__req { color: var(--crit); }

.cc-input, .cc-select, .cc-textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 13.5px;
}
.cc-input.cc-mono, .cc-select.cc-mono { font-family: var(--font-mono); }
.cc-textarea { min-height: 88px; resize: vertical; }
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--ink-3); }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.cc-input[aria-invalid="true"] {
  border-color: var(--crit);
  box-shadow: 0 0 0 3px var(--crit-tint);
}
.cc-input[disabled], .cc-select[disabled] {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--field-line);
  cursor: not-allowed;
}

.cc-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.cc-hint { font-size: 12px; color: var(--ink-2); }
.cc-hint--crit { color: var(--crit); }
.cc-hint--ok { color: var(--ok); }

.cc-fieldrow {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .cc-fieldrow { grid-template-columns: minmax(0, 1fr); } }

.cc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.cc-check input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.cc-checkset { display: flex; gap: 16px; flex-wrap: wrap; }

.cc-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch__track {
  width: 38px; height: 21px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--field-line);
  position: relative;
  transition: background .14s ease, border-color .14s ease;
  flex: 0 0 auto;
}
.cc-switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform .14s ease, background .14s ease;
}
.cc-switch input:checked + .cc-switch__track {
  background: var(--teal-tint);
  border-color: var(--teal);
}
.cc-switch input:checked + .cc-switch__track::after {
  transform: translateX(17px);
  background: var(--teal);
}
.cc-switch input:focus-visible + .cc-switch__track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* =============================================================== TABLES ==== */

.cc-tablewrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.cc-tablewrap--tall { max-height: 460px; overflow-y: auto; }

.cc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 640px;
}
.cc-table--wide { min-width: 860px; }
.cc-table--narrow { min-width: 0; }

.cc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  padding: 9px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.cc-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--ink);
}
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover td { background: var(--surface-2); }
.cc-table th.cc-right, .cc-table td.cc-right { text-align: right; }
.cc-table td.cc-num, .cc-table th.cc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cc-table tbody tr.is-crit td { background: var(--crit-tint); }
.cc-table tbody tr.is-crit:hover td { background: var(--crit-tint); }
.cc-table tbody tr.is-warn td { background: var(--warn-tint); }
.cc-table tbody tr.is-warn:hover td { background: var(--warn-tint); }

.cc-cell-main { display: flex; flex-direction: column; gap: 2px; }
.cc-cell-main b { font-weight: 600; font-size: 13px; }
.cc-cell-main span { font-size: 11.5px; color: var(--ink-2); }
.cc-cell-actions { display: flex; gap: 6px; justify-content: flex-end; }

.cc-scrollnote {
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 8px 14px 0;
  display: none;
}
@media (max-width: 860px) { .cc-scrollnote { display: block; } }

/* ================================================================ METERS ==== */

.cc-meter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cc-meter__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.cc-meter__name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-meter__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.cc-meter__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.cc-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width .3s ease;
}
.cc-meter__fill--ok   { background: var(--ok); }
.cc-meter__fill--warn { background: var(--warn); }
.cc-meter__fill--crit { background: var(--crit); }
.cc-meter__fill--idle { background: var(--ink-3); }
.cc-meter__bar:has(.cc-meter__fill--idle) { border: 1px dashed var(--field-line); background: transparent; }
.cc-meter__foot {
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-meterlist { display: flex; flex-direction: column; gap: 16px; }
/* At desktop width a single column made four ~1000px saturated slabs. */
.cc-meterlist--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}
@media (max-width: 860px) {
  .cc-meterlist--split { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================== CHART PRIMITIVES (SVG) == */

/* A label that runs past the viewBox used to print on top of the bars and
   past the card edge. Clipping to the box makes that impossible. */
.cc-chart {
  width: 100%;
  display: block;
  overflow: hidden;
}
.cc-chart__grid { stroke: var(--hairline); stroke-width: 1; }
.cc-chart__axis { stroke: var(--ink-3); stroke-width: 1; }
.cc-chart__ceiling { stroke: var(--crit); stroke-width: 1; stroke-dasharray: 4 3; }
.cc-chart__label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-2);
}
.cc-chart__label--axis { fill: var(--ink-2); }
.cc-bar { fill: var(--teal); }
/* "Today, still counting" is the same world as every other bar, so it stays
   teal and says "unfinished" with a hatched outline instead of a new hue. */
.cc-bar--today { fill: var(--teal-tint); stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 3; }
.cc-bar--warn { fill: var(--warn); }
.cc-line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cc-line--projected {
  stroke: var(--ink-3);
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
}
.cc-area { fill: var(--teal-tint); }
.cc-dot { fill: var(--teal); }
.cc-dot--crit { fill: var(--crit); }

.cc-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 10px;
}
.cc-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cc-legend__swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--teal);
  flex: 0 0 auto;
}
.cc-legend__swatch--mulberry { background: var(--mulberry); }
.cc-legend__swatch--crit { background: var(--crit); }
.cc-legend__swatch--muted { background: var(--ink-3); }
/* A dashed line series gets a dashed rule, a point marker gets a dot. */
.cc-legend__swatch--line {
  width: 16px; height: 0;
  border-radius: 0;
  background: none;
  border-top: 2px dashed var(--ink-3);
}
.cc-legend__swatch--dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--crit);
}
.cc-legend__swatch--partial {
  background: var(--teal-tint);
  border: 1.5px dashed var(--teal);
}

/* ======================================================== LISTS & STRIPS ==== */

/* Live connection strip — one row per data path.
   Explicit column counts, all of which divide the six paths exactly. auto-fit
   gave four columns for six cells, and the two leftover tracks showed as an
   empty half-row of hairline: a void in the first thing on the first page. */
.cc-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cc-strip__cell {
  background: var(--surface);
  /* 1px border + 20px = the card body's 21px inset, so the strip, the tiles
     and the cards all start their text on the same vertical line. */
  padding: 13px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.cc-strip__name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-strip__age {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1400px) { .cc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cc-strip { grid-template-columns: minmax(0, 1fr); } }

/* Key/value pairs. */
.cc-kv { display: flex; flex-direction: column; gap: 0; }
.cc-kv__row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.cc-kv__row:last-child { border-bottom: 0; }
.cc-kv__k { color: var(--ink-2); }
.cc-kv__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}

/* Setup checklist. */
.cc-checklist { display: flex; flex-direction: column; }
.cc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.cc-checklist__item:last-child { border-bottom: 0; }
.cc-checklist__mark {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-3);
  color: var(--ink-3);
}
.cc-checklist__item.is-done .cc-checklist__mark {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-ok);
}
.cc-checklist__item.is-doing .cc-checklist__mark {
  border-color: var(--warn);
  color: var(--warn);
}
.cc-checklist__body { flex: 1 1 auto; min-width: 0; }
.cc-checklist__body b { font-size: 13.5px; font-weight: 600; display: block; }
.cc-checklist__body span { font-size: 12.5px; color: var(--ink-2); }
.cc-checklist__side { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* Digest — "since you last looked". */
.cc-digest { display: flex; flex-direction: column; }
.cc-digest__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.cc-digest__row:last-child { border-bottom: 0; }
.cc-digest__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  min-width: 68px;
  text-align: right;
  color: var(--ink);
}
.cc-digest__n--teal { color: var(--teal); }
.cc-digest__n--mulberry { color: var(--mulberry); }
.cc-digest__n--crit { color: var(--crit); }
.cc-digest__n--warn { color: var(--warn); }
.cc-digest__t { flex: 1 1 auto; font-size: 13px; color: var(--ink-2); }

/* Reorderable fallback chain. */
.cc-chain { display: flex; flex-direction: column; gap: 8px; }
.cc-chain__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.cc-chain__item.is-primary { border-color: var(--teal); background: var(--teal-tint); }
.cc-chain__rank {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.cc-chain__item.is-primary .cc-chain__rank { background: var(--teal); color: var(--on-teal); }
.cc-chain__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-chain__move { flex: 0 0 auto; display: flex; gap: 4px; }

/* Timeline / activity rows. */
.cc-timeline { display: flex; flex-direction: column; }
.cc-timeline__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.cc-timeline__row:last-child { border-bottom: 0; }
.cc-timeline__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink-2);
  padding-top: 2px;
}
.cc-timeline__body { min-width: 0; font-size: 13px; }
.cc-timeline__body b { font-weight: 600; }

/* ======================================================= EMPTY / NOT BUILT == */

.cc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 42px 24px;
}
.cc-empty--inline { padding: 26px 18px; }
.cc-empty__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-3);
  margin-bottom: 2px;
}
.cc-empty__title { font-size: 15px; font-weight: 700; }
.cc-empty__text {
  font-size: 13px;
  color: var(--ink-2);
  max-width: 54ch;
}
.cc-empty__actions { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* The designed "not built yet" page. Never an empty box, never a fake number. */
.cc-soon__banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-lg);
  margin-bottom: var(--gap);
}
.cc-soon__banner-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--warn-tint);
  color: var(--warn);
}
.cc-soon__banner-body { min-width: 0; }
.cc-soon__banner-body b { display: block; font-size: 13.5px; font-weight: 700; }
.cc-soon__banner-body p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }

.cc-willshow { display: flex; flex-direction: column; gap: 11px; }
.cc-willshow__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.cc-willshow__bullet {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
/* Teal on a Customers page, mulberry on a Staff page: the two worlds are
   worth signalling, and neutral everywhere they do not apply. */
.cc-willshow__bullet--teal { background: var(--teal-tint); color: var(--teal); }
.cc-willshow__bullet--mulberry { background: var(--mulberry-tint); color: var(--mulberry); }
.cc-willshow__item span { color: var(--ink-2); }

.cc-sources { display: flex; flex-direction: column; gap: 10px; }
.cc-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--surface);
}
.cc-source__body { flex: 1 1 auto; min-width: 0; }
.cc-source__body b { display: block; font-size: 12.5px; font-weight: 600; }
.cc-source__body span { font-size: 11.5px; color: var(--ink-2); }

/* ------------------------------------------------------ PAGE SKETCHES ----
   A page that is not built yet still has a shape. One grey skeleton reused on
   every page told the reader nothing and made 25 pages look like one, so each
   sketch below is cut to the page it belongs to: a calendar reads as a
   calendar, a directory as rows of people, a form as labelled fields.
   Everything here is deliberately colourless and dashed — it must never be
   mistaken for data. Real column names and field names are labels, not
   numbers, so they stay: they are the honest part.
   ------------------------------------------------------------------------ */

.cc-wire {
  border: 1px dashed var(--field-line);
  border-radius: var(--r);
  background: var(--paper);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

/* the primitives every sketch is built from */
.cc-wire__bar {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__bar--thin { height: 7px; opacity: .72; }
.cc-wire__row {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__row--short { width: 45%; }
.cc-wire__row--mid { width: 72%; }
.cc-wire__chip {
  flex: 0 0 auto;
  width: 46px; height: 15px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__mark {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--field-line);
}
.cc-wire__lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cc-wire__caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  margin: 10px 0 0;
}

/* a status board — one row per thing being watched */
.cc-wire--board { gap: 8px; }
.cc-wire__brow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-wire__brow .cc-wire__bar { flex: 0 0 auto; }
.cc-wire__brow .cc-wire__chip { margin-left: auto; }

/* a coverage calendar — one square per day. Capped, because seven square
   cells across a full-width card gives 120px days and swamps the page. */
.cc-wire--cal { gap: 6px; max-width: 430px; margin-inline: auto; }
.cc-wire__calhead,
.cc-wire__calgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cc-wire__dow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-2);
  text-align: center;
}
.cc-wire__day {
  aspect-ratio: 1 / 1;
  min-height: 18px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__day--gap { border-style: dashed; border-color: var(--field-line); background: transparent; }
.cc-wire__day--none { background: transparent; border-color: transparent; }

/* a timetable — jobs down the side, the clock across the top */
.cc-wire--tt { gap: 7px; }
.cc-wire__ttrow { display: flex; align-items: center; gap: 10px; }
.cc-wire__ttname {
  flex: 0 0 74px;
  height: 9px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__ttlane {
  position: relative;
  flex: 1 1 auto;
  height: 16px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.cc-wire__ttlane i {
  position: absolute;
  top: 3px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--ink-3);
}
.cc-wire__tthours {
  display: flex;
  justify-content: space-between;
  padding-left: 84px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-2);
}

/* a feed — a time gutter and a body, over and over */
.cc-wire--feed { gap: 0; padding: 4px 14px; }
.cc-wire__frow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--hairline);
}
.cc-wire__frow:last-child { border-bottom: 0; }
.cc-wire__ftime {
  height: 8px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  margin-top: 2px;
}
.cc-wire__fbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* a list beside a reading pane */
.cc-wire--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 12px;
}
.cc-wire__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-wire__srow {
  display: block;
  height: 22px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__srow.is-on {
  border-color: var(--field-line);
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--ink-3);
}
.cc-wire__pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-wire__bub {
  display: block;
  height: 20px;
  border-radius: 10px 10px 10px 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__bub--me { border-radius: 10px 10px 3px 10px; align-self: flex-end; }

/* a directory of people */
.cc-wire--dir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.cc-wire__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-wire__avatar {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--field-line);
}
.cc-wire__pcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cc-wire__pcol i {
  height: 8px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.cc-wire__pcol i.cc-wire__thin { height: 6px; opacity: .7; }

/* a table with its real columns named, and no rows to invent */
.cc-wire--table { gap: 0; padding: 0; }
.cc-wire__thead,
.cc-wire__trow {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 12px;
  padding: 9px 13px;
  align-items: center;
}
.cc-wire__thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cc-wire__thead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-wire__tbody { background: var(--surface); }
.cc-wire__trow { border-bottom: 1px dashed var(--hairline); }
.cc-wire__trow:last-child { border-bottom: 0; }
.cc-wire__trow i {
  display: block;
  height: 8px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

/* a trend chart with axes and no series worth naming */
.cc-wire--chart { gap: 10px; }
.cc-wire__svg { width: 100%; height: 132px; display: block; }
.cc-wire__ax { stroke: var(--field-line); stroke-width: 1; }
.cc-wire__mid { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 3; }
.cc-wire__series { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 5 4; }
.cc-wire__chartfoot { display: flex; gap: 8px; flex-wrap: wrap; }

/* a form, with the field names it will really ask for */
.cc-wire--form { gap: 11px; }
.cc-wire__fld { display: flex; flex-direction: column; gap: 4px; }
.cc-wire__box {
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--field-line);
}
.cc-wire__btns { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.cc-wire__btn {
  width: 84px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--field-line);
}
.cc-wire__btn--ghost { width: 62px; background: transparent; border-style: dashed; }
.cc-wire__btnlabel {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cc-wire--runform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.cc-wire__formcol { display: flex; flex-direction: column; gap: 11px; }

/* a list of things, each with switches */
.cc-wire--tog { gap: 7px; }
.cc-wire__toghead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 46px;
  gap: 10px;
  text-align: center;
}
.cc-wire__togrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 46px;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-wire__sw {
  justify-self: center;
  position: relative;
  width: 30px; height: 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--field-line);
}
.cc-wire__sw::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink-3);
}
.cc-wire__sw.is-on::after { left: auto; right: 2px; background: var(--teal); }

/* two lanes on one clock — the whole point of the cross-source page */
.cc-wire--lanes { gap: 4px; }
.cc-wire__lanerow { display: flex; align-items: center; gap: 10px; }
.cc-wire__lanetag {
  flex: 0 0 56px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.cc-wire__lanetag--teal { background: var(--teal-tint); color: var(--teal); }
.cc-wire__lanetag--mulberry { background: var(--mulberry-tint); color: var(--mulberry); }
.cc-wire__lane {
  position: relative;
  flex: 1 1 auto;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.cc-wire__pip {
  position: absolute;
  top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cc-wire__pip--teal { background: var(--teal); }
.cc-wire__pip--mulberry { background: var(--mulberry); }
.cc-wire__laneaxis {
  height: 0;
  margin: 5px 0 5px 66px;
  border-top: 1px dashed var(--field-line);
}

/* a log console */
.cc-wire--con { gap: 7px; background: var(--surface-2); }
.cc-wire__cline { display: flex; align-items: center; gap: 9px; }
.cc-wire__cline i {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.cc-wire__ctime { flex: 0 0 54px; }
.cc-wire__ctag { flex: 0 0 34px; border-style: dashed; border-color: var(--field-line); }
.cc-wire__ctext { flex: 0 0 auto; }

@media (max-width: 560px) {
  .cc-wire--split,
  .cc-wire--runform { grid-template-columns: minmax(0, 1fr); }
  .cc-wire__thead,
  .cc-wire__trow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-wire__thead span:nth-child(n+3),
  .cc-wire__trow span:nth-child(n+3) { display: none; }
}

/* ================================================================ MODAL ==== */

.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: var(--backdrop);
  overflow-y: auto;
}
.cc-modal.is-open { display: flex; }
.cc-modal__panel {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  margin: auto 0;
  animation: cc-rise .16s ease both;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.cc-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--hairline);
}
.cc-modal__head h2 { font-size: 16px; flex: 1 1 auto; }
.cc-modal__body { padding: var(--pad); }
.cc-modal__foot {
  padding: 14px var(--pad);
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ================================================================ TOASTS ==== */

.cc-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(360px, calc(100vw - 36px));
}
.cc-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--teal);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  animation: cc-slide .18s ease both;
}
.cc-toast--ok { border-left-color: var(--ok); }
.cc-toast--warn { border-left-color: var(--warn); }
.cc-toast--crit { border-left-color: var(--crit); }
.cc-toast__body { flex: 1 1 auto; min-width: 0; }
.cc-toast__body b { display: block; font-size: 13px; font-weight: 700; }
.cc-toast__body span { font-size: 12.5px; color: var(--ink-2); }
.cc-toast__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
@keyframes cc-slide {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* ========================================================= NOTIFICATIONS ===
   The bell in the top bar, the panel that drops out of it, and the row both
   that panel and the full history page are built from. ONE row component in
   two places, because a row that meant "unread" in the panel and something
   else on the page is the drift a shared component exists to prevent.

   READ AND UNREAD ARE NOT A TINT. An unread row carries a spine in its
   severity colour, a filled marker and a bold title; a read one is hollow,
   lighter and dimmed. Colour is never the only signal — the marker changes
   from a ring to a disc, the weight changes, and the row carries the word
   itself in a .cc-sr span for anyone who cannot see either.
   ========================================================================= */

.cc-bell { position: relative; display: inline-flex; }

/* A number, not a dot. "Three things" and "something" are different news, and
   the person deciding whether to stop what they are doing needs the first. */
.cc-bell__count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--crit);
  color: var(--on-crit);
  border: 1.5px solid var(--surface);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.cc-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(430px, calc(100vw - 24px));
  max-height: min(600px, calc(100vh - var(--topbar-h) - 30px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  animation: cc-rise .14s ease both;
}
.cc-bell__panel[hidden] { display: none; }
/* the badge carries an author `display`, which beats the user-agent
   [hidden] { display: none } rule — without this it shows a red 0 on every
   page and reading your notifications never clears it */
.cc-bell__count[hidden] { display: none; }

.cc-bell__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cc-bell__head b { flex: 1 1 auto; font-size: 13.5px; }

.cc-bell__foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
}
.cc-bell__body .cc-empty { border: 0; }

/* The two filter rows. Shared between the panel and the history card, so the
   same chips mean the same thing in both; only the chrome differs. */
.cc-notefilters { display: flex; flex-direction: column; gap: 8px; }
.cc-bell__panel .cc-notefilters {
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.cc-card .cc-notefilters { margin-bottom: 6px; }

/* ------------------------------------------------------------ the rows -- */

.cc-notes { list-style: none; margin: 0; padding: 0; }

.cc-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
}
.cc-note:last-child { border-bottom: 0; }

.cc-note.is-unread.is-ok   { border-left-color: var(--ok); }
.cc-note.is-unread.is-warn { border-left-color: var(--warn); }
.cc-note.is-unread.is-crit { border-left-color: var(--crit); }

.cc-note__mark {
  flex: 0 0 auto;
  margin-top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink-3);
  background: transparent;
}
.cc-note.is-unread .cc-note__mark { border-color: transparent; }
.cc-note.is-unread.is-ok   .cc-note__mark { background: var(--ok); }
.cc-note.is-unread.is-warn .cc-note__mark { background: var(--warn); }
.cc-note.is-unread.is-crit .cc-note__mark { background: var(--crit); }

.cc-note__body { flex: 1 1 260px; min-width: 0; }
.cc-note__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
.cc-note__title:hover {
  color: var(--teal);
  text-decoration-color: currentColor;
}
.cc-note:not(.is-unread) .cc-note__title {
  font-weight: 500;
  color: var(--ink-2);
}
/* bodies are built with '

' paragraph breaks; without this they
   collapse into one run-on wall of text */
.cc-note__text { white-space: pre-line;
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cc-note__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}
.cc-note__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cc-note__form { display: inline-flex; align-items: center; gap: 5px; }
.cc-note__form .cc-select {
  height: 28px;
  padding: 0 30px 0 9px;
  background-position: calc(100% - 15px) 12px, calc(100% - 10px) 12px;
  font-size: 12px;
  max-width: 150px;
}

/* A resolved notification stays in the list and stays quieter. Deleting it
   would make a condition that came and went look as though it never did. */
.cc-note.is-resolved { opacity: .72; }

/* In the dropdown there is no room for a column of buttons beside the text,
   so they sit under it, indented to the marker's column. */
.cc-bell__panel .cc-note { flex-wrap: wrap; }
.cc-bell__panel .cc-note__side {
  width: 100%;
  margin-left: 21px;
  justify-content: flex-start;
}

@media (max-width: 620px) {
  .cc-note { flex-wrap: wrap; }
  .cc-note__side {
    width: 100%;
    margin-left: 21px;
    justify-content: flex-start;
  }
}

/* ===================================================== PROTOTYPE-ONLY BAR ==
   Everything below exists so a human can flip between states. The server-
   rendered page reproduces NONE of it.
   ========================================================================= */

.cc-protobar {
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
:root[data-theme="dark"] .cc-protobar { background: #05171B; color: #DCE9EC; }
.cc-protobar b {
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 10px;
  opacity: .75;
}
.cc-protobar .cc-switch { color: inherit; font-family: var(--font-mono); font-size: 11.5px; }
.cc-protobar .cc-switch__track { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .52); }
.cc-protobar .cc-switch__track::after { background: rgba(255, 255, 255, .55); }
.cc-protobar .cc-switch input:checked + .cc-switch__track { background: var(--teal); border-color: var(--teal); }
.cc-protobar .cc-switch input:checked + .cc-switch__track::after { background: #FFFFFF; }
.cc-protobar__btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: inherit;
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font: inherit;
  cursor: pointer;
}
.cc-protobar__btn:hover { background: rgba(255, 255, 255, .10); }
.cc-protobar__spacer { flex: 1 1 auto; }

/* ==================================================== AUTHENTICATION ======
   The screens somebody sees BEFORE they are inside: sign in, the six-digit
   code, setting up the authenticator, the recovery codes, and the invitation
   landing page. They share no shell with the portal — there is no rail and no
   top bar, because there is nothing yet that this person is allowed to open —
   so they are a component of their own rather than a card floated on nothing.
   ========================================================================= */

.cc-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--paper);
}
.cc-auth__card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px var(--pad);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  text-align: center;
}
/* Forms and lists inside read left-to-right; only the masthead is centred. */
.cc-auth__card .cc-form,
.cc-auth__card .cc-field,
.cc-auth__card .cc-kv,
.cc-auth__card .cc-auth__steps,
.cc-auth__card .cc-auth__secret { text-align: left; }

.cc-auth__mark {
  width: 40px; height: 40px;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--teal);
  color: var(--on-teal);
}
.cc-auth__title { font-size: 20px; }
.cc-auth__tenant {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: -10px;
}
.cc-auth__sub { font-size: 13.5px; color: var(--ink-2); }

.cc-auth__state {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-3);
  background: var(--surface-2);
}
.cc-auth__state b { font-size: 13px; }
.cc-auth__state span { font-size: 12.5px; color: var(--ink-2); }
.cc-auth__state--ok   { border-left-color: var(--ok); }
.cc-auth__state--warn { border-left-color: var(--warn); }
.cc-auth__state--crit { border-left-color: var(--crit); }

.cc-auth__steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* The QR is fixed black on white whatever the theme: a code that does not
   scan is worse than one that clashes, and it has to survive a dark page. */
.cc-auth__qr {
  width: 176px;
  margin: 2px auto;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.cc-auth__qr svg { display: block; width: 100%; height: auto; }

.cc-auth__secret { display: flex; flex-direction: column; gap: 5px; }
.cc-auth__secret code {
  font-size: 14px;
  letter-spacing: .12em;
  padding: 8px 10px;
  text-align: center;
  white-space: normal;
  word-break: break-all;
}

/* A six-digit code is read back aloud and typed in a hurry, so it gets room. */
.cc-auth__code-input {
  font-size: 22px;
  letter-spacing: .32em;
  text-align: center;
}

.cc-auth__codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.cc-auth__recovery {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 7px 4px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  user-select: all;
}

.cc-auth__details { text-align: left; font-size: 13px; }
.cc-auth__details summary { cursor: pointer; color: var(--ink-2); }
.cc-auth__details summary:hover { color: var(--ink); }
.cc-auth__abandon { margin-top: -4px; }
.cc-auth__kv { text-align: left; }

.cc-auth__foot {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* A button that owns its whole row — the single action on an auth screen. */
.cc-btn--block { width: 100%; }

/* The second series in the stacked token chart: the staff assistant, which is
   the Lark world and therefore mulberry, against teal for customer analysis. */
.cc-bar--mulberry { fill: var(--mulberry); }

/* The day-one switch: swap which half of an AI panel is rendered. */
.cc-onlyempty { display: none; }
.cc-app[data-empty="1"] .cc-onlyempty { display: block; }
.cc-app[data-empty="1"] .cc-onlydata { display: none; }

/* ========================================================== RESPONSIVE ===== */

@media (max-width: 1024px) {
  .cc-app { grid-template-columns: minmax(0, 1fr); }
  .cc-app.is-collapsed { --rail-w: 260px; }

  .cc-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 268px;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: none;
  }
  .cc-app.is-drawer .cc-rail { transform: none; box-shadow: var(--shadow-3); }
  .cc-app.is-drawer .cc-scrim { display: block; }

  /* In the drawer the rail is never the collapsed icon-strip. */
  .cc-app.is-collapsed .cc-nav__text,
  .cc-app.is-collapsed .cc-nav__chev,
  .cc-app.is-collapsed .cc-nav__dot,
  .cc-app.is-collapsed .cc-nav__eyebrow,
  .cc-app.is-collapsed .cc-rail__name,
  .cc-app.is-collapsed .cc-rail__env { display: revert; }
  .cc-app.is-collapsed .cc-nav__count {
    position: static;
    width: auto; height: auto;
    padding: 1px 6px;
    border: 0;
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--rail-ink);
    overflow: visible;
    background: rgba(255, 255, 255, .08);
  }
  .cc-app.is-collapsed .cc-nav__count--crit { color: #2A0E0B; background: var(--rail-crit); }
  .cc-app.is-collapsed .cc-nav__count-n {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto;
  }
  .cc-app.is-collapsed .cc-nav__panel { display: grid; }
  .cc-app.is-collapsed .cc-nav__link,
  .cc-app.is-collapsed .cc-nav__section { justify-content: flex-start; padding: 8px 10px; }
  .cc-app.is-collapsed .cc-rail__brand { justify-content: flex-start; padding: 0 14px; }
  .cc-app.is-collapsed .cc-rail__foot { justify-content: flex-start; padding: 10px 12px; }

  .cc-rail__collapse { display: none; }
  .cc-rail__close { display: grid; place-items: center; }
  .cc-topbar__menu { display: inline-flex; }
}

@media (max-width: 760px) {
  .cc-content { padding: 18px 14px 48px; }
  .cc-topbar { padding: 0 12px; gap: 8px; }
  .cc-search { flex: 1 1 auto; }
  .cc-search__kbd { display: none; }
  .cc-search__input { padding-right: 12px; }
  .cc-account__name { display: none; }
  .cc-account { padding: 4px; }
  .cc-pagehead h1 { font-size: 21px; }
  .cc-pagehead__actions { width: 100%; }

  /* The prototype bar was wrapping to four lines and eating a sixth of a
     phone screen. Only the day-one switch is worth that space. */
  .cc-protobar { flex-wrap: nowrap; gap: 10px; }
  .cc-protobar__extra { display: none; }
}

@media (max-width: 420px) {
  :root { --pad: 15px; --gap: 12px; }
  .cc-tile__value { font-size: 23px; }
  .cc-toasts { right: 10px; left: 10px; bottom: 10px; max-width: none; }
  .cc-protobar { padding: 8px 12px; gap: 10px; }
}

/* Print: nobody prints this, but if they do, give them the content. */
@media print {
  .cc-rail, .cc-topbar, .cc-protobar, .cc-toasts { display: none !important; }
  .cc-app { display: block; }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cc-nav__panel { transition: none; }
}

/* ============================================================================
   BUILD 2 — the brand, and the components the built pages need.

   Everything above this line is the original design system. Everything below
   is additive: no rule here changes an existing selector's declarations, so a
   page built against the first half still renders exactly as it did.

   Two things are worth reading before editing anything here.

   1. THE LOGO IS ONE ASSET, USED TWICE. gtc-light.png and gtc-dark.png were
      verified to have BYTE-IDENTICAL alpha channels — they are the same
      artwork in two colourways — so the dark version is not shipped at all.
      The light lockup rides here as a 24-colour PNG data URI (5.6 KB of
      base64, down from 45 KB) and the dark rail re-uses the SAME data URI as
      a CSS mask, painting it in --rail-ink-strong. That is why there is no
      second encoding to keep in step, and why the rail's logo follows the
      rail's ink token instead of being a picture of one particular grey.

   2. THE COLLAPSED RAIL GETS A SQUARE MARK, NOT THE LOCKUP. The lockup is
      2.6:1; at 68px of rail it would either be four pixels tall or cropped
      mid-word. --gtc-mark is the angular glyph on its own, cropped out of the
      same artwork and padded to a square.

   Both live in this stylesheet rather than in the page HTML on purpose: this
   file is one cached request, and the pages are not — inlining 7 KB of base64
   into every page render would pay for the logo on every click.
   ========================================================================= */

:root {
  --gtc-lockup: url("data:image/png;base64,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");
  --gtc-mark:   url("data:image/png;base64,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");
  /* The client's brand navy, for the one place the artwork is not used: the
     focus ring around the sign-in lockup. */
  --gtc-navy:   #181860;
}

/* The rail is a dark surface in BOTH themes, so its logo is ALWAYS the masked
   one. mask-image with an image source masks by that image's alpha, which is
   exactly what we want and is why the coloured PNG can be re-used as-is. */
.cc-rail__logo {
  flex: 0 0 auto;
  width: 108px;
  height: 34px;
  background-color: var(--rail-ink-strong);
  -webkit-mask-image: var(--gtc-lockup);
  mask-image: var(--gtc-lockup);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cc-rail__logo--mark {
  display: none;
  width: 30px;
  height: 30px;
  -webkit-mask-image: var(--gtc-mark);
  mask-image: var(--gtc-mark);
  -webkit-mask-position: center;
  mask-position: center;
}
/* A browser with no mask support would paint a solid rectangle, which reads as
   a rendering bug rather than a logo. @supports keeps those on the wordmark
   that is already in the markup beside it. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .cc-rail__logo { display: none; }
}
.cc-app.is-collapsed .cc-rail__logo { display: none; }
.cc-app.is-collapsed .cc-rail__logo--mark { display: block; }

/* The tenant line under the logo. The logo says GTC; this says which system. */
.cc-rail__sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rail-accent);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.cc-app.is-collapsed .cc-rail__sub { display: none; }

/* Sign-in: the real colours, because that card is light in the light theme.
   In the dark theme the artwork's navy would disappear into the panel, so the
   mask is used there instead — the one place the two themes differ. */
.cc-auth__logo {
  display: block;
  width: 168px;
  height: 65px;
  margin: 0 auto 6px;
  background-image: var(--gtc-lockup);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (prefers-color-scheme: dark) {
  .cc-auth__logo {
    background-image: none;
    background-color: var(--ink);
    -webkit-mask-image: var(--gtc-lockup);
    mask-image: var(--gtc-lockup);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}
:root[data-theme="dark"] .cc-auth__logo {
  background-image: none;
  background-color: var(--ink);
  -webkit-mask-image: var(--gtc-lockup);
  mask-image: var(--gtc-lockup);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
:root[data-theme="light"] .cc-auth__logo {
  background-image: var(--gtc-lockup);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ------------------------------------------------- the language switch -- */

.cc-langswitch { display: inline-flex; }
.cc-langswitch__set {
  display: inline-flex;
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  overflow: hidden;
}
.cc-langswitch__btn {
  appearance: none;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  min-height: 30px;
}
.cc-langswitch__btn + .cc-langswitch__btn {
  border-left: 1px solid var(--field-line);
}
.cc-langswitch__btn:hover { background: var(--surface-2); color: var(--ink); }
.cc-langswitch__btn[aria-pressed="true"] {
  background: var(--teal);
  color: var(--on-teal);
  font-weight: 600;
}
.cc-langswitch__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* -------------------------------------------- states: the three figures -- */
/*
   A count on this page is never just a number: it carries the sentence that
   defines it and a link to the rows behind it. --cc-figure is the shape that
   forces all three, so a figure cannot be added without them.
*/
.cc-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap);
}
.cc-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.cc-figure--warn { border-color: var(--warn); background: var(--warn-tint); }
.cc-figure--crit { border-color: var(--crit); background: var(--crit-tint); }
.cc-figure--ok   { border-color: var(--ok);   background: var(--ok-tint); }
.cc-figure__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cc-figure__value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cc-figure__value--none { font-size: 21px; color: var(--ink-2); }
.cc-figure__def {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.cc-figure__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* The bucket breakdown. A bar per bucket, worst at the bottom, each one a link
   to exactly the rows it counts. */
.cc-buckets { display: grid; gap: 8px; }
.cc-bucket {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
a.cc-bucket:hover { background: var(--surface-2); border-color: var(--hairline); }
a.cc-bucket:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cc-bucket__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.cc-bucket__track {
  height: 12px;
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 40px;
}
.cc-bucket__fill { height: 100%; border-radius: 6px; background: var(--teal); }
.cc-bucket__fill--warn { background: var(--warn); }
.cc-bucket__fill--crit { background: var(--crit); }
.cc-bucket__n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3ch;
  text-align: right;
}
.cc-bucket.is-empty .cc-bucket__n { color: var(--ink-3); font-weight: 400; }

/* --------------------------------------------------- the drill-through -- */
/*
   Elian's standing rule: a number is never a dead end. Every list reached by
   clicking a number opens with this band, which says IN WORDS the filter that
   produced it and offers the way back. A list without one is a list somebody
   can misread.
*/
.cc-filterband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--teal);
  border-left-width: 4px;
  border-radius: var(--r);
  background: var(--teal-tint);
  margin-bottom: var(--gap);
}
.cc-filterband__body { min-width: 0; flex: 1 1 260px; }
.cc-filterband__title {
  display: block;
  font-weight: 650;
  font-size: 13px;
  color: var(--ink);
}
.cc-filterband__text {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin-top: 2px;
}
.cc-filterband__side { flex: 0 0 auto; display: flex; gap: 8px; }

/* ------------------------------------------------ the conversation view -- */
/*
   A replica of the chat, not a table of rows. Bubbles left for the customer,
   right for the agent, and — the part that matters — SILENCE DRAWN AS SILENCE.
   An eighteen-hour gap is the finding on most of these conversations, so it
   gets a full-width rule with the duration written on it rather than being
   something you work out by subtracting two timestamps.
*/
.cc-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.cc-chat__day {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 6px 0 2px;
}
.cc-msg {
  display: flex;
  flex-direction: column;
  max-width: min(74%, 640px);
  align-self: flex-start;
}
.cc-msg--agent { align-self: flex-end; align-items: flex-end; }
.cc-msg__who {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 3px;
  padding: 0 4px;
}
.cc-msg__bub {
  border-radius: 14px;
  padding: 9px 13px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  /* Chat text is Persian, Arabic, Chinese and Hindi as often as English. It
     must wrap on any character and must never force the page sideways. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 0;
}
.cc-msg--agent .cc-msg__bub {
  background: var(--teal-tint);
  border-color: var(--teal);
}
.cc-msg--system .cc-msg__bub {
  background: transparent;
  border-style: dashed;
  color: var(--ink-2);
  font-style: italic;
}
.cc-msg__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 3px;
  padding: 0 4px;
}
.cc-msg.is-new .cc-msg__bub {
  /* A message that arrived while somebody was watching. The outline is not the
     only signal — every new bubble also carries the words "just arrived". */
  box-shadow: 0 0 0 2px var(--warn);
}

/* A message whose content is not text. 38,937 image messages in this database
   carry NO retrievable picture, so this is never a broken <img> — it is a
   labelled placeholder that says what is known and what is not. */
.cc-msg__att {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px dashed var(--field-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.cc-msg__att svg { flex: 0 0 auto; color: var(--ink-3); }
.cc-msg__att b { color: var(--ink); font-weight: 600; }

/* The translation, BESIDE the original and never instead of it. */
.cc-msg__tr {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--field-line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cc-msg__tr::before {
  content: attr(data-lang);
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.cc-msg__tr--failed { color: var(--ink-2); font-style: italic; }

/* SILENCE. The width of the rule is constant; the WORDS carry the size, and
   the tone carries the severity, because a bar scaled to eighteen hours would
   make a four-minute gap invisible and a three-day gap absurd. */
.cc-gap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--ink-2);
}
.cc-gap::before,
.cc-gap::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--hairline);
}
.cc-gap__text {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.cc-gap--warn { color: var(--warn); }
.cc-gap--warn::before, .cc-gap--warn::after { border-top-color: var(--warn); }
.cc-gap--warn .cc-gap__text {
  background: var(--warn-tint);
  border-color: var(--warn);
  color: var(--warn);
  font-weight: 600;
}
.cc-gap--crit { color: var(--crit); }
.cc-gap--crit::before, .cc-gap--crit::after { border-top-color: var(--crit); }
.cc-gap--crit .cc-gap__text {
  background: var(--crit-tint);
  border-color: var(--crit);
  color: var(--crit);
  font-weight: 700;
}

/* The live-supervise strip above the transcript. */
.cc-livebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--surface-2);
  margin-bottom: 12px;
}
.cc-livebar__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.cc-livebar__spacer { flex: 1 1 auto; }
.cc-livedot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
  flex: 0 0 auto;
}
.cc-livebar.is-live .cc-livedot { background: var(--ok); animation: cc-pulse 2s infinite; }
.cc-livebar.is-stale .cc-livedot { background: var(--warn); }
.cc-livebar.is-error .cc-livedot { background: var(--crit); }
@keyframes cc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.cc-chatwrap {
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* ---------------------------------------------------- the preview pane -- */
/*
   The alert rule builder. The form on the left, the REAL rendered email and
   the REAL rendered Lark card on the right — both produced by the same
   alert_rules functions the delivery path calls, so what is shown is what is
   sent. There is no mock-up in this stylesheet or in the page.
*/
.cc-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1100px) {
  .cc-builder { grid-template-columns: minmax(0, 1fr); }
}
.cc-preview {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  display: grid;
  gap: 12px;
}
@media (max-width: 1100px) { .cc-preview { position: static; } }
.cc-preview__note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.cc-preview[aria-busy="true"] { opacity: .55; }

/* The email, drawn as an email: a header block of From/To/Subject and the
   body in the monospace it will actually arrive as. */
.cc-mail {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.cc-mail__head {
  padding: 10px 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 3px;
}
.cc-mail__row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}
.cc-mail__k {
  flex: 0 0 62px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1px;
}
.cc-mail__v { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.cc-mail__v--subject { font-weight: 650; }
.cc-mail__body {
  padding: 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  max-height: 340px;
  overflow-y: auto;
}
.cc-mail.is-undeliverable { border-color: var(--warn); }

/* The Lark card, drawn to the proportions Lark actually gives it. */
.cc-larkcard {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  max-width: 420px;
}
.cc-larkcard__head {
  padding: 10px 14px;
  font-weight: 650;
  font-size: 13.5px;
  color: #FFFFFF;
  background: #A62F26;
}
.cc-larkcard__head--red { background: #A62F26; }
.cc-larkcard__head--orange { background: #96650B; }
.cc-larkcard__head--blue { background: #0B6E7C; }
.cc-larkcard__head--green { background: #2C7048; }
.cc-larkcard__head--grey { background: #3D5158; }
.cc-larkcard__body {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cc-larkcard__note {
  padding: 8px 14px 12px;
  font-size: 11.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------ knowledge base -- */

.cc-drop {
  border: 2px dashed var(--field-line);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  background: var(--surface-2);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.cc-drop.is-over { border-color: var(--teal); background: var(--teal-tint); }
.cc-drop__title { font-weight: 650; color: var(--ink); }
.cc-drop__text { font-size: 12.5px; color: var(--ink-2); margin: 0; max-width: 52ch; }
.cc-drop__file {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.cc-typelist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cc-typerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cc-typerow code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* The unified diff between two versions of a document. */
.cc-diff {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-2);
}
.cc-diff__add { color: var(--ok); display: block; }
.cc-diff__del { color: var(--crit); display: block; }
.cc-diff__at  { color: var(--ink-3); display: block; font-weight: 600; }

/* --------------------------------------------------------- odds & ends -- */

/* Text pulled out of the database and shown verbatim — a document, a report
   card, an excerpt of a chat. Never used for anything this app wrote. */
.cc-verbatim {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  max-height: 520px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--surface-2);
}

/* A horizontal bar chart, used for the day-of-week and hour breakdowns. It is
   a list, so a screen reader gets the numbers whatever happens to the bars. */
.cc-bars { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cc-bars__row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 10px;
}
.cc-bars__k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-bars__track {
  height: 14px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cc-bars__fill {
  height: 100%;
  background: var(--teal);
  border-radius: var(--r-sm);
  min-width: 2px;
}
.cc-bars__fill--peak { background: var(--crit); }
.cc-bars__v {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* Two-column read-only detail, used by the conversation header and the
   document header. Wider keys than cc-kv, which is sized for short values. */
.cc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
}
.cc-facts__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cc-facts__v {
  display: block;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin-top: 2px;
}

@media (max-width: 760px) {
  .cc-figure__value { font-size: 27px; }
  .cc-msg { max-width: 88%; }
  .cc-bucket { grid-template-columns: 76px 1fr auto; }
  .cc-bars__row { grid-template-columns: 70px 1fr auto; }
}

/* --------------------------------------------------------------------------
   page-change indicator
   A page here is a full server round trip and some of them are slow. The bar
   is painted by PAGE_SCRIPT the moment a navigation starts and dies with the
   old document, so it never needs turning off — there is no state to get
   stuck. It cannot claim progress it does not know about, so it slides to 70%
   and waits there rather than pretending to finish.
   -------------------------------------------------------------------------- */
.cc-busy {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  /* Above the modal (90) and the toasts (200): it is two pixels at the very
     top of the window and must never be the thing that is covered up. */
  z-index: 210;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  animation: cc-busy-grow 8s cubic-bezier(0, .6, .3, 1) forwards;
  pointer-events: none;
}

@keyframes cc-busy-grow {
  0%   { width: 0; }
  40%  { width: 45%; }
  100% { width: 70%; }
}

/* Someone who has asked for less motion still gets the signal, without the
   crawl: a static bar that simply appears. */
@media (prefers-reduced-motion: reduce) {
  .cc-busy { animation: none; width: 100%; opacity: .5; }
}