/* Layout: an instrument console. Two readout columns (Pacific warmth / Arctic vortex) over one shared map, then a dated timeline and the news wire. */
:root{
  color-scheme:light;
  --bg:#edf1f3; --surface:#fbfcfd; --ink:#0f1e28; --muted:#566874; --line:#cfd9df;
  --warm:#c63d1c; --warm-soft:#f4d6cb; --cold:#2459c4; --cold-soft:#d3dff6;
  --sea:#dfe8ed; --land:#c4d0d7; --grid:#cbd6dc;
  --ok:#2f7d4f; --uk:#0e7468; --uk-soft:#cfe8e3;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a131a; --surface:#101c25; --ink:#e2ebf0; --muted:#8fa2ae; --line:#22343f;
  --warm:#ff7b50; --warm-soft:#3a1d14; --cold:#73a6ff; --cold-soft:#142540;
  --sea:#0d1820; --land:#1f303b; --grid:#1a2a34; --ok:#5cc58a; --uk:#4fd0bd; --uk-soft:#0f2e2a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a131a; --surface:#101c25; --ink:#e2ebf0; --muted:#8fa2ae; --line:#22343f;
  --warm:#ff7b50; --warm-soft:#3a1d14; --cold:#73a6ff; --cold-soft:#142540;
  --sea:#0d1820; --land:#1f303b; --grid:#1a2a34; --ok:#5cc58a; --uk:#4fd0bd; --uk-soft:#0f2e2a; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:.01em;line-height:1;margin:0;text-wrap:balance}
.eyebrow{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-data);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cold);outline-offset:2px}

/* Header */
header{display:grid;gap:14px;border-bottom:1px solid var(--line);padding-bottom:20px}
.titlerow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
h1{font-size:clamp(44px,8vw,84px);text-transform:uppercase}
h1 .w{color:var(--warm)} h1 .c{color:var(--cold)}
.stamp{font-family:var(--f-data);font-size:12px;color:var(--muted);text-align:right}
.lede{max-width:68ch;margin:0;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid}
.pill.w{border-color:var(--warm);color:var(--warm);background:var(--warm-soft)}
.pill.c{border-color:var(--cold);color:var(--cold);background:var(--cold-soft)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* Readout columns */
.consoles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.consoles{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:grid;gap:18px;min-width:0}
.panel.w{border-top:4px solid var(--warm)} .panel.c{border-top:4px solid var(--cold)}
.panel h2{font-size:34px;text-transform:uppercase}
.big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.big .num{font-family:var(--f-display);font-weight:800;font-size:72px;line-height:.9;font-variant-numeric:tabular-nums}
.panel.w .num{color:var(--warm)} .panel.c .num{color:var(--cold)}
.big .unit{font-family:var(--f-data);font-size:13px;color:var(--muted);max-width:30ch}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.readouts div{background:var(--surface);padding:10px 12px;display:grid;gap:2px;min-width:0}
.readouts b{font-family:var(--f-data);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums}
.readouts span{font-size:12px;color:var(--muted);line-height:1.3}
@media (max-width:420px){.readouts{grid-template-columns:1fr 1fr}}
.chartbox{overflow-x:auto}
svg text{font-family:var(--f-data);fill:var(--muted);font-size:11px}
.note{font-size:13px;color:var(--muted);margin:0;max-width:70ch}

/* Map */
.mapcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:grid}
.maphead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.maphead h2{font-size:28px;text-transform:uppercase}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{background:transparent;border:0;padding:7px 12px;font-family:var(--f-data);font-size:12px;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.mapbody{display:grid;grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:860px){.mapbody{grid-template-columns:1fr}}
#map{width:100%;height:auto;display:block;background:var(--sea)}
#map .land{fill:var(--land);stroke:var(--bg);stroke-width:.5}
#map .grat{fill:none;stroke:var(--grid);stroke-width:.5}
#map .box{stroke-width:1.2}
#map .mk{cursor:pointer}
#map .mk circle.hit{fill:transparent}
#map .mk:focus-visible circle.ring{stroke:var(--ink);stroke-width:2}
#map .lbl{font-size:10px;fill:var(--ink);paint-order:stroke;stroke:var(--sea);stroke-width:3px}
.side{border-left:1px solid var(--line);padding:16px 18px;display:grid;gap:12px;align-content:start;min-width:0}
@media (max-width:860px){.side{border-left:0;border-top:1px solid var(--line)}}
.side h3{font-size:22px}
.side p{margin:0;font-size:14px}
.legend{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:8px}
.sw{width:14px;height:10px;border-radius:2px;flex:none}
.vtoggle{display:flex;gap:8px;flex-wrap:wrap}

/* Timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;border-left:2px solid var(--line);margin-left:6px}
.tl li{position:relative;padding:0 0 16px 20px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 16px}
@media (max-width:560px){.tl li{grid-template-columns:1fr}}
.tl li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--muted)}
.tl li.w::before{border-color:var(--warm)} .tl li.c::before{border-color:var(--cold)}
.tl li.past.w::before{background:var(--warm)} .tl li.past.c::before{background:var(--cold)}
.tl li.future{opacity:.85}
.tl .d{font-family:var(--f-data);font-size:12px;color:var(--muted);padding-top:2px}
.tl .t{font-size:14px}
.tl .t b{font-weight:600}
.tag{font-family:var(--f-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:1px}
.tag.next{background:var(--ink);color:var(--surface)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}
@media (max-width:960px){.cols{grid-template-columns:1fr}}
section > h2{font-size:30px;text-transform:uppercase;margin-bottom:14px}

/* News */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-family:var(--f-data);font-size:12px;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}
.news{display:grid;gap:10px}
.item{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:4px;padding:12px 14px;display:grid;gap:4px;min-width:0}
.item.enso{border-left-color:var(--warm)} .item.vortex{border-left-color:var(--cold)}
.item.both{border-left-color:var(--ink)}
.item .meta{font-family:var(--f-data);font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.06em}
.item a{font-weight:600;font-size:15px;text-decoration:none}
.item a:hover{text-decoration:underline}
.item p{margin:0;font-size:14px;color:var(--muted)}
.empty{border:1px dashed var(--line);border-radius:4px;padding:18px;color:var(--muted);font-size:14px}

