/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE PRESSURE ROOM — legibility + occlusion + layout pass (CEO feedback #12, 2026-09-13)
   ------------------------------------------------------------------------------------------
   Jon, verbatim: "whole financial page looks illegible and badly formatted." Two screenshots
   (dark + light, ~1440) showed three faults, each traced to a specific rule before this file
   was written (see design/DECISIONS_LOG.md, 2026-09-13, "CEO feedback #12"):

   1. OCCLUSION — `.s1-screen` (style-01.css:12094, the 2026-08-19 "bound the s1 views to the
      device" pass) repainted the full-bleed opaque room into a translucent `rgba(6,8,13,.72)`
      dim veil, and its child selector `.s1-screen > *` never gave the actual card
      (`.s1-wrap`) an opaque fill of its own — so the room became a 72%-opacity glass pane over
      whatever view was open underneath (the TEAM page bled through both themes; in LIGHT the
      dark veil over a bright team page produced the grey wash that nearly erased the headline).
      This is GAME_DESIGN_STATE.md §5's exact cascade shape: a later, `!important`, same-class
      rule silently repainting an earlier, correct one. Fixed here by giving `.s1-wrap` its own
      OPAQUE theme-tokened surface — glass stays only on `.s1-screen`'s outer veil (the edge/
      material cue), never over the room's own content (UX_RULES Law 2, GAME_DESIGN_STATE §4.4
      "glass on the card, never over a picture").
   2. TYPE FLOOR — chart axis labels, the NOW/DEATH callouts and the legend were 8-10px in a
      viewBox that further shrinks on scaled containers (measured ~7px on screen); table captions
      (`.s1-rb-sub`) sat at 10.5px. Floor raised: chart/legend ≥11px, table text ≥13px. DEATH WEEK
      bars had no value on them at all (only a caption below) — `s1PairBars()` (script-01.js) now
      prints a £ figure directly above each column; this sheet styles it.
   3. LAYOUT — the room is genuinely tall (chart + death card + payroll + accounts + scenarios +
      report), and `.s1-screen`'s 2026-08-19 device-bound redesign clips it at the viewport with
      no visible cue that there's more below. Rather than re-opening that structural decision,
      the room's own card now owns its scroll (`.s1-wrap{overflow-y:auto}`) with a THICK, coloured,
      always-visible scrollbar plus a bottom fade + "more below" cue (toggled by
      `s1PressureRoomAffordance()` in script-01.js) so nothing is cut with no way to know it.

   Loaded genuinely last (after pn-type-cabinet-20260912.css and whatever type-numerals sheet
   lands alongside it) so it outranks style-01.css:12094's `!important` block at equal-or-lower
   specificity — every selector below matches `.s1-screen`/`.s1-wrap` alone or one class deeper,
   deliberately no deeper than the rule it corrects.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0. THE ROOM READS AS A SURFACE INSIDE THE DEVICE, NOT A NEW PAGE (CEO 2026-09-19, launch
   weekend: "should all be in ipad"). MEASURED FACT (design/GAME_DESIGN_STATE.md): `.s1-screen`'s
   rect already equals `<body>`'s rect — the room never escapes the iPad shell, `<body>` IS the
   screen. What read as "outside the iPad" was that `.s1-screen{inset:0}` painted its veil edge-to-
   edge with `.s1-wrap` sitting flush against it — no margin, no corner radius, no edge on the card
   itself — so the veil and the card fused into one full-bleed plane indistinguishable from a page
   replacing the device's own content. The fix is presentational, matching how every other window
   in this game reads as an object floating IN the screen (`.bigmodal-card`'s own treatment,
   style-01.css §"Finder-glass window standard"): the veil now insets the card on all four sides so
   the device's own content is visibly still there around it, and the card itself takes the
   system's own window radius + hairline edge + elevation instead of being flush with the veil. */
html body .s1-screen{
  display:flex !important; align-items:center; justify-content:center;
  padding:clamp(20px,4.2vh,56px) clamp(16px,3.4vw,44px) !important;
}
@media(max-width:520px){
  html body .s1-screen{ padding:10px !important; }
}

