/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PN-M20 · #120 (CEO-81) — COO/CFO CRAFT PASS · FONT-SOUP REDUCTION · 20260815
   ------------------------------------------------------------------------------------------------
   Appended file, linked LAST in play.html so it wins the cascade without !important. Named
   selectors only; touches ONLY the s1- family (the COO "State of the Agency" + CFO "Pressure
   Room" full-screen views + their Marlowe popup). Zero colour changes — AA state is untouched.

   WHY (measured on the live views at 390×844, both shells, before this file):
   1. THREE declared font stacks were in play — "Inter,sans-serif", the JetBrains Mono stack, and
      a third "Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial" inherited from the .s1-screen
      base shorthand. All render IS, but a third stack is soup by definition (SST §2 canon is
      exactly two voices here: IS for humanist text, JetBrains Mono for machine/eyebrow) and
      any device without IS would silently fork the fallback. → One humanist stack.
   2. The MONO MICRO-LABEL tier was five near-identical voices (10px/800 eyebrow · 10px/700
      fig-labels+legends · 10.5px/600 row-subs · 9px/700 bar-labels+scenario-tags · 8.5px…):
      same job, five fonts. → ONE tier: 800 10px. Per-role letter-spacing (already set upstream)
      is kept — tracking is hierarchy, size/weight churn is soup.
   3. The MONO VALUE tier split 15px (ledger) vs 14px (row values, scenario outcomes) for the
      same "machine number" job. → 15px everywhere a value prints.
   4. IS action/name text split 13px/700 (row names) vs 14px/800 (scenario moves). → 13px/700.
   5. 8pt GRID (apple-design-foundations mandate 2026-08-14, subordinate to the SST): the shared
      rhythm ran 14/20/26/7/13px. Panels, gutters and rows move to the 8pt grid (4pt half-steps),
      IDENTICALLY on both views, so COO and CFO read as one built object: 16px panel gap/padding,
      24px header seat, 8px ledger rows. This is the whole CFO/COO "one family" pass — every
      selector below is shared by both views by construction.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1 — one humanist stack (kills the third declared family; rendering is unchanged where IS
       loads, and the fallback no longer forks from the rest of the view) */
.s1-screen, .s1-mrl-over{ font-family:IS, sans-serif; }

/* 2 — mono micro-label tier: one voice, 800 10px (eyebrow weight), tracking stays per-role */
.s1-fig-lbl, .s1-leg, .s1-scn-tag, .s1-bar-lbl, .s1-rb-sub{ font-weight:800; font-size:10px; }

/* 3 — mono value tier: every printed value is 15px like the ledger (was 14px on row values
       and scenario outcomes — two sizes for the same job) */
.s1-rb-v, .s1-scn-out{ font-size:15px; }

/* 4 — IS name/action tier: scenario "move" lines join the row-name voice (700 13px) */
.s1-scn-move{ font-weight:700; font-size:13px; }

/* — mono chrome-label tier: the Marlowe CTA joins the 11px chrome voice (close button, note
     headers) instead of holding a private 12px */
.s1-mrl-cta{ font-size:11px; }

/* — body-small tier: the death-week note joins the 13.5px body-small voice (sub, flags, notes)
     instead of a private 12.5px */
.s1-death-note{ font-size:13.5px; }

/* 5 — 8pt grid, both views identically (WHY per token: 26→24 header seat · 20→24 header exit ·
       14→16 panel gap+gutter · 6/9→8 headline/sub seats · 7→8 ledger rows · 13/15→12/16 note
       padding · 18→16 panel side padding so panel gutters match the grid gap) */
.s1-wrap{ padding:24px clamp(18px,4vw,40px) 64px; }
@media(max-width:520px){ .s1-wrap{ padding:24px 16px 56px; } }
.s1-top{ margin-bottom:24px; }
.s1-h{ margin-top:8px; }
.s1-sub{ margin-top:8px; }
.s1-row{ margin-top:16px; }
.s1-grid-2, .s1-grid-3{ gap:16px; }
.s1-panel{ padding:16px; }
.s1-note{ padding:12px 16px; }
.s1-note-h{ margin-bottom:8px; }
.s1-lrow{ padding:8px 0; }

/* ══ QA48 SEV-3/SEV-2 rider (2026-08-15) ═══════════════════════════════════════════════════════ */
/* S2-7: page scrolled 600px behind the welcome bigmodal — set by toastBig(), cleared on close. */
body.pn-bm-lock{ overflow:hidden !important; }
/* S3-9: the §14 "?" explainer affordance was 15×15 — the PAINT stays a quiet 15px ring; the
   TARGET becomes 44px via the invisible-extension law. */
.help-chip{ position:relative; }
.help-chip::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; }

