/* pn-type-numerals-20260913.css — NUMERALS JOIN THE TYPE CABINET + BUTTON INK BY FILL
   =============================================================================================
   CEO, 13 Sep 2026 (verbatim): "This bad design and typography is STILL hanging around — replace
   the numbers with the same font as the new headlines. Give more space to the typography, either
   remove redundant text or make it easier to read." And, on the light theme: "terrible type —
   illegible buttons — you still haven't fixed these key issues."

   MEASURED, NOT ASSERTED. A pixel-sampled survey of every button and every ≥20px numeral on the
   five hub views (scratch harness light_survey.mjs, 13 Sep) found, before this sheet:
     · numerals on three faces at once — 'Space Grotesk' via --mvc-disp (.mvc-num .pn-stat-val
       .ps-n .pv-heroval), IS (.nbo-bb-fig .nbo-no .nbo-fee .s2-bk-big), JB mono (.mvc-kpi-v);
     · light theme: near-black ink on the burnt-orange fill at 3.32–3.36:1 (.pnv4-go--now,
       .fl-thing__do, .fl-week__do, .nbo-bb-cta), "Find New Business" 2.05:1 (.ce-cta), the squad
       TRAIN UP / LET GO pair 3.46 / 4.21:1 on the taupe rail — and the same pair 3.68 / 4.22:1
       in DARK too.
   Loaded after pn-type-cabinet-20260912.css. Same discipline as that file: one face, tokens
   only, every rule here names the exact failing selector the survey printed.
   ============================================================================================= */

/* ── 1 · the display token itself. mvc-os.css sets --mvc-disp:'Space Grotesk' on :root and on
   each [data-palette] block; re-declared here at HIGHER specificity so every consumer of the
   token (12 rules in this tree) moves to the cabinet face without being re-listed. ── */
html, html[data-theme], html[data-palette], :root[data-theme][data-palette]{
  --mvc-disp: var(--pn-type-face);
}

