.finance-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.finance-hero {
  display: grid;
  /* The text column is capped at the lead measure, so a `1fr` first track flung
     the financial-year select to the far right edge — measured 448px of empty
     space between the end of the lead and the control, with the control 38px
     below the text it belongs to. Size the text track to the measure and pack
     the control next to it instead of against the viewport. */
  /* `--measure-lead-len`, not `--measure-lead`: the latter became `none` when
     reading measures were turned off (core.css), and `minmax(0, none)` is
     invalid — the whole declaration would be dropped and this grid collapse. */
  grid-template-columns: minmax(0, var(--measure-lead-len)) auto;
  justify-content: start;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: end;
  padding: var(--space-5) 0 var(--space-2);
}

.finance-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--colour-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.finance-hero h2,
.finance-panel h2 {
  margin: 0;
  color: var(--colour-text);
}

.finance-hero p {
  /* Was 58rem (928px) — a hard-coded width that outranked `.section__lead` on
     specificity and kept the lead at ~109 characters per line. Use the shared
     lead measure so this page reads like the rest of the site. */
  max-width: var(--measure-lead);
  margin: var(--space-2) 0 0;
  color: var(--colour-text-muted);
}

.finance-filter,
.finance-search {
  display: flex;
  gap: var(--space-3);
  align-items: end;
}

.finance-filter label,
.finance-search span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

.finance-filter select,
.finance-search select,
.finance-search input {
  min-height: 2.75rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: var(--colour-bg);
  color: var(--colour-text);
}

.finance-search button {
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: var(--colour-primary);
  color: var(--colour-bg);
  font-weight: var(--fw-bold);
}


.finance-panel {
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}



.finance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.finance-panel {
  padding: var(--space-4);
}

.finance-panel--wide {
  grid-column: 1 / -1;
}

/* Hug the content. Once the allocation tables were sized to their columns, the
   panel around them still spanned the full 1320px grid while everything inside
   it — heading, note and table alike — sat at 600-700px. A bordered box three
   times wider than its own content is the same "narrow content stranded in a
   wide container" shape this work exists to remove, just one level out. */
.finance-panel--hug { width: fit-content; max-width: 100%; }

.finance-panel__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.finance-panel__head a,
.finance-table a,
.finance-list a,
.finance-sources a {
  color: var(--colour-primary);
  font-weight: var(--fw-semibold);
}

.finance-table-wrap {
  overflow-x: auto;
}

/* These tables carry three short columns and were stretching across the full
   1286px panel, which put 610px of white space between a constituency name and
   its own allocation — ten rows of that, with no zebra to hold the eye on a
   line. Cap the table so the columns sit near each other, shrink the trailing
   link column to its content, and stripe anything long enough to lose your
   place in. Numerics keep `.num` right-alignment. */
.finance-table {
  /* `width: 100%` stretched three short columns across the full 1286px panel,
     putting 610px of white space between a constituency name and its own
     allocation, ten rows deep.
     The table distributes whatever width it is given, so the cap IS the lever:
     at 60rem the three columns measured 345/416/199px against header text of
     only 99/158/89px. Sized to roughly what the content needs. The ranked
     ministry table carries four columns and in-row bars, so it keeps the wider
     cap below. */
  width: auto;
  max-width: 38rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.finance-table th:last-child,
.finance-table td:last-child { width: 1%; white-space: nowrap; }
/* Stripe anything long enough to lose your place in. */
.finance-table tbody tr:nth-child(even) { background: var(--colour-bg-subtle); }

.finance-table th,
.finance-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
  text-align: left;
  vertical-align: top;
}

.finance-table th {
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.finance-table th.num,
.finance-table td.num { text-align: right; }

/* Four columns plus in-row budget bars — it needs the room the 3-column
   allocation tables do not. */
.finance-table--ranked { max-width: 60rem; }
.finance-table--ranked td { vertical-align: middle; }
.finance-table--ranked tbody tr:hover { background: var(--colour-primary-alpha-10); }
.finance-table--ranked tbody tr:last-child td { border-bottom: 0; }

.fin-unknown { color: var(--colour-text-muted); font-style: italic; }

.finance-table td span,
.finance-list span,
.finance-sources span {
  display: block;
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  /* Capped here, at this element's own font-size, so `ch` means what it says. */
  max-width: var(--container-prose);
}
.finance-sources em { display: block; max-width: var(--container-prose); }

.finance-table td p {
  margin: var(--space-1) 0 0;
  color: var(--colour-text-muted);
}

.finance-list,
.finance-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.finance-list li,
.finance-sources li {
  /* Cap on the <li> alone was not enough: `ch` resolves against the ELEMENT's
     own font-size, and the li is ~17px while its detail <span> renders at
     --text-xs (12px). A 64ch li is ~704px, which fits ~126 twelve-pixel
     characters. The inner spans are capped at their own size below. */
  max-width: var(--container-prose);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.finance-list--flags strong {
  color: var(--colour-primary);
}

.finance-sources em {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--colour-primary);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--fw-bold);
}