/* ══ UX-01a (CEO 2026-08-15) — THE VERDICT IS A SET-PIECE, NOT A GAME SCREEN ═══════════════════
   "this screen- the top nav is redundant here entirely."
   At the verdict the player has NO AGENCY yet: no week to end, no CFO, no COO, no feed, nothing
   to buy. Every control in that bar is dead (UX_RULES · control relevance) and it is sitting on
   the emotional peak of onboarding. DELETION, not dimming — the standing law. The screen's own
   CTA ("Found your agency" / "Reapply") is the way out, so nothing is trapped. */
body[data-view="verdict"] .topbar{ display:none !important; }
body[data-view="verdict"] #pn-nextmove{ display:none !important; }

/* UX-01b — Marlowe's sound control. Quiet, top-right of her stage, out of her face and clear of
   the SEED CHEQUE plate. Present ALWAYS (not only on failure) so the player can silence her —
   a speech you cannot mute is its own defect. 44px floor, both states legible on the film. */
.vc-stage{ position:relative; }
.vc-sound{ position:absolute; top:14px; right:14px; z-index:6;
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px;
  appearance:none; cursor:pointer; border-radius:999px;
  font:800 9.5px/1 JB,ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(238,244,252,.9); background:rgba(8,12,20,.62); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.vc-sound:hover, .vc-sound:focus-visible{ background:rgba(8,12,20,.82); border-color:rgba(249,115,22,.7); color:#fff; outline:0; }
.vc-sound .vcs-ico{ font-size:12px; line-height:1; }
.vc-sound:not(.is-on){ border-color:rgba(249,115,22,.75); color:#ffd9c2; }   /* muted = the one to notice */
@media (max-width:480px){ .vc-sound .vcs-lbl{ display:none; } .vc-sound{ padding:0; width:44px; justify-content:center; } }

/* ══ UX-02 (CEO ruled 2026-08-15: "Yes split real name from handle") ═══════════════════════════
   A field whose value becomes PUBLIC says so AT THE POINT OF TYPING. This is the pattern, not one
   screen's copy — any future field that publishes gets the same badge. Orange = leaves the
   building; grey = never does. */
.onb-vis{ display:inline-block; margin-left:8px; vertical-align:middle;
  font:800 8.5px/1 JB,ui-monospace,monospace; letter-spacing:.18em;
  padding:4px 7px; border-radius:999px; }
.onb-vis--priv{ color:rgba(11,28,48,.6); background:rgba(11,28,48,.08); border:1px solid rgba(11,28,48,.18); }
.onb-vis--pub{ color:#9d4300; background:rgba(249,115,22,.13); border:1px solid rgba(249,115,22,.5); }
body.mvc-dark .onb-vis--priv, [data-palette="neon-onyx"] .onb-vis--priv{
  color:rgba(238,244,252,.62); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.onb-hint{ display:block; margin-top:6px; font:400 12px/1.45 IS,ui-sans-serif,system-ui,sans-serif;
  color:rgba(11,28,48,.62); }
body.mvc-dark .onb-hint, [data-palette="neon-onyx"] .onb-hint{ color:rgba(238,244,252,.6); }
/* the public field is the one to notice */
#handle{ border-color:rgba(249,115,22,.55) !important; }
#handle:focus{ border-color:#f97316 !important; }