/* Tariff Clock — palette per the validated reference instance.
   Categorical slots 1 (blue) and 2 (orange) carry the two schedules; they pass
   every CVD and normal-vision gate in both modes. Rate tiers use the one-hue
   ordinal ramp, held to the ordinal contrast floor (no lighter than step 250 on
   light, no darker than step 600 on dark). */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --plane: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --ring: rgba(11, 11, 11, 0.10);

  --now: #2a78d6;        /* categorical slot 1 — in force today */
  --sep: #eb6834;        /* categorical slot 2 — from September 8 */

  --tier-15: #86b6ef;    /* ordinal step 250 */
  --tier-25: #2a78d6;    /* step 450 */
  --tier-50: #104281;    /* step 650 */

  --wash: rgba(42, 120, 214, 0.08);

  /* The one modelled figure on the site gets its own hue — distinct from
     now/sep/duty — so it never reads as just another measured number. */
  --estimate: #7c3aed;
  --estimate-wash: rgba(124, 58, 237, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --ring: rgba(255, 255, 255, 0.10);
  
    --now: #3987e5;
    --sep: #d95926;
  
    --tier-15: #9ec5f4;
    --tier-25: #3987e5;
    --tier-50: #184f95;    /* ordinal floor on dark — no darker */

    --wash: rgba(57, 135, 229, 0.12);

    --estimate: #a78bfa;
    --estimate-wash: rgba(167, 139, 250, 0.14);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --ring: rgba(255, 255, 255, 0.10);

  --now: #3987e5;
  --sep: #d95926;

  --tier-15: #9ec5f4;
  --tier-25: #3987e5;
  --tier-50: #184f95;    /* ordinal floor on dark — no darker */

  --wash: rgba(57, 135, 229, 0.12);

  --estimate: #a78bfa;
  --estimate-wash: rgba(167, 139, 250, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 9;
  background: var(--surface-1); color: var(--ink); padding: .6rem 1rem;
  border-radius: 8px; border: 1px solid var(--ring);
}

a { color: inherit; text-underline-offset: 3px; }

/* ---------- masthead ---------- */

.masthead {
  background: var(--surface-1);
  border-bottom: 1px solid var(--grid);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
  position: relative;
}
.masthead .wrap { position: relative; }

.theme {
  position: absolute; top: 0; right: 0;
  background: transparent; color: var(--muted);
  border: 1px solid var(--ring); border-radius: 999px;
  width: 2.25rem; height: 2.25rem; font-size: 1rem; cursor: pointer; line-height: 1;
}
.theme:hover { color: var(--ink); }

.kicker {
  margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 600; color: var(--sep);
}
h1 {
  margin: 0; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 800;
}
.standfirst {
  margin: 1.1rem 0 0; max-width: 46ch;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; color: var(--ink-2);
}

/* ---------- sections ---------- */

main section { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
main section.hero { padding-top: clamp(1.75rem, 4vw, 2.5rem); }

h2 {
  margin: 0 0 .5rem; font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: -0.02em; font-weight: 700;
}
.lede { margin: 0 0 1.5rem; max-width: 62ch; color: var(--ink-2); }

.band { background: var(--surface-1); border-block: 1px solid var(--grid); }

/* ---------- stat tiles ---------- */

.tiles {
  display: grid; gap: 1px; background: var(--grid);
  border: 1px solid var(--grid); border-radius: 12px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tile { background: var(--surface-1); padding: 1.25rem 1.35rem; }
.tile .label {
  display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); font-weight: 600;
}
.tile .value {
  display: block; margin-top: .35rem;
  font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
}
.tile .sub { display: block; margin-top: .4rem; font-size: .85rem; color: var(--ink-2); }
.tile.accent .value { color: var(--sep); }

.hero-note { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- delta cards ---------- */

.deltas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.delta {
  background: var(--plane); border: 1px solid var(--grid);
  border-radius: 12px; padding: 1.1rem 1.25rem;
}
.delta .n {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  display: block; line-height: 1.1;
}
.delta .t { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .95rem; }
.delta.up .n { color: var(--sep); }

/* ---------- charts ---------- */

.chart {
  margin: 0; background: var(--surface-1);
  border: 1px solid var(--grid); border-radius: 12px;
  padding: 1.25rem 1.35rem 1.5rem;
}
figcaption {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem;
}
.cap { font-weight: 600; font-size: .95rem; }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.swatch {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  box-shadow: 0 0 0 2px var(--surface-1);
}

.bars { display: grid; gap: 1.1rem; }
.row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .9rem; align-items: center; }
.row .name { font-size: .87rem; color: var(--ink-2); line-height: 1.3; }
.track { display: grid; gap: 4px; }

.bar { display: flex; align-items: center; gap: .55rem; }
.fill {
  height: 14px; border-radius: 0 4px 4px 0; min-width: 2px;
  transition: filter .12s ease;
}
.fill.now { background: var(--now); }
.fill.sep { background: var(--sep); }
.bar .v { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar:hover .fill { filter: brightness(1.12); }

.rates .row { grid-template-columns: minmax(64px, 90px) 1fr; }
.fill.t15 { background: var(--tier-15); }
.fill.t25 { background: var(--tier-25); }
.fill.t50 { background: var(--tier-50); }

/* ---------- filters + table ---------- */

.filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.f { display: grid; gap: .3rem; font-size: .75rem; color: var(--muted); font-weight: 600;
     text-transform: uppercase; letter-spacing: .07em; }
.f.grow { flex: 1 1 220px; }
.f select, .f input {
  font: inherit; font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ink); background: var(--surface-1);
  border: 1px solid var(--axis); border-radius: 8px; padding: .5rem .65rem; width: 100%;
}
.f select:focus-visible, .f input:focus-visible { outline: 2px solid var(--now); outline-offset: 1px; }

.count { margin: 0 0 .75rem; font-size: .85rem; color: var(--muted); }

.tablewrap {
  border: 1px solid var(--grid); border-radius: 12px;
  overflow-x: auto; background: var(--surface-1);
}
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--grid); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--wash); }
td.code { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
th.num { text-align: right; }

.pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor;
}
.pill.now { color: var(--now); }
.pill.sep { color: var(--sep); }

