/* The AI That Learned to Act — Phase 3B system styles.
 * Transformer-Explainer-style: ONE persistent 9-station agentic pipeline as the
 * hero, a sliding trust boundary (provider-green <-> customer-amber), an
 * inspector for every entity/flow/control, and a trust-boundary slider.
 * Cool neutral palette + system fonts only. Tokens inline in index.html (--ex-*).
 * Plan of record: docs/project/ai-that-learned-to-act.md (Phase 3B Visual System Model). */

/* ===== Stage ===== */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svg-sans { font-family: var(--ex-sans); }
.svg-mono { font-family: var(--ex-mono); letter-spacing: 0.04em; }

/* Calm, restrained transitions (all gated by reduced-motion at the bottom). */
.station, .node-box, .node-focus, .node-glyph, .node-owner, .chips,
.lenses, .tokens, .infra, .infra-bar, .seg {
  transition: opacity 420ms ease, fill 420ms ease, stroke 420ms ease, color 420ms ease;
}

/* ===== Top status strip (chrome) ===== */
/* Fixed-cell status readout: the wordmark truncates, the readout cluster has a
   fixed width with fixed-width cells, and the notes button is pinned right — so
   nothing moves as the act/state text changes from beat to beat. */
.ex-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  font-family: var(--ex-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ex-mute);
  background: linear-gradient(180deg, rgba(247,248,250,0.96), rgba(247,248,250,0));
  pointer-events: none;
}
.ex-wordmark { color: var(--ex-ink); font-weight: 500; letter-spacing: 0.16em; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-wordmark i { color: var(--ex-ai); font-style: normal; }
.ex-readout {
  flex: 0 0 auto; box-sizing: border-box; width: 372px;
  display: grid; grid-template-columns: 100px 84px 168px; gap: 10px; align-items: center;
  color: var(--ex-ink-2);
}
.rd-cell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rd-beat b { color: var(--ex-ai); font-weight: 500; }
.rd-act::before, .rd-state::before { content: "· "; color: var(--ex-line-2); }
.ex-readout:empty, .rd-cell:empty::before { content: ""; }
.ex-notes-btn {
  flex: 0 0 auto;
  pointer-events: auto; font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ex-mute); background: none; border: 1px solid var(--ex-line);
  border-radius: 6px; padding: 4px 9px; cursor: pointer; transition: color .2s, border-color .2s;
}
.ex-notes-btn:hover { color: var(--ex-ai); border-color: var(--ex-ai); }

/* ===== Pipeline stations (the fixed architecture) ===== */
.station { cursor: default; }
.node-box { fill: var(--ex-panel); stroke: var(--ex-line); stroke-width: 1.4; }
.node-focus { fill: none; stroke: var(--ex-ai); stroke-width: 1.6; opacity: 0; }
.node-idx { fill: var(--ex-mute); }
.node-glyph { color: var(--ex-ink-2); }
.node-label { font-family: var(--ex-sans); font-weight: 500; fill: var(--ex-ink); }
.node-sub { fill: var(--ex-mute); }
.node-owner { fill: var(--ex-mute); letter-spacing: 0.1em; }
/* Faint rule capping the metadata footer zone (station type + ownership). */
.node-foot-rule { stroke: var(--ex-line-2); stroke-width: 1; opacity: 0.4; }

/* Attention hierarchy: focus ring (primary) > active route (secondary) >
   ownership borders (tertiary, softened below) > dimmed background. */
.station.dim { opacity: 0.4; }
.station.focus .node-focus { opacity: 0.85; stroke-width: 1.8; }
/* Route focus: the blue fill holds at its high-water mark while the discussed
   station is spotlighted with the single strong outer ring; others gently recede. */
.station.route-focus .node-focus { opacity: 1; stroke-width: 2; }
.scene.has-route-focus .station:not(.route-focus):not(.dim) { opacity: 0.55; }
.station:hover .node-box,
.station:focus-visible .node-box { stroke-width: 2; stroke-opacity: 1; }

/* Ownership colouring — fill tint leads; the border is a quiet, softened cue
   (tertiary) so it never competes with the focus ring or active route. */
