/* Venture Client Decision Lab — participant UI
   Skinned with the 27pilots corporate identity (see "27pilots CI/" tokens):
   Aptos / Aptos Display self-hosted, black · white · Deloitte Green + cool
   grays, real SVG logos, no external web fonts. Fonts + logos are copied into
   app/brand/ so the prototype stays self-contained.

   Design language — REVAMPED 12 Aug 2026 (Matheus: "keep 27pilots CI, cleaner
   and more modern"): the skin now follows the CI's own effects spec ("the brand
   skews sharp-cornered; the only rounded forms are pill CTAs and perfect
   circles") instead of the soft-rounded first pass. Neutral cool-gray canvas
   (the green-tinted wash is gone), pure white cards on ONE sparing neutral
   shadow, hairline borders, sharp corners everywhere except pill-shaped
   buttons and circular portraits. Flat fills replace every decorative
   gradient. Aptos carries ALL text including the micro-labels (the mono
   "instrument voice" read as wireframe annotation and is retired — --mono now
   resolves to Aptos and keeps its name only so 90 label rules didn't churn).
   Deloitte green stays the accent spine: eyebrows, chosen states, meters,
   primary CTA. The validated colour ramps (--tl-*, valence pair) are untouched. */
@font-face{font-family:"Aptos";src:url("brand/fonts/Aptos.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aptos";src:url("brand/fonts/Aptos-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aptos Display";src:url("brand/fonts/Aptos-Display.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aptos Display";src:url("brand/fonts/Aptos-Display-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap}
:root{
  /* 27pilots tokens — neutral cool grays from the CI palette (cool-gray 2/4/10/11),
     black ink, white cards, greens as accents. No green tint in the neutrals. */
  --bg:#F5F5F4; --bg-2:#F0F0EF; --card:#ffffff;
  --panel:#FAFAF9; --panel-2:#F3F3F2;      /* neutral zones inside cards (heads/foots) */
  --ink:#000000; --dim:#53565A; --faint:#73767A;
  --line:#E4E4E3; --line-soft:#EEEEED; --strong:#C9CAC9;
  --accent:#26890D; --accent-bg:#F1F6E4; --accent-ink:#046A38; --accent-line:#C4DE9C;
  --brand-green:#86BC25; --brand-green-dark:#43B02A;
  --dark:#000000;
  --p1:#26890D; --p1b:#F1F6E4; --p1l:#86BC25;
  --p3:#046A38; --p3b:#F1F6E4;
  --bad:#DA291C;
  /* engagement-timeline status ramp (2 Aug 2026) — three states that must stay
     tellable apart, including for red-green colourblind readers. Chosen with
     the palette validator, not by eye: the previous green/dark-amber/red read
     ΔE 1.7 between green and red under deuteranopia (indistinguishable) and
     12.3 between amber and red under normal vision (below the 15 floor — what
     Matheus noticed). This ramp measures ΔE 9.1 worst-pair under deuteranopia
     and 30.0 under normal vision. The amber sits below 3:1 against the field,
     which the always-present segment labels and legend relieve; it therefore
     carries DARK text while the other two carry white. */
  --tl-ok:#26890D; --tl-ok-2:#2E9E1C;
  --tl-warn:#EDAE1B; --tl-warn-2:#F4C043;
  --tl-bad:#A01021; --tl-bad-2:#B4152A;
  /* depth — neutral, sparing (CI effects.css: --shadow-card is the only
     light-bg shadow the brand uses; everything here stays in that family) */
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 4px 16px rgba(0,0,0,.07);
  --sh-lg:0 12px 36px rgba(0,0,0,.11);
  --sh-green:0 4px 14px rgba(134,188,37,.28);
  --sh-dark:0 6px 18px rgba(0,0,0,.22);
  /* geometry + motion — sharp-cornered per the CI; pills are the exception */
  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --disp:"Aptos Display","Aptos","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --body:"Aptos","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* RETIRED AS A TYPEFACE, KEPT AS A NAME (12 Aug 2026): every rule that says
     var(--mono) is a micro-label or a numeral, and the monospace voice is what
     made the UI read as a wireframe annotation layer. It now resolves to Aptos;
     the variable name survives so the ~90 label rules didn't have to churn. */
  --mono:"Aptos","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.58;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* top bar — flat black product chrome (the CI's dominant dark mode), no mono,
   no green-on-black hacker voice: white wordmark + quiet white text, pill
   controls, the green kept for the active language and the saved-✓ only */
.v0{position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;
  justify-content:center;gap:16px;background:#000;color:rgba(255,255,255,.78);
  font-family:var(--body);font-size:12px;letter-spacing:.02em;z-index:50}
.v0 b{color:#fff;font-weight:600;letter-spacing:.01em}
.v0 .blogo{height:14px;display:block;opacity:.95}
.v0 button{font-family:var(--body);font-size:11.5px;background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:3px 12px;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.v0 button:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff}
/* armed state of Restart — the two-click confirm (experience audit P0) */
.v0 button.armed{background:rgba(218,41,28,.18);color:#ff8d84;border-color:rgba(218,41,28,.55);font-weight:700}
.v0 button.armed:hover{background:rgba(218,41,28,.3);border-color:#DA291C}
/* session badge — muted "Session · word" with a positive-only saved ✓
   (OQ-21 phase 2 follow-up). Never shows a failure state (see app.js _cloudState). */
.v0 .sessionbadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);
  font-size:11.5px;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.v0 .sessionbadge .ck{font-style:normal;color:var(--brand-green);opacity:0;
  transform:scale(.7);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.v0 .sessionbadge .ck.on{opacity:1;transform:scale(1)}
/* language switcher (EN | PT) */
.v0 .langsw{display:inline-flex;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);overflow:hidden}
.v0 .langsw .lang{border:0;border-radius:0;padding:3px 12px;color:rgba(255,255,255,.66);background:transparent}
.v0 .langsw .lang+.lang{border-left:1px solid rgba(255,255,255,.22)}
.v0 .langsw .lang.on{background:var(--brand-green);color:#000;font-weight:700}
.v0 .langsw .lang:hover:not(.on){background:rgba(255,255,255,.10);color:#fff}
/* facilitation-tools icon (13 Aug 2026) — pinned to the top RIGHT rather than
   placed in the flow, so the centred banner row is not pushed off-centre by it.
   Deliberately quiet: no label, low contrast until hovered. */
.v0 .ftbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  padding:3px 7px;line-height:0;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.45)}
.v0 .ftbtn:hover{color:#fff}
.v0 .ftbtn svg{display:block}
/* the panel. Modal scrim so a stray click outside closes it; nothing about the
   surfaces behind it is rendered until the facilitator word is right. */
.ftscrim{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-start;justify-content:flex-end;padding:44px 12px 12px}
.ftpanel{width:min(360px,100%);background:var(--card);border:1px solid var(--strong);
  border-radius:var(--r-md);padding:14px 15px 12px;box-shadow:var(--sh-lg)}
.fthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fthead b{font-family:var(--disp);font-size:14px}
.ftx{background:none;border:0;font-size:15px;line-height:1;color:var(--faint);cursor:pointer;padding:2px 4px}
.ftx:hover{color:var(--ink)}
.ftform label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.ftlinks{display:flex;flex-direction:column;gap:8px}
.ftlink{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;color:var(--ink);transition:border-color .15s var(--ease),background .15s var(--ease)}
.ftlink:hover{border-color:var(--ink);background:var(--page)}
.ftlink b{display:block;font-family:var(--disp);font-size:13.5px;margin-bottom:2px}
.ftlink span{display:block;font-size:11.5px;line-height:1.4;color:var(--p3)}
.fthint{margin-top:10px;font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--faint)}
/* the group picker (13 Aug 2026) — its own screen ahead of the Sponsor's note */
.pickscreen .gsel{margin-top:22px}
.pickscreen .pickgo{justify-content:center;margin-top:18px}
.pickscreen .pickhint{min-height:16px;margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.pickscreen .resume{margin-top:14px}
.pickscreen .pickerr{max-width:52ch;margin:14px auto 0;text-align:left}
/* a number another laptop already holds — marked, still clickable (clicking is
   how the group gets the explanation), never coloured as an error state */
.gchip.taken{color:var(--faint);border-style:dashed;border-color:var(--line)}
.gchip.taken:hover{border-color:var(--strong);transform:none}
.gchip .gtaken{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
/* screen 1's "you are Group N · change group" line */
.hold .facil.groupback{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}

/* fixed top-chrome stack: the live-meter bar sits in a fixed container below
   the v0 banner. Was a ribbon + meter-bar stack until 8 Aug 2026, when the
   step breadcrumb was removed (dry-run feedback #2 — it duplicated the
   engagement timeline); the container now holds the meter bar alone and
   renders only on screens that have one. See DECISIONS.md 8 Aug. */
.topchrome{position:fixed;top:34px;left:0;right:0;z-index:40;
  box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:100px 24px 124px;animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phase-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;color:var(--accent);font-weight:600;text-transform:uppercase}
.phase-tag::before{content:"";width:16px;height:2px;border-radius:2px;
  background:var(--brand-green)}
h1.screen{font-family:var(--disp);font-size:32px;font-weight:700;letter-spacing:-.02em;margin:10px 0 8px;line-height:1.12}
.lead{color:var(--dim);font-size:15px;max-width:70ch;margin:0 0 26px;line-height:1.6}
/* padding-top clears the fixed chrome: 34px banner + 144px meter bar + ~9px
   breathing (recomputed 8 Aug 2026 after the step breadcrumb was removed —
   the chrome lost the ~46px ribbon, so 232 → 187). The non-withbar value is
   the start screen only (no meter bar there); it lost the ribbon too. */
.wrap{max-width:1080px;margin:0 auto;padding:58px 24px 120px}
.wrap.withbar{padding-top:187px}

/* live meters bar — VISUAL redesign (Matheus, 1 Aug 2026): the numeric chips
   give way to two instruments. Left, the engagement as a phase-segmented
   timeline over the 27pilots spine (lived phases fill, unlived phases ghost
   at their planned width, the tick marks the 28-week plan — overrun is read
   from the fill crossing the tick, colour only restates it). Right, Sponsor
   Support as the four verdict-tier outcome zones with the model's own range
   riding over them. It is the sole occupant of .topchrome (8 Aug 2026). */
.meterbar{position:relative;background:#fff;border-bottom:1px solid var(--line)}
/* AMENDED again 1 Aug 2026 (Matheus, option A): Sponsor Support moves ABOVE
   the timeline so the timeline owns the full width — it is the instrument
   that needs room. Stacked rows, not columns. */
.mbinner.mb3{max-width:1080px;margin:0 auto;padding:11px 20px 12px;display:flex;
  flex-direction:column;gap:10px}
.mbtl,.mbsp{min-width:0}
.mbsp{display:flex;align-items:center;gap:10px}
.mbsp .mbk{margin-bottom:0;flex:0 0 auto}
.mbsp .sprow{flex:1 1 auto;max-width:560px}
.mbk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
/* the engagement timeline — PHASE BACKDROP + ENGAGEMENT BAR (Matheus,
   1 Aug 2026, option A — third pass). The week axis is FIXED (TL_HORIZON in
   app.js), so nothing on the backdrop ever moves: the five phases are a
   backdrop with vertical guide lines where each should end, and a single
   engagement bar grows across it as decisions lock, coloured per phase by the
   size of the delay. Everything right of the emphasised 28-week line is
   reserved spill-over field — most chains land there. */
.tlcol{position:relative;min-width:0}
/* header row: section label left, elapsed weeks right (Matheus, 1 Aug) */
.mbhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:3px}
.mbhead .mbk{margin-bottom:0}
.tlweeks{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
/* phase-name strip above the field — names are centred on their band and are
   never clipped, which is the only way "Discover" (2 of 84 weeks) can read */
.tlplbls{position:relative;height:13px;margin-bottom:2px}
.tlplbl{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--body);font-size:9px;font-weight:600;color:var(--faint);line-height:1.2}
.tlplbl.first{transform:none}
.tlplbl.adopt{transform:none;padding-left:5px;display:inline-flex;align-items:center;gap:4px;opacity:.72}
.tlplbl.active{color:var(--accent-ink)}
.tlfield{position:relative;height:34px;
  border:1px solid var(--line-soft);border-radius:4px;background:var(--panel-2);overflow:hidden}
.tlbands{position:absolute;inset:0;display:flex}
/* the PLANNED phases are white cards on the recessed field; the field itself
   shows through past the baseline, so the spill area reads as open time
   rather than as an unnamed fifth phase (Matheus, 1 Aug) */
.tlband{position:relative;height:100%;cursor:default;background:#fff}
.tlband.active{background:var(--accent-bg)}
/* Adopt — starts IMMEDIATELY after Pilot (Matheus, 1 Aug: no gap may exist
   between them) and runs to the end of the field, so no undefined space
   remains. Its duration is NOT modelled — the lab ends at the adoption
   decision — so it is hatched, fading rightwards to read "open-ended", and
   its label sits at the LEFT edge, marking where adoption should have begun
   rather than implying a phase dozens of weeks long. */
.tlband.adopt{background:
    linear-gradient(90deg,rgba(243,245,239,0) 0%,var(--panel-2) 55%),
    repeating-linear-gradient(45deg,rgba(211,214,206,.30) 0 4px,transparent 4px 9px)}
/* guide lines — where each phase should end; the last is the 28-week baseline */
.tlguide{position:absolute;top:0;bottom:0;width:1px;background:var(--strong);pointer-events:none;z-index:2}
.tlguide.base{width:2px;background:var(--ink);opacity:.6}
/* the baseline caption sits ABOVE the field, centred on its line with a short
   tick down to it — inside the backdrop it read as if it named a phase
   (Matheus, 1 Aug). Costs no height: it occupies the section label's row. */
/* footer strip: the baseline caption under its own line, and the colour key */
.tlfoot{position:relative;min-height:30px;margin-top:3px}
.tlbase{position:absolute;top:3px;transform:translateX(-50%);font-family:var(--mono);
  font-size:9px;color:var(--dim);white-space:nowrap}
.tlbase::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:4px;
  background:var(--ink);opacity:.45}
.tlkey{position:absolute;right:0;top:2px;display:inline-flex;flex-wrap:wrap;
  justify-content:flex-end;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9px;color:var(--faint);white-space:nowrap}
.tlkey i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-left:7px}
.tlkey i:first-child{margin-left:0}
.tlkey i{border:1px solid rgba(0,0,0,.18)}
.tlkey i.ok{background:var(--tl-ok)}
.tlkey i.warn{background:var(--tl-warn)}
.tlkey i.bad{background:var(--tl-bad)}
.tlband.adopt .tlgd{position:relative;z-index:1;font-family:var(--mono);font-size:8px;
  font-weight:700;color:var(--faint);background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:0 3px;line-height:1.6;font-style:normal}
/* the engagement bar — grows as decisions lock; colour = size of the delay */
.tlbar{position:absolute;left:0;right:0;bottom:4px;display:flex;height:17px;z-index:3;
  padding-left:1px;pointer-events:none}
.tlseg{height:100%;pointer-events:auto;cursor:default;position:relative;overflow:hidden;
  display:flex;align-items:center;padding:0 5px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* the lived segments name themselves, white on the fill */
.tlsegn{position:relative;z-index:1;font-family:var(--body);font-size:9px;font-weight:600;
  color:#fff;white-space:nowrap;line-height:1}
.tlseg:first-child{border-radius:4px 0 0 4px}
.tlseg:last-child{border-radius:0 4px 4px 0}
.tlseg + .tlseg{border-left:1.5px solid #fff}
.tlseg.ok{background:var(--tl-ok)}
.tlseg.warn{background:var(--tl-warn)}
.tlseg.bad{background:var(--tl-bad)}
/* the amber is light by necessity — separating it from the green under
   protanopia requires it — so its label flips to dark ink (9.8:1) while the
   green and crimson keep white (4.5:1 and 8.1:1) */
.tlseg.warn .tlsegn{color:#141613}
.tlseg.running::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px);
  animation:plrun 1.1s linear infinite}
@keyframes plrun{from{background-position:0 0}to{background-position:17px 0}}
.tlover{align-self:center;margin-left:-1px;color:var(--bad);font-size:13px;line-height:1;pointer-events:auto}
/* the sponsor outcome scale — zones = the verdict-email tiers, labelled */
.sprow{position:relative;display:flex;height:24px}
.spzone{position:relative;display:flex;align-items:center;justify-content:center;height:100%;
  overflow:hidden;border:1px solid var(--line);border-left:0}
.spzone:first-child{border-left:1px solid var(--line);border-radius:3px 0 0 6px}
.spzone:last-child{border-radius:0 6px 6px 0}
.spzone span{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.z-wound-down{background:#FBEAE8;color:#9c2f26}
.z-cut{background:#FBF3D0;color:#8a6d00}
.z-held{background:var(--panel-2);color:var(--dim)}
.z-extended{background:var(--accent-bg);color:var(--accent-ink)}
/* the group's position: a single POINTER (Matheus, 1 Aug 2026) — mid-lab it
   anticipates the mood at the model range's midpoint; the exact number still
   appears only on the verdict screen (15 Jul rule — the bar prints none) */
.sppointer{position:absolute;top:-6px;bottom:-2px;width:2px;background:var(--ink);
  transform:translateX(-1px);border-radius:1px;pointer-events:auto}
.sppointer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--ink)}
/* attention cue on lock (dry-run feedback #3, 8 Aug 2026): what just changed
   announces itself once, then rests. One-shot mount animations, applied only
   when app.js diffed a real change (see _barPrev there). The motion is
   IDENTICAL whatever the outcome — same grow and glow on a green segment as a
   crimson one, same slide toward either end of the scale — so it can only say
   "something changed", never which way (Rule 5). The settle glow is the
   neutral ink tone, not a zone colour, and no transform is animated: the
   segment sits in an overflow:hidden field and the pointer already carries a
   translateX. */
/* durations SLOWED 10 Aug 2026 (Matheus, second pass): the bar's change plays
   alone on a black screen (see .lockveil below), so it is deliberately long —
   the grow/slide/glow now run ~2.4s to fill the black interval (LOCK_HOLD_MS in
   app.js); the settle delays and the JS stagger in meterBar() follow the grow
   duration, and the elapsed-week roll (runWeeksAnim) is matched too. 🔴 all
   uncalibrated with LOCK_FADE_MS/LOCK_HOLD_MS and the other week numbers (OQ-12). */
.tlseg.grew{animation:tlgrow 2.4s var(--ease) both,tlsettle .7s ease-out 2.4s}
@keyframes tlgrow{from{width:0}}
@keyframes tlsettle{
  0%{box-shadow:0 0 0 3px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.18)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0),0 1px 3px rgba(0,0,0,.18)}}
.sppointer.slide{animation:spslide 2.4s var(--ease) both,spglow .8s ease-out 2.4s}
@keyframes spslide{from{left:var(--sp-from)}}
.sppointer.appear{animation:spappear 1.6s var(--ease) both,spglow .8s ease-out 1.6s}
@keyframes spappear{from{opacity:0}}
@keyframes spglow{0%{filter:drop-shadow(0 0 5px rgba(0,0,0,.6))}100%{filter:none}}

/* LOCK TRANSITION (10 Aug 2026, Matheus's second pass): a decision lock fades
   the whole screen to black while the top rhythm bar stays lit ON the black,
   the timeline + pointer move there (synchronised), then it fades back in on
   the committed screen. The veil is a full-viewport black layer BELOW the top
   bar's raised z-index and ABOVE everything else (banner z50, nav z40, content).
   Managed by runLockTransition() in app.js; body.lockveil-on raises the bar and
   survives the commit's re-render, so the black never drops off the bar. */
/* both fades are quick and equal (Matheus, 10 Aug — first the fade to black, then
   the fade back in): removing .show fades the committed screen IN via .lockveil's
   transition; adding .show fades TO black via .lockveil.show's. Both .4s, kept in
   step with LOCK_FADE_IN_MS / LOCK_FADE_OUT_MS in app.js (still two rules so one
   can be retuned without the other). */
.lockveil{position:fixed;inset:0;background:#000;z-index:60;opacity:0;
  transition:opacity .4s var(--ease)}
.lockveil.show{opacity:1;transition:opacity .4s var(--ease)}
/* the bar is raised above the veil AND zooms on the black (Matheus, 10 Aug —
   "zoom in before it moves, zoom back before the fade in, so participants can
   really see it move"). transform-origin top-centre pins the top edge and grows
   the bar DOWN into the black; lock-zoom is added after the zoom-in beat and
   removed before the fade-in. lock-premove pauses the grow/slide/appear cue so
   the bar HOLDS its pre-move state through the zoom-in, then plays once released.
   🔴 the scale is uncalibrated and assumes a ≳1280px screen (1.15× of the 1080
   content ≈ 1242px); drop it if a venue laptop is narrower. */
body.lockveil-on .topchrome{z-index:70;transform-origin:50% 0;
  transition:transform .45s var(--ease)}
body.lock-zoom .topchrome{transform:scale(1.15)}
body.lock-premove .tlseg.grew,
body.lock-premove .sppointer.slide,
body.lock-premove .sppointer.appear{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .tlseg.grew,.sppointer.slide,.sppointer.appear{animation:none}
  .lockveil{display:none}}
/* phase tooltip — dark bubble under the hovered segment (see phShow in app.js) */
#phtip{display:none;position:fixed;z-index:90;background:#111;color:#fff;
  font-family:var(--body);font-size:12.5px;line-height:1.5;padding:11px 14px;border-radius:3px;max-width:340px;
  box-shadow:0 12px 32px rgba(0,0,0,.3);pointer-events:none;border:1px solid rgba(255,255,255,.08)}
#phtip .pth{font-family:var(--disp);font-weight:700;font-size:13px}
#phtip .pth span{font-weight:400;color:#c9cdc4;font-size:12px}
#phtip .pts{font-family:var(--mono);font-size:10.5px;color:var(--brand-green);margin-top:2px}
#phtip .ptcov{font-size:11px;color:#b9bdb4;margin-top:3px;line-height:1.35}
#phtip ul{margin:8px 0 0;padding-left:16px}
#phtip li{margin:3px 0;font-size:12px;color:#e4e6e0}
@media(max-width:860px){.mbinner.mb2{flex-wrap:wrap;row-gap:14px}.mbsp{flex:1 1 100%}
  .wrap.withbar{padding-top:187px}}
.phase-tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);font-weight:600}
/* the 27pilots phase this decision sits in (Matheus, 1 Aug 2026) — quiet
   suffix on the decision-screen eyebrow, set off from the DP tag */
.phase-tag .phase-stage{margin-left:10px;padding-left:12px;border-left:1px solid var(--line);
  font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--dim)}
h1.screen{font-family:var(--disp);font-size:34px;font-weight:700;letter-spacing:-.02em;margin:8px 0 8px;line-height:1.1}
.lead{color:var(--dim);font-size:15px;max-width:70ch;margin:0 0 26px}

/* welcome / lecture / end holding screens */
.hold{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:44px 40px;
  text-align:center;box-shadow:var(--sh-md)}
.hold .big{font-family:var(--disp);font-size:36px;font-weight:700;margin:10px 0 12px;letter-spacing:-.02em;line-height:1.1}
.hold p{color:var(--dim);max-width:60ch;margin:0 auto 8px}
.hold .facil{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.02em}
/* facilitator-only cloud session field (OQ-21 phase 2) — muted, sits apart from
   the participant flow; a thin top rule marks it as setup, not a game control */
/* start-screen reset block (Matheus, 2 Aug 2026) — see startReset() in app.js */
.hold .facil.startreset{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.rsk{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.rsrow{display:flex;gap:10px;flex-wrap:wrap}
.rsbtn{font-family:var(--body);font-size:12px;color:var(--dim);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;
  transition:border-color .14s var(--ease),color .14s var(--ease)}
.rsbtn:hover:not(:disabled){border-color:var(--strong);color:var(--ink)}
.rsbtn:disabled{opacity:.42;cursor:default}
.rsbtn.armed{border-color:var(--bad);color:var(--bad);font-weight:600}
.rsdone{margin-top:9px;font-size:12px;color:var(--p1)}
.rshint{margin-top:9px;font-family:var(--body);font-size:11.5px;color:var(--faint);line-height:1.5}
.hold .facil.sessionfacil{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sessionfacil label{color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.sessionfacil input{font-family:var(--mono);font-size:12px;padding:4px 8px;width:130px;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink)}
.sessionfacil input:focus{outline:none;border-color:var(--strong)}
.sessionfacil .sessionhint{flex-basis:100%;font-size:10.5px;color:var(--faint);line-height:1.4}
/* Start-screen sync state (8 Aug 2026) — a coloured dot + line so a laptop's
   offline/online status is legible on screen 1. on = green, off = calm amber
   (a caution, not an alarm), disabled = neutral grey. */
.sessionfacil .sessionsync{flex-basis:100%;font-size:10.5px;line-height:1.4;
  font-family:var(--mono);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.sessionfacil .sessionsync::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.sessionsync.on{color:var(--p1)} .sessionsync.on::before{background:var(--p1)}
.sessionsync.off{color:#8a6d00} .sessionsync.off::before{background:var(--tl-warn)}
.sessionsync.disabled{color:var(--faint)} .sessionsync.disabled::before{background:var(--strong)}
/* the offline-start confirm state of the Begin button (Option B) */
.btn.next.confirm{background:var(--tl-warn);color:#141613;border-color:var(--tl-warn);box-shadow:none}
.btn.next.confirm:hover{background:#D99A0F;border-color:#D99A0F;transform:translateY(-1px)}

/* decision grid of sheets */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:900px){.grid.four{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}

.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;display:flex;
  flex-direction:column;overflow:hidden;box-shadow:var(--sh-sm);
  transition:border-color .18s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.sheet:hover{border-color:var(--strong);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.sheet.chosen{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg),var(--sh-md)}
.sheet .head{padding:16px 20px 13px;border-bottom:1px solid var(--line-soft);
  background:var(--panel)}
.sheet .badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;
  color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:4px;padding:3px 9px}
.sheet .name{font-family:var(--disp);font-size:16.5px;font-weight:700;margin:10px 0 0;line-height:1.25;letter-spacing:-.01em}
/* the three summary tags under the card title (Matheus, 10 Aug 2026; dry-run
   #17). Three equal-width columns give the strip the SAME SIZE on every card
   whatever text lands in it (his UX condition); grid's default stretch makes
   the three chips share a height, and the min-height keeps a stable baseline
   for one-line labels. RULE 5: one neutral treatment, no colour — the chip and
   its icon are identical on all three axes and all four cards. */
.fstags{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0 1px}
/* min-height sized for the longest label (four-value "Multi-system integration"
   wraps to two lines at card width) so a two-line chip and a one-line chip
   settle at the SAME height — the strip is one size on every card, not just
   within a card. */
.fstag{display:flex;align-items:center;gap:6px;min-height:40px;padding:5px 9px;
  border:1px solid var(--line);border-radius:4px;background:var(--panel-2);
  font-family:var(--mono);font-size:10.5px;line-height:1.18;color:var(--dim)}
.fstag svg{flex:0 0 14px;width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.fstag .tv{min-width:0;overflow-wrap:anywhere}
.sheet .sub-area{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);margin-top:6px;text-transform:uppercase}
.sheet .body{padding:16px 20px;flex:1}
.field{margin-bottom:13px}
.field:last-child{margin-bottom:0}
.field .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.field .v{font-size:13px;color:var(--ink)}
/* the scout's note on a fact sheet — sits directly under the title, before any
   of the plan (Matheus, 2 Aug 2026). Same voice and weight as the D2 band. */
.fsnote{padding:12px 20px 13px;background:var(--panel-2);border-bottom:1px solid var(--line-soft);
  font-size:12.5px;line-height:1.58;font-style:italic;color:var(--dim)}
.fsnote .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);font-style:normal;margin-bottom:5px}
/* two paragraphs since 2 Aug 2026: the scope's profile in the scout's own
   words, then his hedge. Splitting them is what makes the note scannable —
   a group reading four cards at once can take the first line of each. */
.fsnote .fsnp{margin:0;font-style:normal;color:var(--ink)}
.fsnote .fsnc{margin:7px 0 0}
.sheet .foot{padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--panel)}
.sheet .foot .unpick{order:0;display:block;margin:9px auto 0}
.choose{width:100%;font-family:var(--disp);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.01em;
  background:var(--dark);color:#fff;border:1px solid var(--dark);border-radius:var(--r-pill);
  padding:11px 18px;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.choose:hover{box-shadow:var(--sh-dark);transform:translateY(-1px)}
.choose:active{transform:translateY(0)}
.choose.is-chosen{background:var(--brand-green);border-color:var(--brand-green);color:#000}

/* D1 inbox — an APPLICATION WINDOW (Matheus, 2 Aug 2026). Title bar, menu strip
   and toolbar are pure furniture: nothing here is interactive, and nothing
   carries content. They exist so the screen reads as a mail client in use
   rather than as four cards in a list. */
.mailapp{border:1px solid var(--strong);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lg);background:var(--card)}
.mwbar{display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:#EDEDEC;border-bottom:1px solid var(--strong)}
.mwdots{display:flex;gap:7px;flex:0 0 auto}
.mwdots i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.mwdots i.r{background:#FF5F57}.mwdots i.y{background:#FEBC2E}.mwdots i.g{background:#28C840}
.mwtitle{font-family:var(--disp);font-size:12.5px;font-weight:600;color:var(--dim);
  letter-spacing:.01em;margin:0 auto;padding-right:52px}
@media(max-width:700px){.mwtitle{padding-right:0}}
.mwmenu{padding:6px 16px;font-size:11.5px;color:var(--faint);background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.mwtools{padding:8px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);background:var(--panel);border-bottom:1px solid var(--line)}
/* folder rail — Inbox is the only lit folder; it never responds to a click */
.mrail{border-right:1px solid var(--line);background:var(--panel-2);padding:14px 0;min-width:0}
.mrk{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:0 16px 8px}
.mfold{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:13px;color:var(--faint)}
.mfold.on{color:var(--ink);font-weight:600;background:var(--card);
  box-shadow:inset 3px 0 0 var(--brand-green)}
.mfn{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--p1);
  background:var(--p1b);border:1px solid var(--accent-line);border-radius:3px;padding:0 6px}
/* date-group headers inside the list */
.mgroup{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:11px 16px 7px;background:var(--panel-2);border-bottom:1px solid var(--line-soft)}
.inbox2{display:grid;grid-template-columns:148px 320px 1fr;border-top:1px solid var(--line);
  overflow:hidden;background:var(--card);min-height:480px}
.mlist{border-right:1px solid var(--line);overflow-y:auto;max-height:calc(100vh - 250px);background:var(--panel)}
.mpane{display:flex;flex-direction:column;min-width:0;max-height:calc(100vh - 250px)}
.mpane .mailhead{background:var(--panel)}
.mpane .mailbody{overflow-y:auto;flex:1;max-width:none}
.mpane-empty{display:flex;align-items:center;justify-content:center;flex:1;
  padding:40px;text-align:center;color:var(--faint);font-size:14px}
@media(max-width:1060px){.inbox2{grid-template-columns:300px 1fr}.mrail{display:none}}
@media(max-width:760px){.inbox2{grid-template-columns:1fr}
  .mlist{max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .mpane{max-height:none}}
.mailrow{display:grid;grid-template-columns:22px 30px 1fr;gap:0 11px;align-items:start;padding:14px 18px 13px 12px;
  border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative;transition:background .14s var(--ease)}
.mailrow:last-child{border-bottom:0}
.mailrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .14s var(--ease)}
.mailrow:hover{background:var(--panel-2)}
.mailrow:hover::before{background:var(--brand-green)}
.mailrow.unread::before{background:var(--accent-line)}
.mailrow.sel{background:#fff}
.mailrow.sel::before{background:var(--brand-green)}
.md{padding-top:6px;text-align:center}
/* the row's text column must be allowed to shrink below its longest word, or a
   long subject widens the grid track and spills across the pane divider */
.mmain{min-width:0}
.msub{overflow-wrap:anywhere}
.udot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.mtop{display:flex;gap:6px;align-items:baseline}
.who{font-weight:600;font-size:14px}
.mailrow.unread .who{font-weight:700}
.wtitle{display:block;color:var(--faint);font-size:11.5px;margin-top:1px}
.mtime{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.msub{font-size:13.5px;margin-top:4px}
.mailrow.unread .msub{font-weight:600}
.mch{font-family:var(--mono);font-size:10.5px;color:var(--p1);background:var(--p1b);white-space:nowrap;
  border:1px solid var(--accent-line);border-radius:3px;padding:1px 8px;margin-left:6px;display:inline-block}
.mprev{font-size:12.5px;color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the briefing row — read, openable, and visibly NOT a fifth candidate */
.mailrow.brief .msub{font-weight:600}
.mtag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--dim);
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:1px 7px;margin-left:6px}
.brieffoot{display:block;font-size:12px;color:var(--faint);text-align:left}
/* already-read furniture: inert in every sense — no pointer, no hover, no rail */
.mailrow.dead{cursor:default;opacity:.5;grid-template-columns:22px 30px 1fr;padding:11px 18px 10px 12px}
.mailrow.dead:hover{background:transparent}
.mailrow.dead:hover::before{background:transparent}
.mailrow.dead .who{font-weight:400;color:var(--faint)}
.mailrow.dead .msub{font-size:12.5px;color:var(--faint);margin-top:2px}
/* open mail (reading pane + verdict email reuse these) */
.mail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.mailhead{display:flex;gap:18px;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--line);
  background:var(--panel)}
.mh-meta{flex:1;min-width:0}
.mh-from{font-size:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.mh-to{font-size:12px;color:var(--faint);margin-top:3px}
.mh-sub{font-family:var(--disp);font-size:20px;font-weight:700;margin-top:10px;line-height:1.3;letter-spacing:-.01em}
.mailbody{padding:24px 26px;max-width:76ch}
.mailbody p{margin:0 0 15px;font-size:14.5px;line-height:1.62}
.mailbody .mbul{margin:0 0 15px;padding-left:22px}
.mailbody .mbul li{font-size:14.5px;margin:6px 0;line-height:1.55}
/* the cut in the sponsor email (Matheus, 2 Aug 2026) — a rule carrying a small
   label, dividing the lead + verdict from the per-decision notes. Deliberately
   quiet: it is a signpost inside a letter, not a heading that competes with the
   subject line. Uses --strong so it reads as a real break at 14.5px body. */
.mailcut{display:flex;align-items:center;gap:12px;margin:26px 0 22px}
.mailcut::before,.mailcut::after{content:"";flex:1;height:1px;background:var(--strong)}
.mailcut span{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.mailbody .sig{margin-top:24px;color:var(--dim)}
.mailbody .sig span{font-size:12.5px;color:var(--faint)}
/* HIS NOTES — the attached table under the signed letter (Matheus, 10 Aug 2026).
   Two columns: the decision, and his bullets with a bold lead. Row rules only,
   no fills and no marks: the debrief panel beside it owns ✓ △ ✗, and this
   surface is ungated, so it must not read as a scorecard. */
.mailatt{padding:0 26px 26px;max-width:82ch}
.notetbl{width:100%;border-collapse:collapse}
.notetbl th{width:26%;text-align:left;vertical-align:top;padding:14px 18px 14px 0;
  font-family:var(--disp);font-size:13.5px;font-weight:700;line-height:1.35;
  color:var(--dim);border-top:1px solid var(--line)}
.notetbl td{vertical-align:top;padding:14px 0;border-top:1px solid var(--line)}
.notetbl tr:first-child th,.notetbl tr:first-child td{border-top:0}
.notetbl ul{margin:0;padding-left:18px}
.notetbl li{font-size:14px;line-height:1.6;margin:0 0 9px}
.notetbl li:last-child{margin-bottom:0}
.notetbl li b{font-weight:650}
/* VALENCE (Matheus, 10 Aug 2026) — green reads positive, red negative, in the
   letter's authored spans and on every notes-table bold lead.
   The pair is --accent-ink + --tl-bad-2, chosen with the same validator the
   timeline ramp was rebuilt with on 2 Aug: contrast on card 6.72 / 6.82, and
   ΔE 10.3 under deuteranopia · 12.2 under protanopia. --accent-ink + --bad, the
   pair anyone would reach for first, collapses to ΔE 5.3 under protanopia.
   Colour is never the ONLY carrier: these spans are also the only bold text in
   the letter, and each bullet's words state their own valence. */
.vpos{color:var(--accent-ink)}
.vneg{color:var(--tl-bad-2)}
.mailbody .vpos,.mailbody .vneg{font-weight:650}
@media (max-width:560px){
  .mailatt{padding:0 20px 22px}
  .notetbl,.notetbl tbody,.notetbl tr,.notetbl th,.notetbl td{display:block;width:auto}
  .notetbl th{padding:16px 0 6px;border-top:1px solid var(--line)}
  .notetbl td{padding:0 0 14px;border-top:0}
  .notetbl tr:first-child td{border-top:0}
}
.mailfoot{padding:14px 24px;border-top:1px solid var(--line);background:var(--panel);
  display:flex;justify-content:flex-end;align-items:center;gap:16px}
.mailfoot .choose{width:auto;padding:11px 24px}
/* the discrete un-select — quiet on purpose: an escape hatch, never a second
   call to action sitting next to the real one (Matheus, 2 Aug 2026) */
.unpick{order:-1;background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:var(--body);font-size:11.5px;color:var(--faint);
  border-bottom:1px dotted var(--strong);transition:color .14s var(--ease)}
.unpick:hover{color:var(--dim);border-bottom-color:var(--faint)}
.pathfoot{display:flex;justify-content:flex-end;margin-top:10px}

/* D2 — TASK BANNER (10 Aug 2026, dry-run #10). Sits between the re-read panel
   and the reader chrome, calling the task out where it can be missed inside a
   two-sentence lead. Green left rule + panel-tinted background echoes the
   accent used on the "chosen" one-pager and the debrief unlock — reads as
   guidance from the app, not more scouting content. Invariant across all 16
   cards, so Rule 5 tier 3 (never ranks a deck) holds. */
.taskbox{display:flex;align-items:baseline;gap:14px;
  background:var(--panel-2);border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:12px 16px;margin:0 0 18px}
.taskbox .taskk{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);flex:0 0 auto;padding-top:1px}
.taskbox .taskv{font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
@media(max-width:700px){.taskbox{flex-direction:column;gap:4px;align-items:flex-start}}

/* D2 — READER CHROME (10 Aug 2026, Matheus). A dark warm-grey plate wraps the
   navigation row and the one-pager beneath, so the white card reads as a page
   floating on a desk. This is what makes the ‹ › and the numbered chips read
   as controls the moment the screen paints — the previous flat layout put the
   arrows below the fold and the room missed them. */
.d2-reader{background:#1B1C1B;border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-lg);
  margin:0 0 12px}
@media(max-width:700px){.d2-reader{padding:10px}}
.d2-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 12px}
.d2-nums{display:flex;gap:8px;justify-content:center;flex:1 1 auto}
/* the numbered chip is a compact button with three overlaid state marks:
     · outlined  = not yet opened (transparent on the dark plate)
     · filled    = opened at some point (white plate, ink number)
     · accent    = the CURRENT card (green plate, white number, aria-current)
     · picked ring = the one the group has shortlisted (persists across chips) */
.d2-num{font-family:var(--disp);font-size:14px;font-weight:700;line-height:1;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:transparent;color:#ffffff;border:1.5px solid rgba(255,255,255,.55);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.d2-num:hover{border-color:#ffffff;transform:translateY(-1px)}
.d2-num.seen{background:#ffffff;color:var(--ink);border-color:#ffffff}
.d2-num.on{background:var(--accent);color:#ffffff;border-color:var(--accent);transform:scale(1.08)}
.d2-num.picked{box-shadow:0 0 0 2px var(--accent-line),0 0 0 4px rgba(255,255,255,.15)}
.d2-num:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* the ‹ › arrows now sit inside the reader nav row, no longer stretching the
   full card height. Sized to sit next to the numbered chips and match their
   metrics so the row reads as one control cluster. */
.arrow{font-family:var(--disp);font-size:22px;line-height:1;color:#ffffff;
  background:transparent;border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-md);
  cursor:pointer;padding:0;flex:0 0 auto;width:44px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.arrow:hover:not(:disabled){background:rgba(255,255,255,.10);border-color:#ffffff;transform:translateY(-1px)}
.arrow:disabled{opacity:.35;cursor:default}
.arrow:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.onepager{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;min-height:430px;box-shadow:var(--sh-md)}
.onepager.chosen{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg),var(--sh-md)}
.op-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
  padding:22px 26px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.op-name{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.02em}
.op-tag{font-size:13px;color:var(--dim);margin-top:4px}
.op-facts{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right;white-space:pre-line;line-height:1.5}
.op-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:860px){.op-grid{grid-template-columns:1fr 1fr}}
.opcell{padding:15px 20px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.opcell.wide{grid-column:span 3}
@media(max-width:860px){.opcell.wide{grid-column:span 2}}
.opcell .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.opcell .v{font-size:13px;line-height:1.5}
/* the three identity cells as labelled rows (2 Aug 2026): a group sharing one
   screen reads down the labels, not through a paragraph.
   The label sits ABOVE its value rather than beside it: these cells are a third
   of the card wide, and a label column would squeeze every value into forty
   characters. Stacked, each value gets the full width and the labels read as a
   scannable spine down the left. */
.oprows{margin:0}
.oprows dt{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-top:9px}
.oprows dt:first-child{margin-top:0}
.oprows dd{margin:1px 0 0;font-size:12.5px;line-height:1.45}
.oprows dd .fperson+.fperson{margin-top:.4em}
.oprows dd .fperson strong{font-weight:600}
.op-foot{padding:15px 22px;background:var(--panel);display:flex;justify-content:flex-end;
  align-items:center;gap:16px;border-top:1px solid var(--line-soft)}
.op-foot .choose{width:auto;padding:11px 24px}
.caps{margin:0;padding-left:16px}
.caps li{font-size:13px;margin:4px 0;line-height:1.5}
/* the analyst's band — MOVED to directly under the identity layer (2 Aug 2026).
   Styled as commentary running down the side of the sheet rather than as a
   panel of its own: a labelled margin, then the upside, then what is still
   open. Quiet enough that it frames the card instead of competing with it. */
.op-analyst{display:grid;grid-template-columns:126px 1fr;gap:18px;
  padding:16px 26px 17px;border-bottom:1px solid var(--line);background:var(--panel-2)}
@media(max-width:700px){.op-analyst{grid-template-columns:1fr;gap:8px}}
.oa-k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding-top:2px;border-right:2px solid var(--accent-line);padding-right:12px}
@media(max-width:700px){.oa-k{border-right:0;padding-right:0}}
.oa-body{min-width:0}
.oa-up{margin:0;font-size:13px;line-height:1.58;color:var(--dim);font-style:italic}
.oa-asks{margin-top:11px}
.oa-ak{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.oa-asks ul{margin:0;padding-left:16px}
.oa-asks li{font-size:12.5px;line-height:1.55;color:var(--dim);margin:5px 0;font-style:italic}
/* the dots strip retired 10 Aug 2026 (dry-run #10) — the numbered chips inside
   the reader nav row carry the position + open-state signal above the fold, so
   a second indicator below the card would only duplicate them. The `.d2-num`
   chip rules above are the replacement; `[data-goto]` navigation still works
   for both, so no event wiring changed. */
.seencount{text-align:center;font-size:12.5px;color:var(--faint);margin-top:12px}
.seencount.all{color:var(--dim)}

/* fiction disclaimer (2 Aug 2026) — bottom of D2 and D3, the two screens that
   name real investors, customers and acquirers. Quiet and legible: it has to be
   readable if anyone looks for it, without competing with the cards above. */
.fiction-note{max-width:74ch;margin:26px auto 0;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.6;color:var(--faint);text-align:center}

/* D2 — header brand zone: real wordmark logo (replaces the name) or a text
   wordmark fallback, with the tagline beneath. Fixed height keeps every card's
   brand zone consistent. */
.op-head .op-id{display:flex;flex-direction:column;gap:7px;min-width:0}
.op-brand{display:flex;align-items:center;gap:11px;height:34px}
.op-logoimg{height:32px;max-width:210px;width:auto;object-fit:contain;display:block}
.op-wordmark{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);line-height:1}

/* DP2 brand layer (3 Aug 2026) — the startup's own banner behind the header
   band, faded to black, text reversed to white. Guarded by BANNERS_READY; with
   it off none of these rules apply and the band is the old white gradient.

   THE SCRIM IS IDENTICAL ON ALL SIXTEEN and that is the Rule 5 point: a card
   whose banner showed more than its neighbours would rank the deck. It runs
   .86 → .80 → .64 left to right, so the mark and tagline sit on near-solid
   black while the facts column keeps enough image to read as a photograph and
   still holds its text — several banners put their brightest content exactly
   where that right-aligned column sits, which is why the right end is not the
   .58 first proposed. The build script normalises all sixteen to one luminance
   beforehand, so one scrim genuinely suits all of them.

   RELAXED from .94/.88/.76 on 3 Aug 2026 — Matheus: "all banners look black."
   It was true: effective luminance is image x (1-alpha), so the old scrim over
   the old target left 0.7-2.8 out of 255. This ramp is paired with
   TARGET_MEAN = 40 in scripts/build-brand-assets.py. Tuning one without the
   other breaks the pairing; re-run the build after touching either. */
.op-head.branded{position:relative;isolation:isolate;border-bottom-color:transparent;
  background:#0d0e0d;background-image:var(--banner);background-size:cover;background-position:center}
.op-head.branded::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,9,8,.86) 0%,rgba(8,9,8,.80) 42%,rgba(8,9,8,.64) 100%)}
.op-head.branded .op-mark{height:34px;width:34px;object-fit:contain;display:block;flex:0 0 auto}
.op-head.branded .op-wordmark{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.op-head.branded .op-tag{color:rgba(255,255,255,.78);text-shadow:0 1px 4px rgba(0,0,0,.75)}
/* the facts column carries the round/acquired cue, a designed participant
   signal, and several banners are brightest exactly under it. A shadow buys
   that contrast back without darkening the image for everyone — and being
   identical on all sixteen it stays Rule 5-neutral, where more scrim would
   have cost every card the picture it just got back. */
.op-head.branded .op-facts{color:rgba(255,255,255,.72);text-shadow:0 1px 4px rgba(0,0,0,.9)}
@media(max-width:700px){.op-head.branded{background-position:72% center}}
/* monogram chip — used inside the diagram's dark startup box */
.op-logo{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:36px;
  border-radius:4px;overflow:hidden;background:#fff;border:1px solid var(--line);flex:0 0 auto}
.op-logo img{max-height:26px;max-width:104px;object-fit:contain;display:block}
.op-logo.mono{background:var(--accent-bg);border-color:var(--p1l);color:var(--accent-ink);
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.01em;padding:0 9px}

/* D2 — fit diagram: process strip (where it acts) + input→startup→output flow.
   Same grammar for all 16; the highlighted node is the only thing that moves. */
.fitdiag-band{padding:15px 24px 3px}
.fitdiag{border:1px solid var(--line);border-radius:3px;background:#fcfcfc;padding:22px 16px 15px}
/* strip caption re-styled 10 Aug 2026 (dry-run #11): the caption used to be a
   pale uppercase metadata label ("How this maps onto your process") that was
   never read, so the strip's boxes were mistaken for claims about the startup.
   The new caption is a full sentence and needs to read as prose, not chrome —
   normal case, ink-coloured, sized to actually be seen. */
.fd-cap{font-size:12px;line-height:1.5;color:var(--dim);margin:-4px 0 12px;font-style:italic}
.fd-strip{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap}
.fd-node{position:relative;flex:1 1 0;min-width:88px;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:9px 8px;font-size:11.5px;line-height:1.25;color:var(--dim);text-align:center;
  display:flex;align-items:center;justify-content:center}
.fd-node.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-ink);font-weight:600;
  box-shadow:0 0 0 1px var(--accent) inset}
.fd-acts{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:var(--accent);border-radius:3px;padding:1px 6px}
.fd-arrow{align-self:center;color:var(--strong);font-size:12px;flex:0 0 auto}
.fd-arrow::before{content:"→"}
.fd-found{position:relative;margin-top:9px;border:1px dashed var(--strong);border-radius:4px;background:#fff;
  padding:8px 10px;font-size:11px;color:var(--faint);text-align:center}
.fd-found.on{border-style:solid;border-color:var(--accent);background:var(--accent-bg);
  color:var(--accent-ink);font-weight:600}
.fd-found .fd-acts{top:-9px}
.fd-flow{display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;align-items:stretch;gap:8px;margin-top:15px}
.fd-io{background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px 11px;display:flex;flex-direction:column;justify-content:center}
.fd-io-k{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.fd-io-v{font-size:11.5px;color:var(--ink);line-height:1.32}
.fd-arrow2{align-self:center;color:var(--strong);font-size:14px}
.fd-arrow2::before{content:"→"}
.fd-tech{display:flex;align-items:center;gap:10px;background:var(--dark);border-radius:4px;padding:9px 12px;color:#fff}
.fd-tech .op-logo{height:30px;min-width:30px;border:none}
.fd-tech .op-logo img{max-height:22px;max-width:80px}
.fd-tech-name{font-family:var(--disp);font-size:13px;font-weight:700;line-height:1.15}
.fd-tech-sub{font-size:10.5px;color:#c9cdc4;margin-top:2px;line-height:1.2}
@media(max-width:760px){
  .fd-flow{grid-template-columns:1fr;gap:6px}
  .fd-arrow2{display:none}
}

/* result sheet */
.rs{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--sh-md)}
.rs .fam{margin-bottom:24px}
.rs .fam h3{font-family:var(--disp);font-size:16px;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
/* per-family verdict chip (10 Aug 2026, Matheus — dry-run #18 revisited). Colour
   is the deuteranopia-validated timeline ramp (--tl-ok/warn/bad); NO ✓△✗ glyph
   (those stay the debrief panel's signature — colour carries the "pop" here).
   Amber carries dark text, per the 2 Aug palette ruling. See DECISIONS.md. */
.rs .fambadge{display:inline-block;vertical-align:middle;margin-left:10px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 9px;border-radius:4px;color:#fff}
.rs .fambadge.ok{background:var(--tl-ok)}
.rs .fambadge.bad{background:var(--tl-bad)}
.rs .fambadge.warn{background:var(--tl-warn);color:#141613}
/* neutral family caption — business-case (C3) / sign-off (C4) status. No colour,
   no mark: it states a fact about what was agreed at scoping, not a verdict. */
.rs .famnote{margin-top:9px;padding:9px 12px;background:var(--panel-2);border-left:2px solid var(--strong);
  border-radius:3px;font-size:12.5px;line-height:1.5;color:var(--dim)}
.rs table{width:100%;border-collapse:collapse}
.rs thead th{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);font-weight:600;text-align:left;padding:0 4px 6px;border-bottom:1px solid var(--line)}
.rs td{border-bottom:1px solid var(--line-soft);padding:9px 4px;font-size:13.5px;vertical-align:top}
.rs td.k,.rs th.k{color:var(--dim);width:24%}
.rs td.v,.rs th.v{font-family:var(--mono);font-size:12.5px;color:var(--ink);width:17%}
/* the agreed-target yardstick column — set apart (dimmed mono) from the measured
   value so the eye reads "result vs. target" without the app judging either. */
.rs td.tg,.rs th.tg{font-family:var(--mono);font-size:12px;color:var(--dim);width:19%}
@media(max-width:620px){.rs .fam{overflow-x:auto}.rs table{min-width:660px}}
.rs .meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.rs .meta .m .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.rs .meta .m .v{font-family:var(--disp);font-size:15px;margin-top:3px;font-weight:600}

/* pathway chips (DP4) */
.pathways{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:4px}
@media(min-width:760px){.pathways{grid-template-columns:repeat(4,1fr)}}
.path{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 18px;text-align:center;
  font-family:var(--disp);font-size:16px;font-weight:600;cursor:pointer;box-shadow:var(--sh-sm);
  transition:border-color .16s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease),background .2s var(--ease)}
.path:hover{border-color:var(--accent);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.path.chosen{background:var(--dark);color:#fff;border-color:var(--dark);box-shadow:var(--sh-dark)}

/* nav */
.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--line);z-index:40;box-shadow:0 -1px 14px rgba(0,0,0,.05)}
.nav .inner{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 24px}
.nav .hint{font-size:12.5px;color:var(--faint)}
/* pill CTAs — the one rounded form the CI allows. Primary = flat Deloitte
   green with black text (the brand's own CTA pairing; black on #86BC25 reads
   ~9:1, white would fail AA). Secondary = white pill, hairline border. */
.btn{font-family:var(--disp);font-size:14px;font-weight:700;cursor:pointer;border-radius:var(--r-pill);padding:11px 24px;
  border:1px solid;letter-spacing:.01em;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .18s var(--ease)}
.btn.prev{background:#fff;color:var(--dim);border-color:var(--strong)}
.btn.prev:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.btn.next{background:var(--brand-green);color:#000;border-color:var(--brand-green)}
.btn.next:hover{background:var(--brand-green-dark);border-color:var(--brand-green-dark);transform:translateY(-1px);box-shadow:var(--sh-green)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.summary{display:grid;gap:9px;margin-top:14px}
.summary .row{display:flex;gap:12px;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--sh-sm)}
.summary .row .k{font-family:var(--mono);font-size:11px;color:var(--faint);min-width:44px;padding-top:2px}
.summary .row .v{font-weight:500}

/* screen 1 — start: group selector */
.brandmark{height:36px;display:block;margin:0 auto 20px}
.hold.start p.role{font-size:17px;color:var(--ink);line-height:1.5}

/* screen 1 — the Head of Ventures briefing rendered INSIDE the same mail-app
   window the room meets on D1 (Matheus, 10 Aug 2026): the mail client the lab
   lives inside establishes itself before the first decision, and the single
   note on screen is the same object that reappears on D1 under Earlier as
   already read. Both panes shed the fixed 100vh cap the D1 grid uses because
   the start screen scrolls as a whole. The list has only one row, so a
   min-height keeps the empty column from collapsing under the reading pane. */
.startmail{max-width:940px;margin:24px auto 6px;text-align:left}
.startmail .inbox2{min-height:0}
.startmail .mlist,.startmail .mpane{max-height:none}
.startmail .mlist{min-height:180px}
/* the single row is presentation only — no data-mail, no click handler — so
   drop the pointer affordances the D1 rows carry */
.startmail .mailrow{cursor:default}
.startmail .mailrow:hover{background:#fff}
.startmail .mailrow:hover::before{background:var(--brand-green)}
/* --- the .briefnote / .bn-* block that used to render the briefing as a
   standalone note on screen 1 is retired 10 Aug 2026: the mail window above
   is the sole start-screen presentation. See the block that ends at
   `.startsteps` — the sibling `.bn-meta / .bn-from / .bn-title / .bn-body /
   .bn-greet / .sig` rules a few lines down were part of the same block and
   are retired with it. */
/* --- portrait thumbnails (2 Aug 2026) ---------------------------------------
   ONE class for every colleague the app shows: the briefing, the D1 inbox rows
   and reading panes, the verdict email, the D4 stakeholder quotes and the
   Analyst's notes.

   The disc IS the element and the photo sits on top of it, so a missing file,
   a failed load or an unmapped name degrades to initials with no layout shift
   (avatar() in app.js removes the img on error). The lab runs on venue wifi;
   a broken-image icon must never be possible.

   RULE 5: size is a property of the SURFACE, never of the person — the size
   class is passed by the caller and is identical for every portrait on a given
   screen. No border, no ring, no colour that could vary by problem, tier or
   outcome; the four SVPs must be indistinguishable in treatment. */
.pav{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;overflow:hidden;user-select:none;
  background:#1C1D1B;
  color:#fff;font-family:var(--disp);font-weight:700;letter-spacing:.02em;box-shadow:var(--sh-sm)}
.pav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pav.xs{width:22px;height:22px;font-size:9px}
.pav.sm{width:28px;height:28px;font-size:10.5px}
.pav.md{width:30px;height:30px;font-size:11px}
.pav.lg{width:40px;height:40px;font-size:14.5px}
.pav.xl{width:42px;height:42px;font-size:15px}
/* the filler inbox rows are departments, not people — no portrait, but the
   column is held so the subject lines still align down the list */
.pavgap{width:30px}
.mailrow .pav{margin-top:2px}
/* the Analyst's byline — the name under the note label, on the DP2 band and
   the DP3 sheets */
.anaby{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:none;
  color:var(--dim);line-height:1.35}
.anaby span{display:block;color:var(--faint)}
/* stacked, not a row: the label column is 126px and a side-by-side
   avatar leaves too little for the name to sit on one line */
.oa-by{display:block;margin-top:10px}
.oa-by .pav{display:flex;margin-bottom:6px}
.fsby{display:inline-flex;align-items:center;gap:6px;margin-left:10px;vertical-align:middle}
@media(max-width:700px){.oa-by{margin-top:6px}}
.startsteps{margin-top:10px}
.gsel{margin:28px auto 6px;max-width:520px}
.gsel .gk{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.gchips{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.gchip{font-family:var(--disp);font-size:15px;font-weight:700;cursor:pointer;background:var(--card);
  color:var(--ink);border:1px solid var(--strong);border-radius:var(--r-pill);padding:13px 26px;
  transition:border-color .16s var(--ease),box-shadow .2s var(--ease),transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.gchip:hover{border-color:var(--ink);transform:translateY(-2px)}
.gchip.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.resume{font-family:var(--mono);font-size:12px;color:var(--p3)}

/* debrief gates — holding screens */
.hold.gate .big{color:var(--ink)}
.lockrow{display:inline-block;margin:8px auto 16px;font-family:var(--mono);font-size:13px;
  color:var(--p1);background:var(--p1b);border:1px solid var(--accent-line);border-radius:var(--r-sm);
  padding:10px 18px;box-shadow:0 2px 8px rgba(38,137,13,.1)}
.locknote{display:inline-block;margin:0 0 18px;font-family:var(--mono);font-size:11.5px;color:var(--p3);
  background:var(--p3b);border:1px solid var(--accent-line);border-radius:4px;padding:6px 12px}
/* facilitator reopen form — hidden behind a click on the lock note; no visible
   affordance for participants (experience audit P0) */
.fu{display:inline-flex;gap:6px;align-items:center;margin-left:10px}
.fu input{font-family:var(--mono);font-size:11.5px;border:1px solid var(--strong);border-radius:3px;
  padding:3px 8px;width:130px;color:var(--ink)}
.fu input:focus{outline:none;border-color:var(--accent)}
.fu button{font-family:var(--mono);font-size:11px;background:#fff;color:var(--dim);
  border:1px solid var(--strong);border-radius:3px;padding:3px 10px;cursor:pointer}
.fu button:hover{color:var(--ink);border-color:var(--accent)}
.fu .fuwrong{font-size:10.5px;color:var(--bad)}

/* gate 3 — the one line of world pointing at the pilot filling into the top
   bar's timeline (the timeline itself moved there, 1 Aug 2026) */
.hold.gate .tlrun{font-size:13px;color:var(--dim);margin:2px auto 14px;max-width:56ch}

/* locked debrief panel (verdict) — waiting on the fifth release word */
.debrief.dblocked{display:flex;flex-direction:column;justify-content:center;min-height:260px;text-align:center}
.debrief.dblocked .gcode{margin-top:14px;align-self:center}

/* facilitator release word (audit F-06 — gates that actually gate) */
.gcode{margin-top:22px;display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.gcode label{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.02em}
.gcoderow{display:flex;gap:8px}
.gcoderow input{font-family:var(--mono);font-size:14px;border:1px solid var(--strong);
  border-radius:4px;padding:10px 14px;width:220px;color:var(--ink)}
.gcoderow input:focus{outline:none;border-color:var(--accent)}
.gcodewrong{font-family:var(--mono);font-size:11.5px;color:var(--p1)}
.gcodeok{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:12.5px;
  color:var(--accent-ink);background:var(--accent-bg);border:1px solid var(--accent);
  border-radius:4px;padding:8px 16px}
/* remote release (10 Aug 2026): the collapsed word-form disclosure on a synced
   laptop. Deliberately quiet — a text link, not a button: the release normally
   arrives on its own and this is only the spare key. */
.gdiscl{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11.5px;
  color:var(--faint);background:none;border:none;padding:4px 8px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.gdiscl:hover{color:var(--ink)}

/* app-level lock screen (8 Aug 2026) — the .hold card + the gate release-word
   form, narrowed so one field doesn't float in the full start-screen width */
.applock{max-width:620px;margin:24px auto 0;padding-bottom:52px}
.applock .locklead{margin-top:16px}
/* the session-code + password gate (10 Aug 2026): a short hint under the session
   field, a calm-amber offline warning when the code is left blank, and the
   Save/Cancel button row for session-edit mode */
.applock .gatehint{font-family:var(--body);font-size:12px;color:var(--faint);line-height:1.45;
  max-width:340px;text-align:center;margin-top:-2px}
.applock .gateoff{font-family:var(--body);font-size:12.5px;line-height:1.45;max-width:360px;
  text-align:center;color:#8a6d00;background:#FBF3D0;border:1px solid #E3C800;
  border-radius:4px;padding:9px 14px;margin-top:4px}
.applock .gatebtns{margin-top:4px}
/* Start-screen read-only session status (password-on case) — the sync line plus
   a quiet "change" link that reopens the gate */
.sessk{color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.sesschange{font-family:var(--mono);font-size:11px;color:var(--accent-ink);background:none;
  border:none;border-bottom:1px dashed var(--strong);padding:0 0 1px;cursor:pointer;letter-spacing:.02em}
.sesschange:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* D3 — pilot fact sheets: richer cards, 2-up */
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid.two{grid-template-columns:1fr}}
.sheet.fs .body{padding:18px 22px}
.sheet.fs .field .v{font-size:13px;line-height:1.55}
.fskpis{margin:3px 0 0;padding-left:18px}
.fskpis li{font-size:12.5px;margin:4px 0;line-height:1.5}
/* the scout's side-by-side comparison (2 Aug 2026) — collapsed by default,
   same chrome as the re-read panels so it reads as a reference, not a verdict */
/* the re-read panels cap their body at 76ch for prose; a five-column table
   needs the full width instead */
.reread.cmp{margin-bottom:16px}
.reread.cmp .rrbody{max-width:none}
.cmpby{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);margin-bottom:10px}
.cmpwrap{overflow-x:auto}
/* fixed layout with four equal scope columns: the four cards must be equally
   weighted on screen, and a long scope name must not widen its own column */
.cmptable{width:100%;min-width:760px;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.cmptable th,.cmptable td{border:1px solid var(--line-soft);padding:8px 10px;
  text-align:left;vertical-align:top;line-height:1.42}
.cmptable thead th{background:var(--panel-2)}
.cmptable .cmpsc{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.cmptable .cmpname{display:block;font-weight:600;margin-top:2px}
.cmptable th.rk{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);font-weight:400;width:19%;background:var(--panel-2)}
.cmptable tbody tr:nth-child(even) td{background:var(--panel-2)}

/* the deck-level objective — stated once above the four cards (2 Aug 2026) */
.deckobj{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:14px 18px;margin:0 0 16px}
.deckobj .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.deckobj p{margin:0;font-size:14px;line-height:1.5;font-weight:600}
.deckobj .sub{margin-top:6px;font-size:12px;color:var(--dim)}
/* the scannable skeleton (2 Aug 2026): lead line, then bullets. Every card
   renders the same shape so a group can read across the four, not down one. */
.fslead{margin:0;font-size:13px;line-height:1.55}
.fslead.none{color:var(--faint)}
.fsbul{margin:5px 0 0;padding-left:16px}
.fsbul li{font-size:12.5px;line-height:1.5;margin:3px 0;color:var(--dim)}
.fsmain{margin:0;font-size:13px;line-height:1.5;font-weight:600}
.fssub{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim)}

/* deck-vs-recap separation (dry-run feedback #16, 10 Aug 2026) -----------------
   The four scope cards ARE the decision; the two panels above them recall the
   prior stages. A tester read the whole screen as recap and skipped the cards.
   Fix is presentational: name the deck, group + mute the recaps, and give the
   live cards their own colour. No card content moves; identical on all four
   cards, so nothing leaks a tier (Rule 5). */
.reflabel{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:2px 0 8px}
.refrow{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.refrow .reread{flex:1 1 340px;margin:0}
@media(max-width:700px){.refrow .reread{flex:1 1 100%}}
/* accent header that opens the decision zone — the eyebrow tick marks where the
   recaps end and the choice begins */
.deckhead{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.01em;
  color:var(--accent-ink);margin:24px 0 13px;display:flex;align-items:center;gap:10px}
.deckhead::before{content:"";flex:0 0 auto;width:4px;height:19px;background:var(--accent);border-radius:2px}
/* the four fact sheets carry a faint accent cap + tinted head, so the live deck
   reads in a different colour from the grey recaps — same on every card */
.decisiondeck .sheet.fs{border-top:3px solid var(--accent)}
.decisiondeck .sheet.fs .head{background:var(--accent-bg)}

/* D4 — conclusion report */
.rs .rhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}
.rs .rtitle{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.01em}
.rs .rsub{font-size:13px;color:var(--dim);margin-top:4px}
.rs .rmeta{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right;line-height:1.5}
/* the analyst's note column (1 Aug 2026) — now carries full sentences rather
   than a three-word caveat, so it needs the width and a readable line height.
   Kept one step dimmer than the measured value: it is context, not the number. */
.rs td.note{color:var(--dim);font-size:12px;line-height:1.55;width:40%}
/* reading guide — frames how to read the report without judging any number */
.readguide{background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:var(--r-md);
  padding:13px 16px;font-size:13px;line-height:1.58;color:var(--dim);margin:0 0 20px}
.readguide b{color:var(--ink)}
.pathhead{font-family:var(--disp);font-size:20px;font-weight:700;margin:32px 0 12px;letter-spacing:-.01em}
.path .pl{font-family:var(--disp);font-size:16px;font-weight:600}
.path .pd{font-family:var(--body);font-size:12px;font-weight:400;color:var(--dim);margin-top:7px;line-height:1.5}
.path.chosen .pd{color:#C4D6B6}
.path.islocked{cursor:default}

/* glossary — dotted terms with a floating tooltip (element #glosstip is
   positioned by app.js so card overflow can never clip it) */
.gl{border-bottom:1px dotted var(--faint);cursor:help;transition:background .12s var(--ease),border-color .12s var(--ease)}
.gl:hover,.gl:focus{border-bottom-color:var(--accent);outline:none;background:var(--accent-bg);border-radius:2px}
#glosstip{display:none;position:fixed;z-index:90;background:#111;color:#fff;
  font-family:var(--body);font-size:12.5px;line-height:1.5;padding:10px 13px;border-radius:3px;max-width:320px;
  box-shadow:0 12px 32px rgba(0,0,0,.3);pointer-events:none;border:1px solid rgba(255,255,255,.08)}
/* on its own quiet line since the 12 Aug revamp: rendered inline it merged
   into the lead sentence once the mono voice was retired */
.glhint{display:block;margin-top:5px;font-size:11.5px;color:var(--faint)}

/* re-read panels (D2/D3) — the committed artifacts, one click away */
/* collapsible controls come in TWO identities so a participant can tell a
   prior-stage recall apart from a live decision aid (Matheus, 10 Aug 2026 —
   the muted single-colour treatment made the scout's comparison look like just
   another re-read, and read too close to the page):
     .reread       — RECALL: prior-stage recaps. A defined grey button that
                     clearly reads as clickable but stays secondary.
     .reread.cmp   — AID: the scout's live side-by-side. A strong accent
                     call-to-open, sitting inside the decision zone.
   Both share the disclosure chevron + body styles below. */
.reread{margin:0 0 16px;background:var(--card);border:1px solid var(--strong);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:border-color .14s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.reread:hover{border-color:var(--accent);box-shadow:var(--sh-md)}
.reread>summary{cursor:pointer;padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--dim);
  display:flex;align-items:flex-start;gap:10px;list-style:none;
  transition:color .14s var(--ease),background .14s var(--ease)}
.reread>summary::-webkit-details-marker{display:none}
.reread>summary::before{content:"›";flex:0 0 auto;color:var(--accent);font-weight:700;font-size:15px;
  line-height:1.2;transition:transform .16s var(--ease)}
.reread[open]>summary::before{transform:rotate(90deg)}
.reread>summary:hover{color:var(--ink);background:var(--panel)}
.reread[open]>summary{border-bottom:1px solid var(--line-soft);color:var(--ink);background:var(--panel)}
/* AID variant — the scout's comparison, coloured to invite the click and to
   read clearly apart from the grey recall buttons. Not muted, not a recap. */
.reread.cmp{background:var(--accent-bg);border:1.5px solid var(--accent)}
.reread.cmp:hover{border-color:var(--accent-ink);box-shadow:var(--sh-green)}
.reread.cmp>summary{flex-direction:column;gap:3px;padding:13px 18px}
.reread.cmp>summary::before{position:absolute;left:18px;top:14px;color:var(--accent-ink)}
.reread.cmp>summary{position:relative;padding-left:38px}
.reread.cmp[open]>summary{border-bottom-color:var(--accent-line);background:transparent}
.reread.cmp .cmpq{font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--accent-ink);
  letter-spacing:0;line-height:1.4}
.reread.cmp .cmphint{font-family:var(--body);font-size:12px;font-weight:400;color:var(--dim);
  letter-spacing:0;line-height:1.45}
.reread .rrbody{padding:18px 22px;max-width:76ch}
.reread .rrbody p{margin:0 0 12px;font-size:13.5px;color:var(--dim);line-height:1.6}
.reread .rrbody .mbul{margin:0 0 12px;padding-left:20px}
.reread .rrbody .mbul li{font-size:13.5px;color:var(--dim);margin:4px 0}
.rrname{font-family:var(--disp);font-size:15px;font-weight:700}
.rrtag{font-family:var(--body);font-size:12.5px;font-weight:400;color:var(--faint);margin-left:6px}
.rrfacts{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:pre-line;margin:4px 0 12px;line-height:1.5}
.rrfact{display:grid;grid-template-columns:190px 1fr;gap:10px;font-size:13px;color:var(--dim);
  padding:7px 0;border-top:1px solid var(--line-soft)}
.rrfact .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding-top:2px}
@media(max-width:620px){.rrfact{grid-template-columns:1fr}}

/* D4 — success criteria agreed at scoping (report recap block) */
.agreed{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:15px 18px;margin:0 0 20px}
.agreed .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px}
.agreed ul{margin:0;padding-left:18px}
.agreed li{font-size:12.5px;color:var(--dim);margin:4px 0}
/* labelled rows (1 Aug 2026) — the scoping terms used to run together in one
   paragraph. Same grid as the D2/D3 re-read panel's .rrfact, so the two recap
   surfaces read as one family. */
.agreed .agrow{display:grid;grid-template-columns:170px 1fr;gap:12px;
  padding:8px 0;border-top:1px solid var(--line-soft)}
.agreed .agrow:first-of-type{border-top:0;padding-top:2px}
.agreed .agrow .ak{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding-top:3px}
.agreed .agrow .av{font-size:12.5px;color:var(--dim);line-height:1.55}
@media(max-width:620px){.agreed .agrow{grid-template-columns:1fr;gap:4px}}

/* D4 — stakeholder read-outs at the foot of the report (31 Jul 2026).
   Deliberately UNIFORM: no marks, no colour, no visual ordering by agreement.
   Three colleagues look identical on the page whether they agree or not, so
   the styling can never hint at how decidable the sheet is (Rule 5). */
.voices{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft)}
.voices .vhead{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.voices .vsub{font-size:12px;color:var(--faint);margin-bottom:16px}
.voice{margin:0 0 14px;padding:13px 16px;background:var(--panel-2);
  border-left:2px solid var(--line);border-radius:0 var(--r-md) var(--r-md) 0}
.voice:last-child{margin-bottom:0}
.voice p{margin:0;font-size:13px;line-height:1.62;color:var(--ink)}
.voice cite{display:flex;align-items:center;gap:9px;margin-top:11px;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.voice cite b{font-weight:700}
.voice cite .vrole{color:var(--faint)}
.voice cite .vrole::before{content:"· "}

/* gate 4 — the reaction beat; thin by design, hands off to the sponsor */
.g4beat{margin:18px auto 4px;max-width:56ch;text-align:left}
.g4beat p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--dim)}
.g4beat .g4hand{color:var(--faint);font-style:italic}

/* CINO adoption arc (11 Aug 2026) — now on the SHARED inbox window (mailboxShell).
   The window renders inside the centred .hold gate card, so the gate's centred,
   dimmed, 60ch-clamped text rules must be neutralised for the mail surface. */
.cinolead{font-size:13px;color:var(--dim);margin:20px 0 10px;text-align:left}
.hold .cinolead{max-width:none}
.hold .mailapp{text-align:left;margin-top:6px}          /* undo .hold text-align:center */
.hold .mailbody p{color:var(--ink);max-width:none;margin:0 0 15px}  /* undo .hold p leak */
.hold .mailbody .sig{color:var(--dim)}
.hold .mpane-empty{color:var(--faint)}
.mh-cc{font-size:12px;color:var(--faint);margin-top:4px;font-family:var(--mono)}
.mh-to + .mh-cc{margin-top:2px}
/* gate & verdict inboxes hold short content — let them grow (the screen
   scrolls), unlike the D1 inbox whose long list scrolls inside the pane. */
.hold .mlist,.hold .mpane,.vmail .mlist,.vmail .mpane{max-height:none}
/* the verdict on the shared window: notes attachment lives in the reading pane;
   the debrief panel now sits full-width below the window (was a side column). */
.vmail{margin-top:4px}
.vmail + .debrief{margin-top:18px;display:block}

/* screen 10 — the verdict */
.vgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start}
@media(max-width:960px){.vgrid{grid-template-columns:1fr}}
.mail.verdict .mailbody{max-width:80ch}

/* screen 10 — decision debrief panel */
.debrief{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-md)}
.debrief .dbhead{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.01em}
.debrief .dbsub{font-size:12.5px;color:var(--faint);margin:5px 0 14px}
.dbsec{border-top:1px solid var(--line-soft);padding:14px 0 10px}
/* G5 (14 Aug 2026): the positive-spine block — same chrome as the sections,
   set apart only by a quiet accent rule so it reads as a summary, not a fifth
   decision. */
.dbsec.dbwins{border-top:2px solid var(--p1)}
.dbsec.dbwins .dbstep{color:var(--p1)}
.dbtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.dbstep{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.dbreveal{font-family:var(--mono);font-size:10.5px;font-weight:600;border-radius:4px;padding:3px 9px;border:1px solid}
.dbreveal.ok{color:var(--p3);background:var(--p3b);border-color:var(--accent-line)}
.dbreveal.mid{color:#8a6d00;background:#FBF3D0;border-color:#E3C800}
.dbreveal.bad{color:var(--bad);background:#FBEAE8;border-color:#EFB4AE}
.dbchose{font-size:12.5px;color:var(--dim);margin:6px 0 8px}
.dbrow{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:5px 0}
.dbrow .dbmark{font-size:12px;text-align:center;padding-top:1px}
.dbrow.ok .dbmark{color:var(--p1)}
.dbrow.mid .dbmark{color:#B58A00}
.dbrow.bad .dbmark{color:var(--bad)}
.dbrow .dbtext{font-size:12.5px;color:var(--dim);line-height:1.55}
.dbrow .dbtext b{color:var(--ink);font-weight:600}
.debrief .dbfoot{font-size:11px;color:var(--faint);border-top:1px solid var(--line-soft);
  margin:10px 0 0;padding-top:10px;font-style:italic}
/* the verdict screen's two numeric meters were REMOVED on 2 Aug 2026
   (Matheus): the persistent top bar carries both instruments, and a 0-100
   sponsor number is an engine construct that means nothing to a participant.
   Their rules are gone with them so nothing can quietly re-render them. */

/* the analyst's note inside the timeline bubble (Matheus, 1 Aug 2026) —
   one narrator across the app, so this carries the same label as the D2
   one-pagers and the D4 report. Observations get a quiet ok/not mark; the
   words themselves never say "good" or "bad". */
#phtip .ptk{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:#9aa094;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
/* the narrator's byline inside the bubble (Matheus, 2 Aug 2026) — the same
   portrait and role line the DP2 band and DP3 sheets carry, so the analyst is a
   character wherever he speaks. On this one surface the name and role sit on a
   single row: the bubble is 340px at most and the notes below it are the point,
   so the byline may not take two lines away from them. Colours are overridden
   because .anaby is authored for light panels. */
#phtip .ptby{display:flex;align-items:center;gap:8px;margin-top:7px}
#phtip .ptby .anaby{color:#e9ebe5;display:flex;align-items:baseline;gap:6px}
#phtip .ptby .anaby span{display:inline;color:#9aa094}
#phtip .ptby .anaby span::before{content:"· "}
#phtip .ptby .pav{box-shadow:none;border:1px solid rgba(255,255,255,.14)}
#phtip ul{margin:6px 0 0;padding:0;list-style:none}
#phtip li{position:relative;margin:5px 0;padding-left:15px;font-size:12px;line-height:1.45;color:#e4e6e0}
#phtip li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:10px}
#phtip li.ok::before{content:"✓";color:var(--brand-green)}
#phtip li.mid::before{content:"△";color:var(--tl-warn-2)}
#phtip li.bad::before{content:"✗";color:#ff8d84;font-weight:700}

/* --- the takeaway, foot of the debrief panel (10 Aug 2026, dry-run #7a) ------
   The lesson leads and the comparison is evidence under it, so the type scale
   runs the other way from the sections above: a display-weight claim first,
   body prose, the practice note in the brand's accent, then the table at the
   panel's smallest size. */
.tkblock{margin-top:20px;border-top:2px solid var(--line);padding-top:18px}
.tkeyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:7px}
.tkhead{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.015em;
  line-height:1.28;margin-bottom:10px;text-wrap:balance}
.tkbody{font-size:12.5px;line-height:1.62;color:var(--dim);margin:0 0 9px}
.tkprac{font-size:12.5px;line-height:1.62;color:var(--ink);margin:12px 0 0;
  background:var(--accent-bg);border:1px solid var(--accent-line);
  border-radius:var(--r-sm);padding:11px 13px}
.tkprac b{color:var(--accent-ink)}
.tkevidlbl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 7px}
.tktable{border:1px solid var(--line-soft);border-radius:var(--r-sm);overflow:hidden}
.tkbanner{background:var(--panel-2);padding:9px 11px;font-size:12px;font-weight:600;
  border-bottom:1px solid var(--line-soft)}
.tkrow{display:grid;grid-template-columns:56px 1fr 1fr;gap:10px;padding:8px 11px;
  border-bottom:1px solid var(--line-soft);font-size:12px;line-height:1.45;align-items:start}
.tkrow:last-child{border-bottom:0}
.tkrow .tkd{font:600 10px/1.6 var(--mono);color:var(--faint);letter-spacing:.03em}
.tkrow.tkcap{background:var(--panel);font:600 9.5px/1.6 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tkrow .tkb{border-left:1px solid var(--line-soft);padding-left:10px}
.tkchip{font-size:10px !important;padding:1px 6px !important;margin-left:3px;vertical-align:1px}
.tkrow.tksum{background:var(--panel)}
.tkrow.tksum b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;margin-bottom:1px}
.tkrow.tksum span{display:block;font-size:11.5px;color:var(--dim)}
.tksame{font-size:12.5px;line-height:1.6;color:var(--ink);margin:16px 0 0;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px}
.tkthesis{font-size:12px;line-height:1.6;color:var(--ink);margin:14px 0 0;padding-left:12px;
  border-left:3px solid var(--p1);font-style:italic}
/* the comparison visual (14 Aug 2026): two markers on the sponsor stance
   scale — reusing the meter bar's .sprow/.spzone construction so zones and
   thresholds can never diverge — plus a weeks-vs-weeks bar. Marker colours:
   ink = this group's run, accent = the best run the same problem allowed. */
.tkviz{margin:14px 0 0}
.tkvizlbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:12px 0 5px}
.tkviz .tkvizlbl:first-child{margin-top:0}
.tkscale{margin-top:8px}
.tkpt{position:absolute;top:-5px;bottom:-2px;width:2px;border-radius:1px;
  transform:translateX(-1px);pointer-events:auto}
.tkpt::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent}
.tkpt.me{background:var(--ink)}
.tkpt.me::before{border-top:5px solid var(--ink)}
.tkpt.best{background:var(--accent-ink)}
.tkpt.best::before{border-top:5px solid var(--accent-ink)}
.tklegend{display:flex;align-items:center;gap:6px;margin-top:6px;
  font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.tksw{display:inline-block;width:9px;height:9px;border-radius:2px}
.tksw.me{background:var(--ink)}
.tksw.best{background:var(--accent-ink);margin-left:12px}
.tkwrow{display:grid;grid-template-columns:110px 1fr 74px;gap:9px;align-items:center;
  margin-top:5px;font-size:11px;color:var(--dim)}
.tkwrow span{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em}
.tkwrow b{font-family:var(--disp);font-size:12.5px;color:var(--ink);text-align:right}
.tkwtrack{height:9px;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:5px;overflow:hidden}
.tkwbar{height:100%;border-radius:4px}
.tkwbar.me{background:var(--ink)}
.tkwbar.best{background:var(--accent-ink)}
/* inline analyst-note card (Matheus, 10 Aug 2026 — OQ-22): the timeline hover's
   content, surfaced where a shared laptop's room reads it — on each gate for
   the phase just closed, and on the D4 report for the pilot. Light-panel twin
   of #phtip's note list; same marks, same narrator byline. */
.anotecard{max-width:62ch;margin:6px 0 20px;padding:15px 18px 16px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brand-green);
  border-radius:var(--r-md)}
.hold.gate .anotecard{margin:6px auto 20px}      /* centred on the centred gate screen */
.anotecard.anwide{max-width:none}                /* D4: match the full width of the report below it */
.anotecard .anlead{margin-bottom:13px}
.anotecard .anhh{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);line-height:1.2}
.anotecard .ansub{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.anotecard .anh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.anotecard .anph{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink)}
.anotecard .anph span{font-weight:400;color:var(--faint);font-size:12px}
.anotecard .anst{font-family:var(--mono);font-size:10px;color:var(--brand-green-dark);white-space:nowrap}
.anotecard .ank{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:11px}
.anotecard .anby{display:flex;align-items:center;gap:8px;margin-top:6px}
.anotecard .anby .anaby{display:flex;align-items:baseline;gap:6px;color:var(--dim)}
.anotecard .anby .anaby span{display:inline;color:var(--faint)}
.anotecard .anby .anaby span::before{content:"· "}
.anotecard .anlist{margin:11px 0 0;padding:0;list-style:none}
.anotecard .anlist li{position:relative;margin:7px 0;padding-left:18px;font-size:13.5px;
  line-height:1.5;color:var(--ink)}
.anotecard .anlist li::before{position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11px}
.anotecard .anlist li.ok::before{content:"✓";color:var(--brand-green-dark)}
.anotecard .anlist li.mid::before{content:"△";color:var(--tl-warn)}
.anotecard .anlist li.bad::before{content:"✗";color:var(--tl-bad);font-weight:700}

/* row #4 · the causal clause folded into the colour key (10 Aug 2026) */
.tlkeywhy{flex-basis:100%;width:100%;text-align:right;white-space:normal;
  margin-top:5px;margin-left:0;font-style:italic;color:var(--faint)}