/* ===== fuel.jrand.net /simulator — workbench inside the editorial brand ===== */

:root {
  --paper: #F4EFE6;
  --paper-shadow: #E4DCC8;
  --workbench: #EBE3D0;
  --workbench-deeper: #DFD6BF;
  --ink: #1A1814;
  --muted: #5C564E;
  --rule: #8B857A;
  --rule-faint: #C5BEB1;
  --red: #B23A2A;
  --green: #1F4D3A;
  --amber: #C28B2E;
  --blue: #3A6480;
  --land: #B8AC92;
  --land-stroke: #8B857A;
  --ocean: #C7CDD3;
  --ocean-deep: #A8B2BC;
  --graticule: #B5BCC4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); }
body {
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }

/* ----- Masthead (verbatim from index.html / cycle / methodology / about) ----- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 18px 80px 12px;
  border-bottom: 0.5px solid var(--rule);
}
.brand {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.brand a { color: inherit; text-decoration: none; }
.brand .kicker {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  margin-left: 14px;
  font-size: 14px;
}
.nav {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: var(--muted);
}
.nav a {
  color: inherit;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav a.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}

/* ----- Header strip (simulator-only) ----- */
.header-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  border-bottom: 0.5px solid var(--rule-faint);
  background: var(--paper);
  gap: 16px;
  flex-wrap: wrap;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
}
.header-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.scenario-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-shadow);
  border: 0.5px solid var(--rule-faint);
  padding: 4px 12px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scenario-badge.active {
  background: rgba(58, 100, 128, 0.12);
  border-color: var(--blue);
  color: var(--blue);
}
.scenario-badge .label {
  font-style: italic;
  font-family: 'Source Serif 4', serif;
  color: var(--muted);
}
.scenario-badge.active .label { color: var(--blue); }

.header-actions {
  display: flex;
  gap: 8px;
}
.header-action {
  background: transparent;
  color: var(--muted);
  border: 0.5px solid var(--rule);
  padding: 5px 14px;
  border-radius: 100px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.header-action:hover { border-color: var(--ink); color: var(--ink); }
.header-action.reset { color: var(--red); border-color: var(--rule); }
.header-action.reset:hover { border-color: var(--red); }

/* ----- KPI strip (lifted from home, tighter) ----- */
.kpi-strip-wrap {
  background: var(--paper-shadow);
  border-bottom: 0.5px solid var(--rule);
}
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 32px;
  padding: 22px 0 8px;
}
.kpi {
  padding: 0 22px;
  border-right: 0.5px solid var(--rule-faint);
}
.kpi:last-child { border-right: none; }
.kpi-value {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
  position: relative;
}
.kpi-value .unit { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.kpi-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 6px;
}
.kpi-delta {
  display: none;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.visible { display: inline; }
.kpi-value.kpi-up .kpi-delta { color: var(--green); }
.kpi-value.kpi-down .kpi-delta { color: var(--red); }

/* ----- Workbench row (2 panes — globe + edit panel) -----
   Scenario chips moved out of the left rail into the .scenario-strip above
   the KPIs, reclaiming 240px of horizontal space for the globe. */
.workbench {
  display: grid;
  grid-template-columns: 1fr 320px;
  background: var(--workbench);
  border-bottom: 0.5px solid var(--rule);
  min-height: 540px;
  position: relative;
}
.pane {
  border-right: 0.5px solid var(--rule-faint);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pane:last-child { border-right: none; }
.pane-header {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--rule-faint);
}

/* ----- Scenario strip (horizontal, above year scrubber) -----
   Replaces the old left-rail scenario pane. Reads as the "what world?"
   dimension before the "what year?" dimension below it. */
.scenario-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 32px;
  background: var(--paper);
  border-bottom: 0.5px solid var(--rule-faint);
  flex-wrap: wrap;
}
.scenario-strip-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex-shrink: 0;
}
.scenario-strip .scenario-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.scenario-strip .builder-stub {
  margin: 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
}

/* ----- Year scrubber (top-bar control) -----
   Sits directly above the KPI strip. Compact one-line strip — drag the
   slider, three KPIs visibly tween, drum animates, globe marker colors
   flip, gap chart cursor mirrors. */