.station.own-provider .node-box { fill: #ECF6F1; stroke: var(--ex-secure); stroke-opacity: 0.45; }
.station.own-provider .node-glyph { color: var(--ex-secure); }
.station.own-provider .node-owner { fill: var(--ex-secure); }
.station.own-customer .node-box { fill: var(--ex-risk-soft); stroke: var(--ex-risk); stroke-opacity: 0.45; }
.station.own-customer .node-glyph { color: var(--ex-risk); }
.station.own-customer .node-owner { fill: var(--ex-risk); }
.station.own-neutral .node-box { fill: var(--ex-panel); stroke: var(--ex-line); }

/* Role-coloured stations (not ownership): verification = violet, human = deep
   oversight green. Distinct via tint, with a calm (non-screaming) border. */
/* Deep oversight green = human judgment / decision authority. Deliberately deeper &
   more forest than the provider/control teal (--ex-secure), so it doesn't imply the
   same "provider-owned / security-control" meaning. Calm, not neon, not a success state. */
:root { --ex-oversight: #15643F; --ex-oversight-soft: #E6F0EA; }
.station.role-proof .node-glyph { color: var(--ex-mute); }
.station.role-proof.proof-on .node-box { fill: var(--ex-proof-soft); stroke: var(--ex-proof); stroke-opacity: 0.55; }
.station.role-proof.proof-on .node-glyph { color: var(--ex-proof); }
.station.role-proof.proof-on .node-owner { fill: var(--ex-proof); }
.station.role-human .node-glyph { color: var(--ex-oversight); }
.station.role-human.gate-on .node-box { fill: var(--ex-oversight-soft); stroke: var(--ex-oversight); stroke-width: 1.5; stroke-opacity: 0.7; }
.station.role-human.gate-on .node-glyph { color: var(--ex-oversight); }
.station.role-human.gate-on .node-label { fill: var(--ex-oversight); }
.station.role-human.gate-on .node-owner { fill: var(--ex-oversight); }

/* Icons */
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon * { vector-effect: non-scaling-stroke; }

/* Tokens entering the model */
.tokens { opacity: 0; }
.tokens.on { opacity: 1; }
.token-dot { fill: var(--ex-ai); opacity: 0.75; }

/* ===== On-demand agent marker (acting beats only; not a route, not a progress bar) ===== */
.agent-marker { opacity: 0; pointer-events: none; transition: opacity 280ms ease; }
.agent-marker.on { opacity: 1; }
/* Travel only between consecutive marker beats; otherwise it jumps in at the target. */
.agent-marker.travel { transition: opacity 280ms ease, transform 440ms cubic-bezier(.4, 0, .2, 1); }
.agent-marker__core { fill: var(--ex-ai); stroke: var(--ex-panel); stroke-width: 1.5; }
.agent-marker__halo { fill: var(--ex-ai); opacity: 0.12; }

/* ===== Control chips ===== */
.chip { cursor: default; }
.chip-frame { fill: var(--ex-panel); stroke: var(--ex-line-2); stroke-width: 1; }
.chip-icon { color: var(--ex-secure); }
.chip:hover .chip-frame { stroke: var(--ex-secure); }

/* ===== Act II teaching overlays (Phase 3C-1) — one shown at a time; restrained,
   no route line, no floating cards. Built once, faded on per beat flag. ===== */
.overlay { opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.overlay.on { opacity: 1; }
/* Beat 22 — non-determinism */
.ov-line { stroke: var(--ex-line-2); stroke-width: 1; opacity: 0.7; }
.ov-in { fill: var(--ex-ai); }
.ov-out rect { fill: var(--ex-panel); stroke: var(--ex-line-2); stroke-width: 1; }
.ov-out text { fill: var(--ex-ink-2); }
.ov-out.swap { animation: ov-swap 240ms ease; }
@keyframes ov-swap { from { opacity: 0.15; } to { opacity: 1; } }
.ov-rerun { pointer-events: auto; cursor: pointer; }
.ov-rerun rect { fill: var(--ex-ai-soft); stroke: var(--ex-ai); stroke-width: 1; transition: fill .2s; }
.ov-rerun text { fill: var(--ex-ai); }
.ov-rerun:hover rect { fill: var(--ex-ai); }
.ov-rerun:hover text { fill: #fff; }
.ov-rerun:focus-visible rect { fill: var(--ex-ai); }
.ov-rerun:focus-visible text { fill: #fff; }
.ov-rerun:focus { outline: none; }
/* Beat 23 — external boundary (a frame OUTSIDE the model, dashed, not a glow) */
.ov-shell { fill: none; stroke: var(--ex-ai); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.9; }
.ov-shell-label { fill: var(--ex-ai); letter-spacing: 0.12em; }
/* Beat 24 — plausible -> verify bridge (quiet dashed cue, NOT the proof gate) */
.ov-bridge { stroke: var(--ex-proof); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0.85; }
.ov-bridge-arrow { fill: var(--ex-proof); }
.ov-plausible rect { fill: var(--ex-proof-soft); stroke: var(--ex-proof); stroke-width: 1; }
.ov-plausible text { fill: var(--ex-proof); }
.ov-verify-label { fill: var(--ex-proof); letter-spacing: 0.1em; }

/* ===== Act III control overlays (Phase 3C-2) — green "controls" family, distinct
   from Act II. Small restrained marks; no route, no proof gate. ===== */
.ovc-tick { stroke: var(--ex-secure); stroke-width: 1; opacity: 0.45; }
.ovc-pill rect { fill: #ECF6F1; stroke: var(--ex-secure); stroke-width: 1; }
.ovc-pill text { fill: var(--ex-secure); }
.ovc-ico { color: var(--ex-secure); }
.ovc-clabel { fill: var(--ex-secure); letter-spacing: 0.1em; }
/* Beat 26 — locked hops + guarded channel */
.ovc-lock circle { fill: #ECF6F1; stroke: var(--ex-secure); stroke-width: 1.2; }
.ovc-channel { stroke: var(--ex-secure); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 5; opacity: 0.7; }
/* Beat 27 — prompt sieve gate */
.ovc-gate rect { fill: #ECF6F1; stroke: var(--ex-secure); stroke-width: 1.2; }
.ovc-gate-slot { stroke: var(--ex-secure); stroke-width: 1.4; stroke-linecap: round; }
/* Beat 28 — hard-stop agency limiter (motion mark → capped by a solid stop bar |). */
.ovc-limit-mark { stroke: var(--ex-secure); stroke-width: 1.4; stroke-linecap: round; }
.ovc-limit-arrow { fill: var(--ex-secure); }
.ovc-limit-bar { stroke: var(--ex-secure); stroke-width: 2.6; stroke-linecap: round; }

/* ===== Act IV proof overlays (Phase 3D) — violet "proof" family, the climax. ===== */
.ovp-pill rect { fill: var(--ex-proof-soft); stroke: var(--ex-proof); stroke-width: 1; }
.ovp-pill text { fill: var(--ex-proof); }
.ovp-label { fill: var(--ex-proof); letter-spacing: 0.1em; }
.ovp-line { stroke: var(--ex-proof); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
/* Beat 29 — automated reasoning */
.ovp-claim rect { fill: var(--ex-panel); stroke: var(--ex-proof); stroke-width: 1; }
.ovp-claim text { fill: var(--ex-proof); }
.ovp-bridge { stroke: var(--ex-proof); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0.85; }
.ovp-bridge-arrow { fill: var(--ex-proof); }
.ovp-reason-box rect { fill: var(--ex-proof-soft); stroke: var(--ex-proof); stroke-width: 1.2; }
.ovp-reason-box text { fill: var(--ex-proof); }
/* Beat 30 — three-state proof gate (interactive). Quiet :focus-visible, no blue ring. */
.proof-state-btn { cursor: pointer; pointer-events: auto; }
.proof-state-btn rect { fill: var(--ex-panel); stroke: var(--ex-line-2); stroke-width: 1; transition: fill .15s, stroke .15s; }
.proof-state-btn text { fill: var(--ex-ink-2); }
.proof-state-btn:hover rect { stroke: var(--ex-proof); }
.proof-state-btn.sel rect { fill: var(--ex-proof-soft); stroke: var(--ex-proof); stroke-width: 1.4; }
.proof-state-btn.sel text { fill: var(--ex-proof); }
.proof-state-btn:focus { outline: none; }
.proof-state-btn:focus-visible rect { fill: var(--ex-proof-soft); stroke: var(--ex-proof); }
.proof-result rect { fill: var(--ex-panel); stroke: var(--ex-line-2); stroke-width: 1.2; transition: fill .15s, stroke .15s; }
.proof-result text { fill: var(--ex-ink-2); }
.proof-result.is-valid rect { fill: #ECF6F1; stroke: var(--ex-secure); }
.proof-result.is-valid text { fill: var(--ex-secure); }
.proof-result.is-invalid rect { fill: #FDECEC; stroke: var(--ex-critical); }
.proof-result.is-invalid text { fill: var(--ex-critical); }
.proof-result.is-cond rect { fill: var(--ex-risk-soft); stroke: var(--ex-risk); }
.proof-result.is-cond text { fill: var(--ex-risk); }
/* Beat 31 — proof artifacts -> human */
.ovp-arrow { stroke: var(--ex-proof); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; opacity: 0.85; }
.ovp-arrowhead { fill: var(--ex-proof); }

/* ===== Act V / VI overlays (Phase 3E-1) ===== */
/* Beat 32 — AI for security: indigo "AI signal" chips near Monitor. */
.ovs-chip rect { fill: var(--ex-ai-soft); stroke: var(--ex-ai); stroke-width: 1; }
.ovs-chip text { fill: var(--ex-ai); }
.ovs-tick { stroke: var(--ex-ai); stroke-width: 1; opacity: 0.45; }
/* Beat 33 — AI-powered threats: amber warning markers + measured callout (calm, not cyber-generic). */
.ovt-pill rect { fill: var(--ex-risk-soft); stroke: var(--ex-risk); stroke-width: 1; }
.ovt-pill text { fill: var(--ex-risk); }
.ovt-tick { stroke: var(--ex-risk); stroke-width: 1; opacity: 0.5; }
.ovt-tri { fill: var(--ex-risk-soft); stroke: var(--ex-risk); stroke-width: 1.2; stroke-linejoin: round; }
.ovt-excl { stroke: var(--ex-risk); stroke-width: 1.4; stroke-linecap: round; }
.ovt-excl-dot { fill: var(--ex-risk); }
/* Beat 34 — defense in depth: neutral nested layer frames (calm, architectural). */
.ovd-frame { fill: none; stroke: var(--ex-ink-2); stroke-width: 1; }
.ovd-label { fill: var(--ex-mute); letter-spacing: 0.12em; }

/* ===== Act VII / VIII overlays (Phase 3E-2) — slate "governance" family. ===== */
.ovg-pill rect { fill: #EEF1F5; stroke: var(--ex-ink-2); stroke-width: 1; }
.ovg-pill text { fill: var(--ex-ink-2); }
.ovg-tick { stroke: var(--ex-ink-2); stroke-width: 1; opacity: 0.4; }
.ovg-eyebrow { fill: var(--ex-mute); letter-spacing: 0.14em; }
.ovg-loop { fill: none; stroke: var(--ex-ink-2); stroke-width: 1.3; stroke-dasharray: 3 3; }
.ovg-loop-arrow { fill: var(--ex-ink-2); }

/* ===== Act IX close overlays (Phase 3F) ===== */
/* Beat 38 — oversight: evidence (violet, reuses .ovp-pill) -> human decides (green). */
.ovo-arrow { fill: none; stroke: var(--ex-ink-2); stroke-width: 1.3; stroke-dasharray: 3 3; }
.ovo-arrowhead { fill: var(--ex-ink-2); }
.ovo-decide rect { fill: var(--ex-oversight-soft); stroke: var(--ex-oversight); stroke-width: 1; }
.ovo-decide text { fill: var(--ex-oversight); }
/* Beat 39 — three numbered action items (clean takeaway row). */
.ova-item rect { fill: var(--ex-panel); stroke: var(--ex-line-2); stroke-width: 1; }
.ova-num { fill: var(--ex-ai); }
.ova-numtext { fill: #fff; font-weight: 600; }
.ova-label { fill: var(--ex-ink); }

/* ===== Act-level modulation (subtle; no new content modules) =====
   Same persistent system, small emphasis shifts so acts feel distinct. */
/* Act II — LLM realities: cooler / analytical. Ownership tints flatten to neutral
   (the act is about the model, not who-owns-what), so the model focus leads. */
.scene[data-act="ACT-II"] .station.own-provider .node-box,
.scene[data-act="ACT-II"] .station.own-customer .node-box { fill: var(--ex-panel); stroke: var(--ex-line); stroke-opacity: 1; }
.scene[data-act="ACT-II"] .station.own-provider .node-glyph,
.scene[data-act="ACT-II"] .station.own-customer .node-glyph { color: var(--ex-ink-2); }
.scene[data-act="ACT-II"] .station.own-provider .node-owner,
.scene[data-act="ACT-II"] .station.own-customer .node-owner { fill: var(--ex-mute); }
/* Act III — controls: control chips read a touch stronger. */
.scene[data-act="ACT-III"] .chip-frame { stroke: var(--ex-secure); stroke-opacity: 0.85; }
.scene[data-act="ACT-III"] .chip-icon { color: var(--ex-secure); }
/* Act IV — proof: the verification station's violet reads a touch more present. */
.scene[data-act="ACT-IV"] .station.role-proof.proof-on .node-box { stroke-opacity: 0.95; stroke-width: 1.7; }

/* ===== Infrastructure base bar ===== */
.infra { opacity: 0; }
.infra.on { opacity: 1; }
.infra-bar { fill: var(--ex-line); stroke: var(--ex-line-2); stroke-width: 1; }
.infra-bar.own-provider { fill: #E3F0EA; stroke: var(--ex-secure); }
.infra-bar.own-customer { fill: var(--ex-risk-soft); stroke: var(--ex-risk); }
.infra-label { fill: var(--ex-mute); letter-spacing: 0.18em; }

/* ===== Three-lens band (conceptual frame between chrome and pipeline) ===== */
.lenses { opacity: 0; color: var(--ex-ink); }
.lenses.on { opacity: 1; }
.lens-label { fill: var(--ex-ink-2); letter-spacing: 0.14em; }
.lens-rule { stroke: var(--ex-line); stroke-width: 1; opacity: 0.55; }

/* ===== Inspector content — rendered INTO the bottom-right context panel =====
   No floating card. The fixed panel has three modes: STORY (default), PREVIEW
   (.inspecting — compact, fits without scroll), PINNED (.inspecting.pinned — full
   content, scrolls internally, sticky Close). Classes are unscoped to style inside
   .ex-panel. */
.ex-inspect__name { font-family: var(--ex-sans); font-weight: 500; font-size: 15px; color: var(--ex-ink); margin: 2px 0 9px; }
.ex-inspect__row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--ex-line); }
.ex-inspect__row:first-of-type { border-top: none; }
.ex-inspect__k { font-family: var(--ex-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ex-mute); padding-top: 1px; }
.ex-inspect__v { font-family: var(--ex-sans); font-size: 12px; line-height: 1.38; color: var(--ex-ink); }
.ex-inspect__row.is-owner .ex-inspect__v { color: var(--ex-ink); font-weight: 500; }
.ex-inspect__row.is-risk .ex-inspect__k { color: var(--ex-risk); }
.ex-inspect__row.is-proof .ex-inspect__k { color: var(--ex-proof); }
.ex-inspect__foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ex-line); font-family: var(--ex-sans); font-size: 10px; line-height: 1.45; color: var(--ex-mute); font-style: italic; }

/* Compact PREVIEW lines (preview mode only — short by construction, never scrolls). */
.insp-def { font-family: var(--ex-sans); font-size: 13px; line-height: 1.5; color: var(--ex-ink-2); margin-top: 6px; }
.insp-line { font-family: var(--ex-sans); font-size: 12.5px; line-height: 1.45; color: var(--ex-ink-2); margin-top: 7px; }
.insp-line b { font-family: var(--ex-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ex-mute); margin-right: 6px; }
.insp-line--risk b { color: var(--ex-risk); }

/* Mode marker: a thin blue top rule on the panel in any inspector mode (story has
   none). The tighter height cap keeps the panel top BELOW the station row (max
   station bottom ≈ 372px; panel bottom ≈ 641px) so the pipeline is never covered.
   Preview fits; pinned content scrolls internally (.ex-panel is overflow-y:auto). */
.ex-panel.inspecting { max-height: min(260px, calc(100% - 392px)); border-top: 2px solid var(--ex-ai); }

/* PINNED: sticky header keeps the INSPECTOR label + Close visible while content scrolls.
   Panel top padding is moved into the sticky header so no row can peek above it. */
.ex-panel__insp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-panel.pinned { padding-top: 0; }
.ex-panel.pinned .ex-panel__insp-head { position: sticky; top: 0; z-index: 1; background: var(--ex-panel); margin: 0 -18px 8px; padding: 14px 18px 8px; border-bottom: 1px solid var(--ex-line); }
.ex-panel__close { font-family: var(--ex-sans); font-size: 18px; line-height: 1; color: var(--ex-mute); background: none; border: none; cursor: pointer; padding: 0 4px; border-radius: 6px; transition: color .2s; }
.ex-panel__close:hover { color: var(--ex-ink); }
.ex-panel__close:focus-visible { color: var(--ex-ink); background: var(--ex-line); }

/* ===== Story panel — PERMANENT bottom-right fixture (TE-style persistent panel).
   Anchored in the same spot across all 40 beats; only its content changes. Mirrors
   the trust instrument in the bottom-left. Distinct from the transient hover/focus
   inspector (which is tinted and floats near the hovered node). ===== */
.ex-panel {
  position: absolute; z-index: 18; width: 340px; max-width: 40%;
  right: 22px; bottom: 60px;
  max-height: min(320px, calc(100% - 110px)); overflow-y: auto;
  background: var(--ex-panel); border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius); box-shadow: 0 14px 40px -18px rgba(17,24,39,0.34);
  padding: 16px 18px;
}
.ex-panel__eyebrow { font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-ai); margin-bottom: 9px; }
.ex-panel__title { font-family: var(--ex-sans); font-weight: 300; color: var(--ex-ink); font-size: 21px; line-height: 1.16; letter-spacing: -0.01em; }
.ex-panel__sub { font-family: var(--ex-sans); font-size: 13px; line-height: 1.5; color: var(--ex-ink-2); margin-top: 9px; }
.ex-panel__rows { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.ex-panel__rows--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arow { padding-top: 7px; border-top: 1px solid var(--ex-line); }
.arow-label { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ex-mute); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.arow-label::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--ex-line-2); }
.arow p { font-family: var(--ex-sans); font-size: 12.5px; line-height: 1.4; color: var(--ex-ink); }
.arow p + p { margin-top: 2px; }
.arow--provider .arow-label { color: var(--ex-secure); } .arow--provider .arow-label::before { background: var(--ex-secure); }
.arow--you .arow-label { color: var(--ex-risk); } .arow--you .arow-label::before { background: var(--ex-risk); }
.arow--risk .arow-label { color: var(--ex-risk); } .arow--risk .arow-label::before { background: var(--ex-risk); }
.arow--proof .arow-label { color: var(--ex-proof); } .arow--proof .arow-label::before { background: var(--ex-proof); }
.arow--valid .arow-label { color: var(--ex-secure); } .arow--valid .arow-label::before { background: var(--ex-secure); }
.arow--invalid .arow-label { color: var(--ex-critical); } .arow--invalid .arow-label::before { background: var(--ex-critical); }
.arow--cond .arow-label { color: var(--ex-risk); } .arow--cond .arow-label::before { background: var(--ex-risk); }
.ex-panel__link { display: inline-block; margin-top: 12px; font-family: var(--ex-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ex-ai); text-decoration: none; border-bottom: 1px solid var(--ex-ai); padding-bottom: 1px; }
.ex-panel__credit { font-family: var(--ex-sans); font-size: 11.5px; line-height: 1.5; color: var(--ex-ink-2); margin-top: 10px; }
.ex-panel__interp { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--ex-line); font-family: var(--ex-mono); font-size: 9px; letter-spacing: 0.03em; line-height: 1.55; color: var(--ex-mute); text-transform: none; }

/* Beat 40 close hierarchy: the closing message leads; the citation reads as a quiet,
   labelled secondary block. Compacted + height-capped so it clears the rightmost
   station footers (no overlap, no scroll). */
.ex-panel.is-close { max-height: min(258px, calc(100% - 392px)); }
.ex-panel.is-close .ex-panel__sub { font-size: 14px; color: var(--ex-ink); margin-top: 8px; }
.ex-panel.is-close .ex-panel__credit { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--ex-line); font-size: 10px; line-height: 1.4; color: var(--ex-mute); }
.ex-panel.is-close .ex-panel__credit::before { content: "SOURCE"; display: block; font-family: var(--ex-mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--ex-mute); margin-bottom: 3px; }
.ex-panel.is-close .ex-panel__link { font-size: 9.5px; margin-top: 7px; }

/* Beat 30 proof gate: three detail rows plus header overran the panel and overlapped
   the rightmost station footers (~51px). The fix is editorial — the redundant sub line is
   dropped in renderPanel (the live toggle readout and labelled rows already narrate it), so
   the three rows fit at normal density. The height cap stays as a backstop to clear the
   station row (same floor as the close beat). */
.ex-panel.is-proofgate { max-height: min(320px, calc(100% - 392px)); }

/* ===== Trust-boundary instrument (meter + slider — the core control) ===== */
/* Fixed-footprint instrument: fixed width + height, a fixed-row grid, so the panel
   never grows/shrinks with content. Rows: header · scope/status · meter · slider ·
   buyer-builder legend · explanation. */
.ex-trust {
  position: absolute; z-index: 19; left: 22px; bottom: 60px;
  box-sizing: border-box; width: 360px; height: 174px;
  display: grid; grid-template-rows: 15px 15px 14px 22px 13px 1fr; gap: 7px;
  background: var(--ex-panel); border: 1px solid var(--ex-line-2); border-radius: var(--ex-radius);
  box-shadow: 0 10px 30px -16px rgba(17,24,39,0.26); padding: 12px 15px;
}
.ex-trust.idle { opacity: 0.92; }
.ex-trust.settled { opacity: 0.6; }   /* Beat 40: settled instrument, recedes so the close leads */
.ex-trust__row { min-width: 0; min-height: 0; }
.ex-trust__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-trust__label { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-ai); white-space: nowrap; }
.ex-trust__scoperow { display: flex; align-items: center; overflow: hidden; }
.ex-trust__scope { font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ex-trust__meter { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ex-risk); white-space: nowrap; flex: 0 0 auto; }
.ex-trust__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-items: center; }
.ex-trust__sliderrow { display: flex; align-items: center; }
.seg { position: relative; height: 12px; border: 1px solid var(--ex-line-2); border-radius: 3px; background: var(--ex-panel); }
.seg i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ex-mono); font-size: 7.5px; font-style: normal; color: var(--ex-mute); }
.seg.fill { background: var(--ex-risk); border-color: var(--ex-risk); }
.seg.fill i { color: #fff; }
/* Buyer -> builder cliff: a clear visual break before Scope 3. */
.seg.builder { margin-left: 0; }
#seg-3 { margin-left: 14px; }
#seg-3::before { content: ""; position: absolute; left: -9px; top: -3px; bottom: -3px; border-left: 2px dashed var(--ex-ink-2); }
.seg.builder.fill { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
.seg.builder i { font-weight: 600; }
.ex-trust__range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; display: block; }
.ex-trust__range:focus { outline: none; }
.ex-trust__range::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--ex-secure), var(--ex-risk)); }
.ex-trust__range::-moz-range-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--ex-secure), var(--ex-risk)); }
.ex-trust__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 22px; margin-top: -9px; border-radius: 4px; background: var(--ex-ink); border: 2px solid var(--ex-panel); box-shadow: 0 1px 4px rgba(17,24,39,.4); }
.ex-trust__range::-moz-range-thumb { width: 12px; height: 20px; border-radius: 4px; background: var(--ex-ink); border: 2px solid var(--ex-panel); box-shadow: 0 1px 4px rgba(17,24,39,.4); }
.ex-trust__range:focus-visible::-webkit-slider-thumb { background: var(--ex-ai); border-color: var(--ex-ai); }
.ex-trust__range:focus-visible::-moz-range-thumb { background: var(--ex-ai); border-color: var(--ex-ai); }
.ex-trust__mind { display: flex; justify-content: space-between; align-items: center; font-family: var(--ex-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ex-mute); }
.ex-trust__cliff { color: var(--ex-ink-2); font-weight: 600; letter-spacing: 0.06em; }
.ex-trust.builder .ex-trust__cliff { color: var(--ex-risk); }
.ex-trust.builder .ex-trust__scope { color: var(--ex-risk); }
.ex-trust__risk { font-family: var(--ex-sans); font-size: 11.5px; line-height: 1.35; color: var(--ex-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-trust.idle .ex-trust__meter { color: var(--ex-mute); }

/* ===== Stepper navigation ===== */
.ex-stepper {
  position: absolute; z-index: 20; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: 999px;
  padding: 4px 6px; box-shadow: 0 6px 20px -12px rgba(17,24,39,0.3);
}
.ex-step {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; border-radius: 999px;
  color: var(--ex-ink); font-size: 17px; line-height: 1; transition: background .2s, color .2s;
}
.ex-step:hover:not(:disabled) { background: var(--ex-ai-soft); color: var(--ex-ai); }
.ex-step:disabled { color: var(--ex-line-2); cursor: default; }
.ex-count { font-family: var(--ex-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ex-ink-2); padding: 0 8px; min-width: 64px; text-align: center; white-space: nowrap; }

/* ===== Focus model — NO blue rings/strokes/outlines anywhere in the explainer =====
   App-wide: suppress every default/UA focus outline (so mouse + pointer never leave a
   ring). Keyboard focus stays VISIBLE but QUIET via :focus-visible — a light surface
   tint / colour shift / small state change per control, never a stroke or ring. The
   blue node-focus ring is reserved for the content spotlight (.focus / .route-focus),
   which is NOT an interaction state. */
.ex-app :focus { outline: none; }
/* Station keyboard focus: faint tile tint + the (non-blue) border emphasis from line 71. */
.station:focus-visible .node-box { fill: var(--ex-ai-soft); }
/* Stepper / notes / panel link: quiet tint + colour shift (mirrors hover, no ring). */
.ex-step:focus-visible { background: var(--ex-ai-soft); color: var(--ex-ai); }
.ex-notes-btn:focus-visible { color: var(--ex-ai); border-color: var(--ex-ai); background: var(--ex-ai-soft); }
.ex-panel__link:focus-visible { background: var(--ex-ai-soft); }

.ex-meta { position: absolute; right: 14px; bottom: 16px; z-index: 17; font-family: var(--ex-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ex-mute); opacity: 0.55; pointer-events: none; }

/* Phase placeholder: a beat whose final overlay is built in 3C+. Honest stand-in. */
.ex-pending {
  position: absolute; z-index: 16; top: 120px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  font-family: var(--ex-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ex-mute); background: repeating-linear-gradient(135deg, rgba(109,74,224,0.05) 0 8px, transparent 8px 16px), var(--ex-panel);
  border: 1px dashed var(--ex-proof); border-radius: 8px; padding: 8px 14px; white-space: nowrap;
}
.ex-pending.on { display: inline-flex; }
.ex-pending b { color: var(--ex-proof); font-weight: 500; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Prelude / landing title page (a state before Beat 1; not a beat) ===== */
/* Deck mounted underneath is suppressed + input-inert until handoff. */
#frame.prelude { pointer-events: none; }
#frame.prelude .ex-status,
#frame.prelude .scene,
#frame.prelude .ex-panel,
#frame.prelude .ex-trust,
#frame.prelude .ex-stepper,
#frame.prelude .ex-intro-task,
#frame.prelude .ex-lgd,
#frame.prelude .ex-intro-begin,
#frame.prelude .ex-meta { opacity: 0; }
#frame.prelude .ex-panel,
#frame.prelude .ex-trust,
#frame.prelude .ex-stepper { transform: translateY(10px); }

/* Staged reveal on entry — scene first, then chrome in sequence. */
.ex-status, .ex-panel, .ex-trust, .ex-stepper, .ex-meta,
.ex-intro-task, .ex-lgd, .ex-intro-begin { transition: opacity 440ms ease, transform 440ms cubic-bezier(.4,0,.2,1); }
#frame.deck-in .scene { transition: opacity 460ms ease; transition-delay: 0ms; }
#frame.deck-in .ex-status { transition-delay: 160ms; }
#frame.deck-in .ex-trust { transition-delay: 280ms; }
#frame.deck-in .ex-panel { transition-delay: 380ms; }
#frame.deck-in .ex-stepper { transition-delay: 480ms; }
#frame.deck-in .ex-meta { transition-delay: 540ms; }

/* Split-screen landing: top bar · left editorial · right system-preview. */
.ex-landing {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--ex-stage);
  opacity: 1; transition: opacity 320ms ease;
}
.ex-landing.leaving { opacity: 0; pointer-events: none; }
/* The dialog container is focused on load only to anchor keyboard/SR users; it is
   not an interactive control, so it never shows a focus ring. */
.ex-landing:focus { outline: none; }

/* Top bar with outlined pill */
.ex-landing__bar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--ex-line); }
.ex-landing__pill { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ex-ink-2); border: 1px solid var(--ex-line-2); border-radius: 999px; padding: 4px 11px; }
.ex-landing__barlabel { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-mute); }