/* ── 1. OPAQUE ROOM SURFACE (both themes) — glass is the outer veil, never the card ────────── */
html body .s1-screen{
  /* the dim veil BEHIND the card stays translucent+blurred — that is the one legitimate glass
     cue (an edge/material signal that this is a floating room, not a new page) — but it no
     longer needs to double as the room's own paint now that .s1-wrap is opaque below. */
  background:rgba(6,8,13,.55) !important;
}
html body .s1-screen > .s1-wrap{
  position:relative;
  width:100%; min-height:0;
  /* 16px, not an arbitrary round number: `#__cfoView > *` (style-01.css) already pins every
     full-screen room's content window to this radius (.pnpay-win, .crisis-letter, the onboarding
     card) — matching it here keeps the pressure room's frame the same system object as the rest,
     rather than introducing a fourth radius value. */
  border-radius:16px !important;
  border:1px solid var(--s1-edge) !important;
  box-shadow:0 40px 110px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05) !important;
  background:
    radial-gradient(120% 90% at 84% -8%, color-mix(in srgb, var(--s1-mood, var(--s1-accent)) 14%, transparent), transparent 62%),
    linear-gradient(170deg, var(--s1-bg2) 0%, var(--s1-bg) 78%) !important;
  background-color:var(--s1-bg) !important; /* belt-and-braces solid fallback under the gradient */
  isolation:isolate; /* the gradient/mix-blend grain layer below must composite against THIS opaque paint, not whatever sits behind the room */
}
@media(max-width:520px){
  html body .s1-screen > .s1-wrap{ border-radius:14px !important; }
}
html body .s1-screen > .s1-wrap::before{
  /* the grain wash (style-01.css .s1-screen::before) is fixed to the viewport and was landing
     OVER the translucent card before this fix, which is exactly "glass over content" — give the
     card its own grain instead, scoped to its own opaque box. */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:4px 4px;
  mix-blend-mode:overlay;
}
body.mvc-light html body .s1-screen > .s1-wrap::before,
html body.mvc-light .s1-screen > .s1-wrap::before{
  background:radial-gradient(rgba(58,44,26,.05) 1px, transparent 1.4px); background-size:4px 4px;
  mix-blend-mode:multiply; opacity:.6;
}
/* everything the room draws sits above its own grain layer */
html body .s1-screen > .s1-wrap > *{ position:relative; z-index:1; }

/* ── 2. THE ROOM SCROLLS ITSELF, VISIBLY — fits 1440×900 / 1280×720 without cutting a row ──── */
html body .s1-screen{
  /* the outer veil no longer needs to scroll the whole page; the card scrolls itself so the
     rounded edge + shadow stay put like a real window while the content inside moves. */
  overflow:hidden !important;
}
html body .s1-screen > .s1-wrap{
  /* the flex-centred, padded `.s1-screen` (§0 above) now supplies the inset on all four sides —
     the card only needs to fill what's left of ITS OWN flex parent, not the raw viewport. */
  max-height:100% !important;
  overflow-y:auto !important; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:auto; scrollbar-color:var(--s1-accent) var(--s1-panel2);
}
html body .s1-screen > .s1-wrap::-webkit-scrollbar{ width:12px; }
html body .s1-screen > .s1-wrap::-webkit-scrollbar-track{ background:var(--s1-panel2); }
html body .s1-screen > .s1-wrap::-webkit-scrollbar-thumb{
  background:var(--s1-accent); border-radius:8px; border:3px solid var(--s1-bg);
}
/* "more below" affordance — a fixed fade + chevron pinned to the card's own bottom edge, shown
   only while there is unread content (class toggled by s1PressureRoomAffordance() in
   script-01.js, which measures scrollHeight vs clientHeight + scroll position — a CSS-only
   guess here would not know when the list is actually short enough to need none of this). */
