.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);
  /* Panels hug their own content instead of stretching to the tallest in the
     row. "Budget Watch" holds one sentence and sat beside an eight-item audit
     list, so it rendered as a 380px bordered box that was empty below its first
     line — an absence that read as a broken panel rather than a short one. */
  align-items: start;
}

.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; }

/* ─────────────────────────────────────────────────────────────────────────
   NG-CDF constituency allocations panel (index).

   Was: a 1320px bordered panel holding a 608px table, i.e. ~700px of void to
   the right of every row, with "Browse all 290" marooned in it; ten rows each
   carrying TWO red underlined links to the SAME url; and the one fact that
   stops the amount column being misread — the series is banded, not ranked —
   set as muted fine print above the table.

   Now: the panel's width is spent on a rail that answers the reader's actual
   question ("what did MY constituency get?") and shows the shape of the series,
   while each row is a single click target.
   ───────────────────────────────────────────────────────────────────────── */
.pf-alloc__head { align-items: start; }
.pf-alloc__lead {
  /* No `max-width`: reading measures are OFF site-wide by owner decision
     (core.css, 2026-08-02), and re-adding a cap is a revert of it. The lead is
     bounded structurally instead, by the CTA sharing its flex row. */
  margin: var(--space-2) 0 0;
  color: var(--colour-text-muted);
}
.pf-alloc__lead strong { color: var(--colour-text); font-weight: var(--fw-bold); }

/* A destination, not a sentence: the old bare link sat 700px from the content
   it belonged to and read as body text that happened to be underlined. */
.pf-alloc__cta {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.pf-alloc__cta:hover,
.pf-alloc__cta:focus-visible {
  background: var(--colour-primary);
  color: var(--colour-bg);
}

.pf-alloc__body {
  display: grid;
  /* An explicit cap on the table track, not `1fr`: at `1fr` the seat column
     soaked up all the slack and put ~600px between a name and its own money —
     the exact defect the old 38rem cap existed to prevent, reintroduced one
     level out. */
  grid-template-columns: minmax(0, 50rem) minmax(18rem, 23rem);
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  align-items: start;
}

.pf-alloc__caption {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* Fills its own column rather than being capped at 38rem inside a full-width
   panel — the cap existed to stop three columns stretching over 1286px, which
   the two-column body now handles structurally. */
.pf-alloc-table { width: 100%; max-width: none; }
.pf-alloc-table tbody tr { position: relative; }
.pf-alloc-table tbody tr:nth-child(even) { background: none; }
.pf-alloc-table tbody tr:hover { background: var(--colour-primary-alpha-10); }
.pf-alloc-table tbody tr:last-child td { border-bottom: 0; }
.pf-alloc-table td { vertical-align: middle; }

.pf-alloc-table__seat { line-height: 1.35; }
.pf-alloc-table__name { font-weight: var(--fw-semibold); color: var(--colour-text); }
/* One target for the whole row. The visible link stays the seat name, so the
   accessible name is the seat and not "row 4". */
.pf-alloc-table__link {
  position: relative;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.pf-alloc-table__link::after { content: ""; position: absolute; inset: 0; }
.pf-alloc-table tbody tr:hover .pf-alloc-table__link { text-decoration: underline; }
.pf-alloc-table__link:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }

.finance-table td .pf-alloc-table__county,
.pf-alloc-table__county {
  display: block;
  margin-top: 1px;
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
}
/* Sits ABOVE the row overlay: an unresolved row has no record page, so its
   outbound provenance link must stay clickable. */
.pf-alloc-table__fallback { position: relative; z-index: 1; font-size: var(--text-xs); }

.pf-alloc-table__amount {
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
  white-space: nowrap;
}

/* Band membership as a quiet count, not a bar: a bar here would sit beside a
   money column and be read as more money. */
.pf-alloc-table td .pf-seats-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--colour-bg-subtle);
  border: 1px solid var(--colour-border);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pf-seats-tag--sole {
  border-color: var(--colour-primary-alpha-20);
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary-dark);
}

/* The rail: the reader's own question first, then the shape of the series,
   then provenance. */
