/* ==========================================================================
   flexo-console.css — Flexo 2.4.1 (build 34)
   GENERATED from flexo.md §19. Do not hand-edit.

   The back-office layer. Load order:
     flexo-tokens.css → flexo-components.css → flexo-spectrum.css → flexo-console.css

   RULES
   1. References published roles and Spectrum ONLY — never a hex, never a
      restated token, never a redefinition of a .flx- class.
   2. Panels are .flx-card + .flx-card-header; tables are .flx-row/.flx-cell;
      status is .flx-status; text actions are .flx-verb. This sheet adds only
      what a console has and the product does not.
   3. Start from Flexo Console.dc.html (the Console tab); this sheet is its
      class form, not a kit to design from (§19, §20 step 0).
   4. Light only (§19.10). A console ignores data-theme until Spectrum has dark tones.
   ========================================================================== */

:root {
  --cx-ground: var(--n-050);   /* §19.1 — the console's working plane, edge to edge */
  --cx-rail-w: 64px;           /* §19.2 — collapsed */
  --cx-rail-w-open: 300px;     /* §19.2 — expanded, as an overlay */

  /* §5c registry — channels */
  --cx-ch-email-050: var(--fx-blue-050);   --cx-ch-email-500: var(--fx-blue-500);   --cx-ch-email-800: var(--fx-blue-800);
  --cx-ch-push-050:  var(--fx-violet-050); --cx-ch-push-500:  var(--fx-violet-500); --cx-ch-push-800:  var(--fx-violet-800);
  --cx-ch-sms-050:   var(--fx-orange-050); --cx-ch-sms-500:   var(--fx-orange-500); --cx-ch-sms-800:   var(--fx-orange-800);
  --cx-ch-wa-050:    var(--fx-green-050);  --cx-ch-wa-500:    var(--fx-green-500);  --cx-ch-wa-800:    var(--fx-green-800);
  /* §5c registry — lanes */
  --cx-lane-otp:           var(--fx-magenta-500);
  --cx-lane-transactional: var(--fx-cyan-500);
  --cx-lane-service:       var(--fx-teal-500);
  --cx-lane-marketing:     var(--fx-lime-500);
}

/* ---------- §19.1 Shell ---------- */
.cx-shell  { min-height: 100vh; background: var(--cx-ground); color: var(--ink); display: flex; flex-direction: column; }
.cx-body   { flex: 1; display: flex; align-items: stretch; min-height: 0; }
.cx-column { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.cx-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cx-grid > .cx-wide { grid-column: 1 / -1; }   /* the hero panel takes the whole row; never span N, which overflows when fewer tracks fit */
/* §19.1 — full screen, edge to edge: no max-width. The black mark cell + the rail are ONE unbroken strip; nothing crosses it. */
.cx-header { position: sticky; top: 0; z-index: 40; height: 57px; display: flex; align-items: stretch; background: var(--card); }   /* NO border-bottom: it would cross the spine */
.cx-header::after { content: ""; position: absolute; left: var(--cx-rail-w); right: 0; bottom: 0; height: 1px; background: var(--rule); pointer-events: none; }   /* the rule starts AFTER the black cell */
.cx-mark { width: var(--cx-rail-w); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--n-900); }   /* full 57px: cell + rail = one unbroken black strip */

/* ---------- §19.2 The console rail — amendment v2.7: black, 64 → 300, every row a 44 × 44 square ---------- */
.cx-rail-spacer { width: var(--cx-rail-w); flex-shrink: 0; background: var(--n-900); }
.cx-rail { position: fixed; left: 0; top: 57px; bottom: 0; z-index: 30; width: var(--cx-rail-w); display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; background: var(--n-900); overflow: hidden auto; scrollbar-width: none;   /* no border: it would eat 1px and make the rows 43 × 44 */
  transition: width var(--t-feedback) var(--ease), box-shadow var(--t-feedback) var(--ease); }
.cx-rail::-webkit-scrollbar { display: none; }   /* scrolls, but never paints a thumb on the spine or takes width from the 44px rows */
.cx-rail:hover, .cx-rail:focus-within { width: var(--cx-rail-w-open); box-shadow: inset -1px 0 0 var(--n-800); }
.cx-rail__row { display: flex; align-items: center; gap: 6px; width: 100%; height: 44px; flex-shrink: 0; padding: 0; border: none; border-radius: 2px;
  background: transparent; color: var(--n-025); cursor: pointer; text-align: left; font: inherit;
  transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.cx-rail__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--n-400);
  transition: color var(--t-feedback) var(--ease); }
