/* OPAX — "The record, in daylight." One CSS file, no build step.
   Light-only by design. Type: Merriweather (the record's voice — the
   USWDS-paired government serif) + Public Sans (the machinery — the NSW
   Government's official typeface). Structure: institutional navy bands
   edged in Hansard bronze; bronze itself stays reserved for the record. */

:root {
  color-scheme: light;

  /* ground */
  --paper:        #FAF9F6;
  --paper-raised: #FFFFFF;
  --paper-sunken: #F1EFE8;

  /* ink */
  --ink:       #23271F;
  --ink-soft:  #575C52;
  --ink-faint: #6F7468;

  /* rules */
  --line:        #DFDCD2;
  --line-strong: #8D897B;

  /* accent — Hansard bronze: only where something touches the record */
  --bronze-ink:  #8A5A12;
  --bronze:      #A0761B;
  --bronze-wash: rgba(160, 118, 27, 0.16);
  --bronze-rule: rgba(160, 118, 27, 0.55);  /* link underlines: present, not heavy */

  --danger: #A4262C;
  --chart-mark: var(--bronze);

  /* institutional structure — masthead/footer bands, primary actions */
  --navy:         #142A43;
  --navy-raised:  #1D3A5C;
  --on-navy:      #FFFFFF;
  --on-navy-soft: #B7C6D9;
  --bronze-bright:#D9A84A;  /* bronze legible on navy */

  /* party identity — dots + text labels only, never chart series */
  --party-alp: #B02E33;
  --party-lib: #1D4F91;
  --party-nat: #8F6E00;
  --party-lnp: #4A90D9;  /* matches the money map's LNP blue */
  --party-grn: #2E7D32;
  --party-onp: #BF5B15;
  --party-ind: #3E5B77;
  --party-oth: #7C6690;

  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- vertical rhythm --------------------------------------------------
     One scale, ratio ~1.6 — the same step the type takes. Every vertical gap
     on an entry, index or report page is drawn from it; nothing on those
     pages sets a number of its own. Four sizes of silence carry the whole
     hierarchy, each roughly double the one under it:
       --space-1/2    5px, a line bound to the line above it (a date under
                      a title, a note under its figure) — one unit, read once
       --row-gap      10px either side of a hairline, so 21px between rows
                      and the rule itself carries the separation
       --sub-gap      42px, a second list inside one section — 2x a row
       --section-gap  67px above a section kicker — 3x a row, which is what
                      lets the eye find the boundary before it reads a word */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.4rem;   /*  6px */
  --space-3: 0.65rem;  /* 10px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.6rem;   /* 26px */
  --space-6: 2.6rem;   /* 42px */
  --space-7: 4.2rem;   /* 67px */

  --row-gap:     var(--space-3);
  --sub-gap:     var(--space-6);
  --section-gap: var(--space-7);

  /* The masthead stays put while the page scrolls; anything scrolled into
     view has to clear it. These are per-breakpoint estimates (the band's
     padding + mark + bronze rule); app.js writes the measured height over
     them once the band has rendered. */
  --header-h: 107px;
}
@media (max-width: 1099px) { :root { --header-h: 93px; } }
@media (max-width: 860px)  { :root { --header-h: 61px; } }

/* On a phone the three structural steps each drop one notch, so the column a
   third as wide keeps the same relationships: a section still opens on about
   three rows' worth of silence, a sub-heading on two. The small steps are
   bound to the type and hold. */