.year-scrubber {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 32px;
  background: var(--paper);
  border-bottom: 0.5px solid var(--rule-faint);
}
.year-scrubber-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}
.year-scrubber-track-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.year-scrubber-end-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.year-scrubber-track {
  position: relative;
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
}
.year-scrubber-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--rule);
  border-radius: 2px;
}
.year-scrubber-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--ink);
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.1s linear;
}
.year-scrubber-track input[type="range"] {
  position: relative;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
  z-index: 2;
}
.year-scrubber-track input[type="range"]:active { cursor: grabbing; }
.year-scrubber-track input[type="range"]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.year-scrubber-track input[type="range"]::-moz-range-track { height: 18px; background: transparent; }
.year-scrubber-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(26, 24, 20, 0.3);
  margin-top: 2px;
  cursor: grab;
  transition: background 0.12s, transform 0.12s;
}
.year-scrubber-track input[type="range"]:hover::-webkit-slider-thumb,
.year-scrubber-track input[type="range"]:focus::-webkit-slider-thumb {
  background: var(--blue);
  transform: scale(1.15);
}
.year-scrubber-track input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.year-scrubber-track input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(26, 24, 20, 0.3);
  cursor: grab;
  transition: background 0.12s, transform 0.12s;
}
.year-scrubber-track input[type="range"]:hover::-moz-range-thumb,
.year-scrubber-track input[type="range"]:focus::-moz-range-thumb {
  background: var(--blue);
  transform: scale(1.15);
}
.year-scrubber-track input[type="range"]:focus { outline: none; }
.year-scrubber-readout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1;
}
.year-scrubber-note {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
  max-width: 240px;
}

.scenario-chip {
  background: transparent;
  border: 0.5px solid transparent;
  text-align: left;
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.12s;
  font-family: 'Inter', sans-serif;
}
.scenario-chip:hover {
  background: var(--workbench-deeper);
  color: var(--ink);
}
.scenario-chip[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}
.scenario-chip-expansion[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.scenario-chip-delay[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.scenario-chip-policy[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }

.builder-stub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px dashed var(--rule-faint);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

/* ----- Globe column ----- */
.globe-col {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.globe-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.regions, .filters {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.regions-label, .filters-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-right: 4px;
}
.region, .filter {
  background: transparent;
  color: var(--muted);
  border: 0.5px solid var(--rule-faint);
  padding: 3px 10px;
  border-radius: 100px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.region:hover, .filter:hover { border-color: var(--ink); color: var(--ink); }
.region.active { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); color: var(--ink); }
/* Sub-filter — reads as nested under the prior filter, smaller and dashed border. */
.filter.filter-sub {
  font-size: 10.5px;
  padding: 2px 8px;
  border-style: dashed;
  margin-left: -2px;
  opacity: 0.85;
}
.filter.filter-sub[aria-pressed="true"] { border-style: solid; opacity: 1; }

#globe-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 380px;
  filter: drop-shadow(0 8px 18px rgba(26, 24, 20, 0.10));
}
#globe { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#globe:active { cursor: grabbing; }

/* ----- Fuel drum (UF₆ supply gauge) -----
   Floats top-left of the globe canvas. Vertical UF6 cylinder silhouette with
   three stacked segments (Western / Captive / Sanctioned) + a 2028-demand
   reference line at the top. The empty space between the stack and the demand
   line IS the literal Western shortfall, made visible. */
.fuel-drum {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 116px;
  max-height: calc(100% - 20px);
  background: rgba(245, 240, 226, 0.92);
  border: 0.5px solid var(--rule-faint);
  padding: 6px 8px 6px;
  font-family: 'Inter', sans-serif;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
}
.fuel-drum-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 4px;
}
.fuel-drum-svg {
  display: block;
  margin: 0 auto;
  width: 46px;
  height: 170px;
  flex-shrink: 0;
}
.drum-outline {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}
.drum-demand-line {
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
}
.drum-demand-label {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 7.5px;
  fill: var(--muted);
}
.drum-current-line {
  stroke: var(--ink);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
  opacity: 0.4;
}
.drum-fill { transition: y 0.5s ease, height 0.5s ease; }
.drum-fill-western { fill: var(--green); }
.drum-fill-captive { fill: var(--paper-shadow); stroke: var(--green); stroke-width: 0.6; }
.drum-fill-sanctioned {
  fill: var(--red);
  color: rgba(255, 245, 235, 0.55);
}
.fuel-drum-readout {
  margin-top: 5px;
  font-size: 9.5px;
  color: var(--ink);
}
.drum-bloc-row, .drum-gap-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
}
.drum-gap-row {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 0.5px dashed var(--rule);
  font-style: italic;
  color: var(--muted);
}
.drum-bloc {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  display: inline-block;
}
.drum-bloc-western { background: var(--green); }
.drum-bloc-captive { background: var(--paper-shadow); border: 1px solid var(--green); box-sizing: border-box; }
.drum-bloc-sanctioned { background: var(--red); }
.drum-bloc-name { flex: 1; }
.drum-bloc-val { font-variant-numeric: tabular-nums; color: var(--muted); }

.zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 5;
}
.zoom-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--muted);
  border: 0.5px solid var(--rule-faint);
  cursor: pointer;
  padding: 0;
  transition: all 0.12s;
}
.zoom-btn:first-child { border-radius: 4px 4px 0 0; }
.zoom-btn:last-child  { border-radius: 0 0 4px 4px; border-top: 0; }
.zoom-btn:hover { border-color: var(--ink); color: var(--ink); }
.zoom-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
  z-index: 10;
}
.tooltip.visible { opacity: 1; }
.tooltip strong { display: block; font-weight: 500; }
.tooltip .tooltip-cap { color: rgba(244, 239, 230, 0.7); font-size: 10px; margin-top: 2px; display: block; }