html body .s1-screen > .s1-wrap.has-more::after{
  content:'▾ scroll for more'; position:sticky; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px;
  height:56px; margin-top:-56px; pointer-events:none;
  font:800 11px/1 var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--s1-ink);
  background:linear-gradient(0deg, var(--s1-bg) 10%, color-mix(in srgb, var(--s1-bg) 60%, transparent) 70%, transparent);
}

/* ── 3. TYPE FLOOR — chart axis/legend ≥11px, table text ≥13px ─────────────────────────────── */
html body .s1-screen .s1-chart .c-lbl{ font-size:12px !important; }
html body .s1-screen .s1-chart .c-lbl.death{ font-size:12.5px !important; }
html body .s1-screen .c-now-lbl{ font-size:11.5px !important; }
html body .s1-screen .s1-bar-lbl{ font-size:11.5px !important; }
html body .s1-screen .s1-leg{ font-size:12px !important; gap:7px; }
html body .s1-screen .s1-rb-sub{ font-size:13px !important; letter-spacing:.03em !important; }
html body .s1-screen .s1-lk{ font-size:13px !important; }
html body .s1-screen .s1-scn-tag{ font-size:11px !important; }
html body .s1-screen .s1-fig-lbl{ font-size:11px !important; }
/* the panel-header eyebrow ("BANK BALANCE & BURN TRAJECTORY" etc) measured 3.5-3.7:1 at 10px on
   --s1-muted (style-01.css:8923 dims it specifically for this ph context) — below AA for text
   this size. Same label voice, a less-dim ink: --s1-ink2 (already the room's own secondary-text
   token, used at body-copy size elsewhere in this room) measures clear in both themes. */
html body .s1-screen .s1-ph .s1-eye{ color:var(--s1-ink2) !important; font-size:11px !important; }

/* value-on-the-bar (new markup from s1PairBars()) — the number a DEATH WEEK bar was missing */
html body .s1-screen .s1-bar-col{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:5px; height:100%; flex:1 1 0; min-width:0;
}
html body .s1-screen .s1-bar-val{
  font:800 11.5px var(--mono),monospace; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; white-space:nowrap;
}
html body .s1-screen .s1-bar-val.burn{ color:var(--s1-bad); }
html body .s1-screen .s1-bar-val.bill{ color:var(--s1-good); }
html body .s1-screen .s1-bar-fill{ width:100%; max-width:40px; }

/* tabular-nums everywhere a figure appears in this room, so the payroll/accounts/ledger columns
   actually line up instead of drifting on proportional digit widths */
html body .s1-screen .s1-lv,
html body .s1-screen .s1-rb-v,
html body .s1-screen .s1-scn-out,
html body .s1-screen .s1-fig-v,
html body .s1-screen .s1-death-fig,
html body .s1-screen .s1-ph-n{
  font-variant-numeric:tabular-nums !important;
}

/* ── 3b. A THIRD cascade bite, found while proving the death-week colour ────────────────────
   style-01.css:6714 reasserts bare `.bad`/`.good`/`.warn` with `!important` for the whole
   `body[data-view="office"]` scope (a 2026-08 "office dark repaint" pass) — and body keeps
   `data-view="office"` while this room floats on top of it. `.s1-death-fig.bad` and
   `.s1-scn-out.bad/.good/.warn` (the LEVER scenario cards) both carry those bare semantic
   classes, so DEATH WEEK and every scenario outcome were silently repainted to the office's flat
   `--bad`/`--good`/`--warn` (measured: #ba1a1a, not this room's own --s1-bad #ff6a55/#c0392b) —
   a themed figure quietly wearing the wrong room's palette. `!important` beats `!important` only
   by matching it; scoped to `.s1-screen` so it touches nothing outside this room. */
html body .s1-screen .bad{ color:var(--s1-bad) !important; }
html body .s1-screen .good{ color:var(--s1-good) !important; }
html body .s1-screen .warn{ color:var(--s1-warn) !important; }