@media (max-width: 700px) {
  :root { --space-3: 0.5rem; --space-6: 2rem; --space-7: 3.25rem; }
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Crawler text the Worker injects into <main> for /subject/... and /reports/...
   paths (see docs/SEO.md). app.js flags the document as it boots and the app's
   own render takes over; without JavaScript the block stays readable. */
.spa-ready #prerender { display: none; }
#prerender { padding-bottom: 1.5rem; }
html { scroll-padding-top: calc(var(--header-h) + 0.5rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.5;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4.5rem); width: 100%; }

:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
a.visually-hidden:focus-visible {
  position: fixed; top: 0.5rem; left: 0.5rem; width: auto; height: auto;
  clip-path: none; background: var(--paper-raised); color: var(--ink);
  padding: 0.5rem 0.9rem; z-index: 60; border: 1px solid var(--line-strong); /* over the sticky band */
}

/* ---- signature rules ---------------------------------------------------- */

.ledger-rule {
  border: 0; height: 4px; margin: 0; width: 100%;
  background: linear-gradient(var(--bronze) 0 2px, transparent 2px 3px, var(--line-strong) 3px 4px);
}
.record-rule {
  padding-left: 1.5rem;
  background:
    linear-gradient(to right, var(--bronze) 0 2px, transparent 2px 5px,
                    var(--line) 5px 6px, transparent 6px)
    no-repeat left / 6px 100%;
}

/* ---- type roles --------------------------------------------------------- */

.kicker, .card-kicker, .chart figcaption, .cite-panel h3 {
  font: 700 0.6875rem/1.3 var(--sans); color: var(--bronze-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.kicker { margin: var(--space-5) 0 var(--space-2); }
/* A trailing note belongs to the section above it, never to the one below:
   it sits a row's breath under the last row and takes no bottom margin. */
.fineprint { color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.5; max-width: 68ch; margin: var(--space-3) 0 0; }
/* The money map's source note sits under a full-width map, so it runs the
   same width and puts its two ways out on a row of their own. */
#money-fineprint { max-width: none; }
.money-note-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.money-note-actions .action-btn { display: inline-flex; }

a, button.link {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--bronze-rule); text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { text-decoration-color: var(--bronze-ink); }
a:hover { color: var(--bronze-ink); }
/* Link-styled buttons hold their ink on hover — the affordance is the
   underline firming up, not a colour swap. */
button.link:hover { text-decoration-thickness: 2.5px; }
button.link {
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font: inherit; text-align: left;
}

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

header {
  /* Pinned to the top of the viewport as the page scrolls (a direct child of
     the body, so sticky needs no body offset and nothing jumps on load). The
     megamenus and the quick-search list are positioned inside it, so they
     ride along and stay over the page. */
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 3px solid var(--bronze);
  padding: 0.9rem 0 0;
}
/* Focus rings sit on navy here; ledger bronze vanishes against it.
   (The drawer is paper, so it keeps the default bronze-ink ring.) */
header :focus-visible { outline-color: var(--bronze-bright); }
.masthead { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.75rem); }
.masthead-id { flex: 0 1 auto; max-width: 300px; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; line-height: 0; text-decoration: none; }
/* The mark: the continent in bronze, ringed by seven stars — federation's
   number — in the masthead's soft white. */
/* Explicit box at the mark's own 176:160 ratio — `width: auto` lets some
   engines fall back to a default that squashes the continent. */
.logo-mark { height: 78px; width: 86px; }
.logo-mark .logo-land { fill: var(--bronze-bright); }
.logo-mark .logo-star { fill: var(--on-navy-soft); }
.logo-mark .logo-thread {
  stroke: var(--on-navy-soft); stroke-width: 0.9; stroke-linecap: round;
  fill: none; opacity: 0; pointer-events: none;
}
.logo:hover .logo-star { fill: var(--on-navy); }
/* Quick search: one input, suggestions across speakers/topics/donors/reports. */
/* The masthead stretches so the nav can sit on its bottom edge; these two
   must not stretch with it, or the search icon loses the input's centre. */
.mast-search { position: relative; flex: 0 1 300px; margin-left: auto; align-self: center; }
.nav-toggle { align-self: center; }
.mast-search input[type="text"] {
  width: 100%; min-height: 40px; padding: 0 0.9rem 0 2.3rem;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; color: var(--on-navy); font: 400 0.875rem/1.4 var(--sans);
}
.mast-search input[type="text"]::placeholder { color: var(--on-navy-soft); }
.mast-search input[type="text"]:focus { background: var(--paper-raised); color: var(--ink); }
.mast-search-icon {
  position: absolute; left: 0.85rem; top: 50%; width: 17px; height: 17px;
  transform: translateY(-50%); color: var(--on-navy-soft); pointer-events: none;
}
.mast-search:focus-within .mast-search-icon { color: var(--ink-faint); }
.mast-sugg {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(380px, 90vw); background: var(--paper); border: 1px solid var(--line); border-top: none;
  box-shadow: 0 18px 40px rgba(21, 27, 20, 0.22);
  padding: 0.35rem;
}
.ms-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.5rem 0.65rem; border: none; background: none; cursor: pointer;
  font: 400 0.9375rem/1.35 var(--sans); color: var(--ink); text-align: left; border-radius: 4px;
}
.ms-row:hover, .ms-row.ms-active { background: var(--paper-sunken); }
.ms-type {
  flex: 0 0 auto; font: 700 0.625rem/1.3 var(--sans); color: var(--bronze-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---- primary nav (in the band) ------------------------------------------ */

.masthead { display: flex; align-items: stretch; gap: clamp(1rem, 2.5vw, 2.75rem); }
/* The header's padding is top only, so the nav can sit on its bottom edge.
   That leaves the mark hanging low: it centres in the padding box, which is
   inset at the top and flush with the bronze rule at the bottom. Lifting it by
   half the difference puts it on the header's true centre without moving the
   nav or changing the header's height. */
.masthead-id {
  display: flex; align-items: center;
  position: relative; top: calc((3px - 0.9rem) / 2);
}
/* The nav column is two rows: the site's full name over the links, with the
   links sitting on the header's bottom edge. */
.masthead-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55rem;
}
.masthead-name {
  margin: 0; padding-left: 0.15rem; white-space: nowrap;
  font: 600 0.9375rem/1.2 var(--sans); letter-spacing: 0.02em;
  color: var(--on-navy-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .masthead-name { animation: nameRise 620ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
  @keyframes nameRise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
/* The full name sits over the nav like a nameplate over a section bar;
   the acronym's four letters take the bronze. It lives in the nav column,
   so it compacts away with the nav (the drawer carries the name instead). */
.nav-list {
  display: flex; align-items: center; gap: clamp(0.3rem, 1.6vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.nav-item { display: flex; }
.nav-link { padding-bottom: 0.55rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; cursor: pointer; white-space: nowrap;
  font: 600 0.9375rem/1 var(--sans); color: var(--on-navy-soft);
  text-decoration: none; padding: 0.4rem 0.15rem; min-height: 44px;
  border-bottom: 3px solid transparent;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--on-navy); }
.nav-link.active { color: var(--on-navy); border-bottom-color: var(--bronze-bright); }
.nav-caret { width: 10px; height: 6px; flex: 0 0 auto; opacity: 0.7; }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-caret { transition: transform 150ms ease; }
}

/* Megamenu panels: paper dropped below the band — the infobox idiom
   (hairline border, 3px bronze top edge, kicker headings). */
.megamenu {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 30;
  width: 340px; max-width: calc(100vw - 1.5rem);
  background: var(--paper); border: 1px solid var(--line); border-top: none;
  box-shadow: 0 18px 40px rgba(21, 27, 20, 0.22);
  padding: 1.1rem 1.25rem 1.15rem;
}
.megamenu-wide { width: min(720px, calc(100vw - 1.5rem)); }
.megamenu .kicker { margin: 0 0 0.5rem; }
.mm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mm-all { font: 600 0.875rem/1.3 var(--sans); white-space: nowrap; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.4rem; }
/* Two kickered columns side by side (Explore: play | encyclopedia). */
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.mm-cols > div { min-width: 0; }
.mm-link {
  display: block; padding: 0.55rem 0.5rem; margin: 0 -0.5rem;
  text-decoration: none; border-radius: 4px;
}
.mm-link:hover, .mm-link:focus-visible { background: var(--paper-sunken); }
.mm-title { display: block; font: 600 1.0625rem/1.3 var(--serif); color: var(--ink); }
.mm-link:hover .mm-title { color: var(--bronze-ink); }
.mm-blurb { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-soft); }
/* Report pictograms: bronze hairline glyph in its own column, title and blurb
   hanging beside it. Links without a glyph (Explore, unknown slugs) keep the
   plain block layout. */
.mm-link:has(.mm-glyph) { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: start; }
.mm-glyph { grid-row: 1 / span 2; width: 30px; height: 30px; margin-top: 3px; color: var(--bronze-ink); }
.mm-note { margin: 0.7rem 0 0; font-size: 0.8125rem; color: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) {
  .megamenu { animation: menu-in 160ms ease; }
  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
  }
}

/* Hamburger: hidden until the band compacts (≤860px). */
.nav-toggle {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--on-navy-soft);
}
.nav-toggle:hover { color: var(--on-navy); }
.nav-toggle svg { width: 24px; height: 24px; }

/* ---- mobile nav drawer --------------------------------------------------- */

.nav-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(340px, 88vw); max-width: none; height: 100dvh; max-height: none;
  border: none; border-left: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink);
  box-shadow: -18px 0 40px rgba(21, 27, 20, 0.28);
  padding: 0.6rem 1.25rem 2rem; overflow-y: auto;
}
.nav-drawer::backdrop { background: rgba(20, 42, 67, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .nav-drawer[open] { animation: drawer-in 200ms ease; }
  @keyframes drawer-in {
    from { transform: translateX(100%); }
  }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.drawer-head .kicker { margin: 0; }
.drawer-close {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-size: 1.1rem; min-width: 44px; min-height: 44px; border-radius: 4px; margin-right: -0.6rem;
}
.drawer-close:hover { color: var(--ink); background: var(--paper-sunken); }
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-link, .drawer-sub {
  display: flex; align-items: center; min-height: 44px; padding: 0.15rem 0 0.15rem 0.75rem;
  text-decoration: none; border-left: 3px solid transparent;
}
.drawer-link { font: 600 1.0625rem/1.3 var(--sans); color: var(--ink); }
.drawer-sub { font: 400 0.9375rem/1.3 var(--sans); color: var(--ink-soft); min-height: 40px; }
.drawer-link:hover, .drawer-sub:hover { color: var(--bronze-ink); }
.drawer-link.active, .drawer-sub.active { border-left-color: var(--bronze); color: var(--ink); }
.drawer-kicker { margin: 1.1rem 0 0.2rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }

/* ---- breadcrumb ----------------------------------------------------------- */
/* One slim strip of paper hung directly under the band, on every page but the
   home page: where you are, in the machinery face, with hairline bronze
   chevrons between the steps. One line always; on a narrow screen the current
   page shortens to an ellipsis before its ancestors do, and past that the
   strip scrolls sideways. */
.crumbs {
  background: var(--paper); border-bottom: 1px solid var(--line);
  font: 400 0.8125rem/1.3 var(--sans);
}
.crumbs-list {
  display: flex; align-items: center; gap: 0.45rem; min-height: 40px;
  list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0;
  white-space: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.crumbs-list::-webkit-scrollbar { display: none; }
.crumbs-list li { display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; }
.crumbs-list li.crumb-here { flex: 0 1 auto; min-width: 0; }
.crumb-sep { width: 6px; height: 10px; flex: 0 0 auto; color: var(--bronze); }
.crumb-label { display: block; padding: 0.55rem 0; }
.crumbs-list a.crumb-label { color: var(--ink-soft); text-decoration: none; }
.crumbs-list a.crumb-label:hover { color: var(--bronze-ink); text-decoration: underline; text-decoration-color: var(--bronze-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.crumbs-list a.crumb-label:focus-visible { outline-offset: -2px; }
.crumb-here .crumb-label { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* ---- hero --------------------------------------------------------------- */

main { flex: 1; padding: 2.75rem 0 3rem; }
@media (max-width: 860px) {
  main { padding-top: 0; }
  /* Inner pages: air between the breadcrumb strip and the page's own kicker
     (the home page's headline carries its own margin). */
  main.compact { padding-top: 1.1rem; }
  /* Narrow screens: the query takes its own line; the submit and the filter
     icon share the next one instead of the icon orphaning onto a third. */
  .query-line > input, .ask-row > input { flex-basis: 100%; }
  .query-line button.primary, .ask-row button.primary { flex: 1 1 auto; }
}
main:focus { outline: none; }

.hero-intro h1 {
  margin: 1.6rem 0 2rem;
  font: 400 clamp(1.9rem, 4.5vw, 2.75rem)/1.25 var(--serif);
  letter-spacing: 0.005em;
}
main.compact .hero-intro { display: none; }
/* Once an ask is under way the masthead line has done its work: it fades and
   folds, and the question rises into its place. */
.hero-intro { overflow: hidden; }
.hero-intro.hero-folded { opacity: 0; max-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-intro { transition: opacity 320ms ease, max-height 520ms cubic-bezier(0.22, 0.7, 0.3, 1); max-height: 14rem; }
}

/* ---- forms -------------------------------------------------------------- */

input[type="text"], input[type="number"], select {
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 4px;
  font: 400 1rem/1.3 var(--sans); padding: 0.6rem 0.8rem;
}
select { padding-right: 1.6rem; }
::placeholder { color: var(--ink-faint); opacity: 1; }

button.primary {
  background: var(--navy); color: var(--on-navy); border: none; cursor: pointer;
  font: 600 1rem/1 var(--sans); border-radius: 4px; padding: 0 1.5rem; min-height: 56px;
}
button.primary:hover { background: var(--navy-raised); }
button.primary:disabled { opacity: 0.55; cursor: wait; }
/* While asking, keep the button legible so the spinner reads. */
button.primary.btn-loading:disabled { opacity: 0.9; }
button.secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
  cursor: pointer; font: 600 0.9375rem/1 var(--sans); border-radius: 4px;
  padding: 0 1.1rem; min-height: 48px;
}
button.secondary:hover { border-color: var(--ink); }
button.secondary:disabled { opacity: 0.55; cursor: wait; }

.ask-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ask-row > input { flex: 1 1 320px; min-height: 56px; font-size: 1.0625rem; }

.ask-options-wrap { position: relative; display: inline-block; }
/* The ask row and the search row carry the same control, so it is one rule.
   Held apart they drifted: search's was 48 square against a 56 tall submit. */
#ask-options-btn, #search-options-btn {
  min-height: 56px; width: 56px; justify-content: center; padding: 0;
}
#ask-options-btn .btn-icon, #search-options-btn .btn-icon { width: 22px; height: 22px; }
#ask-options-btn[aria-expanded="true"], #search-options-btn[aria-expanded="true"] { border-color: var(--ink); }
.ask-options-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: auto;
  min-width: min(340px, calc(100vw - 2.5rem));
  background: var(--paper-raised); border: 1px solid var(--line);
  border-top: 3px solid var(--bronze); border-radius: 4px;
  padding: 1rem 1.2rem; box-shadow: 0 18px 36px rgba(30, 26, 18, 0.14);
}
.ask-pop-rail { flex-direction: column; align-items: stretch; }
.ask-pop-rail .filter-item { width: 100%; }
.filter-item-wide label b { color: var(--bronze-ink); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.ask-pop-rail input[type="range"] { width: 100%; accent-color: var(--bronze-ink); margin-top: 0.35rem; }

.btn-spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--on-navy);
  margin-right: 0.55rem; vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-spinner { animation: btnspin 800ms linear infinite; }
  @keyframes btnspin { to { transform: rotate(360deg); } }
}

.ask-scope {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem;
  font-size: 0.8125rem; color: var(--ink-faint); cursor: pointer;
}
.ask-scope input { accent-color: var(--bronze-ink); width: 15px; height: 15px; }

.chip-row {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
/* Snap-aligned like the chips: without it the initial snap pass settles on
   the first chip and the label sits scrolled out of view under the fade. */
.chip-label { color: var(--ink-faint); font-size: 0.8125rem; flex: 0 0 auto; scroll-snap-align: start; }
.chip {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer;
  background: var(--paper-sunken); border: 1px solid var(--line); border-radius: 999px;
  font: 600 0.875rem/1.2 var(--sans); color: var(--ink-soft);
  padding: 0.55rem 1rem; min-height: 40px;
}
.chip:hover { background: var(--bronze-wash); color: var(--ink); }
/* Example searches on an empty search page: they rise in one after another. */
.search-chips { margin-top: 1.1rem; }
.search-chips:empty { display: none; }
@media (max-width: 700px) {
  /* Phones see every suggestion: stacked, wrapping, full width. */
  .chip-row { flex-direction: column; align-items: stretch; overflow: visible; }
  .chip-row .chip {
    white-space: normal; text-align: left; line-height: 1.4;
    width: 100%; height: auto; border-radius: 10px; padding: 0.65rem 1rem;
  }
  .chip-label { display: none; }
}

/* Edge fades on the horizontal chip row: content melts into the margin on
   whichever side holds more, driven by the row's own scroll position — no
   fade at rest on the left, none at the end on the right, none at all when
   the row fits. Browsers without scroll-driven animations keep the plain
   hard edge. */
@property --hfade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --hfade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll(self inline)) {
  .chip-row {
    mask-image: linear-gradient(to right,
      transparent, #000 var(--hfade-l),
      #000 calc(100% - var(--hfade-r)), transparent);
    animation: hfade linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes hfade {
    0%   { --hfade-l: 0px;  --hfade-r: 32px; }
    12%  { --hfade-l: 32px; --hfade-r: 32px; }
    88%  { --hfade-l: 32px; --hfade-r: 32px; }
    100% { --hfade-l: 32px; --hfade-r: 0px; }
  }
}

/* Suggested questions as cards — the report-card idiom, home-page sized. */
#ask-chips { margin-top: 1.6rem; }
.suggest-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem; margin-top: 0.2rem; max-width: 80rem;
}
.suggest-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  padding: 1.6rem 1.7rem 1.7rem; text-align: left; cursor: pointer;
  color: var(--ink); font: inherit;
}
.suggest-card:hover, .suggest-card:focus-visible { border-color: var(--line-strong); }
.suggest-card:hover .suggest-title, .suggest-card:focus-visible .suggest-title { color: var(--bronze-ink); }
.suggest-title { font: 600 1.375rem/1.35 var(--serif); margin-bottom: 0; }

.corpus-meter { margin-top: 1rem; }
.corpus-meter p { margin: 0 0 0.3rem; font-size: 0.8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.meter-track { max-width: 320px; height: 4px; border-radius: 2px; background: var(--paper-sunken); overflow: hidden; }
.meter-track i { display: block; height: 100%; width: 0; background: var(--bronze); border-radius: 2px; }

.colophon {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; margin: 1rem 0 0;
  font-size: 0.8125rem; color: var(--ink-faint);
}
.colophon b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }

#ask-result { scroll-margin-top: 1.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .ask-reveal { animation: askReveal 620ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
  @keyframes askReveal {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  /* Streamed answers: each block that lands after the first paint eases in. */
  .stream-in { animation: streamIn 380ms ease-out both; }
  @keyframes streamIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---- status ------------------------------------------------------------- */

.status { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.status:empty { display: none; }
.status.error { color: var(--danger); }

/* ---- answer + sources --------------------------------------------------- */

/* Answers render as parsed blocks (see renderAnswer), not pre-wrapped text. */
.answer {
  font: 400 1.0625rem/1.78 var(--serif); color: var(--ink);
  max-width: 72ch; margin: 0;
}
.answer:focus { outline: none; }
.answer > * { margin: 0 0 1.3rem; }
.answer > *:last-child { margin-bottom: 0; }
.answer h3 { font: 600 1.1875rem/1.35 var(--serif); margin-top: 1.8rem; }
.answer h4 { font: 600 1rem/1.35 var(--serif); margin-top: 1.1rem; }
/* Bulleted answers read as record prose: a dash sits inline and wrapped lines
   return flush to the text column — no indented block hanging off a marker. */
.answer ul { padding-left: 0; list-style: none; }
.answer ol { padding-left: 1.35rem; }
.answer li { margin: 0 0 1rem; padding-left: 0; }
.answer ol > li { padding-left: 0.35rem; }
.answer li:last-child { margin-bottom: 0; }
.answer ul > li::before { content: "\2014\2002"; color: var(--ink-faint); }
.answer li > ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.answer li > ul > li::before { content: "\2013\2002"; }
.answer li::marker { color: var(--ink-faint); }
.answer blockquote {
  margin-left: 0; padding-left: 14px; font-style: italic; color: var(--ink-soft);
  background: linear-gradient(to right, var(--bronze) 0 2px, transparent 2px)
    no-repeat left / 2px 100%;
}
.answer pre {
  overflow-x: auto; background: var(--paper-sunken); border-radius: 4px;
  padding: 0.7rem 0.9rem; font-size: 0.8125rem; line-height: 1.5;
}
.answer .about-table { font-size: 0.9375rem; }
.answer sup { line-height: 0; }
.answer .cite {
  background: none; border: none; cursor: pointer; padding: 2px 3px;
  font: 700 0.75rem/1 var(--sans); color: var(--bronze-ink);
}
.answer-stamp { color: var(--ink-faint); font-size: 0.75rem; margin: 0.8rem 0 0; }
.action-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin: 0.6rem 0 0; font-size: 0.875rem; }

.source-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.source-list li { margin: 0; padding: var(--row-gap) 0; }
.source-num { font: 700 0.8125rem/1 var(--sans); color: var(--bronze-ink); font-variant-numeric: tabular-nums; margin-right: 0.4rem; }
button.link.source-title { font: 600 1rem/1.35 var(--serif); }
.source-title, button.link.source-title, a.source-title { text-decoration: none; }
.source-title:hover, button.link.source-title:hover, a.source-title:hover { color: var(--bronze-ink); }
/* Document titles in list rows: some ingested titles run to a paragraph
   (every bill in a cognate debate), so a row shows three lines at most. The
   full title is still the link's text and waits on the document page. */
a.doc-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.source-meta, .result-meta { display: block; color: var(--ink-faint); font-size: 0.8125rem; margin-top: var(--space-1); }
.flash { background: var(--bronze-wash); }
@media (prefers-reduced-motion: no-preference) {
  .source-list li { transition: background 600ms ease; }
}
details summary { cursor: pointer; color: var(--ink-soft); font-size: 0.9375rem; padding: 0.4rem 0; }

/* ---- chat (keep asking) -------------------------------------------------- */
/* The reader's side is the only filled shape; answers sit on the paper like
   the ask page's, so the record keeps its own register in the conversation. */

.chat-thread { max-width: 46rem; margin-top: 1.2rem; }
.chat-turn-user { display: flex; justify-content: flex-end; margin: 1.6rem 0 1rem; }
.chat-turn-user p {
  margin: 0; max-width: 32rem;
  background: var(--paper-sunken); border: 1px solid var(--line);
  border-radius: 10px 10px 3px 10px; padding: 0.65rem 1rem;
  font-size: 1rem; line-height: 1.5;
}
.chat-turn-answer { margin: 0 0 0.6rem; }
.chat-turn-answer .answer { font-size: 1.0625rem; }
.result-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.source-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
/* Numbered source rows: the number keeps its own column so the title and the
   speaker line beneath it share a left edge. */
.source-list li:has(> .source-num) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45rem; align-items: baseline; }
.source-list li:has(> .source-num) > .source-num { margin-right: 0; }
.source-list li:has(> .source-num) > .source-meta { grid-column: 2; }
.source-meta .meta-portrait img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.source-meta .meta-portrait:empty { display: none; }
.source-meta a, .source-meta a.meta-party { text-decoration: none; color: inherit; }
.source-meta a:hover { color: var(--bronze-ink); }
.result-meta .meta-portrait img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.result-meta .meta-portrait:empty { display: none; }
.result-meta a, .result-meta a.meta-party { text-decoration: none; color: inherit; }
.result-meta a:hover { color: var(--bronze-ink); }
mark.hit { background: var(--bronze-wash); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.rail-wombat .wb-label:empty { display: none; }
.rail-wombat .wb-label { font-size: 0.8125rem; color: var(--ink-faint); text-align: center; }
.rail-wombat { padding: 0.4rem 0 0.8rem; }
/* Page loaders under a subject title (topic, topics index): left-set, modest width. */
.subject-loader { display: block; max-width: 22rem; margin: 0.15rem 0 0; }
.subject-loader .wb-label { text-align: left; font-size: 0.9375rem; color: var(--ink-soft); }
.subject-loader:empty { display: none; }
#search-wombat { padding: 1.2rem 0 0.4rem; }
/* The ask-page loader gets clear air: the form above, the money figures (or
   the answer) below. The panel's own top margin supplies the gap beneath. */
#ask-wombat { padding: 2.5rem 0 0.5rem; }
#ask-wombat .wb-wrap { margin: 0 auto; }

/* ---- ask: the money panel ------------------------------------------------ */
/* Structured figures for a money question, drawn from local data while the
   record is still being read. renderMoneyPanel numbers the blocks (--i) so
   they rise one after another; reduced-motion readers get the finished panel. */
#ask-money { margin-top: 2rem; }
#ask-money > .kicker { margin-top: 0; }
/* The money answer is a data spread, not prose: it runs the full column and
   the charts stretch with it, two abreast where there is room. */
#ask-money .tiles { margin: 1.5rem 0 0.4rem; }
#ask-money .chart { margin-top: 1.6rem; max-width: none; }
@media (min-width: 1000px) {
  #ask-money .money-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
  #ask-money .money-charts .chart { margin-top: 0; }
}
#ask-money > .fineprint { margin: 1.5rem 0 0; }
/* With the answer on the page, the figures open under their own hairline. */
#ask-result:not([hidden]) ~ #ask-money { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .rise-in { animation: riseIn 460ms cubic-bezier(0.22, 0.7, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
  @keyframes riseIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}
.chat-sources { margin: 0.2rem 0 0; }
.chat-sources > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 0.5rem; min-height: 44px;
  font: 700 0.6875rem/1.3 var(--sans); color: var(--bronze-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.chat-sources > summary::-webkit-details-marker { display: none; }
.chat-sources > summary::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg); margin-top: -2px;
}
.chat-sources[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .chat-sources > summary::before { transition: transform 150ms ease; }
}
.chat-sources .source-list li { padding: 0.55rem 0; }
.chat-next { margin: 1.4rem 0 0.4rem; }
.chat-next .kicker { margin: 0 0 0.6rem; }
/* Follow-ups stack as full-width cards (the suggest-card idiom): long
   questions wrap instead of overflowing, and each reads as a way on. */
.chat-next-btns { display: flex; flex-direction: column; gap: 0.5rem; max-width: 34rem; }
.chat-next-btn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.75rem 1rem; cursor: pointer; text-align: left;
  font: 600 0.9375rem/1.4 var(--sans); color: var(--ink-soft);
}
.chat-next-btn:hover, .chat-next-btn:focus-visible { border-color: var(--line-strong); color: var(--ink); }
.chat-next-btn .next-arrow { flex: 0 0 auto; color: var(--ink-faint); }
.chat-next-btn:hover .next-arrow { color: var(--bronze-ink); }
.chat-error { color: var(--ink-soft); font-size: 0.9375rem; margin: 0.6rem 0; }
.chat-hint { color: var(--ink-faint); font-size: 0.9375rem; margin: 2rem 0 0.5rem; }
.chat-composer {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 0.6rem; max-width: 46rem;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 0.8rem 0 1rem; margin-top: 0.8rem;
}
.chat-composer input { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.chat-composer button { min-height: 48px; }

/* ---- scroll quote rail --------------------------------------------------- */
/* The passage behind the answer, riding the right margin on wide screens.
   Bronze record-rule bar: these are quotes from the record itself. */

/* Anchored beside the answer column - the script measures the column's true
   right edge and sets `left`, so the quote sits in the reading eye-line at
   any zoom or width instead of stranded at the viewport edge. */
.quote-rail { position: fixed; top: 30vh; left: 0; width: 300px; z-index: 4; }
.quote-card {
  display: block; padding: 0.15rem 0 0.15rem 14px;
  text-decoration: none; opacity: 0; transform: translateY(10px);
}
.quote-card.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Out is quicker than in: the old quote clears, the new one settles. */
  .quote-card { transition: opacity 240ms ease-in, transform 240ms ease-in; }
  .quote-card.shown { transition: opacity 520ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 520ms cubic-bezier(0.2, 0.6, 0.2, 1); }
}
.quote-card .quote-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.55rem; }
.quote-card .quote-portrait { display: inline-flex; width: 28px; height: 28px; flex: 0 0 auto; }
.quote-card .quote-portrait:empty { display: none; }
.quote-card .quote-portrait img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.quote-card .kicker { display: block; margin: 0 0 0.4rem; }
.quote-card blockquote { margin: 0; font: italic 400 0.9375rem/1.55 var(--serif); color: var(--ink-soft); }
.quote-card:hover blockquote { color: var(--ink); }
.quote-card .quote-meta { display: block; margin-top: 0.45rem; font-size: 0.8125rem; color: var(--ink-faint); }
.quote-card .quote-speaker { font-weight: 600; color: var(--ink); }
/* An unwritten card must take no height: the rail's measured footprint is what
   keeps it clear of the sources block, and a bare padding box would lie. */
