/* ---- theme tokens --------------------------------------------------------
   The whole page, including the workspace panel and map chrome, follows
   light / dark. Only the live map viewport (#map's own pixels: satellite
   tiles, night lights, the blackout canvas) stays a dark night scene in
   both themes, since that is real photographic content, not UI chrome. */
:root {
  --bg:#171717;
  --ink:#d4d4d4;          /* soft white, never pure #fff */
  --ink-hi:#ededed;
  --muted:#8c8c8c;
  --prose:#a3a3a3;
  --line:#2b2b2b;
  --line-hi:#3a3a3a;
  --bg-panel:#1c1c1c;
  --bg-raise:#212121;
  --hover-tint:rgba(255,255,255,.035);
  --lights:#d8cbb4;
}
:root[data-theme="light"] {
  --bg:#f7f6f3;           /* warm paper, low glare */
  --ink:#262626;
  --ink-hi:#0b0b0b;
  --muted:#5f5f5f;
  --prose:#3f3f3f;
  --line:#e4e2dc;
  --line-hi:#d4d1c9;
  --bg-panel:#ffffff;
  --bg-raise:#f2f0ea;
  --hover-tint:rgba(0,0,0,.035);
}
@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) {
    --bg:#f7f6f3; --ink:#262626; --ink-hi:#0b0b0b; --muted:#5f5f5f;
    --prose:#3f3f3f; --line:#e4e2dc; --line-hi:#d4d1c9;
    --bg-panel:#ffffff; --bg-raise:#f2f0ea; --hover-tint:rgba(0,0,0,.035);
  }
}
/* layout-only vars, not colors: the picker | map split, and matching heights
   so the panel/map heads and the switchbox/caption feet line up. */
.workspace {
  --col-1:300px;
  --head-h:118px;
  --foot-h:104px;
  --pad:16px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.015em; margin:0; }
.eyebrow { margin:0; color:var(--muted); font:600 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }

.site-header { height:56px; padding:0 3.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.site-header .head-right { display:flex; align-items:center; gap:18px; }
.site-header p { margin:0; color:var(--muted); font:600 9px ui-monospace,monospace; letter-spacing:.13em; }
.wordmark { font:600 11px ui-monospace,monospace; letter-spacing:.15em; text-decoration:none; color:var(--ink); }
.wordmark span { color:var(--muted); font-weight:400; }
.theme-toggle { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid var(--line-hi);
  border-radius:999px; background:transparent; color:var(--muted); cursor:pointer;
  font:600 9px ui-monospace,monospace; letter-spacing:.12em; transition:color .15s, border-color .15s; }
.theme-toggle:hover { color:var(--ink); border-color:var(--muted); }
.theme-toggle svg { width:12px; height:12px; }
.theme-toggle .t-dark { display:none; }
:root[data-theme="light"] .theme-toggle .t-dark,
:root:not([data-theme="dark"]) .theme-toggle .t-dark { display:inline; }
:root[data-theme="light"] .theme-toggle .t-light,
:root:not([data-theme="dark"]) .theme-toggle .t-light { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .theme-toggle .t-dark { display:none; }
  :root:not([data-theme="light"]) .theme-toggle .t-light { display:inline; }
}

main { width:min(1380px,95vw); margin-inline:auto; }
.intro { padding:26px 0 16px; max-width:880px; }
.intro h1 { font-size:clamp(26px,3.3vw,42px); line-height:1.05; margin:8px 0 12px; color:var(--ink-hi); }
.intro .dek { margin:0; font:400 clamp(13px,1.15vw,15px)/1.6 Georgia,serif; color:var(--prose); max-width:840px; }
.intro strong { color:var(--ink); font-weight:700; }

.workspace { display:flex; flex-direction:column;
  border:1px solid var(--line); border-bottom:none;
  background:var(--bg-panel); }
.workspace-main { display:grid; grid-template-columns:var(--col-1) 1fr; gap:0;
  height:clamp(460px, calc(100vh - 210px), 760px); }

/* first-load prompt: a medium card floating over the map itself (.workspace.picking),
   not a strip elsewhere on the page, so the instruction sits where the eye already
   is. Sized for the always-dark map underneath, so it doesn't need theme tokens. */
.map-banner { display:none; position:absolute; z-index:620; left:50%; top:50%;
  transform:translate(-50%,-50%); width:min(300px, calc(100% - 32px)); padding:18px 22px 20px; text-align:center;
  background:rgba(16,16,16,.82); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(3px); pointer-events:none; }
.map-banner .eyebrow { color:#b9b9b9; }
.mb-text { margin:8px 0 0; color:#f0f0f0; font:400 14.5px/1.5 Georgia,serif; }
.workspace.picking .map-banner { display:block; }
.workspace.picking .details,
.workspace.picking .view-switch { display:none; }
.workspace.picking .copy-link { visibility:hidden; }
.panel { border-right:1px solid var(--line); background:var(--bg-panel); min-width:0; overflow:hidden; display:flex; flex-direction:column; }
/* same height as .map-head, so the top of the list lines up with the top of the map */
.panel-head { flex:0 0 auto; min-height:var(--head-h); padding:12px var(--pad) 14px;
  display:flex; flex-direction:column; justify-content:center; gap:10px; }
.ph-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ph-sub { margin:0; color:var(--muted); font:12px/1.5 Georgia,serif; }
.copy-link { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--line-hi);
  border-radius:999px; background:transparent; color:var(--muted); cursor:pointer;
  font:600 8px ui-monospace,monospace; letter-spacing:.1em; transition:color .15s, border-color .15s; }
.copy-link:hover { color:var(--ink); border-color:var(--muted); }
.copy-link.done { color:var(--ink); border-color:var(--ink); }

.picker { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.picker button { flex:0 0 auto; display:flex; flex-direction:column; gap:3px; text-align:left; padding:11px var(--pad);
  border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
  transition:background .12s, color .12s; }
.picker button:last-child { border-bottom:0; }
.picker button b { font:600 12px/1.2 Georgia,serif; color:var(--ink); letter-spacing:0; }
.picker button span { font:600 9px ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.picker button:hover { background:var(--hover-tint); color:var(--ink); }
.picker button:hover b { color:var(--ink); }
.picker button[aria-selected="true"] { background:var(--bg-raise); box-shadow:inset 2px 0 0 #9a9a9a; }
.picker button[aria-selected="true"] b { color:var(--ink-hi); }

/* Results band under the map. Two tiers, no prose:
   1. the equivalence: plant  ≈  state, big numbers, one fact-line each
   2. the cross-fuel bars: same yearly output as gas / wind / solar capacity     */
.details { border-top:1px solid var(--line); }
.view-toggle button:disabled { opacity:.4; cursor:default; }
.view-toggle button:disabled:hover { color:var(--muted); }

.equiv { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:0 clamp(16px,4vw,52px); padding:22px var(--pad) 24px; border-bottom:1px solid var(--line); }
.eq-side { min-width:0; }
.eq-state { text-align:right; }
.equiv .eyebrow { margin:0 0 7px; color:var(--ink); }
.equiv h2 { margin:0 0 10px; font:400 clamp(19px,2.1vw,25px)/1.1 Georgia,serif; color:var(--ink-hi); }
.eq-big { margin:0 0 9px; color:var(--muted); font:600 8.5px/1 ui-monospace,monospace;
  letter-spacing:.13em; text-transform:uppercase; }
.eq-big b { display:block; margin-bottom:5px; font:400 clamp(30px,4.4vw,44px)/1 ui-monospace,monospace;
  color:var(--ink-hi); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.eq-facts { margin:0; color:var(--muted); font:11.5px/1.5 Georgia,serif; }

.eq-rel { align-self:center; display:flex; flex-direction:column; align-items:center; gap:9px; padding-top:20px; }
.eq-sign { font:400 40px/1 Georgia,serif; color:var(--muted); }
.eq-delta { color:var(--ink-hi); font:600 10px/1.3 ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--line-hi); border-radius:999px; padding:4px 10px; }

.crossfuel { padding:20px var(--pad) 22px; }
.cf-head { display:flex; align-items:baseline; gap:4px 14px; flex-wrap:wrap; margin-bottom:16px; }
.cf-head .eyebrow { margin:0; color:var(--ink); }
.cf-sub { margin:0; color:var(--muted); font:11.5px/1.4 Georgia,serif; }
.cf-list { margin:0; display:grid; gap:15px; max-width:600px; }
.cf-row { display:grid; grid-template-columns:104px 42px 240px 1fr;
  align-items:center; column-gap:16px; }
.cf-row > * { margin:0; }
.cf-name { color:var(--muted); font:600 8px/1.2 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.cf-val { text-align:right; font:400 15px/1 ui-monospace,monospace; color:var(--ink-hi);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.cf-bar { height:8px; background:var(--line-hi); overflow:hidden; border-radius:1px; }
.cf-bar i { display:block; height:100%; background:#8e8e8e; }
.cf-note { color:var(--muted); font:11px/1.3 Georgia,serif; }
.cf-row.is-nuc .cf-name,
.cf-row.is-nuc .cf-val { color:var(--ink-hi); }
.cf-row.is-nuc .cf-bar i { background:var(--ink-hi); }

/* footprint: an equivalent solar field and wind field drawn to scale next to the
   reactor site. Nested corner-anchored squares (SVG) + a plain-number list. */
.footprint { padding:18px var(--pad) 22px; border-top:1px solid var(--line); }
.fp-body { display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; }
.fp-viz { flex:0 0 auto; width:230px; max-width:100%; }
.fp-viz svg { display:block; width:100%; height:auto; }
.fp-wind { fill:none; stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.fp-solar { fill:rgba(128,128,128,.14); stroke:var(--muted); stroke-width:1; }
.fp-nuclear { fill:var(--ink-hi); }
.fp-scale { stroke:var(--muted); stroke-width:1; }
.fp-scale-txt { fill:var(--muted); font:600 8px ui-monospace,monospace; letter-spacing:.04em; }
.fp-list { margin:2px 0 0; display:grid; gap:14px; align-content:start; }
.fp-list > div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:baseline; }
.fp-swatch { width:13px; height:13px; align-self:center; }
.fp-swatch.s-nuc { background:var(--ink-hi); }
.fp-swatch.s-sol { background:rgba(128,128,128,.14); border:1px solid var(--muted); }
.fp-swatch.s-win { border:1px dashed var(--muted); }
.fp-list dt { color:var(--muted); font:600 8px/1.3 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.fp-list dd { margin:2px 0 0; grid-column:2; font:400 14px/1 ui-monospace,monospace; color:var(--ink-hi);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.fp-list dd s { color:var(--muted); font-size:11px; text-decoration:none; }
.fp-caveat { margin:14px 0 0; max-width:540px; }

/* same height as the map's caption box, so the bottom rule runs across both columns */
.switchbox { flex:0 0 auto; min-height:var(--foot-h); padding:13px var(--pad) 15px;
  display:flex; flex-direction:column; justify-content:center;
  border-top:1px solid var(--line); background:var(--bg-raise); }
.toggle { display:flex; align-items:center; gap:12px; width:100%; padding:0; border:0; background:transparent; cursor:pointer; transition:opacity .2s; }
.toggle:disabled { opacity:.35; cursor:default; }
.toggle-track { flex:0 0 auto; width:52px; height:26px; border-radius:999px; background:#2a2a2a; border:1px solid var(--line-hi);
  position:relative; transition:background .2s, border-color .2s; }
.toggle-knob { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#e2e2e2;
  transition:transform .2s, background .2s, box-shadow .2s; }
.toggle.is-off .toggle-track { background:#1e1e1e; }
.toggle.is-off .toggle-knob { transform:translateX(26px); background:transparent; box-shadow:inset 0 0 0 2px #7c7c7c; }
.toggle-label { font:600 12px ui-monospace,monospace; letter-spacing:.13em; color:var(--ink); }
.toggle.is-off .toggle-label { color:var(--muted); }
.switch-status { margin:9px 0 0; color:var(--muted); font:12px/1.5 Georgia,serif; min-height:2.6em; }
.switch-status b { color:var(--ink-hi); font-weight:700; font-variant-numeric:tabular-nums; }

.map-wrap { position:relative; margin:0; display:flex; flex-direction:column; min-width:0; height:100%; }
.map-head { min-height:var(--head-h); padding:10px var(--pad) 12px;
  border-bottom:1px solid var(--line); background:var(--bg-panel);
  display:flex; flex-direction:column; justify-content:center; gap:10px; }
.map-head .eq-wrap { min-width:0; }
/* the two map views: a big, unmistakable segmented toggle on its own row */
.view-switch { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.view-switch-label { flex:0 0 auto; color:var(--muted); font:600 8px ui-monospace,monospace;
  letter-spacing:.15em; text-transform:uppercase; }
.view-toggle { flex:1 1 auto; display:flex; gap:6px; padding:4px; border:1px solid var(--line-hi);
  border-radius:8px; background:var(--bg-panel); }
.view-toggle button { flex:1 1 0; padding:11px 16px; border:0; border-radius:5px; background:transparent;
  color:var(--ink); cursor:pointer; font:600 12px ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase;
  transition:background .12s, color .12s; }
.view-toggle button:hover:not(:disabled):not([aria-pressed="true"]) { background:var(--bg-raise); }
.view-toggle button[aria-pressed="true"] { background:var(--ink-hi); color:var(--bg); }
.equation { margin:0; overflow-x:auto; white-space:nowrap; color:var(--muted);
  font:400 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.01em; }
.equation b { color:var(--ink); font-weight:700; }
.equation .eq-out { color:var(--ink-hi); }
.maplegend { display:flex; align-items:center; gap:8px; margin:7px 0 0; color:var(--muted); font:11px/1.35 Arial,sans-serif; }
.maplegend i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--lights); }
#map { position:relative; flex:1 1 auto; min-height:0; background:#0f0f0f; }
/* both captions live stacked in one grid cell, so the box is always sized to the
   longer (matched-state) text and never resizes when the view toggles */
.disclaimer-stack { display:grid; min-height:var(--foot-h); }
.disclaimer-stack > .disclaimer { grid-area:1 / 1; }
.disclaimer { padding:11px var(--pad); border-top:1px solid var(--line); background:var(--bg-panel);
  color:var(--muted); font:11px/1.55 Arial,sans-serif; }
.disclaimer.cap-off { visibility:hidden; }
.disclaimer b { color:var(--ink); font-weight:700; }

.picker::-webkit-scrollbar { width:8px; }
.picker::-webkit-scrollbar-thumb { background:#333; border-radius:8px; }
.picker::-webkit-scrollbar-track { background:transparent; }
.picker { scrollbar-width:thin; scrollbar-color:#333 transparent; }

/* real daytime satellite imagery, dimmed to a near-neutral night ground; real VIIRS
   night lights screened over it so the city lights still read as light */
.basemap-night { filter:brightness(.32) saturate(.3) contrast(1.03); transition:filter .5s ease; }
.nightlights { mix-blend-mode:screen; filter:brightness(1.08) saturate(.85); opacity:1; transition:opacity .6s ease; }
.blackout-canvas { position:absolute; pointer-events:none; opacity:1; }
.leaflet-container { background:#0f0f0f; font-family:ui-monospace,monospace; outline:none; }
.leaflet-container a { color:#cfcfcf; }
.leaflet-control-attribution { background:rgba(20,20,20,.72); color:#8c8c8c; }
.leaflet-control-attribution a { color:#8c8c8c; }
.leaflet-bar a { background:#1c1c1c; color:#d4d4d4; border-color:#3a3a3a; }
.leaflet-bar a:hover { background:#262626; }

/* "The plant" view: bright real imagery, night layers faded out, the site pinned */
.site-view .basemap-night { filter:brightness(.86) saturate(.82) contrast(1.02); }
.site-view .nightlights { opacity:0; }
.site-view .blackout-canvas { opacity:0; }
.site-view .maplegend { visibility:hidden; }   /* keep its height so the map doesn't grow */

.plant-pin { pointer-events:none; opacity:0; transition:opacity .55s ease; }
.plant-pin.is-in { opacity:1; }
.plant-pin b { position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.55); }
.plant-pin s { position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:1px solid rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.35);
  animation:pinpulse 2.6s ease-out infinite; }
.plant-pin u { position:absolute; left:0; top:0; transform:translate(-50%,-215%); white-space:nowrap;
  background:rgba(20,20,20,.9); border:1px solid #3d3d3d; color:#e6e6e6; border-radius:3px;
  font:600 8px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 7px; text-decoration:none; }
@keyframes pinpulse { 0%{ transform:scale(.5); opacity:.9 } 70%{ opacity:0 } 100%{ transform:scale(1.5); opacity:0 } }

/* full-bleed cover for the crossfade between "matched state" and "the plant".
   JS sets its inline opacity + transition-duration; the view is swapped underneath
   while it is opaque, so there is never a hard cut, a zoom, or a tile-load pop. */
.map-veil { position:absolute; inset:0; background:#0d0d0d; opacity:0; pointer-events:none; z-index:650; }

@media (prefers-reduced-motion:reduce){
  .plant-pin s { animation:none; opacity:.5; }
  .plant-pin, .basemap-night { transition:none; }
}

.method { padding:34px 0 60px; max-width:840px; }
.method p { margin:12px 0 0; font:400 13.5px/1.7 Georgia,serif; color:var(--prose); }
.method strong { color:var(--ink); font-weight:700; }
.method em { color:var(--muted); }
.deadzone-fig { margin:22px 0 4px; }
.deadzone-fig figcaption { margin-bottom:10px; }
.deadzone-fig p { margin:10px 0 0; }
#deadzone { width:100%; overflow:hidden; }
#deadzone svg { display:block; width:100%; height:auto; }
.dz-band { fill:var(--ink); opacity:.09; }
.dz-axis { stroke:var(--line-hi); stroke-width:1; }
.dz-tick { fill:var(--muted); font:600 8px ui-monospace,monospace; letter-spacing:.04em; }
.dz-dot { fill:var(--muted); }
.dz-dot.on { fill:var(--ink-hi); }
.dz-plants { fill:none; stroke:var(--ink); stroke-width:1.5; opacity:.5; }
.dz-plants-label { fill:var(--ink); font:600 8px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.dz-gap-label { fill:var(--muted); font:italic 600 9px Georgia,serif; letter-spacing:.02em; }
:root[data-theme="light"] .dz-band { opacity:.07; }

.src-head { margin-top:28px; }
.sources { margin:10px 0 0; border-top:1px solid var(--line); }
.sources div { display:grid; grid-template-columns:200px 1fr; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.sources dt { color:var(--ink); font:600 9px ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.sources dd { margin:0; color:var(--muted); font:12px/1.6 Georgia,serif; }
@media (max-width:620px){ .sources div { grid-template-columns:1fr; gap:3px; } }

footer { border-top:1px solid var(--line); padding:24px 3.5vw 54px; display:grid; grid-template-columns:1fr auto 1fr; gap:14px; color:var(--muted); font:600 9px ui-monospace,monospace; letter-spacing:.07em; }
footer p { margin:0; }
footer p:nth-child(2){ text-align:center; letter-spacing:.02em; }
footer p:last-child { text-align:right; }

@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .toggle-knob, .toggle-track, body, * { transition-duration:.01ms !important; }
}
@media (max-width:920px){
  /* columns stack, so the shared head/foot heights have nothing left to align to */
  .workspace { --head-h:0; --foot-h:0; }
  .workspace-main { grid-template-columns:1fr; height:auto; }
  .panel { border-right:0; border-bottom:1px solid var(--line); }
  .picker { max-height:46vh; }
  .switchbox { position:static; }
  .map-wrap { height:auto; }
  #map { flex:none; height:64vh; min-height:420px; }
  footer { grid-template-columns:1fr; }
  footer p, footer p:nth-child(2), footer p:last-child { text-align:left; }
}
@media (max-width:700px){
  .equiv { grid-template-columns:1fr; gap:0; padding:20px var(--pad) 22px; }
  .eq-state { text-align:left; }
  .eq-side + .eq-rel, .eq-rel + .eq-side { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
  .eq-rel { padding-top:0; text-align:left; display:flex; align-items:baseline; gap:12px; }
  .eq-sign { display:inline; font-size:22px; }
  .eq-delta { margin:0; }
  .cf-row { grid-template-columns:1fr auto; column-gap:12px; row-gap:6px; }
  .cf-bar { grid-column:1 / -1; }
  .cf-note { grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-header .head-right { gap:10px; }
  .site-header p { display:none; }
}