.pf-alloc__rail {
  display: grid; gap: var(--space-4);
  /* Sticky because the table beside it can be 40 rows (2629px) against an
     815px rail: without this, the band context that stops those rows being read
     as a ranking scrolls away after the first eight of them. */
  position: sticky;
  top: var(--space-5);
}
.pf-rail-card {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.pf-rail-card--find {
  border-color: var(--colour-primary-alpha-20);
  background: var(--colour-primary-alpha-10);
}
.pf-rail-card--prov { border-style: dashed; }
.pf-rail-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--colour-text);
}
.pf-rail-card__title i { color: var(--colour-primary); margin-right: var(--space-2); }
.pf-rail-card--prov .pf-rail-card__title i { color: var(--colour-success); }
.pf-rail-card__note {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.pf-rail-card__note strong { color: var(--colour-text); }
.pf-rail-card__note--tail { margin-top: var(--space-3); }
.pf-rail-card__links {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.pf-find { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.pf-find input {
  flex: 1 1 auto; min-width: 0; min-height: 2.5rem;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: var(--colour-bg);
  color: var(--colour-text);
  font-size: var(--text-sm);
}
.pf-find input:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 1px; }
.pf-find button {
  flex: none; min-height: 2.5rem;
  border: 0; border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: var(--colour-primary);
  color: var(--colour-bg);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.pf-find button:hover { background: var(--colour-primary-dark); }

/* The record page's band rows, narrowed for the rail: amount over its own bar
   rather than three columns in 21rem. */
.pf-band--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) 0;
}
.pf-band--compact .pf-band__amount { font-size: var(--text-xs); grid-area: 1 / 1; }
.pf-band--compact .pf-band__count { grid-area: 1 / 2; text-align: right; }
.pf-band--compact .pf-band__track { grid-area: 2 / 1 / 3 / -1; height: 6px; }

@media (max-width: 1080px) {
  .pf-alloc__body { grid-template-columns: minmax(0, 1fr); }
  /* Side by side once the rail is no longer a column, so the two cards do not
     become a 600px stack of fine print between the table and the next panel. */
  /* Two equal cards side by side. The find card used to span both tracks,
     which was right when a third card sat beside it; with the provenance strip
     moved to the panel foot it left the whole second column empty. */
  .pf-alloc__rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 720px) {
  .pf-alloc__head { flex-direction: column; align-items: stretch; }
  .pf-alloc__cta { justify-content: center; }
  .pf-alloc__rail { grid-template-columns: minmax(0, 1fr); }
  .pf-find { flex-direction: column; }
  /* The rail chart is the one place the track carries information the text does
     not, so it survives the stack that hides it on the record page. */
  .pf-band--compact .pf-band__track { display: block; }
}

/* Provenance as a strip across the panel foot, not a third rail card: in the
   rail it made that column 440px taller than the table beside it, and it speaks
   for the whole panel rather than for the chart it sat under. */
.pf-alloc__prov {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}
.pf-alloc__prov-title {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--colour-text);
  white-space: nowrap;
}
.pf-alloc__prov-title i { color: var(--colour-success); margin-right: var(--space-2); }
.pf-alloc__prov-note {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.pf-alloc__prov-note + .pf-alloc__prov-note { grid-area: 2 / 2; margin-top: var(--space-2); }
.pf-alloc__prov-note strong { color: var(--colour-text); }
.pf-alloc__prov-links {
  grid-area: 1 / 3;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .pf-alloc__prov { grid-template-columns: minmax(0, 1fr); }
  .pf-alloc__prov-note + .pf-alloc__prov-note,
  .pf-alloc__prov-links { grid-area: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared fixes across the remaining public-finance surfaces.
   ───────────────────────────────────────────────────────────────────────── */

/* Money must not break after the currency word. Measured on the institution
   page: "KSh 8,689,032,880" wrapped to two lines in a tile and in three table
   columns, so a column of figures no longer lined up digit-for-digit. */
.finance-table td.num,
.stat__num { white-space: nowrap; }
/* …except the per-figure caveat, which is a sentence and may wrap. */
.finance-table td.num small { white-space: normal; }

/* Six columns of dates, printed titles and three money figures: this one
   genuinely needs the panel's width, and capping it at 38rem left ~600px of the
   panel empty. */
.finance-table--wide { width: 100%; max-width: none; }
.finance-table--wide td { vertical-align: middle; }
.finance-table--wide tbody tr:hover { background: var(--colour-primary-alpha-10); }
.finance-table--wide tbody tr:last-child td { border-bottom: 0; }

/* Retained-document metadata: five label/value pairs, each of which used a full
   1300px row to say "11.8 MB". Same treatment as the record page's provenance
   grid, which is the pattern this app already got right. */
.finance-list--meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
}
.finance-list--meta li {
  max-width: none;
  padding-bottom: 0;
  border-bottom: 0;
}
.finance-list--meta li span {
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--fw-semibold);
}
.finance-list--meta code { font-size: var(--text-xs); word-break: break-all; }
/* The digest is 64 characters — it needs more than one 13rem track. */
.finance-list--meta .finance-list__wide { grid-column: 1 / -1; }

/* "What this page does not tell you": three short answers stacked one per row
   with their bodies at --text-xs (12px), which is fine-print size for what is
   actually the page's most-read copy. Three across, at reading size. */
.finance-list--notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-4);
}
.finance-list--notes li {
  max-width: none;
  padding: var(--space-4);
  border-bottom: 0;
  border-left: 3px solid var(--colour-border-strong);
  background: var(--colour-bg-subtle);
  border-radius: var(--radius-sm);
}
.finance-list--notes li strong { color: var(--colour-text); }
.finance-list--notes li span {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* Year-on-year table: the relative-size track is normally a grid child, so in a
   table cell it collapsed to its content and rendered a ~40px stub for every
   year. Give the cell the width the comparison needs. */
.pf-history__bar { width: 40%; }
.pf-history__bar .pf-band__track { display: block; width: 100%; }

/* Methodology: three topics in one undifferentiated block of prose. Subheads in
   the shared body (also used by the index dialog) plus a source-authority grid
   on the standalone page. No `max-width` on the prose — reading measures are off
   by owner decision (core.css). */
.pf-method__sub {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--colour-text);
}
.pf-method__sub:first-of-type { margin-top: var(--space-4); }

.pf-authority {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.pf-authority li {
  max-width: none;
  padding: var(--space-4);
  border-bottom: 0;
  border-top: 3px solid var(--colour-primary);
  border-radius: var(--radius-sm);
  background: var(--colour-bg-subtle);
}
.pf-authority strong { display: block; color: var(--colour-text); }
.pf-authority .pf-authority__claim {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--colour-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pf-authority li span:last-child { font-size: var(--text-sm); }