/* 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. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRACEY · 2026-08-01 — TWO CEO ITEMS, ONE SHEET
     A. CEO-39  THE SQUAD LEDGER   (Hires ▸ Your Staff)   .sqd*
     B. CEO-52  THE BRIEF DOSSIER  (war room ▸ 01 the ask) .wr-doss*
   ALTERNATION LAW (SST §5f) is the spine of both: the chrome objects here — the roster rail, the
   roster card headers, the TRAIN UP slab, the dossier's header band — go DARK on a light page and
   machined PALE SLATE on a dark page, off the shared --rail-* token set. Every ink value below is
   DECLARED for both themes (UX_RULES §1: ink is never inherited). No bare element selectors: every
   rule is scoped to a class.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── A · THE SQUAD LEDGER ─────────────────────────── */
html body.mvc-light[data-view="office"] .sqd-rail,
html body.mvc-light[data-view="office"] .sqd-cardtop,
html body.mvc-light[data-view="office"] .sqd-acts{
  --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
  --rail-ink-dim:rgba(233,240,251,.72); --rail-hair:rgba(233,240,251,.18);
  --rail-edge:rgba(0,0,0,.5); --rail-lift:0 1px 0 rgba(233,240,251,.1) inset,0 16px 32px -20px rgba(9,16,28,.85);
  --rail-on:#f97316; --rail-on-ink:#0b1c30;                       /* 7.3:1 */
  --rail-good:#3ddc84; --rail-warn:#ffb638; --rail-bad:#ff8a72;   /* 8.9 / 9.6 / 5.6 on #0b1c30 */
}
html body:not(.mvc-light)[data-view="office"] .sqd-rail,
html body:not(.mvc-light)[data-view="office"] .sqd-cardtop,
html body:not(.mvc-light)[data-view="office"] .sqd-acts{
  --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
  --rail-ink-dim:rgba(11,28,48,.78); --rail-hair:rgba(11,28,48,.2);
  --rail-edge:rgba(6,11,20,.7); --rail-lift:0 1px 0 rgba(255,255,255,.85) inset,0 16px 34px -18px rgba(0,0,0,.7);
  --rail-on:#b4380d; --rail-on-ink:#ffffff;                       /* 4.7:1 */
  --rail-good:#12703d; --rail-warn:#8a5008; --rail-bad:#a3271b;   /* 5.1 / 5.6 / 5.9 on #d9e0ea */
}
/* the app paints two FIXED z-index:0 layers over the whole shell (.mvc-veil vignette + .mvc-grain).
   Any block that is not itself positioned paints UNDER them and is crushed to black — measured live:
   the depth bar was invisible even filled lime. Every crafted PN component declares position:relative
   for this reason (.s2-plate, .pnac-hero, .wr-tension); the ledger joins them, once, at the section. */
.sqd{ display:block; position:relative; z-index:1 }

/* the instrument rail — the panel's head. NOT a masthead: YOUR TEAMS above owns that object. */
.sqd-rail{ display:flex; flex-wrap:wrap; align-items:stretch; margin:0 0 12px;
  background:var(--rail-bg); color:var(--rail-ink);
  border:1px solid var(--rail-edge); border-left:4px solid var(--rail-on);
  border-radius:2px; box-shadow:var(--rail-lift); overflow:hidden }
.sqd-rail-id{ flex:1 1 240px; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 11px;
  padding:14px 20px 15px 17px; border-right:1px solid var(--rail-hair) }
.sqd-rail-id > i{ flex:1 0 100%; margin-bottom:10px; font-style:normal;
  font-family:var(--mono),ui-monospace,monospace; font-size:8.5px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rail-ink-dim) }
.sqd-rail-id > b{ font-family:'Inter',sans-serif; font-size:clamp(40px,5.4vw,58px); font-weight:900;
  line-height:.76; letter-spacing:-.055em; font-variant-numeric:tabular-nums; color:var(--rail-ink) }
.sqd-rail-id > em{ font-style:normal; font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
  line-height:1.3; color:var(--rail-ink-dim) }
.sqd-reads{ flex:3 1 400px; display:flex; min-width:0 }
.sqd-read{ flex:1 1 0; min-width:0; display:block; padding:14px 12px 14px 14px;
  border-right:1px solid var(--rail-hair) }
.sqd-reads .sqd-read:last-child{ border-right:0 }
.sqd-read > i{ display:block; margin-bottom:8px; font-style:normal;
  font-family:var(--mono),ui-monospace,monospace; font-size:8px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rail-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sqd-read > b{ display:block; font-family:'Inter',sans-serif; font-size:26px; font-weight:900; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--rail-ink) }
.sqd-read > em{ display:block; margin-top:6px; font-style:normal; font-family:'Inter',sans-serif;
  font-size:10.5px; font-weight:600; line-height:1.3; color:var(--rail-ink-dim) }
.sqd-read.is-good > b{ color:var(--rail-good) }
.sqd-read.is-warn > b{ color:var(--rail-warn) }
.sqd-read.is-bad  > b{ color:var(--rail-bad) }
/* the help chip sits on the rail's ink, not the page's */
.sqd-rail-id .help-chip{ border-color:var(--rail-hair) !important; color:var(--rail-ink) !important;
  background:rgba(128,128,128,.18) !important }

/* BENCH DEPTH — a bar, not four equal chips: each segment is as wide as its headcount, so a hole in
   the bench is a SHAPE before it is a word. Hatched = nobody in that discipline. */
/* the plate is OPAQUE (--s2-panel-solid), not a 5% tint: a translucent well inherits whatever the
   view happens to be painting behind it, which makes its ink unmeasurable — and unmeasurable ink is
   how this project has shipped light-on-light three times. Opaque surface, declared severity inks. */
