/* ===== TMX Dilbit Spill Impact Explorer — styles ===== */
:root{
  --bg:#0b1620; --panel:#0f2130; --panel2:#132a3c;
  --line:#1e3c52; --ink:#e7f0f6; --muted:#8fa9bd; --muted2:#5f7c92;
  --accent:#37c0d6; --accent2:#ffb347; --danger:#ff5c5c; --ok:#5fd39b;
  --slick:#0a0a0a; --plume:#ff8a3d;
  --sh:0 6px 24px rgba(0,0,0,.35);
  --r:12px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 70% -10%, #14324a 0%, var(--bg) 55%);
  color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0;font-weight:650}
code{background:#0c1c29;padding:1px 5px;border-radius:5px;color:#a9d5e6;font-size:.88em}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0e2434,#0b1a26);position:sticky;top:0;z-index:20;
}
.titles h1{font-size:17px;letter-spacing:.2px}
.titles .sub{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{font-size:11.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.badge.warn{background:#3a2410;border-color:#6b4415;color:#ffce88}
.badge.link{background:#10293a;color:var(--accent);text-decoration:none}
.badge.link:hover{background:#164055}

/* ---- app layout ---- */
.app{display:grid;grid-template-columns:320px 1fr;gap:18px;padding:18px;align-items:start;max-width:1500px;margin:0 auto}
@media (max-width:1000px){.app{grid-template-columns:1fr}}

/* ---- controls ---- */
.controls{
  position:sticky;top:78px;display:flex;flex-direction:column;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh);
}
@media (max-width:1000px){.controls{position:static}}
.ctl-group{display:flex;flex-direction:column;gap:10px}
.ctl-group h2{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);opacity:.9}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.field b{color:var(--ink);font-weight:600}
select,input[type=range]{width:100%}
select{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 9px;font-size:13px;appearance:none;
}
select:focus{outline:2px solid var(--accent);outline-offset:1px}
.hint{margin:0;font-size:11.5px;color:var(--muted2);min-height:14px;font-style:italic}
/* "Why no VLCC?" expandable explainer under the tanker-class toggle */
.whyvlcc{margin:2px 0 4px;font-size:11.5px;color:var(--muted2)}
.whyvlcc[data-hidden="true"]{display:none}
.whyvlcc summary{cursor:pointer;color:var(--muted);font-size:11.5px;list-style:none;user-select:none}
.whyvlcc summary::-webkit-details-marker{display:none}
.whyvlcc summary:hover{color:var(--ink)}
.whyvlcc[open] summary{color:var(--ink);margin-bottom:5px}
.whyvlcc p{margin:0 0 7px;padding:7px 9px;border-radius:8px;background:var(--panel2);
  border-left:3px solid #37c0d6;line-height:1.5;font-style:normal}
.whyvlcc b{color:var(--ink)}

/* range sliders */
input[type=range]{
  -webkit-appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent) 0%, var(--accent) var(--fill,40%), #24445c var(--fill,40%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#eaf6fb;border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#eaf6fb;border:3px solid var(--accent);cursor:pointer}

/* chips + segmented toggles */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:11px;padding:5px 9px;border-radius:999px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.toggle-row{display:flex}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%}
.seg[data-hidden="true"]{display:none}
.seg-label{flex:0 0 100%;font-size:11px;color:var(--muted);margin-bottom:2px}
.seg button{
  flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  padding:7px 6px;border-radius:8px;cursor:pointer;font-size:11.5px;white-space:nowrap;
}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#04222a;font-weight:650}
.seg button:hover:not(.on){border-color:var(--accent);color:var(--ink)}
.reset{
  margin-top:2px;background:transparent;border:1px dashed var(--line);color:var(--muted);
  padding:9px;border-radius:8px;cursor:pointer;font-size:12px
}
.reset:hover{border-color:var(--accent);color:var(--ink)}
.scenario{
  background:#3a1414;border:1px solid #6b2020;color:#ffb0b0;
  padding:10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600
}
.scenario:hover{background:#4d1a1a;border-color:#ff6b6b;color:#ffd0d0}
.scenario.alt{background:#12332a;border-color:#1f6b4f;color:#a0e6c4}
.scenario.alt:hover{background:#184433;border-color:#5fd39b;color:#c9f4dd}
.scenario.fish{background:#102a33;border-color:#256c7a;color:#a0dfeb}
.scenario.fish:hover{background:#16414f;border-color:#4bb3c4;color:#cdf1f8}
.soft{color:var(--muted2);font-weight:500;font-style:italic}
/* live wind (Environment Canada) */
.livewind{
  margin-top:2px;background:#10293a;border:1px solid #245073;color:#9fd0f0;
  padding:8px 9px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;width:100%
}
.livewind:hover{background:#163650;border-color:#5fb0e0;color:#cfeaff}
.hint.live-ok{color:#a0e6c4;font-style:normal}
.hint.live-ok b{color:#c9f4dd}
.hint.live-err{color:#ffb8a0;font-style:normal}
.hint.live-err a{color:#8fb8cf}
/* Windy live-wind embed */
.windy-toggle{
  margin-left:auto;background:#10293a;border:1px solid #245073;color:#9fd0f0;
  padding:4px 10px;border-radius:999px;cursor:pointer;font-size:11.5px;font-weight:600
}
.windy-toggle:hover,.windy-toggle.on{background:#163650;border-color:#5fb0e0;color:#cfeaff}
.windy-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px;box-shadow:var(--sh)}
.windy-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 6px 8px;font-size:12.5px;color:var(--muted)}
.windy-head b{color:var(--ink)}
.windy-close{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:4px 9px;border-radius:7px;cursor:pointer;font-size:11.5px}
.windy-close:hover{border-color:var(--accent);color:var(--ink)}
#windy-embed iframe{display:block;border-radius:8px;background:#0d2436}

/* elevated water-level gauge */
.waterlevel{
  margin-top:4px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:9px 10px;font-size:11.5px
}
.waterlevel .wl-top{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted)}
.waterlevel .wl-total{font-size:15px;font-weight:700;color:var(--ink)}
.waterlevel .wl-bar{position:relative;height:8px;border-radius:5px;background:#0d2233;margin:8px 0 5px;overflow:hidden}
.waterlevel .wl-bar > i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#2f7fb0,#37c0d6);transition:width .3s}
.waterlevel .wl-bar.flood > i{background:linear-gradient(90deg,#ff8a3d,#ff5252)}
.waterlevel .wl-thresh{position:absolute;top:-2px;bottom:-2px;width:2px;background:#ffce88;opacity:.9}
.waterlevel .wl-parts{color:var(--muted2);display:flex;gap:10px;flex-wrap:wrap}
.waterlevel .wl-flag{color:#ff8a8a;font-weight:700}
.waterlevel .wl-ok{color:var(--ok)}

/* compound-event banner over the map */
.compound-banner{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(90,15,15,.94);border:1px solid #ff5c5c;color:#ffdede;
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  box-shadow:0 4px 18px rgba(0,0,0,.5);max-width:90%;text-align:center;
  animation:pulse 2.2s ease-in-out infinite
}
@keyframes pulse{0%,100%{box-shadow:0 4px 18px rgba(255,92,92,.25)}50%{box-shadow:0 4px 26px rgba(255,92,92,.6)}}

/* ---- stage ---- */
.stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.mapwrap{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:8px;box-shadow:var(--sh);
}
#map{width:100%;height:560px;display:block;border-radius:8px;background:#0d2436;z-index:1}
@media (max-width:1000px){#map{height:440px}}
/* ===== full-screen map mode (⛶ toggle) ===== */
.map-expand{position:absolute;top:16px;right:16px;z-index:30;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px;line-height:1;
  cursor:pointer;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.map-expand:hover{background:var(--panel2)}
body.mapfull{overflow:hidden}
body.mapfull .mapwrap{position:fixed;inset:0;z-index:3000;border-radius:0;display:flex;flex-direction:column}
body.mapfull .mapwrap #map{flex:1 1 auto;height:auto;min-height:0;border-radius:6px}
/* Leaflet dark-theme tweaks */
.leaflet-container{background:#0d2436;font:inherit}
.leaflet-control-attribution{background:rgba(10,22,32,.7);color:#6f8ba0}
.leaflet-control-attribution a{color:#8fb8cf}
.leaflet-bar a{background:#12283a;color:#cfe1ec;border-color:#24445c}
.leaflet-bar a:hover{background:#1a3852}
.node-tip{background:#0b1620;border:1px solid #2a4a60;color:#cfe1ec;font-size:11px;font-weight:600;padding:2px 7px}
.node-tip::before{border-top-color:#2a4a60}
.resp-pin{font-size:17px;line-height:22px;text-align:center;filter:drop-shadow(0 0 3px rgba(0,0,0,.7));cursor:pointer}
.cur-tip-lbl{color:#bfeff6;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  text-shadow:0 0 3px #0b1620,0 0 3px #0b1620,0 0 3px #0b1620;white-space:nowrap;pointer-events:none}
.cur-tip-lbl.drift-lbl{color:#f5c07a}

.map-legend{
  display:flex;flex-wrap:wrap;gap:14px;padding:8px 6px 2px;font-size:11.5px;color:var(--muted)
}
.map-legend .sw{display:inline-block;width:16px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.sw.pipe{background:#ffb347}.sw.tanker{background:#6fd1e0}
.sw.slick{background:#1a120c;border:1px solid #e8a24d}.sw.plume{background:linear-gradient(90deg,#ffd24d,#ff5252)}
.sw.wind{background:#eaf6fb}
.sw.current{background:repeating-linear-gradient(90deg,#41d6e6 0 4px,transparent 4px 7px)}
.sw.drift{background:repeating-linear-gradient(90deg,#f0b25a 0 2px,transparent 2px 5px)}

/* shoreline-oiling overlay (shared by both apps) */
.oil-shore-glow{filter:blur(2.5px)}
.oiling-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 6px 2px;font-size:11.5px;color:var(--muted)}
.oiling-ctl[hidden]{display:none}
.oiling-legend{display:inline-flex;align-items:center;gap:6px}
.oiling-legend .ol-ramp{display:inline-block;width:120px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#8c1a1a,#b71c1c,#d6281e,#f04628,#ff7846)}
.oiling-legend .ol-lo,.oiling-legend .ol-hi{font-size:10.5px;color:var(--muted2)}
.oiling-reach{font-style:normal;font-weight:600;color:#e8896a}
.oiling-note{font-size:10.5px}
body.light .oiling-reach{color:#b0472a}

/* ===== vessel-incident popups (explorer overlay) ===== */
.inc-popup .leaflet-popup-content-wrapper{background:#0e2130;color:var(--ink);border:1px solid #24445c;border-radius:10px}
.inc-popup .leaflet-popup-tip{background:#0e2130;border:1px solid #24445c}
.inc-popup a{color:#8fb8cf}
.inc-pop{font-size:12.5px;line-height:1.5}
.inc-pop .pop-h{font-size:14px;font-weight:700;margin-bottom:3px}
.inc-pop .pop-yr{color:var(--muted);font-weight:500;margin:0 4px}
.inc-pop .pop-type{font-size:10px;padding:1px 6px;border-radius:999px;font-weight:600}
.inc-pop .pop-type.eng{background:#3a2410;color:#ffce88}
.inc-pop .pop-title{color:var(--accent);font-weight:600;margin-bottom:6px}
.inc-pop .pop-meta{color:var(--muted2);font-size:11px;margin-bottom:5px}
.inc-pop .pop-cond{color:var(--muted)}
.inc-pop .pop-src{display:inline-block;margin-top:4px;color:#8fb8cf;font-size:11.5px}
/* full TSB summary, capped with an internal scroll so long ones stay tidy */
.inc-pop p:not([class]){max-height:170px;overflow-y:auto;margin:0 0 6px;padding-right:5px}
.inc-pop p:not([class])::-webkit-scrollbar{width:6px}
.inc-pop p:not([class])::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
body.light .inc-popup .leaflet-popup-content-wrapper,body.light .inc-popup .leaflet-popup-tip{background:#fff;border-color:#b8cddc}
body.light .inc-popup a,body.light .inc-pop .pop-src{color:#2a6f8e}
body.light .inc-pop .pop-type.eng{background:#faeed8;color:#8a5a10}

/* ===== evacuation place-name callout (People evacuated detail) ===== */
.evac-where{margin:2px 0 12px;padding:8px 11px;border-radius:9px;background:var(--panel2);
  border-left:3px solid var(--tone,#ff8a3d);font-size:12.5px;line-height:1.5;color:var(--ink)}
.evac-where b{color:var(--tone,#ff8a3d)}
.evac-where .ew-ic{margin-right:5px}

/* ===== benzene → evacuation rationale callout (Kalamazoo vs worker limits) ===== */
.bz-evac{margin:2px 0 12px;padding:10px 12px;border-radius:9px;
  background:color-mix(in srgb,#ff5c5c 10%,var(--panel2));
  border-left:3px solid #ff5c5c;font-size:12.5px;line-height:1.58;color:var(--ink)}
.bz-evac.compact{font-size:12px;line-height:1.5;padding:8px 11px;margin:8px 0 10px}
.bz-evac b{color:#e23b3b}
body.light .bz-evac b{color:#c62828}
.bz-evac .bze-ic{margin-right:6px;color:#e23b3b;font-weight:700}

/* ===== info affordance (ⓘ popover) on metric cards ===== */
.info-wrap{position:relative;display:inline-flex;margin-left:auto}
.card .k{position:relative}
.info-btn{background:transparent;border:0;color:var(--muted);cursor:help;font-size:13px;line-height:1;padding:0 2px}
.info-btn:hover,.info-btn:focus-visible{color:var(--accent);outline:none}
.info-pop{position:absolute;top:20px;right:0;z-index:30;width:240px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:11.5px;line-height:1.5;color:var(--muted);
  box-shadow:var(--sh);opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .12s,transform .12s;pointer-events:none;text-transform:none;letter-spacing:normal;font-weight:400}
.info-pop b{color:var(--ink)}
.info-wrap:hover .info-pop,.info-btn:focus-visible + .info-pop{opacity:1;visibility:visible;transform:none}
.info-more{display:block;margin-top:5px;color:var(--muted2);font-style:italic}
/* let the popover escape the card (cards clip with overflow:hidden) while hovered/focused */
.card:has(.info-wrap:hover),.card:has(.info-btn:focus-visible){overflow:visible;z-index:6}
.card::before{border-radius:var(--r) 0 0 var(--r)} /* keep the accent bar tidy when overflow shows */

/* ===== benzene benchmark ladder (health detail) ===== */
.bz-note{margin:14px 0 4px;padding:13px 14px;border-radius:10px;border:1px solid var(--line);
  border-left:3px solid var(--tone,#ff5c5c);background:var(--panel2)}
.bz-note.b0{border-left-color:#5fd39b}.bz-note.b1{border-left-color:#ffd24d}
.bz-note.b2{border-left-color:#ffab6b}.bz-note.b3{border-left-color:#ff7a4d}
.bz-note.b4{border-left-color:#ff5252}.bz-note.b5{border-left-color:#c81e1e}
.bz-h{margin:0 0 6px;font-size:12.5px;font-weight:650;color:var(--ink)}
.bz-lead{margin:0 0 34px;font-size:12.5px;color:var(--ink)}
.bz-lead b{color:var(--tone,#ff5c5c)}
.bz-ladder{position:relative;height:64px;margin:0 8px 46px}
.bz-bar{position:absolute;top:0;left:0;right:0;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#2f7f5c 0%,#7fbf4d 18%,#ffd24d 40%,#ff9d4d 60%,#ff5252 82%,#b01414 100%)}
.bz-tick{position:absolute;top:-3px;width:2px;height:15px;background:var(--muted);transform:translateX(-1px);opacity:.85}
.bz-tlab{position:absolute;top:18px;transform:translateX(-50%);text-align:center;
  font-size:9.5px;line-height:1.25;color:var(--muted2);white-space:nowrap}
.bz-tlab b{color:var(--muted);font-size:10.5px}.bz-tlab em{color:var(--muted2);font-style:italic}
.bz-mark{position:absolute;top:-7px;width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:11px solid var(--ink);transform:translateX(-6px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.bz-mlab{position:absolute;top:-26px;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;color:var(--ink);background:var(--panel);padding:1px 6px;border-radius:6px;border:1px solid var(--line)}
.bz-ref{margin:8px 0 0;font-size:11px;line-height:1.55;color:var(--muted2);border-top:1px dashed var(--line);padding-top:8px}
.bz-ref b{color:var(--muted)}
@media (max-width:520px){.bz-tlab{font-size:8.5px}}

/* A/B compare */
.scenario.cmp{background:#10263a;border-color:#245073;color:#9fd0f0}
.scenario.cmp:hover{background:#163650;border-color:#5fb0e0;color:#cfeaff}
.scenario.rb{background:#2a1f10;border-color:#7a5a25;color:#e8c88a}
.scenario.rb:hover{background:#3d2d16;border-color:#c99a3f;color:#f4dfae}
body.light .scenario.rb{background:#fbf3e0;border-color:#d9b56a;color:#7a5410}
body.light .scenario.rb:hover{background:#f5e8c8;border-color:#b8892e;color:#5c3f0a}
.compare-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#101f2e;border:1px solid #2a5170;border-radius:var(--r);padding:9px 13px
}
.compare-bar[hidden]{display:none}
.compare-bar .seg.mini{width:auto}
.cmp-labels{font-size:12px;color:var(--muted)}
.cmp-labels b.a{color:#37c0d6}.cmp-labels b.b{color:#ffb347}
.cmp-labels .cmp-vs{color:var(--muted2);margin:0 6px;font-style:italic}
.cmp-editing{font-size:11.5px;color:var(--muted2);margin-left:auto}
.cmp-editing b{color:var(--ink)}
.cmp-exit{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:5px 10px;cursor:pointer;font-size:11.5px}
.cmp-exit:hover{border-color:var(--danger);color:#ffd0d0}

/* two-value compare cards */
.card.cmp .ab{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.card.cmp .ab-l{font-size:11px;font-weight:750;width:16px;color:#37c0d6}
.card.cmp .ab-l.b{color:#ffb347}
.card.cmp .ab-v{font-size:17px;font-weight:700;letter-spacing:-.3px}
.card.cmp .ab-v small{font-size:11px;color:var(--muted);font-weight:500}
.delta{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:auto;white-space:nowrap}
.delta.bad{background:#3a1616;color:#ff9a9a}
.delta.good{background:#123326;color:#7fe0b0}
.delta.flat{background:#22333f;color:var(--muted)}
.delta.up{background:#3a2d12;color:#ffce88}
.card.cmp .k{display:flex;align-items:center}
.cmp-sum{display:block;margin-bottom:6px;color:var(--ink)}
.cmp-sum .warn{color:#ffce88}

/* likelihood ("how often") panel */
.likelihood{
  background:linear-gradient(180deg,#101f2e,#0e2233);border:1px solid #274b63;
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)
}
.lk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lk-title{font-size:14px;font-weight:650;color:#bfe3f0}
.lk-title em{color:#7fd0ff;font-style:italic}
.seg.mini{width:auto;display:inline-flex;gap:3px}
.seg.mini button{flex:0 0 auto;padding:5px 10px;font-size:11px}
.lk-body{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:14px;align-items:center}
@media (max-width:820px){.lk-body{grid-template-columns:1fr 1fr}}
.lk-big{display:flex;flex-direction:column;gap:2px}
.lk-big #lk-return{font-size:26px;font-weight:750;letter-spacing:-.5px;color:#eaf6fb;line-height:1.05}
.lk-big small{font-size:11px;color:var(--muted)}
.lk-stat{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.lk-stat b{display:block;font-size:20px;font-weight:700}
.lk-stat span{font-size:11px;color:var(--muted)}
.lk-slider{gap:6px}
.lk-note{margin-top:11px;font-size:11.5px;color:var(--muted2);border-top:1px dashed var(--line);padding-top:9px}
.lk-note b{color:#bfe3f0}
.lk-note .warn{color:#ffce88;font-weight:650}

/* view tabs */
.view-tabs{display:flex;flex-wrap:wrap;gap:8px}
.view-tabs button{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:9px 13px;border-radius:9px;cursor:pointer;font-size:12.5px;display:flex;gap:7px;align-items:center
}
.view-tabs button .ic{font-size:14px}
.view-tabs button:hover{border-color:var(--accent);color:var(--ink)}
.view-tabs button.on{background:var(--accent);border-color:var(--accent);color:#04222a;font-weight:650}

/* metric cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;position:relative;overflow:hidden;transition:border-color .15s,transform .15s
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone,var(--accent))}
.card.sel{border-color:var(--tone,var(--accent));transform:translateY(-2px)}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);display:flex;gap:6px;align-items:center}
.card .v{font-size:23px;font-weight:700;margin-top:6px;line-height:1.1;letter-spacing:-.5px}
.card .u{font-size:12px;color:var(--muted);font-weight:500}
.card .sub{font-size:11.5px;color:var(--muted2);margin-top:4px;min-height:15px}
.bar{height:5px;border-radius:4px;background:#1b3547;margin-top:9px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--tone,var(--accent));border-radius:4px;transition:width .3s}

/* detail panel */
.detail{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh)
}
.detail h3{margin:0 0 6px;font-size:15px;display:flex;align-items:center;gap:8px}
.detail .lead{color:var(--muted);font-size:13px;margin:0 0 12px}
.detail .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.detail .stat{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.detail .stat .sk{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.detail .stat .sv{font-size:17px;font-weight:650;margin-top:3px}
.detail .formula{margin-top:12px;font-size:11.5px;color:var(--muted2);border-top:1px dashed var(--line);padding-top:10px}
.detail .formula b{color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.pill.l1{background:#12362a;color:#7fe0b0}.pill.l2{background:#1b3a2a;color:#9fe0a0}
.pill.l3{background:#3a3212;color:#ffd870}.pill.l4{background:#3a2412;color:#ffab6b}
.pill.l5{background:#3a1414;color:#ff8a8a}
/* Fraser fish per-species rows (fish view) */
.fish-list{display:flex;flex-direction:column;gap:11px;margin:0 0 14px}
.fish-row{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;border-left:3px solid var(--tone,var(--accent))}
.fish-row.off{opacity:.5;border-left-color:var(--line)}
.fish-h{display:flex;align-items:baseline;gap:8px;font-size:13px}
.fish-h b{font-size:14px;font-weight:650}
.fish-tag{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px}
.fish-sev{margin-left:auto;font-size:15px;font-weight:700;color:var(--tone,var(--accent))}
.fish-sev small{font-size:10px;color:var(--muted2);font-weight:500}
.fish-note{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.45}
/* cost view: economic-sector sub-heading + total */
.detail h4.cost-h{font-size:12px;font-weight:650;margin:14px 0 8px;color:var(--tone,var(--accent));display:flex;align-items:baseline;gap:8px}
.detail h4.cost-h span{font-size:11px;color:var(--muted2);font-weight:500}
.detail .cost-total{margin-top:12px;padding:9px 12px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--tone,var(--accent));border-radius:9px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline}
.detail .cost-total b{font-size:17px;color:var(--ink);font-weight:700}
.foot{padding:14px 22px;color:var(--muted2);font-size:11.5px;border-top:1px solid var(--line);text-align:center}

/* ===== day/night toggle switch (topbar) ===== */
.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;margin-right:auto;margin-left:14px;
  background:transparent;border:0;cursor:pointer;padding:4px 2px;
}
.theme-toggle .tt-ic{font-size:14px;line-height:1}
.theme-toggle .tt-moon{color:#9fd0f0}
.theme-toggle .tt-sun{color:#c9a24a;opacity:.45}
.theme-toggle .tt-track{
  position:relative;width:40px;height:20px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);
  transition:background .2s,border-color .2s;
}
.theme-toggle .tt-knob{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);transition:left .2s,background .2s;
}
.theme-toggle:hover .tt-track{border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:999px}
.theme-toggle.day .tt-knob{left:22px;background:#e8a02c}
.theme-toggle.day .tt-moon{opacity:.4}
.theme-toggle.day .tt-sun{opacity:1;color:#b06a08}

/* =====================================================================
 * LIGHT (day) MODE — activated by body.light; dark stays the default.
 * Re-tunes the palette variables, then overrides every rule above that
 * hard-codes a dark hex so all text keeps ≥ WCAG-ish contrast on white.
 * =================================================================== */
body.light{
  --bg:#e9f1f7; --panel:#ffffff; --panel2:#edf3f8;
  --line:#c3d5e2; --ink:#15293a; --muted:#4c667a; --muted2:#6f8798;
  --accent:#0c7f96; --accent2:#b06a08; --danger:#c9392f; --ok:#177a52;
  --sh:0 6px 24px rgba(30,60,82,.14);
  background:radial-gradient(1200px 700px at 70% -10%, #d3e5f0 0%, var(--bg) 55%);
}
body.light code{background:#e2ecf3;color:#0d5c74}
body.light .topbar{background:linear-gradient(180deg,#f7fafc,#eaf1f7)}
body.light .badge.warn{background:#fdf0dc;border-color:#e0be82;color:#8a5a10}
body.light .badge.link{background:#e3eef5;color:#0c7f96}
body.light .badge.link:hover{background:#d3e5f0}
body.light input[type=range]{background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,40%),#c3d5e2 var(--fill,40%))}
body.light input[type=range]::-webkit-slider-thumb{background:#fff;box-shadow:0 2px 6px rgba(30,60,82,.35)}
body.light input[type=range]::-moz-range-thumb{background:#fff}
body.light .seg button.on{color:#fff}
body.light .view-tabs button.on{color:#fff}
body.light .scenario{background:#fbe9e7;border-color:#dfa49b;color:#a02c20}
body.light .scenario:hover{background:#f7d9d5;border-color:#c9392f;color:#7c1f15}
body.light .scenario.alt{background:#e2f4ea;border-color:#8fcbaa;color:#146543}
body.light .scenario.alt:hover{background:#d2ecdd;border-color:#177a52;color:#0e4d32}
body.light .scenario.fish{background:#e0f2f7;border-color:#8ec6d6;color:#0b5e74}
body.light .scenario.fish:hover{background:#d0e9f1;border-color:#3d97ad;color:#084a5c}
body.light .scenario.cmp{background:#e3eef8;border-color:#9dbedb;color:#1f5f8f}
body.light .scenario.cmp:hover{background:#d3e3f2;border-color:#5a92c0;color:#12466e}
body.light .livewind,body.light .windy-toggle{background:#e3eef8;border-color:#a9c6e0;color:#1f5f8f}
body.light .livewind:hover,body.light .windy-toggle:hover,body.light .windy-toggle.on{background:#d3e5f4;border-color:#5a92c0;color:#12466e}
body.light .hint.live-ok{color:#177a52}
body.light .hint.live-ok b{color:#116043}
body.light .hint.live-err{color:#a44a28}
body.light .hint.live-err a{color:#3d7092}
body.light #windy-embed iframe{background:#dce8f1}
body.light .waterlevel .wl-bar{background:#d5e3ee}
body.light .waterlevel .wl-thresh{background:#c77f10}
body.light .waterlevel .wl-flag{color:#c9392f}
/* leaflet chrome + map labels */
body.light #map,body.light .leaflet-container{background:#cfe0ec}
body.light .leaflet-control-attribution{background:rgba(255,255,255,.78);color:#5a7385}
body.light .leaflet-control-attribution a{color:#2a6f8e}
body.light .leaflet-bar a{background:#fff;color:#2a4356;border-color:#b8cddc}
body.light .leaflet-bar a:hover{background:#e9f1f7}
body.light .node-tip{background:#fff;border-color:#9db8ca;color:#22394c}
body.light .node-tip::before{border-top-color:#9db8ca}
body.light .cur-tip-lbl{color:#0f5b73;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 4px #fff}
body.light .cur-tip-lbl.drift-lbl{color:#8a5a10}
body.light .sw.wind{background:#33566e}
/* compare bar + deltas */
body.light .compare-bar{background:#eef4f9;border-color:#b7cede}
body.light .cmp-labels b.a{color:#0c7f96}
body.light .cmp-labels b.b{color:#b06a08}
body.light .card.cmp .ab-l{color:#0c7f96}
body.light .card.cmp .ab-l.b{color:#b06a08}
body.light .delta.bad{background:#fbe4e4;color:#b23030}
body.light .delta.good{background:#def4e8;color:#177a52}
body.light .delta.flat{background:#e5edf3;color:var(--muted)}
body.light .delta.up{background:#faeed8;color:#8a5a10}
body.light .cmp-sum .warn{color:#8a5a10}
body.light .cmp-exit:hover{border-color:var(--danger);color:#a02c20}
/* likelihood panel */
body.light .likelihood{background:linear-gradient(180deg,#f4f9fc,#eaf2f8);border-color:#b7cede}
body.light .lk-title{color:#1d5a75}
body.light .lk-title em{color:#0c7f96}
body.light .lk-big #lk-return{color:var(--ink)}
body.light .lk-note b{color:#1d5a75}
body.light .lk-note .warn{color:#8a5a10}
/* cards, bars, pills */
body.light .bar{background:#d5e3ee}
body.light .pill.l1{background:#dcf2e6;color:#116043}
body.light .pill.l2{background:#e2f2dc;color:#2e7020}
body.light .pill.l3{background:#f7edcd;color:#7c650a}
body.light .pill.l4{background:#f9e4d0;color:#9a5312}
body.light .pill.l5{background:#fbdede;color:#b02a2a}
/* tone-coloured text (view accents are tuned for dark bg) — darken on white */
body.light .fish-sev,body.light .detail h4.cost-h{filter:brightness(.62) saturate(1.5)}