/* ----- Globe SVG primitives ----- */
/* `.sphere` fill is set as an SVG attribute in JS (radial gradient) — leaving
   `fill` unset here lets the gradient through. CSS `fill` would override it. */
.sphere {
  stroke: var(--ink);
  stroke-width: 0.6;
  stroke-opacity: 0.35;
}
.land { fill: var(--land); stroke: var(--land-stroke); stroke-width: 0.5; }
.graticule { fill: none; stroke: var(--graticule); stroke-width: 0.4; opacity: 0.7; }

/* ---- FACILITY MARKERS ---------------------------------------------------
   Three distinct facility types, three visual treatments:
   - Commercial-export UF₆ (the 5 plants that ship globally): solid filled circle
   - Captive UF₆ (Lanzhou, Jiuquan, NFC, Resende — supply own country only):
     hollow ring (paper fill + thick status-color stroke)
   - UF₄ intermediate (Malvési — feeds Pierrelatte, doesn't make UF₆ itself):
     paper-shadow fill + dashed stroke
   ------------------------------------------------------------------------- */

/* Default = commercial-export styling */
.facility {
  fill: var(--green);
  stroke: var(--paper);
  stroke-width: 1.2;
  cursor: pointer;
  transition: stroke-width 0.12s;
}
.facility:hover, .facility:focus { stroke-width: 2; outline: none; }
.facility.selected { stroke: var(--ink); stroke-width: 2.5; }

/* Status colors — apply to commercial-export by default (fill) */
.facility.status-ramping { fill: var(--amber); }
.facility.status-construction { fill: var(--paper-shadow); stroke: var(--amber); stroke-dasharray: 2 2; }
.facility.status-mothballed { fill: var(--rule); }
/* Decommissioned — set when scrubber crosses a plant's decommission_year.
   Matches mothballed visual so the marker visibly drops out of supply. */
.facility.status-decommissioned { fill: var(--rule); opacity: 0.5; }

/* Captive — hollow ring in status color */
.facility.facility-captive {
  fill: var(--paper);
  stroke: var(--green);
  stroke-width: 2.5;
}
.facility.facility-captive.status-ramping { stroke: var(--amber); }
.facility.facility-captive.status-construction { stroke: var(--amber); stroke-dasharray: 2 2; }
.facility.facility-captive.status-mothballed { stroke: var(--rule); }
.facility.facility-captive.status-decommissioned { stroke: var(--rule); opacity: 0.5; }

/* UF₄ / UO₃ intermediate — paper-shadow fill + ink hairline. Deliberately
   thinner stroke than the green-rimmed captive marker so the eye doesn't
   conflate "hollow ring" silhouettes; the layers glyph (in ink) carries the
   read. State color is reserved for UF₆ markers per the legend grammar. */
.facility.facility-intermediate {
  fill: var(--paper-shadow);
  stroke: var(--ink);
  stroke-width: 0.8;
  opacity: 0.9;
}

/* UO₂ refining — paper fill, ink hairline border. Reads as "on the map but
   doesn't touch UF₆." NFC Hyderabad refines yellowcake → UO₂ for India's
   PHWR fleet, which never sees UF₆. */
