/* ============================================================
   Decomposition v3 — holistic deslop.media standing page.
   Page-specific styling. Loaded after deslop-tokens.css + pyramid.css.
   Mobile-first + in-app-browser hardened (solid fallbacks behind every
   backdrop-filter; no exotic features; one easing, one motion).
   ============================================================ */

/* value-chain ramp (READ B) — frontier off-white → dark. NEVER per-layer hue. */
:root {
  --ramp-1: rgba(232,230,225,0.82);   /* AI Labs — frontier, lightest */
  --ramp-2: rgba(186,192,202,0.74);   /* Hyperscalers */
  --ramp-3: rgba(120,128,140,0.42);   /* Chips */
  --ramp-4: rgba(70,80,94,0.42);      /* None — darkest */
  --residual: rgba(138,143,152,0.16); /* unmatched mass — hatched void */
  --tick-up: var(--color-text);
  --tick-flat: var(--color-text-secondary);
  --tick-down: var(--coral);
}

/* ── sticky chrome + the editorial ticker tape ───────────────── */
.px-top__row { gap: 18px; }
.px-top__brandmid { display: flex; align-items: center; gap: 16px; min-width: 0; }
.px-top__mid { white-space: nowrap; }

.ticker { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.tick { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; }
.tick__name { color: var(--color-text-tertiary); }
.tick__glyph { width: 0; height: 0; }
.tick--up .tick__glyph   { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--tick-up); }
.tick--down .tick__glyph { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--tick-down); }
.tick--flat .tick__glyph { width: 8px; height: 2px; background: var(--tick-flat); border: 0; }
.tick--up .tick__dir   { color: var(--tick-up); }
.tick--down .tick__dir { color: var(--tick-down); }
.tick--flat .tick__dir { color: var(--tick-flat); }
.tick__sep { color: var(--color-border); }
@media (max-width: 1080px) { .ticker .tick__name { display: none; } }
@media (max-width: 860px)  { .px-top__mid { display: none; } }
@media (max-width: 600px)  { .ticker { gap: 10px; } .tick { font-size: 9px; gap: 5px; } }

/* ── article shell ───────────────────────────────────────────── */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

.hd { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: baseline; padding: 0 0 22px; border-bottom: 1px solid var(--color-border); margin: 0 0 28px; }
.hd__ix { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-volt); }
.hd__t { font-family: var(--font-editorial); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.hd__sub { display: block; margin-top: 9px; font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; max-width: 64ch; letter-spacing: 0; }
@media (max-width: 760px) { .hd { grid-template-columns: 1fr; gap: 10px; } .hd__t { font-size: 24px; } }

.sec { padding-top: 46px; padding-bottom: 46px; }
.sec--rule { border-top: 1px solid var(--color-border-subtle); }

/* ── HERO intro ──────────────────────────────────────────────── */
.lede { max-width: 1320px; margin: 0 auto; padding: 40px 32px 4px; }
.lede__kick { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-secondary); display: flex; align-items: center; gap: 10px; }
.lede__kick::before { content: ""; width: 22px; height: 1px; background: var(--color-volt); }
.lede h1 { font-family: var(--font-editorial); font-size: clamp(30px, 5.4vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; margin: 18px 0 16px; max-width: 18ch; }
.lede p { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.66; color: var(--color-text-secondary); max-width: 72ch; }
.lede p b { color: var(--color-text); font-weight: 500; }
@media (max-width: 640px) { .lede { padding: 26px 18px 4px; } }
/* A1 mobile subtitle — hidden on desktop, replaces verbose dek on mobile */
.lede__m{ display:none; }
@media (max-width:640px){
  .lede > p:not(.lede__m){ display:none; }
  .lede__m{ display:block;font-size:14px;line-height:1.5;color:var(--color-text-secondary); }
}

/* ── THE TWO READS ───────────────────────────────────────────── */
/* ── THE READING INSTRUMENT — three reads as one stacked unit ── */
.instrument { max-width: 1256px; width: calc(100% - 64px); margin: 22px auto 0; padding: 16px 20px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(26,34,48,0.30), rgba(26,34,48,0.0)); }
@media (max-width: 640px) { .instrument { padding: 14px 14px 16px; margin: 16px 14px 0; } }
.instrument__bar { display: flex; align-items: center; justify-content: space-between; gap: 9px 12px; flex-wrap: nowrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); }
/* TASK 6a — CASCADE controls-bar occlusion. The site header (.px-top) is sticky
   (top:0, 49px, z-index 60). In the CASCADE view the instrument is in normal flow
   and NOT in the armed takeover (body is not .is-armed here), so when the reader
   scrolls the static controls bar slides UNDER the header and its top row (the
   Speedometer|Cascade toggle + Replay) becomes unclickable. Pin the bar just below
   the header with an opaque backdrop so the controls always clear it. Scoped to the
   cascade view only — the speedometer/armed paths (which animate .instrument__bar
   opacity) are untouched. The bg bleeds to the instrument edges (negative inline
   margins offset by the instrument's 20px padding) so nothing shows through. */
