/* Live stage: hero + map above the fold, control-room treatment.
   Motion is driven by live.js; every number on screen comes from the snapshot.
   Two themes share every rule through variables: dark (default) and
   light (html[data-stage="light"], set by live.js from ?theme=light). */
.stage{
 --s-bg:#070d1a;--s-ink:#f4f7fc;--s-sub:#a9b4c8;--s-mute:#7f8ba3;--s-line:rgba(255,255,255,.1);
 --s-hi:#7dd3fc;--s-hi2:#4d94ff;--s-up:#4ade80;--s-down:#ff8a7a;
 --s-grid:rgba(255,255,255,.035);--s-glow-a:rgba(57,135,229,.20);--s-glow-b:rgba(196,98,45,.14);
 --s-panel:rgba(255,255,255,.035);--s-panel-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.35);
 --s-chip:rgba(255,255,255,.05);--s-chip-line:rgba(255,255,255,.14);--s-chip-ink:#dbe3f0;
 --s-readout:rgba(7,13,26,.65);--s-readout-line:rgba(125,211,252,.22);
 --s-card:rgba(11,20,38,.94);--s-card-line:rgba(125,211,252,.28);--s-card-shadow:0 22px 50px rgba(0,0,0,.55);
 --s-tape:rgba(0,0,0,.28);--s-tape-ink:#c8d1e0;--s-tape-sym:#fff;
 --map-stroke:#070d1a;--map-hover:#fff;--map-neutral:#4a556b;--hatch-bg:#161f33;--hatch-line:#34405a;
 --ping:rgba(255,255,255,.85);--ping-ring:rgba(255,255,255,.7);--scan-fill:rgba(125,211,252,.10);
 --scan-stroke:#bfeaff;--scan-glow:rgba(56,189,248,.9);--scan-core:#e0f6ff;
 --live:#ff4d4d;--live-ink:#ff9a9a;--live-bg:rgba(255,77,77,.12);--live-line:rgba(255,77,77,.38);
 position:relative;overflow:hidden;color:var(--s-ink);background:var(--s-bg);
 background-image:
  radial-gradient(900px 520px at 78% 30%,var(--s-glow-a),transparent 70%),
  radial-gradient(700px 420px at 8% 100%,var(--s-glow-b),transparent 70%),
  linear-gradient(var(--s-grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);
 background-size:auto,auto,44px 44px,44px 44px}
html[data-stage="light"] .stage{
 --s-bg:#ffffff;--s-ink:#101828;--s-sub:#475467;--s-mute:#7a8396;--s-line:#e4e7ec;
 --s-hi:#155eef;--s-hi2:#0b3fa8;--s-up:#137333;--s-down:#c5221f;
 --s-grid:rgba(16,24,40,.055);--s-glow-a:rgba(57,135,229,.10);--s-glow-b:rgba(196,98,45,.07);
 --s-panel:#fff;--s-panel-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px rgba(16,24,40,.08);
 --s-chip:#fff;--s-chip-line:#d0d5dd;--s-chip-ink:#101828;
 --s-readout:rgba(255,255,255,.88);--s-readout-line:#d6e4fb;
 --s-card:#fff;--s-card-line:#e4e7ec;--s-card-shadow:0 22px 50px rgba(16,24,40,.18);
 --s-tape:#f7f9fc;--s-tape-ink:#475467;--s-tape-sym:#101828;
 --map-stroke:#fff;--map-hover:#101828;--map-neutral:#dbd8d1;--hatch-bg:#fafaf8;--hatch-line:#c9c9c2;
 --ping:rgba(16,24,40,.75);--ping-ring:rgba(16,24,40,.45);--scan-fill:rgba(21,94,239,.08);
 --scan-stroke:#155eef;--scan-glow:rgba(21,94,239,.45);--scan-core:#155eef;
 --live:#e5292b;--live-ink:#c81e1e;--live-bg:#fff1f1;--live-line:#fbc9c9;
 border-bottom:1px solid var(--s-line)}