.facility.facility-uo2 {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Enrichment + fuel fab — hollow ring with a dotted blue stroke. Reads as
   "downstream of UF₆ — context for the map, not part of the supply count."
   Resende is the only one of these on the conversion atlas. */
.facility.facility-enrichment {
  fill: var(--paper);
  stroke: var(--blue);
  stroke-width: 1.4;
  stroke-dasharray: 1 2;
}

.facility.overridden { stroke: var(--blue); stroke-width: 2; stroke-dasharray: none; }

/* Conversion glyph overlay on UF6 facility discs.
   Filled commercial markers carry the icon in paper so it reads against the
   green / red disc; hollow captive markers carry it in green so it reads on
   the paper interior. Sanctioned commercial swaps to paper-on-red via the
   same .facility-commercial rule. */
.facility-icon { color: var(--paper); transition: color 0.12s; }
.facility-icon.facility-captive { color: var(--green); }
.facility-icon.facility-captive.sanctioned { color: var(--red); }
.facility-icon.facility-intermediate { color: var(--ink); opacity: 0.75; }

/* Sanctioned overlay — permanent (no toggle). Russia's post-2022 conversion
   bloc IS the editorial point of the atlas; hiding it would misread the map.
   Commercial-export sanctioned plants fill red; captive (Russian none today,
   but shape parity preserved) keep paper interior with a red rim. */
.facility.sanctioned { fill: var(--red); stroke: var(--red); stroke-width: 2; }
.facility.facility-captive.sanctioned { fill: var(--paper); stroke: var(--red); }
body.hide-mines .mine, body.hide-mines .leader-mine { display: none !important; }
body.hide-small-facs .small-fac, body.hide-small-facs .leader-small { display: none !important; }

/* ---- Icon-markers (mines + downstream nodes) ----
   Hybrid model: conversion-product axis stays as primitive d3 shapes; context
   stages render as a paper-disc background + Lucide line glyph. The disc gives
   the marker a click target and a status-color rim; the glyph says what stage
   the place belongs to without forcing a shape vocabulary on the reader. */
g.mine, g.downstream-node { cursor: pointer; transition: opacity 0.12s; }
g.mine:focus, g.downstream-node:focus { outline: none; }
g.mine .icon-marker-bg, g.downstream-node .icon-marker-bg {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
  transition: stroke 0.12s, stroke-width 0.12s, fill 0.12s;
}
g.mine .icon-marker-glyph, g.downstream-node .icon-marker-glyph {
  color: var(--ink);
  pointer-events: none;
}

g.mine { opacity: 0.85; }
g.mine:hover, g.mine:focus { opacity: 1; }
g.mine:hover .icon-marker-bg, g.mine:focus .icon-marker-bg { stroke-width: 1.8; }
g.mine.mine-restart .icon-marker-bg { stroke: var(--amber); }
g.mine.mine-curtailed .icon-marker-bg { stroke: var(--red); }
g.mine.mine-closed { opacity: 0.45; }
g.mine.mine-closed .icon-marker-bg { stroke: var(--rule); stroke-dasharray: 2 1.5; }
g.mine.selected .icon-marker-bg { stroke: var(--blue); stroke-width: 2; }

g.downstream-node { opacity: 0.7; }
g.downstream-node:hover { opacity: 1; }
g.downstream-node:hover .icon-marker-bg { stroke-width: 1.8; }
g.downstream-node.downstream-enrichment .icon-marker-bg { stroke: var(--blue); }
g.downstream-node.downstream-enrichment .icon-marker-glyph { color: var(--blue); }
g.downstream-node.downstream-fuel-fabrication .icon-marker-bg { stroke: var(--muted); stroke-dasharray: 2 1.5; }
g.downstream-node.downstream-fuel-fabrication .icon-marker-glyph { color: var(--muted); }
g.downstream-node.downstream-utility .icon-marker-bg { stroke: var(--ink); fill: var(--paper-shadow); }
g.downstream-node.downstream-utility .icon-marker-glyph { color: var(--ink); opacity: 0.55; }

/* ---- Multi-stage badge (V4 — primary disc + secondary badge) ----
   When a conversion facility is co-located with a downstream stage (e.g. CNNC
   Lanzhou is both UF6 captive AND enrichment), the secondary stage rides as a
   small badge in the upper-right of the disc. Pointer-events disabled so the
   badge never steals clicks from the primary marker. */
g.facility-badge { pointer-events: none; }
g.facility-badge .badge-bg {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}
g.facility-badge.badge-enrichment .badge-bg { stroke: var(--blue); }
g.facility-badge .badge-glyph { color: var(--ink); }
g.facility-badge.badge-enrichment .badge-glyph { color: var(--blue); }

/* Smaller conversion — circle + flask glyph at reduced opacity. Same icon
   vocabulary as the headline UF6 markers; the lower contrast says "non-
   commercial / peripheral" without breaking the shape language. */
g.small-fac { cursor: pointer; opacity: 0.6; transition: opacity 0.12s; }
g.small-fac:hover, g.small-fac:focus { opacity: 1; outline: none; }
g.small-fac .icon-marker-bg {
  fill: var(--paper);
  stroke: var(--muted);
  stroke-width: 1;
  transition: stroke 0.12s, stroke-width 0.12s;
}
g.small-fac .icon-marker-glyph { color: var(--muted); pointer-events: none; }
g.small-fac:hover .icon-marker-bg, g.small-fac:focus .icon-marker-bg { stroke-width: 1.5; }
g.small-fac.small-dormant { opacity: 0.35; }
g.small-fac.small-decommissioned { opacity: 0.3; }
g.small-fac.selected .icon-marker-bg { stroke: var(--blue); stroke-width: 1.6; }

/* ---- Globe legend ----- */
.globe-legend {
  margin-top: 12px;
  padding: 12px 14px;
  border: 0.5px solid var(--rule-faint);
  background: var(--paper);
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legend-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink);
}
.legend-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  min-width: 105px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-note {
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  margin-left: 4px;
}
/* Marker swatches */
.m-dot, .m-square, .m-tri, .m-ring, .m-uo2, .m-enrichment, .m-icon { display: inline-block; flex-shrink: 0; }
.m-icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-icon svg { width: 11px; height: 11px; color: var(--ink); display: block; }
.m-icon-enr { border-color: var(--blue); }
.m-icon-enr svg { color: var(--blue); }
.m-icon-fab { border-color: var(--muted); border-style: dashed; }
.m-icon-fab svg { color: var(--muted); }
.m-icon-utility { background: var(--paper-shadow); }
.m-icon-utility svg { color: var(--ink); opacity: 0.55; }
.m-icon-intermediate { background: var(--paper-shadow); border: 0.8px solid var(--ink); }
.m-icon-intermediate svg { color: var(--ink); opacity: 0.75; }
.m-icon-small { background: var(--paper); border: 1px solid var(--muted); opacity: 0.7; }
.m-icon-small svg { color: var(--muted); }
.m-sanctioned { width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 1px solid var(--paper); }