/* ── 4. THE DEATH WEEK — the one dramatic element, everything else disciplined ─────────────── */
html body .s1-screen .s1-death-card{
  padding:14px 4px 4px; gap:18px;
}
html body .s1-screen .s1-death-fig{
  font-size:clamp(42px,6.2vw,68px) !important; line-height:.86 !important;
  letter-spacing:-.03em !important;
}
/* type-sweep 2026-09-19: flat state colour, no halo (CEO: "no glowing display numerals, no
   drop-shadow halos") — was a 34px/28px coloured text-shadow glow on the CFO's headline figure. */
html body .s1-screen .s1-death-fig.bad{
  color:var(--s1-bad);
}
html body .s1-screen .s1-death-fig.good{
  color:var(--s1-good);
}
html body .s1-screen .s1-death-note{ font-size:13.5px !important; max-width:44ch; }
/* LIGHT theme only: measured 4.02-4.05:1 (design/pressure-room-2026-09-13/REPORT.json) — the room's
   own --s1-bad (#c0392b) reads fine as a small ledger figure but not at 68px 900-weight against
   this panel's warm-pink glow wash. A deeper brick red clears 4.5:1 with margin (~4.7:1 measured)
   without breaking the red→loss association; the glow stays the lighter --s1-bad for warmth. */