/* Split body */
.ex-landing__split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; padding: 32px 48px; min-height: 0; }
.ex-landing__left { max-width: 460px; }
.ex-landing__eyebrow { font-family: var(--ex-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ex-ai); margin-bottom: 16px; }
.ex-landing__title { font-family: var(--ex-sans); font-weight: 300; font-size: 42px; line-height: 1.07; letter-spacing: -0.015em; color: var(--ex-ink); margin: 0; }
.ex-landing__sub { font-family: var(--ex-sans); font-size: 15px; line-height: 1.55; color: var(--ex-ink-2); margin: 18px 0 0; }
.ex-landing__support { font-family: var(--ex-sans); font-size: 13px; line-height: 1.5; color: var(--ex-mute); margin: 12px 0 0; }
.ex-landing__ctarow { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.ex-landing__cta {
  font-family: var(--ex-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 8px;
  padding: 12px 22px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .08s;
}
/* Primary "Enter presentation": the deck's interactive indigo accent (--ex-ai),
   white text, soft restrained shadow. Hover deepens the blue + a small lift; active
   presses slightly. No gradient — solid, consistent with the deck. Not black. */
.ex-landing__cta--primary {
  color: #fff; background: var(--ex-ai); border-color: var(--ex-ai);
  box-shadow: 0 6px 16px -9px rgba(59, 91, 219, 0.55);
}
.ex-landing__cta--primary:hover { background: #2457C5; border-color: #2457C5; box-shadow: 0 9px 22px -10px rgba(36, 87, 197, 0.5); transform: translateY(-1px); }
.ex-landing__cta--primary:active { background: #1F4DB0; border-color: #1F4DB0; box-shadow: 0 3px 9px -7px rgba(36, 87, 197, 0.5); transform: translateY(0); }
/* Secondary "How it works": quiet white surface, gray border, ink/indigo text. */
.ex-landing__cta--ghost { color: var(--ex-ink-2); background: var(--ex-panel); border-color: var(--ex-line-2); }
/* Open state: a quiet indigo tint + subtle border — NOT a heavy outline. Placed
   before :hover so hovering still gives feedback. The blue ring (below) is reserved
   for keyboard focus only via :focus-visible. */
.ex-landing__cta--ghost[aria-expanded="true"] { color: var(--ex-ink); background: var(--ex-ai-soft); border-color: var(--ex-line-2); }
.ex-landing__cta--ghost:hover { color: var(--ex-ai); background: var(--ex-panel); border-color: var(--ex-ai); }
/* Keyboard focus: quiet, no ring. Primary deepens like its hover; ghost takes the tint. */
.ex-landing__cta--primary:focus-visible { background: #2457C5; border-color: #2457C5; transform: translateY(-1px); }
.ex-landing__cta--ghost:focus-visible { background: var(--ex-ai-soft); border-color: var(--ex-line-2); color: var(--ex-ink); }
.ex-landing__meta { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ex-mute); margin-top: 30px; }

/* The landing's old inline "How it works" panel was replaced by the orientation
   track (INTRO 1–4 inside the deck) + the ? quick-reference card. */

/* Right-side system preview (decorative cover art — NOT the deck system) */
.ex-landing__right { display: flex; justify-content: center; min-width: 0; }
.ex-landing__preview { position: relative; width: 100%; max-width: 440px; }
.lp-conn { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 44px); z-index: 0; }
.lp-conn line { stroke: var(--ex-line-2); stroke-width: 1; opacity: 0.5; }
.lp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-card {
  background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: 9px;
  padding: 11px 10px 10px; display: flex; flex-direction: column; gap: 1px; aspect-ratio: 1 / 0.86;
}
.lp-num { font-family: var(--ex-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ex-mute); }
.lp-label { font-family: var(--ex-sans); font-weight: 500; font-size: 13.5px; color: var(--ex-ink); margin-top: auto; }
.lp-sub { font-family: var(--ex-mono); font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-mute); }
.lp-blue { background: var(--ex-ai-soft); border-color: var(--ex-ai); } .lp-blue .lp-label { color: var(--ex-ai); }
.lp-green { background: #ECF6F1; border-color: var(--ex-secure); } .lp-green .lp-label { color: var(--ex-secure); }
.lp-amber { background: var(--ex-risk-soft); border-color: var(--ex-risk); } .lp-amber .lp-label { color: var(--ex-risk); }
/* Human (last preview card) — deep oversight green, matching the deck's Human station. */
.lp-grid .lp-card:last-child { background: var(--ex-oversight-soft); border-color: var(--ex-oversight); }
.lp-grid .lp-card:last-child .lp-label { color: var(--ex-oversight); }
.lp-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-family: var(--ex-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-mute); }

@media (max-width: 860px) {
  .ex-landing__split { grid-template-columns: 1fr; gap: 22px; padding: 24px; overflow-y: auto; }
  .ex-landing__title { font-size: 30px; }
  .ex-landing__right { order: -1; }
  .ex-landing__preview { max-width: 340px; }
}

/* ===== Orientation track chrome (INTRO 1–4) ===== */
/* Skip pill — top-right in the status strip, only on intro beats. First stop in
   the tab order so impatient/AT users can bail immediately. */
.ex-skipintro {
  flex: 0 0 auto; pointer-events: auto;
  font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ex-ink-2); background: var(--ex-panel); border: 1px solid var(--ex-line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.ex-skipintro:hover, .ex-skipintro:focus-visible { color: var(--ex-ai); border-color: var(--ex-ai); background: var(--ex-ai-soft); }
.ex-skipintro[hidden] { display: none; }

/* ? help button — a square sibling of the Notes button, present the whole deck. */
.ex-help-btn { width: 26px; padding: 4px 0; text-align: center; }
/* Two quiet pulses right after the intro hands off — pays off "the ? button, top
   right" without words. Killed by the global reduced-motion animation block. */
.ex-help-btn.pulse { animation: helpPulse 1.2s ease-in-out 2; }
@keyframes helpPulse {
  0%, 100% { box-shadow: none; }
  50% { color: var(--ex-ai); border-color: var(--ex-ai); background: var(--ex-ai-soft); box-shadow: 0 0 0 4px var(--ex-ai-soft); }
}

/* Intro beats hide the presenter-only Notes toggle — less chrome for a first visit. */
#frame.is-intro #notes-toggle { display: none; }

/* INTRO 1: the stage breathes — stations swell in slow sequence so the first frame
   after "Enter" has a pulse, while staying honestly dormant (no scope, no color). */
#frame[data-orient="welcome"] .station { animation: introBreathe 3.6s ease-in-out infinite; }
#frame[data-orient="welcome"] #st-agent   { animation-delay: .3s; }
#frame[data-orient="welcome"] #st-model   { animation-delay: .6s; }
#frame[data-orient="welcome"] #st-context { animation-delay: .9s; }
#frame[data-orient="welcome"] #st-tool    { animation-delay: 1.2s; }
#frame[data-orient="welcome"] #st-action  { animation-delay: 1.5s; }
#frame[data-orient="welcome"] #st-monitor { animation-delay: 1.8s; }
#frame[data-orient="welcome"] #st-proof   { animation-delay: 2.1s; }
#frame[data-orient="welcome"] #st-human   { animation-delay: 2.4s; }
@keyframes introBreathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.78; }
}

/* Task pill — top-centre invitation ("Try it · …"); flips green when completed.
   Never blocks anything: pure microcopy, pointer-events none. */
.ex-intro-task {
  position: absolute; z-index: 21; top: 46px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ex-ai); background: var(--ex-ai-soft); border: 1px solid var(--ex-ai);
  border-radius: 999px; padding: 7px 16px; pointer-events: none;
}
.ex-intro-task.done { color: var(--ex-secure); background: #ECF6F1; border-color: var(--ex-secure); }
.ex-intro-task[hidden] { display: none; }
/* The pill anchors to its target, not a fixed slot: near the stepper on the welcome
   beat (the task IS "press Next"), above the station row on the inspect beat. The
   slider beat has no pill — its task lives in the legend header. */
#frame[data-orient="welcome"] .ex-intro-task { top: auto; bottom: 116px; }
#frame[data-orient="inspect"] .ex-intro-task { top: 26%; }

/* Five-scope legend — sits directly above the trust instrument on INTRO 3 only.
   The map for the territory the slider drags through. */
.ex-lgd {
  position: absolute; z-index: 19; left: 22px; bottom: 244px;
  box-sizing: border-box; width: 360px;
  background: var(--ex-panel); border: 1px solid var(--ex-line-2); border-radius: var(--ex-radius);
  /* Deliberately elevated: it overlays the (dim) leftmost stations on this beat,
     so the shadow must read as "card on top", never "misplaced sibling". */
  box-shadow: 0 20px 48px -18px rgba(17,24,39,0.45); padding: 12px 15px;
}
.ex-lgd[hidden] { display: none; }
.ex-lgd__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ex-lgd__h { font-family: var(--ex-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-ai); }
/* The slider beat's task, sitting beside the control it points at. */
.ex-lgd__task { font-family: var(--ex-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ex-ai); white-space: nowrap; }
.ex-lgd__task.done { color: var(--ex-secure); }
.ex-lgd__g {
  font-family: var(--ex-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ex-secure); margin: 2px 0 3px; padding: 0 6px;
}
.ex-lgd__g--build { color: var(--ex-risk); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ex-line-2); }
.ex-lgd__row {
  display: flex; align-items: center; gap: 10px; padding: 2.5px 6px; border-radius: 6px;
  font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ex-ink-2);
  transition: background .2s, color .2s;
}
.ex-lgd__row b { font-weight: 500; color: var(--ex-mute); width: 10px; flex: none; }
.ex-lgd__row.on { background: var(--ex-ai-soft); color: var(--ex-ink); }
.ex-lgd__row.on b { color: var(--ex-ai); }