/* Multi-stage legend swatch — mirrors the V4 on-map treatment */
.m-multistage {
  position: relative;
  display: inline-block;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.m-multi-primary {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.4px solid var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.m-multi-primary svg { width: 8px; height: 8px; color: var(--green); }
.m-multi-badge {
  position: absolute;
  top: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.m-multi-badge svg { width: 5px; height: 5px; color: var(--blue); }
.m-ring {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); box-sizing: border-box;
  border: 1px solid var(--blue);
}
.m-ring.m-ring-fuel { border-style: dashed; border-color: var(--muted); }
.m-ring.m-ring-utility { background: var(--ink); opacity: 0.18; border-color: var(--ink); }
.m-dot { width: 12px; height: 12px; border-radius: 50%; }
.m-square { width: 11px; height: 11px; background: var(--ink); }
.m-tri {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--muted);
  opacity: 0.65;
}
.m-commercial { background: var(--green); border: 1px solid var(--paper); }
.m-captive { background: var(--paper); border: 2px solid var(--green); width: 12px; height: 12px; box-sizing: border-box; }
/* UO₂ refining — square, paper fill, ink hairline */
.m-uo2 {
  background: var(--paper);
  border: 1px solid var(--ink);
  width: 11px; height: 11px;
  box-sizing: border-box;
  border-radius: 0;
}
/* Enrichment + fuel fab — small filled triangle in editorial blue */
.m-enrichment {
  width: 0; height: 0;
  background: transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid var(--blue);
  opacity: 0.7;
}
.m-status-op { background: var(--green); }
.m-status-ramp { background: var(--amber); }
.m-status-const { background: var(--paper-shadow); border: 1.4px dashed var(--amber); width: 12px; height: 12px; box-sizing: border-box; }
.m-status-restricted { background: var(--red); }

/* Collapsible "Other markers" section — defaults closed, opens with a click.
   Uses native <details>/<summary> so it works without JS. */
.legend-other { display: block; }
.legend-other summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  user-select: none;
}
.legend-other summary::-webkit-details-marker { display: none; }
.legend-other summary::before {
  content: "▸";
  display: inline-block;
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.15s;
  width: 10px;
}
.legend-other[open] summary::before { transform: rotate(90deg); }
.legend-other-hint {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 10.5px;
  color: var(--muted);
}
.legend-other[open] .legend-other-hint { display: none; }
.legend-row-other {
  margin-top: 4px;
  padding-left: 18px;
}
.legend-other-note {
  flex-basis: 100%;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Mobile legend collapse — desktop shows everything, button hidden */
.legend-expand-btn {
  display: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 100px;
  font: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  align-self: flex-start;
  transition: all 0.15s;
}
.legend-expand-btn:hover { border-color: var(--ink); color: var(--ink); }

/* Reactive dimming — when a filter hides a marker class, dim the legend item
   so the user can see what's currently off without it disappearing. */
body.hide-mines .legend-item-mines,
body.hide-small-facs .legend-item-small,
body.hide-enrichment .legend-item-multistage,
body.hide-enrichment .globe-legend .legend-item:has(.m-icon-enr) {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: var(--rule-faint);
  text-decoration-thickness: 0.5px;
}

@media (max-width: 720px) {
  .legend-row { gap: 10px; font-size: 10.5px; }
  .legend-eyebrow { min-width: 0; flex-basis: 100%; margin-bottom: 2px; }

  /* Collapse extras + Other markers by default; reveal when expanded */
  .globe-legend .legend-extra-item { display: none; }
  .globe-legend .legend-other { display: none; }
  .globe-legend.legend-expanded .legend-extra-item { display: inline-flex; }
  .globe-legend.legend-expanded .legend-other { display: block; }
  .legend-expand-btn { display: inline-block; }
}

.leader-line { stroke: var(--ink); stroke-width: 0.5; opacity: 0.35; }

/* ---- Material flow arrows (mine → facility, facility → facility) ---- */
.flows { display: none; }
body.show-flows .flows { display: block; }
.flow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-opacity: 0.5;
  pointer-events: none;
}
.flow.flow-vertical-integration { stroke: var(--green); stroke-opacity: 0.65; }
.flow.flow-long-term-contract { stroke: var(--blue); stroke-opacity: 0.65; }
.flow.flow-chain-step { stroke: var(--muted); stroke-dasharray: 3 2; stroke-opacity: 0.75; }
/* Confidence sub-filter: medium- and low-confidence flows hide by default,
   show when the "+ less confident" sub-toggle is on. */