.instrument[data-view="cascade"] .instrument__bar {
  position: sticky; top: 48px; z-index: 50;
  margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; padding-top: 6px;
  background: #121a25; border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
}
@media (max-width: 640px) {
  /* the instrument's side padding tightens to 14px on mobile — match the bleed. */
  .instrument[data-view="cascade"] .instrument__bar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}
.instrument__lead { display: flex; align-items: center; gap: 11px; flex-wrap: nowrap; }
.instrument__ctrls { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
@media (max-width: 1010px) { .instrument__bar, .instrument__lead, .instrument__ctrls { flex-wrap: wrap; } }
.instrument__title { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; }

/* shared segmented controls (view · source · evidence) */
.segseg, .viewsw { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.segbtn { appearance: none; border: 0; border-right: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 9px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); position: relative; white-space: nowrap; }
.segbtn:last-child { border-right: 0; }
.segbtn:hover:not([data-soon]) { color: var(--color-text); background: rgba(255,255,255,0.04); }
.segbtn[data-on="1"] { background: var(--color-text); color: var(--color-bg); font-weight: 600; }
.segbtn[data-soon] { opacity: 0.45; cursor: default; }
.segbtn[data-soon]::after { content: "soon"; position: absolute; top: 2px; right: 3px; font-size: 5.5px; letter-spacing: 0.08em; color: var(--color-agent-gated); }
.ctl { display: inline-flex; align-items: center; gap: 7px; }
.ctl__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: 6px; }
.ctl__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-volt); animation: px-pulse 2s var(--ease) infinite; }
body[data-motion="off"] .ctl__dot { animation: none; }
/* the evidence control is the live one — active state gets a Volt underline cue */
.ctl__lbl[hidden], .segseg[hidden] { display: none !important; }
.ctl--ev .segbtn[data-on="1"] { box-shadow: inset 0 -2px 0 0 var(--color-volt); }
@media (max-width: 720px) { .instrument__ctrls { gap: 12px; } .ctl__lbl { display: none; } .ctl--ev .ctl__lbl { display: inline-flex; } }
@media (max-width: 520px) { .segbtn { padding: 6px 8px; } }

/* one-expert dropdown */
.exprsel { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.exprsel[hidden] { display: none; }
.exprsel__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); }
.exprsel select { appearance: none; -webkit-appearance: none; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 11.5px; padding: 6px 26px 6px 10px; cursor: pointer; max-width: 220px; }
.exprsel select:hover { border-color: var(--color-text-tertiary); }
.exprsel::after { content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-secondary); font-size: 9px; }

/* ── the read rail — engraved instrument-annotation labels ──── */
.instrument__grid { display: grid; grid-template-columns: 178px 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .instrument__grid { grid-template-columns: 1fr; gap: 12px; } }
.rail { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
@media (max-width: 760px) { .rail { flex-direction: row; flex-wrap: wrap; gap: 18px 26px; padding-top: 0; } }
.rtag { position: relative; padding: 4px 18px 6px 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.rtag::after { content: ""; position: absolute; right: -18px; top: 12px; width: 16px; height: 1px; background: var(--color-border); transition: background var(--dur) var(--ease); }
.rtag::before { content: ""; position: absolute; right: -19px; top: 9px; width: 2px; height: 7px; background: var(--color-volt); }
.rtag:hover::after { background: var(--color-text-secondary); }
@media (max-width: 760px) { .rtag::after, .rtag::before { display: none; } }
.rtag__ix { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-tertiary); }
.rtag__nm { font-family: var(--font-editorial); font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--color-text); line-height: 1.08; }
.rtag:hover .rtag__nm { color: var(--color-volt); }
.rtag__val { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; }
.rtag__val b { font-family: var(--font-editorial); font-size: 13px; letter-spacing: -0.01em; color: var(--color-volt); font-weight: 700; text-transform: none; }
@media (min-width: 761px) { .rtag--c { margin-top: 62px; } }
.reads { max-width: 100%; margin: 0; padding: 4px 0 2px; }
@media (max-width: 640px) { .reads { padding: 4px 0; } }
.readhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--color-border); padding-bottom: 9px; }
.readhead__i { display: flex; align-items: baseline; gap: 11px; min-width: 0; }
.readhead__i--b { justify-content: flex-end; text-align: right; }
.rh__ix { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--color-text-tertiary); }
.rh__nm { font-family: var(--font-editorial); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; }
.rh__read { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); display: inline-flex; align-items: baseline; gap: 7px; }
.rh__read b { font-family: var(--font-editorial); font-size: 14px; letter-spacing: -0.01em; color: var(--color-volt); font-weight: 700; }
.rh__conf { display: inline-flex; align-items: center; gap: 6px; }
.confglyph { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.confglyph i { width: 2px; background: var(--color-text-secondary); border-radius: 0.5px; }
@media (max-width: 760px) { .rh__nm { font-size: 15px; } .readhead__i .rh__read { display: none; } }

.readcap { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); text-align: center; margin: 9px auto 0; max-width: 94ch; line-height: 1.5; }
@media (max-width: 760px) { .readcap { display: none; } }