.cx-rail__icon svg { width: 20px; height: 20px; stroke-width: 1.25; }
.cx-rail__text { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; min-width: 0; opacity: 0; transition: opacity var(--t-feedback) var(--ease); }
.cx-rail:hover .cx-rail__text, .cx-rail:focus-within .cx-rail__text { opacity: 1; }
.cx-rail__name { font-family: var(--font-body); font-size: var(--t-body-s); font-weight: 500; line-height: var(--lh-ui); }
.cx-rail__desc { font-family: var(--font-body); font-size: var(--t-body-xs); line-height: var(--lh-ui); opacity: 0.62; }
.cx-rail__row:hover, .cx-rail__row[aria-current="page"] { background: var(--tint); color: var(--tint-ink); }
.cx-rail__row:hover .cx-rail__icon, .cx-rail__row[aria-current="page"] .cx-rail__icon { color: var(--tint-ink); }
.cx-rail__divider { display: block; flex-shrink: 0; height: 1px; background: var(--n-700); margin: 8px 0; }
@media (max-width: 820px) {
  .cx-body { flex-direction: column; }
  .cx-rail-spacer { display: none; }
  .cx-rail, .cx-rail:hover, .cx-rail:focus-within { position: sticky; top: 57px; width: 100%; flex-direction: row; padding: 6px 10px; overflow-x: auto; }
  .cx-rail__row { width: 44px; }
  .cx-rail__text, .cx-rail__divider { display: none; }
  .cx-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- §19.5 Accent rule — data-accent on a .flx-card (Signal once per screen) ---------- */
.flx-card[data-accent]            { border-top-width: 2px; border-top-style: solid; }
.flx-card[data-accent="signal"]   { border-top-color: var(--signal); }
.flx-card[data-accent="credit"]   { border-top-color: var(--credit); }
.flx-card[data-accent="debit"]    { border-top-color: var(--debit); }
.flx-card[data-accent="pending"]  { border-top-color: var(--pending); }
.flx-card[data-accent="neutral"]  { border-top-color: var(--ink); }
.flx-card[data-accent="empty"]    { border-top-color: var(--ink-ghost); }

/* A panel reporting a status colours its glyph's STROKE only (§7 v2.6). */
.flx-card-header__cell[data-state="credit"]  svg { stroke: var(--credit); }
.flx-card-header__cell[data-state="debit"]   svg { stroke: var(--debit); }
.flx-card-header__cell[data-state="pending"] svg { stroke: var(--pending); }

/* ---------- §19.3 Figures ---------- */
.cx-fig          { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.cx-fig--hero    { font-size: var(--t-figure-xl); line-height: 0.9; }
.cx-fig--display { font-size: var(--t-figure-display); line-height: 0.9; }
.cx-fig--inline  { font-size: var(--t-figure-inline); }
.cx-fig__dec     { font-size: 0.58em; }
.cx-fig__pt      { font-size: 0.58em; opacity: 0.55; }
.cx-fig__unit    { font-family: var(--font-mono); font-size: 0.42em; letter-spacing: 0.14em; opacity: 0.45; margin-left: 0.14em; }
.cx-fig__sec     { font-size: 0.58em; opacity: 0.45; }
.cx-fig--credit  { color: var(--credit); }   /* only when the number is the news, 32px and up */
.cx-fig--debit   { color: var(--debit); }

/* ---------- §19.4 Share bar + count meter ---------- */
.cx-bar            { display: flex; gap: 1px; height: 6px; background: var(--track); }
.cx-bar > span     { display: block; height: 100%; background: currentColor; }
.cx-bar > .cx-bar__secondary { opacity: 0.55; }
.cx-bar--unknown   { background: none; border: 1px dashed var(--border); }   /* the one dashed line: not reported */
.cx-meter          { display: flex; gap: 2px; }
.cx-meter > span   { width: 10px; height: 6px; background: var(--border); }
.cx-meter > .cx-meter__on { background: var(--credit); }

/* ---------- §19.5 Alert band ---------- */
.cx-alert          { background: var(--card); border: 1px solid var(--rule); }
.cx-alert__main    { display: flex; align-items: stretch; min-height: 88px; }
.cx-alert__cell    { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
                     background: var(--card); border-right: 1px solid var(--rule); }
.cx-alert__cell svg { width: 24px; height: 24px; stroke-width: 1.25; fill: none; stroke-linecap: square; }
.cx-alert__cell[data-state="credit"]  svg { stroke: var(--credit); }
.cx-alert__cell[data-state="debit"]   svg { stroke: var(--debit); }
.cx-alert__cell[data-state="pending"] svg { stroke: var(--pending); }
.cx-alert__text    { flex: 1; min-width: 0; padding: 0 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cx-alert__line    { font-family: var(--font-display); font-size: var(--t-title-l); font-weight: 500; letter-spacing: -0.02em; line-height: var(--lh-ui); }
.cx-alert__detail  { font-size: var(--t-body-s); line-height: var(--lh-ui); opacity: 0.62; }
.cx-alert__actions { display: flex; align-items: center; gap: 8px; padding: 0 20px; }
.cx-vitals         { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--hairline); }
.cx-vitals > *     { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.cx-vitals > * + * { border-left: 1px solid var(--hairline); }

/* ---------- §19.6 Period switch — the §11 chip as a joined group ---------- */
.cx-switch         { display: flex; border: 1px solid var(--border); background: var(--card); }
.cx-switch > button { font-family: var(--font-mono); font-size: var(--t-mono-label); line-height: var(--lh-ui); letter-spacing: 0.1em;
                     text-transform: uppercase; padding: 5px 9px; border: 0; background: transparent; color: var(--ink); cursor: pointer;
                     transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.cx-switch > button + button { border-left: 1px solid var(--border); }
.cx-switch > button:hover { background: var(--tint); color: var(--tint-ink); }
.cx-switch > button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* ---------- §19.7 Channel chips (§5c quiet tone, NO border) + identity squares ---------- */
.cx-ch             { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; font-family: var(--font-mono);
                     font-size: var(--t-mono-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
                     line-height: var(--lh-ui); white-space: nowrap; }
.cx-ch::before     { content: ""; width: 6px; height: 6px; flex-shrink: 0; }
.cx-ch--email      { background: var(--cx-ch-email-050); color: var(--cx-ch-email-800); } .cx-ch--email::before    { background: var(--cx-ch-email-500); }
.cx-ch--push       { background: var(--cx-ch-push-050);  color: var(--cx-ch-push-800); }  .cx-ch--push::before     { background: var(--cx-ch-push-500); }
.cx-ch--sms        { background: var(--cx-ch-sms-050);   color: var(--cx-ch-sms-800); }   .cx-ch--sms::before      { background: var(--cx-ch-sms-500); }
.cx-ch--whatsapp   { background: var(--cx-ch-wa-050);    color: var(--cx-ch-wa-800); }    .cx-ch--whatsapp::before { background: var(--cx-ch-wa-500); }
.cx-ch--off        { opacity: 0.45; }
.cx-sq             { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; margin-right: 12px; }
.cx-sq--otp           { background: var(--cx-lane-otp); }
.cx-sq--transactional { background: var(--cx-lane-transactional); }
.cx-sq--service       { background: var(--cx-lane-service); }
.cx-sq--marketing     { background: var(--cx-lane-marketing); }
/* A switched-off row dims its CONTENTS, never the row (§8): */
.flx-row[data-off] > * { opacity: 0.45; }


/* =====================================================================
   2.1.0 — THE FULL CATALOGUE (Tokens §19.12). Each block names its ID.
   These are the class forms of what Flexo Console.dc.html draws inline.
   Use them; never restyle them. A component missing here is a question.
   ===================================================================== */

/* C03 PAGE HEADER — eyebrow → 34px title → meta line led by the one Signal square. */
.cx-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 4px 0; }
.cx-ph__eyebrow { font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; }
.cx-ph__title { font-family: var(--font-display); font-size: 34px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.cx-ph__meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1; opacity: 0.62; }
.cx-ph__meta::before { content: ""; width: 6px; height: 6px; background: var(--signal); }

/* C04 SEGMENTED — exactly one is always picked. */
.cx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--card); }
.cx-seg__opt { font-family: var(--font-mono); font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; border: none; background: var(--card); color: var(--n-600); cursor: pointer; transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.cx-seg__opt + .cx-seg__opt { border-left: 1px solid var(--border); }
.cx-seg__opt.is-on { background: var(--ink); color: var(--on-ink); }

/* C07 ACCENT RULE — Signal on exactly one card per screen. */
.cx-rule--signal { border-top: 2px solid var(--signal); }
.cx-rule--credit { border-top: 2px solid var(--credit); }
.cx-rule--debit { border-top: 2px solid var(--debit); }
.cx-rule--pending { border-top: 2px solid var(--pending); }
.cx-rule--ink { border-top: 2px solid var(--ink); }

/* C08 HERO — figure-display 64, and it MOVES (use flexo-figure.js; never re-render a changed amount). */
.cx-hero { font-family: var(--font-display); font-size: 64px; font-weight: 300; letter-spacing: -0.05em; line-height: 1.08; font-variant-numeric: tabular-nums; }

/* C09 STAT + C10 SPARKLINE + C11 SHARE BAR */
.cx-stat__value { font-family: var(--font-display); font-size: 32px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-delta { font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--rule); opacity: 0.62; }
.cx-spark { display: block; width: 100%; height: 40px; overflow: visible; }   /* path: monotone, stroke --ink 1.5, area --track */
.cx-share { display: flex; gap: 1px; height: 6px; background: var(--track); }

/* C12–C18 CHARTS — monotone cubic, solid = measured, dashed = reference. */
.cx-plot { position: relative; height: 260px; margin: 24px 24px 0 66px; border-bottom: 1px solid var(--border); transition: height var(--t-feedback) var(--ease); }
.cx-plot.is-expanded { height: 420px; }                         /* C18: expand IN PLACE, never an overlay */
.cx-plot__grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hairline); }
.cx-plot__tick, .cx-axis { font-family: var(--font-mono); font-size: 9px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.45; font-variant-numeric: tabular-nums; }
.cx-plot__series { fill: none; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.cx-plot__ref { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ink); pointer-events: none; }   /* never measured → dashed */
.cx-plot__cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); pointer-events: none; }
.cx-plot__marker { position: absolute; width: 6px; height: 6px; transform: translate(-50%, -50%); pointer-events: none; }
.cx-tip { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 190px; background: #141414; color: #ffffff; }
.cx-tip__head { font-family: var(--font-mono); font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62; }
.cx-tip__value { font-family: var(--font-mono); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-tip__total { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.cx-bar { width: 10px; flex-shrink: 0; }                         /* C14–C16: 10px, centred, never scaled */
.cx-bar--in { background: var(--ink); } .cx-bar--out { background: var(--ink-ghost); }
.cx-col { transition: opacity var(--t-feedback) var(--ease); } .cx-col.is-dim { opacity: 0.28; }
.cx-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); z-index: 2; pointer-events: none; }   /* local z, above the bars */
.cx-meter { display: flex; gap: 2px; } .cx-meter > span { flex: 1; height: 6px; background: var(--track); } .cx-meter > span.is-on { background: var(--ink); }

/* C22 TABLE in a card — column header 36 (13 + 10 + 13). Rows from .flx-row (41 / 52 / 63). */
.cx-colhead { display: grid; align-items: center; border-bottom: 1px solid var(--rule); background: var(--card); }
.cx-colhead > span { padding: 13px 16px; font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; }
.cx-colhead > span.is-sorted { opacity: 1; }                     /* + " ↓" */

/* C28 BULK SELECTION — header box: .is-on all, .is-some shows the dash. */
.cx-check { width: 18px; height: 18px; border-radius: 1px; border: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-feedback) var(--ease), border-color var(--t-feedback) var(--ease); }
.cx-check.is-on, .cx-check.is-some { background: var(--ink); border-color: var(--ink); }