.more {
  margin-top: 1rem; font: inherit; font-size: .9rem; cursor: pointer;
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--axis); border-radius: 8px; padding: .55rem 1.1rem;
}
.more:hover { background: var(--wash); }

/* ---------- method + footer ---------- */

.method { background: var(--surface-1); border-top: 1px solid var(--grid); }
.method p { max-width: 68ch; color: var(--ink-2); }
.method strong { color: var(--ink); }
.prov { font-size: .82rem; color: var(--muted); }

.foot {
  padding: 2rem 0 3rem; font-size: .84rem; color: var(--muted);
  border-top: 1px solid var(--grid); margin-top: 0;
}
.foot p { margin: .3rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- map ---------- */

.viewtoggle { display: inline-flex; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; }
.viewtoggle button {
  font: inherit; font-size: .82rem; cursor: pointer; padding: .35rem .8rem;
  background: var(--surface-1); color: var(--ink-2); border: 0;
}
.viewtoggle button + button { border-left: 1px solid var(--axis); }
/* [hidden] works through the browser default [hidden]{display:none}, and ANY
   author display rule outranks it — the nuclear panel rendered 1,486px tall
   with .hidden === true for exactly this reason. Attribute + class beats the
   bare class, so no !important is needed. */
.viewtoggle[hidden] { display: none; }
.viewtoggle button.on { background: var(--now); color: #fff; }
.viewtoggle button:focus-visible { outline: 2px solid var(--now); outline-offset: -2px; }

.mapwrap { position: relative; }
#map { width: 100%; height: auto; display: block; }
#map path {
  stroke: var(--surface-1);      /* 2px surface gap between fills, per the mark spec */
  stroke-width: 1.2;
  transition: filter .1s ease;
}
#map path.hit { cursor: pointer; }
#map path.hover { filter: brightness(1.15); stroke: var(--ink); stroke-width: 1.6; }

.maptip {
  position: absolute; pointer-events: none; z-index: 2; max-width: 260px;
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--axis); border-radius: 8px; padding: .55rem .7rem;
  font-size: .82rem; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.maptip .tname { font-weight: 700; display: block; }
.maptip .tval { font-variant-numeric: tabular-nums; }
.maptip .tsub { color: var(--muted); display: block; margin-top: .2rem; }

.maplegend { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; font-size: .78rem; color: var(--ink-2); }
.maplegend .sw { width: 30px; height: 12px; border-radius: 2px; display: inline-block; }
.maplegend .lbl { font-variant-numeric: tabular-nums; }

.mapnote { margin: .75rem 0 0; font-size: .8rem; color: var(--muted); max-width: 68ch; }

/* Static colours that used to ride on inline style attributes, which the CSP
   blocks. See applyComputedStyles() in app.js for the dynamic ones. */
.swatch.sw-now { background: var(--now); }
.swatch.sw-sep { background: var(--sep); }
.rowsub { color: var(--muted); font-size: .8rem; }
td.empty { color: var(--muted); padding: 1.5rem .8rem; }

/* ---------- the nuclear option ---------- */

.nuke { background: var(--surface-1); border-block: 1px solid var(--grid); }

.switch { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 26px; border-radius: 999px; background: var(--axis);
  position: relative; transition: background .15s ease; flex: none;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-1); transition: transform .15s ease;
}
.switch input:checked + .track { background: var(--sep); }
.switch input:checked + .track .knob { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid var(--now); outline-offset: 2px; }
.switch .stext { font-size: .9rem; font-weight: 600; color: var(--ink-2); }

