/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE DOCKET FOLD — CEO live-play feedback #8, 2026-09-12
   Verbatim: "This big pitch button needs to be bigger and above the fold, so either build two
   columns for all this or have them collapsed by default to make the page cleaner and easier
   to action."

   REAL DIAGNOSIS (superseding a first, wrong one written into this file's first draft — caught
   before ship by actually rendering the real game, GAME_DESIGN_STATE §7, rather than reading the
   CSS and assuming it applied). `.wr-split` looked like a live two-column grid at line 170 of
   pn-final-20260820.css — but §20 of THE SAME FILE (line 832, later in source, equal
   specificity, also `!important`) sets it right back to `display:block` UNCONDITIONALLY, no
   media query, per an EARLIER and now-superseded CEO ruling: "clean this all up into one column,
   with the actual Pitch it button at the bottom... apply same for brief prep" (2026-08-20). The
   two-column rule at line 170 has been dead code since that date at every viewport, not just
   below 1100px. Today's note reverses that ruling — the CTA needs to be reachable without
   scrolling, and one column with the CTA "at the bottom" cannot do that once a brief-on-a-page
   hero, a dossier and a response module all sit above it. Confirmed by rendering BOTH states
   (design/docket-fold-2026-09-12/{before,after}-report.json): before this fix the CTA's
   bounding box sat past y=2300px on a 900px-tall viewport at every width tested, mobile
   included — a single-column page with the commit button "at the bottom" is exactly what put it
   below the fold, on every screen size the CEO used it on.

   FIX, in the two shapes the CEO offered:
   1. TWO COLUMNS, real, from 1024px — `.wr-split` a live grid, `.wr-rail` sticky, overriding §20.
      Also moved `briefOnAPageHTML()` inside `.wr-main` (script-01.js) so the split — and the
      rail beside it — begins right under the masthead instead of below a full-width hero first;
      `position:sticky` can only pin a rail from wherever it already sits in flow, so its native
      offset had to move up, not just its column.
   2. COLLAPSED BY DEFAULT — the angle/page/team-roster/time checklist folds into ONE disclosure
      (`.wr-more--build`), one-line summary, the same species of fold already used for "5
      disciplines fielded" (kept, untouched) and every other `.wr-more` on this screen. The CTA
      itself moves from the LAST thing in the docket to the FIRST thing after the read-only facts.
   3. BELOW 1024px (tablet + the 390px phone) — single column stands, CTA still promoted to the
      top of the docket section and the checklist still collapses; on the 390px phone specifically
      the pre-existing FIXED bottom dock (style-01.css §B8, `position:fixed` under
      `[data-view="pitch"]`) lifts the CTA out of document flow entirely regardless of column
      count, so it was already reachable there — this file only restores its helper note.
   Markup change: web/assets/js/play/script-01.js `warRailHTML()` + the `warroom` render (moved
   `briefOnAPageHTML()`). This sheet is styling only.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · REAL TWO COLUMNS FROM 1024px — OVERRIDES pn-final-20260820.css §20 ──────────────────
   §20 forced `display:block` on `.wr-split` at every width with `!important`, no media query.
   Loaded after it in play.html, so equal specificity + later source wins outright; scoped to
   ≥1024px so the phone/tablet single-column call in §20 still stands below that. */
@media (min-width:1024px){
  /* RAIL WIDTH, corrected 2026-09-12 (coordinator rejection): 320px in a docket that also loses
     ~80px of its own inner width to a stray padding bug (below, §3b) rendered the CTA at 192px —
     "cramped… not that". `clamp(300px, 25vw - 20px, 340px)` is the exact line through the two
     points named: 300px at 1280 (25vw-20 = 300), 340px at 1440 (25vw-20 = 340). Comes out of the
     brief column, which is `minmax(0,1fr)` and free to give up the width. */
  html body .pn-fwin .wr-split{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) clamp(300px, calc(25vw - 20px), 340px) !important;
    column-gap:24px !important; row-gap:0 !important;
  }
  html body .pn-fwin .wr-main{ width:auto !important; max-width:none !important; min-width:0; }
  html body .pn-fwin .wr-rail{
    position:sticky !important; top:66px;
    width:auto !important; max-width:none !important;
    margin:0 !important; display:flex !important; flex-direction:column; gap:16px;
  }
  html body .pn-fwin .wr-rail .wr-bs{ width:auto !important; max-width:none !important; }
}

/* ── 2 · THE CTA IS THE FIRST THING IN THE DOCKET ─────────────────────────────────────────────
   warRailHTML() now emits `.wr-bs-dock` immediately after `.wr-bs-head` — this just gives it a
   harder edge and stops it reading like "one more list row" once it is that prominent. */