/* C29 DRAWER in a console — from the header down; the curtain stops at the rail. */
.cx-drawer { position: fixed; top: 57px; right: 0; bottom: 0; width: 410px; z-index: 50; background: var(--card); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform var(--t-feedback) cubic-bezier(0.2, 0.9, 0.24, 1); display: flex; flex-direction: column; }
.cx-drawer.is-open { transform: translateX(0); }
.cx-curtain { position: fixed; top: 0; bottom: 0; right: 0; left: var(--cx-rail-w); z-index: 45; background: rgba(0, 0, 0, 0.56); opacity: 0; pointer-events: none; transition: opacity var(--t-feedback) var(--ease); }
.cx-curtain.is-on { opacity: 1; pointer-events: auto; }

/* C32 / C33 DIALOG — 440, centred, scale 0.985 → 1; leaves in 200ms. */
.cx-dialog { position: fixed; left: 50%; top: 50%; z-index: 50; width: 440px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.985); transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 200ms; }
.cx-dialog.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); transition: transform 420ms cubic-bezier(0.2, 0.9, 0.24, 1), opacity 420ms; }
.cx-label { font-family: var(--font-mono); font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; }   /* every field labels above itself */

/* C36 SELECT · C37 DATE — panels at z 30, 4px below the field, elev-1. */
.cx-pop { position: absolute; top: calc(100% + 4px); z-index: 30; background: var(--card); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); }
.cx-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--hairline); background: var(--card); text-align: left; cursor: pointer; transition: background var(--t-feedback) var(--ease); }
.cx-opt:hover { background: var(--tint); color: var(--tint-ink); } .cx-opt.is-on { background: var(--n-050); }
.cx-date { display: grid; grid-template-columns: 72px 140px 80px; }
.cx-date__col { max-height: 200px; overflow-y: auto; border-right: 1px solid var(--hairline); }
.cx-date__item { display: block; width: 100%; padding: 8px 12px; border: none; background: var(--card); font-size: 13px; line-height: 1; text-align: left; cursor: pointer; }
.cx-date__item.is-num { font-family: var(--font-mono); }       /* numerals never in Plex */
.cx-date__item.is-on { background: var(--ink); color: var(--on-ink); }