/* the dial container — rotating curved bands (wide) */
.dial { position: relative; width: 100%; margin-top: 2px; }

/* ── B′ SKYLINE hero (2026-06-03) — the dial now hosts one clean SVG skyline.
   Clean steel bars, volt top-caps, a thin needle, a floor plinth, one shared
   legend, a quiet machine channel — the ratified contested read. No crown. */
.dial--skyline { perspective: none; margin-top: 6px; }
.dial--skyline .sky { width: 100%; height: auto; display: block; overflow: visible; }
.dial--skyline .ptr, .dial--skyline .stack-cap, .dial--skyline .dial__string { display: none; }
.seg { position: absolute; left: 0; top: 0; box-sizing: border-box; overflow: hidden; cursor: pointer;
  background: rgba(30,40,54,0.72); padding: 14px 13px 9px;
  transition: transform 0.82s var(--ease), width 0.82s var(--ease), height 0.82s var(--ease),
    clip-path 0.82s var(--ease), opacity 0.55s var(--ease), background var(--dur) var(--ease); }
body[data-motion="off"] .seg, body.no-anim-init .seg { transition: none; }
.seg:hover { background: rgba(42,54,70,0.96); z-index: 30 !important; }
.seg__in { position: relative; z-index: 1; padding-top: 3px; }
.seg__ix { font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); }
.seg__nm { font-family: var(--font-editorial); font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.08; font-size: 13px; margin-top: 2px; }
.seg--win .seg__nm { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.seg__desc { font-size: 10.5px; line-height: 1.34; color: var(--color-text-secondary); margin-top: 6px; display: none; max-width: 30ch; }
.seg.is-narrow .seg__nm { font-size: 11px; }
/* tiny-segment fallback — when a label can't fit, show only the index rule */
.seg.is-tiny .seg__nm, .seg.is-tiny .seg__desc { display: none; }
.seg.is-tiny .seg__ix { font-size: 11px; color: var(--color-text-secondary); }
/* a soft bevel sheen so the bands read as a physical rotating bezel */
.rail-content { overflow-x: hidden; }
.dial { perspective: 1600px; }
.dial__string, .pace__string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.dial--stack .dial__string { display: none; }
.seg:not(.seg--residual)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(176deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.12) 100%); }
.dial--stack .seg::after { display: none; }
/* stacked-mode explainer */
.stack-cap { display: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--color-text-tertiary); line-height: 1.55; padding: 0 0 10px; }
.dial--stack .stack-cap { display: block; }

/* ── modal treatment (scenario band) — the hero read ──────────── */
/* default · ACCENT: Volt label + tinted dark + top rule + taller + description */
.seg.modal:not(.seg--win) { background: rgba(206,255,0,0.07); border-top: 2px solid var(--color-volt); }
.seg.modal:not(.seg--win) .seg__ix,
.seg.modal:not(.seg--win) .seg__nm { color: var(--color-volt); }
.seg.modal:not(.seg--win) .seg__nm { font-size: 17px; }
.seg.modal:not(.seg--win) .seg__desc { display: block; color: var(--color-text); }
/* FILL: solid Volt block (canon-breaking; offered as an experiment via Tweak) */
body[data-modalstyle="fill"] .seg.modal:not(.seg--win) { background: var(--color-volt); border-top: none; }
body[data-modalstyle="fill"] .seg.modal:not(.seg--win) .seg__ix,
body[data-modalstyle="fill"] .seg.modal:not(.seg--win) .seg__nm,
body[data-modalstyle="fill"] .seg.modal:not(.seg--win) .seg__desc { color: var(--color-bg); }
/* NEUTRAL: quiet lift, Volt label only (the prior canon default) */
body[data-modalstyle="neutral"] .seg.modal:not(.seg--win) { background: rgba(40,50,64,0.96); border-top: none; }
body[data-modalstyle="neutral"] .seg.modal:not(.seg--win) .seg__desc { display: none; }
body[data-modalstyle="neutral"] .seg.modal:not(.seg--win) .seg__nm { font-size: 14px; }
/* winner modal: marked with a Volt top-rule; label stays legible on the ramp */
.seg--win.modal { box-shadow: inset 0 2.5px 0 0 var(--color-volt); }
/* "Other" (no clean winner) as modal — a deny-like coral read, not an empty default */
.seg--win.modal.win-none { box-shadow: inset 0 2.5px 0 0 var(--coral); }
/* winner band: gray value-chain ramp (lightness = chain position, width = share) */
.seg--win { background: var(--ramp-2); }
.seg--win .seg__ix, .seg--win .seg__nm { color: var(--color-bg); mix-blend-mode: normal; }
.seg--win[data-ramp="1"] { background: var(--ramp-1); }
.seg--win[data-ramp="2"] { background: var(--ramp-2); }
.seg--win[data-ramp="3"] { background: var(--ramp-3); }
.seg--win[data-ramp="4"] { background: var(--ramp-4); }
.seg--win[data-ramp="3"] .seg__ix, .seg--win[data-ramp="3"] .seg__nm,
.seg--win[data-ramp="4"] .seg__ix, .seg--win[data-ramp="4"] .seg__nm { color: var(--color-text); }
.seg--win.modal .seg__nm { color: var(--color-volt); }
.seg--win:hover { filter: brightness(1.12); }

