/* Extracted from play.html by tools/split_play.py — INFRA.
   Linked at the SAME position the <style> block occupied: this sheet's cascade order
   is load-bearing, including several deliberate late overrides. */

  /* ── the slab: token palette per mode ─────────────────────────────────────────────────────── */
  /* LIGHT THEMES → DARK NAVY SLAB */
  html body.mvc-light .topbar{
    --slab-ink:#f2f6fc; --slab-ink-70:rgba(233,240,251,.74); --slab-ink-55:rgba(233,240,251,.6);
    --slab-line:rgba(233,240,251,.16); --slab-line-hi:rgba(233,240,251,.3);
    --slab-accent:#ff8a4f;                 /* 7.4:1 on #0b1c30 */
    --slab-fill:rgba(255,255,255,.06); --slab-fill-hi:rgba(255,255,255,.12);
    background:linear-gradient(180deg,#132743,#0b1c30 62%,#091729) !important;
    background-color:#0b1c30 !important;
    border-bottom:1px solid rgba(0,0,0,.6) !important;
    box-shadow:0 1px 0 rgba(233,240,251,.1) inset, 0 12px 26px -18px rgba(9,16,28,.85) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  /* DARK THEMES → PALE MACHINED SLATE RAIL */
  html body:not(.mvc-light) .topbar{
    --slab-ink:#0b1c30; --slab-ink-70:rgba(11,28,48,.82); --slab-ink-55:rgba(11,28,48,.74);  /* .6 measured 4.05:1 on the rail */
    --slab-line:rgba(11,28,48,.2); --slab-line-hi:rgba(11,28,48,.36);
    --slab-accent:#8a3b02;                 /* 5.2:1 on the darkest slab stop */
    --slab-fill:rgba(11,28,48,.05); --slab-fill-hi:rgba(11,28,48,.11);
    background:linear-gradient(180deg,#e3e9f2,#d3dbe7 58%,#c9d3e1) !important;
    background-color:#d3dbe7 !important;
    border-bottom:1px solid rgba(6,11,20,.72) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 14px 30px -16px rgba(0,0,0,.75) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  /* ── re-point every token the legacy topbar rules read, so the winner paints on the SLAB ── */
  html body .topbar{
    --ink:var(--slab-ink); --ink-2:var(--slab-ink-70); --muted:var(--slab-ink-55);
    --line:var(--slab-line); --line-2:var(--slab-line-hi);
    --primary:var(--slab-accent); --accent:var(--slab-accent); --accent2:var(--slab-accent);
    --p:var(--slab-accent); --p2:var(--slab-accent);
    --d-text:var(--slab-ink); --d-text-2:var(--slab-ink-70); --d-hair:var(--slab-line);
    --rust-ink:var(--slab-ink); --rust-ink-70:var(--slab-ink-70); --rust-ink-55:var(--slab-ink-55);
    --rust-ink-40:var(--slab-ink-55); --rust-ink-08:var(--slab-fill); --rust-ink-14:var(--slab-fill-hi);
    --rust-border:var(--slab-line); --rust-card:transparent; --rust:var(--slab-accent);
    --mvc-fg:var(--slab-ink); --mvc-fg-70:var(--slab-ink-70); --mvc-fg-55:var(--slab-ink-55);
    --mvc-fg-40:var(--slab-ink-55); --mvc-brd:var(--slab-line); --mvc-brd-hi:var(--slab-line-hi);
    --pn-text:var(--slab-ink); --pn-border:var(--slab-line); --pn-border-hi:var(--slab-line-hi);
    --glass-a:transparent; --glass-b:transparent;
  }
  /* ── the readouts: identity, stat labels, stat values, the hero figure ── */
  html body .topbar, html body .topbar .stat, html body .topbar .stat b,
  html body .topbar .stat.stat-id b, html body .topbar .hud-secondary .stat b{ color:var(--slab-ink) !important; }
  html body .topbar .stat span, html body .topbar .stat.stat-id span,
  html body .topbar .hud-secondary .stat span, html body .topbar .stat .stat-unit{
    color:var(--slab-ink-55) !important; opacity:1 !important; }
  html body .topbar .stat.stat-hero b, html body .topbar .stat b span{ color:var(--slab-accent) !important; text-shadow:none !important; }
  html body .topbar .hud-group{ border-left-color:var(--slab-line) !important; }
  html body .topbar .material-symbols-outlined{ color:var(--slab-accent) !important; }
  /* ── the utility pills (nav) + any legacy rect button that still lands in the bar ── */
  html body .topbar .tb-btn, html body .topbar button:not(.wearing-chip):not(.pn-btn):not(.lg-btn){
    background:transparent !important; color:var(--slab-ink) !important;
    border:1px solid var(--slab-line-hi) !important; }
  html body .topbar .tb-btn:hover, html body .topbar button:not(.wearing-chip):not(.pn-btn):not(.lg-btn):hover{
    background:var(--slab-fill-hi) !important; color:var(--slab-ink) !important;
    border-color:var(--slab-ink) !important; transform:none !important; }
  html body .topbar .tb-btn svg{ color:currentColor !important; }
  html body .topbar .tb-danger{ opacity:.6 !important; }
  html body .topbar .tb-danger:hover{ opacity:1 !important; }
  html body .topbar #account button{ background:transparent !important; color:var(--slab-ink) !important;
    border:1px solid var(--slab-line-hi) !important; }
  html body .topbar .acc-chip{ background:var(--slab-fill-hi) !important; color:var(--slab-ink) !important;
    border:1px solid var(--slab-line-hi) !important; }
  /* ── the game clock: a tactical slab that must INVERT against the bar, not match it ── */
  html body.mvc-light .topbar .game-clock{ background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(233,240,251,.24) !important; color:rgba(240,246,255,.94) !important; }
  html body:not(.mvc-light) .topbar .game-clock{ background:#0b1c30 !important;
    border:1px solid rgba(11,28,48,.5) !important; color:rgba(234,241,251,.94) !important; }
  /* ── the brandmark: the artwork must flip WITH the bar (white PITCH on the navy slab, black
        PITCH on the pale rail). Both plates already ship; this simply re-keys which one shows. ── */
  html body.mvc-light .topbar .brandmark-mark{ background-image:url('/assets/brand/pitchnoir-twotone.png') !important; }
  html body:not(.mvc-light) .topbar .brandmark-mark{ background-image:url('/assets/brand/pitchnoir-color.png') !important; }
  html body .topbar .brandmark{ color:var(--slab-ink) !important; border-right-color:var(--slab-line) !important; }
  html body .topbar .brandmark b{ color:var(--slab-accent) !important; }
  /* ── the overflow menu hangs off the bar: keep it on the bar's own palette ── */
  html body.mvc-light .tb-overflow{ background:#0e2038 !important; border-color:rgba(233,240,251,.16) !important; color:#f2f6fc !important; }
  html body.mvc-light .tb-overflow button{ color:#f2f6fc !important; }
  html body.mvc-light .tb-overflow button:hover{ background:rgba(255,255,255,.09) !important; }
  html body:not(.mvc-light) .tb-overflow{ background:#e3e9f2 !important; border-color:rgba(11,28,48,.22) !important; color:#0b1c30 !important; }
  html body:not(.mvc-light) .tb-overflow button{ color:#0b1c30 !important; }
  html body:not(.mvc-light) .tb-overflow button:hover{ background:rgba(11,28,48,.08) !important; }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     PRIMARY-BUTTON INK SWEEP (CEO 2026-07-31, defect 5) — "dark text on dark buttons — really?
     Check your master design system and revise."
     ROOT: on LIGHT themes applyCosmetics() deepens the live --accent from #f97316 to rust #b4380d
     (that is correct — the bright orange fails on porcelain). But ~20 rules across this file pair
     that accent FILL with a hard-coded near-black ink (#0b1c30 / #0a0d12 / #05090f / #160a02),
     which was authored for the DARK-theme bright orange. On the light-mode rust fill those land at
     1.5–1.9:1 — the CEO's COMPOSE REPORT screenshot.
     SST/UX Law 1 canon: on the burnt-orange LIGHT fill the ink is WHITE (#fff on #b4380d = 4.66:1).
     Scoped to body.mvc-light ONLY, so the dark-theme pairing (#0b1c30 on #ff6a2b ≈ 7.3:1 — the
     correct AA pairing there) is deliberately left alone.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  html body.mvc-light .mini-cta:hover,
  html body.mvc-light .dossier-card button,
  html body.mvc-light .dossier-card button:hover,
  html body.mvc-light .poach-cta,
  html body.mvc-light .poach-cta:hover,
  html body.mvc-light .help-chip:hover,
  html body.mvc-light .rfi-row:hover,
  html body.mvc-light .party-chip:hover,
  html body.mvc-light .sea-rung-state.now,
  html body.mvc-light .mt-toggle button.on,
  html body.mvc-light .masthead button:not(.primary):hover,
  /* the accent-filled pills painted inline from JS (`background:var(--accent);color:#0b1c30`) */
  html body.mvc-light .pill[style*="--accent"]{ color:#fff !important; }
  /* THE INVERSE of the same defect, found in the gate on DARK themes: the Floor "GOT IT" chip put
     WHITE ink on the bright #f97316 fill — 2.80:1, light-on-light. Same canon, other direction:
     bright orange carries near-black. (#07080c on #f97316 = 7.9:1.) */
  html body:not(.mvc-light) #fsGotit.frt-got,
  html body:not(.mvc-light) #fsGotit.frt-got:hover{ color:#07080c !important; }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     LAW-1 SWEEP on the surfaces this change touches (measured, not assumed).
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  /* (a) the war-room mono eyebrows: --rust resolves to rgb(200,100,31) on the light stock — 2.88:1
         on the one-pager head (the row rebuilt for defect 2), 2.52:1 on the section tabs. The SST
         burnt-orange spine deepened one step (#8a3b02) measures 5.6:1 / 4.9:1 on those grounds. */
  html body.mvc-light .poap-eyebrow,
  html body.mvc-light .wr-angle-k,
  html body.mvc-light .wr-plate-k,
  html body.mvc-light .wr-tab b,
  html body.mvc-light .frs-tag{ color:#8a3b02 !important; }
  /* (b) the section-tab sub-labels ("in progress", "5 disciplines") sat at 2.46:1 on light and
         3.77:1 on dark — quiet is not invisible (UX Law 1). */
  html body.mvc-light .wr-tab s{ color:rgba(28,22,17,.74) !important; }
  html body:not(.mvc-light) .wr-tab s{ color:rgba(255,255,255,.62) !important; }
  /* (c) the KPI trend line under every stat on the Performance view (the folder surface) carried
         real content — "£12,816/wk burn" — at 3.20:1 light / 3.72:1 dark. */
  html body.mvc-light .mvc-trend.fl{ color:#6d6255 !important; }
  html body:not(.mvc-light) .mvc-trend.fl{ color:rgba(255,255,255,.56) !important; }
  /* (d) the COO ledger's good/warn figures (the screen the COMPOSE REPORT button lives on) were
         4.01:1 and 4.49:1 on the bone canvas — both under AA by a hair. */
  html body.mvc-light .s1-screen{ --s1-good:#12703d !important; --s1-warn:#8a5008 !important; }
  /* (e) the dossier's new footer reference line. */
  html body.mvc-light .dsr-foot-ref{ color:#574d42 !important; }
  /* (f) two pre-existing near-misses on the surfaces this change renders — both a hair under AA
         and both a one-token fix, so they are fixed here rather than logged and left. */
  html body.mvc-light[data-view="office"] .hub-nav .hub-tab.on{ color:#93300b !important; }   /* was 4.14:1 */
  html body.mvc-light[data-view="office"] .do-now .dn-eyebrow,
  html body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .do-now.calm .dn-eyebrow{ color:#0c6633 !important; }  /* was 4.32:1 */

  /* (g) SECOND PASS — everything the auditor still flagged on the surfaces this change touches.
         Each value was recomputed against the ground it actually paints on (worst case), not the
         token's authored intent. Measured ratios in the comments. */
  /* the s2 secondary ink drives every eyebrow, sub-line, discipline key and due-date on the Floor,
     the Board and Team — #726757 measured 3.99–4.36:1 on the porcelain plate. */
  html body.mvc-light .s2-plate, html body.mvc-light .s2-bcol,
  html body.mvc-light .s2-scrub-read, html body.mvc-light .s2-hpanel,
  html body.mvc-light .s2-crew-wall{ --s2-dim:#5c5348 !important; }                       /* 5.4:1 */
  /* accent-as-SMALL-TEXT inside the s2 scope: #b4380d is a FILL value; as 9–13px data it measured
     3.95–4.31:1, so the text instances deepen one step. Fills/spines are untouched. */
  html body.mvc-light .squad-cover .cov b, html body.mvc-light .s2-wire-line .g,
  html body.mvc-light .s2-disc-avg b{ color:#93300b !important; }                          /* 5.7:1 */
  html body.mvc-light[data-view="office"] .squad-cover .cov.thin,
  html body.mvc-light[data-view="office"] .squad-cover .cov.thin em{ color:#a3271b !important; } /* 5.3:1 */
  html body.mvc-light[data-view="office"] .squad-cover .cov em{ color:#5c5348 !important; }
  /* the shipping monogram sits on the NAVY slab — the light-theme rust reads 2.87:1 there; on navy
     the correct value is the bright orange (7.4:1). Keyed to the slab, not to the theme. */
  html body .s2-ship-mk{ color:#ff8a4f !important; }
  /* the war-room time-pool denominator ("/ 300") — 2.46:1 light / 3.77:1 dark */
  html body.mvc-light .tmeter-v i{ color:rgba(28,22,17,.74) !important; }
  html body:not(.mvc-light) .tmeter-v i{ color:rgba(255,255,255,.62) !important; }
  /* squad tier-A figures: the bright dark-theme green measured 1.47:1 on the light stock */
  html body.mvc-light .tier-A{ color:#0c6633 !important; }
  /* floor-chat avatar chips: WHITE on bright #f97316 is 2.80:1 — bright orange takes near-black */
  /* the chat avatar's fill is the FIXED bright #f97316 in BOTH themes (not the deepened light
     rust), so it takes near-black ink either way — white measured 2.80:1. */
  html body .tmsg.me .tav{ color:#07080c !important; }
  /* the dark-theme squad "avg · n" caption at .4 alpha measured 3.70:1 */
  html body:not(.mvc-light) .squad-cover .cov em{ color:rgba(255,255,255,.6) !important; }
  /* the war-room board note (its own dim value, not --s2-dim) measured 4.36:1 */
  html body.mvc-light .s2-wr-note{ color:#5c5348 !important; }
  /* the pitch-view SKILL TIER ramp is authored for the dark stock — #3fce8b / #f0a35e / #eb7150
     measure 1.47–1.51:1 on the light stock. Light gets its own ramp, same semantics. */
  html body.mvc-light[data-view="pitch"]{ --t-A:#0c6633 !important; --t-B:#8a5008 !important; --t-D:#a3271b !important; }
  html body.mvc-light[data-view="office"]{ --t-A:#0c6633 !important; --t-B:#8a5008 !important; --t-D:#a3271b !important; }
  /* the office insight callout names the weak discipline with an INLINE color:var(--mvc-red)
     (#f0716f = 2.29:1 on the light stock). An inline style can't be overridden by a rule — but its
     TOKEN can be re-pointed for that subtree, which is the house pattern (2026-07-31 call-feed fix). */
  html body.mvc-light[data-view="office"] .pv-radarside{ --mvc-red:#a3271b; --p:#93300b; }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     THE ALTERNATION LAW (CEO 2026-07-31 — standing rule, same law as the command bar above)
     "These tabs should be a different colour/contrast — the whole page is too similar in light and
      dark. You need to alternate the light/dark components across light/dark themes — not
      EVERYTHING needs to be LIGHT or Dark."
     RULE: within a LIGHT page, key chrome (command bar, tab rails, instrument strips) goes DARK for
     separation; within a DARK page the same chrome goes LIGHTER. Alternation, not uniformity. The
     active segment is always carried by the ACCENT with inverted ink — never by a focus ring.
     One shared token set (--rail-*) so every rail in the product is the same object.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  html body.mvc-light .s2-htabs, html body.mvc-light .s2-scrub,
  html body.mvc-light .floor-rhythm .fr-days, html body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse{
    --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-solid:#0b1c30;
    --rail-ink:#e9f0fb; --rail-ink-dim:rgba(233,240,251,.62); --rail-hair:rgba(233,240,251,.16);
    --rail-edge:rgba(0,0,0,.5); --rail-lift:0 1px 0 rgba(233,240,251,.1) inset,0 12px 26px -18px rgba(9,16,28,.8);
    --rail-on:#f97316; --rail-on-ink:#0b1c30;      /* 7.3:1 */
    --rail-good:#3ddc84; --rail-warn:#ffb638; --rail-bad:#ff6a55;
  }
  html body:not(.mvc-light) .s2-htabs, html body:not(.mvc-light) .s2-scrub,
  html body:not(.mvc-light) .floor-rhythm .fr-days, html body:not(.mvc-light)[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse{
    --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-solid:#d9e0ea;
    --rail-ink:#0b1c30; --rail-ink-dim:rgba(11,28,48,.76); --rail-hair:rgba(11,28,48,.2);   /* .66 measured 4.05:1 */
    --rail-edge:rgba(6,11,20,.7); --rail-lift:0 1px 0 rgba(255,255,255,.85) inset,0 14px 30px -16px rgba(0,0,0,.7);
    --rail-on:#b4380d; --rail-on-ink:#fff;         /* 4.7:1 */
    --rail-good:#12703d; --rail-warn:#8a5008; --rail-bad:#b0261a;
  }
  /* ── the segmented rail (TEAM: Your Staff / On the Market / Poach) ── */
  html body .s2-htabs{ display:flex !important; background:var(--rail-bg) !important;
    border:1px solid var(--rail-edge) !important; border-radius:2px !important;
    box-shadow:var(--rail-lift) !important; overflow:hidden; }
  html body .s2-htab{ color:var(--rail-ink-dim) !important; background:transparent !important;
    border-right:1px solid var(--rail-hair) !important; }
  html body .s2-htab:last-child{ border-right:0 !important; }
  html body .s2-htab:hover{ color:var(--rail-ink) !important; background:rgba(128,128,128,.12) !important; }
  html body .s2-htab.on{ color:var(--rail-on-ink) !important; background:var(--rail-on) !important; }
  html body .s2-htab.on::after{ background:var(--rail-on-ink) !important; opacity:.5; }
  html body .s2-htab .s2-htab-n{ opacity:.72; }

  /* ── the FLOOR day scrubber (MON→FRI) — the identical rail, same law ── */
  html body .s2-scrub{ background:var(--rail-bg) !important; border:1px solid var(--rail-edge) !important;
    border-radius:2px !important; box-shadow:var(--rail-lift) !important; overflow:hidden; }
  html body .s2-scrub-wk{ color:var(--rail-ink) !important; background:rgba(128,128,128,.14) !important;
    border-right:1px solid var(--rail-hair) !important; }
  html body .s2-day{ color:var(--rail-ink-dim) !important; background:transparent !important;
    border-right:1px solid var(--rail-hair) !important; }
  html body .s2-day:last-child{ border-right:0 !important; }
  html body .s2-day:hover{ color:var(--rail-ink) !important; background:rgba(128,128,128,.14) !important; }
  html body .s2-day.done{ color:var(--rail-ink-dim) !important; }
  html body .s2-day.done::before{ color:var(--rail-on) !important; }
  html body .s2-day.on{ color:var(--rail-on-ink) !important; background:var(--rail-on) !important;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.24) !important; }
  html body .s2-day.on::before{ color:var(--rail-on-ink) !important; }
  /* the legacy floor-rhythm strip (dashboard) is the same object — keep the family honest */
  html body .floor-rhythm .fr-days{ background:var(--rail-bg); border:1px solid var(--rail-edge);
    border-radius:2px; box-shadow:var(--rail-lift); overflow:hidden; gap:0; }
  html body .floor-rhythm .fr-day{ background:transparent !important; border:0 !important;
    border-right:1px solid var(--rail-hair) !important; border-radius:0 !important; color:var(--rail-ink-dim) !important; }
  html body .floor-rhythm .fr-day:last-child{ border-right:0 !important; }
  html body .floor-rhythm .fr-day.done{ opacity:1 !important; color:var(--rail-ink-dim) !important; }
  html body .floor-rhythm .fr-day.on{ background:var(--rail-on) !important; color:var(--rail-on-ink) !important; box-shadow:none !important; }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     THE DAY TIMELINE (CEO: "the floor — this content looks terrible")
     Was: a floating dot + a mono label stranded on the left, loose time/entry rows on the right,
     no plate, no hierarchy, no visible connection to the day being scrubbed.
     Now: dossier anatomy — ONE plate hung directly off the rail, the day-state chip promoted to the
     plate's EYEBROW BAR (swatch as a square index tab, not an orphan dot), and the entries hung on
     a real TIME SPINE with a node per beat. Reads as the day's file, not a list.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  html body .s2-scrub-read{ display:block !important; margin-top:0 !important;
    border:1px solid var(--s2-hair); border-top:0; border-left:3px solid var(--accent,#f97316);
    background:var(--s2-well); }
  html body .s2-scrub-grade{ display:flex !important; align-items:center !important; gap:10px !important;
    padding:9px 14px !important; margin:0 !important; border:0 !important;
    border-bottom:1px solid var(--s2-hair) !important;
    background:color-mix(in srgb,var(--s2-ink) 12%,transparent) !important;
    font-family:var(--mono),monospace !important; font-size:9.5px !important; font-weight:800 !important;
    letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--s2-ink) !important; }
  html body .s2-scrub-swatch{ width:11px !important; height:11px !important; border-radius:0 !important;
    border:0 !important; box-shadow:none !important; flex:none !important; }
  html body .s2-scrub-events{ position:relative; padding:13px 14px 14px 0; gap:0 !important; }
  html body .s2-scrub-events::before{ content:""; position:absolute; left:73px; top:20px; bottom:20px;
    width:1px; background:var(--s2-hair); }
  html body .s2-ev{ position:relative; display:block !important; padding:7px 0 7px 92px; min-height:30px;
    color:var(--s2-ink) !important; border-bottom:1px solid var(--s2-hair-2); }
  html body .s2-ev:last-child{ border-bottom:0; }
  html body .s2-ev .g{ position:absolute; left:14px; top:8px; width:46px; text-align:right;
    font-size:9.5px !important; letter-spacing:.04em !important; color:var(--s2-dim) !important; }
  html body .s2-ev::before{ content:""; position:absolute; left:70px; top:11px; width:7px; height:7px;
    background:var(--accent,#f97316); box-shadow:0 0 0 3px var(--s2-well); }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     FLOOR PULSE → ONE INSTRUMENT STRIP (CEO: "sloppy design" · five identical beige boxes)
     A single contrasting slab (alternation law) divided into cells by hairlines, each carrying a
     SEMANTIC SPINE keyed to its live state, the headcount as the lead figure, and the war room as a
     status lamp instead of a shouting "IDLE" headline. No repeated blobs, real hierarchy.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse{ display:flex !important; grid-template-columns:none !important; gap:0 !important;
    background:var(--rail-bg) !important; border:1px solid var(--rail-edge) !important;
    border-radius:2px !important; box-shadow:var(--rail-lift) !important; overflow:hidden;
    margin-top:14px !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell{ flex:1 1 0; min-width:0; background:transparent !important;
    border:0 !important; border-left:1px solid var(--rail-hair) !important; border-radius:0 !important;
    box-shadow:none !important; padding:14px 16px 15px 18px !important; position:relative; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:first-child{ border-left:0 !important; flex:1.4 1 0; }
  /* the semantic spine — the cell's live state encoded in FORM, not just in a colour word */
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell::before{ content:""; position:absolute; left:0; top:12px; bottom:12px;
    width:2px; background:var(--rail-ink-dim); opacity:.5; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell[data-tone="good"]::before{ background:var(--rail-good); opacity:1; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell[data-tone="warn"]::before{ background:var(--rail-warn); opacity:1; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell[data-tone="bad"]::before{ background:var(--rail-bad); opacity:1; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-k{ color:var(--rail-ink-dim) !important; letter-spacing:.18em !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-v{ color:var(--rail-ink) !important; font-size:22px !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell.is-lead .hb-v{ font-size:34px !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-v.good{ color:var(--rail-good) !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-v.bad{ color:var(--rail-bad) !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-sub{ color:var(--rail-ink-dim) !important; line-height:1.4; }
  /* WAR ROOM is a STATUS LAMP, not a headline — a lit/unlit pip beside small caps */
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell.is-lamp .hb-v{ display:flex !important; align-items:center; gap:8px;
    font-family:var(--mono),monospace !important; font-size:13px !important; font-weight:900 !important;
    letter-spacing:.16em !important; margin-top:9px !important; }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell.is-lamp .hb-v::before{ content:""; width:9px; height:9px; border-radius:50%;
    flex:none; background:var(--rail-ink-dim); }
  html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell.is-lamp[data-tone="good"] .hb-v::before{ background:var(--rail-good);
    box-shadow:0 0 8px var(--rail-good); }
  @media(max-width:900px){ html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse{ flex-wrap:wrap; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell{ flex:1 1 33%; border-top:1px solid var(--rail-hair) !important; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:first-child,html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:nth-child(2),
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:nth-child(3){ border-top:0 !important; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:nth-child(4){ border-left:0 !important; } }
  @media(max-width:560px){ html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell{ flex:1 1 50%; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:nth-child(3){ border-left:0 !important; border-top:1px solid var(--rail-hair) !important; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell:nth-child(5){ border-left:0 !important; }
    html body[data-view="office"] .hub-view[data-view="v-floor"] .hire-budget.floor-pulse .hb-cell.is-lead .hb-v{ font-size:28px !important; } }

  /* ── THE BOARD: three panels, three WEIGHTS (was three interchangeable equals) ── */
  html body .s2-board{ grid-template-columns:1.5fr 1.1fr .95fr !important; align-items:start; }
  html body .s2-board.is-live{ grid-template-columns:1.9fr 1fr .9fr !important; }
  @media(max-width:820px){ html body .s2-board,html body .s2-board.is-live{ grid-template-columns:1fr !important; } }
  /* the war room is the HERO column: a heavier plate with the accent spine when the room is hot */
  html body .s2-bcol--war{ padding:16px 18px !important; }
  html body .s2-board.is-live .s2-bcol--war{ border-left:3px solid var(--accent,#f97316) !important;
    background:color-mix(in srgb,var(--accent,#f97316) 7%,var(--s2-well)) !important; }
  html body .s2-board.is-live .s2-wr-hero{ font-size:26px !important; }
  /* the wire is a narrow TICKER — mono, tighter leading, hairline-divided lines */
  html body .s2-bcol--wire{ padding:13px 14px !important; }
  html body .s2-bcol--wire .s2-wire{ gap:0 !important; }
  html body .s2-bcol--wire .s2-wire-line{ font-size:11px !important; padding:6px 0;
    border-bottom:1px solid var(--s2-hair-2); }
  html body .s2-bcol--wire .s2-wire-line:last-child{ border-bottom:0; }