html body.mvc-light .s1-screen .s1-death-fig.bad{ color:#b23420 !important; }

/* ── 5. small craft fixes that fell out of the above ────────────────────────────────────────── */
/* the legend swatches were sized for 10px text; keep them proportionate at 12px */
html body .s1-screen .s1-leg i{ width:9px; height:9px; border-radius:2px; }

/* max-height:100% (§2 above) + the §0 flex parent's own smaller mobile padding already gives the
   card the full dvh minus its own inset at this width — nothing extra to do here. */

@media(prefers-reduced-motion:reduce){
  html body .s1-screen > .s1-wrap{ scroll-behavior:auto; }
}

/* ── 6. THE "BURN"/"COMMAND" BLEED WORD READS AS BACKDROP, NOT A TITLE COLLISION ────────────────
   CEO screenshot, 2026-09-14, live-play, verbatim: "thi sfinancials page is terrible" — a giant
   faint "BURN" sat directly behind "THE PRESSURE ROOM" and read as a layout bug, not atmosphere.
   ROOT CAUSE (style-01.css:8920): `.s1-bleed` is `top:-2vh; right:0; font:26vw/.8` — at 1440 that
   glyph is ~370px tall and starts above the fold, in the exact top-left quadrant `.s1-top`/`.s1-h`
   occupy 6px below the eyebrow. `.s1-top` does out-z-index it (2 vs 0), so the title text itself
   never went transparent — but the giant strokes crowding the same few hundred px as the headline
   is what read as "collides with the title" in the screenshot, and this room's `.s1-wrap > *{
   z-index:1 }` rule two sections up (loaded after style-01.css, equal specificity) was actually
   pulling `.s1-bleed` UP to z-index 1 on top of that, closer still to the title's z-index 2.
   Same defect, same fix already proven for `.dash-bleed` on the office dashboard (style-01.css
   :6502 — pulled off the header, shrunk ~60%, floor-anchored, opacity halved). Applied here,
   scoped to THIS room only: pin the word to its own bottom-right corner (well below the ledger,
   ahead of the report panel), shrink it, and drop it back to z-index 0 with !important so no later
   rule can re-lift it into the header's plane again. */
html body .s1-screen .s1-wrap > .s1-bleed{
  top:auto !important; bottom:-1.4vh !important; right:6px !important; left:auto !important;
  z-index:0 !important; font-size:clamp(64px,11vw,172px) !important; line-height:.8 !important;
  opacity:.03 !important;
}
@media(max-width:520px){
  html body .s1-screen .s1-wrap > .s1-bleed{
    font-size:clamp(46px,20vw,96px) !important; bottom:-0.6vh !important;
  }
}

/* ── 7. "IF NOTHING CHANGES" bars — the flat-projection caption + the NOW marker on the chart ─── */
html body .s1-screen .s1-flat-note{
  font-size:12px !important; line-height:1.5; color:var(--s1-muted); margin:10px 0 0;
  font-style:italic;
}
html body .s1-screen .s1-chart .c-now{ fill:var(--s1-accent); }
html body .s1-screen .s1-chart .c-now-lbl{
  font-weight:900 !important; fill:var(--s1-accent) !important; letter-spacing:.1em !important;
}
html body .s1-screen .s1-chart .c-grid{ opacity:.5; }

/* ── 8. DEATH WEEK — a serious CFO figure, not a jump-scare (CEO: reads "alarmist/unpolished") ──
   The number stays exactly what the maths says (real per-week burn/billings off the live save,
   verified against advanceWeek()'s own formula — see the ⛔ comment above toggleCFO()).
   ⛔ TYPE SWEEP 2026-09-19: this was the actual WINNING declaration (latest !important in this
   file's own cascade) and it was still a glow, just a dimmer one — "dialled back" never meant
   "removed", and the CEO's ruling today is explicit: no glowing display numerals, no drop-shadow
   halos, at all. Flat state colour only (style-01.css :9131), no text-shadow. */
html body .s1-screen .s1-death-fig.bad{ text-shadow:none !important; }
html body .s1-screen .s1-death-fig.good{ text-shadow:none !important; }
/* a verdict WORD ("NOT THIS SEASON") is longer than a week number ("WK 35") — same hero panel,
   a smaller clamp so it never overflows the card at 900-weight. */
html body .s1-screen .s1-death-fig.wide{
  font-size:clamp(22px,3.6vw,36px) !important; letter-spacing:-.01em !important; line-height:1.05 !important;
}

/* ── 9. THE HEADLINE IS A REAL HERO, THE GHOST IS GONE (CEO 2026-09-19, launch weekend) ───────
   TWO faults, same screenshot. (a) A decorative ghost "BURN" watermark sat behind "The pressure
   room" — forbidden outright by GAME_DESIGN_RULES §6 ("ghosted decorative numerals/words are
   forbidden"); removed at the source (the `<div class="s1-bleed">` is no longer emitted by
   toggleCFO() — script-01.js). (b) `.s1-h` was ALSO quietly losing its own hero size: this room
   loads before pn-type-cabinet-20260912.css's catch-all (`html body h1,h2,h3{font-size:var(--pn-
   type-window)}`, 17-25px, !important), so a same-tag h1 with no per-selector match in that
   sheet's SCOPE list fell through to its smallest WINDOW tier — measured, not assumed: `.s1-h`
   was rendering at window-tier, not the ~30-54px this file's own style-01.css rule intended.
   "Pitch ready" (the CEO's approved reference) is the HERO tier by name in that same sheet
   (`.pn-ready-title`) — matched here at the identical treatment: the cabinet face, upright 900,
   the system's own `--pn-type-hero` scale, sentence case. Loaded after pn-type-cabinet at equal
   selector depth + !important, so it wins. */
html body .s1-screen .s1-h{
  font-family:var(--pn-type-face,Inter,sans-serif) !important;
  font-weight:900 !important; font-style:normal !important;
  font-size:var(--pn-type-hero, clamp(34px,7vw,88px)) !important;
  line-height:var(--pn-type-leading-hero, .9) !important;
  letter-spacing:var(--pn-type-tracking, -.03em) !important;
  text-transform:none !important; text-wrap:balance;
}

/* ── 10. "CASH IF NOTHING CHANGES" — a real, changing figure per week, not a repeated pair ────
   Colour law matches the ledger's own semantic set: healthy / tightening / at-zero, on the bar
   fill, its value label and the legend swatch — one system, three states. */
html body .s1-screen .s1-bar-fill.pos{ background:var(--s1-good); }
html body .s1-screen .s1-bar-fill.warn{ background:var(--s1-warn); }
html body .s1-screen .s1-bar-fill.neg{ background:var(--s1-bad); }
html body .s1-screen .s1-bar-val.pos{ color:var(--s1-good); }
html body .s1-screen .s1-bar-val.warn{ color:var(--s1-warn); }
html body .s1-screen .s1-bar-val.neg{ color:var(--s1-bad); }
html body .s1-screen .s1-leg.pos i{ background:var(--s1-good); }
html body .s1-screen .s1-leg.warn i{ background:var(--s1-warn); }
html body .s1-screen .s1-leg.neg i{ background:var(--s1-bad); }

/* the "NOT THIS SEASON" chart annotation (net runway beyond the sane horizon) — a calm, good-
   toned label, never the alarm red a DEATH marker takes. */
html body .s1-screen .s1-chart .c-lbl.death.safe{
  fill:var(--s1-good) !important; font-weight:800 !important; letter-spacing:.06em !important;
}

/* ══ §11 · THE ROOM IS A PAGE INSIDE THE DEVICE, IN THE APPROVED HEADLINE TREATMENT ══════════
   CEO, launch weekend 2026-09-19: "Financials needs the new headline treatment and should all be
   in ipad." Two faults, both MEASURED on the booted game at 1440×900 before this was written:

   1. WHERE THE ROOM SAT. The brief's standing fact — "<body> is the iPad screen" — describes
      pn-ipad-shell.css's desktop mode. It is not the shell this build boots into: the live hub is
      `body > .pad > .dev > .screen` (pn-system-v4.css), body measures the full 1440×900 viewport
      and `.screen` is the device at [60,98 → 1320×780]. `s1MountView()` appended the room to
      <body> as `position:fixed; inset:0`, so the card's top edge sat at y=38 — 60px ABOVE the
      device's own top bezel — with a 55% veil + 96px drop shadow + gradient fill over the whole
      window. That is a page-level modal over the desk, which is exactly the read the CEO named.
      Fix (same one this codebase already proved for THE WIRE, pn-wire-menu-20260819.css §1): the
      room mounts INSIDE `.screen` as an absolute child (s1MountView, script-01.js), inset to the
      right of the sidebar and below the app bar — the two measures the function reads live and
      hands over as `--s1-inset-left` / `--s1-inset-top`. The sidebar and the command bar stay
      visible around it. It is the Financials page of the app, not a window over the app.
      Phones/tablets (≤1024 or coarse pointer) keep the fixed full-screen mount: there `.screen`
      is height:auto and the page itself scrolls, so a fixed room is the honest shape.
   2. HOW IT WAS DRESSED. §0/§1 above gave the card a veil, a radial+linear gradient fill, a
      110px shadow, a grain layer and a 16px radius — every one of them now banned by name
      (BINDING RULING #6: no glass, no gradient, no shadow) and every one of them the "floating
      panel" read. The approved reference is the Work-ready card (pn-pitch-flow-20260919.css §2):
      a FLAT dark surface, one hairline, ONE 4px orange rule, Inter 900 upright sentence-case
      headline at clamp(30px,4.2vw,46px)/.98, mono uppercase labels, generous spacing. §9's 88px
      hero clamp was the wrong tier — it dwarfed the reference by 2×. Matched here exactly.
   Orange is now used in this room for: the header rule, the chart line, the state colours on
   figures. The three accent left-borders (two panels + the Marlowe report's inline style) go
   to hairline; the eyebrows are ink-2 per pn-ds.css's label floor.
   Applies to BOTH s1 rooms (Financials + COO "State of the agency") — one family, one
   treatment. The COO room's "COMMAND" ghost is removed at source (openCOO, script-01.js) and
   belt-and-braces here.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* 11.1 — the surface: opaque, flat, the room's own bg. No veil, no blur, no viewport grain. */
html body .s1-screen{
  background:var(--s1-bg) !important;
  background-image:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:block !important; padding:0 !important;
  overflow:hidden !important;
}
html body .s1-screen::before{ content:none !important; }

/* 11.2 — inside the device (desktop, cased): an absolute child of `.screen`, inset past the
   sidebar and under the app bar. `top/left` come after style-01.css:12258's `inset:0 !important`
   in the cascade and out-rank it on specificity, so they win. z-index sits above `.content`
   (contain:paint, z auto) and the sticky app bar (30); below THE WIRE (60) by design. */
html body .screen > .s1-screen.s1-screen--in-device{
  position:absolute !important;
  top:var(--s1-inset-top,0px) !important; left:var(--s1-inset-left,0px) !important;
  right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important;
  z-index:40 !important; border-radius:0 !important;
}

/* 11.3 — the card is not a card: flat page content. Kills §0/§1's radius, edge, shadow,
   gradient and grain, keeps the room's own scroll (§2). */
html body .s1-screen > .s1-wrap{
  width:100% !important; max-width:1180px !important; height:100% !important; max-height:100% !important;
  margin:0 auto !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:var(--s1-bg) !important; background-image:none !important;
  padding:clamp(22px,3.2vh,36px) clamp(20px,3.2vw,44px) 72px !important;
  isolation:auto;
}
html body .s1-screen > .s1-wrap::before,
html body.mvc-light .s1-screen > .s1-wrap::before{ content:none !important; }
@media(max-width:520px){
  html body .s1-screen > .s1-wrap{ padding:18px 16px 84px !important; }
}

/* 11.4 — THE HEADLINE TREATMENT (the approved card's, exactly). One 4px orange rule above the
   header — the single loud accent — then eyebrow → headline → standfirst at the reference scale. */
html body .s1-screen .s1-top{
  border-top:4px solid var(--s1-accent) !important;
  padding-top:18px !important; margin-bottom:clamp(20px,3vh,30px) !important;
  align-items:flex-start !important; gap:20px !important;
}
html body .s1-screen .s1-top .s1-eye{
  font:800 10.5px/1 var(--mono),monospace !important; letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
html body .s1-screen .s1-h{
  font-size:clamp(30px,4.2vw,46px) !important;
  line-height:.98 !important; letter-spacing:-.03em !important;
  margin:10px 0 0 !important;
  max-width:18ch;
}
html body .s1-screen .s1-sub{
  font:500 14px/1.55 var(--pn-type-face,Inter,sans-serif) !important;
  color:var(--s1-ink2) !important; max-width:56ch !important; margin:12px 0 0 !important;
}
html body .s1-screen .s1-sub b{ font-weight:800; }

/* the way back — a secondary control: unfilled, so stroked (ruling #6 §4). No accent fill on
   hover; the hover is a quiet step, not the one orange. */
html body .s1-screen .s1-close{
  background:transparent !important; color:var(--s1-ink) !important;
  border:1px solid color-mix(in srgb, var(--s1-ink) 55%, transparent) !important;
  padding:12px 16px !important; transform:none !important; margin-top:2px;
}
html body .s1-screen .s1-close:hover,
html body .s1-screen .s1-close:focus-visible{
  background:var(--s1-panel) !important; border-color:var(--s1-ink) !important; color:var(--s1-ink) !important;
}

/* 11.5 — FLAT PANELS, ONE RADIUS, NO CHAMFER, NO LIFT. `.s1-scn` carried a clip-path chamfer and
   the light theme gave every panel a two-layer shadow (style-01.css:8991) — both gone. The
   `border` shorthand also retires the accent left-borders (`.s1-panel--accent`, `.s1-note`, and
   the Marlowe panel's INLINE `border-left:3px solid` — an author !important beats an inline
   non-important declaration). */
html body .s1-screen .s1-panel,
html body.mvc-light .s1-screen .s1-panel,
html body .s1-screen .s1-note,
html body.mvc-light .s1-screen .s1-note,
html body .s1-screen .s1-scn{
  box-shadow:none !important; clip-path:none !important; -webkit-clip-path:none !important;
  background-image:none !important; border-radius:10px !important;
}
html body .s1-screen .s1-panel{ border:1px solid var(--s1-edge) !important; padding:18px 20px !important; }
html body .s1-screen .s1-note{ border:1px solid var(--s1-edge2) !important; }
html body .s1-screen .s1-scn{ border:1px solid var(--s1-edge2) !important; }
html body .s1-screen .s1-grid-2, html body .s1-screen .s1-grid-3{ gap:16px !important; }
html body .s1-screen .s1-row{ margin-top:16px !important; }
html body .s1-screen .s1-ph{ margin-bottom:14px !important; }

/* 11.6 — NO 900-ITALIC IN THE GAME (promo/social only). The COO valuation figure and the
   panel-header count were the last two italic display strings in these rooms. */
html body .s1-screen .s1-fig-v,
html body .s1-screen .s1-ph-n{
  font-family:var(--pn-type-face,Inter,sans-serif) !important; font-style:normal !important;
}
/* the ghost word — gone in both rooms regardless of what markup a stale save re-emits */
html body .s1-screen .s1-bleed{ display:none !important; }

/* 11.7 — the one dramatic figure stays dramatic, but it no longer out-shouts the headline by
   1.5× — the room's own hero is the title; the verdict is the loudest DATA, not the loudest type. */
html body .s1-screen .s1-death-fig{ font-size:clamp(38px,4.8vw,56px) !important; }

/* the "more below" cue keeps its fade (a scroll affordance, not a fill on a control) but sits on
   the flat page paint */
html body .s1-screen > .s1-wrap.has-more::after{ color:var(--s1-ink2); }

/* 11.8 — TWO ID-LEVEL RULES IN style-01.css WERE STILL WINNING, measured on the render:
     · style-01.css:12390 `#__cfoView > *` — 16px radius, hairline, `0 40px 96px` shadow and
       `overflow:hidden !important` (which also silently beat §2's overflow-y:auto on the wrap);
     · style-01.css:9254 `#__cooView .s1-close, #__cfoView .s1-close` — panel fill, the faint
       .11 edge and a 2px radius, with the orange-fill hover on 9255.
   An id out-ranks any number of classes, so these are matched at id level, once, here. */
html body #__cfoView > .s1-wrap,
html body #__cooView > .s1-wrap{
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow-y:auto !important; overflow-x:hidden !important;
}
html body #__cfoView .s1-close,
html body #__cooView .s1-close{
  background:transparent !important; color:var(--s1-ink) !important;
  border:1px solid color-mix(in srgb, var(--s1-ink) 55%, transparent) !important;
  border-radius:10px !important;
}
html body #__cfoView .s1-close:hover, html body #__cfoView .s1-close:focus-visible,
html body #__cooView .s1-close:hover, html body #__cooView .s1-close:focus-visible{
  background:var(--s1-panel) !important; border-color:var(--s1-ink) !important; color:var(--s1-ink) !important;
}