/* the fixed apex pointer */
.ptr { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; z-index: 40; }
.ptr b { font-family: var(--font-mono); font-size: 7.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-volt); white-space: nowrap; }
.ptr i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--color-volt); }

/* stacked-ladder layout (narrow / max-compat) */
.dial--stack { position: relative; display: flex; flex-direction: column; gap: 4px; }
.dial--stack .seg { position: static; clip-path: none !important; opacity: 1 !important; height: auto !important; width: 100% !important; display: grid; grid-template-columns: 1fr minmax(0, 44%); align-items: center; gap: 10px; padding: 9px 12px; }
.dial--stack .seg__in { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dial--stack .seg__desc { display: none !important; }
.dial--stack .lad { width: var(--lad, 30%); height: 8px; background: rgba(206,255,0,0.30); justify-self: start; min-width: 6px; transition: width 0.6s var(--ease); }
.dial--stack .ptr { display: none; }
.dial--stack .seg.modal .lad { background: var(--color-volt); }
.dial--stack .seg--win .lad { background: var(--ramp-2); }
.dial--stack .seg--win[data-ramp="1"] .lad { background: var(--ramp-1); }
.dial--stack .seg--win[data-ramp="3"] .lad { background: var(--ramp-3); }
.dial--stack .seg--win[data-ramp="4"] .lad { background: var(--ramp-4); }
.dial--stack .seg { background: rgba(26,34,48,0.5); border-left: 2px solid transparent; }
.dial--stack .seg.modal { border-left-color: var(--color-volt); background: rgba(30,40,54,0.85); }
.dial--stack .seg--win { background: rgba(26,34,48,0.5); }
.lad-residual { opacity: 0.7; }
.lad-residual .lad { background-image: repeating-linear-gradient(45deg, var(--residual) 0 1px, transparent 1px 5px) !important; background-color: transparent !important; }
.stack-band-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 12px 0 5px; display: none; }
.dial--stack .stack-band-lbl { display: block; }

.descend { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 12px; }
.descend__l { width: 1px; height: 18px; background: linear-gradient(180deg, transparent, var(--color-text-tertiary)); }
.descend__i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-text-tertiary); }
.descend b { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); font-weight: 500; }