.quote-card:empty { display: none; }

/* ---- people rail --------------------------------------------------------- */
/* The first thing the rail says is whose words the answer rests on; the quotes
   take the slot on the reader's first scroll. Absolutely placed inside the
   fixed rail so the two states share one top edge and neither adds height. */
.people-card {
  position: absolute; top: 0; left: 0; width: 100%;
  padding: 0.15rem 0 0.15rem 14px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
.people-card.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* The same pacing as the quote card, so the handover reads as one move. */
  .people-card { transition: opacity 240ms ease-in, transform 240ms ease-in; }
  .people-card.shown { transition: opacity 520ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 520ms cubic-bezier(0.2, 0.6, 0.2, 1); }
}
.people-card .kicker { display: block; margin: 0 0 var(--space-3); }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.people-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.people-face, .people-face img, .people-face-mono { width: 28px; height: 28px; border-radius: 50%; }
.people-face { display: block; }
.people-face img { display: block; object-fit: cover;
  border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
/* The initial holds the row's height while the photo map loads, so a portrait
   arriving late swaps in place instead of nudging the list. */
.people-face-mono {
  display: grid; place-items: center;
  background: var(--paper-sunken); color: var(--ink-soft);
  font: 700 0.8125rem/1 var(--serif); box-shadow: inset 0 0 0 1px var(--line);
}
.people-name { display: block; font: 600 0.9375rem/1.3 var(--serif); color: var(--ink); }
.people-sub { display: block; margin-top: 1px; font-size: 0.75rem; color: var(--ink-faint); }
.people-more { margin: var(--space-3) 0 0; font-size: 0.75rem; color: var(--ink-faint); }

/* ---- party chip --------------------------------------------------------- */

.party {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em;
  color: var(--ink-soft); text-transform: uppercase;
}
.party i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--party-oth)); }
.party-alp { --pc: var(--party-alp); }
.party-lib { --pc: var(--party-lib); }
.party-nat { --pc: var(--party-nat); }
.party-lnp { --pc: var(--party-lnp); }
.party-grn { --pc: var(--party-grn); }
.party-onp { --pc: var(--party-onp); }
.party-ind { --pc: var(--party-ind); }
.party-oth { --pc: var(--party-oth); }

