/* stage-dialog.css
 * Production stage-dialog stylesheet — extracted from stage-dialog-mock.html
 * (Tranche C, 2026-05-08). The mock and the production stage-dialog.js both
 * link to this file so visual parity is guaranteed.
 *
 * To edit visuals: change here and both surfaces update. The mock remains the
 * canonical visual reference; this file is its byte-equivalent extraction.
 *
 * IMPORTANT: when the mock is iterated visually, port the new CSS back to this
 * file. Don't let the mock's inline <style> drift from this stylesheet.
 */

  /* ═══ Reset & base ═══ */
  *, *::before, *::after { box-sizing: border-box; }
  :root {
    --bg-0: #0a0e1a;
    --bg-1: #111827;
    --bg-2: #1a2233;
    --bg-3: #232b3d;
    --line: #2a3447;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-muted: #64748b;
    --accent: #60a5fa;
    --accent-dim: #3b82f6;
    --gold: #facc15;
    --emerald: #34d399;
    --rose: #fb7185;
    --amber: #fbbf24;
    --violet: #a78bfa;
    --teal: #2dd4bf;
    --envoy-glow: 0 0 60px rgba(96, 165, 250, 0.25), 0 0 120px rgba(167, 139, 250, 0.15);
  }
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: radial-gradient(ellipse at top, #1a1f3a 0%, var(--bg-0) 60%);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
  }
  button { font-family: inherit; cursor: pointer; }

  /* ═══ Layout shell ═══
     Two rows only after v6: top strip + stage shell. The bottom voice bar
     and inventory ribbon were absorbed/removed; everything below the top
     strip is the live work surface. */
  .shell {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    max-height: 100vh;
  }

  /* ═══ Top strip ═══ */
  /* Scoped under .stage-dialog-shell so we don't bleed into the workshop's
     own .top-strip (which is `position:fixed; top:0; height:46px`). The
     dialog's top-strip must flow inside the grid, not float over the page. */
  .stage-dialog-shell .top-strip {
    position: relative;
    top: auto; left: auto; right: auto;
    height: auto;
    width: auto;
    display: flex; align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    z-index: 10;
    min-height: 44px;
    box-shadow: none;
  }
  .top-strip__wo {
    font: 600 12px/1.2 'Inter';
    color: var(--text-dim);
    letter-spacing: 0.04em;
    max-width: 260px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-strip__wo b { color: var(--text); margin-right: 6px; }
  .stage-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(167, 139, 250, 0.15));
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--accent);
    font: 600 11px/1 'Inter';
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .stage-chip__num { color: var(--text-dim); font-weight: 500; }
  .lane-pill {
    padding: 3px 8px; border-radius: 4px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--violet);
    font: 600 10px/1 'Inter';
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  /* "WO has progressed" chip — shown in the top strip when auto-proceed
     advanced the WO server-side while the dialog is pinned to an earlier
     stage. Click follows the dialog forward to the WO's current stage. */
  .stage-progressed-chip {
    appearance: none;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.45);
    color: #67e8f9;
    font: 600 10px/1 'Inter';
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    animation: stage-progressed-pulse 1.8s ease-in-out infinite;
  }
  .stage-progressed-chip:hover {
    background: rgba(34, 211, 238, 0.18);
    border-color: rgba(34, 211, 238, 0.7);
  }
  @keyframes stage-progressed-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
  }
  .stage-selector {
    margin-left: auto;
    display: inline-flex; gap: 2px;
    background: var(--bg-1); border: 1px solid var(--line);
    padding: 2px; border-radius: 6px;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .stage-selector button {
    background: transparent; border: 0; color: var(--text-dim);
    padding: 4px 7px; border-radius: 4px;
    font: 500 10px/1 'Inter';
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .stage-selector button.active,
  .stage-selector button.is-current {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(167, 139, 250, 0.18));
    color: var(--text);
    border: 1px solid rgba(96, 165, 250, 0.4);
    padding: 3px 6px;
  }
  .stage-selector button.is-past {
    color: var(--emerald);
    opacity: 0.75;
  }
  .stage-selector button.is-past::before {
    content: '✓ ';
    font-size: 9px;
    opacity: 0.85;
  }
  .stage-selector button.is-future {
    color: var(--text-muted);
    opacity: 0.45;
  }
  .stage-selector button.is-future:hover {
    opacity: 0.7;
  }
  .mode-toggle {
    display: inline-flex; gap: 4px;
    background: var(--bg-1); border: 1px solid var(--line);
    padding: 3px; border-radius: 6px;
  }
  .mode-toggle button {
    background: transparent; border: 0; color: var(--text-dim);
    padding: 4px 12px; border-radius: 4px;
    font: 600 11px/1 'Inter';
  }
  .mode-toggle button.active {
    background: linear-gradient(135deg, var(--accent), var(--violet));
    color: #fff;
  }
  .top-close {
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim); width: 28px; height: 28px;
    border-radius: 6px; font-size: 14px;
  }

  /* ═══ Stage shell ═══
     Layout: Envoy character sheet · Main turn content (with banner) ·
     Segment rail (vertical carousel, replaces scrollbar) · Compass rail
     (satellite popover icons). */
  .stage-shell {
    display: grid;
    grid-template-columns: 268px 1fr 38px 48px;
    gap: 10px;
    padding: 12px 14px;
    overflow: hidden;
    position: relative;
    min-height: 0;
  }

  /* ═══ Envoy Character Sheet ═══
     Single integrated panel: avatar → name/persona → stats → way →
     ambient roles → turn nav. Internal scroll if viewport is tight,
     with hidden scrollbar so visual chrome stays clean. */
  .envoy {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .envoy::-webkit-scrollbar { display: none; }
  .envoy__divider {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 10px 0 8px;
    opacity: 0.6;
  }
  .envoy__section-label {
    font: 700 9px/1 'Inter';
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .envoy__section-label b {
    color: var(--text-dim);
    font-weight: 700;
  }
  .envoy::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  /* v12 avatar — animated SVG glyph per work role.
     "Ancient alien tech" feel: nested rotors, gentle float, pulsing core,
     soft drop-shadow glow. Replaces the static portrait. */
  .envoy__avatar {
    position: relative;
    width: 100%;
    height: 158px;
    border-radius: 12px;
    background:
      radial-gradient(circle at 50% 35%, rgba(96, 165, 250, 0.32) 0%, rgba(167, 139, 250, 0.18) 35%, transparent 70%),
      linear-gradient(180deg, #1f2a44 0%, #0f1626 100%);
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: var(--envoy-glow);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .envoy__avatar--glyph .glyph {
    width: 70%;
    height: 70%;
    animation: glyph-float 7.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.35));
  }
  .envoy__avatar--glyph .glyph--executor { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4)); }
  .envoy__avatar--glyph .glyph--verifier { filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4)); }
  .envoy__avatar--glyph .glyph--closer   { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4)); }
  .envoy__avatar--glyph .glyph--diplomat { filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4)); }

  /* Glyph rotors — different speeds + directions = lifelike motion. */
  .glyph__rotor {
    transform-origin: 50% 50%;
    transform-box: fill-box;
  }
  .glyph__rotor--slow    { animation: glyph-rotate 22s linear infinite; }
  .glyph__rotor--counter { animation: glyph-rotate 16s linear infinite reverse; }
  .glyph__rotor--medium  { animation: glyph-rotate 11s linear infinite; }
  .glyph__core {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: glyph-pulse-core 2.6s ease-in-out infinite;
  }
  .glyph__core--fast { animation-duration: 1.6s; }
  .glyph__pulse {
    animation: glyph-pulse-soft 3.4s ease-in-out infinite;
  }
  @keyframes glyph-rotate { 100% { transform: rotate(360deg); } }
  @keyframes glyph-pulse-core {
    0%, 100% { opacity: 0.65; transform: scale(0.86); }
    50%      { opacity: 1;    transform: scale(1.18); }
  }
  @keyframes glyph-pulse-soft {
    0%, 100% { opacity: 0.62; }
    50%      { opacity: 1; }
  }
  @keyframes glyph-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25%      { transform: translateY(-4px) translateX(2px); }
    50%      { transform: translateY(0) translateX(0); }
    75%      { transform: translateY(4px) translateX(-2px); }
  }

  /* Mini glyph in the dialog banner — replaces the small avatar circle. */
  .dialog-banner__avatar--glyph {
    background: rgba(10, 14, 26, 0.4);
    overflow: hidden;
  }
  .dialog-banner__avatar--glyph .glyph--mini {
    width: 100%; height: 100%;
    animation: glyph-float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.5));
  }
  .dialog-banner__avatar--glyph .glyph--mini.glyph--executor { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55)); }
  .dialog-banner__avatar--glyph .glyph--mini.glyph--verifier { filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.55)); }
  .dialog-banner__avatar--glyph .glyph--mini.glyph--closer   { filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.55)); }
  .dialog-banner__avatar--glyph .glyph--mini.glyph--diplomat { filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.55)); }

  /* Legacy class kept for the mock (which still uses the static image
     directly until that mock is regenerated). */
  .envoy__avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 14%;
    display: block;
    transition: transform 0.5s ease;
  }
  .envoy__avatar:hover .envoy__avatar-img { transform: scale(1.03); }
  /* Legacy stub kept for compatibility with viewBeat pose-swap calls — pose
     icon overlays the avatar in the bottom-right when active turn changes. */
  .envoy__portrait {
    /* deprecated wrapper — no styles needed */
    position: relative;
    width: 100%; aspect-ratio: 1 / 0.92;
    overflow: hidden;
  }
  .envoy__silhouette {
    /* hidden via inline style; kept for future pose-overlay if desired */
  }
  /* Mood ring */
  .envoy__mood-ring {
    position: absolute; inset: 6px;
    border-radius: 10px;
    border: 2px solid transparent;
    background:
      conic-gradient(from 0deg,
        var(--emerald) 0deg,
        var(--accent) 120deg,
        var(--violet) 240deg,
        var(--emerald) 360deg) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.55;
    animation: spin 14s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .envoy__class-pill {
    position: absolute; top: 8px; left: 8px;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(96, 165, 250, 0.4);
    padding: 3px 8px; border-radius: 5px;
    font: 700 9px/1 'Inter';
    color: var(--accent);
    letter-spacing: 0.08em; text-transform: uppercase;
    z-index: 2;
  }
  .envoy__pillars-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: var(--violet);
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
  }
  .envoy__pillars-badge:hover {
    background: rgba(167, 139, 250, 0.15);
    transform: scale(1.08);
  }
  .envoy__confidence {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(10, 14, 26, 0.85);
    border: 1px solid var(--line);
    padding: 4px 8px; border-radius: 6px;
    font: 600 10px/1.2 'Inter';
    color: var(--text-dim);
  }
  .envoy__confidence b { color: var(--emerald); font-weight: 700; }

  .envoy__name {
    font: 700 14px/1.2 'Inter';
    margin: 8px 0 2px;
  }
  .envoy__persona {
    font: 500 10px/1.4 'Inter';
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 8px;
  }

  /* (envoy-dialog-box styles removed — dialog moved to .dialog-banner at
     the top of the main area in v8.) */

  /* Way of working zone · consolidated · holds way glyphs + conf bar +
     ambient role glyphs + voice icons. Single visual block.
     v11 — spread out now that the avatar is shorter; uses the freed
     vertical space for breathing room. */
  .envoy-way-zone {
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .envoy-way-zone__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
  }
  .envoy-stat--inline {
    margin-top: 0;
  }

  /* Envoy traits / stats · legacy class kept for compat */
  .envoy-traits {
    display: flex; flex-direction: column; gap: 4px;
  }
  .envoy-traits__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
  }
  .envoy-traits__roles {
    display: flex; gap: 3px;
    align-items: center;
  }
  .ambient-glyph {
    position: relative;
    width: 28px; height: 26px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
  }
  .ambient-glyph:hover { color: var(--text); border-color: var(--accent); }
  .ambient-glyph--strategist:not(.ambient-glyph--idle) { color: var(--teal); border-color: rgba(45, 212, 191, 0.4); }
  .ambient-glyph--optimiser:not(.ambient-glyph--idle)  { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); }
  .ambient-glyph--chronicler:not(.ambient-glyph--idle) { color: var(--violet); border-color: rgba(167, 139, 250, 0.4); }
  .ambient-glyph--observer:not(.ambient-glyph--idle)   { color: var(--accent); border-color: rgba(96, 165, 250, 0.4); }
  .ambient-glyph--idle { opacity: 0.45; }
  .ambient-glyph__count {
    position: absolute; top: -3px; right: -3px;
    background: var(--rose);
    color: #fff;
    font: 700 7px/1 'Inter';
    font-style: normal;
    padding: 1px 3px;
    border-radius: 5px;
    min-width: 11px; text-align: center;
  }
  .envoy-traits__voice {
    display: flex; gap: 2px;
  }
  .voice-icon {
    width: 26px; height: 26px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .voice-icon:hover { color: var(--text); border-color: var(--accent); }
  .voice-icon.active {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Stat rows kept (used inside .envoy-traits) */
  .envoy-stats {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 6px;
  }
  .envoy-stat {
    display: flex; align-items: center; gap: 6px;
    font: 500 10px/1.3 'Inter';
    color: var(--text-dim);
  }
  .envoy-stat__label {
    font: 700 9px/1 'Inter';
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 32px; flex-shrink: 0;
  }
  .envoy-stat__bar {
    flex: 1; height: 6px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  .envoy-stat__bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--violet));
    border-radius: 3px;
  }
  .envoy-stat__num {
    font: 700 10px/1 'JetBrains Mono', monospace;
    color: var(--text);
    width: 28px; text-align: right;
  }
  .envoy-stat__val {
    font: 500 10px/1.3 'Inter';
    color: var(--text);
    flex: 1;
  }

  /* Way-of-working glyphs · chip row · v11 spread for visual room */
  .way-glyphs {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .way-glyph {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 4px;
    background: rgba(45, 212, 191, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.25);
    color: var(--teal);
    font: 600 10px/1 'Inter';
  }
  .way-glyph--mandatory { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.35); color: var(--gold); }

  /* Ambient roles · compact rows · click to expand inline detail */
  .ambient-roles {
    display: flex; flex-direction: column; gap: 2px;
  }
  .ambient-role {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 5px 7px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 4px;
    color: var(--text-dim);
    text-align: left;
    transition: all 0.15s ease;
    flex-shrink: 0;
    cursor: pointer;
  }
  .ambient-role:hover { background: var(--bg-2); color: var(--text); }
  .ambient-role--strategist { border-left-color: var(--teal); }
  .ambient-role--optimiser  { border-left-color: var(--amber); }
  .ambient-role--chronicler { border-left-color: var(--violet); }
  .ambient-role--observer   { border-left-color: var(--accent); }
  .ambient-role__icon {
    font-size: 12px;
    width: 14px; flex-shrink: 0; text-align: center;
  }
  .ambient-role__name {
    font: 600 10px/1 'Inter';
    flex: 1;
  }
  .ambient-role__count {
    font: 700 9px/1 'Inter';
    color: var(--rose);
    background: rgba(251, 113, 133, 0.12);
    padding: 2px 5px;
    border-radius: 3px;
    min-width: 16px;
    text-align: center;
  }
  .ambient-role__count--idle {
    color: var(--text-muted);
    background: var(--bg-2);
    font-weight: 500;
    text-transform: lowercase;
  }
  .ambient-role__chev {
    color: var(--text-muted);
    font: 600 12px/1 'Inter';
    transition: transform 0.18s ease;
  }
  .ambient-role.is-open .ambient-role__chev {
    transform: rotate(90deg);
    color: var(--accent);
  }
  .ambient-role__detail {
    display: none;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-top: 0;
    margin-top: -2px;
    padding: 7px 9px;
    border-radius: 0 0 4px 4px;
    font: 500 10px/1.4 'Inter';
    color: var(--text);
    animation: cameoIn 0.3s ease;
  }
  .ambient-role__detail.is-open {
    display: block;
  }
  .ambient-role__detail b { color: var(--text); font-weight: 700; }
  @keyframes cameoIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  /* ═══ Dialog Stage (center) ═══
     Snap-scroll segments — each `.seg` fills the viewport-available area.
     Native scrollbar hidden; navigation lives in the `.seg-rail` (own
     column to the right). A persistent dialog banner sits at the top. */
  .dialog {
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
    gap: 10px;
  }

  /* ═══ Dialog banner · persistent at top of main area ═══
     Operative-banner-style: avatar circle + speech text + status pill.
     Always visible; updates per active turn. */
  .dialog-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.10), rgba(167, 139, 250, 0.06));
    border: 1px solid rgba(96, 165, 250, 0.30);
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
  }
  .dialog-banner::before {
    /* speech-bubble tail pointing left toward the Envoy card */
    content: '';
    position: absolute;
    left: -7px; top: 50%; transform: translateY(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.13), rgba(167, 139, 250, 0.08));
    border-left: 1px solid rgba(96, 165, 250, 0.30);
    border-bottom: 1px solid rgba(96, 165, 250, 0.30);
  }
  .dialog-banner__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
  }
  .dialog-banner__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 12%;
  }
  .dialog-banner__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .dialog-banner__quote {
    font: 500 13px/1.4 'Inter';
    color: var(--text);
    font-style: italic;
  }
  .dialog-banner__sub {
    font: 600 10px/1.3 'Inter';
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }
  .dialog-banner__chip {
    font: 700 10px/1 'JetBrains Mono', monospace;
    color: var(--accent);
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
    padding: 5px 9px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .dialog__beat-wrap {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 4px;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
  }
  .dialog__beat-wrap::-webkit-scrollbar { display: none; }
  /* Segment · one viewport-sized slide. Each fills the available height
     between the dialog banner and the bottom of the viewport — no visible
     overflow. Content is compacted to fit; if it would exceed the slide
     it is clipped (overflow:hidden as safety net). Centered vertically
     so short slides feel intentional, not top-anchored. */
  .seg {
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 14px 20px;
    border-bottom: 1px dashed rgba(96, 165, 250, 0.14);
    display: flex; flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: 10px;
  }
  .seg > * { min-height: 0; }
  .seg:last-of-type { border-bottom: 0; }

  /* Segment rail · own grid column (sibling of <main>) so it never
     overlaps content. Each radio dot is a section; the connecting line
     fills as the active dot advances. */
  .seg-rail {
    align-self: center;
    justify-self: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
    padding: 6px 4px;
    background: rgba(10, 14, 26, 0.65);
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    z-index: 5;
  }
  .seg-rail.is-empty { visibility: hidden; }
  .seg-radio {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    width: 22px; height: 22px;
    padding: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
  }
  .seg-radio__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1.5px solid var(--text-muted);
    transition: all 0.2s ease;
  }
  .seg-radio__label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 8px/1 'JetBrains Mono', monospace;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .seg-radio.is-visited .seg-radio__dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.4);
  }
  .seg-radio.is-active .seg-radio__dot {
    background: linear-gradient(135deg, var(--accent), var(--violet));
    border-color: #fff;
    width: 12px; height: 12px;
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.7), 0 0 24px rgba(167, 139, 250, 0.4);
    animation: railPulse 1.8s ease-in-out infinite;
  }
  .seg-radio:hover .seg-radio__dot {
    transform: scale(1.2);
    border-color: var(--accent);
  }
  .seg-radio:hover .seg-radio__label,
  .seg-radio.is-active .seg-radio__label {
    opacity: 1;
    color: #fff;
    z-index: 1;
  }
  @keyframes railPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(96, 165, 250, 0.5), 0 0 18px rgba(167, 139, 250, 0.3); }
    50%      { box-shadow: 0 0 18px rgba(96, 165, 250, 0.85), 0 0 30px rgba(167, 139, 250, 0.55); }
  }
  /* Connecting rail between dots — fills based on progress */
  .seg-rail__line {
    width: 2px;
    height: 22px;
    background: rgba(96, 165, 250, 0.15);
    position: relative;
    border-radius: 1px;
    overflow: hidden;
  }
  .seg-rail__fill {
    position: absolute; top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, var(--accent), var(--violet));
    border-radius: 1px;
    transition: height 0.4s ease;
  }
  .beat {
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: beatIn 0.5s ease;
  }
  @keyframes beatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .beat--current {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 40px rgba(96, 165, 250, 0.12), 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  /* Segmented beat — sections own the visual chrome; the wrapper stays
     transparent so segments snap independently. */
  .beat--segmented {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    animation: none;
  }
  .beat--segmented::before { display: none; }
  /* Speech bubble tail (only on non-segmented current beats) */
  .beat--current:not(.beat--segmented)::before {
    content: ''; position: absolute;
    left: -10px; top: 30px;
    width: 18px; height: 18px;
    background: var(--bg-1);
    border-left: 1px solid rgba(96, 165, 250, 0.4);
    border-bottom: 1px solid rgba(96, 165, 250, 0.4);
    transform: rotate(45deg);
  }
  .beat__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 0;
    font: 600 10px/1 'Inter';
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .beat__kind {
    padding: 3px 8px; border-radius: 4px;
    background: rgba(96, 165, 250, 0.12);
    color: var(--accent);
    border: 1px solid rgba(96, 165, 250, 0.3);
  }
  .beat__kind--question { background: rgba(250, 204, 21, 0.12); color: var(--gold); border-color: rgba(250, 204, 21, 0.3); }
  .beat__kind--proposal { background: rgba(52, 211, 153, 0.12); color: var(--emerald); border-color: rgba(52, 211, 153, 0.3); }
  .beat__kind--reasoning { background: rgba(167, 139, 250, 0.12); color: var(--violet); border-color: rgba(167, 139, 250, 0.3); }
  .beat__turn-num {
    margin-left: auto;
    color: var(--text-muted); font-weight: 500; letter-spacing: 0;
    text-transform: none;
  }
  .beat__title {
    font: 700 18px/1.3 'Inter';
    margin: 0;
    color: var(--text);
  }
  .beat__envoy-says {
    font: 400 14px/1.55 'Inter';
    color: var(--text);
    margin: 0;
  }
  .beat__envoy-says em { color: var(--accent); font-style: normal; font-weight: 600; }

  /* Embedded artefact card · v9 compacted to fit the segment slide. */
  .artefact {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0;
  }
  .artefact__label {
    font: 700 9px/1 'Inter';
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .artefact__id {
    color: var(--accent);
    font-weight: 700;
  }
  .artefact__title {
    font: 600 13px/1.3 'Inter';
    margin: 0 0 6px;
  }
  .artefact__body {
    font: 400 12px/1.5 'Inter';
    color: var(--text-dim);
  }
  .artefact__row {
    display: grid;
    grid-template-columns: 102px 1fr;
    gap: 10px;
    padding: 3px 0;
    font: 500 11px/1.45 'Inter';
    color: var(--text-dim);
  }
  .artefact__row b {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.08em;
    padding-top: 2px;
  }

  .confidence-band {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: var(--emerald);
    font: 600 11px/1 'Inter';
    margin-top: 6px;
  }
  .confidence-band__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 8px var(--emerald);
  }
  .confidence-band--mid { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: var(--amber); }
  .confidence-band--mid .confidence-band__dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
  .confidence-band--low { background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.3); color: var(--rose); }
  .confidence-band--low .confidence-band__dot { background: var(--rose); box-shadow: 0 0 8px var(--rose); }

  /* ═══ Interactive infographic primitives (Option A — embedded decisions) ═══ */
  /* Visual centerpiece · before / after card with toggle */
  .ig-visual {
    margin: 0;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .ig-visual__title {
    font: 700 10px/1 'Inter';
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .ig-visual__toggle {
    background: var(--bg-3); border: 1px solid var(--line);
    color: var(--text-dim);
    font: 600 9px/1 'Inter';
    text-transform: none;
    letter-spacing: 0;
    padding: 3px 7px;
    border-radius: 3px;
  }
  .ig-visual__cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
  }
  .ig-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
  }
  .ig-card__label {
    font: 700 9px/1 'Inter';
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 5px;
  }
  .ig-card--after .ig-card__label { color: var(--accent); }
  .ig-card__hero {
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: flex-start;
    min-height: 44px;
    padding: 6px;
    background: var(--bg-0);
    border: 1px dashed var(--line);
    border-radius: 6px;
    margin-bottom: 4px;
  }
  .ig-card__note {
    font: 500 10px/1.3 'Inter';
    color: var(--text-dim);
  }
  .ig-card__arrow {
    color: var(--accent);
    font-size: 18px; font-weight: 700;
  }
  .ig-strap {
    font: 700 13px/1.2 'Inter';
    color: var(--text);
    letter-spacing: 0.05em;
    align-self: center;
  }
  .ig-chip {
    display: inline-block;
    background: var(--bg-3);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: var(--accent);
    border-radius: 4px;
    padding: 3px 7px;
    font: 700 11px/1 'Inter';
    letter-spacing: 0.06em;
  }
  .ig-chip--lg { font-size: 14px; padding: 5px 9px; }
  .ig-chip--md { font-size: 12px; padding: 4px 8px; opacity: 0.92; }
  .ig-chip--sm { font-size: 10px; padding: 3px 6px; opacity: 0.78; }
  .ig-card--dim { opacity: 0.55; transition: opacity 0.25s ease; }

  /* Trade-off bars · tightened to share segment vertical space */
  .ig-tradeoff {
    margin-top: 6px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .ig-bar {
    display: grid;
    grid-template-columns: 60px 1fr 70px;
    gap: 8px;
    align-items: center;
    font: 600 10px/1 'Inter';
  }
  .ig-bar__label { color: var(--text-muted); letter-spacing: 0.05em; }
  .ig-bar__track {
    height: 6px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: hidden;
  }
  .ig-bar__track i {
    display: block; height: 100%;
    border-radius: 3px;
  }
  .ig-bar__delta { font-weight: 700; text-align: right; }

  /* Embedded micro-decisions (inline answer pickers) · v9 compacted */
  .ig-decisions {
    margin: 0;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .ig-decisions__title {
    font: 700 10px/1 'Inter';
    color: var(--text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .ig-decisions__hint {
    font: 500 10px/1 'Inter';
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
  }
  .ig-q {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 7px 9px;
    margin-bottom: 6px;
  }
  .ig-q:last-child { margin-bottom: 0; }
  .ig-q--blocker  { border-left-color: var(--rose); }
  .ig-q--advisory { border-left-color: var(--gold); }
  .ig-q__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
  }
  .ig-q__sev {
    font: 700 9px/1 'Inter';
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
  }
  .ig-q__sev--blocker  { background: rgba(251, 113, 133, 0.15); color: var(--rose); }
  .ig-q__sev--advisory { background: rgba(250, 204, 21, 0.15); color: var(--gold); }
  .ig-q__text {
    font: 600 11.5px/1.35 'Inter';
    color: var(--text);
    flex: 1;
  }
  .ig-q__pickers {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .ig-pick {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--text);
    text-align: left;
    transition: all 0.15s ease;
    cursor: pointer;
    min-width: 0;
  }
  .ig-pick:hover {
    background: var(--bg-2);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .ig-pick.is-selected {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(167, 139, 250, 0.10));
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.18);
  }
  .ig-pick b {
    font: 700 10.5px/1.15 'Inter';
    color: var(--text);
  }
  .ig-pick i {
    font: 500 9px/1.15 'Inter';
    color: var(--text-muted);
    font-style: normal;
  }
  .ig-q__envoy-default {
    margin-top: 4px;
    font: 500 10px/1.3 'Inter';
    color: var(--accent);
    font-style: italic;
  }

  /* Floating open-question chips */
  .open-q-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.3);
    color: var(--gold);
    font: 600 10px/1 'Inter';
    margin: 2px 4px 2px 0;
  }
  .open-q-chip--blocker {
    background: rgba(251, 113, 133, 0.08);
    border-color: rgba(251, 113, 133, 0.3);
    color: var(--rose);
  }

  /* ═══ Turn-action grid · icon-only · 6 cells in a tight row ═══
     Hover gives full label + sub-text via [data-tooltip]. Each cell ~32px
     square. Primary action (Approve) is highlighted. Banner replaces
     the grid when viewing past/queued turns. */
  .envoy-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }
  .opt {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 4px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-dim);
    transition: all 0.15s ease;
    position: relative;
    min-width: 0;
    cursor: pointer;
  }
  .opt:hover {
    background: var(--bg-2);
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-1px);
  }
  .opt__icon {
    font-size: 16px; line-height: 1;
  }
  /* Hide the label; keep in DOM for screen readers + tooltip fallback */
  .opt__main {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
  .opt__kbd {
    position: absolute; bottom: 1px; right: 2px;
    font: 700 7px/1 'JetBrains Mono', monospace;
    color: var(--text-muted);
    opacity: 0.7;
  }
  .opt--primary {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(167, 139, 250, 0.14));
    border-color: var(--accent);
    color: var(--accent);
  }
  .opt--primary:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.32), rgba(167, 139, 250, 0.20));
    color: var(--text);
  }
  .opt--disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
  }
  .options-banner {
    grid-column: 1 / -1;
    aspect-ratio: auto;
  }
  /* Disabled / contextual options banner — used when viewing a past or queued turn */
  .options-banner {
    grid-column: 1 / -1;
    padding: 8px 12px;
    background: var(--bg-1);
    border: 1px dashed var(--line);
    border-radius: 8px;
    font: 500 12px/1.3 'Inter';
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .options-banner b { color: var(--text); font-weight: 600; }
  .options-banner button {
    background: var(--bg-3); border: 1px solid var(--line);
    color: var(--accent);
    padding: 5px 10px; border-radius: 6px;
    font: 600 11px/1 'Inter';
  }
  .options-banner button:hover { border-color: var(--accent); }

  /* ═══ Compass rail (thin · right) — icons only; click → popover ═══
     Scrollbar hidden visually; if a tight viewport pushes content over,
     it scrolls silently. Icons sized so all 10 fit at typical heights. */
  .compass-rail {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 5px 3px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
  }
  .compass-rail::-webkit-scrollbar { display: none; }
  .compass-rail__label {
    font: 700 8px/1.1 'Inter';
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 3px 0 4px;
    border-bottom: 1px dashed var(--line);
    width: 100%;
    margin-bottom: 3px;
    flex-shrink: 0;
  }
  .compass-rail__btn {
    width: 34px; height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
  .compass-rail__btn:hover {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--accent);
  }
  .compass-rail__btn[data-badge]::after {
    content: attr(data-badge);
    position: absolute; top: -2px; right: -2px;
    background: var(--rose);
    color: #fff;
    font: 700 8px/1 'Inter';
    padding: 2px 4px; border-radius: 6px;
    min-width: 14px; text-align: center;
  }
  .compass-rail__btn[data-badge="·"]::after {
    background: var(--violet);
  }

  /* ═══ Floating popover — for compass satellite views ═══ */
  .popover-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 14, 26, 0.55);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: none;
    align-items: stretch; justify-content: flex-end;
    padding: 70px 70px 70px 50px;
  }
  .popover-overlay.is-open { display: flex; }
  .popover {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px 18px;
    width: 460px; max-width: 90vw;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5);
    animation: popoverIn 0.22s ease;
  }
  @keyframes popoverIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  .popover__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
    gap: 10px;
  }
  .popover__title {
    font: 700 13px/1.25 'Inter';
    display: flex; align-items: center; gap: 8px;
    flex: 1;
  }
  .popover__icon { font-size: 16px; }
  .popover__close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .popover__close:hover { color: var(--text); border-color: var(--accent); }
  .popover__body {
    font: 400 13px/1.55 'Inter';
    color: var(--text);
    margin-bottom: 12px;
  }
  .popover__body em { color: var(--accent); font-style: normal; font-weight: 600; }

  /* ═══ Pillars popover · anchored to avatar badge ═══ */
  .pillars-popover {
    position: fixed;
    display: none;
    width: 280px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid rgba(167, 139, 250, 0.5);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
    z-index: 200;
    animation: popoverIn 0.18s ease;
  }
  .pillars-popover.is-open { display: block; }
  .pillars-popover__head {
    display: flex; align-items: center; justify-content: space-between;
    font: 700 11px/1 'Inter';
    color: var(--violet);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--line);
  }
  .pillars-popover__close {
    background: transparent; border: 1px solid var(--line);
    color: var(--text-dim);
    width: 22px; height: 22px;
    border-radius: 4px;
    font-size: 11px;
  }
  .pillars-popover__sub {
    font: 500 10px/1.4 'Inter';
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 10px;
  }
  .pillar-bar {
    display: grid;
    grid-template-columns: 80px 1fr 36px;
    gap: 8px;
    align-items: center;
    margin-bottom: 5px;
    font: 600 10px/1 'Inter';
  }
  .pillar-bar__name { color: var(--text-dim); }
  .pillar-bar__track {
    height: 6px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: hidden;
  }
  .pillar-bar__track i {
    display: block; height: 100%;
    border-radius: 3px;
  }
  .pillar-bar__num {
    color: var(--text);
    font: 700 10px/1 'JetBrains Mono', monospace;
    text-align: right;
  }

  /* ═══ Iteration-running marker (in-place refine) ═══ */
  .iterating-marker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.35);
    color: var(--violet);
    font: 600 10px/1 'Inter';
    margin-top: 8px;
  }
  .iterating-marker__spin {
    width: 9px; height: 9px;
    border: 2px solid var(--violet);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }
  .refined-marker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(45, 212, 191, 0.1);
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: var(--teal);
    font: 600 10px/1 'Inter';
    margin-top: 8px;
  }
  /* When a turn is iterating, its rail card gets a pulsing border */
  .turn--iterating { border-color: var(--violet) !important; animation: pulse-iter 1.6s ease-in-out infinite; }
  @keyframes pulse-iter { 0%, 100% { box-shadow: 0 0 0 rgba(167, 139, 250, 0); } 50% { box-shadow: 0 0 14px rgba(167, 139, 250, 0.4); } }

  /* Past-turn revisit pill (shown on turn cards being viewed historically) */
  .revisit-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--accent);
    font: 600 10px/1 'Inter';
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }

  /* ═══ Turns · horizontal pip strip inside Envoy panel ═══
     6 compact turn cells: pose glyph + T# label + status indicator.
     Click jumps; hover for full title via [data-tooltip].
     Scales to fit panel width — no scrollbar. */
  .envoy-turns {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }
  .turn-pip {
    display: flex; flex-direction: column;
    align-items: center; gap: 1px;
    padding: 5px 2px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text-dim);
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
    min-width: 0;
  }
  .turn-pip:hover {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .turn-pip--current {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(167, 139, 250, 0.14));
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.22);
  }
  .turn-pip__pose {
    font-size: 14px;
    line-height: 1;
  }
  .turn-pip__num {
    font: 700 8px/1 'JetBrains Mono', monospace;
    color: var(--text-muted);
    margin-top: 1px;
  }
  .turn-pip--current .turn-pip__num { color: var(--accent); }
  .turn-pip__status {
    font: 700 8px/1 'Inter';
    margin-top: 1px;
    line-height: 1;
  }
  .turn-pip__status--ok      { color: var(--emerald); }
  .turn-pip__status--refined { color: var(--amber); }
  .turn-pip__status--now     {
    color: var(--accent);
    font-size: 8px;
  }
  .turn-pip__status--queued  { color: var(--text-muted); opacity: 0.5; }
  .turn-pip--iterating {
    border-color: var(--violet);
    animation: pulse-iter 1.4s ease-in-out infinite;
  }

  /* (Voice-bar styles removed — Voice/Autoplay/Transcript icons absorbed
      into Envoy card .voice-icon. Pace/Speak-back deferred.) */

  /* (Inventory ribbon styles removed — section deleted in v5 to free
      vertical real-estate for the live content.) */

  /* Tooltip helper */
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-3);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font: 500 11px/1.3 'Inter';
    white-space: nowrap;
    z-index: 100;
    border: 1px solid var(--line);
    pointer-events: none;
    max-width: 240px;
    white-space: normal;
    width: max-content;
  }

  /* Mock-info pill */
  .mock-stamp {
    position: fixed;
    top: 12px; right: 12px;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: var(--gold);
    padding: 4px 10px; border-radius: 4px;
    font: 700 10px/1 'JetBrains Mono', monospace;
    z-index: 50;
    letter-spacing: 0.08em;
  }

  /* ═══ Production overlay scrim — wrap the dialog so it can render over
     the workshop without the rest of the page leaking through. */
  #stage-dialog-root {
    position: fixed; inset: 0;
    z-index: 100000;
    display: contents;
  }
  #stage-dialog-root.is-open { display: block; }
  .stage-dialog-scrim {
    position: fixed; inset: 0;
    background: rgba(10, 14, 26, 0.78);
    backdrop-filter: blur(3px);
    z-index: 100001;
  }
  .stage-dialog-shell {
    position: fixed; inset: 0;
    z-index: 100002;
    background: radial-gradient(ellipse at top, #1a1f3a 0%, var(--bg-0) 60%);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    animation: stageDialogIn 0.25s ease;
  }
  @keyframes stageDialogIn {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Empty-state hint inside a segment when artifact data is missing */
  .seg-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 36px 24px;
    background: var(--bg-1);
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--text-dim);
    font: 500 13px/1.5 'Inter';
    text-align: center;
  }
  .seg-empty__icon { font-size: 22px; opacity: 0.7; }
  .seg-empty b { color: var(--text); font-weight: 600; }

  /* Verdict picker primitive — reused at Verify / Remediate / Interrogate */
  .verdict-picker {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 4px;
  }
  .verdict-picker__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 6px;
    background: var(--bg-3); border: 1px solid var(--line);
    color: var(--text);
    font: 600 10.5px/1.15 'Inter';
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .verdict-picker__btn:hover {
    background: var(--bg-2);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .verdict-picker__btn.is-selected {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(167, 139, 250, 0.10));
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.18);
  }

  /* Engagement-tally chip — Confine / Verify */
  .engagement-tally {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.30);
    color: var(--accent);
    font: 600 10px/1 'Inter';
  }
  .engagement-tally b { color: var(--text); font-weight: 700; }

  /* Confidence ring (svg) */
  .conf-ring {
    width: 64px; height: 64px;
    flex-shrink: 0;
    position: relative;
  }
  .conf-ring__num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 13px/1 'JetBrains Mono', monospace;
    color: var(--text);
  }

  /* Item-list slide layout */
  .item-list { display: flex; flex-direction: column; gap: 8px; }
  .item-list__head {
    display: flex; align-items: center; justify-content: space-between;
    font: 700 10px/1 'Inter';
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .item-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .item-row__id {
    font: 700 10px/1 'JetBrains Mono', monospace;
    color: var(--accent);
  }
  .item-row__title {
    font: 600 12px/1.4 'Inter';
    color: var(--text);
  }
  .item-row__sub {
    font: 500 10.5px/1.4 'Inter';
    color: var(--text-dim);
  }
  .item-row--severity-blocker { border-left: 3px solid var(--rose); }
  .item-row--severity-notable { border-left: 3px solid var(--amber); }
  .item-row--severity-minor   { border-left: 3px solid var(--gold); }
  .item-row--severity-advisory{ border-left: 3px solid var(--text-muted); }
  .item-row--verdict-fixed    { border-left: 3px solid var(--emerald); }
  .item-row--verdict-partial  { border-left: 3px solid var(--amber); }
  .item-row--verdict-fail     { border-left: 3px solid var(--rose); }
  .item-row--verdict-pass     { border-left: 3px solid var(--emerald); }

  /* seg--wide modifier (Prototype, Execute, Interrogate radar) */
  .seg--wide {
    padding: 8px 14px;
  }
  .seg--wide .ig-visual,
  .seg--wide .artefact { padding: 14px 18px; }

  /* Wrap-slide forward look */
  .wrap-slide { display: flex; flex-direction: column; gap: 10px; }
  .wrap-slide__forward {
    background: var(--bg-1); border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-dim);
    font: 500 12px/1.5 'Inter';
  }
  .wrap-slide__forward em { color: var(--accent); font-style: normal; font-weight: 600; }

  /* Reference-mock note (top-of-mock banner) */
  .reference-mock-note {
    position: fixed; top: 12px; left: 12px;
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: var(--accent);
    padding: 4px 10px; border-radius: 4px;
    font: 600 10px/1.3 'JetBrains Mono', monospace;
    z-index: 50;
    letter-spacing: 0.04em;
    max-width: 320px;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Roguelike mental-model surfaces (2026-05-09 lock):
     - WO rack (replaces mode-toggle, currently-active-stage scope)
     - Calm dot indicator (timer/hold state with tooltip)
     - Auto-play toggle (off by default)
     - Power-up cards (questions slide refinement)
     - Quest cards (side-mission segments)
     - Decision log (vertical timeline of Envoy decisions)
     - Scene-reveal animation (graphic-novel scene-into-view)
     ═══════════════════════════════════════════════════════════════════════ */

  /* WO rack — slots for WOs at the currently-active stage. Tap to swap.
     Visual language echoes workshop chambers: coloured rings, subtle pulse
     for unresolved checkpoints, brighter ring on the active slot. */
  .wo-rack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(10, 14, 26, 0.65);
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 999px;
  }
  .wo-rack__label {
    font: 600 9px/1 'JetBrains Mono', monospace;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
  }
  .wo-rack__slot {
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    padding: 0;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    position: relative;
  }
  .wo-rack__slot:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, 0.55);
  }
  .wo-rack__slot--active {
    background: var(--violet);
    border-color: rgba(167, 139, 250, 0.95);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.20), 0 0 10px rgba(167, 139, 250, 0.45);
  }
  .wo-rack__slot--queued     { background: rgba(96, 165, 250, 0.30); border-color: rgba(96, 165, 250, 0.60); }
  .wo-rack__slot--running    { background: rgba(34, 211, 238, 0.30); border-color: rgba(34, 211, 238, 0.65); animation: wo-rack-pulse 1.6s ease-in-out infinite; }
  .wo-rack__slot--checkpoint { background: rgba(251, 191, 36, 0.25); border-color: rgba(251, 191, 36, 0.65); animation: wo-rack-pulse 2.0s ease-in-out infinite; }
  .wo-rack__slot--blocked    { background: rgba(244, 63, 94, 0.25); border-color: rgba(244, 63, 94, 0.6); }
  .wo-rack__slot--last-viewed:not(.wo-rack__slot--active) {
    /* Dim outer ring continues the trail when you tap-swap to another WO */
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.20);
  }
  @keyframes wo-rack-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
  }
  /* Empty rack (this stage has only the active WO) — collapses to a hint. */
  .wo-rack--lonely {
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
    font: 500 10px/1 'Inter';
    padding: 4px 0;
  }

  /* Calm dot indicator — tells you the timer is paused (you're "in the level")
     or running. No loud copy; tooltip carries the explanation. */
  .timer-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    background: rgba(10, 14, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font: 500 10px/1 'Inter';
    color: var(--text-dim);
    cursor: help;
  }
  .timer-dot__bullet {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    box-shadow: 0 0 0 0 transparent;
  }
  .timer-dot--paused .timer-dot__bullet {
    background: var(--violet);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
  }
  .timer-dot--running .timer-dot__bullet {
    background: #67e8f9;
    animation: timer-dot-pulse 1.4s ease-in-out infinite;
  }
  @keyframes timer-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.22); }
  }

  /* Auto-play toggle — small, calm. Off by default. */
  .autoplay-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--text-dim);
    padding: 3px 8px;
    font: 600 10px/1 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  }
  .autoplay-toggle:hover {
    color: var(--text);
    border-color: rgba(167, 139, 250, 0.5);
  }
  .autoplay-toggle.is-on {
    background: rgba(167, 139, 250, 0.10);
    border-color: rgba(167, 139, 250, 0.55);
    color: var(--violet);
  }

  /* Power-up cards — questions slide refinement. Switches the answer-card
     stack into a horizontal row of 2-3 cards; recommended card gets visual
     weight; confidence-tinted border (low/mid/high). Gracefully degrades
     to vertical stack on narrow widths. */
  .power-row__cards {
    display: grid !important;
    grid-template-columns: repeat(var(--power-cards, 3), minmax(0, 1fr));
    gap: 10px !important;
  }
  .power-row--cards-1 .power-row__cards { --power-cards: 1; }
  .power-row--cards-2 .power-row__cards { --power-cards: 2; }
  .power-row--cards-3 .power-row__cards { --power-cards: 3; }
  .power-card {
    position: relative;
    border-radius: 10px !important;
    padding: 12px 14px 14px !important;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  .power-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  .power-card.is-recommended {
    background: rgba(167, 139, 250, 0.10) !important;
    border-color: rgba(167, 139, 250, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25);
  }
  .power-card__recommended {
    position: absolute; top: -8px; left: 12px;
    background: var(--violet);
    color: #fff;
    font: 700 9px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 4px;
  }
  .power-card__label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--text) !important;
  }
  .power-card.is-recommended .power-card__label {
    color: #f5f3ff !important;
  }
  .power-card__tradeoff {
    font-size: 11.5px !important;
    color: var(--text-dim) !important;
    line-height: 1.45 !important;
  }
  .power-card__conf-chip {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font: 600 9px/1 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .power-card__conf-chip--high { background: rgba(34, 197, 94, 0.16); color: #86efac; }
  .power-card__conf-chip--mid  { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
  .power-card__conf-chip--low  { background: rgba(244, 63, 94, 0.16); color: #fda4af; }
  .power-card--conf-high { border-color: rgba(34, 197, 94, 0.40) !important; }
  .power-card--conf-mid  { border-color: rgba(251, 191, 36, 0.40) !important; }
  .power-card--conf-low  { border-color: rgba(244, 63, 94, 0.40) !important; }

  /* Quest cards — human side-missions outside the system */
  .quest-list { display: flex; flex-direction: column; gap: 10px; }
  .quest-card {
    background: rgba(10, 14, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(96, 165, 250, 0.55);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .quest-card--blocker     { border-left-color: var(--rose); }
  .quest-card--soon        { border-left-color: var(--gold); }
  .quest-card--when-ready  { border-left-color: var(--accent); }
  .quest-card.is-pinned    { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25); }
  .quest-card__head {
    display: flex; align-items: center; gap: 8px;
    font: 600 10px/1 'JetBrains Mono', monospace;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .quest-card__id        { color: var(--accent); }
  .quest-card__urgency   { color: var(--gold); }
  .quest-card__pin {
    appearance: none; margin-left: auto;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-dim); border-radius: 4px;
    padding: 2px 7px; cursor: pointer;
    font: 600 9px/1 'JetBrains Mono', monospace;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  }
  .quest-card__pin:hover { color: var(--gold); border-color: rgba(251, 191, 36, 0.55); }
  .quest-card.is-pinned .quest-card__pin { color: var(--gold); border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.10); }
  .quest-card__title { font: 600 14px/1.35 'Inter'; color: var(--text); margin: 0; }
  .quest-card__why,
  .quest-card__action { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
  .quest-card__why b,
  .quest-card__action b { color: var(--text); font-weight: 600; }
  .quest-card__link {
    align-self: flex-start;
    font: 600 11px/1 'Inter';
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(96, 165, 250, 0.4);
    padding-bottom: 1px;
  }

  /* Decision log — vertical timeline of Envoy decisions for this stage */
  .decision-log {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .decision-log--empty {
    color: var(--text-dim); font-style: italic;
    padding: 14px; border: 1px dashed var(--line); border-radius: 8px;
    text-align: center;
  }
  .decision-log__row {
    display: grid;
    grid-template-columns: 80px 70px 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 12px;
    background: rgba(10, 14, 26, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--text-dim);
    border-radius: 6px;
  }
  .decision-log__row--envoy    { border-left-color: var(--violet); }
  .decision-log__row--director { border-left-color: var(--accent); }
  .decision-log__row--auto     { border-left-color: var(--gold); }
  .decision-log__row--system   { border-left-color: var(--text-dim); }
  .decision-log__when {
    font: 500 10.5px/1.3 'JetBrains Mono', monospace;
    color: var(--text-dim);
  }
  .decision-log__by {
    font: 700 9px/1 'JetBrains Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 3px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    align-self: start;
    text-align: center;
  }
  .decision-log__row--envoy    .decision-log__by { background: rgba(167, 139, 250, 0.14); color: var(--violet); }
  .decision-log__row--director .decision-log__by { background: rgba(96, 165, 250, 0.14); color: var(--accent); }
  .decision-log__row--auto     .decision-log__by { background: rgba(251, 191, 36, 0.14); color: var(--gold); }
  .decision-log__text   { font-size: 12.5px; color: var(--text); line-height: 1.45; }
  .decision-log__reason { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; margin-top: 3px; font-style: italic; }

  /* Scene-reveal — graphic-novel scene-into-view animation. Applied to every
     `.seg` on entry via IntersectionObserver (data-revealed attribute). The
     stagger inside each segment lights its children sequentially so the
     interior assembles like panels on a comic page. Reduced-motion respected. */
  .seg[data-revealed="false"] > * {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  .seg[data-revealed="true"] > * {
    animation: scene-reveal 520ms cubic-bezier(0.18, 0.9, 0.32, 1.0) both;
  }
  .seg[data-revealed="true"] > *:nth-child(1) { animation-delay:  20ms; }
  .seg[data-revealed="true"] > *:nth-child(2) { animation-delay: 110ms; }
  .seg[data-revealed="true"] > *:nth-child(3) { animation-delay: 200ms; }
  .seg[data-revealed="true"] > *:nth-child(4) { animation-delay: 290ms; }
  .seg[data-revealed="true"] > *:nth-child(n+5) { animation-delay: 380ms; }
  @keyframes scene-reveal {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .seg[data-revealed="false"] > *,
    .seg[data-revealed="true"]  > * { opacity: 1; transform: none; animation: none; }
  }