/* ============================================================
   THE SUBSIDY CLOCK — reskinned in THE ENERGY TRAP brand system.
   CSS-only reskin: markup, data and calculations untouched.
   Two surface modes:
     · Navy ground (attention) — the hero + run-rate chips, amber headline.
     · Cream ground (reading)   — every data section, navy text & charts.
   Equity (serif) for reading; Concourse (geometric sans) for headings,
   labels and all figures. Amber is a single accent per view.
   ============================================================ */

/* ---------- webfonts (Equity + Concourse, from the brand system) ---------- */
@font-face { font-family:'Equity'; src:url('assets/fonts/equity_a_regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Equity'; src:url('assets/fonts/equity_a_italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Equity'; src:url('assets/fonts/equity_a_bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Equity Caps'; src:url('assets/fonts/equity_a_caps_regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Concourse'; src:url('assets/fonts/concourse_t3_regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Concourse'; src:url('assets/fonts/concourse_t3_bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Concourse Display'; src:url('assets/fonts/concourse_t6_regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* ---- Energy Trap palette ---- */
  --navy: #16243a;
  --navy-deep: #101b2d;
  --amber: #e3a13c;
  --amber-dark: #c8862a;

  --paper: #faf7f1;        /* the cream ground — never pure white */
  --paper-dim: #f2ede3;
  --card: #fefcf7;         /* card fill — warm near-white, lifts off cream */

  --ink: #23282e;
  --muted: #5d6470;
  --faint: #8f94a0;
  --line: #d9d2c4;
  --line-soft: #e7e1d4;

  /* on-navy tints (secondary text on dark grounds) */
  --on-navy: #faf7f1;
  --on-navy-1: #c3cad6;
  --on-navy-2: #aab3c2;
  --on-navy-3: #8d97a8;
  --on-navy-line: #32445e;

  /* "money"/figure accent — navy on cream; amber is added only where loud */
  --money: #16243a;
  --money-deep: #101b2d;

  --stale: #c8862a;            /* stale-data warning (functional amber) */
  --stale-bg: #f5e9d2;

  /* ---- chart ramp: navy + navy tints, amber on the HEADLINE series ---- */
  /* direct (measured) layer — Renewables Obligation is the amber headline */
  /* warm amber/gold ramp — RO is the brand-amber headline, darkening up the stack */
  --c-ro:   #e3a13c;   /* HEADLINE — Renewables Obligation (£74.6bn) */
  --c-fit:  #c8862a;
  --c-cfdr: #a86e22;
  --c-cfdl: #855417;
  --c-con:  #5e3a0e;

  /* recipients map — jewel tones glowing on the basemap */
  --jewel-cfd: #1fb486;   /* emerald — CfD renewables */
  --jewel-ro:  #a45cf0;   /* amethyst — Renewables Obligation */
  /* asset X-ray chart, diverging pair: payments up, paybacks down.
     CVD-validated 2026-07-29 (dataviz validator: deutan ΔE 10.4, normal 27.1;
     emerald's sub-3:1 surface contrast is relieved by the zero-baseline
     position encoding + the accessible quarterly table) */
  --xray-pos: #1fb486;    /* payments (matches --jewel-cfd) */
  --xray-neg: #c85a3a;    /* paybacks — copper, below the line */

  /* indirect (estimated) layer — cool blue ramp, deep navy → pale sky */
  --c-cm:    #16243a;
  --c-ccl:   #274b73;
  --c-ets:   #3f74a3;
  --c-tnuos: #7ba6c9;
  --c-bsuos: #b8d0e2;

  /* warm neutral — "all other costs" in the share-of-bill chart */
  --c-other: #cdc6b6;

  --serif: "Equity", Georgia, "Times New Roman", serif;
  --serif-caps: "Equity Caps", "Equity", Georgia, serif;
  --sans: "Concourse", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 4px;     /* brand corners 3–4px */
  --radius-lg: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber-dark); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(rgba(22, 36, 58, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: var(--serif);          /* reading text = Equity */
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--amber-dark); }

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.money { color: var(--money); }

/* ============================================================
   STRUCTURAL TYPE — Concourse for headings, labels and figures
   ============================================================ */
.brand, .card h2, .card h3, .prose h1, .prose h2, .prose h3,
.kfigure, .hero-value, .stat-value, .strip-value, .bar-amount, .bar-name,
.brand-tag, .masthead nav a, .strip-label, .strip-sub, .badge, .h-note,
.data-table, .legend, .switch-label, .hero-share-lead, .hero-share-pill,
.eq-src, .freshness, .stale-warning, .footer-links {
  font-family: var(--sans);
}

/* ---------- masthead: deep-navy band, cream type, amber live-tick ---------- */
.masthead {
  background: var(--navy-deep);
  background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 42%);
  border-bottom: 1px solid var(--on-navy-line);
  box-shadow: inset 0 -5px 0 -4px rgba(250, 247, 241, 0.22);
}
.masthead-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px 24px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 16px;
}
.brand {
  margin: 0; font-weight: 700; font-size: 1.28rem;
  letter-spacing: 0.005em; color: var(--paper);
  display: flex; align-items: center;
}
.brand a { color: inherit; text-decoration: none; }
.brand-tick {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--amber); margin-right: 12px;
  animation: brand-tick 2s steps(1) infinite;
}
@keyframes brand-tick { 0% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .brand-tick { animation: none; } }
.brand-tag {
  margin: 0 0 0 21px; font-size: 0.68rem; color: rgba(250, 247, 241, 0.62);
  text-transform: uppercase; letter-spacing: 0.16em;
}
.masthead nav { display: flex; gap: 22px; flex-wrap: wrap; }
.masthead nav a {
  font-size: 0.8rem; color: rgba(250, 247, 241, 0.85); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(250, 247, 241, 0.25); padding-bottom: 2px;
}
.masthead nav a:hover { color: #fff; border-bottom-color: var(--amber); }
.masthead :focus-visible { outline-color: var(--amber); }

/* ============================================================
   HERO — navy attention panel, one large amber figure
   ============================================================ */
.hero {
  margin: 30px 0 0;
  padding: 52px 32px 30px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(227, 161, 60, 0.10), transparent 55%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-navy);
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-deep);
}

.hero-figure { margin: 0; line-height: 1; white-space: nowrap; }
.hero-value {
  font-weight: 700;
  font-size: clamp(2.15rem, 8.8vw, 5.6rem);
  letter-spacing: -0.02em;
  color: var(--amber);
}
.hero-fn { font-size: 0.66em; color: var(--on-navy-3); margin-left: 0.25em; cursor: help; }

.hero-leadin { margin: 0 auto 18px; max-width: 38em; font-size: 1.06rem; color: var(--on-navy-1); }
.hero-leadin a { color: inherit; text-decoration-color: var(--on-navy-line); text-underline-offset: 3px; }
.hero-leadin strong { color: var(--amber); font-weight: 700; }
.nowrap { white-space: nowrap; }

.hero-sub { margin: 16px auto 0; max-width: 34em; font-size: 1.04rem; color: var(--on-navy-2); }

.since-opened {
  margin: 28px auto 0; display: inline-block;
  font-size: 0.94rem; color: var(--on-navy-1);
  border: 1px solid var(--on-navy-line); border-radius: var(--radius);
  background: rgba(250, 247, 241, 0.04); padding: 8px 18px;
}
.since-opened .money { color: var(--on-navy); font-weight: 700; }

/* hero share row */
.hero-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; margin: 16px 0 0; }
.hero-share-lead { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-navy-3); }
.hero-share-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; color: var(--on-navy-1);
  background: rgba(250, 247, 241, 0.05); border: 1px solid var(--on-navy-line); border-radius: var(--radius);
  padding: 0.2rem 0.62rem; cursor: pointer;
}
.hero-share-pill:hover { color: var(--navy-deep); background: var(--amber); border-color: var(--amber); }
.hero-share-pill svg { display: block; }