/* ---- search / workbench ------------------------------------------------- */


.search-grid { display: grid; gap: 0.8rem; }
.query-line { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.query-line > input { flex: 1 1 280px; min-height: 48px; }
.filter-rail { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; }
.filter-item { display: inline-flex; flex-direction: column; gap: 0.2rem; }
.filter-item label { font-size: 0.75rem; color: var(--ink-faint); }
.filter-item input, .filter-item select { min-height: 44px; font-size: 0.9375rem; }
.filter-item input[type="number"] { width: 6.5em; }

.results-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 1rem; margin-top: 1.2rem; font-size: 0.875rem; color: var(--ink-soft);
}
.results-bar select { min-height: 40px; font-size: 0.875rem; padding: 0.3rem 1.6rem 0.3rem 0.6rem; }
.results-actions { display: inline-flex; align-items: center; gap: 0.5rem 0.7rem; flex-wrap: wrap; }
#results-count { font-variant-numeric: tabular-nums; }

/* Active filters, said out loud under the search box and the ask box. Quieter
   than .chip (these are state, not suggestions), borrowing .map-chip's sunken
   pill. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.9rem; }
/* No filters, no row: the renderer just empties it and the layout closes up. */
.filter-chips:empty { display: none; }
/* Except on ask, where the row keeps its line: a chip can arrive from a shared
   link as the page loads, and the answer below must not jump when it does. */
#ask-filter-chips.is-reserved:empty { display: flex; min-height: 30px; }
.fchip {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 30px;
  background: var(--paper-sunken); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.75rem/1.2 var(--sans); color: var(--ink-soft);
  padding: 0.15rem 0.2rem 0.15rem 0.65rem; max-width: 100%;
}
.fchip-k { color: var(--ink-faint); flex: 0 0 auto; }
.fchip-v { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-x {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; padding: 0; margin-left: 0.1rem;
  background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--ink-faint);
}
.fchip-x svg { width: 11px; height: 11px; }
.fchip-x:hover { background: var(--bronze-wash); color: var(--bronze-ink); }
.fchip-clear {
  background: none; border: none; cursor: pointer; padding: 0.25rem 0.35rem; margin-left: 0.15rem;
  font: 400 0.75rem/1.2 var(--sans); color: var(--ink-faint);
  text-decoration: underline; text-decoration-color: var(--bronze-rule); text-underline-offset: 3px;
}
.fchip-clear:hover { color: var(--bronze-ink); text-decoration-color: var(--bronze-ink); }

.results { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.results li { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.results li:first-child { border-top: none; }
button.link.result-title { font: 600 1.0625rem/1.35 var(--serif); text-decoration: none; }
button.link.result-title:hover { color: var(--bronze-ink); }
.snippet {
  margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: 0.9375rem; max-width: 88ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The relevance meter. It is a button because the reader has to be able to ask
   what it means, by pointer or by keyboard; it opens the same paper card the
   expense categories use. The pseudo-element gives a 4px rule a finger's worth
   of target without taking any more of the line. The fill carries the rounding
   itself, since clipping it to the track would clip that target away. */
.scorebar {
  position: relative; appearance: none; -webkit-appearance: none;
  display: inline-block; vertical-align: middle; width: 48px; height: 4px;
  margin-left: 0.5rem; padding: 0; border: 0;
  border-radius: 2px; background: var(--paper-sunken); cursor: help;
}
.scorebar::before { content: ""; position: absolute; inset: -10px -6px; }
.scorebar > i { display: block; height: 100%; border-radius: inherit; background: var(--bronze); }
.scorebar:hover > i, .scorebar[aria-describedby] > i { background: var(--bronze-ink); }

/* Pager. The band keeps its height on a one-page result (the controls go
   invisible, not away) so the footer does not jump between pages.
   Equal outer tracks put the numbers in the middle of the band rather than
   the middle of the space left over, so "Previous" being the longer word
   does not push them off centre. */
.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem;
  min-height: 44px; margin-top: var(--space-5);
  border-top: 1px solid var(--line); padding-top: var(--space-4);
}
#pager-prev { justify-self: start; }
#pager-next { justify-self: end; }
.pager-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none; border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 0.5rem 0.8rem; cursor: pointer;
  font: 600 0.875rem/1.3 var(--sans); color: var(--ink);
}
.pager-btn .btn-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bronze-ink); }
.pager-btn:hover:not(:disabled) { border-color: var(--ink); }
.pager-btn:disabled {
  cursor: default; color: var(--ink-faint);
  border-color: var(--line); border-style: dashed; background: var(--paper-sunken);
}
.pager-btn:disabled .btn-icon { color: var(--ink-faint); }

/* The numbered pages. app.js always hands over the same number of slots once
   there are that many pages, and an elided run takes a slot the same width as
   a number, so the row keeps its exact width from page to page. */
