/* ============================================================
   Scenario cascade — FIGURE styling (the circular fill-nodes +
   fanning conditional tree) + the cascade-only drawer additions.
   Loaded by BOTH the standalone Cascade page and Decomposition v3
   (where it is the toggled instrument). Carries no chrome — only
   .casc* figure classes, the legend, the embed toggle, and the few
   drawer pieces the v3 base stylesheet does not already define.
   ============================================================ */

/* ── figure container ────────────────────────────────────────── */
.casc { max-width: 1320px; margin: 26px auto 0; padding: 0 32px; }
@media (max-width: 640px) { .casc { padding: 0 14px; } }
/* when embedded as the v3 instrument it inherits the instrument width */
.casc.casc-embed { max-width: none; margin: 4px 0 0; padding: 0; }
.casc__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 2px 14px; flex-wrap: wrap; }
.casc__title { font-family: var(--font-editorial); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.casc__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-top: 4px; }
.casc__legend { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.clg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.clg__sw { width: 15px; height: 9px; flex-shrink: 0; border-radius: 1px; }
.clg__sw.hold { background: var(--color-volt); }
.clg__sw.deny { background: var(--coral); }
.clg__sw.void { background-image: repeating-linear-gradient(45deg, rgba(138,143,152,0.5) 0 1px, transparent 1px 5px); background-color: transparent; border: 1px solid var(--color-border); }
.clg__sw.modal { background: var(--color-volt); height: 4px; }
/* colorblind cue (finding 8): ✓ / ✗ glyph alongside the swatch — a non-color
   signal for hold vs deny, matching the drawer stance chips. */
.clg__gl { font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1; margin: 0 1px 0 -3px; }
.clg__gl.hold { color: var(--color-volt); }
.clg__gl.deny { color: var(--coral); }

.casc__stage { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(26,34,48,0.32), rgba(16,24,32,0.0)); padding: 6px; }
.casc__svg { width: 100%; height: auto; display: block; }
.casc__foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 12px 4px 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.casc__caveat { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; max-width: 92ch; padding: 12px 15px; border: 1px solid var(--color-border); border-left: 2px solid var(--color-volt); border-radius: var(--radius-sm); background: rgba(206,255,0,0.025); }
.casc__caveat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-volt); flex-shrink: 0; margin-top: 4px; box-shadow: var(--figure-volt-glow); }
.casc__caveat span { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.62; letter-spacing: 0.01em; color: var(--color-text-secondary); }
.casc__caveat b { color: var(--color-text); font-weight: 500; }
.hatchword { color: var(--color-text-secondary); }
.coralword { color: var(--coral); }
.px-volt { color: var(--color-volt); }

/* ── instrument toggle (Decomposition v3) ────────────────────── */
/* Bands view: the cascade embed is hidden. Cascade view: the bands
   grid + descend cue are hidden, the cascade tree shows. */
.instrument .casc-embed { display: none; }
.instrument[data-view="cascade"] .casc-embed { display: block; }
.instrument[data-view="cascade"] .instrument__grid { display: none; }

/* ── SVG figure primitives — circular fill-nodes + fanning tree ── */
.casc-colhead { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; fill: var(--color-text-tertiary); text-transform: uppercase; }
.casc-svgfoot { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; fill: var(--color-text-tertiary); text-transform: uppercase; }