/* Ask */
.ask{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:12px}
.ask h2{font-size:26px;text-transform:uppercase}
.askrow{display:flex;gap:8px;flex-wrap:wrap}
.askrow input{flex:1 1 240px;min-width:0;font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.btn{background:var(--ink);color:var(--surface);border:0;border-radius:4px;padding:9px 16px;font-weight:600}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}
.answer{white-space:pre-wrap;font-size:14px;line-height:1.6;max-width:75ch}
.answer:empty{display:none}
/* UK */
.pill.u{border-color:var(--uk);color:var(--uk);background:var(--uk-soft)}
.uk{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;border-top:4px solid var(--uk);padding-top:18px}
.uk > header{border:0;padding:0;gap:8px}
.uk h2{font-size:clamp(34px,5vw,48px);text-transform:uppercase}
.uk h2 .u{color:var(--uk)}
.uk h3{font-size:24px;text-transform:uppercase}
.ukgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px}
@media (max-width:900px){.ukgrid{grid-template-columns:1fr}}
.panel.u{border-top:4px solid var(--uk)}
.signals{list-style:none;margin:0;padding:0;display:grid;gap:0}
.signals li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.signals li:first-child{border-top:0;padding-top:0}
.signals b{display:block;font-weight:600;font-size:14px}
.signals span.s{font-size:13px;color:var(--muted)}
.st{font-family:var(--f-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:3px;text-align:center;align-self:start;border:1px solid}
.st.active{background:var(--uk);border-color:var(--uk);color:var(--surface)}
.st.pending{border-color:var(--cold);color:var(--cold);background:var(--cold-soft)}
.st.watch{border-color:var(--muted);color:var(--muted)}
.st.no{border-color:var(--line);color:var(--muted);border-style:dashed}
.tug{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.tug{grid-template-columns:1fr}}
.tug > div{display:grid;gap:10px;align-content:start;padding:16px 18px;border-radius:6px;min-width:0}
.tug .w{background:var(--warm-soft)} .tug .c{background:var(--cold-soft)}
.tug h3{font-size:22px} .tug .w h3{color:var(--warm)} .tug .c h3{color:var(--cold)}
.tug ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;font-family:var(--f-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
td:first-child{font-family:var(--f-data);white-space:nowrap}
.tl li.u::before{border-color:var(--uk)} .tl li.past.u::before{background:var(--uk)}
.item.uk{border-left-color:var(--uk)}
footer{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Live data additions */
.st.done{background:var(--cold);border-color:var(--cold);color:var(--surface)}
.nao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:4px}
.nao b{font-family:var(--f-data);font-weight:500;font-size:20px;font-variant-numeric:tabular-nums}
.nao span{font-size:12px;color:var(--muted);line-height:1.35}
.nao svg{grid-column:1/-1;width:100%;height:auto}
.subhead{font-size:20px;text-transform:uppercase;margin:22px 0 4px}
.autonews{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.autonews li{padding:9px 0;border-bottom:1px solid var(--line);display:grid;gap:2px;min-width:0}
.autonews a{font-size:14px;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.autonews a:hover{text-decoration:underline}
.autonews .meta{font-family:var(--f-data);font-size:11px;color:var(--muted);letter-spacing:.04em}
.stale{color:var(--warm)}