.pager-pages { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.pager-num, .pager-gap { flex: 0 0 auto; min-width: 2.4rem; }
.pager-num {
  justify-content: center; padding: 0.5rem 0.35rem;
  font-variant-numeric: tabular-nums;
}
/* The page you are on: the same navy the jurisdiction switch uses for the one
   it is showing. Bronze stays with the record itself. */
.pager-num[aria-current="page"] {
  background: var(--navy); border-color: var(--navy); color: var(--on-navy); cursor: default;
}
.pager-num[aria-current="page"]:hover { border-color: var(--navy); }
.pager-gap {
  text-align: center; font: 400 0.875rem/1.3 var(--sans); color: var(--ink-faint);
}
.pager[data-single="1"] .pager-btn { visibility: hidden; }

/* Narrow enough and the two words would push the numbers past the edge, so the
   chevrons carry Previous and Next on their own. The aria-labels are set in
   app.js and do not change, so nothing a screen reader hears depends on width. */
@media (max-width: 640px) {
  .pager { gap: var(--space-2); }
  .pager-btn-label { display: none; }
  /* Narrower, but not shorter: a thumb still has to land on them. */
  .pager-btn { padding: 0.45rem 0.55rem; min-height: 2.375rem; }
  .pager-pages { gap: 2px; }
  .pager-num, .pager-gap { min-width: 2rem; }
  .pager-num { padding: 0.45rem 0.2rem; }
}

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

.money-map-root {
  position: relative;
  height: min(72vh, 720px);
  min-height: 440px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-raised);
}

/* Jurisdiction switch above the map: one hairline segmented control, the
   loaded file in navy. One file per jurisdiction, never summed. */
.money-chrome { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 var(--space-3); }
.money-chrome-label {
  color: var(--ink-faint); font: 600 0.6875rem/1 var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.money-jur { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.money-jur button {
  font: 600 0.8125rem/1.2 var(--sans); color: var(--ink-soft); cursor: pointer;
  background: var(--paper-raised); border: 0; padding: 0.45rem 0.9rem; min-height: 2.125rem;
}
.money-jur button + button { border-left: 1px solid var(--line-strong); }
.money-jur button:hover { background: var(--bronze-wash); color: var(--ink); }
.money-jur button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
.money-jur button:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: -2px; }

.search-results-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2.5rem; align-items: start; margin-top: 1.25rem; }
@media (min-width: 1100px) {
  .search-results-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .search-answer { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.search-answer {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  border-top: 3px solid var(--bronze); padding: 1rem 1.25rem;
}
.search-answer .kicker {
  margin: 0 0 var(--space-3); padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}
.answer-compact { font-size: 0.9375rem; line-height: 1.6; }
.answer-compact > * { margin-bottom: 0.8rem; }
.search-answer .source-list li { padding: 0.45rem 0; }
.search-answer .source-title { font-size: 0.9375rem; }

/* ---- empty record --------------------------------------------------------- */
/* A pair of empty quotation marks in bronze: the record was asked and had
   nothing to say. Serif title, one plain sentence, then the ways out. */
.empty-state {
  margin-top: 1.25rem; padding: 2.25rem 1.5rem 2rem; text-align: center;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
}
.empty-mark {
  display: block; margin-bottom: 0.75rem;
  font: 400 3.25rem/0.8 var(--serif); letter-spacing: 0.12em; color: var(--bronze);
}
.empty-title { margin: 0 0 0.55rem; font: 400 1.375rem/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.empty-lede { margin: 0 auto; max-width: 54ch; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.empty-actions:empty { display: none; }
.empty-actions .action-btn { display: inline-flex; }
.rail-empty { padding: 0.35rem 0 0.25rem; }
.rail-empty-line { margin: 0 0 0.5rem; font: italic 400 1.0625rem/1.4 var(--serif); color: var(--ink-soft); }
.rail-empty .fineprint { margin: 0; }

.chat-next-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat-next-btns .chip {
  white-space: normal; text-align: left; line-height: 1.4;
  max-width: 100%; height: auto; padding: 0.6rem 1rem;
}
@media (max-width: 700px) {
  .chat-next-btns { flex-direction: column; align-items: stretch; }
  .chat-next-btns .chip { width: 100%; border-radius: 10px; }
}

/* ---- reports ------------------------------------------------------------ */

.report-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-top: 0.4rem;
}
.report-card {
  display: grid; align-content: start; /* buttons centre their content; cards top-align like their neighbours */
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  padding: 1.1rem 1.25rem; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
}
.report-card:hover, .report-card:focus-visible { border-color: var(--line-strong); }
.report-card:hover .card-title { text-decoration: underline; text-decoration-color: var(--bronze-ink); text-underline-offset: 3px; }  /* mirrors the link treatment */
.card-kicker { display: block; margin-bottom: 0.4rem; }
.card-glyph { display: block; width: 28px; height: 28px; margin-bottom: 0.55rem; color: var(--bronze-ink); }
.card-title { display: block; font: 600 1.25rem/1.3 var(--serif); margin-bottom: 0.35rem; }
.card-blurb { display: block; color: var(--ink-soft); font-size: 0.875rem; margin-bottom: 0.5rem; }
.card-meta { display: block; color: var(--ink-faint); font-size: 0.75rem; }

#report-view h2 { font: 600 2rem/1.2 var(--serif); margin: 0.2rem 0 0.4rem; }
.report-glyph { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.4rem; color: var(--bronze-ink); }
.report-blurb { font: 400 italic 1.125rem/1.5 var(--serif); color: var(--ink-soft); margin: 0 0 0.4rem; max-width: 62ch; }
.report-meta { color: var(--ink-faint); font-size: 0.8125rem; margin: 0 0 1rem; }

/* Figures read as ledger entries, not cards: a short bronze rule, the number
   set in the record's serif beneath it, a muted caption under that. */
.tiles { display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; margin: var(--space-4) 0 var(--space-3); }
.tile {
  padding: 0.85rem 0 0.3rem; min-width: 150px; flex: 1 1 160px; max-width: 340px;
  border-top: 2px solid var(--bronze);
}
.tile b {
  display: block; font: 700 2.125rem/1.1 var(--serif); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tile span { display: block; margin-top: 0.45rem; color: var(--ink-soft); font: 400 0.8125rem/1.45 var(--sans); }

.chart {
  margin: 1.1rem 0 0; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.9rem 1.1rem; max-width: 920px;
  /* Contain the sr-only data table: tables refuse widths below min-content,
     so on narrow screens it would otherwise widen the page's scroll area. */
  position: relative; overflow: hidden;
}
.chart figcaption { color: var(--ink-soft); margin-bottom: 0.6rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-bar { fill: var(--chart-mark); }
.chart-bar:hover { opacity: 0.8; }
/* Linked columns: the full column height is the target; the bar darkens on hover. */
.chart-bar-link { cursor: pointer; outline: none; }
.chart-hit { fill: transparent; }
.chart-bar-link:hover .chart-bar, .chart-bar-link:focus-visible .chart-bar { fill: var(--bronze-ink); opacity: 1; }
.chart-bar-link:hover .chart-hit { fill: var(--bronze-wash); }
.chart-tick { fill: var(--ink-faint); font-size: 11px; }
.chart-peak { fill: var(--ink); font-size: 11px; }
.chart-note { color: var(--ink-faint); font-size: 0.8125rem; margin: 0.6rem 0 0; }
.barrow { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 0.7rem; align-items: center; margin: 0.35rem 0; font-size: 0.875rem; }
.barrow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bar names read as labels, not links: no underline, bronze on hover. */
a.barrow-name { text-decoration: none; }
a.barrow-name:hover { color: var(--bronze-ink); }
.barrow-track { height: 8px; background: var(--paper-sunken); border-radius: 4px; overflow: hidden; }
.barrow-track i { display: block; height: 100%; background: var(--chart-mark); border-radius: 4px; }
.barrow-value { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- money & words (daily topic panel) ---------------------------------- */

/* The lede pairs the words with the money in the record's own voice. */
.mw-lede { font: 400 0.9375rem/1.65 var(--serif); color: var(--ink-soft); margin: 0.1rem 0 0; max-width: 62ch; }
.mw-lede b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.4rem; }
.mw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.1rem; }
.mw-chips .chip { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 700px) {
  .mw-cols { grid-template-columns: 1fr; }
  .mw-chips .chip {
    width: 100%; border-radius: 10px; padding: 0.65rem 1rem;
    text-align: left; line-height: 1.4;
  }
}

/* Evidence-brief layers */
#report-brief .answer { margin-top: 0.6rem; }
#report-stats:not(:empty) { margin-top: var(--section-gap); }
.report-lead { display: grid; grid-template-columns: 1fr; gap: 1.5rem 2.5rem; align-items: start; }
@media (min-width: 1100px) {
  .report-lead { grid-template-columns: minmax(0, 1fr) 340px; }
  #report-figures { position: sticky; top: calc(var(--header-h) + 1rem); }
  #report-figures .tiles { flex-direction: column; }
  #report-figures .tile { max-width: none; }
}
button.action-btn { background: none; cursor: pointer; font: 600 0.875rem/1.3 var(--sans); }
a.action-btn.report-download-btn { display: inline-flex; width: auto; margin-top: 1.6rem; }
.tile .tile-source { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--ink-faint); }
.tile .tile-source a { color: var(--ink-faint); }
.position-list { list-style: none; margin: 0; padding: 0; }
.position-list li { margin: 0; padding: var(--row-gap) 0; max-width: 78ch; }
.position-party { margin-right: 0.35rem; }
.position-text { font-size: 0.9375rem; }
.position-list .source-meta { margin-top: var(--space-1); }

/* A report's body sections are headed by a serif h3, which already reads as
   a break, so they take the middle step rather than the full section gap. */
.report-section { margin-top: var(--sub-gap); }
.report-section h3 { font: 600 1.25rem/1.3 var(--serif); margin: 0 0 var(--space-4); }
.section-tools { margin: 0.5rem 0 0; }

/* ---- document page ------------------------------------------------------ */

#panel-doc h2 { font: 700 clamp(1.55rem, 2.8vw, 2.1rem)/1.2 var(--serif); margin: 0.15rem 0 0.35rem; max-width: 68ch; }
.doc-topic { font: italic 400 1.0625rem/1.45 var(--serif); color: var(--ink-soft); margin: 0 0 0.4rem; max-width: 68ch; }
.doc-meta { color: var(--ink-soft); font-size: 0.875rem; margin: 0; }
.doc-meta .party { vertical-align: 1px; }
/* Machine topic labels under the byline: quiet party-chip-scale pills that
   link to their topic pages. Absent entirely on unlabelled docs. */
.doc-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.topic-chip {
  display: inline-flex; align-items: center;
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  background: var(--paper-sunken); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.32rem 0.6rem;
}
.topic-chip:hover { color: var(--bronze-ink); border-color: var(--bronze); background: var(--bronze-wash); }
/* One toolbar row: doc actions left, quiet speaker-research links right;
   both wrap to their own line on narrow screens. */
.doc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.7rem 2rem; margin-top: 1.1rem;
}
.doc-toolbar-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-rule { margin: 1.2rem 0 1.4rem; }
.doc-brief { margin: 1.3rem 0 0.5rem; max-width: 68ch; }
.doc-brief .kicker { margin: 0 0 0.45rem; }
.doc-brief #doc-brief-text {
  font: 400 1.0625rem/1.65 var(--serif); color: var(--ink); margin: 0 0 0.4rem;
}
.doc-text {
  font-family: var(--serif);
  font-size: 1.03125rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  max-width: 68ch;
  margin: 0;
}
.cite-panel {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  padding: 1rem 1.25rem; margin: 0.8rem 0 0; font-size: 0.875rem;
}
.cite-panel h3 { margin: 0.8rem 0 0.3rem; }
.cite-panel h3:first-child { margin-top: 0; }
.cite-panel pre {
  white-space: pre-wrap; word-break: break-word; background: var(--paper-sunken);
  border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0.2rem 0; font-size: 0.8125rem;
}

.game-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem; margin-top: 0.4rem;
}
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
.game-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 2rem 1.6rem 1.6rem; text-align: center; cursor: pointer;
  color: var(--ink); font: inherit; display: grid; justify-items: center; gap: 0.5rem;
}
.game-card:hover { border-color: var(--line-strong); }
.game-card:hover .game-icon { background: var(--bronze-wash); color: var(--bronze-ink); }
.game-icon {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-sunken); color: var(--ink-soft); margin-bottom: 0.4rem;
}
.game-icon svg { width: 52px; height: 52px; }
.game-title { font: 700 1.5rem/1.2 var(--serif); }
.game-blurb { color: var(--ink-soft); font-size: 0.9375rem; max-width: 34ch; }
.game-cta {
  margin-top: 0.6rem; background: var(--navy); color: var(--on-navy);
  border-radius: 4px; padding: 0.6rem 2.2rem; font: 600 0.9375rem/1 var(--sans);
}
.game-card:hover .game-cta { background: var(--navy-raised); }