html body .pn-fwin .wr-bs-dock.wr-bs-dock--pinned{
  border-top:none;
  border-bottom:1px solid var(--bs-hair);
}
/* the checklist disclosure now sits AFTER the dock — it keeps the dock's bottom rule as its own
   ceiling so the fold reads as "detail below the decision", not a stray rule floating alone */
html body .pn-fwin .wr-bs > .wr-more--build{ margin-top:0; }
html body .pn-fwin .wr-bs > .wr-more--build > summary{ padding:0 18px; }

/* ── 3a · THE STRAY 40px THAT WAS EATING THE RAIL — coordinator rejection, 2026-09-12 ─────────
   `.wr-bs` is a bare `<section>` and never declared its own `padding`, so a near-global,
   very-low-specificity `section{padding:0 var(--inset)}` (pn-system-v4.css) was the ONLY rule
   setting it — `--inset:40px` at this width. That is 80px gone from a 320px rail before a single
   child's own padding is even counted; the dock's own 18px×2 on top of it left `#get-to-work`
   192px wide, arrow jammed against the chip, first letter tight to the edge — exactly the
   rejection. `.wr-bs`'s own children (`.wr-bs-head`, `.wr-bs-dock`, `.wr-more--build > summary`)
   already carry their own 18px insets, so the outer section owes nothing. Class beats element on
   specificity alone; this override needs no fight, just a declaration that was simply missing. */
html body .pn-fwin .wr-bs{ padding:0 !important; }

/* the arrow needs SOME gap from the label everywhere (the markup dropped the literal space
   character in favour of a real element, `.wr-bs-cta-arrow`) — this baseline applies on mobile
   too, where §3b below does not, deliberately (coordinator: "mobile dock is fine — do not touch
   it"). It is smaller than a text space, a strict no-op-or-better versus the old inline gap. */
html body .wr-bs-cta-arrow{ font-style:normal; display:inline-block; margin-left:.35em; }

/* ── 3b · BIGGER, LOUDER, ONE HOUSE ORANGE — enlarged again per coordinator rejection ─────────
   Desktop (≥1024px) ONLY — the mobile fixed dock is untouched, per instruction. "This big pitch
   button needs to be bigger." 60px tall (was 56), full column width (`.pn-btn--block` gives
   width:100%, now with real room to fill after §3a), the house `--p`/`--p2` orange fill
   `.pn-btn--primary` already carries — no new colour, Law 1. Restructured as two stacked rows so
   the label, arrow and chip each get real air instead of fighting for one line:
   `.wr-bs-cta-label` (verb + arrow) on top, `.wr-bs-dock-chip` (the time cost) on its own line
   underneath, right-aligned — never touching the label per the coordinator's explicit ask. */
@media (min-width:1024px){
  html body .wr-bs-cta.pn-btn{
    min-height:60px; border-radius:6px;
    flex-direction:column !important; align-items:stretch !important; justify-content:center;
    gap:6px; padding:12px 22px;
  }
  html body .wr-bs-cta-label{
    display:flex; align-items:center; gap:.5em;
    font-family:var(--pn-disp,inherit); font-weight:800; font-size:19px; letter-spacing:-.005em;
    line-height:1.15;
  }
  html body .wr-bs-cta-label .wr-bs-cta-arrow{ margin-left:0; } /* the flex `gap` above owns it here */
  /* the "(0 Time)" cost reads as a QUIET CHIP on its OWN LINE, right-aligned, never touching the
     label — the CEO's own phrasing: "as a quiet chip not inside the label" */
  html body .wr-bs-cta .wr-bs-dock-chip{
    align-self:flex-end; margin-left:0;
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    opacity:.78; padding:3px 9px; border-radius:999px;
    background:rgba(0,0,0,.16); color:inherit; font-variant-numeric:tabular-nums;
  }
  html body.mvc-light .wr-bs-cta .wr-bs-dock-chip{ background:rgba(255,255,255,.22); }
  /* the built-state CTA has no chip — just the label, vertically centred, still the taller button */
  html body .wr-bs-cta:not(:has(.wr-bs-dock-chip)){ justify-content:center; }
}

/* the THIN warning is the one line inside the fold that changes a decision (UX_RULES §15) —
   it still reads as a warning once it moves into the summary line, not just the black-box body */