/* ---------- run-rate chips ---------- */
.strip {
  margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--on-navy-line); border-radius: var(--radius);
  background: rgba(7, 13, 24, 0.35); overflow: hidden;
}
.strip-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 12px; border-left: 1px solid var(--on-navy-line);
  text-align: left;
}
.strip-cell:first-child { border-left: 0; }
.strip-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-navy-2); }
.strip-value { font-weight: 700; font-size: 1.08rem; white-space: nowrap; color: var(--on-navy); }
.strip-value.money { color: var(--on-navy); }
.strip-sub { font-size: 0.68rem; color: var(--on-navy-3); }
.strip-caption { margin: 10px 2px 0; font-size: 0.78rem; color: var(--on-navy-2); text-align: left; font-family: var(--serif); }

/* ---------- equivalence cards ---------- */
.eq-cards {
  margin: 30px 0 6px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.eq-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 14px;
  border: 1px solid var(--on-navy-line); border-radius: var(--radius);
  background: rgba(7, 13, 24, 0.35);
}
.eq-figure { font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--amber); }
.eq-noun { font-size: 0.96rem; font-weight: 600; color: var(--on-navy); }
.eq-frame { font-size: 0.8rem; color: var(--on-navy-2); font-family: var(--serif); }
.eq-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 12px; }
.eq-foot .eq-src, .eq-foot .eq-cardlink { font-size: 0.72rem; border-bottom: 1px dotted var(--on-navy-3); text-decoration: none; color: var(--on-navy-3); }
@media (max-width: 720px) { .eq-cards { grid-template-columns: 1fr; } }