#nukeBody { margin-top: 1.75rem; display: grid; gap: 1.5rem; }

.nukehero { margin: 0; }
.nukehero .n {
  display: block; font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; color: var(--sep);
}
.nukehero .t { display: block; margin-top: .5rem; color: var(--ink-2); max-width: 46ch; }

/* Second sequential context on the page, so it takes the orange ramp rather
   than a second blue one. Steps verified perceptually monotonic in both modes. */
.fill.e0 { background: #fde3d4; }
.fill.e1 { background: #fbc4a5; }
.fill.e2 { background: #f7a074; }
.fill.e3 { background: #eb6834; }
.fill.e4 { background: #c44f22; }
.fill.e5 { background: #8f3714; }
:root[data-theme="dark"] .fill.e0 { background: #8f3714; }
:root[data-theme="dark"] .fill.e1 { background: #c44f22; }
:root[data-theme="dark"] .fill.e2 { background: #d95926; }
:root[data-theme="dark"] .fill.e3 { background: #eb6834; }
:root[data-theme="dark"] .fill.e4 { background: #f7a074; }
:root[data-theme="dark"] .fill.e5 { background: #fbc4a5; }

#nukeMap { width: 100%; height: auto; display: block; }
#nukeMap path { stroke: var(--surface-1); stroke-width: 1.2; }
#nukeMap path.hover { stroke: var(--ink); stroke-width: 1.6; filter: brightness(1.12); }
.nukecall {
  margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--sep);
  background: var(--plane); color: var(--ink); font-weight: 600; max-width: 62ch;
}

/* The hidden attribute works through the UA rule [hidden]{display:none}, which
   ANY author display rule outranks. #nukeBody sets display:grid, so the panel
   rendered in full while its .hidden property was true and the switch appeared
   to do nothing. Restate it at higher specificity for every element that relies
   on the attribute. */
#nukeBody[hidden], #mapsec[hidden], #nukesec[hidden], #maptip[hidden],
#nukeTip[hidden], .maptip[hidden], .more[hidden] { display: none; }

/* The reveal: states arrive in order of exposure rather than all at once, so
   the eye follows the sequence. Delays are set per path in JS. */
#nukeMap path { transition: fill .6s ease; }
@media (prefers-reduced-motion: reduce) {
  #nukeMap path { transition: none; }
}
.depnote {
  margin: 1rem 0 0; font-size: .88rem; color: var(--ink-2); max-width: 70ch;
}
.depnote strong { color: var(--ink); }

/* ---------- the price sign ---------- */

.pumpwrap { margin: 0; }
.pumpwrap[hidden] { display: none; }

.pump {
  display: inline-block; background: #16181d; color: #fff;
  border-radius: 14px; padding: 1.1rem 1.5rem 1.25rem;
  border: 3px solid #2a2d35; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.pumphead {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: #8a8f9c; font-weight: 700;
}
.pumpfoot { font-size: .74rem; color: #8a8f9c; margin-top: .5rem; }

/* Odometer: each digit is a 0-9 reel translated vertically. Digits are
   monospaced by a fixed width so the sign does not jitter as values change. */
.pumpprice { display: flex; align-items: flex-end; gap: 1px; margin-top: .35rem; }
.reel {
  display: inline-block; overflow: hidden; height: 1em; width: .62em;
  line-height: 1; font-size: clamp(2.6rem, 8vw, 4rem); font-weight: 800;
  font-variant-numeric: tabular-nums; color: #ffb703;
}
.reel .strip {
  display: block;
  transition: transform .9s cubic-bezier(.22,.9,.25,1);
}
.reel .strip span { display: block; height: 1em; text-align: center; }
.glyph {
  font-size: clamp(2.6rem, 8vw, 4rem); font-weight: 800; line-height: 1;
  color: #ffb703; align-self: flex-end;
}
.glyph.cur { font-size: clamp(1.6rem, 4vw, 2.2rem); align-self: flex-start; margin-top: .18em; }
@media (prefers-reduced-motion: reduce) { .reel .strip { transition: none; } }

/* The global figcaption rule is display:flex for chart headers, which broke
   this caption into flex items and flung the bold figures to the right. */
.pumpnote { display: block; margin: .9rem 0 0; font-size: .82rem;
            color: var(--muted); max-width: 64ch; line-height: 1.5; }
.pumpnote strong { color: var(--ink-2); }

/* ---------- your state ---------- */

.yours { background: var(--surface-1); border-block: 1px solid var(--grid); }
.yours[hidden] { display: none; }
.yourhead { display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; flex-wrap: wrap; }
.yourhead h2 { margin: 0; }
.statepick select {
  font: inherit; font-size: 1rem; padding: .55rem .8rem; border-radius: 8px;
  border: 1px solid var(--axis); background: var(--plane); color: var(--ink); min-width: 15rem;
}
.statepick select:focus-visible { outline: 2px solid var(--now); outline-offset: 1px; }

.yourbody { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.yourbody[hidden] { display: none; }
.yourhint { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; }
.yourhint[hidden] { display: none; }

.ystats { display: grid; gap: 1px; background: var(--grid); border: 1px solid var(--grid);
          border-radius: 12px; overflow: hidden;
          grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ystat { background: var(--plane); padding: 1rem 1.15rem; }
.ystat .l { display: block; font-size: .72rem; text-transform: uppercase;
            letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.ystat .v { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em;
            margin-top: .2rem; line-height: 1.05; }
.ystat .s { display: block; margin-top: .35rem; font-size: .82rem; color: var(--ink-2); }
.ystat.hot .v { color: var(--sep); }

.ysent { margin: 0; font-size: 1.02rem; line-height: 1.6; max-width: 68ch; color: var(--ink-2); }
.ysent strong { color: var(--ink); }

.ylist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--grid);
         border-radius: 12px; overflow: hidden; background: var(--plane); }
.ylist li { display: flex; justify-content: space-between; gap: 1rem;
            padding: .55rem .9rem; border-bottom: 1px solid var(--grid); font-size: .88rem; }
.ylist li:last-child { border-bottom: 0; }
.ylist .d { color: var(--ink-2); }
.ylist .m { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ysub { margin: 0 0 .4rem; font-size: .75rem; text-transform: uppercase;
        letter-spacing: .08em; color: var(--muted); font-weight: 600; }

/* The chosen state is outlined on both maps so the panel and the maps agree. */
#map path.picked, #nukeMap path.picked {
  stroke: var(--ink); stroke-width: 2.4; paint-order: stroke;
}

/* ---------- the other side ---------- */

#uscost[hidden] { display: none; }
/* A third data context on the page. Blue means Canada's list and orange means
   energy, so duty takes categorical slot 8. Single series, so no adjacency
   concern; validated for contrast against both surfaces. */
.nukehero .n.cost { color: #e34948; }
:root[data-theme="dark"] .nukehero .n.cost { color: #e66767; }
.fill.duty { background: #e34948; }
:root[data-theme="dark"] .fill.duty { background: #e66767; }
.delta.cost .n { color: #e34948; }
:root[data-theme="dark"] .delta.cost .n { color: #e66767; }
#dutyRows td.num { font-variant-numeric: tabular-nums; }
#dutyRows tr.hot td.num:last-child { color: #e34948; font-weight: 700; }
:root[data-theme="dark"] #dutyRows tr.hot td.num:last-child { color: #e66767; }

/* ---------- the one modelled number ----------
   Deliberately loud: a dashed top border, a badge, and its own color, so this
   section can never be mistaken for one of the measured panels around it. */
#consumercost[hidden] { display: none; }
.band.estimate { border-top: 3px dashed var(--estimate); }
.estimate-flag {
  display: inline-block; margin: 0 0 .75rem; padding: .3rem .7rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--estimate-wash); color: var(--estimate);
  border: 1px solid var(--estimate);
}
.nukehero .n.estimate { color: var(--estimate); }
.delta.estimate .n { color: var(--estimate); }
.fill.estimate { background: var(--estimate); }
#consumerStateRows td.num { font-variant-numeric: tabular-nums; }
#consumerMethodSection[hidden] { display: none; }

.picks { display: flex; gap: .6rem; flex-wrap: wrap; }
#indWrap[hidden] { display: none; }
.indcard {
  border: 1px solid var(--grid); border-radius: 12px; background: var(--plane);
  padding: 1rem 1.15rem;
}
.indcard .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; display: block; }
.indcard .t { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .92rem; }
.indcard .c { display: block; margin-top: .5rem; color: var(--muted); font-size: .8rem; }

/* Industry picker over the map. Same control as the one in "Your state", and
   the two are kept in sync, because it is the same question in both places. */
.mapind {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1rem; font-size: .95rem; color: var(--ink-2);
}
.mapind[hidden] { display: none; }
.mapind select {
  font: inherit; font-size: .95rem; padding: .4rem 2rem .4rem .6rem;
  border: 1px solid var(--axis); border-radius: 8px;
  background: var(--surface-1); color: var(--ink); max-width: 22rem;
}
.mapind select:focus-visible { outline: 2px solid var(--now); outline-offset: 1px; }
.mapctl { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
/* The global reduced-motion rule above already forces transition:none with
   !important, so this needs no companion media query. */
#map path { transition: fill .55s ease, filter .1s ease; }

/* A class no state reaches is dimmed rather than dropped, so the ramp still
   reads as a ramp while the label states where the data actually stops. */
/* Bands a layer does not use are hidden, not dimmed. Dimmed swatches sat
   between the ramp and the word More and read as the top of the scale. */
.maplegend .sw.unused { display: none; }

/* The measured-not-modelled promise is the site's most defensible claim; give
   it the weight of a pull quote rather than burying it in body copy. */
.method .promise {
  border-left: 3px solid var(--now); padding: .1rem 0 .1rem 1rem;
  font-size: 1.02rem; color: var(--ink-2);
}
.method .promise strong { color: var(--ink); }
.method ul.sources { margin: 0 0 1.2rem; padding-left: 1.1rem; max-width: 68ch; color: var(--ink-2); }
.method ul.sources li { margin-bottom: .45rem; font-size: .92rem; line-height: 1.5; }
.method code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: var(--plane); padding: .05em .35em; border-radius: 4px;
}

/* ---------- share ---------- */

.offscreen { position: fixed; top: -9999px; left: -9999px; opacity: 0; }

.sharebox {
  border: 1px solid var(--grid); border-radius: 12px; background: var(--plane);
  padding: 1rem 1.15rem;
}
.sharelead {
  margin: 0 0 .5rem; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 600;
}
.sharetext {
  margin: 0 0 .85rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2);
  max-width: 68ch;
}
.sharebtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.sharebtn {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .5rem .9rem; border-radius: 8px;
  border: 1px solid var(--axis); background: var(--surface-1); color: var(--ink);
}
.sharebtn:hover { background: var(--wash); }
.sharebtn.done { background: var(--now); border-color: var(--now); color: #fff; }
.sharebtn:focus-visible { outline: 2px solid var(--now); outline-offset: 1px; }

/* --- Share call to action --------------------------------------------------
   Deliberately at the end of the page: the ask lands after the argument, not
   before it. Plain links to each platform's own share endpoint — no embedded
   widget, no SDK, so the "no third-party requests" promise in the footer stays
   literally true until a reader chooses to click away. */
.sharecta { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--grid); }
.sharecta h2 { margin: 0 0 .4rem; }
.ctalede { margin: 0 0 1.1rem; max-width: 54ch; color: var(--ink-2); }
.ctabtns { margin-bottom: .7rem; }
.sharebtn.primary { background: var(--now); border-color: var(--now); color: #fff; font-weight: 600; }
.sharebtn.primary:hover { filter: brightness(1.08); background: var(--now); }
/* The anchors must sit on the same baseline as the buttons beside them. */
a.sharebtn { text-decoration: none; display: inline-flex; align-items: center; }
.ctanote { font-size: .82rem; color: var(--muted); margin: 0; max-width: 60ch; min-height: 1.2em; }

/* Compact prompt under the headline figures. The full ask lives further down;
   this one is for the reader who is already convinced by the first number and
   would otherwise have to scroll past everything to act on it. */
.sharebar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
            margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--grid); }
.sharebarlabel { font-size: .88rem; color: var(--ink-2); margin-right: .1rem; }