/* residual wedge (rotating layout) */
.seg--residual { background: transparent; background-image: repeating-linear-gradient(45deg, var(--residual) 0 1px, transparent 1px 6px); border: 1px dashed var(--color-border); }
.seg--residual .seg__nm { color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.seg--residual .seg__ix { color: var(--color-text-tertiary); }
body[data-residual="off"] .seg--residual { display: none; }
/* residual legibility floor (delta §4.6): at v3.0-final the residual shrinks
   ~3× (0.12 vs the prototype's ~0.96). Hold a min readable width so its label
   never collapses, even when its weight would push it under the tiny threshold. */
.seg--residual { min-width: 78px; }
.seg--residual.is-tiny .seg__nm { display: block; }

/* divergence channel (delta §4.3): informational glyph where Path A / Path B
   diverge ≥0.15. NOT a modal/signal mark — uses chrome color, never Volt or
   coral (those are reserved for hold/deny/modal). Tap-to-open; never a gate. */
.seg__diverge {
  position: absolute; top: 6px; right: 6px; z-index: 26;
  width: 17px; height: 17px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(16,24,32,0.7); border: 1px solid var(--color-border);
  border-radius: 50%; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.seg__diverge:hover { color: var(--color-text); border-color: var(--color-text-secondary); }
.seg.is-tiny .seg__diverge { display: none; }

/* ── THE PACE STRIP (required net-new element) ───────────────── */
.pace { max-width: 100%; margin: 14px 0 0; padding: 0; }
@media (max-width: 640px) { .pace { padding: 0; } }
.pace__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pace__ix { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); }
.pace__read { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); display: inline-flex; gap: 7px; align-items: baseline; }
.pace__read b { font-family: var(--font-editorial); font-size: 13px; color: var(--color-volt); font-weight: 700; letter-spacing: -0.01em; }
.pace__track { position: relative; padding-bottom: 16px; }
.pace__cells { display: flex; height: 40px; gap: 0; border: 1px solid var(--color-border); background: linear-gradient(90deg, rgba(40,50,64,0.04) 0%, rgba(120,134,156,0.20) 100%); }
/* arc mode — the pace becomes a thin third curved band matching the dials */
.pace__cells--arc { display: block; position: relative; height: auto; border: none !important; background: transparent !important; }
.pace__cells--arc .pcell { box-sizing: border-box; padding: 0; border: 0 !important; transition: transform 0.82s var(--ease), width 0.82s var(--ease), height 0.82s var(--ease), clip-path 0.82s var(--ease), opacity 0.7s var(--ease), background var(--dur) var(--ease); }
body[data-motion="off"] .pace__cells--arc .pcell, body.no-anim-init .pace__cells--arc .pcell { transition: none; }
.pace__cells--arc .pcell + .pcell { border-left: 0; }
.pace__cells--arc .pcell.modal { box-shadow: inset 0 2px 0 0 var(--color-volt); }
.pace__cells--arc .pcell::before { display: none; }
body[data-pace="off"] .pace__cells { background: transparent; }
body[data-pace="bold"] .pace__cells { background: linear-gradient(90deg, rgba(40,50,64,0.04) 0%, rgba(150,166,190,0.40) 100%); }
.pcell { position: relative; min-width: 0; overflow: hidden; cursor: pointer; transition: width 0.7s var(--ease), background var(--dur) var(--ease); display: flex; align-items: flex-end; padding: 6px 7px; }
/* a soft cold→hot density wash so the spectrum reads without coined words */
.pcell { background: rgba(206,255,0,0.04); }
.pcell:hover { background: rgba(255,255,255,0.06); }
.pcell.modal { background: rgba(206,255,0,0.12); }
.pcell__nm { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); line-height: 1.15; display: none; }
body[data-pacelabels="on"] .pcell__nm { display: block; }
body[data-pacelabels="on"] .pcell.modal .pcell__nm { color: var(--color-text); }
.pcell + .pcell { border-left: 1px solid rgba(138,143,152,0.14); }
.pcell.modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-volt); opacity: 0.7; }
/* center-of-mass needle — an up-pointing pyramid below the spectrum, under the modal */
.pace__needle { position: absolute; top: 40px; width: 0; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; transition: left 0.82s var(--ease), top 0.82s var(--ease); }
.pace__needle i { position: absolute; top: 0; left: -11px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 15px solid var(--color-volt); filter: drop-shadow(0 0 5px rgba(206,255,0,0.55)); }
body[data-motion="off"] .pace__needle { transition: none; }
.pace__needle::before { content: none; }
.pace__axis { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); }
.pace__axis span:nth-child(2) { color: var(--color-text-secondary); }
.pace__cap { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--color-text-tertiary); line-height: 1.5; margin-top: 9px; max-width: 80ch; }

/* ── depth transition + aggregate ────────────────────────────── */
.pyr { position: relative; max-width: 1320px; margin: 18px auto 0; height: 48px; }
.pyr__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.depth { max-width: 1320px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.depth__steps { display: flex; align-items: center; flex-wrap: wrap; }
.depth__step { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); white-space: nowrap; }
.depth__step b { color: var(--color-text-secondary); font-weight: 600; }
.depth__sep { color: var(--color-border); margin: 0 10px; }
.depth__panel { display: flex; align-items: center; gap: 12px; }
.depth__plbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); white-space: nowrap; }
.depth__bar { width: 190px; }
@media (max-width: 560px) { .depth__bar { width: 130px; } .depth { padding: 14px 18px; } }