/* ============================================================
   DATA SECTIONS — cream cards, navy text & charts
   ============================================================ */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 28px; margin: 24px 0;
}
.card h2 {
  margin: 0 0 5px; font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.005em; color: var(--navy);
}
.card h3 { margin: 26px 0 10px; font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.h-note { font-size: 0.7rem; font-weight: 700; color: var(--faint); margin-left: 7px; text-transform: uppercase; letter-spacing: 0.1em; }
.card-intro { margin: 0 0 18px; font-size: 0.98rem; color: var(--muted); max-width: 46em; }

.card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card-pair .card { margin: 0; }

/* category-card rows (direct / indirect index) */
.khead { margin: 0 0 6px; }
.kfigure { font-size: 1.55rem; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.ksub { font-size: 0.74rem; color: var(--muted); font-family: var(--serif); }
.krow { display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  border-top: 1px solid var(--line-soft); font-size: 0.92rem;
  color: var(--ink); text-decoration: none; scroll-margin-top: 5rem; }
.krow:hover { background: var(--paper-dim); }
/* deep-link target flash: pulse the row once when reached via #<scheme-slug> */
.krow.anchor-flash { animation: anchor-flash 1.6s ease-out; }
@keyframes anchor-flash {
  0%, 15% { background: color-mix(in srgb, var(--amber) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
.krow .dot { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.krow .nm { flex: 1; }
.krow .amt { font-weight: 700; font-family: var(--sans); }
.krow .pct { width: 44px; text-align: right; color: var(--faint); font-size: 0.78rem; font-family: var(--sans); }
.card-foot { font-size: 0.82rem; color: var(--muted); margin: 10px 0 0; }
.card-foot a { color: var(--amber-dark); }
main > .card-pair { margin: 24px 0; }

/* ---------- stat rows ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 6px 0 4px; }
.stat { display: flex; flex-direction: column; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--navy); letter-spacing: -0.01em; }
.stat-label { font-size: 0.82rem; color: var(--muted); font-family: var(--serif); }

/* ---------- horizontal bars ---------- */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.bar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 0.9rem; }
.bar-name { font-weight: 400; color: var(--ink); }
.bar-amount { font-weight: 700; margin-left: auto; white-space: nowrap; color: var(--navy); }
.badge {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 6px; white-space: nowrap;
}
.badge-stale { color: var(--stale); border-color: var(--stale); background: var(--stale-bg); font-weight: 700; }
.badge-conf-high { color: var(--navy); border-color: var(--navy); }
.badge-conf-medium { color: var(--muted); border-color: var(--muted); }
.badge-conf-low { color: var(--amber-dark); border-color: var(--amber-dark); }
.bar-track { height: 11px; border-radius: 2px; background: var(--line-soft); overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 2px; background: var(--navy); min-width: 2px; }
.bar-fill.neg { background: var(--c-cm); }

/* indirect bill: hatched fills echo the chart's estimated layer */
.bar-fill-indirect {
  background: var(--card);
  background-image: repeating-linear-gradient(45deg, var(--navy) 0, var(--navy) 2.5px, transparent 2.5px, transparent 6.5px);
  border: 1px solid var(--navy);
}
.attr-note { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); max-width: 56em; }
.attr-note .num { font-weight: 700; color: var(--navy); font-family: var(--sans); }

/* ---------- tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700; padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num-col { text-align: right; padding-right: 0; }
.data-table td.num-col { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.data-table .rank-col { width: 2em; color: var(--faint); }
.data-table .money { font-weight: 700; color: var(--navy); }
.data-table .cell-dim { color: var(--muted); }
.table-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); max-width: 50em; font-family: var(--serif); }

/* ---------- corrections: summary table, reasoning as numbered notes ----------
   An error explanation is prose, not tabular data: it needs a 55-75 character
   measure, which no cell in a six-column table can give it (the cause column
   measured 121px — about 17 characters a line, a 2,046px row, and sideways
   overflow on a phone). So the table indexes what changed and the notes below
   carry why, at reading width. Notes are addressable so a single correction
   can be cited, and none of it hides behind a click: the page prints whole. */
#corrections-table td { vertical-align: baseline; }
#corrections-table .corr-fig { font-family: var(--sans); font-weight: 700; }
/* Every cell in .data-table has padding-left:0 and .num-col zeroes the right
   padding too — fine for a final right-aligned column, but here WAS, NOW and
   NOTE sit mid-table and collided ("£22.85bn cumulativenote 1"). This table
   spaces its own columns and does not use .num-col. */
#corrections-table th, #corrections-table td { padding-right: 22px; }
#corrections-table th:last-child, #corrections-table td:last-child { padding-right: 0; }
/* width:1% + nowrap shrinks a column to its content, so the figure name (the
   only cell wanting to wrap) takes the slack instead of the money columns
   hoarding it and forcing three-line rows. A correction to a DESCRIPTION
   carries prose in was/now rather than a figure, which would stretch those
   columns and crush the figure name to one word per line — so prose cells
   wrap within a fixed share and the figure name keeps its room. */
#corrections-table th:not(:nth-child(2)), #corrections-table td:not(:nth-child(2)) {
  width: 1%; white-space: nowrap;
}
#corrections-table th:nth-child(2), #corrections-table td:nth-child(2) { min-width: 15ch; }
#corrections-table td.corr-prose {
  white-space: normal; width: auto; min-width: 20ch; max-width: 26ch;
  font-size: 0.86em; line-height: 1.35;
}
#corrections-table .corr-money {
  text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.corr-was-val { color: var(--muted); }
.corr-now-val { color: var(--navy); font-weight: 700; }
.corr-ref {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-decoration: none; color: var(--navy); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.corr-ref:hover { color: var(--amber-dark); border-bottom-color: var(--amber); }

.corr-notes { margin: 34px 0 0; }
.corr-notes h3 {
  font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 0;
}
.corr-note {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 0 4px;
  padding: 20px 0 22px; border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 16px;
}
.corr-note:last-child { border-bottom: 0; }
.corr-note-n {
  font-family: var(--sans); font-weight: 700; font-size: 0.9rem;
  color: var(--amber-dark); font-variant-numeric: tabular-nums;
}
.corr-note-body { max-width: 52ch; }
.corr-note-head {
  font-family: var(--sans); font-weight: 700; font-size: 0.92rem;
  margin: 0 0 6px; color: var(--ink);
}
/* the date is a caption, not part of the title: own line, so a long figure
   name cannot strand "· 1 September 2026" across a wrap */
.corr-note-date {
  display: block; margin-top: 2px;
  font-weight: 400; color: var(--faint); font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
/* the was/now pair reads as two labelled lines, not one long wrapping sentence
   with the arrow stranded mid-phrase */
.corr-note-change {
  margin: 0 0 0.95em; font-family: var(--sans); font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  align-items: baseline; max-width: 46ch;
}
.corr-note-change .corr-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--faint); font-weight: 700; text-align: right;
}
.corr-note-body p { margin: 0 0 0.7em; font-size: 0.96rem; }
.corr-note-body p:last-child { margin-bottom: 0; }
/* jumping from "note 2" must land somewhere obvious */
.corr-note:target { background: var(--stale-bg); box-shadow: 0 0 0 10px var(--stale-bg); }
.corr-note:target .corr-note-n { color: var(--navy); }

/* recipients: station rows expandable to their per-contract phases */
.rec-expand { background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; font: inherit; color: var(--muted); }
.rec-expand:hover { color: var(--navy); }
.rec-caret { display: inline-block; width: 0.7em; }
.data-table tr.rec-contracts.is-hidden { display: none; }
.data-table tr.rec-contracts td { padding-top: 0; border-bottom: 1px solid var(--line-soft); }
.contract-list { margin: 0; padding: 0 0 4px; list-style: none; }
.contract-list li { display: flex; justify-content: space-between; gap: 1em; padding: 2px 0; font-size: 0.85rem; color: var(--muted); }
.contract-list .money { font-weight: 700; color: var(--navy); }

/* ---------- card head row + mode switches ---------- */
.card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head-row h2 { margin: 0; }
/* toggle switch: a sliding pill (Tailwind-style) for each binary mode choice
   (basis, scope, chart view). The label says what turning it ON does. */
.switch-field { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-label { font-size: 0.82rem; color: var(--ink); user-select: none; }
.switch {
  position: relative; flex: none; display: inline-block;
  width: 44px; height: 24px; padding: 0; border: 0; border-radius: 9999px;
  background: var(--line); cursor: pointer; transition: background-color 0.18s ease;
}
.switch[aria-checked="true"] { background: var(--navy); }
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 9999px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.display-toggles { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; margin: 28px 0 18px; }
.eq-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 18px 0 6px; }

/* ---------- chart ---------- */
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis-label { font: 11.5px var(--sans); fill: var(--ink); fill-opacity: 0.72; }
.chart .gridline { stroke: var(--line-soft); stroke-width: 1; }
.chart .zeroline { stroke: var(--line); stroke-width: 1; }
.chart rect.partial { opacity: 0.5; }

/* ---------- recipients map (interactive MapLibre + jewel markers) ---------- */
.map-frame { position: relative; margin: 8px auto 0; height: min(72vh, 640px); }
.map-frame #map-canvas { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; }
/* asset X-ray panel: side panel on desktop, bottom sheet on mobile */
.asset-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 10;
  width: min(390px, 92%); overflow-y: auto; padding: 16px 18px;
  background: #fffdf9; border-left: 1px solid rgba(22,36,58,0.14);
  border-radius: 0 8px 8px 0; box-shadow: -10px 0 28px rgba(0,0,0,0.18); }
.asset-panel[hidden] { display: none; }
.asset-panel-close { position: absolute; top: 8px; right: 10px; z-index: 11;
  border: 0; background: none; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: inherit; padding: 4px 8px; }
.asset-head .asset-name { font-weight: 600; font-size: 1.05rem; margin: 0 24px 2px 0; }
.asset-head .asset-meta { font-size: 0.8rem; color: #5b6572; margin: 0 0 10px; }
.asset-head .pop-dot { margin-right: 6px; }
.asset-hero { margin: 0 0 12px; }
.asset-hero .v { font-size: 1.7rem; font-weight: 600; display: block; line-height: 1.1; }
.asset-hero .l { font-size: 0.78rem; color: #5b6572; }
.asset-tiles { display: flex; gap: 14px; margin: 0 0 14px; }
.asset-tiles .tile .v { font-weight: 600; display: block; }
.asset-tiles .tile .l { font-size: 0.74rem; color: #5b6572; }
.asset-chart-title { font-size: 0.8rem; font-weight: 600; margin: 0 0 4px; }
.asset-chart svg { display: block; width: 100%; height: auto; }
.asset-note, .asset-prov { font-size: 0.76rem; color: #5b6572; line-height: 1.45;
  margin: 10px 0 0; }
.asset-contracts { width: 100%; border-collapse: collapse; margin: 12px 0 0;
  font-size: 0.78rem; }
.asset-contracts th, .asset-contracts td { text-align: left; padding: 4px 6px 4px 0;
  border-bottom: 1px solid rgba(22,36,58,0.10); }
.asset-contracts th { font-weight: 600; }
.asset-contracts td.num, .asset-contracts th.num { text-align: right; }
@media (max-width: 640px) {
  .asset-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 72%; border-radius: 12px 12px 0 0; border-left: 0;
    border-top: 1px solid rgba(22,36,58,0.14); }
}

/* screen-reader-only table twin of the panel chart */
.sr-table { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* keyboard path to the canvas markers: buttons hidden visually (not from
   screen readers or tab order), shown while focused */
#map-station-list button { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#map-station-list button:focus-visible { position: fixed; left: 8px; top: 8px;
  width: auto; height: auto; clip-path: none; z-index: 20; padding: 6px 10px; }
.map-popup {
  position: absolute; z-index: 5; pointer-events: none; display: none;
  min-width: 150px; max-width: 230px; padding: 8px 10px;
  background: rgba(16,19,26,0.96); color: #f4f6f8;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 6px;
  font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.map-popup.is-visible { display: block; }
.map-popup .pop-name { font-weight: 600; display: block; margin-bottom: 2px; }
.map-popup .pop-meta { color: #aeb6bf; font-size: 0.74rem; }
.map-popup .pop-cost { font-weight: 600; }
.map-popup .pop-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 14px; font-size: 0.8rem; color: var(--ink); }
.legend span.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .swatch-hatch { background-color: var(--card); border: 1px solid; }
.legend .legend-group {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.legend .legend-group:not(:first-child) { margin-left: 14px; }
.share-caption { margin: 0.6rem 0 0; font-size: 0.96rem; color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--serif); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 46px; padding: 30px 0 44px; font-size: 0.86rem; color: var(--muted); }
.footer p { margin: 0 0 10px; }
.freshness:not(:empty) { margin-bottom: 14px; }
.stale-warning {
  display: inline-block; padding: 5px 12px; border-radius: var(--radius);
  background: var(--stale-bg); color: var(--stale); font-size: 0.8rem;
}
.stale-warning a { color: var(--stale); }
.footer-links { font-size: 0.86rem; color: var(--ink); letter-spacing: 0.01em; }
.footer-links a { color: var(--navy); }
.footer-links a:hover { color: var(--amber-dark); }
.footer-small { font-size: 0.8rem; color: var(--muted); max-width: 52em; font-family: var(--serif); }

/* ---------- methodology page ---------- */
.prose { max-width: 760px; padding-top: 36px; padding-bottom: 30px; }
.prose h1 { font-weight: 700; font-size: 2rem; margin: 0 0 8px; color: var(--navy); }
.prose .lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 30px; max-width: 40em; }
.prose .page-index { font-size: 0.86rem; color: var(--muted); margin: -16px 0 34px; }
.prose h2 { font-weight: 700; font-size: 1.3rem; margin: 40px 0 10px; color: var(--navy); }
.prose h3 { font-size: 1rem; font-weight: 700; margin: 24px 0 8px; color: var(--navy); }
.prose p, .prose li { font-size: 1rem; color: var(--ink); }
.prose .caveat { color: var(--muted); font-size: 0.92rem; }
.prose blockquote {
  margin: 14px 0; padding: 10px 18px; border-left: 3px solid var(--amber);
  background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.96rem;
}
.prose table { margin: 14px 0; }
#crosscheck-table th.num-col, #crosscheck-table td.num-col { padding-right: 16px; }
.prose .src-quote { font-size: 0.86rem; color: var(--muted); }
.tick-ok { color: var(--navy); font-weight: 700; }
tr.out-of-tolerance td { color: var(--amber-dark); font-weight: 500; }
.data-table tr.total-row td:not(.cell-dim) { border-top: 2px solid var(--line); font-weight: 700; }
.scheme-meta { font-size: 0.8rem; color: var(--faint); margin: 2px 0 12px; font-family: var(--serif); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .card-pair { grid-template-columns: 1fr; }
  .card-pair .card { margin: 0; }
  .strip { grid-template-columns: repeat(4, 1fr); }
  .strip-cell { border-top: 1px solid var(--on-navy-line); }
  .strip-cell:nth-child(4n+1) { border-left: 0; }
  .strip-cell:nth-child(-n+4) { border-top: 0; }
}

@media (max-width: 680px) {
  .hero { padding: 34px 18px 24px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip-cell { border-left: 0; border-top: 1px solid var(--on-navy-line); }
  .strip-cell:nth-child(odd) { border-right: 1px solid var(--on-navy-line); }
  .strip-cell:nth-child(-n+2) { border-top: 0; }
  .card { padding: 20px 18px 22px; }
  .stat-row { gap: 14px 28px; }
  .stat-value { font-size: 1.45rem; }
  .data-table { font-size: 0.82rem; }
  #recipients-table th:nth-child(3), #recipients-table td:nth-child(3) { display: none; }
  /* the credit column is restated in the note, so dropping it loses nothing */
  #corrections-table th:nth-child(6), #corrections-table td:nth-child(6) { display: none; }
  /* a 20ch floor on prose cells is a desktop comfort; on a phone it forces the
     row wider than the screen, so let prose shrink with the viewport */
  #corrections-table td.corr-prose { min-width: 0; max-width: none; }
  #corrections-table th:nth-child(2), #corrections-table td:nth-child(2) { min-width: 0; }
  .corr-note { grid-template-columns: 1.9em 1fr; }

  /* Audit tables (the REF cross-check and reconciliation) print figures to the
     penny on purpose — a reader checking our arithmetic needs the whole number,
     so they must not be truncated or hidden. Two penny columns alone are 222px,
     so below the prose measure the table cannot fit and must scroll.
     Restyling the table's own display (block/table on thead/tbody/tr) either
     fails to clip or breaks header-to-cell column alignment; the table keeps
     its native layout and a wrapper does the scrolling instead. */
  .table-scroll {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-scroll > table { min-width: max-content; }

  /* Citation strings contain long unbroken URLs, which no amount of normal
     wrapping will break — they pushed the page 18px wider than the phone.
     Allow a break inside the URL itself. */
  #cite-formats { overflow-wrap: anywhere; word-break: break-word; }

  /* An embed snippet is one long unbreakable line of markup. It is meant to be
     copied, not read, so it scrolls in its own box rather than stretching the
     page to 2,161px on a phone. */
  pre > code, code.embed-snippet {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; white-space: pre;
  }
  /* The note column is prose and will happily stretch a row to thousands of
     pixels, which defeats the scroll box. Cap it so the row width stays
     governed by the figures, and keep the whole row inside the box. */
  #crosscheck-table td:last-child, #ref-recon-table td:last-child,
  #recon-table td:last-child, #prices-table td:last-child {
    white-space: normal; max-width: 13ch; min-width: 9ch;
  }
  #crosscheck-table th, #crosscheck-table td,
  #ref-recon-table th, #ref-recon-table td,
  #recon-table th, #recon-table td,
  #prices-table th, #prices-table td { padding-left: 6px; padding-right: 6px; font-size: 0.78rem; }
  /* Only the figures resist wrapping — a mid-number line break is unreadable.
     Note/label columns must still wrap, or one long note stretches the row to
     several thousand pixels and the scroll becomes useless. */
  #crosscheck-table .num-col, #ref-recon-table .num-col,
  #recon-table .num-col, #prices-table .num-col { white-space: nowrap; }
  #crosscheck-table td:last-child, #ref-recon-table td:last-child { min-width: 15ch; }
}

/* Below ~430px the five remaining columns cannot compress past their own
   content and the table pushes the page sideways. The "was" figure goes: the
   note states both figures in full, so the table keeps the current one and the
   link to the reasoning. */
@media (max-width: 430px) {
  #corrections-table th:nth-child(3), #corrections-table td:nth-child(3) { display: none; }
  #corrections-table .corr-fig { font-weight: 400; }
  #corrections-table th, #corrections-table td { padding-right: 12px; }
}

/* Narrowest phones: the date column's "30 Sept 2026" is the last thing that
   will not fit alongside a figure name. It is restated in the note. */
@media (max-width: 380px) {
  #corrections-table th:nth-child(1), #corrections-table td:nth-child(1) { display: none; }
}

@media (max-width: 400px) {
  .hero-value { font-size: clamp(1.8rem, 8.6vw, 2.2rem); }
}