.finance-empty {
  margin: 0;
  /* This once read "uncapped, these ran the full container: 151 cpl at 1440px,
     211 at 1920px" as a reason to cap. That is now the accepted behaviour
     everywhere — `--container-prose` is `none` (core.css). */
  max-width: var(--container-prose);
  color: var(--colour-text-muted);
}

@media (max-width: 820px) {
  .finance-hero,
  .finance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-filter,
  .finance-search {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================================================
   Elevation: execution headline, absorption meters, in-row budget bars,
   inset empty states. Token-driven only (design-system compliant).
   ========================================================================== */

/* Reconciled national actuals — the page's headline: a brand rail + a soft
   tint lift it above the ministerial detail below. */
.finance-execution {
  border-left: 4px solid var(--colour-primary);
  background:
    linear-gradient(180deg, var(--colour-primary-alpha-10), transparent 140px),
    var(--colour-bg);
}
.finance-execution .finance-eyebrow { margin-bottom: var(--space-1); }
.finance-execution__totals { margin: var(--space-4) 0; }

/* Absorption meters — expenditure against revised estimate, per vote type. */
.fin-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-2);
}
.fin-meter__top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.fin-meter__name { font-weight: var(--fw-bold); color: var(--colour-text); font-size: var(--text-sm); }
.fin-meter__val { color: var(--colour-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.fin-meter__val strong { color: var(--colour-text); }
.fin-meter__track {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--colour-lighter); overflow: hidden;
}
.fin-meter__fill {
  display: block; height: 100%; max-width: 100%; min-width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--colour-secondary), var(--colour-secondary-light));
}

/* In-row budget bars — the Approved column reads as a ranked magnitude chart. */
.fin-amount { position: relative; }
.fin-amount__bar {
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  height: 62%; min-width: 2px; border-radius: var(--radius-sm);
  background: var(--colour-primary-alpha-20); z-index: 0;
}
.fin-amount__val { position: relative; z-index: 1; font-weight: var(--fw-semibold); }

/* Inset empty state — an absence that looks deliberate, not broken. */
.finance-empty--icon {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: var(--colour-bg-subtle);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-md);
}
.finance-empty--icon i { color: var(--colour-border-strong); font-size: var(--text-lg); margin-top: 1px; }

@media (max-width: 720px) {
  .fin-meters { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   NG-CDF constituency allocation record page.

   Replaces the raw-JSON link that used to be the only "detail view" for a
   record. The layout deliberately leads with the figure and its peer context,
   and demotes provenance to a footer: the source is still one click away, it
   is just no longer the thing a reader lands on.
   ───────────────────────────────────────────────────────────────────────── */
.pf-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm); color: var(--colour-text-muted);
  margin-bottom: var(--space-4);
}
.pf-crumbs span[aria-hidden] { color: var(--colour-border-strong); }

.pf-record {
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-top: 3px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, var(--colour-primary-alpha-10), transparent 160px),
    var(--colour-bg);
  margin-bottom: var(--space-5);
}
.pf-record__title {
  font-size: var(--text-xl); margin: var(--space-1) 0 var(--space-3);
  color: var(--colour-text);
}
.pf-record__lead { max-width: none; color: var(--colour-text-muted); }