/* 11.9 — the "more below" cue sits ON the scroll edge, not 72px above it. `position:sticky;
   bottom:0` resolves against the scroll container's CONTENT box, so the wrap's bottom padding
   was holding the cue up over the last visible rows (measured 87px above the edge at 1440). The
   clearance moves from padding on the scroller to margin on its last child — the scroll range
   is the same, the cue lands where the content actually ends. */
html body .s1-screen > .s1-wrap{ padding-bottom:0 !important; }
html body .s1-screen > .s1-wrap > :last-child{ margin-bottom:72px !important; }
@media(max-width:520px){
  html body .s1-screen > .s1-wrap > :last-child{ margin-bottom:96px !important; }
}

/* 11.10 — LIGHT THEME SEMANTIC INK, measured by tools/legibility_gate.mjs after §11.3 made the
   panels sit on the flat bone page: `.s1-lv.s1-bad` "−£6,840/wk" at 4.19:1 (#c0392b on the
   panel's #e9e1d3 bed). The same arithmetic puts the light good (#178a4c) at ~3.4:1 and warn
   (#a3610a) at ~3.8:1 on that bed. One deeper triad for the light room, so every state figure
   clears 4.5:1 with margin: bad #b23420 (4.8:1, the brick §4 already chose for the death
   figure), good #126a3a (5.1:1), warn #8a5106 (5.0:1). Chart fills and bars follow the same
   tokens, so the room stays one system. Dark theme unchanged (already clear). */
html body.mvc-light .s1-screen{
  --s1-bad:#b23420; --s1-good:#126a3a; --s1-warn:#8a5106;
}