/* ── how to read ─────────────────────────────────────────────── */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--color-border); }
@media (max-width: 820px) { .howto { grid-template-columns: 1fr; } }
.howto__c { padding: 22px 24px; border-right: 1px solid var(--color-border); }
.howto__c:last-child { border-right: none; }
@media (max-width: 820px) { .howto__c { border-right: none; border-bottom: 1px solid var(--color-border); } .howto__c:last-child { border-bottom: none; } }
.howto__n { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-volt); }
.howto__h { font-family: var(--font-editorial); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 8px; }
.howto__p { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.howto__p b { color: var(--color-text); font-weight: 500; }
.howto__demo { margin-top: 12px; }

/* ── legend ──────────────────────────────────────────────────── */
.legendrow { max-width: 1320px; margin: 0 auto; padding: 18px 32px 8px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
@media (max-width: 640px) { .legendrow { padding: 14px 18px 4px; } }

/* ── five constraint columns (canonical) ─────────────────────── */
.cols-wrap { position: relative; max-width: 1320px; margin: 0 auto; padding: 8px 32px 8px; }
@media (max-width: 640px) { .cols-wrap { padding: 8px 18px; } }
.ties { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.ties path { fill: none; stroke: rgba(138,143,152,0.22); stroke-width: 1; transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease); }
.ties path.hot { stroke: var(--color-text); stroke-width: 1.5; }
body[data-dag="off"] .ties path:not(.hot) { stroke: transparent; }
.cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
/* Uniform grid (2026-06-11): at the 5-across layout each .col becomes a row
   SUBGRID spanning the header / "Questions ↓" / body tracks, so all five
   constraint headers share ONE row track (sized by the tallest note) and the
   first question card starts on the same line in every column. row-gap goes
   to 0 on .cols so intra-column spacing stays exactly as before (hd/l3/body
   already stacked with no gap). Degrades gracefully: without subgrid support
   the rows auto-size exactly as they used to. Scoped >1080px — the 2-up /
   1-up stacked layouts keep their original flow and gaps. */
@media (min-width: 1081px) {
  .cols { row-gap: 0; align-items: stretch; }
  .col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
@media (max-width: 1080px) { .cols { grid-template-columns: repeat(2, 1fr); } .ties { display: none; } }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }

.col__hd { padding: 14px 14px 12px; margin-bottom: 0; border: 1px solid var(--color-border); border-bottom: 2px solid var(--color-text-tertiary); border-radius: var(--radius-md) var(--radius-md) 0 0; background: rgba(30,40,54,0.72); cursor: pointer; }
.col.hot .col__hd { border-bottom-color: var(--color-volt); }
.col__ix { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); display: flex; gap: 6px; }
.col__ix b { color: var(--color-volt); font-weight: 600; }
.col__nm { font-family: var(--font-editorial); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin: 4px 0 9px; line-height: 1.05; }
.col__nm .lg { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; color: var(--color-volt); vertical-align: middle; margin-left: 6px; }
.col__bar .distbar { --db-h: 15px; }
.col__note { font-size: 10.5px; color: var(--color-text-secondary); line-height: 1.4; margin-top: 9px; }
.col.hot .col__nm { color: var(--color-text); }
.col.dim { opacity: 0.4; transition: opacity var(--dur) var(--ease); }
.col__l3 { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 11px 4px 7px; }
.col__body { display: flex; flex-direction: column; gap: 7px; padding-left: 10px; border-left: 1px solid var(--color-border-subtle); margin-left: 6px; }

/* CCA card — visibly secondary to the constraint header */
.acard { border: 1px solid var(--color-border-subtle); border-radius: 4px; background: rgba(26,34,48,0.32); overflow: hidden; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease); cursor: pointer; position: relative; }
.acard::before { content: ""; position: absolute; left: -11px; top: 18px; width: 9px; height: 1px; background: var(--color-border); }
.acard.ref { background: transparent; border-style: dashed; }
.acard.hot { border-color: var(--color-text-secondary); background: rgba(26,34,48,0.85); }
.acard.faded { opacity: 0.3; }
.acard__hd { padding: 9px 11px; }
.acard__nm { font-size: 11.5px; font-weight: 500; color: var(--color-text); letter-spacing: -0.005em; line-height: 1.25; }
.acard__meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.acard__bar { flex: 1; }
.acard__bar .distbar { --db-h: 11px; }
.acard__tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); white-space: nowrap; }
.acard__cc { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-volt); display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
.acard__cc::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-volt); }
.acard__ref { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--color-text-tertiary); line-height: 1.5; }
.acard__ref b { color: var(--color-text-secondary); font-weight: 500; }
/* v3.1 question card (uniform grid, 2026-06-11): reserve two label lines so
   every question card is ONE consistent row height at every width — labels
   that wrap to two lines (narrow 5-across widths) no longer stagger the
   column rhythm, and the glance bars sit at the same y in every card. */
.acard--q .acard__nm { min-height: 2.5em; }
/* v3.1 question card: re-evidence chip (only renders when SPINE.reev.chip is
   non-empty; drop B retired it, so this is dormant but kept for a future state). */
.acard__reev { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-volt); margin-top: 8px; }
/* §5 thinness caveat under the politics column — coral, derived "<n> of 80 — …". */
.col__thin { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; line-height: 1.4; color: var(--coral); padding: 8px 11px 2px; }