.flow.flow-medium, .flow.flow-low { display: none; stroke-dasharray: 4 2; stroke-opacity: 0.45; }
body.show-low-confidence .flow.flow-medium,
body.show-low-confidence .flow.flow-low { display: block; }
/* Animated pulses traveling along every flow path. The dot is the *only*
   flow indicator (no arrowheads), so it carries the read in all cases.
   High-confidence flows render at full opacity; medium / low fade so the
   eye can tell a verified route from an inferred one. Medium / low pulses
   hide alongside their parent paths until "+ less confident" is on. */
.flow-pulses { display: none; pointer-events: none; }
body.show-flows .flow-pulses { display: block; }
.flow-pulse {
  fill: var(--ink);
  fill-opacity: 0.85;
}
.flow-pulse-vertical-integration { fill: var(--green); }
.flow-pulse-long-term-contract { fill: var(--blue); }
.flow-pulse-chain-step { fill: var(--muted); }
.flow-pulse-medium { fill-opacity: 0.55; r: 2; }
.flow-pulse-low { fill-opacity: 0.4; r: 2; }
body:not(.show-low-confidence) .flow-pulse-medium,
body:not(.show-low-confidence) .flow-pulse-low { display: none; }

/* ---- Downstream nodes (enrichment, fuel-fab, utility offtakes) ---- */
/* Downstream-nodes layer is now Enrichment-only on the map (fuel-fab + utility
   stay in the data file but are not rendered — they are not in the conversion
   atlas's mines/conversion/enrichment scope). Visibility gated on the
   Enrichment filter, not the flows filter. */
body.hide-enrichment .downstream-nodes,
body.hide-enrichment .facility-badges g.badge-enrichment { display: none; }
.downstream-node {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
  stroke-opacity: 0.55;
  cursor: default;
}
.downstream-node.downstream-enrichment { stroke: var(--blue); }
.downstream-node.downstream-fuel-fabrication { stroke: var(--muted); stroke-dasharray: 2 1.5; }
.downstream-node.downstream-utility {
  fill: var(--ink);
  fill-opacity: 0.18;
  stroke-opacity: 0.4;
}
.downstream-node:hover { stroke-opacity: 0.9; }

/* ----- Edit panel ----- */
.panel {
  background: var(--paper);
  position: relative;
  overflow-y: auto;
  max-height: 540px;
}
.panel-edit-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.panel-edit-toggle:hover { color: var(--ink); border-color: var(--ink); }
.panel-edit-toggle.active {
  color: var(--green);
  border-color: var(--green);
  background: rgba(31, 77, 58, 0.08);
}
.panel-edit-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper-shadow);
  border-color: var(--ink);
}
.panel-empty {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  padding: 30px 0 18px;
  text-align: left;
  line-height: 1.5;
}
.panel-name {
  font-family: 'Source Serif 4', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.15;
  padding-right: 24px;
}
.panel-altname {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.panel-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--rule-faint);
  font-size: 12px;
  align-items: baseline;
}
.panel-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.panel-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.panel-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel-status.status-operating { background: rgba(31, 77, 58, 0.15); color: var(--green); }
.panel-status.status-ramping { background: rgba(194, 139, 46, 0.18); color: var(--amber); }
.panel-status.status-construction { background: rgba(194, 139, 46, 0.12); color: var(--amber); }
.panel-status.status-mothballed { background: rgba(92, 86, 78, 0.18); color: var(--muted); }

.panel-mod-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(58, 100, 128, 0.15);
  border: 0.5px solid var(--blue);
  color: var(--blue);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  vertical-align: middle;
}

.panel-quote, .panel-sanctions {
  font-family: 'Source Serif 4', serif;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-shadow);
  border-left: 2px solid var(--rule);
}
.panel-notes {
  font-family: 'Source Serif 4', serif;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 14px;
  color: var(--ink);
}
.panel-source {
  font-family: 'Source Serif 4', serif;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 12px;
  color: var(--muted);
}
.panel-quote { font-style: italic; border-left-color: var(--blue); }
.panel-quote-attribution { font-style: normal; font-size: 11px; color: var(--muted); margin-top: 8px; }
.panel-quote-context { font-size: 11px; color: var(--muted); margin-top: 6px; font-style: italic; }
.panel-sanctions { border-left-color: var(--red); color: var(--ink); }
.panel-source .quality { display: inline-block; padding: 1px 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; margin-right: 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.panel-source .quality-official { background: rgba(31, 77, 58, 0.15); color: var(--green); }
.panel-source .quality-estimate { background: rgba(194, 139, 46, 0.18); color: var(--amber); }
.panel-source .quality-last-known-public { background: rgba(178, 58, 42, 0.15); color: var(--red); }

.panel-rotate-hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--paper-shadow);
  border-left: 2px solid var(--blue);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--blue);
}