/* The figure said twice: readable magnitude first, auditable exact second. */
.pf-figure {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.pf-figure__words {
  font-size: var(--text-3xl); line-height: 1.1;
  font-weight: var(--fw-bold); color: var(--colour-primary-dark);
  font-variant-numeric: tabular-nums;
}
.pf-figure__exact {
  font-size: var(--text-sm); color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

.pf-jump {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  list-style: none; padding: 0; margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.pf-compare__lead { max-width: none; margin-bottom: var(--space-5); }

/* Screen-reader-only table caption. Scoped to this app rather than added to the
   shared layer, which is not this change's to alter. */
.pf-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

.pf-table-note,
.pf-filter-state {
  font-size: var(--text-sm); color: var(--colour-text-muted);
  max-width: none; margin: 0 0 var(--space-3);
}
.pf-filter-state strong { color: var(--colour-text); }

/* The one-off amounts: named and listed in full, but folded away so 13 rows of
   "1 constituency" do not drown the six bands that hold 277 seats. */
.pf-oneoffs { margin-top: var(--space-3); font-size: var(--text-sm); }
.pf-oneoffs summary { cursor: pointer; color: var(--colour-text-muted); }
.pf-oneoffs__list {
  list-style: none; padding: var(--space-3) 0 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.pf-oneoffs__current { color: var(--colour-text); }

/* Payment bands — the real shape of this series, which 290 near-identical
   table rows hide completely. */
.pf-bands__title { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.pf-bands__note {
  font-size: var(--text-sm); color: var(--colour-text-muted);
  max-width: none; margin-bottom: var(--space-4);
}
.pf-bands { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.pf-band {
  display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) minmax(11rem, auto);
  gap: var(--space-3); align-items: center;
  padding: var(--space-2); border-radius: var(--radius-sm);
}
.pf-band--current { background: var(--colour-primary-alpha-10); }
.pf-band__amount {
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  color: var(--colour-text);
}
.pf-band--current .pf-band__amount { font-weight: var(--fw-bold); }
.pf-band__track {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--colour-lighter); overflow: hidden;
}
.pf-band__fill {
  display: block; height: 100%; min-width: 3px;
  border-radius: var(--radius-pill);
  background: var(--colour-border-strong);
}
.pf-band--current .pf-band__fill { background: var(--colour-primary); }
.pf-band__count { font-size: var(--text-xs); color: var(--colour-text-muted); }

/* Honest-absence list: each unknown names the source that would answer it. */
.pf-gaps { margin: 0; display: grid; gap: var(--space-4); }
.pf-gap dt {
  font-weight: var(--fw-bold); color: var(--colour-text);
  margin-bottom: var(--space-1);
}
.pf-gap dd { margin: 0; max-width: none; color: var(--colour-text-muted); }

.pf-prov {
  margin-top: var(--space-5); padding: var(--space-5);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.pf-prov__title {
  font-size: var(--text-base); margin: 0 0 var(--space-4);
  color: var(--colour-text);
}
.pf-prov__title i { color: var(--colour-success); margin-right: var(--space-2); }
.pf-prov__grid {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.pf-prov__grid dt {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--colour-text-muted); margin-bottom: var(--space-1);
}
.pf-prov__grid dd { margin: 0; font-size: var(--text-sm); color: var(--colour-text); }
.pf-prov__hash { font-size: var(--text-xs); word-break: break-all; }
.pf-prov__foot {
  margin: var(--space-4) 0 0; font-size: var(--text-sm);
  color: var(--colour-text-muted); max-width: none;
}

@media (max-width: 860px) {
  .pf-band { grid-template-columns: 1fr; gap: var(--space-1); }
  .pf-figure__words { font-size: var(--text-2xl); }
}
@media (max-width: 720px) {
  /* Stacked, the track became a full-width bar under each amount and read as a
     broken progress meter; the count text carries the same information. */
  .pf-band__track { display: none; }
}

/* Year-on-year change on the record page. Direction is carried by the arrow
   glyph and the sign, not by colour alone. */
.pf-delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* Direction is carried by the +/- sign in the text, so no arrow glyph is added:
   the two together rendered as a doubled indicator ("+ +7.3%"). */
.pf-delta--up { color: var(--colour-success); }
.pf-delta--down { color: var(--colour-danger); }
.pf-history--current { background: var(--colour-primary-alpha-10); }
.pf-history--current td:first-child { font-weight: var(--fw-bold); }

/* Methodology popup (client IA v2 moved it out of the navbar). Styled here
   rather than in core.css because it is the only <dialog> on the site so far;
   promote it if a second one appears. */
.finance-modal {
  max-width: 46rem;
  width: calc(100% - var(--space-5));
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--colour-bg);
  color: var(--colour-text);
}
.finance-modal::backdrop { background: hsl(0 0% 0% / 0.45); }
.finance-modal__body { position: relative; padding: var(--space-5); }
.finance-modal__body h2 { margin-top: 0; }
.finance-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: var(--text-lg);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  color: var(--colour-text);
  background: none;
  border: none;
  cursor: pointer;
}
.finance-modal__close:hover { color: var(--colour-primary); }

/* --- Supporting text on this page: history ----------------------------------
   The 2026-08-02 sweep measured five blocks on
   /public-finance/ngcdf/<constituency>/ as narrow ribbons inside full-width
   panels — 682px of lead in a 1678px card (9 lines, 1037px dead), 770px in
   1694px (929px dead), 630px, 702px, 792px.

   Two fixes were tried and withdrawn: CSS columns (removed by owner direction —
   see components.css `.src-cite`; do not re-add), then nothing at all. The
   resolution was to drop reading measures site-wide, so the `max-width` values
   on `.pf-record__lead`, `.pf-compare__lead`, `.pf-bands__note`, `.pf-prov__foot`
   and `.pf-gap dd` above are now `none` and those blocks span their panels.
   See core.css for the decision and its accepted cost. */

/* Quoted report summary (MZ-342). Styled as a quotation because that is what it
   is — the document's own words from a named page, never our summary of it. */
.finance-quote {
  margin: 0 0 1rem;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--colour-accent, var(--colour-border));
  max-width: 74ch;
  line-height: 1.68;
}
.finance-quote p { margin: 0 0 .8rem; }
.finance-quote p:last-child { margin-bottom: 0; }