/* ── 2 · NUMERAL tier — hero figures (the one big number on a card) ── */
html body .s2-bk-big, html body .nbo-bb-fig, html body .pv-heroval, html body .mvc-num--hero,
html body .nbo-no{
  font-family: var(--pn-type-face) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* ── stat figures (KPIs, fees, tiles) ── */
html body .mvc-num, html body .pn-stat-val, html body .ps-n, html body .mvc-kpi-v,
html body .nbo-fee, html body .big, html body .stat b,
html body [class*="-fig"], html body [class*="-fee"]:not(em):not(i):not(small){
  font-family: var(--pn-type-face) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* the unit/label glyph riding inside a figure stays a quiet mono tag, never a 900 numeral */
html body .nbo-fee em, html body .s2-bk-big em, html body .s2-bk-big .cur{
  font-family: var(--pn-type-mono) !important; font-weight: 700 !important; letter-spacing: .1em !important;
}
html body .s2-bk-big .cur{ font-family: var(--pn-type-face) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }

/* ── 3 · AIR. "Give more space to the typography." The client rooms stack eyebrow + h2 + helper
   line with 2px between them; open the stack so each line has its own room. ── */
html body .card.shard > .tac-eyebrow{ display:block; margin-bottom: 10px; }
html body .card.shard > h2{ margin: 0 0 10px !important; }
html body .card.shard > p.muted.small{ margin: 0 0 18px !important; line-height: 1.5; max-width: 62ch; }
html body .s2-bk-hero{ gap: 10px; }
html body .s2-bk-sub{ line-height: 1.5; }
html body .s2-bk-row{ padding-block: 14px; }

/* ── 4 · BUTTON INK FOLLOWS THE FILL. The probe (rule_probe.mjs, 13 Sep) showed WHY the earlier
   token-based fix did not land: on these buttons `--v4-acc`/`--v4-acc-ink` resolve to the DARK
   values (#F97316 / #07080C) even in light, because a closer scope redefines them and custom
   properties take the nearest ancestor. So the fill is pinned per THEME, not read from a token:
   light = the SST-locked burnt orange #B4380D with WHITE ink (4.66:1, SST §5f); dark = the
   palette accent (`--acc`, bright on every dark palette) with near-black ink (7.14:1 on orange).
   The survey's failing selectors, by name. Class tokens are repeated ×5 purely for specificity:
   pn-button-unify-20260819.css reaches (0,5,2) with `html body[data-view]:not(.mvc-light) .content
   .hub-view :is(...)` and !important, so a plain theme-scoped rule loses on specificity, not source order. ── */
html[data-theme="light"] body .pnv4-go--now.pnv4-go--now.pnv4-go--now.pnv4-go--now.pnv4-go--now, html[data-theme="light"] body .fl-thing__do.fl-thing__do.fl-thing__do.fl-thing__do.fl-thing__do,
html[data-theme="light"] body .fl-week__do.fl-week__do.fl-week__do.fl-week__do.fl-week__do, html[data-theme="light"] body .nbo-bb-cta.nbo-bb-cta.nbo-bb-cta.nbo-bb-cta.nbo-bb-cta,
html[data-theme="light"] body .ce-cta.ce-cta.ce-cta.ce-cta.ce-cta, html[data-theme="light"] body .ce-cta.ce-cta.ce-cta.ce-cta.ce-cta.primary,
html[data-theme="light"] body[data-view="office"] .sqd-train.sqd-train.sqd-train.sqd-train.sqd-train, html[data-theme="light"] body .sf-invest.sf-invest.sf-invest.sf-invest.sf-invest,
html[data-theme="light"] body .pnos-brk-back.pnos-brk-back.pnos-brk-back.pnos-brk-back.pnos-brk-back{
  background:#B4380D !important; color:#FFFFFF !important; border-color:#B4380D !important;
}
html:not([data-theme="light"]) body .pnv4-go--now.pnv4-go--now.pnv4-go--now.pnv4-go--now.pnv4-go--now, html:not([data-theme="light"]) body .fl-thing__do.fl-thing__do.fl-thing__do.fl-thing__do.fl-thing__do,
html:not([data-theme="light"]) body .fl-week__do.fl-week__do.fl-week__do.fl-week__do.fl-week__do, html:not([data-theme="light"]) body .nbo-bb-cta.nbo-bb-cta.nbo-bb-cta.nbo-bb-cta.nbo-bb-cta,
html:not([data-theme="light"]) body .ce-cta.ce-cta.ce-cta.ce-cta.ce-cta, html:not([data-theme="light"]) body .ce-cta.ce-cta.ce-cta.ce-cta.ce-cta.primary,
html:not([data-theme="light"]) body[data-view="office"] .sqd-train.sqd-train.sqd-train.sqd-train.sqd-train, html:not([data-theme="light"]) body .sf-invest.sf-invest.sf-invest.sf-invest.sf-invest,
html:not([data-theme="light"]) body .pnos-brk-back.pnos-brk-back.pnos-brk-back.pnos-brk-back.pnos-brk-back{
  background:var(--acc, #F97316) !important; color:#07080C !important; border-color:var(--acc, #F97316) !important;
}
html body .nbo-bb-cta:hover, html body .ce-cta:hover, html body .pnos-brk-back:hover{ filter: brightness(1.08); }
html body[data-view="office"] .sqd-train.sqd-train.sqd-train.sqd-train.sqd-train em{ color: inherit !important; opacity: .82; }
/* LET GO: a solid quiet slab with white ink in both themes — the transparent ghost on the taupe
   rail measured 4.2:1 light / 4.22:1 dark, and a ghost's contrast is at the mercy of what is behind it. */
html body[data-view="office"] .sqd-letgo.sqd-letgo.sqd-letgo.sqd-letgo.sqd-letgo, html body .sf-fire.sf-fire.sf-fire.sf-fire.sf-fire{
  background: #1b1a17 !important; color: #ffffff !important; border-color: #1b1a17 !important;
}
html body[data-view="office"] .sqd-letgo.sqd-letgo.sqd-letgo.sqd-letgo.sqd-letgo em{ color: #ffffff !important; opacity: .72; }

/* ── 5 · THE WINDOW TITLEBAR (CEO, 13 Sep: "buttons too illegible, poor design headline" — the
   Duff / Arcade / every finder window). The traffic lights sat flush against the title
   ("●●●ARCADE"), the title was a 9.5px mono label, and BACK TO THE OFFICE was a pale pink pill on
   cream. Both titlebars the game ships (.lg-titlebar in pnos.js, .mac-titlebar in script-01.js)
   get: a real gap after the lights, the title in the cabinet face at window tier, and the back /
   close control as an accent slab with the theme's ink token. ── */
html body .lg-titlebar, html body .mac-titlebar{ display:flex; align-items:center; gap:14px; min-height:48px; }
html body .lg-tb-dots, html body .mac-tb-dots{ display:inline-flex; align-items:center; gap:7px; margin-right:6px; flex:none; }
html body .lg-tb-title, html body .mac-tb-title{
  font-family: var(--pn-type-face) !important; font-weight: 800 !important;
  font-size: clamp(15px, 1.6vw, 20px) !important; letter-spacing: -.01em !important;
  text-transform: uppercase; line-height: 1 !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html body .pnos-brk-back, html body .lg-titlebar .lg-btn, html body .mac-titlebar .mac-tb-back{
  margin-left:auto; flex:none; min-height:40px; padding: 0 16px; border-radius: 6px;
  border-width:1px; border-style:solid;
  font-family: var(--pn-type-mono) !important; font-weight: 800 !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase;
  cursor:pointer;
}

/* ── 6 · THE ROOM-OVERLAY WINDOW (Arcade / The Duff opened FROM the office, CEO #17, 13 Sep:
   "design top left is poor" — his screenshot is `web/duff.html` in the arcade window, masthead
   reading "●●●THE DUFF" with the lights jammed against the wordmark). This is a THIRD titlebar,
   not §5's: pn-shell-adopt.js:openRoom() draws `.pn-room-ovl__bar`, whose traffic lights are
   painted by `.pn-room-ovl__bar::before` (pn-shell-adopt.css) at `left:clamp(14px,3vw,30px)
   width:38px` (so the dots end at 30+38=68px on wide viewports) while the title sat at
   `padding-left:66px` — a real gap of −2px, i.e. touching. Widened the gap and moved the title
   onto the cabinet face at window tier, same treatment as §5's `.lg-tb-title`/`.mac-tb-title`. ── */
html body .pn-room-ovl__bar{ padding-left: clamp(78px, 9vw, 100px) !important; }
html body .pn-room-ovl__ttl{
  font-family: var(--pn-type-face) !important; font-weight: 800 !important;
  font-size: clamp(15px, 1.6vw, 20px) !important; letter-spacing: -.01em !important;
  text-transform: uppercase; line-height: 1 !important;
}
html body .pnos-brk-back:hover{ filter: brightness(1.08); }
@media (max-width:480px){
  /* phone: the window title may take two lines rather than truncate ("LEADERSHIP BO…") */
  html body .lg-tb-title, html body .mac-tb-title{ white-space:normal; line-height:1.05 !important; font-size:15px !important; }
}
/* ── 6 · light-theme lead subheads under the big room titles ("Back them, train them…") measured
   near-invisible on the cream ground: a muted token tuned for dark. Pinned to a real ink. ── */
html[data-theme="light"] body .tm-sub, html[data-theme="light"] body .tm-sub--lead{ color:#3f3a33 !important; }