@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Cond";src:url(../fonts/ibm-plex-sans-condensed-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Cond";src:url(../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#0a1118;--ink:#e8eef2;--muted:#8fa3b0;--rule:#2a3b47;--panel:rgba(14,22,32,.86);--solid:#101b24;
  --wind:#2de1c2;--sol:#ffc23d;--oth:#ff6b3d;--imp:#9b7bff;--warn:#ffb020;--alert:#ff3b5c;
  --serif:"Plex Cond","Arial Narrow",system-ui,sans-serif;--sans:"Plex Cond","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene.grabbing{cursor:grabbing}
#scene.pointing{cursor:pointer}
.tip{position:fixed;z-index:5;pointer-events:none;max-width:260px;padding:5px 8px;background:var(--solid);border:1px solid var(--ink);border-radius:3px;font-size:13px;line-height:1.3;color:var(--muted);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tip[hidden]{display:none}
.tip b{display:block;color:var(--ink);font-weight:600}
#labels .asset{font:500 11px/1 var(--sans);color:#8fa3b0;letter-spacing:.02em;transform:translate(10px,-50%);max-width:180px;overflow:hidden;text-overflow:ellipsis}
#labels .asset[hidden]{display:none}
.compass{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;background:var(--solid)}
.compass:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.compass svg{width:22px;height:22px;transition:transform .15s}
.compass path{fill:var(--ink)}
.compass text{font:600 5px var(--sans);fill:var(--muted);text-anchor:middle}
#labels{position:fixed;inset:0;pointer-events:none}
#labels .clash{visibility:hidden}
#labels span{position:absolute;transform:translate(-50%,-160%);white-space:nowrap;text-shadow:0 0 3px var(--paper),0 0 6px var(--paper),0 0 10px var(--paper)}
#labels .town{font:600 11px/1 var(--sans);color:#b9c9d4;text-transform:uppercase;letter-spacing:.16em}
#labels .place{display:none;font:400 12px/1 var(--sans);color:var(--muted)}
#labels.near .place{display:block}
#labels .town,#labels .place{transition:opacity .4s}
#labels .water{display:none;font:italic 400 11px/1 var(--sans);letter-spacing:.12em;color:#5d8fb3;transform:translate(-50%,-50%)}
#labels.wz3 .water.big,#labels.wz9 .water{display:block}#labels.street .water.river{display:none}
#labels.street .town{opacity:0}#labels.site .place{opacity:0}
/* OSM towns and villages (ODbL): quieter than the Natural Earth names, villages smallest */
#labels .osmp{font:400 11px/1 var(--sans);color:#7f95a3;letter-spacing:.02em}
#labels .osmp.big{font-weight:600;color:#9fb2bf}
#labels .cable{font:600 12px/1 var(--sans);color:var(--imp);letter-spacing:.02em}

/* rail */
.rail{position:fixed;left:24px;top:20px;width:340px;padding:12px 16px 14px;background:var(--panel);border:1px solid var(--rule);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3}
.mast{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.mark{font:600 15px/1 var(--sans);color:var(--ink);margin-right:2px;letter-spacing:.01em}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;border:1px solid var(--ink);font:600 12px/1 var(--sans);color:var(--ink)}
.chip.live{background:rgba(255,59,92,.14);border-color:var(--alert);color:var(--ink)}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--alert);box-shadow:0 0 8px var(--alert);animation:blink 1.6s infinite}
.chip.stale{border-color:var(--warn);color:var(--warn)}
@keyframes blink{50%{opacity:.2}}
h1{margin:6px 0 10px;font:600 16px/1.25 var(--sans);color:var(--ink);text-wrap:balance}
.dateline{font:400 14px/1 var(--sans);color:var(--muted)}
.when{margin:0;display:flex;align-items:baseline;gap:10px}
.clock{font:600 28px/.9 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ledger{margin:6px 0 0;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:7px 0;border-bottom:1px solid var(--rule)}
.row dt{font-size:15px;display:flex;align-items:center;gap:8px}
.row dt::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c)}
.row dd{margin:0;display:flex;align-items:center;gap:12px}
.row dd span{font:600 17px/1 var(--sans);font-variant-numeric:tabular-nums;min-width:92px;text-align:right}
.spark{width:96px;height:22px;display:block}
.wind{--c:var(--wind)}.sol{--c:var(--sol)}.oth{--c:var(--oth)}.imp{--c:var(--imp)}.dem{--c:var(--ink)}
.row .cables{grid-column:1/-1;margin:3px 0 0 18px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;gap:0}
.ledger-foot{margin:7px 0 0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.ledger-foot #r-co2{font-size:14px;color:var(--ink)}
.ledger-foot #r-co2 b{font-weight:600;font-variant-numeric:tabular-nums}
.beat{margin:10px 0 0;padding-left:10px;border-left:2px solid var(--imp);font:400 14px/1.35 var(--sans);color:var(--muted)}
.beat:empty{display:none}

/* zoomed in: the rail keeps the clock and the numbers, drops the headline, story line and sparklines */
.rail h1,.dateline,.beat,.spark{transition:opacity .2s}
.zoomed .rail h1,.zoomed .dateline,.zoomed .beat,.zoomed .spark,.zoomed .row .cables,.zoomed .ledger-foot span:last-child{display:none}
.zoomed .when{display:none}
.zoomed .kpi b{font-size:26px}
.zoomed .mast .status{color:var(--ink);font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.zoomed .rail{width:300px}
.rail{max-height:calc(100vh - var(--src-h, 60px) - 30px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}

.mini{position:fixed;z-index:2;right:24px;bottom:calc(var(--src-h,34px) + 14px);width:150px;height:170px;cursor:pointer;border:1px solid var(--rule);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.mini[hidden]{display:none}
.inspecting .mini{right:356px}
@media (max-width:1199px){.inspecting .mini{display:none}}
.card-name:focus{outline:none}
.leader{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;display:none}.leader.on{display:block}
.leader line{stroke:var(--c,#e8eef2);stroke-opacity:.5;stroke-width:1}.leader circle{fill:var(--c,#e8eef2)}
.mini:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* mode picker: tab row, underline marks the active one */

.src{position:fixed;left:24px;right:24px;bottom:12px;display:flex;align-items:center;gap:14px;padding:7px 12px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rule);border-radius:8px;font-size:11px;line-height:1.35;color:var(--muted)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tools{position:fixed;right:32px;top:72px;display:flex;align-items:flex-start;gap:14px;font-size:14px;z-index:3}
.find{position:relative}
.find input{width:250px;font:inherit;border:1px solid var(--rule);border-radius:4px;padding:6px 9px;background:var(--solid);color:var(--ink)}
.find input:focus-visible,.layers summary:focus-visible,.layers input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#q-list{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;list-style:none;background:var(--solid);border:1px solid var(--ink);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
#q-list li{display:flex;flex-direction:column;padding:6px 10px;cursor:pointer}
#q-list li small{color:var(--muted);font-size:12px}
#q-list li[aria-selected=true]{background:var(--paper);box-shadow:inset 3px 0 0 var(--ink)}
#q-list li.none{cursor:default;color:var(--muted)}
.layers{position:relative}
.layers summary{cursor:pointer;padding:6px 2px;border-bottom:2px solid transparent;list-style:none}
.layers summary::-webkit-details-marker{display:none}
.layers summary::after{content:" +";color:var(--muted)}
.layers[open] summary{border-bottom-color:var(--ink)}
.layers[open] summary::after{content:" −"}
.layers fieldset{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:8px 12px;min-width:170px;border:1px solid var(--ink);border-radius:4px;background:var(--solid);display:grid;gap:6px;width:230px;max-height:calc(100vh - 130px - var(--src-h,34px));overflow-y:auto;scrollbar-width:thin}
.layers label{display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap;min-height:22px}
.layers input{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:16px;margin:0;border-radius:999px;background:var(--rule);position:relative;cursor:pointer;transition:background .15s}
.layers input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.layers input:checked{background:color-mix(in srgb,var(--wind) 45%,var(--rule))}.layers input:checked::after{transform:translateX(12px);background:var(--ink)}
.layers input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.layers .lc{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.fuelkey{margin:2px 0 0;padding:6px 0 0;border-top:1px solid var(--rule);list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11.5px;color:var(--muted)}
.fuelkey li{display:flex;align-items:center;gap:6px;white-space:nowrap}.fuelkey i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.legend{margin:2px 0 0;padding:6px 0 0;border-top:1px solid var(--rule);list-style:none;display:grid;gap:3px;font-size:12px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:18px;border-top:var(--w) solid var(--c)}
.card{position:fixed;right:24px;top:118px;width:320px;max-height:calc(100vh - 170px);overflow:auto;background:var(--panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--rule);border-top:3px solid var(--c,var(--ink));border-radius:8px;animation:card-in .16s ease-out;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:12px 16px 14px}
.card[hidden]{display:none}
.card-head{display:flex;justify-content:space-between;align-items:center}
.card-kind{margin:0;font-size:13px;color:var(--muted)}
.card-zoom{all:unset;cursor:pointer;margin-left:auto;font:600 12px/1 var(--sans);color:var(--muted);padding:5px 8px;border:1px solid var(--rule);border-radius:999px}
.card-zoom:hover{color:var(--ink);border-color:var(--ink)}.card-zoom:focus-visible{outline:2px solid var(--ink)}
@media (pointer:coarse){.card-zoom{padding:14px 12px}}
.card-x{all:unset;cursor:pointer;font:600 22px/1 var(--sans);padding:2px 6px;min-width:32px;min-height:32px;display:grid;place-items:center;box-sizing:border-box}
@media (pointer:coarse){.card-x{min-width:44px;min-height:44px;margin:-8px -10px -8px 0}}
/* the head (kind, zoom, close) stays put while the card body scrolls */
.card-head{position:sticky;top:-12px;z-index:2;background:var(--solid);margin:-12px -16px 0;padding:12px 16px 4px}
.card-x:focus-visible{outline:2px solid var(--ink)}
.card-stack{margin:-6px 0 10px;font-size:12px;color:var(--muted)}
.card-name{margin:4px 0 10px;font:600 21px/1.15 var(--sans);text-wrap:balance}
.card-grip{display:none}
.hero{margin:0 0 10px}
.hero-num{margin:0;font:400 15px/1.2 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.hero-num.is-off{display:flex;align-items:center;gap:8px}.hero-num.is-off b{color:var(--muted)}
.off-pill{font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--muted);padding:3px 8px;border:1px solid var(--rule);border-radius:999px}
.hero-num:not(:has(b)){font:600 22px/1.15 var(--sans);color:var(--ink)}
.hero-num b{font:600 30px/1 var(--sans);color:var(--ink);letter-spacing:-.01em;margin-right:2px}
.hero-sub{margin:3px 0 0;font-size:13px;color:var(--muted)}
.hero-bar{height:6px;margin:8px 0 0;background:var(--rule);border-radius:1px;overflow:hidden}
.hero-bar i{display:block;height:100%;background:var(--c,var(--wind));box-shadow:0 0 8px var(--c,var(--wind))}
.hero-when{margin:7px 0 0;display:flex;gap:6px;align-items:baseline;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-facts{margin:0 0 8px;font-size:13px;line-height:1.35;color:var(--muted)}
.card-context{margin:0 0 8px;padding:0;list-style:none;display:grid;gap:4px;font-size:13px}
.card-rows{margin:0}
.card-row{padding:7px 0;border-top:1px solid var(--rule)}
.card-row dt{font-size:13px;color:var(--muted)}
.card-row dd{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.card-val{font:600 15px/1.25 var(--sans);font-variant-numeric:tabular-nums}
.badge{font:600 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
.b-market{color:#e6c35c}.b-published{color:#d9c38a}.b-forecast{color:var(--muted);border-style:dashed}
.b-measured{color:var(--wind);background:color-mix(in srgb,var(--wind) 18%,transparent)}.b-observed{color:#7fd3ff}.b-scheduled{color:#8fc7ff}.b-metered{color:var(--ink)}.b-static{color:var(--muted)}.b-map{color:var(--muted)}.b-pending{color:var(--warn)}.b-none{color:var(--muted)}
.card-src{margin:10px 0 0;padding-top:6px;border-top:1px solid var(--rule);font-size:11px;line-height:1.35;color:var(--muted)}
.card-units{margin:4px 0 0;padding:0;list-style:none;font-size:13px}
.card-units li{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.card-units b,.card-links b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.card-units .unit-go,.card-links .unit-go{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:10px;width:100%;min-height:28px;align-items:center;margin:-2px -6px;padding:2px 6px;border-radius:6px;cursor:pointer}
.card-units .unit-go span,.card-links .unit-go span{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.card-units .unit-go:hover,.card-units .unit-go:focus-visible,.card-links .unit-go:hover,.card-links .unit-go:focus-visible{background:color-mix(in srgb,var(--ink,#fff) 10%,transparent)}
.card-units .unit-go:focus-visible,.card-links .unit-go:focus-visible{outline:2px solid var(--accent,#5fd4c0);outline-offset:1px}
.card-spark{margin:12px 0 0;padding-top:8px;border-top:1px solid var(--rule)}
.card-spark p{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:13px}
.card-spark .plot{position:relative;margin:16px 52px 2px 0}
.card-spark svg{display:block;width:100%;height:56px;overflow:visible}
.card-spark .area{fill:var(--c,var(--ink));fill-opacity:.18;stroke:none}
.card-spark .trace{fill:none;stroke:var(--c,var(--ink));stroke-width:1.6}
.card-spark .cap{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.card-spark .cap-l{position:absolute;left:2px;transform:translateY(-115%);font-size:10px;letter-spacing:.06em;color:var(--muted);pointer-events:none}
.card-spark .now-l{position:absolute;left:100%;transform:translate(6px,-50%);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.card-spark .nowdot{stroke:var(--c,var(--ink));stroke-width:7;stroke-linecap:round}
.card-spark .zero{stroke:var(--rule);stroke-width:1}
.card-spark .dot{stroke:var(--c,var(--ink));stroke-width:6;stroke-linecap:round}
.card-spark .now{stroke:var(--ink);stroke-width:1.5}
.card-spark .plan{fill:none;stroke:var(--c,var(--ink));stroke-width:1.6;stroke-dasharray:2 3;opacity:.8}
.card-spark .now-l.mid{transform:translate(-50%,-160%);background:var(--panel);padding:0 3px;border-radius:2px}
.card-links{margin:10px 0 0}
.card-links ul{list-style:none;margin:4px 0 0;padding:0 0 0 6px;font-size:13px}
.ledger-sum{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.ledger-sum:empty{display:none}
.ledger-sum .badge{margin-right:2px}
.card-spark .axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-note{margin:10px 0 0;font:400 13px/1.3 var(--sans);color:var(--muted)}
.src p{margin:0}
.notes summary{cursor:pointer;width:max-content;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px}
.notes summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.notes[open] .notes-body{position:absolute;bottom:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 48px));max-height:60vh;overflow:auto;padding:12px 14px;background:var(--solid);border:1px solid var(--rule);border-radius:6px;color:var(--ink);font-size:12px;line-height:1.45}
.notes-body p{margin:0 0 8px}.notes-body .hint{color:var(--muted)}

@media (max-width:760px){
  .rail{left:16px;top:14px;width:calc(100vw - 32px)}
  .mast{margin-bottom:8px}
  h1{font-size:24px;max-width:none}
  .dateline{font-size:15px;margin-top:6px}
  .clock{font-size:24px;margin:4px 0}
  .row{padding:4px 0}.row dt{font-size:14px}.row dd span{font-size:17px;min-width:80px}.spark{width:72px}
  .beat{display:none}
  .row .cables,.ledger-foot span:last-child{display:none}
  .ledger-foot{margin-top:4px}
  /* bottom sheet: opens short (name + hero), the grip expands it */
  .card{left:16px;right:16px;top:auto;bottom:190px;width:auto;max-height:136px;overflow:hidden;padding-top:16px;transition:max-height .2s ease}
  .card-head{top:-16px;margin-top:-16px;padding-top:16px}
  .card.open{max-height:50vh;overflow:auto}
  /* expanded sheet: the rail steps out so the asset stays in view above the sheet */
  .sheet-open .rail{visibility:hidden}
  .card-grip{all:unset;display:block;position:absolute;left:50%;top:0;width:64px;height:16px;margin-left:-32px;cursor:pointer;z-index:3}
  .card-grip::before{content:"";display:block;width:36px;height:4px;margin:6px auto 0;border-radius:2px;background:var(--rule)}
  .card-grip:focus-visible{outline:2px solid var(--ink)}
  .card-name{font-size:19px;margin-bottom:6px}
  .hero-num b{font-size:24px}
  .tools{left:16px;right:16px;top:auto;bottom:146px}
  /* a card is open: the rail shrinks to its masthead so the map shows between it and the sheet */
  .inspecting .rail h1,.inspecting .dateline,.inspecting .clock,.inspecting .ledger{display:none}
  .find{flex:1}.find input{width:100%;box-sizing:border-box}
  #q-list{top:auto;bottom:calc(100% + 4px)}
  .layers fieldset{top:auto;bottom:calc(100% + 6px)}
  .src{left:12px;right:12px;bottom:8px;font-size:10.5px;padding:6px 10px}
  .mini{display:none}
  .zoomed .rail{width:calc(100vw - 32px)}.zoomed .clock{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.chip.live::before{animation:none}.card{transition:none}.compass svg{transition:none}}

/* ---- HUD: KPI tiles, all-sources drawer, event ticker, data strip ---- */
.k-lab{display:block;margin:0;font:600 11px/1 var(--sans);color:var(--muted);letter-spacing:.04em}
.kpis{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px}
.kpi{padding:8px 9px 7px;background:rgba(255,255,255,.03);border:1px solid var(--rule);border-radius:6px;border-top:2px solid var(--c,var(--ink))}
.kpi b{display:block;margin:5px 0 3px;font:600 32px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi.wind b{color:var(--wind);text-shadow:0 0 14px rgba(45,225,194,.35)}
.kpi small{display:block;font-size:11px;color:var(--muted)}
.kpi.co2{--c:var(--muted)}
.kpi{min-width:0}
.vitals{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.vt{min-width:0;padding:6px 8px 5px;background:rgba(255,255,255,.02);border:1px solid var(--rule);border-radius:6px}
.vt .k-lab{display:flex;justify-content:space-between;align-items:center;gap:4px;white-space:nowrap}
.vt b{display:block;margin:4px 0 2px;font:600 18px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.vt small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt.warn b{color:#ffb38a}
.vt svg{display:block;width:100%;height:16px;margin:2px 0}
.vt .hz{fill:none;stroke:var(--wind);stroke-width:1.3}.vt.warn .hz{stroke:#ffb38a}
.vt .mid{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 2}
.snsp-bar{position:relative;display:block;height:6px;margin:5px 0 4px;border-radius:2px;background:var(--rule);overflow:visible}
.snsp-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--wind);transition:width 1s ease}
.snsp-bar em{position:absolute;left:75%;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.fc{grid-column:1/-1;margin:0;font-size:11px;color:var(--muted);line-height:1.35}
.fc[hidden]{display:none}
.kpi .k-lab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 4px;white-space:nowrap}
.kpi .dlt{font-style:normal;font-size:10px;font-weight:600;letter-spacing:0;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .dlt.up{color:#8fd8ff}.kpi .dlt.down{color:var(--muted)}
.kpi .lag{display:inline-block;margin-top:2px;padding:0 5px;border:1px solid #ffb38a66;border-radius:3px;color:#ffb38a;font-size:10px;white-space:nowrap}
.mix{margin:8px 0 0}
.mix figcaption{font-size:11px;letter-spacing:.04em;color:var(--muted);margin:0 0 5px}
.mix figcaption small{font-size:inherit;opacity:.8}
.mix-bar{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--rule)}
.mix-bar i{display:block;height:100%;width:0;transition:width 1.6s ease;font:700 10px/14px var(--sans);font-style:normal;text-align:center;color:#071016;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.mix-bar i.m-oth,.mix-bar i.m-imp{color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
.m-wind{--m:var(--wind)}.m-sol{--m:var(--sol)}.m-imp{--m:var(--imp)}.m-oth{--m:var(--oth)}
.mix-bar i{background:var(--m)}
.mix-bar i.m-wind{box-shadow:0 0 8px var(--wind)}
.mix-bar i.m-oth{background:repeating-linear-gradient(135deg,var(--oth) 0 3px,color-mix(in srgb,var(--oth) 45%,transparent) 3px 6px)}
.mix-key{display:flex;flex-wrap:wrap;gap:2px 12px;margin:5px 0 0;padding:0;list-style:none;font-size:11px;color:var(--muted)}
.mix-key li i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;background:var(--m);vertical-align:-1px}
.mix-key li.m-oth i{background:repeating-linear-gradient(135deg,var(--oth) 0 2px,transparent 2px 4px)}
.mix-key .m-note{flex-basis:100%;font-size:10px;opacity:.75}
.mix-key b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.all{margin:8px 0 0}
.all summary{cursor:pointer;font-size:13px;color:var(--muted);list-style:none;padding:3px 0}
.all summary::-webkit-details-marker{display:none}
.all summary::after{content:" +"}.all[open] summary::after{content:" −"}
.all summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fleet{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule)}
.fleet .k-lab small{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none}
#fleet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:6px 0 0;padding:0;list-style:none}
#fleet li{display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 6px;border:1px solid var(--rule);border-radius:999px;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#fleet li{gap:3px;padding:3px 5px}#fleet li small{margin-left:2px;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
#fleet li[data-fuel]{cursor:pointer}#fleet li[data-fuel]:hover,#fleet li.picked{border-color:var(--c);color:var(--ink)}
#fleet li:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
#fleet li.wide{grid-column:span 2}
#fleet li.dsu{border-style:dashed}
#fleet li i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
#fleet li b{color:var(--ink);font-weight:600}
#fleet li.idle i{box-shadow:none;opacity:.45}
.symkey{margin:2px 0 0;padding:6px 0 0;border-top:1px solid var(--rule);list-style:none;display:grid;gap:5px;font-size:11.5px;color:var(--muted)}
.symkey li{display:flex;align-items:center;gap:8px}
.symkey i{flex:none;width:22px;height:12px;display:inline-grid;place-items:center;font:600 8px/1 var(--sans);font-style:normal}
.symkey .s-glow{border-radius:50%;background:radial-gradient(circle,#ff6b3d 0 2px,rgba(255,107,61,.45) 3px,transparent 6px)}
.symkey .s-ring{width:12px;margin:0 5px;border-radius:50%;border:1.5px solid #e8eef2}
.symkey .s-ring.s-in{border-color:#f06bd0;border-style:dashed}
.symkey .s-off{border:1px dashed var(--muted);border-radius:999px;color:var(--muted)}
.symkey .s-arc{height:8px;border-top:2px solid var(--imp);border-radius:50% 50% 0 0}
.symkey .s-dot{background:radial-gradient(circle,#2de1c2 0 3px,transparent 3.5px) 0 50%/8px 8px no-repeat,radial-gradient(circle,#ff6b3d 0 3px,transparent 3.5px) 7px 50%/8px 8px no-repeat,radial-gradient(circle,#4fa8ff 0 3px,transparent 3.5px) 14px 50%/8px 8px no-repeat}
.invite{margin:6px 0 0;font-size:12.5px;color:var(--wind)}
.invite[hidden],.zoomed .invite{display:none}
.ticker-wrap{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule)}
.ticker{margin:5px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:13px;line-height:1.3}
.ticker li{display:grid;grid-template-columns:auto auto 1fr auto;gap:6px;align-items:baseline}
.ticker li.none{display:block;color:var(--muted)}
.ticker time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ticker i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--c,var(--ink));box-shadow:0 0 6px var(--c,var(--ink))}
.ticker button{all:unset;cursor:pointer;font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ticker button:focus-visible{outline:2px solid var(--ink)}
.ticker li.fresh{animation:fresh 2.4s ease}
@keyframes fresh{0%{background:rgba(155,123,255,.25)}100%{background:transparent}}
.zoomed .ticker li:nth-child(n+3){display:none}
.asof{flex:1;min-width:0;margin:0;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asof b{color:var(--alert);margin-right:4px}
.asof .seg{color:var(--ink);font-size:11px}.asof .seg+.seg{margin-left:10px;padding-left:10px;border-left:1px solid var(--rule)}
.asof .seg small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.clouds-at{margin:0;font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.clouds-at[hidden]{display:none}
.tick{display:flex;align-items:center;gap:6px;margin:0;padding-left:14px;border-left:1px solid var(--rule);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tick svg{width:16px;height:16px;transform:rotate(-90deg)}
.tick circle{fill:none;stroke-width:2.5}
.tick .t-bg{stroke:var(--rule)}.tick .t-arc{stroke:var(--wind);stroke-linecap:round}
.clouds-at{padding-left:14px;border-left:1px solid var(--rule)}
/* map captions for events: pinned to the spot, fade after a while */
#labels .ping{transform:translate(-50%,-260%);padding:4px 8px;border-radius:4px;background:var(--panel);border:1px solid var(--c,var(--ink));
  font:600 12px/1.2 var(--sans);color:var(--ink);text-shadow:none;transition:opacity .6s}
#labels .ping.gone{opacity:0}
/* live MW tags over the biggest producers in view */
#labels .tag{transform:translate(-50%,calc(-100% - 22px));padding:2px 6px;border-radius:3px;background:rgba(10,17,24,.78);border:1px solid var(--rule);
  font:600 11.5px/1.2 var(--sans);color:var(--ink);text-shadow:none;font-variant-numeric:tabular-nums}
#labels .tag b{color:var(--c,var(--ink));margin-left:4px}
#labels .tag{border-left:3px solid var(--c,var(--rule));padding-bottom:4px}
#labels .tag .lvl{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
#labels .tag .lvl::before{content:"";display:block;height:100%;width:var(--f,0);background:var(--c,var(--ink))}
#labels .tag.off .lvl{display:none}
#labels .tag[hidden]{display:none}
#labels .tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:20px;background:linear-gradient(var(--c,#8fa3b0),transparent);opacity:.8}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 62% 50%,transparent 55%,rgba(3,7,11,.6) 100%)}
#labels .tag.off{color:var(--muted);border-style:dashed}
#labels .tag.off b{color:var(--muted);font-size:10px;letter-spacing:.08em;padding:0 4px;border:1px solid var(--rule);border-radius:999px}
/* regions painted on the floor are in the scene; asset labels read as HUD text */
#labels .asset{color:#8fa3b0}
@media (max-width:760px){
  .rail{left:12px;right:12px;top:10px;width:auto;padding:9px 12px 10px}
  .clock{font-size:22px}.kpi b{font-size:22px}.kpi small{display:none}
  /* phone: one row of numbers under the title; the newest event as a single line */
  .rail h1,.rail .when,.rail .all,.rail .beat{display:none}
  .kpi{padding:5px 7px 5px}.kpi .k-lab{font-size:10px}.kpi b{margin:3px 0 0}.mix-key,.mix figcaption small{display:none}
  .ticker-wrap{margin-top:6px;padding-top:6px}.ticker-wrap .k-lab{display:none}
  .ticker li:not(:first-child){display:none}
  .ticker button{padding:6px 4px;margin:-6px -4px}
  .inspecting .kpis,.inspecting .all,.inspecting .when{display:none}
  .asof{font-size:10.5px}
  .fleet{display:none}
  .clouds-at{font-size:10.5px}.clouds-at .badge,.clouds-at .cl-src{display:none}
  .kpi .dlt,.tick span,.vitals{display:none}.tick,.clouds-at{padding-left:8px}
}
@media (prefers-reduced-motion:reduce){.mix-bar i{transition:none}.ticker li.fresh{animation:none}}
/* short screens: the rail sheds its small print before it scrolls */
@media (max-height:760px) and (min-width:761px){.kpi small:not(#k-co2-at),.mix-key .m-note,.beat{display:none}.kpi b{margin-bottom:0}}
/* under 800 px tall the vitals fold to one strip: label + value, the badge as a dot (its word is in the tooltip) */
@media (max-height:800px) and (min-width:761px){
  .vitals{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .vt{padding:4px 6px}.vt .k-lab{font-size:9.5px;overflow:hidden}
  .vt svg,.vt small,.vt .snsp-bar,.fc{display:none}
  .vt b{font-size:15px;margin:3px 0 0}
  .vt .badge{font-size:0;width:6px;height:6px;padding:0;border-radius:50%;background:currentColor;flex:none}
}
/* where the demand tile's small line is hidden, the number keeps its unit */
@media (max-height:760px) and (min-width:761px),(max-width:760px){#k-dem::after{content:" MW";font-size:13px;font-weight:500;color:var(--muted)}}
@keyframes card-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

/* touch: every control is at least 44 px to tap (WCAG 2.5.5); the look stays, the hit area grows */
@media (pointer:coarse){
  .compass{width:44px;height:44px}
  .find input{min-height:44px}
  .layers summary,.notes summary{min-height:44px;display:flex;align-items:center;padding-inline:8px}
  #layer-list label{min-height:44px;display:flex;align-items:center;gap:10px}
  #layer-list input{width:20px;height:20px}
  .ticker button{min-height:44px;min-width:44px}
}

/* ---- phone dock (round 4, D2): tools + footer as one bar on the bottom edge, the card sheet sits on it;
   the rail folds to a strip (name, live chip, one line of numbers, mix bar) and opens as a top sheet ---- */
.rail-more,.ph-sum{display:none}
@media (max-width:760px){
  .tools{left:0;right:0;bottom:44px;height:56px;box-sizing:border-box;padding:6px 12px;align-items:center;background:var(--solid);border-top:1px solid var(--rule)}
  .src{left:0;right:0;bottom:0;height:44px;box-sizing:border-box;padding:0 12px;border-width:1px 0 0;border-radius:0;background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}
  .card{bottom:100px;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .rail{cursor:pointer}
  .rail-more{all:unset;display:grid;place-items:center;margin-left:auto;width:32px;height:28px;border-radius:6px;color:var(--muted);cursor:pointer}
  .rail-more svg{width:12px;height:12px;transition:transform .2s}
  .rail-open .rail-more svg{transform:rotate(180deg)}
  .rail-more:focus-visible{outline:2px solid var(--ink)}
  .rail .mast{margin-bottom:6px}
  #mix-title{display:none}
  .ph-sum{display:inline;font:600 13px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:0}
  .rail .kpis,.rail .ticker-wrap,.rail .invite{display:none}
  .rail-open .rail .kpis{display:grid;margin-top:8px}
  .rail-open .rail .ticker-wrap{display:block}
  .rail-open .ph-sum{display:none}.rail-open #mix-title{display:inline}
  .rail-open .rail .mix{margin-top:8px}
  .inspecting .rail-more{display:none}
}
@media (max-width:760px) and (pointer:coarse){.rail-more{width:44px;height:44px;margin:-8px -8px -8px auto}}
@media (prefers-reduced-motion:reduce){.rail-more svg{transition:none}.snsp-bar i{transition:none}.tick.waiting .t-arc{animation:none}.boot-cap{transition:none}}
.tick.waiting .t-arc{animation:arc-wait 1.2s ease-in-out infinite alternate}
@keyframes arc-wait{from{opacity:.4}to{opacity:1}}
.boot-cap{position:fixed;z-index:2;left:340px;bottom:calc(var(--src-h,34px) + 14px);margin:0;padding:6px 10px;border:1px solid var(--rule);border-radius:4px;background:var(--panel);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;transition:opacity .8s;pointer-events:none}
.boot-cap .badge{margin-right:4px}.boot-cap.gone{opacity:0}
@media (max-width:760px){.boot-cap{left:12px;top:auto;bottom:calc(var(--src-h,34px) + 120px)}}
@media (max-width:760px){.card:not(.open){cursor:pointer}}
/* no WebGL / no JavaScript: say so where the map would be */
.nogl{position:fixed;right:24px;top:50%;transform:translateY(-50%);max-width:340px;margin:0;padding:14px 16px;border:1px solid var(--line, #2a3a48);border-radius:6px;background:rgba(10,18,26,.92);color:#cfdbe3;font:500 14px/1.45 "IBM Plex Sans Condensed",system-ui,sans-serif;z-index:60}
@media (max-width:760px){.nogl{left:16px;right:16px;top:auto;bottom:120px;transform:none;max-width:none}}
@media (max-height:680px) and (min-width:761px){.mix-key{display:none}.ticker-wrap{margin-top:6px;padding-top:5px}}