.sqd-depth{ display:flex; flex-wrap:wrap; margin:0 0 14px; border:1px solid var(--s2-hair);
  border-radius:2px; background:var(--s2-panel-solid); overflow:hidden;
  --sqd-warn:#ffb86b; --sqd-good:#3fd68f; --sqd-bad:#ff6a55 }
html body.mvc-light[data-view="office"] .sqd-depth{ --sqd-warn:#95430a; --sqd-good:#12703d; --sqd-bad:#a3271b }
.sqd-seg{ min-width:0; display:block; padding:11px 13px 12px; border-right:1px solid var(--s2-hair) }
.sqd-depth .sqd-seg:last-child{ border-right:0 }
.sqd-seg > i{ display:block; margin-bottom:7px; font-style:normal;
  font-family:var(--mono),ui-monospace,monospace; font-size:8px; font-weight:800; letter-spacing:.16em;
  color:var(--s2-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sqd-seg > b{ font-family:'Inter',sans-serif; font-size:17px; font-weight:900; line-height:1;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--s2-ink) }
.sqd-seg > em{ display:block; margin-top:5px; font-style:normal; font-family:'Inter',sans-serif;
  font-size:10px; font-weight:600; color:var(--s2-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sqd-seg.is-hole{ background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--s2-hair-2) 5px 6px);
  box-shadow:inset 0 -3px 0 var(--sqd-warn) }
.sqd-seg.is-hole > b, .sqd-seg.is-hole > em{ color:var(--sqd-warn) }

/* the legend is the ONE thing here that sits on the raw view surface. Measured on the shipped light
   page that surface is a warm #c5bfb3, where --s2-dim lands at 4.12:1 — under AA. Ink pinned. */
.sqd-legend{ margin:0 0 16px; max-width:76ch; font-family:'Inter',sans-serif; font-size:12.5px;
  line-height:1.55; font-weight:500; color:rgba(238,244,252,.78) }
html body.mvc-light[data-view="office"] .sqd-legend{ color:#3a342c }          /* 6.8:1 on #c5bfb3 */
.sqd-legend b{ color:#f4f8ff; font-weight:800 }
html body.mvc-light[data-view="office"] .sqd-legend b{ color:#1c1611 }

/* the filed roster cards — square edges, no mint, one bespoke object (the captain's spine) */
.sqd-board{ margin-top:16px }
/* the dossier body takes the slack so every card's action bar lands on the SAME line — a person
   with a long HR warning must not push their own TRAIN UP button out of the row. */
html body[data-view="office"] .sqd-board .sqd-card .tt-card{ flex:1 1 auto }
html body[data-view="office"] .sqd-card{ position:relative; overflow:hidden;
  border:1px solid var(--s2-hair) !important; border-radius:2px !important; outline:0 !important;
  box-shadow:0 16px 36px rgba(0,0,0,.26) !important }
html body.mvc-light[data-view="office"] .sqd-card{ box-shadow:0 12px 28px rgba(24,16,8,.13) !important }
html body[data-view="office"] .sqd-card.is-capt{ border-left:3px solid var(--p2,#f97316) !important }
html body[data-view="office"] .sqd-card.is-warn{ border-left:3px solid var(--s2-warn) !important }
html body[data-view="office"] .sqd-card.is-bad{ border-left:3px solid var(--s2-bad) !important }
html body[data-view="office"] .sqd-board .tt-card{ border-radius:0 !important; border:0 !important;
  box-shadow:none !important }
.sqd-cardtop{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; background:var(--rail-bg); color:var(--rail-ink);
  border-bottom:1px solid var(--rail-edge) }
.sqd-cardtop > i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:8.5px;
  font-weight:800; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap }
.sqd-rank{ color:var(--rail-ink-dim) }
.sqd-card.is-capt .sqd-rank{ color:var(--rail-on) }
.sqd-cond{ color:var(--rail-ink-dim) }
.sqd-card.is-good .sqd-cond{ color:var(--rail-good) }
.sqd-card.is-warn .sqd-cond{ color:var(--rail-warn) }
.sqd-card.is-bad  .sqd-cond{ color:var(--rail-bad) }

html body[data-view="office"] .sqd-foot{ display:flex; flex-direction:column; align-items:stretch; gap:11px;
  padding:12px !important; background:var(--s2-well) !important;
  border:0 !important; border-top:1px solid var(--s2-hair) !important; border-radius:0 !important }
/* the light-theme --s2-good (#1f8a4c) measured 4.09:1 on the card foot — under AA. The meter pins its
   own severity inks, both directions measured, rather than borrowing a token tuned for 8px chips. */
.sqd-meters{ display:flex; gap:0; border:1px solid var(--s2-hair-2); border-radius:2px; overflow:hidden;
  --sqd-good:#3fd68f; --sqd-warn:#ffb86b; --sqd-bad:#ff6a55 }
html body.mvc-light[data-view="office"] .sqd-meters{ --sqd-good:#12703d; --sqd-warn:#95430a; --sqd-bad:#a3271b }
.sqd-m{ flex:1 1 0; min-width:0; display:block; padding:7px 9px 8px; border-right:1px solid var(--s2-hair-2) }
.sqd-meters .sqd-m:last-child{ border-right:0 }
.sqd-m > i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:7.5px;
  font-weight:800; letter-spacing:.16em; color:var(--s2-dim) }
.sqd-m > b{ float:right; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:800; line-height:1;
  color:var(--s2-ink); font-variant-numeric:tabular-nums }
.sqd-mt{ display:block; clear:both; margin-top:7px; height:3px; background:var(--s2-hair) }
.sqd-mf{ display:block; height:100%; background:var(--s2-dim) }
.sqd-m.is-good .sqd-mf{ background:var(--sqd-good) }
.sqd-m.is-warn .sqd-mf{ background:var(--sqd-warn) }
.sqd-m.is-bad  .sqd-mf{ background:var(--sqd-bad) }
.sqd-m.is-good > b{ color:var(--sqd-good) }
.sqd-m.is-warn > b{ color:var(--sqd-warn) }
.sqd-m.is-bad  > b{ color:var(--sqd-bad) }

.sqd-acts{ display:flex; gap:8px; align-items:stretch }
/* TRAIN UP is the panel's action, so it is a SLAB — alternated, never a tinted pill. LET GO stays
   quiet but explicit (UX_RULES §1: "quiet" ≠ invisible). CEO language law: the words never change. */
html body[data-view="office"] .sqd-train{
  flex:1 1 auto; min-width:0; min-height:44px; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:4px; padding:8px 13px; cursor:pointer;
  background:var(--rail-bg) !important; color:var(--rail-ink) !important;
  border:1px solid var(--rail-edge) !important; border-radius:2px !important;
  box-shadow:var(--rail-lift); font-family:'Inter',sans-serif; font-size:11.5px; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase; text-align:left }
html body[data-view="office"] .sqd-train em{ font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:.1em; color:var(--rail-ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
html body[data-view="office"] .sqd-train:hover{ background:var(--rail-on) !important;
  border-color:var(--rail-on) !important; color:var(--rail-on-ink) !important }
html body[data-view="office"] .sqd-train:hover em{ color:var(--rail-on-ink); opacity:.82 }
html body[data-view="office"] .sqd-letgo{
  flex:0 0 auto; min-height:44px; display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:3px; padding:8px 14px; cursor:pointer;
  background:transparent !important; color:var(--s2-ink) !important;
  border:1px solid var(--s2-hair) !important; border-radius:2px !important;
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
html body[data-view="office"] .sqd-letgo em{ font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:8px; font-weight:700; letter-spacing:.06em; color:var(--s2-dim); white-space:nowrap }
html body[data-view="office"] .sqd-letgo:hover{ color:var(--s2-bad) !important;
  border-color:var(--s2-bad) !important }
html body[data-view="office"] .sqd-letgo:hover em{ color:var(--s2-bad) }
html body[data-view="office"] .sqd-train:focus-visible,
html body[data-view="office"] .sqd-letgo:focus-visible{ outline:2px solid var(--p2,#f97316);
  outline-offset:2px }

/* designed empty state — an empty roster is a moment, not a grey sentence */
.sqd-empty{ max-width:54ch; padding:26px 26px 28px; background:var(--s2-panel-solid);
  border:1px solid var(--s2-hair); border-left:3px solid var(--p2,#f97316); border-radius:2px }
.sqd-empty-k{ display:block; font-family:var(--mono),ui-monospace,monospace; font-size:8.5px;
  font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--s2-dim) }
.sqd-empty-l{ margin:12px 0 0; font-family:'Inter',sans-serif; font-size:clamp(28px,4.4vw,40px);
  font-weight:900; font-style:italic; line-height:.94; letter-spacing:-.04em; text-transform:uppercase;
  color:var(--s2-ink) }
.sqd-empty-s{ margin:13px 0 0; font-family:'Inter',sans-serif; font-size:14px; line-height:1.55;
  color:var(--s2-dim) }
.sqd-empty-s b{ color:var(--s2-ink); font-weight:800 }

@media (max-width:900px){
  .sqd-reads{ flex-basis:100%; border-top:1px solid var(--rail-hair); flex-wrap:wrap }
  .sqd-rail-id{ flex-basis:100%; border-right:0 }
  .sqd-read{ flex:1 1 44%; border-bottom:1px solid var(--rail-hair) }
  /* the proportional widths are carried by an INLINE flex value (headcount), which beats a stylesheet
     basis — so the narrow breakpoint has to reclaim it explicitly to wrap 2×2 instead of crushing
     "CRAFT / DESIGN" to three letters at 390. */
  .sqd-depth .sqd-seg{ flex:1 1 44% !important; border-bottom:1px solid var(--s2-hair) }
}
@media (max-width:560px){
  .sqd-read{ flex-basis:50%; padding:12px 10px }
  .sqd-read > b{ font-size:22px }
  .sqd-acts{ flex-wrap:wrap }
  html body[data-view="office"] .sqd-letgo{ flex:1 1 100% }
}

/* ─────────────────────────── B · THE BRIEF DOSSIER ─────────────────────────── */
/* ink is PINNED per theme (the war room's --rust-ink is not trustworthy across every pack — that is
   the exact defect §6 of pn-journey had to repair). Accent + paper still read theme tokens, so a
   theme/pack switch still repaints the sheet (THEME LAW §5). */
html body[data-view="pitch"] .wr-doss{
  --dss-ink:#f2f6fc; --dss-ink-70:rgba(242,246,252,.78); --dss-ink-55:rgba(242,246,252,.62);
  --dss-line:rgba(242,246,252,.18); --dss-edge:rgba(242,246,252,.4);
  --dss-paper:linear-gradient(178deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  --dss-well:rgba(255,255,255,.05); --dss-cast:rgba(0,0,0,.55);
  --dss-good:#3ddc84; --dss-warn:#ffb638; --dss-bad:#ff8a72;
  /* the stamp CANNOT read var(--rust): on a light pack that token stays a dark-theme orange and the
     stamp measured 1.70:1 on cream (this pass's own sweep). Pinned + measured, both directions. */
  --dss-stamp:#ff8a4f;                                            /* 8.5:1 on the dark sheet */
  --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
  --rail-ink-dim:rgba(11,28,48,.78); --rail-hair:rgba(11,28,48,.22); --rail-edge:rgba(6,11,20,.7);
  --rail-on:#b4380d;
}
html body.mvc-light[data-view="pitch"] .wr-doss{
  --dss-ink:#1c1611; --dss-ink-70:rgba(28,22,17,.8); --dss-ink-55:rgba(28,22,17,.66);
  --dss-line:rgba(28,22,17,.18); --dss-edge:rgba(28,22,17,.44);
  --dss-paper:linear-gradient(178deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  --dss-well:rgba(28,22,17,.05); --dss-cast:rgba(60,42,20,.3);
  --dss-good:#12703d; --dss-warn:#8a5008; --dss-bad:#a3271b;
  --dss-stamp:#9d3b09;                                            /* 5.5:1 on the cream sheet */
  --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
  --rail-ink-dim:rgba(233,240,251,.72); --rail-hair:rgba(233,240,251,.18); --rail-edge:rgba(0,0,0,.5);
  --rail-on:#f97316;
}
/* THE SHEET — its own edges, a page stacked behind it, laid a third of a degree off-square. */
.wr-doss{ position:relative; margin:22px 24px 30px 40px; max-width:47em;
  background:var(--dss-paper); border:1px solid var(--dss-edge); border-radius:0;
  transform:rotate(-.32deg); transform-origin:0 0;
  box-shadow:9px 9px 0 -1px var(--dss-well), 9px 9px 0 0 var(--dss-line),
             0 30px 56px -30px var(--dss-cast) }
/* client work keeps its ochre job-sheet ruling — the mode is still declared by the material. The
   ruling runs at a THIRD of the page's alpha: on a document this size the full-strength stripe read
   as banding across the ask (caught in the 390 render), not as paper. */
html body[data-view="pitch"] .wr-doss{ --dss-rule:rgba(214,158,78,.085) }
html body.mvc-light[data-view="pitch"] .wr-doss{ --dss-rule:rgba(150,104,42,.13) }
.is-clientwork .wr-doss{ background-image:
  repeating-linear-gradient(180deg,transparent 0 27px,var(--dss-rule) 27px 28px),
  linear-gradient(178deg,var(--wr-paper),transparent 76%), var(--dss-paper) }
.wr-doss-band{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 15px;
  background:var(--rail-bg); border-bottom:1px solid var(--rail-edge) }
.wr-doss-band > i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:8.5px;
  font-weight:800; letter-spacing:.22em; text-transform:uppercase }
.wr-doss-band-k{ color:var(--rail-ink); padding-right:12px; border-right:1px solid var(--rail-hair) }
.wr-doss-band-ref{ color:var(--rail-ink-dim) }
.wr-doss-band-cls{ margin-left:auto; color:var(--rail-on) }
.wr-doss-body{ padding:20px 28px 24px }
/* the section mark is a STAMP, not a tab — it belongs to the document, not to the page */
.wr-doss-stamp{ display:inline-block; transform:rotate(-1.1deg);
  font-family:var(--mono),ui-monospace,monospace; font-size:9.5px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dss-stamp); border:1.5px solid currentColor; padding:5px 11px }
.wr-doss-line{ margin:17px 0 0; max-width:19ch; font-family:'Inter',sans-serif; font-weight:900;
  font-style:italic; text-transform:uppercase; font-size:clamp(25px,3.5vw,41px); line-height:1.01;
  letter-spacing:-.042em; color:var(--dss-ink); text-wrap:balance }
.wr-doss-sub{ margin:13px 0 0; max-width:50ch; font-family:'Inter',sans-serif; font-size:13px;
  line-height:1.55; color:var(--dss-ink-70) }
.wr-doss-rule{ display:flex; align-items:center; gap:12px; margin:24px 0 0 }
.wr-doss-rule > i{ flex:none; font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:8.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--dss-ink-55) }
.wr-doss-rule::after{ content:""; flex:1 1 auto; height:1px; background:var(--dss-line) }
.wr-doss-bg{ margin:11px 0 0; max-width:60ch; font-family:'Inter',sans-serif; font-size:14.5px;
  line-height:1.62; color:var(--dss-ink-70) }
/* THE WORD (CEO-14/33) — the pre-pitch intel on which pillar the room is going to fixate on.
   Set as a marked-up note on the document, not a UI chip: it is something somebody scribbled in
   the margin of the brief, and it is right about 70% of the time. Kept above the 11px phone
   floor and inside the document's own ink ramp so it reads in every theme. */
.wr-doss-word{ display:block; margin:20px 0 0; max-width:56ch; padding:11px 14px;
  border-left:3px solid var(--dss-stamp); background:var(--dss-well);
  font-family:'Inter',sans-serif; font-size:13px; line-height:1.55; color:var(--dss-ink-70) }
.wr-doss-word > i{ display:block; margin:0 0 4px; font-style:normal;
  font-family:var(--mono),ui-monospace,monospace; font-size:11px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dss-ink-55) }
.wr-doss-word b{ color:var(--dss-ink); font-weight:800 }
/* THE TERMS — what a brief must state, ruled into the foot of the document it belongs to */
.wr-doss-terms{ display:flex; flex-wrap:wrap; border-top:1px solid var(--dss-edge);
  background:var(--dss-well) }
.wr-doss-term{ flex:1 1 30%; min-width:0; display:block; padding:13px 17px 14px;
  border-right:1px solid var(--dss-line) }
.wr-doss-terms .wr-doss-term:last-child{ border-right:0 }
.wr-doss-term > i{ display:block; margin-bottom:7px; font-style:normal;
  font-family:var(--mono),ui-monospace,monospace; font-size:8px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dss-ink-55) }
.wr-doss-term > b{ display:block; font-family:'Inter',sans-serif; font-size:21px; font-weight:900;
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--dss-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.wr-doss-term > em{ display:block; margin-top:6px; font-style:normal; font-family:'Inter',sans-serif;
  font-size:11px; line-height:1.35; color:var(--dss-ink-55) }
.wr-doss-term.is-good > b{ color:var(--dss-good) }
.wr-doss-term.is-warn > b{ color:var(--dss-warn) }
.wr-doss-term.is-bad  > b{ color:var(--dss-bad) }
@media (max-width:1079px){ .wr-doss{ margin-right:24px } }
@media (max-width:760px){
  .wr-doss{ margin:18px 16px 24px 20px; max-width:none; transform:none;
    box-shadow:7px 7px 0 -1px var(--dss-well), 7px 7px 0 0 var(--dss-line) }
  .wr-doss-body{ padding:18px 18px 20px }
  .wr-doss-term{ flex:1 1 100%; border-right:0; border-bottom:1px solid var(--dss-line) }
  .wr-doss-terms .wr-doss-term:last-child{ border-bottom:0 }
  .wr-doss-band-cls{ margin-left:0; flex-basis:100% }
}
@media (prefers-reduced-motion: reduce){
  .wr-doss, .wr-doss-stamp{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRACEY · 2026-08-01 · CEO-26 / 28 / 31 / 54 / 55 / 57 + UX_RULES §15
   ONE terminal block, five objects, and every one of them REPLACES something rather than joining it.
     C · THE STAMP        .pn-stamp        — one pressed-ink treatment, reused (dossier + review)
     D · THE ORDER        #pn-nextmove     — one line, one place: what to do next, on every screen
     E · THE WIRE         .toast.pn-wire   — the notice as an agency artefact (kills the AI toast)
     F · THE RESPONSE     .wr-resp         — the working board (kills 4 loose floating parts)
     G · THE REVEAL       .pnr-cta         — the CTA lands in the volume the lid vacated
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── C · THE STAMP (CEO-57) ───────────────────────────
   CEO: "these stamps look awful- add some detail to them and make them look like rubber stamds".
   They were a 1px rectangle rotated a few degrees — a bordered div, not an impression. A real
   stamp has: a double rule (outer heavy, inner light), a field line under the word, a rocked
   GHOST from the hand not landing flat, and ink that SKIPS. Defined ONCE here and referenced by
   every stamp in the product — the dossier's section mark and the routing sheet's sign-offs — so
   there is exactly one stamp species (§15: no proliferation).
   Legibility rule: the ink may break up, the WORD may not. The mask never drops below .62 alpha,
   which keeps every measured pair above AA in both themes. Colour is inherited from whatever
   semantic token the host already uses (--dss-stamp / --rv-ok / --rv-amend / --rv-bad) — no new hue.
   Performance: ONE 96px SVG turbulence tile, declared on :root, referenced by every instance. */
:root{
  --pn-stamp-ink:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 .66 1 1 1 1 .78 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23p)'/%3E%3C/svg%3E");
}
.pn-stamp{ position:relative; display:inline-flex; flex-direction:column; align-items:center;
  padding:7px 13px 6px; border:2px solid currentColor; background:transparent;
  font-family:var(--mono),ui-monospace,monospace; text-transform:uppercase; color:inherit;
  /* the rocked double-strike: the second impression, half a degree off, at a fifth of the ink */
  text-shadow:1.1px .8px 0 color-mix(in srgb,currentColor 26%,transparent);
  -webkit-mask-image:var(--pn-stamp-ink); mask-image:var(--pn-stamp-ink);
  -webkit-mask-size:96px 96px; mask-size:96px 96px; -webkit-mask-repeat:repeat; mask-repeat:repeat; }
.pn-stamp::before{ content:""; position:absolute; inset:3px; border:1px solid currentColor; opacity:.5 }
.pn-stamp > b{ font-weight:800; letter-spacing:.24em; font-size:9.5px; line-height:1.1 }
/* the field line — a stamp carries a job/serial, never just a word */
.pn-stamp[data-stamp-sub]::after{ content:attr(data-stamp-sub); display:block; margin-top:5px;
  padding-top:4px; border-top:1px solid currentColor; font-size:7.5px; font-weight:700;
  letter-spacing:.2em; opacity:.82; white-space:nowrap }
.wr-doss-stamp.pn-stamp{ transform:rotate(-1.6deg); color:var(--dss-stamp) }
/* the routing sheet's sign-offs join the SAME object — they keep their semantic colour, their
   grid placement and their landing animation; only the impression itself is rebuilt. */
html .pn-review .rv-stamp{ padding:7px 11px 6px; border:2px solid currentColor;
  text-shadow:1.1px .8px 0 color-mix(in srgb,currentColor 26%,transparent);
  -webkit-mask-image:var(--pn-stamp-ink); mask-image:var(--pn-stamp-ink);
  -webkit-mask-size:96px 96px; mask-size:96px 96px; }
html .pn-review .rv-stamp::before{ content:""; position:absolute; inset:3px;
  border:1px solid currentColor; opacity:.5 }
html .pn-review .rv-stamp{ position:relative }
html .pn-review .rv-stamp em{ position:relative; padding-top:4px; margin-top:4px;
  border-top:1px solid currentColor; opacity:.82 }
html .pn-review .rv-stamp--none{ border:0; -webkit-mask-image:none; mask-image:none; text-shadow:none }
html .pn-review .rv-stamp--none::before{ display:none }
@media (prefers-reduced-motion:reduce){ .pn-stamp{ transform:none } }

/* the rail's active segment IS the signpost on a job surface (CEO-54 / L). It is the one place on
   the page allowed to tell the player what to do, so it carries real weight — an instruction, not
   a caption. Sentence case against the segment's uppercase numerals, so it reads as speech. */
#pn-stagerail .pn-stgseg.is-on em.is-act{
  font-family:'Inter',sans-serif; font-weight:800; font-style:italic; font-size:12.5px;
  letter-spacing:-.005em; text-transform:none; opacity:1;
  padding-left:.7em; margin-left:.2em; border-left:1px solid currentColor;
}
#pn-stagerail .pn-stgseg.is-on em.is-act::before{ content:"\27A4\00a0"; font-style:normal; font-size:.8em; opacity:.75 }
@media (max-width:620px){ #pn-stagerail .pn-stgseg.is-on em.is-act{ font-size:11.5px } }

/* ─────────────────────────── D · THE ORDER (CEO-54) ───────────────────────────
   ONE line, ONE place, every screen — the single next action, derived in pnNextMove(). It is a
   RAIL (SST §5f alternation object): dark slab on a light page, machined pale slate on a dark one.
   It reads as an order, not a tip: an accent tab with inverted ink, the imperative in the house
   display voice, the unblock clause in quiet mono. Docked under the topbar (and under the stage
   rail when the rail is up) so it can never be scrolled past or collide with chrome. */
#pn-nextmove{
  --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
  --rail-dim:rgba(233,240,251,.74); --rail-hair:rgba(233,240,251,.2);
  --rail-on:#f97316; --rail-on-ink:#07080c;
  position:sticky; top:0; z-index:18; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px clamp(10px,2.4vw,22px); min-height:40px; max-width:100%;
  background:var(--rail-bg); color:var(--rail-ink);
  border-bottom:1px solid rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(233,240,251,.08) inset, 0 12px 24px -20px rgba(6,11,20,.9);
}
html body:not(.mvc-light) #pn-nextmove{                       /* dark page → PALE MACHINED SLATE */
  --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7 62%,#cbd5e2); --rail-ink:#0b1c30;
  --rail-dim:rgba(11,28,48,.8); --rail-hair:rgba(11,28,48,.24);
  --rail-on:#b4380d; --rail-on-ink:#ffffff;
  border-bottom:1px solid rgba(6,11,20,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -20px rgba(0,0,0,.65);
}
#pn-nextmove[hidden]{ display:none }
html body.pn-call-live #pn-nextmove, html body.pn-review-live #pn-nextmove{ display:none !important }
#pn-nextmove .nm-k{ flex:none; align-self:stretch; display:inline-flex; align-items:center;
  padding:0 9px; background:var(--rail-on); color:var(--rail-on-ink);
  font-family:var(--mono),ui-monospace,monospace; font-size:8.5px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase; }
#pn-nextmove .nm-do{ flex:none; font-family:'Inter',sans-serif; font-weight:900; font-style:italic;
  font-size:clamp(13px,1.5vw,16px); line-height:1.05; letter-spacing:-.02em; color:var(--rail-ink); }
#pn-nextmove .nm-why{ flex:1 1 12ch; min-width:0; font-family:'Inter',sans-serif; font-size:12px;
  line-height:1.3; color:var(--rail-dim); }
#pn-nextmove .nm-go{ flex:none; margin-left:auto; padding:6px 12px; border:1px solid var(--rail-hair);
  background:transparent; color:var(--rail-ink); cursor:pointer; border-radius:0;
  font-family:var(--mono),ui-monospace,monospace; font-size:9px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; }
#pn-nextmove .nm-go:hover{ background:var(--rail-on); border-color:var(--rail-on); color:var(--rail-on-ink) }
#pn-nextmove .nm-go:focus-visible{ outline:2px solid var(--rail-on); outline-offset:2px }
@media (max-width:620px){
  #pn-nextmove{ gap:8px; padding:7px 10px }
  #pn-nextmove .nm-why{ flex-basis:100%; font-size:11px; order:9 }
  #pn-nextmove .nm-go{ margin-left:auto }
}

/* ─────────────────────────── E · THE WIRE (CEO-26) ───────────────────────────
   The notice is a slip off the office telex: a printed head band (the alternation rail again, so
   every piece of chrome in the product is the same object), the message typed on bond beneath it,
   and a PUNCHED bottom edge where it was torn off the roll. Square, ruled, filed. */
html body .toast.pn-wire{
  --wire-paper:#fbf7ef; --wire-ink:#191410; --wire-dim:rgba(25,20,16,.68);
  --wire-edge:rgba(25,20,16,.44); --wire-rule:rgba(25,20,16,.16); --wire-on:#9d3b09;
  --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
  --rail-dim:rgba(233,240,251,.74); --rail-hair:rgba(233,240,251,.2); --rail-on:#ff8a4f;
  position:fixed; left:50%; top:calc(var(--pn-chrome-h,84px) + 16px); bottom:auto; transform:translateX(-50%);
  width:min(560px,92vw); max-width:none; padding:0; z-index:10002;
  background:var(--wire-paper); color:var(--wire-ink);
  border:0; border-radius:0; clip-path:none;
  box-shadow:0 0 0 1px var(--wire-edge), 0 30px 64px -22px rgba(12,8,4,.62);
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:400; line-height:1.55;
  -webkit-mask-image:radial-gradient(circle 4.2px at 6px 100%,transparent 97%,#000 100%);
  mask-image:radial-gradient(circle 4.2px at 6px 100%,transparent 97%,#000 100%);
  -webkit-mask-size:12px 100%; mask-size:12px 100%;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  animation:pnWire .24s cubic-bezier(.2,.85,.3,1) both;
}
html body:not(.mvc-light) .toast.pn-wire{                     /* dark page → dark bond, pale band */
  --wire-paper:#12141a; --wire-ink:#f2f6fc; --wire-dim:rgba(242,246,252,.72);
  --wire-edge:rgba(242,246,252,.34); --wire-rule:rgba(242,246,252,.16); --wire-on:#ff8a4f;
  --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
  --rail-dim:rgba(11,28,48,.78); --rail-hair:rgba(11,28,48,.22); --rail-on:#b4380d;
  box-shadow:0 0 0 1px var(--wire-edge), 0 30px 64px -22px rgba(0,0,0,.8);
}
@keyframes pnWire{ from{ opacity:0; transform:translateX(-50%) translateY(-10px) } to{ opacity:1; transform:translateX(-50%) } }
html body .toast.pn-wire .wire-band{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:8px 14px; background:var(--rail-bg); border-bottom:1px solid rgba(0,0,0,.45) }
html body .toast.pn-wire .wire-band > i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:8.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase }
html body .toast.pn-wire .wire-band-k{ color:var(--rail-ink); padding-right:11px;
  border-right:1px solid var(--rail-hair) }
html body .toast.pn-wire .wire-band-ref{ color:var(--rail-dim); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:22ch }
html body .toast.pn-wire .wire-band-cls{ margin-left:auto; color:var(--rail-on) }
/* the foot padding clears the perforation — the tear must never bite the last line of type */
html body .toast.pn-wire .wire-body{ position:relative; padding:15px 20px 28px }
/* THE PHYSICAL TELLS — it arrived on the desk, it was not faded in.
   (1) THE FOLD: the slip was folded once in the tube; the crease catches light above and shadow
       below, so the paper has a plane. (2) THE TORN FOOT: the perforation mask on the host element.
   (3) THE STAMP: pressed in the top-right corner, where a stamp goes on a real slip, rocked off
       true and skipping ink — the CEO-57 object, not a bespoke one. */
html body .toast.pn-wire .wire-body::before{ content:""; position:absolute; left:0; right:0; top:38%;
  height:3px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(0,0,0,.07) 55%,transparent) }
html body:not(.mvc-light) .toast.pn-wire .wire-body::before{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.4) 55%,transparent) }
html body .toast.pn-wire .wire-stamp{ float:right; margin:0 0 8px 14px; transform:rotate(3.2deg);
  color:var(--wire-on) }
html body .toast.pn-wire .evt-choices{ clear:both }
/* every ink colour on the slip is DECLARED — the global .toast/.muted/.feedback rules were authored
   for a permanently dark panel and would print light-on-bone here (UX_RULES §1). */
html body[data-view] .toast.pn-wire,
html body[data-view] .toast.pn-wire p,
html body[data-view] .toast.pn-wire .feedback,
html body[data-view] .toast.pn-wire .wire-copy{ color:var(--wire-ink) !important }
html body[data-view] .toast.pn-wire .muted,
html body[data-view] .toast.pn-wire .small,
html body[data-view] .toast.pn-wire .wire-src{ color:var(--wire-dim) !important }
html body[data-view] .toast.pn-wire b,
html body[data-view] .toast.pn-wire .wire-hd{ color:var(--wire-ink) !important; font-weight:800 }
html body .toast.pn-wire .feedback{ border-left:2px solid var(--wire-on); padding-left:12px;
  font-style:italic }
/* the event card's contents — the signpost, the read, the priced choices */
html body .toast.pn-wire .wire-mark{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:11px }
html body .toast.pn-wire .wire-sign{ display:inline-flex; align-items:center; gap:.5em;
  padding:5px 10px; font-family:var(--mono),ui-monospace,monospace; font-size:9.5px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:#fff; background:#7f1d1d; border-radius:0 }
html body .toast.pn-wire .wire-sign.is-opp{ background:#14532d }
html body .toast.pn-wire .wire-sign.is-call{ background:#0b1c30 }
html body .toast.pn-wire .wire-type{ font-style:normal; font-family:var(--mono),ui-monospace,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--wire-dim) }
html body .toast.pn-wire .wire-hd{ margin:0; font-family:'Inter',sans-serif; font-weight:900;
  font-style:italic; text-transform:uppercase; font-size:clamp(19px,2.6vw,25px); line-height:1.02;
  letter-spacing:-.035em; text-wrap:balance }
html body .toast.pn-wire .wire-read{ margin:9px 0 0; padding-left:11px;
  border-left:2px solid var(--wire-on); font-family:var(--mono),ui-monospace,monospace;
  font-size:10px; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase }
html body .toast.pn-wire .wire-copy{ margin:13px 0 0; max-width:58ch }
html body .toast.pn-wire .wire-src{ margin:14px 0 0; padding-top:9px;
  border-top:1px solid var(--wire-rule); font-family:var(--mono),ui-monospace,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
html body .toast.pn-wire .evt-choices{ margin-top:16px; border-top:1px solid var(--wire-rule) }
html body .toast.pn-wire .evt-choice{ display:grid; grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center; gap:12px; width:100%; text-align:left; padding:12px 4px;
  background:transparent; color:var(--wire-ink); border:0;
  border-bottom:1px solid var(--wire-rule); border-radius:0; cursor:pointer;
  font-family:'Inter',sans-serif; transition:background .12s ease, padding-left .12s ease }
html body .toast.pn-wire .evt-choice:hover:not(:disabled),
html body .toast.pn-wire .evt-choice:focus-visible{ background:color-mix(in srgb,var(--wire-on) 12%,transparent);
  padding-left:10px; outline:none }
html body .toast.pn-wire .evt-choice:focus-visible{ box-shadow:inset 3px 0 0 var(--wire-on) }
html body .toast.pn-wire .evt-choice .evt-mk{ font-family:var(--mono),ui-monospace,monospace;
  font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--wire-on) }
html body .toast.pn-wire .evt-choice .evt-lbl{ font-size:14.5px; font-weight:700; line-height:1.35;
  color:var(--wire-ink) }
html body .toast.pn-wire .evt-choice .evt-cost{ font-family:var(--mono),ui-monospace,monospace;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--wire-dim);
  white-space:nowrap }
html body .toast.pn-wire .evt-choice.is-short{ opacity:.5; cursor:default }
html body .toast.pn-wire .evt-choice.is-short .evt-cost{ color:#c0392b; text-decoration:line-through }
html body:not(.mvc-light) .toast.pn-wire .evt-choice.is-short .evt-cost{ color:#ff8a72 }
@media (max-width:620px){
  html body .toast.pn-wire{ top:auto; bottom:86px; width:min(94vw,520px) }
  html body .toast.pn-wire .wire-body{ padding:13px 15px 26px }
}
@media (prefers-reduced-motion:reduce){ html body .toast.pn-wire{ animation:none } }

/* ─────────────────────────── F · THE RESPONSE (CEO-55 + §15) ───────────────────────────
   "this whole response module is lost on the background… not good enough" — it had no edges, no
   band, no state, and four labels saying the same thing. It is now a WORKING BOARD: bolted, flush,
   square, with a chrome band and a live DRAFT/LOCKED read. The dossier is paper laid ON the page;
   this is a board cut INTO it — same world, opposite material, so their-ask / your-answer read as
   two halves of one job and neither is mistakable for the other. */
html body[data-view="pitch"] .wr-resp{
  --rsp-face:linear-gradient(178deg,rgba(12,18,28,.6),rgba(8,12,20,.72));
  --rsp-edge:rgba(242,246,252,.34); --rsp-hair:rgba(242,246,252,.14);
  --rsp-well:rgba(4,7,12,.5); --rsp-ink:#f2f6fc; --rsp-dim:rgba(242,246,252,.66);
  --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
  --rail-dim:rgba(11,28,48,.78); --rail-hair:rgba(11,28,48,.22); --rail-on:#b4380d;
}
html body.mvc-light[data-view="pitch"] .wr-resp{
  --rsp-face:linear-gradient(178deg,#efe7d9,#e6dccb);
  --rsp-edge:rgba(28,22,17,.5); --rsp-hair:rgba(28,22,17,.16);
  --rsp-well:#fffdf8; --rsp-ink:#1c1611; --rsp-dim:rgba(28,22,17,.68);
  --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
  --rail-dim:rgba(233,240,251,.74); --rail-hair:rgba(233,240,251,.2); --rail-on:#f97316;
}
.wr-resp{ position:relative; z-index:1; margin:6px 24px 26px; background:var(--rsp-face);
  border:1px solid var(--rsp-edge); border-left:4px solid var(--rail-on); border-radius:0;
  box-shadow:0 24px 44px -30px rgba(0,0,0,.7) }
.wr-resp-band{ display:flex; align-items:center; gap:11px; padding:9px 15px;
  background:var(--rail-bg); border-bottom:1px solid rgba(0,0,0,.45) }
.wr-resp-band > i{ font-style:normal; font-family:var(--mono),ui-monospace,monospace; font-size:8.5px;
  font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--rail-ink) }
.wr-resp-band-st{ margin-left:auto; color:var(--rail-on) !important }
.wr-resp-band .help-chip{ flex:none; border-color:var(--rail-hair); color:var(--rail-ink) }
html body[data-view="pitch"] .wr-resp .wr-work{ margin:0; padding:18px 20px 20px; border-top:0; gap:20px }
/* the two fields are WELLS cut into the board — not tonal panels floating on it */
html body[data-view="pitch"] .wr-resp .wr-angle,
html body[data-view="pitch"] .wr-resp .poap{ margin:0; background:transparent !important;
  border:0 !important; border-top:1px solid var(--rsp-hair) !important; border-radius:0 !important;
  padding:16px 0 0 !important; clip-path:none !important; box-shadow:none !important }
html body[data-view="pitch"] .wr-resp .wr-work > :first-child{ border-top:0 !important; padding-top:0 !important }
html body[data-view="pitch"] .wr-resp .wr-angle-k,
html body[data-view="pitch"] .wr-resp .poap-eyebrow{ font-family:var(--mono),ui-monospace,monospace;
  font-size:9px !important; font-weight:800 !important; letter-spacing:.24em !important;
  text-transform:uppercase; color:var(--rsp-dim) !important }
html body[data-view="pitch"] .wr-resp textarea{ background:var(--rsp-well) !important;
  border:1px solid var(--rsp-edge) !important; border-radius:0 !important; color:var(--rsp-ink) !important;
  box-shadow:inset 0 2px 7px -4px rgba(0,0,0,.7) !important;
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; padding:12px 14px !important }
html body[data-view="pitch"] .wr-resp textarea:focus{ border-color:var(--rail-on) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rail-on) 26%,transparent) !important; outline:none }
html body[data-view="pitch"] .wr-resp .wr-angle-locked{ color:var(--rsp-ink) !important }
@media (max-width:1079px){ .wr-resp{ margin-right:24px } }
@media (max-width:760px){ .wr-resp{ margin:6px 16px 22px }
  html body[data-view="pitch"] .wr-resp .wr-work{ padding:15px 15px 18px } }

/* ─────────────────────────── G · THE REVEAL (CEO-28) ───────────────────────────
   The lid closing IS the reveal. The CTA is anchored to the lid/base seam and grows UPWARD, so it
   fills exactly the volume of air the screen vacated — above the closed machine, never stacked
   beneath it with a dead void overhead. Absolute from the first frame (not just at is-cta), so the
   laptop never re-centres mid-sequence: there is no reflow, only the fade-in the beat already had. */
.pn-ready .pnr-cta{ position:absolute; left:50%; bottom:46px; transform:translateX(-50%);
  width:min(560px,92vw); z-index:5; display:flex; flex-direction:column; align-items:center;
  gap:16px; pointer-events:none }
.pn-ready .pnr-cta > *{ pointer-events:auto }
/* THE SETTLE. The lid's LAYOUT box never shrinks (it only transforms), so once the machine is shut
   the centred composition left a third of the frame dead beneath it — the void the whole set-piece
   was art-directed to avoid. The group rides DOWN on the same curve as the fold, so the machine
   comes to rest on the lower third and the decision takes the middle of the frame. Transform-only. */
.pn-ready .pn-ready-inner{ transition:transform .72s cubic-bezier(.55,0,.2,1) }
.pn-ready.is-closed .pn-ready-inner{ transform:translateY(14vh) }
@media (max-width:760px){
  .pn-ready .pnr-cta{ bottom:30px; gap:12px }
  .pn-ready.is-closed .pn-ready-inner{ transform:translateY(16vh) }
}
@media (prefers-reduced-motion:reduce){
  /* the lid never closes here, so nothing is vacated — the block returns to normal flow beneath it */
  .pn-ready .pnr-cta{ position:static; transform:none; width:auto; margin-top:20px }
  .pn-ready .pn-ready-inner,.pn-ready.is-closed .pn-ready-inner{ transition:none; transform:none }
}

  /* ── PHONE TYPE FLOOR (CEO-92) ────────────────────────────────────────────────────────────────
     Swept at 390 and 430 in a touch context. Nothing overflowed and every control was reachable
     (the topbar collapse correctly moves Store/League/CFO/COO/Wire into the "…" overflow) — but 63
     text nodes rendered under 10px, which on a real phone is decoration, not information. These are
     the actual offenders found at runtime, not a guess: squad tokens and tags at 9.5px, the deck
     eyebrow at 10px, nav marks at 9px. Floor is 11px, which is the smallest the mono face stays
     legible at arm's length. Desktop is untouched — this only applies at phone width. */
  @media(max-width:480px){
    .stat .stat-unit{ font-size:11px !important; }
    .sq-pay{ font-size:11.5px !important; }
    .nm-go{ font-size:11px !important; }
    .mt-deck-eyebrow, .mt-deck-n{ font-size:11px !important; }
    .sq-face-n{ font-size:11px !important; }
    .sq-face-ovr{ font-size:11px !important; }
    /* letter-spacing that reads at 9px crowds at 11px — give the uppercase mono labels room back */
    .mt-deck-eyebrow{ letter-spacing:.06em; }
  }

  
  /* A banana skin is a note in the margin of the brief, not an alert — the player has to notice it.
     At OVERSEE it is flagged outright, because at that depth nothing gets past you. */
  .wr-skin{display:block;margin:14px 0 0;padding:12px 14px;border-left:3px solid #d9a441;
    background:rgba(217,164,65,.07)}
  .wr-skin.is-sure{border-left-color:#d0432c;background:rgba(208,67,44,.08)}
  .wr-skin-k{display:block;font:800 10px/1 var(--mono,monospace);letter-spacing:.16em;
    text-transform:uppercase;color:#b9832b;margin-bottom:6px}
  .wr-skin.is-sure .wr-skin-k{color:#c03d28}
  .wr-skin-t{margin:0 0 10px;font-size:14.5px;line-height:1.5}
  .wr-skin-go{font:800 11px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;
    padding:9px 13px;min-height:38px;cursor:pointer;border:1px solid currentColor;color:#8a5f16;
    background:transparent}
  .wr-skin.is-sure .wr-skin-go{color:#9c2f1d}
  .wr-skin-go:hover{background:rgba(0,0,0,.06)}
  @media(max-width:480px){ .wr-skin-go{width:100%;min-height:44px} }

  
  /* THE DESK — finished work waiting on sign-off. Quality band is the first thing you read, because
     it is the only input to the only decision: how much of my week does this deserve? */
  .desk{margin:18px 0;border:1px solid var(--pn-hair,rgba(127,127,127,.28))}
  .desk-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px;
    border-bottom:1px solid var(--pn-hair,rgba(127,127,127,.28))}
  .desk-hd b{font:900 11.5px/1 var(--mono,monospace);letter-spacing:.18em}
  .desk-hd i{font:700 11px/1 var(--mono,monospace);letter-spacing:.08em;opacity:.7;font-style:normal}
  .desk-row{padding:12px 14px;border-bottom:1px solid var(--pn-hair,rgba(127,127,127,.18));
    border-left:3px solid var(--pn-muted,#7C8CA0)}
  .desk-row.is-strong{border-left-color:#2e9e5b}
  .desk-row.is-fair{border-left-color:#e0a23c}
  .desk-row.is-weak{border-left-color:#d0432c}
  .desk-row:last-child{border-bottom:0}
  .desk-row-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .desk-cl{font-size:15px;font-weight:800}
  .desk-team{font:700 11px/1 var(--mono,monospace);letter-spacing:.09em;opacity:.65;font-style:normal}
  .desk-q{margin-left:auto;font:900 19px/1 var(--mono,monospace);font-variant-numeric:tabular-nums}
  .desk-q i{font:700 9.5px/1 var(--mono,monospace);letter-spacing:.1em;opacity:.6;font-style:normal;margin-left:3px}
  .desk-read{margin:6px 0 10px;font-size:13.5px;opacity:.8}
  .desk-acts{display:flex;gap:7px;flex-wrap:wrap}
  .desk-act{font:800 11px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;
    padding:10px 12px;min-height:40px;cursor:pointer;border:1px solid currentColor;background:transparent}
  .desk-act.is-short{opacity:.4;cursor:not-allowed}
  @media(max-width:480px){
    .desk-q{font-size:17px}
    .desk-acts{display:grid;grid-template-columns:1fr}
    .desk-act{width:100%;min-height:44px;font-size:11.5px}
  }

  
  /* THE TRY-ON BAR (CEO-71) — pinned to the bottom, out of the way of everything it is showing you.
     It does not expire, because a preview you cannot get back to or out of is worse than none. */
  /* STORE QA 2026-08-11 (SEV-1): z-index 120 put this bar UNDER the PN/OS dock (z 300, flush to the
     same bottom edge) — hit-testing proved all three buttons resolved to dock children, so Buy and
     Take-it-off were untappable by a real pointer on every surface. The bar now outranks the dock
     AND, when the dock is up, seats itself on the dock's top edge (76px bar) so both stay usable. */
  #pn-trybar{position:fixed;left:0;right:0;bottom:0;z-index:340;display:flex;align-items:center;
    gap:12px;flex-wrap:wrap;padding:10px 14px;background:rgba(10,16,26,.96);color:#eef4ff;
    border-top:2px solid var(--accent,#f97316);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  #pn-trybar[hidden]{display:none}
  body.pnos-dock-on #pn-trybar{bottom:76px}
  #pn-trybar .tb-l{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
  #pn-trybar .tb-l b{font:900 10px/1 var(--mono,monospace);letter-spacing:.16em;color:var(--accent,#f97316)}
  #pn-trybar .tb-l i{font-style:normal;font-weight:800;font-size:14px}
  #pn-trybar .tb-surf{font:700 11px/1.3 var(--mono,monospace);opacity:.62;flex-basis:100%}
  #pn-trybar .tb-r{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
  #pn-trybar button{font:800 11px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;
    padding:11px 13px;min-height:42px;cursor:pointer;border:1px solid currentColor;background:transparent;
    color:#eef4ff}
  #pn-trybar .tb-go{background:var(--accent,#f97316);border-color:var(--accent,#f97316);color:#160a02;font-weight:900}
  #pn-trybar .tb-off{opacity:.75}
  @media(max-width:480px){
    #pn-trybar{gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
    #pn-trybar .tb-r{width:100%;margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
    #pn-trybar .tb-go{grid-column:1/-1;min-height:46px}
    #pn-trybar button{min-height:44px;font-size:11px}
  }