/* fanning branches — ONE unified channel; separation only on interaction */
.casc-br { fill: none; stroke-linecap: butt; stroke-linejoin: round; stroke: #243140; opacity: 1; transition: opacity var(--dur) var(--ease), stroke var(--dur) var(--ease); }
.casc-br.trunk { stroke-linecap: round; }
.casc-br.modal { stroke: var(--color-volt); opacity: 0.82; }
/* Good Enough — the DISJUNCTIVE side-leg: a thin dashed line in a muted tone so
   it reads as a marked special leg, NOT a clean conjunctive fork. */
.casc-br.disj { stroke: #5a6573; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0.9; }
.casc-brlayer.has-hover .casc-br { opacity: 0.12; }
.casc-brlayer.has-hover .casc-br.hot { opacity: 1; stroke: #6a7b8e; }
.casc-brlayer.has-hover .casc-br.hot.modal { stroke: var(--color-volt); }
.casc-brlayer.has-hover .casc-br.hot.disj { stroke: #8a93a0; stroke-dasharray: 5 4; }

/* circular decision nodes — the RING IS THE DATA: ONE whole-circumference ring
   split into hold(Volt) / deny(Coral) / silent(hatched track) arcs at their true
   shares; node SIZE + group OPACITY scale with coverage (engaged_n). plate is
   OPAQUE so the channel merges seamlessly beneath each node. */
.casc-plate { fill: #141c26; }
.casc-node-outline { fill: none; stroke: var(--color-border); stroke-width: 1; }
.casc-node-hub { fill: rgba(138,143,152,0.55); }
/* silent = the WHOLE hatched track; a high-silent node reads SPARSE (mostly
   hatch, little volt/coral) — honest. Hatch via a dashed ring stroke. */
.casc-ring-track { stroke: rgba(138,143,152,0.30); stroke-dasharray: 1.5 3.5; }
.casc-ring-hold  { stroke: var(--color-volt); stroke-linecap: butt; }
/* deny arc = CORAL (the spec's must-fail hue) + a non-color cue (finding 8): a
   dashed stroke so HOLD (solid volt) vs DENY (dashed coral) reads without hue. */
.casc-ring-deny  { stroke: var(--coral); stroke-linecap: butt; opacity: 0.92; stroke-dasharray: 4 2.5; }
.casc-nodeg:hover .casc-node-outline,
.casc-nodeg:focus-visible .casc-node-outline { stroke: var(--color-text-secondary); }
.casc-nodeg { transition: opacity var(--dur) var(--ease); }
.casc-nodeg:focus-visible { outline: none; }
.casc-node-ix { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; fill: var(--color-text); }
.casc-node-nm { font-family: var(--font-editorial); font-size: 11.5px; font-style: italic; fill: var(--color-text-secondary); }
.casc-node-ctx { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; fill: var(--color-text-tertiary); text-transform: uppercase; }
.casc-ctxtie { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 4; }
.casc-ctxlbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; fill: var(--color-text-tertiary); text-transform: uppercase; }

/* START + fork cues */
.casc-start { fill: var(--color-text-secondary); }
.casc-cue { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; fill: var(--color-text-secondary); text-transform: uppercase; }
.casc-cue.dim { fill: var(--color-text-tertiary); }
.casc-cue.gray { fill: var(--color-text-tertiary); }

/* leaf cards (sized by terminal mass) */
.casc-leaf { cursor: pointer; transition: opacity var(--dur) var(--ease); }
.casc-leaf:focus-visible { outline: none; }
.casc-leaf.dim { opacity: 0.32; }
.casc-leaf-box { fill: rgba(138,143,152,0.07); stroke: var(--color-border); stroke-width: 1; }
/* DE-CROWN: the heaviest-FLOW leaf is NOT a winner. No volt fill / volt border
   box — only a faint volt-tinted card + a thin volt left edge-tick (.casc-leaf-edge)
   and a relabelled eyebrow. Nothing reads as "the most likely outcome". */
.casc-leaf-box.flow { fill: rgba(206,255,0,0.035); stroke: var(--color-border); stroke-width: 1; }
.casc-leaf-edge { fill: var(--color-volt); opacity: 0.7; }
.casc-leaf:hover .casc-leaf-box { stroke: var(--color-text-secondary); }
.casc-leaf:focus-visible .casc-leaf-box { stroke: var(--color-text); }
.casc-leaf-eye { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; fill: var(--color-text-tertiary); text-transform: uppercase; }
.casc-leaf-eye.flow { fill: var(--color-volt); opacity: 0.78; letter-spacing: 0.06em; }
.casc-leaf-eye.on { fill: var(--color-volt); }
.casc-leaf-nm { font-family: var(--font-editorial); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; fill: var(--color-text); }
.casc-leaf-nm.sm { font-size: 13.5px; font-weight: 600; }

/* ── ONE-EXPERT reach states ─────────────────────────────────────
   Light only the path the person is CONSISTENT with; dim the contradicted /
   unengaged outcomes (sparse-by-design — most people engage few constraints). */
.casc-leaf.reach-off { opacity: 0.26; }
.casc-leaf.reach-on .casc-leaf-box.reach-on { fill: rgba(206,255,0,0.05); stroke: rgba(206,255,0,0.4); }
.casc-br.reach-off { opacity: 0.1 !important; }
.casc-br.reach-on { opacity: 0.95; stroke: var(--color-volt); }
.casc-br.reach-on.disj { stroke: #8a93a0; }
/* in one-expert mode the heaviest-flow concept is suppressed entirely (panel
   concept) — any leftover .modal branch styling is neutralised by reach state. */
.casc-brlayer.expert .casc-br.modal { stroke: var(--color-volt); }

/* ── cascade-only drawer additions (v3 base supplies the rest) ── */
.drawer__p .volt { color: var(--color-volt); }
.drawer__p .gray { color: var(--color-text-secondary); }
.drawer__caveat {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.62; letter-spacing: 0.01em;
  color: var(--color-text-secondary); padding: 11px 13px; border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-volt); border-radius: var(--radius-sm); background: rgba(206,255,0,0.025);
}
.ccarow { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; padding: 5px 0; }
.ccarow__nm { font-size: 11.5px; line-height: 1.4; color: var(--color-text-secondary); }
.ccarow__bar { display: flex; height: 8px; background: repeating-linear-gradient(45deg, rgba(138,143,152,0.14) 0 1px, transparent 1px 4px); border: 1px solid var(--color-border-subtle); }
.ccarow__bar i { height: 100%; display: block; }
.ccarow__bar i.h { background: var(--color-volt); }
.ccarow__bar i.d { background: var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .casc-br, .casc-leaf, .drawer, .scrim { transition: none !important; }
}