.game-dialog {
  border: none; border-radius: 8px; padding: 0;
  width: min(1200px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem);
  background: var(--paper);
  box-shadow: 0 24px 48px rgba(30, 26, 18, 0.18);
}
.game-dialog::backdrop { background: rgba(20, 42, 67, 0.55); }
/* Scrollbars inside dialogs and other framed panels: a bronze hairline on
   paper rather than the platform's grey slab. */
.game-dialog, .game-dialog *, .mm-card, .infobox, .chart, .subject-map {
  scrollbar-width: thin; scrollbar-color: var(--bronze-rule) transparent;
}
.game-dialog ::-webkit-scrollbar, .game-dialog::-webkit-scrollbar,
.mm-card::-webkit-scrollbar { width: 10px; height: 10px; }
.game-dialog ::-webkit-scrollbar-track, .game-dialog::-webkit-scrollbar-track,
.mm-card::-webkit-scrollbar-track { background: transparent; }
.game-dialog ::-webkit-scrollbar-thumb, .game-dialog::-webkit-scrollbar-thumb,
.mm-card::-webkit-scrollbar-thumb {
  background: var(--bronze-rule); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.game-dialog ::-webkit-scrollbar-thumb:hover, .game-dialog::-webkit-scrollbar-thumb:hover,
.mm-card::-webkit-scrollbar-thumb:hover { background: var(--bronze-ink); background-clip: content-box; }
.game-dialog-head {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-end;
  background: var(--paper); padding: 0.4rem 0.4rem 0;
}
.game-close {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-size: 1.1rem; min-width: 44px; min-height: 44px; border-radius: 4px;
}
.game-close:hover { color: var(--ink); background: var(--paper-sunken); }
.game-dialog-body { padding: 0 1.4rem 1.4rem; }

.action-btn {
  display: flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 0.55rem 0.8rem; text-decoration: none;
  font: 600 0.875rem/1.3 var(--sans); color: var(--ink);
}
.action-btn:hover { border-color: var(--ink); color: var(--ink); }
.action-btn .btn-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--bronze-ink); }
.action-btn.action-primary {
  background: var(--navy); border-color: var(--navy); color: var(--on-navy);
}
.action-btn.action-primary:hover { background: var(--navy-raised); }
.action-btn.action-primary .btn-icon { color: var(--bronze-bright); }
/* The gold call to action: reserved for the one thing on a page worth
   opening next. Bronze fill, ink on top so it stays legible. */
/* White on the gold, label and icon together. Dark ink on the lighter bronze
   only reached 3.69 to 1; white on this half step toward bronze-ink reaches
   4.71, so the button reads as gold and still passes AA at its weight. */
.action-btn.action-gold {
  background: #966C17; border-color: #966C17; color: #FFF;
  font-weight: 700;
}
.action-btn.action-gold:hover { background: var(--bronze-ink); border-color: var(--bronze-ink); color: #FFF; }
.action-btn.action-gold .btn-icon { color: currentColor; }
/* A compact button for inline rows such as the news pivots. */
.action-btn.action-small { padding: 0.3rem 0.65rem; font-size: 0.8125rem; min-height: 0; }
.news-pivots { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--space-3); }
/* The map's caption and its way in sit on one line, the button to the right. */
.front-map-foot { display: flex; align-items: flex-end; gap: 1.4rem; margin-top: var(--space-3); }
.front-map-foot .fineprint { margin: 0; flex: 1 1 auto; }
.front-map-foot .action-btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .front-map-foot { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .front-map-foot .action-btn { justify-content: center; }
}
.party-dot-only { margin-right: 0.45rem; }
.subject-active {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em;
  color: var(--ink-soft); text-transform: uppercase;
}
.subject-active svg { width: 12px; height: 12px; color: var(--ink-faint); }
.search-everything { display: inline-flex; }

/* ---- front page grid ---------------------------------------------------- */

/* Rhythm: 3.5rem between the home page's sections (chips, map, modules),
   3rem between modules, 0.9rem from a kicker to its content; 2.5rem on phones. */