/* ── placement matrix (Step 1 density, collapsible) ──────────── */
/* nested inside .wrap.sec — inherit its margin; don't double-pad */
.matrix-wrap { max-width: 100%; margin: 0; padding: 0; }
.matrix-toggle { width: 100%; appearance: none; background: transparent; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 18px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.matrix-toggle:hover { border-color: var(--color-text-tertiary); color: var(--color-text); }
.matrix-toggle .chev { transition: transform var(--dur) var(--ease); }
.matrix-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.matrix-panel { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.matrix-panel.open { max-height: 4000px; }
.matrix { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix__grid { display: grid; gap: 2px; min-width: 660px; }
.mx-corner { align-self: end; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); text-align: right; padding: 0 8px 5px 0; line-height: 1.35; }
.mx-corner span { color: var(--color-text-secondary); }
.mx-hd { position: relative; height: 320px; cursor: pointer; }
.mx-hd__l { position: absolute; left: 50%; bottom: 6px; transform-origin: left bottom; transform: rotate(-56deg); white-space: nowrap; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.01em; color: var(--color-text-secondary); pointer-events: none; max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.mx-hd:hover .mx-hd__l { color: var(--color-text); }
.mx-nm { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.01em; color: var(--color-text-tertiary); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.mcell { aspect-ratio: 1; min-height: 12px; border-radius: 1px; cursor: pointer; }
.mcell:hover { outline: 1.5px solid var(--color-text); outline-offset: -1px; }
/* silent cells dead-end nowhere by design — no card, no pointer affordance */
.mcell.is-silent { cursor: default; }
.mcell.v2 { background: var(--pos-sh); } .mcell.v1 { background: var(--pos-wh); }
.mcell.v0 { background-image: repeating-linear-gradient(45deg, var(--pos-si-hatch) 0 1px, transparent 1px 4px); }
.mcell.vm1 { background: var(--pos-wd); } .mcell.vm2 { background: var(--pos-sd); }
.matrix__note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--color-text-tertiary); line-height: 1.6; margin-top: 14px; }
.matrix__note b { color: var(--color-text-secondary); font-weight: 500; }

/* ── methodology + machine channel + citations ───────────────── */
.method { display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
.method > dt { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--color-text-secondary); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 4px; }
.method > dd { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.62; padding-bottom: 18px; border-bottom: 1px solid var(--color-border-subtle); }
.method > dd:last-of-type { border-bottom: none; }
.method > dd b { color: var(--color-text); font-weight: 500; }
.method > dd .volt { color: var(--color-volt); }
@media (max-width: 760px) { .method { grid-template-columns: 1fr; gap: 6px; } .method > dt { padding-top: 14px; } }

.channel { margin-top: 28px; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.channel__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.channel__hd .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.channel__hd .gate { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-agent-gated); border: 1px solid rgba(167,139,250,0.3); border-radius: 3px; padding: 2px 7px; }
.channel pre { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--color-text-secondary); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.channel pre .k { color: var(--color-text); }
.channel pre .v { color: var(--color-volt); }

.cites { display: flex; flex-direction: column; }
.cite { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 14px 10px; border-bottom: 1px solid var(--color-border-subtle); align-items: baseline; scroll-margin-top: 90px; border-radius: var(--radius-sm); }
@keyframes citeflash { 0% { background: rgba(206,255,0,0.16); } 100% { background: transparent; } }
.cite--flash { animation: citeflash 1.7s var(--ease); box-shadow: inset 3px 0 0 0 var(--color-volt); }

/* ── FAQ — deslop "how readers ask about this" stacked Q/A ────── */
.faq { display: flex; flex-direction: column; max-width: 80ch; }
.faq__q { font-family: var(--font-editorial); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); line-height: 1.25; }
.faq__q:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.faq__a { font-size: 14px; line-height: 1.72; color: var(--color-text-secondary); margin-top: 8px; }
.faq__a b { color: var(--color-text); font-weight: 500; }
.faq__a a { color: var(--color-volt); }
.faq__a a:hover { color: var(--color-accent-hover); }
/* anchor offset for in-page "See …" jumps */
section[id] { scroll-margin-top: 84px; }
.cite:last-child { border-bottom: none; }
.cite__d { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); }
.cite__t { font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.cite__t b { color: var(--color-text); font-weight: 500; }
.cite__src { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); letter-spacing: 0.04em; }
@media (max-width: 640px) { .cite { grid-template-columns: 1fr; gap: 4px; } }