/* ----- Unified info block (read-only by default; turns editable via pencil) ----- */
.panel-info {
  margin-top: 6px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--paper-shadow);
  border: 0.5px solid var(--rule-faint);
  border-radius: 2px;
}
.panel-info .panel-row {
  border-bottom: 0.5px solid var(--rule-faint);
}
.panel-info .panel-row:last-child { border-bottom: none; }
.panel-info.editing {
  border-color: var(--green);
  box-shadow: inset 2px 0 0 var(--green);
}
.panel-info .panel-row.editable .panel-label { color: var(--ink); }
.panel-info .panel-row .panel-value input[type="number"],
.panel-info .panel-row .panel-value select {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  color: var(--ink);
  padding: 3px 6px;
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  max-width: 110px;
}
.panel-info .panel-row .panel-value input[type="number"]:focus,
.panel-info .panel-row .panel-value select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(31, 77, 58, 0.12);
}
.panel-value-unit {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.panel-edit-slider-wrap { display: flex; align-items: center; gap: 8px; }
.panel-info .panel-row .panel-value input[type="range"] { flex: 1 1 auto; accent-color: var(--green); max-width: 110px; }
.panel-edit-slider-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.panel-edit-actions {
  margin-top: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.panel-edit-reset {
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--muted);
  padding: 4px 12px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.panel-edit-reset:hover { border-color: var(--red); color: var(--red); }

/* ----- Gap chart figure ----- */
.gap-figure-wrap {
  padding: 32px 32px 36px;
  background: var(--paper);
  border-bottom: 0.5px solid var(--rule);
}
.gap-figure-header {
  margin-bottom: 6px;
}
.gap-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 4px;
}
.gap-figure-header h2 {
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.figure-num {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}
.gap-figure {
  background: var(--paper-shadow);
  border: 0.5px solid var(--rule-faint);
  padding: 24px 28px 18px;
  margin-top: 16px;
}
.gap-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.gap-legend { display: flex; gap: 14px; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--muted); }
.gap-legend-item { display: flex; align-items: center; gap: 6px; }
.gap-legend-swatch { width: 12px; height: 8px; display: inline-block; border-radius: 1px; }
.gap-legend-swatch.gap-legend-op { background: var(--ink); }
.gap-legend-swatch.gap-legend-idle { background: repeating-linear-gradient(45deg, transparent 0 2px, var(--rule) 2px 4px); }
.gap-toggle {
  background: transparent;
  border: 0.5px solid var(--rule);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 100px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.gap-toggle:hover { border-color: var(--ink); color: var(--ink); }
.gap-toggle[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); color: var(--ink); }

#gap-chart {
  width: 100%;
  display: block;
  height: auto;
}
.gap-axis { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 11px; }
.gap-axis text { fill: var(--muted); }
.gap-axis line, .gap-axis path { stroke: var(--rule-faint); stroke-width: 0.5; }
.gap-year-guide { stroke: var(--rule-faint); stroke-width: 0.4; stroke-dasharray: 2 3; }
.gap-projection-band { fill: var(--paper); opacity: 0.5; }
.gap-cap-area { fill: var(--ink); fill-opacity: 0.1; }
.gap-cap-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.gap-cap-line-projection { stroke-dasharray: 4 3; }
.gap-cap-line-baseline-ghost { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
.gap-deficit-area { fill: var(--red); fill-opacity: 0.18; }
.gap-deficit-area:hover { fill-opacity: 0.28; }
.gap-deficit-label { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 12px; fill: var(--red); }

/* Deficit callout badge — small ⓘ inside the wedge; pulses 3x on load */
.gap-deficit-badge-bg { fill: var(--red); fill-opacity: 0.95; stroke: var(--paper); stroke-width: 1; }
.gap-deficit-badge-glyph {
  fill: var(--paper);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
.gap-deficit-badge { transform-origin: center; transform-box: fill-box; }
.gap-deficit-badge:hover .gap-deficit-badge-bg { fill-opacity: 1; }

/* Tooltip for the deficit callout — anchored inside .gap-figure */
.gap-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 13px;
  border-radius: 4px;
  font-family: 'Source Serif 4', serif;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 280px;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 20;
  box-shadow: 0 4px 18px rgba(26, 24, 20, 0.22);
}
.gap-tooltip.visible { opacity: 1; }
.gap-tooltip strong {
  display: block;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--paper);
}
.gap-tooltip .tooltip-cap {
  display: block;
  color: rgba(244, 239, 230, 0.82);
  font-style: italic;
  font-size: 11.5px;
}
.gap-demand-history, .gap-demand-projection { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.gap-demand-projection { stroke-dasharray: 4 3; }
.gap-curve-label { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 12px; fill: var(--muted); }
.gap-curve-label-cap { fill: var(--muted); }
.gap-curve-label-demand { fill: var(--muted); }
.gap-waiver-line { stroke: var(--red); stroke-width: 0.8; stroke-dasharray: 4 3; }
.gap-waiver-label { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 11px; fill: var(--red); }
.gap-today-line { stroke: var(--blue); stroke-width: 1; stroke-opacity: 0.75; }
.gap-today-label { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 11px; fill: var(--blue); }

/* ----- Passive year cursor on the gap chart -----
   Read-only echo of the top-bar scrubber's position. Click anywhere on the
   chart's projection area (2024–2035) to snap the year. The control itself
   lives in the .year-scrubber strip up top. */
.gap-cursor-hitzone { fill: transparent; pointer-events: all; }
.gap-cursor-line {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-opacity: 0.65;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.gap-cursor-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
  pointer-events: none;
}
.gap-demand-fan-area { fill: var(--amber); fill-opacity: 0.12; }
.gap-demand-fan-bound { fill: none; stroke: var(--amber); stroke-width: 0.9; stroke-dasharray: 3 2; stroke-opacity: 0.7; }
.gap-fan-label { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 11px; fill: var(--amber); }
.gap-section-title { font-family: 'Inter', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; fill: var(--muted); }
.gap-area { fill: var(--ink); fill-opacity: 0.18; }
.gap-area-cameco { fill: #3A6480; fill-opacity: 0.55; }
.gap-area-orano { fill: #1F4D3A; fill-opacity: 0.55; }
.gap-area-orano_comurhex1 { fill: #1F4D3A; fill-opacity: 0.4; }
.gap-area-converdyn { fill: #C28B2E; fill-opacity: 0.55; }
.gap-area-springfields { fill: #5C564E; fill-opacity: 0.55; }
.gap-area-sequoyah_fuels { fill: #B23A2A; fill-opacity: 0.4; }
.gap-lifeline-idle { fill: url(#gap-idle-hatch); }
.gap-idle-bg { fill: var(--paper-shadow); }
.gap-idle-stripe { fill: var(--rule); }
.gap-lane-label { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--ink); }
.gap-lane-label-narrow { font-size: 9.5px; }
.gap-lane-event-dot { fill: var(--ink); }

/* ----- Footer (matches platform) ----- */
.footer {
  border-top: 0.5px solid var(--rule);
  padding: 24px 32px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'Inter', sans-serif;
}
.footer a { color: inherit; }
.footer a:hover { color: var(--ink); }
.footer .colophon { font-family: 'Source Serif 4', serif; font-style: italic; }

/* ----- Mobile collapse (phone, <720px) ----- */
@media (max-width: 720px) {
  .masthead, .header-strip, .footer { padding-left: 18px; padding-right: 18px; }
  .kpi-strip { grid-template-columns: 1fr 1fr; margin: 0 18px; }
  .kpi-value { font-size: 26px; }
  .kpi { padding: 0 14px; }

  .workbench {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .pane { border-right: none; border-bottom: 0.5px solid var(--rule-faint); }

  /* Reorder on mobile: globe + legend → scenarios → inspect/edit */
  .globe-col { order: 1; }
  .scenario-rail { order: 2; }
  .panel { order: 3; }

  /* Scenario rail becomes a horizontal scrollable chip strip */
  .scenario-rail .scenario-chips {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  .scenario-chip { white-space: nowrap; flex: 0 0 auto; }
  .builder-stub { display: none; }

  /* Globe column tightens; toolbar wraps */
  .globe-col { padding: 12px 14px; }
  #globe-container { min-height: 320px; }

  /* Edit panel stays inline below globe (no bottom-sheet overlay needed at phone) */
  .panel { max-height: none; }

  /* kpi-note inherits desktop 32px padding via inline style; tighten on mobile */
  .kpi-note { padding-left: 18px !important; padding-right: 18px !important; }

  /* Gap figure — fits viewport on mobile (chart reflows internally via JS) */
  .gap-figure-wrap { padding: 22px 14px 28px; }
  .gap-figure { padding: 12px 10px; }
  .gap-figure-header h2 { font-size: 19px; }
  .gap-toolbar { flex-wrap: wrap; gap: 8px; }

  /* Inputs at 16px so iOS doesn't auto-zoom on focus */
  .panel-info .panel-row .panel-value input[type="number"],
  .panel-info .panel-row .panel-value select { font-size: 16px; max-width: 130px; }

  /* Larger tap targets on touch */
  .zoom-btn { width: 36px; height: 36px; }
}
@media (max-width: 600px) {
  .brand .kicker { display: none; }
  .nav { gap: 18px; font-size: 12px; }
}