.stage-inner{position:relative;max-width:1360px;margin:0 auto;padding:28px 32px 14px;
 display:grid;grid-template-columns:minmax(330px,410px) 1fr;grid-template-areas:"hero map" "toggle map" ". map";
 grid-template-rows:auto auto 1fr;column-gap:44px;align-items:start}
.stage .hero{grid-area:hero;max-width:none;margin:0;padding:4px 0 0}
.stage .haul-toggle{grid-area:toggle;max-width:none;margin:16px 0 0;padding:0;gap:6px}
.stage-map{grid-area:map;min-width:0}

/* Live bar */
.live-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.live-bar[hidden]{display:none}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 9px;border-radius:99px;
 background:var(--live-bg);border:1px solid var(--live-line);color:var(--live-ink);
 font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--live);animation:lv-pulse 1.6s ease-out infinite}
@keyframes lv-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.75)}70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.live-next{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--s-mute)}
.live-next b{color:var(--s-ink);font-weight:600}
.live-next .clock{font-variant-numeric:tabular-nums;color:var(--s-hi);letter-spacing:.02em}

/* Hero copy */
.stage .brand{color:var(--s-ink);font-size:13px}
.stage .brand span{color:var(--s-mute)}
.stage h1{font-size:clamp(34px,3.2vw,48px);line-height:1;margin:10px 0 12px}
.stage h1 em{font-style:normal;background:linear-gradient(90deg,var(--s-hi),var(--s-hi2));
 -webkit-background-clip:text;background-clip:text;color:transparent}
.stage .sub{color:var(--s-sub);font-size:15px}
.stage .sub a{color:var(--s-hi)}
.stage .updated{color:var(--s-mute);font-size:12px;margin-top:4px}