.front-grid { display: grid; grid-template-columns: 1fr; gap: 3rem 3rem; margin-top: 3.5rem; }
.front-main, .front-rail { display: grid; gap: 3rem; align-content: start; min-width: 0; }
.front-mod { min-width: 0; }
.front-mod > h2 { margin: 0 0 0.9rem; }
@media (min-width: 1100px) {
  .front-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
@media (max-width: 700px) {
  .front-grid { gap: 2.5rem; margin-top: 2.5rem; }
  .front-main, .front-rail { gap: 2.5rem; }
}

/* ---- home maps ---------------------------------------------------------- */
/* Two plates side by side above the modules, a hairline between them: the
   record by state (Australia engraved, statemap.js) at 5/12 and the money map's
   mini chrome at 7/12, equal heights. Stacked on phones, state map first. */
.front-map { margin-top: 3.5rem; }
.front-map-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.front-map-half { min-width: 0; }
.front-map-half:first-child { padding-right: 2rem; }
.front-map-half + .front-map-half { border-left: 1px solid var(--line); padding-left: 2rem; }
.front-map-half > h2 { margin: 0 0 0.9rem; }
.front-map-half > .fineprint { margin-top: 0.9rem; }
.front-map-root { position: relative; height: 380px; overflow: hidden; }
.front-map-root > .status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
/* The 3D bundle's own labels take Public Sans here. */
.front-map-root.mm-root, .front-map-root .rp-map3d-label, .front-map-root .rp-map3d-territory,
.front-map-root .rp-map3d-edge-label, .front-map-root .rp-map3d-popup { font-family: var(--sans); }
.map-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; }
.map-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 30px;
  background: var(--paper-sunken); border: 1px solid var(--line); border-radius: 999px;
  font: 600 0.75rem/1.2 var(--sans); color: var(--ink-soft); text-decoration: none;
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
}
.map-chip:hover { background: var(--bronze-wash); color: var(--ink); }
.map-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-chip-n { color: var(--ink-soft); font-weight: 400; font-variant-numeric: tabular-nums; }  /* weight, not colour, carries the hierarchy: faint failed contrast on the sunken chip */
@media (max-width: 700px) {
  .front-map { margin-top: 2.5rem; }
  .front-map-grid { grid-template-columns: 1fr; }
  .front-map-half:first-child { padding-right: 0; }
  .front-map-half + .front-map-half {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 2rem;
  }
  .front-map-root { height: 260px; }
  /* One scrolling row bleeding to the screen edges; the page itself never scrolls sideways. */
  .map-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 1rem calc(-1 * clamp(1.25rem, 4vw, 4.5rem)) 0; padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  }
  .map-chips::-webkit-scrollbar { display: none; }
  .map-chip { flex: none; }
}
.split-list { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; }
@media (min-width: 1100px) { .split-list { grid-template-columns: 1fr 1fr; } }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-top: 1px solid var(--line); padding: var(--row-gap) 0; }
.news-list li:first-child { border-top: 0; padding-top: var(--space-1); }
.news-headline { font: 600 1.0625rem/1.4 var(--serif); text-decoration: none; }
.news-headline:hover { color: var(--bronze-ink); }
.news-pivots a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.news-pivots a:hover { color: var(--bronze-ink); }
.news-meta { display: block; margin-top: var(--space-1); color: var(--ink-faint); font-size: 0.8125rem; }
.news-source { font: 700 0.6875rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.news-pivots { display: flex; gap: 1.2rem; margin-top: 0.35rem; font-size: 0.8125rem; flex-wrap: wrap; }

a.report-card { display: block; text-decoration: none; }
a.report-card .card-meta { color: var(--ink-soft); }
.entry-stack { display: grid; gap: 0.8rem; }
.tiles-compact { margin-top: 0.4rem; gap: 0.9rem 1.4rem; }
.tiles-compact .tile { min-width: 130px; flex-basis: 130px; padding: 0.65rem 0 0.2rem; }
.tiles-compact .tile b { font-size: 1.5rem; }
.corpus-banner { margin-top: 1.1rem; }
.front-mod .report-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- encyclopedia slider (front rail) ----------------------------------- */
/* One card per view in the rail, a peek of the next on phones; the track is
   the only thing that scrolls sideways, never the page. */
.ency-slider { min-width: 0; }
.ency-track {
  display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 1px 0 3px; margin: -1px 0 -3px;
}
.ency-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .ency-track { scroll-behavior: smooth; } }
.ency-card {
  flex: 0 0 min(340px, 88%); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.65rem; cursor: default;
}
.ency-card .card-kicker, .ency-card .card-blurb, .ency-card .card-meta { margin: 0; }
.ency-head { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.ency-portrait {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line);
}
.ency-id { display: grid; gap: 0.3rem; justify-items: start; min-width: 0; }
.ency-id .card-kicker { margin: 0; }
a.ency-name { font-size: 1.125rem; text-decoration: none; }
a.ency-name:hover, a.ency-name:focus-visible {
  text-decoration: underline; text-decoration-color: var(--bronze-ink); text-underline-offset: 3px;
}
/* Person page speech rows: date-led, debate title, passage clamp */
.speech-rows { list-style: none; margin: 0; padding: 0; }
.speech-rows li {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: var(--space-1) 1.1rem;
  padding: var(--row-gap) 0; border-top: 1px solid var(--line);
}
.speech-rows li:first-child { border-top: none; padding-top: var(--space-1); }
.speech-rows time { font: 500 0.8125rem/1.5 var(--sans); color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.speech-debate { font: 600 1rem/1.35 var(--serif); color: var(--ink); text-decoration: none; }
.speech-passage {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 400 0.9375rem/1.5 var(--serif); color: var(--ink); text-decoration: none;
}
.speech-passage:hover { color: var(--bronze-ink); }
.speech-debate:hover { color: var(--bronze-ink); }
.speech-where { font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-left: 0.4rem; }
.speech-snip {
  margin: var(--space-2) 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 600px) { .speech-rows li { grid-template-columns: 1fr; gap: 0.1rem; } }
/* Person page voting record */
.votes-tiles { margin-top: var(--space-1); }
.votes-split { height: 6px; max-width: 520px; margin: 0.9rem 0 0; border-radius: 3px; background: var(--paper-sunken); overflow: hidden; }
.votes-split i { display: block; height: 100%; background: var(--bronze); }
.votes-lede { margin: var(--space-2) 0 0; }
.votes-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2.2rem; }
.votes-col-kicker { margin: var(--sub-gap) 0 var(--space-2); }
.votes-cols .subject-list li { padding: var(--space-2) 0; }
.votes-method { margin-top: var(--space-3); }
.votes-method .fineprint { margin: var(--space-1) 0 var(--space-2); }
.ency-votes { display: grid; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.65rem; }
.ency-votes-label {
  display: block; margin-bottom: 0.25rem; color: var(--ink-faint);
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.ency-votes-list { list-style: none; margin: 0; padding: 0; }
.ency-votes-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem;
  border-top: 1px solid var(--line); padding: 0.3rem 0; font-size: 0.8125rem; line-height: 1.35;
}
.ency-votes-list li:first-child { border-top: 0; padding-top: 0; }
.ency-bill {
  color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ency-year { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ency-card .action-btn { display: inline-flex; align-self: flex-start; margin-top: auto; }
.ency-nav { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.ency-nav .action-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
.ency-nav .action-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--line); }
.ency-count { min-width: 5ch; text-align: center; color: var(--ink-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
@media (hover: none) and (pointer: coarse) { .ency-nav { display: none; } }

.subject-portrait {
  display: block; width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--paper-raised);
  box-shadow: 0 0 0 1px var(--line); margin: 0.4rem 0 0.9rem;
}
.doc-portrait {
  float: left; width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; margin: 0.2rem 1rem 0.4rem 0;
  border: 2px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line);
}

/* ---- subject entries (the encyclopedia) --------------------------------- */

.subject-head h2 { font: 700 clamp(1.75rem, 3.5vw, 2.6rem)/1.15 var(--serif); margin: 0.2rem 0 0.3rem; }
/* With a portrait, the header reads as a byline card on wider screens: the
   photo at left spans the name and the tag line. Pages without a portrait
   (donors, parties, people we have no photo for) keep the stacked layout. */
@media (min-width: 701px) {
  .subject-head:has(.subject-portrait) {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.4rem; align-items: center; margin: 0.3rem 0 1.1rem;
  }
  .subject-head:has(.subject-portrait) .subject-portrait { grid-row: 1 / span 2; margin: 0; }
  .subject-head:has(.subject-portrait) h2 { align-self: end; margin: 0; }
  .subject-head:has(.subject-portrait) .subject-tag { align-self: start; margin: 0.4rem 0 0; }
}
.subject-tag { color: var(--ink-soft); font-size: 0.9375rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.subject-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5) var(--space-6); align-items: start; }
.subject-main { min-width: 0; }
.subject-map {
  position: relative; height: 420px; border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; background: var(--paper-raised);
}
/* The plate holds its height from the first paint and breathes quietly until
   the scene arrives, so nothing below it is shoved down. */