html body .wr-more-warn{ color:var(--bs-neg,#ff8f7a); font-style:normal; }

/* ── 4b · SHORT VIEWPORTS (1280×720-class laptops) — THE MASTHEAD GIVES BACK ITS HEIGHT ───────
   Two columns from 1024px still left the CTA ~90px past the fold at 1280×720: the cover-image
   masthead alone claims `clamp(182px,25vw,286px)` (style-01.css), which is 286px on a 1280-wide
   screen, before the titlebar/stage-rail/dossier even start. On a genuinely short viewport there
   is no spare height to give a hero image — shrink ONLY inside the docket window (`.pn-fwin`),
   never the masthead's other uses (client accounts, etc). */
@media (max-height:760px){
  /* must match/outrank style-01.css `html body[data-view="pitch"] .wr-masthead` (0,3,1) — the
     plain `.pn-fwin .wr-masthead` form here would lose that specificity fight outright */
  html body[data-view="pitch"] .pn-fwin .wr-masthead{ min-height:190px !important; }
  /* a first pass shrank this to 150px and the bottom-anchored brand name (`.wr-mh-body`,
     align-items:flex-end) rode up into the top-anchored case chip (`.wr-mh-case`, top:52px) —
     measured as literal overlapping text on the 1280×720 render. §15's own already-standing
     reasoning for hiding this chip on phones applies here too: `.bop-eyebrow` prints the same
     case ref 40px below it, so it is said twice regardless — cut the weaker instance rather than
     fight it for the same 52-72px band a shorter masthead no longer has to spare. */
  html body[data-view="pitch"] .pn-fwin .wr-mh-case{ display:none !important; }
}

/* ── 4 · MOBILE 390 — THE HELPER LINE SURVIVES THE FIXED DOCK ─────────────────────────────────
   style-01.css §B (≤760px) hides `.wr-bs-dock-note` entirely as part of the phone rebuild —
   right call for the old bottom-of-page dock, wrong now the brief asks for the line to stay
   under a STICKY CTA. Un-hide it, one line, and give the fixed dock the extra height back. */
@media (max-width:760px){
  /* THE FIXED DOCK WAS NEVER VIEWPORT-FIXED. `.content{contain:paint}` (pn-system-v4.css, a
     deliberate containing-block for the office view's fixed light field) also makes `.content`
     the containing block for ANY `position:fixed` descendant, per spec — including this dock.
     Measured on the real game: `.wr-bs-dock` computed `position:fixed; bottom:0px` and still sat
     at y=3256 on an 844-tall viewport, because `bottom:0` was resolving against `.content`'s full
     scrollable height, not the window. The light-field effect only runs under
     `body[data-view="office"]`, so lifting containment while on the pitch view is safe — the dock
     is disabled outright everywhere else via GP-08/Law-2's `display:none` rules regardless. */
  html body[data-view="pitch"] .content{ contain:none !important; }
  /* THE REAL BLOCKER, found by forcing a `background:red` probe onto the live dock and finding it
     genuinely unpainted, not merely covered: `.wr-bs` carries `.clip-tr`/`.clip-bl`
     (style-01.css) — a `clip-path:polygon(...)` for the dossier's cut-corner card aesthetic.
     Unlike `overflow`, `clip-path` clips its ENTIRE rendering subtree regardless of a
     descendant's positioning scheme — a `position:fixed` child does not escape an ancestor's
     clip-path the way it escapes `overflow:hidden`. So the dock was being clipped to the
     document-flow footprint of its own card (roughly 292×151px near the bottom of a 3000px-tall
     page), which is why it never painted at the true viewport bottom despite computing the
     right rect. The cut-corner card shape is a desktop-card detail; the mobile dock is already a
     full-width fixed bar with its own top rule, so losing the diagonal here costs nothing. */
  html body[data-view="pitch"] .wr-bs.clip-tr,
  html body[data-view="pitch"] .wr-bs.clip-bl{ clip-path:none !important; }
  html body[data-view="pitch"]{ --pnm-dock:118px; }
  html body[data-view="pitch"] .wr-bs-dock-note{
    display:block !important; flex:1 1 100%; order:3;
    margin:0; font-size:11px; line-height:1.3; opacity:.82;
    white-space:normal; overflow:visible;
    /* NOT the `--bs-head-dim` this rule inherits by default: that token was repointed to a LIGHT
       value by pn-final-20260820.css §9 for the DESKTOP dark-theme docket, which sits on a dark
       slab there. The phone's fixed dock is a different, hardcoded surface (ALTERNATION LAW —
       pale slab on dark themes, `#e3e9f2` bg / `#0b1c30` ink; dark slab on light themes,
       style-01.css ~10722) — this note was `display:none` until this pass, so the mismatch
       (light ink on the pale phone dock, measured 1.1:1) was dormant until now. `color:inherit`
       takes the dock's own explicit ink instead of the mismatched var. */
    color:inherit !important;
  }
  html body[data-view="pitch"] .wr-bs-dock .wr-bs-cta{ order:2; }
  html body[data-view="pitch"] .wr-bs-dock-k{ order:1; }
}