/* Stat strip, 2x2 in the hero column */
.stage .hero-index{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 0;border:1px solid var(--s-line);
 background:var(--s-panel);box-shadow:var(--s-panel-shadow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.stage .hero-index[hidden]{display:none}
.stage .hero-index .cell{min-width:0;padding:13px 18px;border-right:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.stage .hero-index .cell:nth-child(2n){border-right:0}
.stage .hero-index .cell:nth-child(n+3){border-bottom:0}
.stage .hero-index .k{color:var(--s-mute);font-size:11px}
.stage .hero-index .v{color:var(--s-ink);font-size:31px;font-variant-numeric:tabular-nums}
.stage .hero-index .v small{color:var(--s-sub)}
.stage .hero-index .note{color:var(--s-mute)}
.stage .hero-index .cell.lead{background:linear-gradient(135deg,rgba(77,148,255,.16),transparent 70%)}
.stage .hero-index .cell.lead .v{color:var(--s-hi);text-shadow:0 0 24px rgba(125,211,252,.45)}
html[data-stage="light"] .stage .hero-index .cell.lead{background:linear-gradient(135deg,rgba(21,94,239,.07),transparent 70%)}
html[data-stage="light"] .stage .hero-index .cell.lead .v{text-shadow:none}
.stage .up{color:var(--s-up)}.stage .down{color:var(--s-down)}

/* Hero CTA: opens the benchmark form as a pop-up */
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:16px}
.hero-cta[hidden]{display:none}
.cta-bench{position:relative;overflow:hidden;border:0;border-radius:10px;padding:14px 22px;cursor:pointer;
 background:linear-gradient(135deg,#1f6bff,#155eef 55%,#0f4fd1);color:#fff;font:700 16px var(--body);
 box-shadow:0 10px 26px rgba(21,94,239,.45),inset 0 1px 0 rgba(255,255,255,.25);
 transition:transform .15s ease,box-shadow .15s ease}
.cta-bench::after{content:" →"}
.cta-bench::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:cta-shine 4.5s ease-in-out infinite}
@keyframes cta-shine{0%,70%{left:-60%}100%{left:130%}}
.cta-bench:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(21,94,239,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.cta-bench:focus-visible{outline:3px solid #9ec5f4;outline-offset:2px}
.cta-note{font-size:12px;color:var(--s-mute)}
/* In-page CTAs (where the form used to sit, and above Methodology): same button,
   same pop-up. Inline, #gate stays mounted for Turnstile but is hidden until it
   holds a docked result; it only shows its form as the pop-up. */
.cta-inline{display:flex;flex-direction:column;align-items:center;gap:10px;margin:40px 0;padding:28px 24px;
 text-align:center;border:1px solid var(--line);border-radius:16px;background:#f5f8ff}
.cta-inline[hidden]{display:none}
.cta-inline .cta-note{color:var(--sub);font-size:13px}
.gate:not(.as-modal):has(> #gate-form:not([hidden])){position:absolute;width:1px;height:1px;margin:0;padding:0;
 border:0;overflow:hidden;clip-path:inset(50%);visibility:hidden}

/* Haul tabs */
.stage .haul-toggle button{padding:7px 13px;font-size:14px;background:var(--s-chip);border-color:var(--s-chip-line);color:var(--s-chip-ink)}
.stage .haul-toggle button:hover{box-shadow:0 0 0 1px var(--s-readout-line),0 4px 14px rgba(0,0,0,.18)}
.stage .haul-toggle button[aria-selected="true"]{background:var(--accent);border-color:#4d94ff;color:#fff;
 box-shadow:0 0 18px rgba(21,94,239,.45)}

/* Scanner readout */
.scan-readout{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;min-height:46px;padding:9px 16px;
 border:1px solid var(--s-readout-line);border-radius:12px;background:var(--s-readout);
 font-size:13px;color:var(--s-sub);font-variant-numeric:tabular-nums}
html[data-stage="light"] .scan-readout{box-shadow:0 6px 20px rgba(16,24,40,.06)}
.scan-readout[hidden]{display:block;visibility:hidden}
.scan-readout .sr-k{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--s-hi)}
.scan-readout .sr-k i{width:6px;height:6px;border-radius:50%;background:var(--s-hi);animation:sr-blink 1s steps(2) infinite}
@keyframes sr-blink{50%{opacity:.15}}
.scan-readout .sr-state{font:700 21px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--s-ink)}
.scan-readout .sr-rate{font:700 21px/1.1 var(--display);color:var(--s-hi)}
.scan-readout em,.ticker em{font-style:normal;font-weight:600}
.scan-readout em.up,.ticker em.up{color:var(--s-up)}
.scan-readout em.down,.ticker em.down{color:var(--s-down)}
.scan-readout em.flat,.ticker em.flat{color:var(--s-mute)}
.scan-readout.flash>*{animation:sr-in .45s cubic-bezier(.22,1,.36,1) both}
.scan-readout.flash>*:nth-child(2){animation-delay:.04s}.scan-readout.flash>*:nth-child(3){animation-delay:.08s}
.scan-readout.flash>*:nth-child(4){animation-delay:.12s}.scan-readout.flash>*:nth-child(5){animation-delay:.16s}
@keyframes sr-in{from{opacity:0;transform:translateY(5px)}}

/* Map */
.stage .map-wrap{margin-top:8px}
.stage #map path[data-state]{stroke:var(--map-stroke);stroke-width:1.1}
.stage #map path[data-state]:hover{stroke:var(--map-hover);stroke-width:1.6;filter:brightness(1.08) drop-shadow(0 0 8px var(--scan-glow))}
.stage #map path[data-state]:focus-visible{stroke:var(--map-hover);stroke-width:2.5}
#hatch rect{fill:var(--hatch-bg,#fafaf8)}
#hatch line{stroke:var(--hatch-line,#c9c9c2)}
#map.intro path[data-state]{animation:mp-paint .75s ease both;animation-delay:var(--d,0s)}
@keyframes mp-paint{from{opacity:0}}
.stage .map-wrap::after{content:"";position:absolute;top:0;bottom:0;left:0;width:110px;pointer-events:none;
 background:linear-gradient(90deg,transparent,var(--scan-fill));border-right:1px solid var(--s-readout-line);
 animation:mp-sweep 8s linear infinite}
@keyframes mp-sweep{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 110px);opacity:0}}
#map .fx .scan-outline{fill:var(--scan-fill);stroke:var(--scan-stroke);stroke-width:2;stroke-linejoin:round;
 filter:drop-shadow(0 0 6px var(--scan-glow));animation:sr-in .35s ease both}