.subject-map.is-waiting { background: var(--paper-sunken); }
@media (prefers-reduced-motion: no-preference) {
  .subject-map.is-waiting { animation: plateWait 1.6s ease-in-out infinite; }
  @keyframes plateWait { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
}
/* Two rows of industry chips arrive with the map's data; hold their space. */
#front-map-chips { min-height: 76px; }
@media (max-width: 700px) { #front-map-chips { min-height: 44px; } }
.infobox {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px;
  border-top: 3px solid var(--bronze); padding: var(--space-4) 1.2rem; position: sticky; top: calc(var(--header-h) + 1rem);
}
.infobox dl { margin: var(--space-2) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.infobox dt { color: var(--ink-faint); font-size: 0.8125rem; }
.infobox dd { margin: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.infobox .actions { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }
/* A long list of spellings is reference material, not a headline figure:
   it sets smaller than the facts above it and opens on request. */
.alias-list { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-soft); }
.alias-more > summary { cursor: pointer; list-style: none; }
.alias-more > summary::-webkit-details-marker { display: none; }
.alias-toggle { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--bronze-ink);
  text-decoration: underline; text-decoration-color: var(--bronze-rule); text-underline-offset: 3px; }
.alias-more[open] > summary .alias-toggle::after { content: " (hide)"; }
.alias-rest { display: block; margin-top: 0.3rem; }
.funfact {
  background: var(--bronze-wash); border-radius: 4px; padding: 0.8rem 1rem;
  margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.5;
}
.funfact b { font-variant-numeric: tabular-nums; }
.subject-list { list-style: none; margin: 0; padding: 0; }
.subject-list li { border-top: 1px solid var(--line); padding: var(--row-gap) 0; }
.subject-list li:first-child { border-top: none; }

/* ---- encyclopedia indexes (directories) --------------------------------- */
/* Parliamentarians / Parties / Donors: figures, a controls row (search first,
   then selects and the sort; wraps on phones), a hairline list whose rows
   are portrait | name and meta | figures, and a "Show more" button. */
.dir-tiles { margin-bottom: 0.2rem; }
.dir-controls { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: end; margin: var(--space-5) 0 var(--space-1); }
.dir-controls input[type="search"] {
  flex: 1 1 240px; min-width: 0; min-height: 44px;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 4px;
  font: 400 1rem/1.3 var(--sans); padding: 0.6rem 0.8rem;
  -webkit-appearance: none; appearance: none;
}
.dir-field { display: inline-flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dir-field > span { font-size: 0.75rem; color: var(--ink-faint); }
.dir-field select { min-height: 44px; font-size: 0.9375rem; max-width: min(100%, 230px); }
.dir-checks { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: center; }
.dir-check { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-size: 0.875rem; color: var(--ink-soft); cursor: pointer; }
.dir-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.dir-count { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.dir-list li.dir-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-1) 0.9rem; align-items: center; padding: var(--row-gap) 0;
}
.dir-list li.dir-row-plain { grid-template-columns: minmax(0, 1fr) auto; }
.dir-portrait, .dir-mono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.dir-portrait img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line);
}
.dir-mono {
  background: var(--paper-sunken); color: var(--ink-soft);
  font: 700 0.9375rem/1 var(--serif); box-shadow: inset 0 0 0 1px var(--line);
}
/* Donor monograms: the industry hue as a wash, the way the entry pages tint them. */
.dir-mono-ind {
  border-radius: 4px; color: var(--ink);
  background: color-mix(in srgb, var(--pc, var(--party-oth)) 18%, var(--paper-raised));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--party-oth)) 45%, var(--line));
}
.dir-main { min-width: 0; }
.dir-name { font: 600 1.0625rem/1.3 var(--serif); }
.dir-name .party-dot-only { margin-right: 0.4rem; }
.dir-alt { color: var(--ink-faint); font: 400 0.875rem/1.3 var(--sans); margin-left: 0.45rem; }
.dir-main .result-meta { display: flex; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--ink-soft); }
.dir-muted { color: var(--ink-faint); }
.dir-parties .party-dot-only { margin-right: 0.3rem; }
.dir-figs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; justify-content: flex-end; text-align: right; }
.dir-fig { font: 400 0.75rem/1.35 var(--sans); color: var(--ink-faint); white-space: nowrap; }
.dir-fig b { display: block; font: 700 1.0625rem/1.2 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.dir-mark {
  display: inline-block; font: 700 0.625rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bronze-ink); border: 1px solid var(--bronze); border-radius: 3px; padding: 0.2rem 0.35rem;
}
.dir-more-row { margin: 1rem 0 0; }
.dir-empty { margin: 1.2rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; }
@media (max-width: 640px) {
  .dir-controls input[type="search"] { flex-basis: 100%; }
  .dir-field { flex: 1 1 42%; }
  .dir-checks { flex: 1 1 100%; gap: 0 1.2rem; }
  .dir-field select { width: 100%; max-width: 100%; }
  .dir-list li.dir-row { grid-template-columns: auto minmax(0, 1fr); }
  .dir-list li.dir-row-plain { grid-template-columns: minmax(0, 1fr); }
  .dir-list li.dir-row .dir-figs { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .dir-list li.dir-row:not(.dir-row-plain) .dir-figs { grid-column: 2; }
}
/* Declared interests (person pages): a hairline list of register buckets, each
   a chat-sources disclosure with its count at the right; rows are
   holder | declaration with the date and page link beneath. */
.interests-summary { margin: var(--space-1) 0 var(--space-2); color: var(--ink-soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.interests-list > li { padding: 0; }
.interests-bucket > summary { display: flex; width: 100%; }
.interests-count { margin-left: auto; color: var(--ink-faint); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.interests-items { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.45; }
.interests-holders li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.6rem; }
.interests-holder { color: var(--ink-faint); font-size: 0.8125rem; padding-top: 0.1rem; }
.interests-holders .result-meta { grid-column: 2; }
.interests-deleted .interests-desc { text-decoration: line-through; color: var(--ink-faint); }
.topic-digest { max-width: 68ch; }
.topic-digest-item { border-top: 1px solid var(--line); padding: var(--row-gap) 0; }
.topic-digest-item:first-of-type { border-top: none; padding-top: var(--space-1); }
.topic-digest-source { font: 600 0.9375rem/1.35 var(--serif); text-decoration: none; }
.topic-digest-source:hover { color: var(--bronze-ink); }
.topic-digest-text {
  font: 400 1rem/1.6 var(--serif); color: var(--ink); margin: var(--space-2) 0 0;
}
@media (max-width: 900px) {
  .subject-grid { grid-template-columns: 1fr; }
  .infobox { position: static; }
}

/* ---- about / methods ---------------------------------------------------- */

#panel-about h2, #panel-methods h2 { font: 600 1.5rem/1.3 var(--serif); margin: 1.6rem 0 0.5rem; }
#panel-about h2:first-child { margin-top: 0.2rem; }
#panel-methods h2 { margin-top: 0.2rem; }
#panel-methods h3 { font: 600 1.125rem/1.3 var(--serif); margin: 1.4rem 0 0.4rem; }
#panel-about p, #panel-methods p, .about-list li { max-width: 68ch; }
.about-list { padding-left: 1.2rem; }
.about-list li { margin: 0.5rem 0; }
.doc-speaker-links { margin: 0; }

/* ---- stats page ---------------------------------------------------------- */

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
  gap: 1.2rem 3rem; margin: 0 0 1.6rem;
}
.stat-grid .stat-figure {
  display: block; font: 700 2rem/1.15 var(--serif); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-grid .stat-label {
  display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--ink-faint);
}

.table-scroll { overflow-x: auto; }
.about-table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.about-table th, .about-table td { text-align: left; padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid var(--line); }
.about-table th { color: var(--ink-soft); font-weight: 600; }
.about-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
#panel-methods code { background: var(--paper-sunken); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em; }

/* ---- footer ------------------------------------------------------------- */

footer {
  background: var(--navy);
  border-top: 3px solid var(--bronze);
  padding: 0 0 1.5rem; color: var(--on-navy-soft); font-size: 0.8125rem;
}
.footer-lines { padding-top: 1.1rem; }
.footer-lines p { margin: 0.35rem 0; max-width: 90ch; }
footer a { color: var(--on-navy); text-decoration-color: var(--bronze-bright); }
footer a:hover { color: var(--bronze-bright); }
/* Same navy-band rule as the header: ledger bronze vanishes against navy. */
footer :focus-visible { outline-color: var(--bronze-bright); }

/* ---- section rhythm on entry and report pages --------------------------- */
/* An entry page is a stack of sections, each a bronze kicker over a hairline
   list. The kicker's own margin is the boundary, so it has to be plainly
   larger than the breath either side of a hairline — about three rows' worth
   of silence, or the eye reads one long list instead of five sections. */

#subject-sections .kicker { margin-top: var(--section-gap); }
/* The money flows open a donor or party page with a chart, not a kicker —
   but only where the map sits above them. With no map (topics, anyone the
   money data does not hold) the first block is the top of the column and
   sets its shoulder against the Quick facts card, not below it. */
#subject-map:not([hidden]) ~ #subject-sections > .chart:first-child { margin-top: var(--section-gap); }
#subject-map[hidden] ~ #subject-sections > .kicker:first-child,
#subject-map[hidden] ~ #subject-sections > :first-child > .kicker:first-child { margin-top: 0; }

/* A second list inside one section (the firms a donor retains, a minister's
   recent meetings, a party's associated entities, the two voting columns)
   takes the middle step: clearly a break, clearly not a new section.
   app.js still writes `style="margin-top:1.1rem"` on those kickers — shorter
   than the gap between two rows, which is what made them read as rows. */
#subject-sections .kicker-sub { margin-top: var(--sub-gap); }
/* The map's hint is a caption for the plate above it, not a lead-in to the
   ask row below, so it keeps a row's breath before whatever follows. */
#subject-map-hint { margin-bottom: var(--space-5); }
#subject-sections .votes-col-kicker { margin-top: var(--sub-gap); }

#report-positions:not(:empty), #report-moments:not(:empty) { margin-top: var(--section-gap); }

/* Stacked, the Quick facts column is a section of its own. */
@media (max-width: 900px) { .subject-grid { row-gap: var(--section-gap); } }

/* ---- forced colors / high contrast -------------------------------------- */

@media (forced-colors: active) {
  .scorebar > i, .barrow-track i, .meter-track i { background: CanvasText; }
  /* Transparent inactive borders survive forced colors, so the active
     underline / left rule keep working; only the hover washes vanish. */
  .megamenu { border-top-width: 3px; }
}

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

/* Mid widths: the nav needs the room the tagline occupies. */
@media (max-width: 1099px) {
  .mast-search { flex-basis: 220px; }
  .logo-mark { height: 64px; width: 70px; }
}

/* Compact band: hamburger + drawer replace the inline nav. */
@media (max-width: 860px) {
  header { padding: 0.35rem 0; }
  .masthead-nav, .mast-search { display: none; }
  .nav-toggle { display: inline-flex; }
  .logo-mark { height: 46px; width: 51px; }
  .masthead, .masthead-id { display: flex; align-items: center; }
  /* The compact band pads evenly and hides the nav, so the mark needs no lift. */
  .masthead-id { margin: 0; max-width: none; top: 0; }
}

/* ---- mobile ------------------------------------------------------------- */

@media (max-width: 640px) {
  .ask-row > input { min-height: 52px; }
  /* Ask stretches, the options icon rides at its right on the same line. */
  .ask-row button.primary { flex: 1 1 auto; min-height: 52px; }
  #ask-options-btn, #search-options-btn { min-height: 52px; width: 52px; }
  /* Same pattern on search: the submit stretches, the filter icon beside it. */
  .query-line button.primary { flex: 1 1 auto; min-height: 52px; }
  .chart { padding: 0.75rem; }
  .barrow { grid-template-columns: minmax(90px, 30%) 1fr auto; }
  .tile { min-width: 140px; flex-basis: 140px; }
  .tile b { font-size: 1.75rem; }
  #ask-wombat { padding: 1.75rem 0 0.4rem; }
  #ask-money { margin-top: 1.6rem; }
}

/* ---- expense categories: row popover + glossary -------------------------- */
/* A category name in an expenses bar list is a button with a hairline bronze
   underline; hovering, focusing or tapping it opens one reused paper card in
   the state map's tip register (bronze top rule, hairline border) carrying the
   IPEA definition and a way through to the full glossary at #/expenses. */

.barrow-term {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help;
  text-decoration: underline dotted var(--bronze-rule);
  text-underline-offset: 3px;
}
.barrow-term:hover, .barrow-term[aria-describedby] {
  color: var(--bronze-ink); text-decoration-color: var(--bronze-ink);
}

.term-tip {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: max-content; max-width: min(21rem, calc(100vw - 2rem));
  padding: 0.6rem 0.8rem 0.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--line); border-top: 2px solid var(--bronze); border-radius: 4px;
  box-shadow: 0 6px 22px rgba(35, 39, 31, 0.14);
}
.term-tip-name { display: block; font: 600 0.875rem/1.35 var(--sans); color: var(--ink); }
.term-tip p { margin: 0.35rem 0 0; font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-soft); }
.term-tip .term-tip-note { color: var(--ink-faint); }
.term-tip-action {
  display: block; margin-top: 0.7rem; padding: 0.4rem 0.7rem;
  background: var(--navy); border: 1px solid var(--navy); border-radius: 4px;
  color: var(--on-navy); text-align: center; text-decoration: none;
  font: 600 0.8125rem/1.3 var(--sans);
}
.term-tip-action:hover { background: var(--navy-raised); border-color: var(--navy-raised); color: var(--on-navy); }

#panel-expenses h2 { font: 600 1.5rem/1.3 var(--serif); margin: 0.2rem 0 0.5rem; }
#panel-expenses h3 { font: 600 1.125rem/1.3 var(--serif); margin: 1.8rem 0 0.4rem; }
#panel-expenses p { max-width: 68ch; }
#panel-expenses .lede { font: 400 1.0625rem/1.65 var(--serif); color: var(--ink); margin: 0 0 0.4rem; }
.defs { margin: 0.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.defs dt { margin: 0; padding: 0.8rem 0 0; font: 600 0.9375rem/1.4 var(--sans); color: var(--ink); }
.defs dd { margin: 0; padding: 0 0 0.8rem; border-bottom: 1px solid var(--line); }
.defs dd p { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }
.defs dd .defs-src { font: 400 0.75rem/1.5 var(--sans); color: var(--ink-faint); }

@media (max-width: 560px) {
  .term-tip { padding: 0.55rem 0.7rem 0.7rem; }
}