/* C39 RADIO ROWS — selection inverts the whole row. */
.cx-radio { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 1px; background: var(--card); text-align: left; cursor: pointer; transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.cx-radio.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* C43 SAVE BAR — Save is inert until something changed. */
.cx-savebar { position: fixed; left: var(--cx-rail-w); right: 0; bottom: 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--card); border-top: 1px solid var(--rule); }

/* C45 CODE BLOCK — never inverts; no syntax colours. */
.cx-code { background: #141414; color: #ffffff; }
.cx-code__band { display: flex; align-items: stretch; height: 39px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.cx-code__tab { display: flex; align-items: center; padding: 0 14px; border: none; background: transparent; color: rgba(255, 255, 255, 0.55); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.cx-code__tab.is-on { color: #ffffff; box-shadow: inset 0 -1px 0 #ffffff; }
.cx-code pre { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; color: rgba(255, 255, 255, 0.85); }

/* C47 EMPTY PAGE */
.cx-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 72px 24px; border: 1px dashed var(--border); background: var(--field); text-align: center; }
.cx-empty svg { width: 96px; height: 96px; stroke-width: 0.6; }

/* C52 DOCUMENTATION CONTENTS — bands are headings, entries navigate, the chevron CELL only toggles. One bar. */
.cx-toc { position: sticky; top: 77px; width: 240px; background: var(--card); border: 1px solid var(--rule); }
.cx-toc__band { display: flex; align-items: stretch; height: 46px; margin-top: -1px; background: var(--field); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }   /* 44 of content, closed both sides */
.cx-toc__cell { width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cell); border-right: 1px solid var(--rule); }
.cx-toc__band-label { flex: 1; display: flex; align-items: center; padding: 0 16px; font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.cx-toc__row { display: flex; align-items: stretch; background: var(--card); border-bottom: 1px solid var(--rule); transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.cx-toc__row:hover { background: var(--tint); color: var(--tint-ink); }
.cx-toc__label { flex: 1; min-width: 0; display: flex; align-items: center; padding: 14px 16px; border: none; background: transparent; color: inherit; font-family: var(--font-body); font-size: 13px; line-height: 1; text-align: left; cursor: pointer; }   /* 41px */
.cx-toc__row.is-child .cx-toc__label { padding-left: 60px; }
.cx-toc__row.is-open { background: var(--tint); color: var(--tint-ink); }        /* v2.9: a DEPLOYED branch is tinted, NO bar — the bar is the current section's alone */
.cx-toc__row.is-open:hover { background: var(--tint-press); }
.cx-toc__row.is-open .cx-toc__label { font-weight: 500; }
.cx-toc__row.is-current { background: var(--tint); color: var(--tint-ink); box-shadow: inset 2px 0 0 var(--brand); }
.cx-toc__row.is-current .cx-toc__label { font-weight: 500; }
.cx-toc__row.is-current:hover { background: var(--tint-press); }
.cx-toc__chev { width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-left: 1px solid var(--rule); background: transparent; color: inherit; cursor: pointer; transition: background var(--t-feedback) var(--ease); }
.cx-toc__chev:hover { background: var(--tint-press); }
.cx-toc__chev svg { width: 18px; height: 18px; transition: transform var(--t-feedback) var(--ease); }
.cx-toc__chev[aria-expanded="true"] svg { transform: rotate(90deg); }

/* §19.1 header — the name never yields to the trailing cells; extras go at 1180px. */
.cx-header__name { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 0 20px; }
.cx-header__cell { flex-shrink: 0; }
@media (max-width: 1180px) { .cx-header__extra { display: none; } }

/* C53 lives in flexo-components.css (.flx-copy): a system component, not a console one. In a code band the cell is 38. */
.cx-code .flx-copy { --copy-size: 38px; }