/* Begin CTA — the stage-level handoff on INTRO 4; visually rhymes with the
   landing's primary "Enter presentation" button. Sits just above the stepper. */
.ex-intro-begin {
  /* Floats in the empty mid-band under the stations — the beat's single focal
     point, clear of the stepper so the two affordances never stack. */
  position: absolute; z-index: 21; bottom: 168px; left: 50%; transform: translateX(-50%);
  font-family: var(--ex-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--ex-ai); border: 1px solid var(--ex-ai); border-radius: 8px;
  padding: 12px 22px; cursor: pointer;
  box-shadow: 0 6px 16px -9px rgba(59, 91, 219, 0.55);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.ex-intro-begin:hover, .ex-intro-begin:focus-visible { background: #2457C5; border-color: #2457C5; box-shadow: 0 9px 22px -10px rgba(36, 87, 197, 0.5); }
.ex-intro-begin[hidden] { display: none; }

/* ===== Quick reference (the ? card) — content-on-scrim, whole-deck surface ===== */
.ex-qr { position: absolute; inset: 0; z-index: 60; }
.ex-qr[hidden] { display: none; }
.ex-qr__scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.42); }
.ex-qr__card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: min(720px, calc(100% - 48px)); max-height: calc(100% - 48px);
  overflow-y: auto;
  background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: var(--ex-radius);
  box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.5); padding: 18px 24px 22px;
}
.ex-qr__card:focus { outline: none; }
.ex-qr__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.ex-qr__title { font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-ai); }
.ex-qr__close { font-family: var(--ex-sans); font-size: 20px; line-height: 1; color: var(--ex-mute); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: color .2s; }
.ex-qr__close:hover, .ex-qr__close:focus-visible { color: var(--ex-ink); background: var(--ex-line); }
.ex-qr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.ex-qr__h { font-family: var(--ex-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ex-ai); margin: 14px 0 7px; }
.ex-qr__row { font-family: var(--ex-sans); font-size: 12.5px; line-height: 1.5; color: var(--ex-ink-2); margin: 0 0 7px; }
.ex-qr__row b { font-weight: 500; color: var(--ex-ink); }
.ex-qr__row i { font-style: italic; }
.ex-qr__scopegroup { font-family: var(--ex-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ex-mute); margin: 8px 0 4px; }
.ex-qr__own { font-weight: 500; }
.ex-qr__own--provider { color: var(--ex-secure); }
.ex-qr__own--you { color: var(--ex-risk); }
.ex-qr__replay {
  margin-top: 4px; font-family: var(--ex-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ex-ink-2); background: none; border: 1px solid var(--ex-line-2); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.ex-qr__replay:hover, .ex-qr__replay:focus-visible { color: var(--ex-ai); border-color: var(--ex-ai); background: var(--ex-ai-soft); }
@media (max-width: 600px) { .ex-qr__cols { grid-template-columns: 1fr; } }

/* ===== Mobile: panels become bottom-stacked, non-broken ===== */
@media (max-width: 768px) {
  /* Orientation chrome follows the stacked layout: legend hugs the relocated
     trust instrument; the task pill drops below the top band; the Begin CTA
     clears the now full-width instrument by sitting just above it. */
  .ex-lgd { left: 10px; right: 10px; width: auto; bottom: 236px; }
  .ex-intro-task { top: 42px; }
  /* The story panel is TOP-anchored on narrow screens, so the inspect pill moves
     to the above-instrument slot (26% from the top would sit inside the panel). */
  #frame[data-orient="inspect"] .ex-intro-task { top: auto; bottom: 244px; }
  .ex-intro-begin { bottom: 244px; }
  /* Fixed bottom-right would collide with the bottom trust instrument on narrow
     screens, so the story panel falls back to a top-anchored full-width band. */
  .ex-panel { left: 10px; right: 10px; top: 64px; bottom: auto; width: auto; max-width: none; max-height: 42%; }
  .ex-panel__title { font-size: 18px; }
  /* Trust instrument keeps its fixed-row grid; only the width relaxes to the stage. */
  .ex-trust { left: 10px; right: 10px; width: auto; max-width: none; bottom: 58px; }
  .ex-status { font-size: 10px; padding: 9px 12px; }
  /* Narrow screens: keep only the fixed beat cell (constant "BEAT 01 / 40" width);
     drop act/state so the readout stays compact and the notes button stays pinned. */
  .ex-readout { width: 86px; grid-template-columns: 86px; }
  .rd-act, .rd-state { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .station, .node-box, .node-focus, .node-glyph, .node-owner, .chips,
  .lenses, .tokens, .infra, .infra-bar, .seg, .ex-step, .overlay, .ov-rerun rect,
  .proof-state-btn rect, .proof-result rect,
  .agent-marker, .agent-marker.travel { transition: none !important; }
  /* Prelude handoff = a simple crossfade: no translate, no stagger. */
  #frame.prelude .ex-panel, #frame.prelude .ex-trust, #frame.prelude .ex-stepper { transform: none; }
  .ex-status, .ex-panel, .ex-trust, .ex-stepper, .ex-meta { transition: opacity 200ms ease !important; }
  #frame.deck-in .scene, #frame.deck-in .ex-status, #frame.deck-in .ex-trust,
  #frame.deck-in .ex-panel, #frame.deck-in .ex-stepper, #frame.deck-in .ex-meta { transition-delay: 0ms !important; }
  .ex-landing { transition: opacity 180ms ease; }
}