/* ── DRAWER (5 types) ────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(8,12,18,0.55); z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; z-index: 90; background: #131b26; border-left: 1px solid var(--color-border); box-shadow: -24px 0 60px -30px rgba(0,0,0,0.8); transform: translateX(100%); transition: transform 0.32s var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer__hd { padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer__kind { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-volt); }
.drawer__t { font-family: var(--font-editorial); font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin-top: 6px; color: var(--color-text); }
.drawer__x { appearance: none; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; flex-shrink: 0; }
.drawer__x:hover { border-color: var(--color-text-tertiary); color: var(--color-text); }
.drawer__body { padding: 16px 20px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.drawer__sec { padding: 14px 0; border-bottom: 1px solid var(--color-border-subtle); }
.drawer__sec:last-child { border-bottom: none; }
.drawer__lbl { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 8px; }
.drawer__p { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.drawer__p b { color: var(--color-text); font-weight: 500; }
.drawer__counts { display: flex; gap: 16px; flex-wrap: wrap; }
.dcount { display: flex; flex-direction: column; gap: 2px; }
.dcount b { font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--color-text); letter-spacing: -0.02em; }
.dcount span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); }
.dcount.is-deny b { color: var(--coral); } .dcount.is-hold b { color: var(--color-volt); }
.drawer__tier { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--color-agent-gated); border: 1px solid rgba(167,139,250,0.3); border-radius: 4px; padding: 8px 10px; line-height: 1.5; }
.drawer__bind { display: flex; flex-direction: column; gap: 6px; }
.bindrow { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--color-text-secondary); }
.bindrow .bn { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); }
.bindrow .bs { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.bindrow .bs.h { color: var(--color-text); } .bindrow .bs.d { color: var(--coral); } .bindrow .bs.x { color: var(--color-text-tertiary); }
.drawer__people { display: flex; flex-direction: column; gap: 5px; }
.dperson { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); }
.dperson .d { width: 7px; height: 7px; flex-shrink: 0; }
.dperson .d.v2 { background: var(--pos-sh); } .dperson .d.v1 { background: var(--pos-wh); }
.dperson .d.v0 { background-image: repeating-linear-gradient(45deg, var(--pos-si-hatch) 0 1px, transparent 1px 4px); border: 1px solid var(--color-border); }
.dperson .d.vm1 { background: var(--pos-wd); } .dperson .d.vm2 { background: var(--pos-sd); }
.dperson .af { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary); margin-left: auto; }
.drawer .distbar { --db-h: 16px; }

/* ── READER-FIRST scenario drawer (handoff §4.3) ───────────────────────────
   Hierarchy: name → "what this world looks like" → "what it requires" (THE
   STAR, most visual weight) → one clean read (no crown) → optional plain line
   → collapsed "how we calculate this". volt = affirm/the-driver ONLY, coral =
   deny, steel/neutral = stays-out / doesn't-matter. Content ≥11px. */

/* (2) the world blurb reads a touch larger — it's the human entry point. */
.drawer__sec .drawer__p { font-size: 13.5px; }

/* (3) THE STAR — "what it requires": a boxed, emphasized 5-lever list. */
.drawer__reqs { display: flex; flex-direction: column; gap: 7px; padding: 13px; border: 1px solid var(--color-border); border-left: 2px solid var(--color-volt); border-radius: var(--radius-md); background: rgba(206,255,0,0.025); }
.rq { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: baseline; }
.rq__chip { font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; align-self: center; }
.rq__chip.is-hold { color: var(--color-volt); }
.rq__chip.is-fail { color: var(--coral); }
.rq__chip.is-driver { color: var(--color-volt); }
.rq__chip.is-neutral, .rq__chip.is-na { color: var(--color-text-secondary); }
.rq__txt { font-size: 13px; line-height: 1.45; color: var(--color-text); }
.rq__vd { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; align-self: center; }
.rq__vd.is-hold { color: var(--color-volt); }
.rq__vd.is-fail { color: var(--coral); }
.rq__vd.is-driver { color: var(--color-volt); font-weight: 700; }
.rq__vd.is-neutral { color: var(--color-text-secondary); }
.rq__vd.is-na { color: var(--color-text-secondary); opacity: 0.7; }
/* a doesn't-matter / stays-out lever reads quieter than the load-bearing ones */
.rq:has(.rq__vd.is-na) .rq__txt { color: var(--color-text-secondary); }
.drawer__reqnote { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); font-size: 12px; line-height: 1.55; color: var(--color-text-secondary); }
.drawer__reqnote b { color: var(--color-text); font-weight: 600; }

/* (4) one clean read — plain, no crown. */
.drawer__readline { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.drawer__readline b { color: var(--color-text); font-weight: 600; }
.drawer__cue { margin-top: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--color-text-secondary); }

/* (6) collapsed "how we calculate this" — the ONLY home for method jargon. */
.drawer__method { margin-top: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.drawer__methodsum { cursor: pointer; list-style: none; padding: 11px 13px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); display: flex; align-items: center; gap: 9px; user-select: none; }
.drawer__methodsum::-webkit-details-marker { display: none; }
.drawer__methodsum::before { content: "+"; font-size: 13px; color: var(--color-volt); line-height: 1; }
.drawer__method[open] .drawer__methodsum::before { content: "−"; }
.drawer__methodsum:hover { color: var(--color-text); }
.drawer__methodbox { padding: 4px 13px 14px; border-top: 1px solid var(--color-border-subtle); }
.drawer__methodbox p { font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); margin: 10px 0 0; }
.drawer__methodbox p b { color: var(--color-text); font-weight: 500; }
.drawer__methodfoot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--color-text-tertiary); }

@media (max-width: 560px) {
  .drawer { width: 100%; max-width: 100%; top: auto; bottom: 0; height: 86vh; border-left: none; border-top: 1px solid var(--color-border); border-radius: 14px 14px 0 0; transform: translateY(100%); }
  .drawer.open { transform: none; }
  /* thumb-sized close target on the bottom sheet (was 30px) */
  .drawer__x { width: 40px; height: 40px; }
}

/* tappable affordance hint on touch */
.is-tappable { position: relative; }

/* reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
body[data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .seg, .pcell, .pace__needle, .ptr, .dial--stack .lad { transition: none !important; }
}