#map .fx .scan-outline.sel{stroke-width:2.6;fill:none}
#map .fx .scan-ring{fill:none;stroke:var(--s-hi);stroke-width:1.6;transform-box:fill-box;transform-origin:center;
 animation:fx-ring 1.6s ease-out infinite}
#map .fx .scan-ring.r2{animation-delay:.8s}
#map .fx .scan-core{fill:var(--scan-core);filter:drop-shadow(0 0 5px var(--scan-glow))}
@keyframes fx-ring{from{transform:scale(.12);opacity:.95}to{transform:scale(1);opacity:0}}
#map .fx .ping-dot{fill:var(--ping)}
#map .fx .ping-ring{fill:none;stroke:var(--ping-ring);stroke-width:1.2;transform-box:fill-box;transform-origin:center;
 animation:fx-ping 2.6s ease-out infinite}
@keyframes fx-ping{0%{transform:scale(.2);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
.stage .map-tip{border:1px solid rgba(125,211,252,.35);background:#0b1426}

/* State card, themed to the stage */
.stage .state-card{min-width:270px;color:var(--s-ink);background:var(--s-card);border:1px solid var(--s-card-line);
 border-radius:14px;box-shadow:var(--s-card-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 padding:16px 20px 14px;font-size:14px;line-height:1.5;animation:sr-in .25s ease both}
.stage .state-card h3{display:flex;align-items:center;gap:8px;padding-right:22px;color:var(--s-ink);
 text-transform:uppercase;font-size:21px}
.stage .state-card .big{color:var(--s-ink)}
.stage .state-card .native-row{font-size:19px;line-height:1.55;margin:4px 0 6px}
.stage .state-card .native-row .nat b{font:600 12px var(--body);letter-spacing:.06em;color:var(--s-mute);margin-right:2px}
.stage .state-card p{margin-top:4px}
.stage .state-card .ann-secondary,.stage .state-card .nat-note,.stage .state-card .exec,.stage .state-card>p{color:var(--s-sub)}
.stage .state-card .exec{font-size:13px}
.stage .state-card .exec b{color:var(--s-ink)}
.stage .state-card .delta.up{background:rgba(74,222,128,.14);color:var(--s-up)}
.stage .state-card .delta.down{background:rgba(255,138,122,.14);color:var(--s-down)}
.stage .state-card .delta.at{background:var(--s-chip);color:var(--s-sub)}
.stage .state-card p.up{color:var(--s-up)}.stage .state-card p.down{color:var(--s-down)}
.stage .state-card a{display:inline-block;margin-top:6px;color:var(--s-hi);font-weight:600;text-decoration:none}
.stage .state-card a:hover{text-decoration:underline}
.stage .card-close{top:10px;right:12px;color:var(--s-mute)}
.stage .card-close:hover{color:var(--s-ink)}
html[data-stage="light"] .stage .state-card .delta.up{background:#e6f4ea}
html[data-stage="light"] .stage .state-card .delta.down{background:#fce8e6}

/* Legend */
.stage .legend{color:var(--s-sub);margin-top:6px}
.stage .legend .cap{color:var(--s-sub)}
.stage .legend .step span{color:var(--s-mute)}
.stage .legend .mid i{border:0;background:var(--map-neutral)}
.stage .legend .na i{border-color:var(--hatch-line);background:repeating-linear-gradient(45deg,var(--hatch-bg) 0 2.5px,var(--hatch-line) 2.5px 4.5px)}
.stage .state-picker{max-width:none;padding:0;margin:0 0 10px;color:var(--s-sub)}

/* Ticker tape */
.ticker{position:relative;height:42px;overflow:hidden;border-top:1px solid var(--s-line);background:var(--s-tape);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker[hidden]{display:none}
.ticker-track{display:flex;width:max-content;animation:tk-run var(--dur,90s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk-run{display:flex}
.tk{display:flex;align-items:baseline;gap:8px;padding:0 22px;line-height:42px;font-size:13px;color:var(--s-tape-ink);
 white-space:nowrap;font-variant-numeric:tabular-nums;border-right:1px solid var(--s-line)}
.tk b{font:700 15px var(--display);letter-spacing:.06em;color:var(--s-tape-sym)}
@keyframes tk-run{to{transform:translateX(-50%)}}

/* Benchmark form as a pop-up (live.js toggles .as-modal on #gate in place) */
.gate-backdrop{position:fixed;inset:0;z-index:89;background:rgba(7,13,26,.62);opacity:0;pointer-events:none;
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s ease}
.gate-backdrop.on{opacity:1;pointer-events:auto}
body.gate-open{overflow:hidden}
.gate .gate-x{display:none}
.gate.as-modal{position:fixed;z-index:90;top:50%;left:50%;width:min(560px,calc(100vw - 32px));
 max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;margin:0;
 transform:translate(-50%,-50%);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:gate-in .28s cubic-bezier(.22,1,.36,1) both}
@keyframes gate-in{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}}
.gate.as-modal .gate-x{display:block;position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
 background:#f2f4f7;color:var(--sub);font:400 22px/34px var(--body);cursor:pointer}
.gate.as-modal .gate-x:hover{background:#e4e7ec;color:var(--ink)}
.gate.as-modal h2{padding-right:40px}

@media (max-width:1079px){
 .stage-inner{grid-template-columns:1fr;grid-template-areas:"hero" "toggle" "map";grid-template-rows:auto;padding:28px 24px 12px}
 .stage .hero-index{grid-template-columns:repeat(4,1fr)}
 .stage .hero-index .cell{border-bottom:0;border-right:1px solid var(--s-line)}
 .stage .hero-index .cell:last-child{border-right:0}
 .stage-map{margin-top:16px}
}
@media (max-width:640px){
 .stage-inner{padding:22px 16px 10px}
 .stage .hero-index{grid-template-columns:1fr 1fr}
 .stage .hero-index .cell{padding:12px 14px;border-right:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
 .stage .hero-index .cell:nth-child(2n){border-right:0}
 .stage .hero-index .cell:nth-child(n+3){border-bottom:0}
 .stage .hero-index .v{font-size:25px}
 .stage h1{font-size:32px}
 .cta-bench{width:100%}
 .cta-inline{margin:32px 0;padding:20px 16px}
 .scan-readout{gap:4px 12px;padding:8px 12px}
 .scan-readout .sr-state,.scan-readout .sr-rate{font-size:18px}
 .scan-readout .sr-meta{flex-basis:100%}
 .stage .state-card{min-width:0}
 .gate.as-modal{top:auto;bottom:0;left:0;width:100%;max-height:92vh;transform:none;border-radius:18px 18px 0 0;
  border-width:0;padding:24px 16px 28px;animation-name:gate-up}
 @keyframes gate-up{from{transform:translateY(40px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
 .live-pill i,.scan-readout .sr-k i,.stage .map-wrap::after,#map .fx .scan-ring,#map .fx .ping-ring,.cta-bench::before{animation:none}
 .stage .map-wrap::after,#map .fx .ping-ring,.cta-bench::before{display:none}
 .gate.as-modal,.stage .state-card{animation:none}
 .ticker{overflow-x:auto}
 .ticker-track{animation:none}
 .tk-run+.tk-run{display:none}
}
.stage #map path[data-state]:focus:not(:focus-visible){outline:none}
@media (max-width:640px){.stage .haul-toggle button[aria-selected="true"]{box-shadow:none}}