/* ----------------------------------------------------------------
   House US — premium redesign
   --------------------------------------------------------------------
   Direction: editorial archive. Ivory paper, near-black ink, a single
   restrained navy accent (Federal navy, drawn from the US civic
   palette), with Pantone 116C gold reserved for search-match
   highlights only — gold's contrast with paper fails WCAG, so it's a
   background-fill affordance, never foreground. Source Serif 4 for
   display, Inter for body, JetBrains Mono for stamps. The civic
   register is whispered, not shouted.
   ---------------------------------------------------------------- */

:root {
  /* ----- palette: ivory paper, graphite ink, US navy accent ----- */
  --paper:        #f6f3ec;   /* base */
  --paper-warm:   #fbf8f1;   /* card / inset */
  --paper-deep:   #ece7da;   /* hover, sunken */
  --paper-edge:   #ddd5c2;   /* hairline alt */

  --ink:          #14110d;   /* near-black, warm */
  --ink-strong:   #000000;
  --ink-soft:     #2d2820;
  --ink-muted:    #6a6253;
  --ink-faint:    #9a9180;

  --rule:         #d9d1bd;   /* hairlines */
  --rule-soft:    #e6dec9;

  --accent:       #1d2f5e;   /* Federal navy — restrained */
  --accent-deep:  #14234a;
  --accent-tint:  #e6eaf2;   /* very faint wash */
  --accent-red:   #bf0a30;   /* Old Glory Red — from the favicon */
  --highlight:    #ffcd00;   /* Pantone 116C — match-highlight fill only */

  /* source colours kept editorial-quiet, single-channel */
  --src-spoken:   #2a3d63;   /* ink blue */
  --src-written:  #2c4a35;   /* moss */
  --src-wq:       #7a5520;   /* tobacco */
  --src-ws:       #4a2a55;   /* aubergine */
  --src-cmte:     #7a3a2b;   /* terracotta */

  /* ----- type ----- */
  --serif: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ----- rhythm ----- */
  --gutter: clamp(1rem, 4vw, 2rem);
  --col:    min(1040px, 100% - (var(--gutter) * 2));
  --col-narrow: min(720px, 100% - (var(--gutter) * 2));

  /* ----- elevation (very minimal) ----- */
  --shadow-sm: 0 1px 0 rgba(20, 17, 13, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 17, 13, 0.06), 0 8px 24px -12px rgba(20, 17, 13, 0.10);
  --shadow-focus: 0 0 0 3px var(--accent-tint), 0 0 0 4px var(--accent);
}

/* ================================================================
   Base
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'kern', 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
  transition: color 120ms, text-decoration-color 120ms;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

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

/* ================================================================
   Topbar — minimal masthead, hairline rule
   ================================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  width: var(--col);
  margin: 0 auto;
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.15rem 0;
}
.wordmark .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.wordmark-text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.018em;
  font-variation-settings: 'opsz' 32;
  line-height: 1;
}
/* Region tag — small mono-caps "AU" with a hairline left divider, in
   the wordmark accent. Replaces the earlier inline flag (which read
   fussy at small sizes). Per the Claude Design region-mark study. */
.region-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 0.7rem;
  margin-left: 0.55rem;
  border-left: 1px solid var(--rule);
  align-self: center;
  line-height: 1;
}

/* Region-pair — same small mono-caps look as .region-tag, but a link-out
   trio: current region unlinked (bolder), the other two as coloured
   marks that go to their sister sites. Kept deliberately quiet so it
   reads as navigation, not a badge. */
.region-pair {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: 0.7rem;
  margin-left: 0.55rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-muted);
  line-height: 1;
  align-self: center;
}
.region-pair a { color: var(--ink-muted); text-decoration: none; transition: opacity 120ms; }
.region-pair a:hover { opacity: 0.7; }
.region-pair a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.region-pair .uk-mark { color: #6b1f24; }
.region-pair .au-mark { color: #00843d; }
.region-pair .us-mark { color: #1d2f5e; }
.region-pair .current { font-weight: 600; }

.topnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  /* Horizontally scrollable when there are more nav items than fit;
     vertical locked so we never get a wobble. Scrollbar hidden — the
     touch-action and webkit overflow scrolling give momentum on iOS. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Don't shrink relative to wordmark — let the nav take its natural
     row width and overflow into the scroll area. */
  min-width: 0;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  text-decoration: none;
  color: var(--ink-muted);
  white-space: nowrap;        /* "Deep Dive" stays one line */
  flex-shrink: 0;
}
.topnav a:hover { color: var(--accent); }

/* ================================================================
   Main column
   ================================================================ */

main {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0 4rem;
  flex: 1;
}

/* ================================================================
   Hero — display lockup
   ================================================================ */

.hero {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero .lede {
  max-width: 18ch;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.hero .lede::after {
  content: '.';
  color: var(--accent);
}
/* The literal full stop sitting beside the accent dot — picked up
   in red from the favicon. The pair reads as a small flag flourish:
   red dot, then navy dot. Used together, deliberately. */
.hero .hero-stop { color: var(--accent-red); }
.hero .sub {
  margin: 0.9rem 0 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.08rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 48ch;
  text-wrap: pretty;
}

/* "Last updated" stamp under the hero. Mono-caps eyebrow with a
   leading dot, so a stale index is something you spot mid-glance. */
.index-stamp {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.index-stamp::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.index-stamp:empty { display: none; }
.index-stamp.is-stale {
  color: var(--ink-muted);
}
.index-stamp.is-stale::before {
  background: #c87a30;          /* muted amber — alert without shouting */
  opacity: 1;
}

/* ================================================================
   Search field — generous, single-line, oxblood focus
   ================================================================ */

.search {
  display: flex;
  align-items: stretch;
  margin: 0 0 1.25rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  transition: border-color 150ms, box-shadow 150ms;
  box-shadow: var(--shadow-sm);
}
.search:hover { border-color: var(--ink-faint); }
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Loading affordance — a thin gradient bar slides across the bottom
   edge of the form while a search is in flight. Shared between the
   main Search form and the Deep Dive form. Reduced-motion users get a
   static low-opacity stripe instead of an animation. */
.search { overflow: hidden; }
.search.is-loading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -30%;
  height: 2px;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: search-loading 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes search-loading {
  0%   { left: -30%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .search.is-loading::after {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.4;
  }
}

.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.search:focus-within .search-icon { color: var(--accent); }

.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
}
.search-field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 1.1rem 0.5rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-variation-settings: 'opsz' 24, 'wght' 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.search-field input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'wght' 380;
}
.search-field input:focus { outline: none; }

.primary {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 0 1.4rem;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 120ms;
  border-radius: 0 3px 3px 0;
  margin: -1px;
}
.primary:hover { background: var(--accent); }
.primary:active { background: var(--accent-deep); }
.primary-kbd {
  font-family: var(--mono);
  font-size: 0.78rem;
  opacity: 0.55;
  padding: 0.05rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  line-height: 1;
}

/* ================================================================
   Filters shell — collapsible, uses <details>
   ================================================================ */

.filters-shell {
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  border-radius: 4px;
}
.filters-toggle {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  user-select: none;
}
.filters-toggle::-webkit-details-marker { display: none; }
.ft-label { color: var(--ink); font-weight: 500; }
.ft-summary {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-chev {
  display: inline-flex;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  color: var(--ink-muted);
}
.filters-shell[open] .ft-chev { transform: rotate(180deg); }
.filters-shell[open] .filters-toggle { border-bottom: 1px solid var(--rule); }
.filters-toggle:hover { background: var(--paper-deep); }

.filters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  background: transparent;
}

.filter {
  border: 0;
  padding: 1rem 1.1rem 1.15rem;
  margin: 0;
  min-width: 0;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
/* layout on desktop: row 1 = date(5) sources(7); row 2 = house(3) party(4) member(5) */
.filter:nth-child(1) { grid-column: span 5; }
.filter:nth-child(2) { grid-column: span 7; border-right: 0; }
.filter:nth-child(3) { grid-column: span 3; border-bottom: 0; }
.filter:nth-child(4) { grid-column: span 4; border-bottom: 0; }
.filter:nth-child(5) { grid-column: span 5; border-right: 0; border-bottom: 0; }

.filter legend {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
  padding: 0;
}

/* ================================================================
   Pills
   ================================================================ */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* tidy reflow: date range as 2x2, house as 3-up — pills share row width.
   Applies to all three pages so the form looks identical everywhere. */
#date-presets,
#dd-date-presets,
#cm-date-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
#house,
#dd-house {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
#date-presets button,
#dd-date-presets button,
#cm-date-presets button,
#house button,
#dd-house button { width: 100%; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.pills button {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 450;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  min-height: 32px;
  border-radius: 999px;
  transition: all 120ms;
  white-space: nowrap;
}
.pills button:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.pills button[aria-pressed="true"],
.pills button[aria-checked="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pills button[aria-pressed="true"]:hover,
.pills button[aria-checked="true"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ================================================================
   Custom dates
   ================================================================ */

.custom-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  align-items: center;
}
.custom-dates label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.custom-dates input {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  min-height: 34px;
}
.custom-dates input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-tint);
  outline-offset: 0;
}

/* ================================================================
   Select + member input
   ================================================================ */

#party,
#member-input,
#est-round,
#est-committee {
  font-family: var(--sans);
  font-size: 0.92rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  min-height: 38px;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms;
}
#party,
#est-round,
#est-committee {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2314110d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 11px 7px;
  padding-right: 2rem;
  cursor: pointer;
}
#party:hover, #member-input:hover,
#est-round:hover, #est-committee:hover { border-color: var(--ink-faint); }
#party:focus, #member-input:focus,
#est-round:focus, #est-committee:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-tint);
  outline-offset: 0;
}

/* ================================================================
   Member autocomplete
   ================================================================ */

.member-box { position: relative; }

.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 20;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--paper-warm);
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.suggestions li {
  padding: 0.6rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}
.suggestions li:last-child { border-bottom: 0; }
.suggestions li:hover,
.suggestions li:focus {
  background: var(--paper-deep);
  outline: none;
}
.suggestions .meta {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ================================================================
   Selected member chip
   ================================================================ */

.selected-member {
  margin-top: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.32rem 0.45rem 0.32rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  border-radius: 999px;
  max-width: 100%;
}
#selected-member-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#clear-member {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.4rem;
  min-height: 24px;
  border-radius: 50%;
  transition: color 100ms, background 100ms;
}
#clear-member:hover { background: rgba(255,255,255,0.12); color: var(--highlight); }

/* ================================================================
   Status line
   ================================================================ */

.status {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-muted);
  min-height: 1.4em;
  line-height: 1.5;
  letter-spacing: 0.005em;
  /* sit just below the sticky topbar when scrolled into view */
  scroll-margin-top: 64px;
}
.status.error {
  color: var(--accent);
  font-weight: 500;
}
.status:empty { display: none; }

/* Toolbar above the results list — status text on the left, export
   button on the right when results are present. Shared shape on Search
   and Deep Dive. */
.results-toolbar,
.dd-headlines-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.results-toolbar .status { flex: 1 1 auto; min-width: 0; }
.dd-headlines-toolbar .dd-eyebrow { margin: 0; flex: 1 1 auto; min-width: 0; }

.export-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.32rem 0.75rem 0.32rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: border-color 120ms, color 120ms, background-color 120ms;
  flex: 0 0 auto;
}
.export-btn:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  background: var(--paper-warm);
}
.export-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.export-btn-arrow { stroke: currentColor; }

/* ================================================================
   Results — editorial entries
   ================================================================ */

.results {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ink);
}

.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 140ms;
}
.result:hover { background: linear-gradient(to right, var(--paper-warm), transparent 70%); }
.result:last-child { border-bottom: 1px solid var(--ink); }

.result-meta {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
/* The date stays in mono caps (it's tabular metadata); the member name
   reads as sentence-case sans because long minister-by-role attributions
   become unscannable in caps. */
.result-date {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-feature-settings: 'tnum' 1;
}
.result-member {
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.result-meta .muted { color: var(--ink-faint); font-style: italic; }

.badge {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
  position: relative;
}
.badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 0.45rem;
  flex: 0 0 auto;
}

.src-spoken  { color: var(--src-spoken); }
.src-written { color: var(--src-written); }
.src-wq      { color: var(--src-wq); }
.src-ws      { color: var(--src-ws); }
.src-cmte    { color: var(--src-cmte); }

/* US GovInfo collection mappings — reuse the same palette as the AU
   source classes so the visual rhythm carries across regions. */
.src-crec    { color: var(--src-spoken); }
.src-bills   { color: var(--src-written); }
.src-chrg    { color: var(--src-cmte); }
.src-fr      { color: var(--src-wq); }
.src-crpt    { color: var(--src-ws); }

/* Small mono-caps section tag above the title — soaks up the AU
   "COMMITTEES - X" / "BUSINESS - Y" prefixes so the heading proper
   reads as a heading proper. Reused by Deep Dive headlines. */
.result-eyebrow {
  order: 2;
  margin: 0.05rem 0 -0.05rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dd-hl-eyebrow {
  margin: 0 0 0.1rem;
}

.result-title {
  order: 3;
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 32, 'wght' 500;
  /* Matches the Deep Dive size — AU's verbose compound titles wear
     better at this scale, and the snippet beneath stays the
     journalistically primary thing. */
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  /* Some AU debate titles concatenate every committee involved in a
     report — easily 200+ words, which steamrollers the snippet below.
     Clamp visually to 3 lines; full title remains in the link's
     title attribute for hover and stays clickable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(0.2, 0.7, 0.2, 1), color 120ms;
  padding-bottom: 0.05em;
}
.result-title a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}
/* Ghost the parenthetical context on titles ("(Executive Session)",
   "(Continued)") so the actual title carries the weight. Quieter ink
   colour, normal weight; same font-size to keep the line rhythm. */
.result-title .title-context {
  color: var(--ink-faint);
  font-weight: 400;
}

.result-snippet {
  order: 4;
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 72ch;
  font-weight: 400;
}
.result-snippet mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: var(--ink);
  padding: 0 0.15em;
  font-weight: 500;
}
/* Empty snippet (still fetching, or no body text available) takes no
   vertical space — keeps the row tight while the granule loads. */
.result-snippet:empty { margin: 0; }

/* Filter <select> styling. The Lobbying tab uses dropdowns for
   quarter and issue area; styled as mono-caps pills to match the
   badge / eyebrow vocabulary used elsewhere in the design, so they
   read as editorial tags rather than a generic form input.
   The chevron is a tiny SVG sized to match the mono caps. */
.filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--paper-warm);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236a6253' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1 5 5 9 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
  min-width: 12ch;
}
.filter select:hover {
  border-color: var(--ink-faint);
  background-color: var(--paper-deep);
}
.filter select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ================================================================
   Lobbying (LD-2) results — registrant -> client headline, with one
   or more activity blocks underneath. The headline is the relationship,
   the activity descriptions are the journalistic body.
   ================================================================ */
.lda-result .result-title {
  -webkit-line-clamp: 2;
  font-variation-settings: 'opsz' 28, 'wght' 480;
}
.lda-arrow {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 500;
  margin: 0 0.35em;
  font-size: 0.85em;
  letter-spacing: 0;
}
.lda-client {
  color: var(--ink-soft);
}
.result-money {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.lda-activity {
  order: 5;
  margin: 0.55rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
  display: grid;
  gap: 0.2rem;
}
.lda-activity + .lda-activity { margin-top: 0.4rem; }
/* Issue label sits inline at the start of the description, like a
   small editorial flag. Also a filter shortcut: click to scope the
   result set to that issue, click again to clear. Hover invites the
   click without dominating the prose. */
.lda-code {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.1rem 0.45rem;
  border: none;
  border-radius: 3px;
  margin: 0 0.45rem 0 0;
  vertical-align: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lda-code:hover {
  background: var(--accent);
  color: var(--paper);
}
.lda-code:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lda-desc {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 14, 'wght' 380;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lda-desc.muted { color: var(--ink-faint); font-style: italic; }
.lda-desc mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: var(--ink);
  padding: 0 0.15em;
  font-weight: 500;
}
.lda-meta-line {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-muted);
  line-height: 1.45;
}
.lda-meta-line mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: var(--ink);
  padding: 0 0.15em;
  font-weight: 500;
}

/* Aggregate stat block above the result list. Serif display numbers
   (so they read as the dominant figures on the page, not a caption),
   mono-caps labels, ink rules top and bottom — newspaper-summary
   register. Refreshes per filter. */
.lda-aggregate {
  margin: 1rem 0 1.6rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 0;
}
.lda-aggregate:empty {
  display: none;
}
.lda-stat {
  padding: 0 1.1rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0; /* let the cell shrink past its content; wrap-friendly */
}
.lda-stat:last-child {
  border-right: none;
}
.lda-stat-num {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.05;
  /* Long top-issue labels like "Budget/Appropriations" wrap to two
     lines at natural break points rather than overflowing the cell. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Text-valued cell (top issue) uses a smaller serif size so longer
   phrases fit cleanly. Still serif, still display-y; just sized for
   words rather than two- or three-character numbers. */
.lda-stat-num--text {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-variation-settings: 'opsz' 18, 'wght' 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
/* Each "/"-separated segment of a multi-part issue label gets its
   own line, so "Labor Issues/Antitrust/Workplace" stacks as three
   lines rather than wrapping mid-word. */
.lda-issue-seg {
  display: block;
}
.lda-stat-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Bar + money grouped — sits as one flex item in the meta row. */
.lda-money {
  display: inline-flex;
  align-items: center;
}

/* Overview dashboard — top-clients bar chart and three leaderboards.
   Sits between the stat block and the result list. Quietly editorial:
   serif names, mono captions, restrained navy bars, hairline rules. */
.lda-overview { margin: 1.25rem 0 0; }
.lda-overview:empty { display: none; }
.lda-overview-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.85rem;
}
.lda-overview-section { margin: 0 0 2rem; }

/* Top-clients chart: name | bar | value. Fills the slot UK Deep Dive
   uses for monthly volume; with a single quarter we go for "who's
   spending most" rather than "when's the spend happening." */
.lda-chart { list-style: none; padding: 0; margin: 0; }
.lda-chart > li { padding: 0; }
/* The chart row is a button — click filters the result set to that
   client. Reset native button styling and adopt the original row
   layout. Subtle hover wash invites the click without dominating. */
.lda-chart-row {
  display: grid;
  grid-template-columns: minmax(180px, 32%) 1fr 5rem;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  margin: 0 -0.5rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 100ms ease;
}
.lda-chart-row:hover {
  background: var(--paper-deep);
}
.lda-chart-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--paper-deep);
}
.lda-chart-label {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 14, 'wght' 380;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lda-chart-bar {
  display: block;
  height: 6px;
  background: var(--paper-edge);
  border-radius: 3px;
  overflow: hidden;
}
.lda-chart-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.lda-chart-val {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: right;
}

/* Three leaderboard columns. Direct echo of UK Deep Dive's
   Most Contributions / In These Debates / Often Mentioned Alongside,
   with Lobbying-flavoured cuts: firms, lobbyists, targets. */
.lda-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem 2rem;
  margin: 0 0 2rem;
}
.lda-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.lda-board-list li {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
/* Each row is a button — click filters the result set. Reset native
   button styling, take the row's grid, hover deepens to invite the
   click. Same a11y pattern as the chart rows above. */
.lda-row-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  width: 100%;
  padding: 0.55rem 0.5rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease;
}
.lda-row-link:hover {
  background: var(--paper-deep);
}
.lda-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--paper-deep);
}
.lda-rank {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-align: right;
}
.lda-name {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 14, 'wght' 380;
  font-size: 0.92rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lda-val {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ================================================================
   Deep Dive — monthly bar chart for a topic over time.
   Stat block reuses the .lda-aggregate class above. The chart itself
   is plain CSS columns — one <div> per month, height proportional to
   that month's hit count. Labels stride out as the range widens so
   they don't collide. SVG would be cleaner for axes but flex columns
   keep the dependency footprint at zero.
   ================================================================ */
.dd-chart-wrap { margin: 1.25rem 0 2rem; }
.dd-chart-wrap[hidden] { display: none; }
.dd-chart-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-faint);
  margin-left: 0.4rem;
}

/* Two-row grid: bars + y-axis on top, x-axis labels in their own row
   below. Date labels sit cleanly beneath the chart baseline rather
   than floating on top of it. */
.dd-chart {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: 220px auto;
  column-gap: 0.75rem;
  row-gap: 0.6rem;
  align-items: stretch;
}
.dd-axis-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.dd-cols {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid var(--ink);
}
/* The bar itself is a button — clicking opens Search with the term
   and that month's date range pre-filled. Reset native button chrome
   and let hover deepen the navy so the affordance reads. */
.dd-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}
.dd-col-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  min-height: 1px;
  transition: background 100ms;
}
.dd-col:hover .dd-col-bar { background: var(--accent-deep); }
.dd-col:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Active = the month the result list is currently scoped to. Old Glory
   Red picks up the favicon flourish — same colour as the hero stop. */
.dd-col.is-active .dd-col-bar { background: var(--accent-red); }
.dd-col.is-active:hover .dd-col-bar { background: var(--accent-red); }

/* Month-filter chip uses the same shape as Lobbying's filter chip but
   sits between chart and results to read as "scoped to this month". */
.month-chip {
  margin: 0.4rem 0 1rem;
}
.dd-axis-y-spacer { /* empty grid cell aligning x-axis with bars */ }
.dd-axis-x {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.dd-x-label {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Active filter chip — solid navy pill with a clear button. Shows
   above the aggregate stat block whenever a code filter is on, so
   the active filter is unmissable. The × clears it in one click. */
.lda-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0.3rem;
  padding: 0.45rem 0.45rem 0.45rem 0.95rem;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.lda-filter-chip[hidden] { display: none; }
.lda-filter-chip-label strong {
  font-weight: 500;
  /* slight emphasis on the issue name itself */
}
.lda-filter-chip-clear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(246, 243, 236, 0.15);
  border: none;
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  transition: background 120ms ease;
}
.lda-filter-chip-clear:hover {
  background: rgba(246, 243, 236, 0.3);
}
.lda-filter-chip-clear:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Footnote on a row when activities were hidden by the active filter.
   Quiet caption ink so it reads as context, not a result. */
.lda-hidden-note {
  order: 6;
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Per-row dollar bar — sits inline before the dollar amount in the
   meta row. Width = this filing's $ over the 95th-percentile of the
   filtered set, so a single $40M outlier doesn't crush the rest of
   the bars to invisible. */
.lda-money-bar {
  display: inline-block;
  width: 70px;
  height: 4px;
  background: var(--paper-edge);
  border-radius: 2px;
  vertical-align: 1px;
  margin: 0 0.45rem 0 0;
  overflow: hidden;
}
.lda-money-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* staggered reveal */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result {
  animation: fadeUp 360ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.result:nth-child(1) { animation-delay:   0ms; }
.result:nth-child(2) { animation-delay:  35ms; }
.result:nth-child(3) { animation-delay:  70ms; }
.result:nth-child(4) { animation-delay: 105ms; }
.result:nth-child(5) { animation-delay: 140ms; }
.result:nth-child(6) { animation-delay: 175ms; }
.result:nth-child(7) { animation-delay: 210ms; }
.result:nth-child(n+8) { animation-delay: 240ms; }

/* ================================================================
   Load more
   ================================================================ */

.more {
  text-align: center;
  margin: 2rem 0 0.5rem;
}
#load-more {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.85rem 2rem;
  cursor: pointer;
  min-height: 44px;
  border-radius: 3px;
  transition: all 130ms;
}
#load-more:hover {
  background: var(--ink);
  color: var(--paper);
}
#load-more:active {
  background: var(--accent);
  border-color: var(--accent);
}

/* ================================================================
   Footer
   ================================================================ */

footer {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
}
.footer-inner {
  width: var(--col);
  margin: 0 auto;
  padding: 1.6rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.colophon {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 60ch;
}
.colophon a { color: var(--ink-soft); text-decoration-color: var(--rule); }
.colophon a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.colophon-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.colophon-meta a { color: var(--ink-muted); text-decoration-color: var(--rule); }
.colophon-meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ================================================================
   Mobile — sticky search + bottom-sheet feel for filters
   ================================================================ */

@media (max-width: 880px) {
  .topbar-inner { padding: 0.65rem 0; }
  .wordmark-text { font-size: 1.25rem; }

  main { padding-top: 1.5rem; }

  .hero { max-width: none; }
  .hero .lede { font-size: clamp(2rem, 8vw, 2.6rem); }

  /* re-flow grid: equal halves */
  .filters { grid-template-columns: 1fr 1fr; }
  .filter,
  .filter:nth-child(1),
  .filter:nth-child(2),
  .filter:nth-child(3),
  .filter:nth-child(4),
  .filter:nth-child(5) {
    grid-column: span 1;
    border-right: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
  }
  .filter:nth-child(2n) { border-right: 0; }
  .filter--member { grid-column: span 2 !important; border-right: 0 !important; border-bottom: 0 !important; }

  .pills button { min-height: 38px; padding: 0.5rem 0.85rem; font-size: 0.92rem; }
  .custom-dates input { min-height: 38px; }
  #party, #member-input { min-height: 44px; font-size: 1rem; }
}

@media (max-width: 560px) {
  :root { --gutter: 1rem; }

  .topbar { position: sticky; }
  .topbar-inner { padding: 0.6rem 0; }
  .wordmark .mark svg { width: 20px; height: 20px; }
  .wordmark-text { font-size: 1.15rem; }
  .region-tag { font-size: 0.62rem; padding-left: 0.55rem; margin-left: 0.4rem; letter-spacing: 0.16em; }
  .region-pair { font-size: 0.62rem; padding-left: 0.55rem; margin-left: 0.4rem; letter-spacing: 0.14em; }

  main { padding: 1.25rem 0 3rem; }

  .hero { margin-bottom: 1.25rem; }
  .hero .lede { font-size: clamp(1.85rem, 9vw, 2.3rem); line-height: 1.05; }
  .hero .sub { font-size: 0.95rem; margin-top: 0.7rem; }

  /* sticky search on phones */
  .search {
    position: sticky;
    top: 52px;
    z-index: 20;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 0;
  }
  .search-icon { width: 44px; }
  .search-field input {
    padding: 0.95rem 0.4rem;
    font-size: 1.1rem;
  }
  .primary {
    padding: 0 1.1rem;
    border-radius: 0;
  }
  .primary-kbd { display: none; }

  /* filters — one column, easy to swipe through */
  .filters { grid-template-columns: 1fr; }
  .filter,
  .filter:nth-child(1),
  .filter:nth-child(2),
  .filter:nth-child(3),
  .filter:nth-child(4),
  .filter:nth-child(5) {
    grid-column: span 1;
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
    padding: 0.9rem 1rem;
  }
  .filter:last-child { border-bottom: 0; }
  .filter--member { grid-column: span 1 !important; }

  /* collapse filters by default on phones */
  .filters-shell:not([open]) {
    background: transparent;
  }

  .result { padding: 1.2rem 0 1.3rem; gap: 0.4rem; }
  .result-title { font-size: 1.04rem; }
  .result-meta { font-size: 0.8rem; gap: 0.35rem 0.55rem; }
  .result-date { font-size: 0.68rem; }
  .result-snippet { font-size: 0.93rem; }

  .footer-inner { padding: 1.2rem 0 1.6rem; flex-direction: column; gap: 0.5rem; }
}

/* ================================================================
   Density modes (used by Tweaks)
   ================================================================ */

body[data-density="compact"] .result { padding: 1rem 0 1.05rem; gap: 0.3rem; }
body[data-density="compact"] .result-title { font-size: 1.08rem; }
body[data-density="compact"] .result-snippet { font-size: 0.9rem; line-height: 1.5; }
body[data-density="airy"] .result { padding: 1.9rem 0 2rem; gap: 0.55rem; }
body[data-density="airy"] .result-title { font-size: clamp(1.3rem, 2.8vw, 1.7rem); }

/* ================================================================
   About page
   ================================================================ */

.prose {
  position: relative;
  width: var(--col-narrow);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0 4rem;
  flex: 1;
}
.prose h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: clamp(1.5rem, 3.5vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 2.6rem 0 0.8rem;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 14, 'wght' 380;
  font-size: clamp(1.05rem, 2.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  max-width: 62ch;
  letter-spacing: -0.003em;
}
.prose p strong { font-weight: 600; color: var(--ink); }
.prose p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose p a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

.prose .lede::first-letter {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72, 'wght' 600;
  font-size: 4.4em;
  float: left;
  line-height: 0.88;
  margin: 0.04em 0.08em -0.16em 0;
  color: var(--accent);
}

.changelog {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
.changelog h2 {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 0; }
.entry h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-size: clamp(1.18rem, 2.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
}
.entry .when {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0;
}
.entry p {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.2rem 0 0;
  max-width: 62ch;
  font-variation-settings: normal;
}
.entry p strong { font-weight: 600; color: var(--ink); }
.entry.milestone {
  background: var(--paper-warm);
  margin: 0 calc(var(--gutter) * -1);
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
}
.entry.milestone h3::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 0.6em;
  position: relative;
  top: -0.2em;
}

.prose + footer .back {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.prose + footer .back:hover { color: var(--accent); }

@media (max-width: 560px) {
  .prose .lede::first-letter { font-size: 3.6em; }
  .changelog { margin-top: 2.2rem; }
}

/* ================================================================
   Deep Dive
   ================================================================ */

.dd-main {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.5rem) 0 4rem;
  flex: 1;
}

/* The Deep Dive form is now identical to the Search form — see the
   shared .search rules above. The year-range/year-select blocks are
   gone; date filtering happens in the filters-shell below the form. */

.dd-empty {
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 1.5rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 18, 'wght' 380;
  max-width: 60ch;
}
.dd-empty p { margin: 0 0 0.5rem; }
.dd-empty p:last-child { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.dd-empty strong { color: var(--ink); font-weight: 600; }

.dd-section { display: block; }

/* --- stats row --- */

.dd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  border-radius: 4px;
  overflow: hidden;
}
.dd-stat-cell {
  padding: 1rem 1.1rem 1.1rem;
  border-right: 1px solid var(--rule-soft);
  min-width: 0;
}
.dd-stat-cell:last-child { border-right: 0; }
.dd-stat-label {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dd-stat-big {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.dd-stat-sub {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink-soft);
  /* keep long minister role lines from breaking the cell apart */
  overflow-wrap: anywhere;
}
.dd-stat-sub:empty { display: none; }

/* --- chart --- */

.dd-eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dd-chart-wrap {
  margin: 1.8rem 0 1.5rem;
}
.dd-chart {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  border-radius: 4px;
  padding: 0.75rem;
  box-sizing: border-box;
}
.dd-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}
.dd-chart .dd-axis {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-muted);
  letter-spacing: 0.04em;
}
.dd-chart .dd-bar {
  shape-rendering: crispEdges;
  transition: opacity 120ms;
}
.dd-chart g:hover .dd-bar { opacity: 0.78; }
.dd-chart .dd-bar-skeleton { opacity: 0.55; }
/* Bars double as a month filter — give hover and click the right cues. */
.dd-chart .dd-bar-group { cursor: pointer; }

.dd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin: 0.7rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
/* Legend chips double as party filters — render as buttons. */
.dd-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.dd-legend-chip:hover { border-color: var(--c, var(--rule)); }
.dd-legend-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-legend-chip.is-active {
  background: var(--c, var(--ink-soft));
  color: var(--paper);
  border-color: var(--c, var(--ink-soft));
}
.dd-legend-chip.is-active .dd-legend-swatch {
  background: var(--paper);
  border-color: rgba(255,255,255,0.55);
}
.dd-legend-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--c, currentColor);
  border: 1px solid rgba(20,17,13,0.12);
}
/* Per-party total — hidden by default, slides into view on chip hover.
   Mobile: skipped, the chips are tight enough already. */
.dd-legend-count {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0.7;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 220ms cubic-bezier(0.2,.7,.2,1), margin-left 220ms;
  margin-left: 0;
}
@media (min-width: 561px) and (hover: hover) {
  .dd-legend-chip:hover .dd-legend-count,
  .dd-legend-chip:focus-visible .dd-legend-count,
  .dd-legend-chip.is-active .dd-legend-count {
    max-width: 6rem;
    margin-left: 0.4rem;
  }
}
.dd-legend-loading {
  color: var(--ink-faint);
  font-style: italic;
  cursor: default;
}
.dd-legend-loading:hover { border-color: transparent; }
.dd-caveat {
  margin: 0.7rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
  max-width: 70ch;
}

/* --- side leaderboards --- */

.dd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 1.5rem;
}
@media (max-width: 880px) {
  .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dd-side {
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  border-radius: 4px;
  padding: 1rem 1.1rem 1.1rem;
  min-width: 0;
}
.dd-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.dd-rank li {
  padding: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dd-rank li:last-child { border-bottom: 0; }
/* The whole row is a filter toggle button. Resets browser button
   chrome and stretches the grid edge-to-edge. */
.dd-rank-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.55rem 0.5rem;
  background: none;
  border: 0;
  border-radius: 3px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms;
}
.dd-rank-row:hover { background: var(--paper); }
.dd-rank-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dd-rank-row.is-active { background: var(--accent-tint); }
.dd-rank-row.is-active .dd-rank-name { color: var(--accent); }
.dd-rank-row.is-active .party-tag {
  background: var(--c, var(--ink-muted));
  color: var(--paper);
  border-color: var(--c, var(--ink-muted));
}
.dd-rank-count {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.02em;
  /* optional accent line via the --c custom prop */
  border-left: 3px solid var(--c, var(--rule));
  padding-left: 0.5rem;
}
.dd-rank-name {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 0;
  overflow-wrap: anywhere;
}
a.dd-rank-name {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a.dd-rank-name:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* Party + House tags — shared between Search and Deep Dive so a row of
   results carries the same visual signals on both pages. Party is the
   coloured/bold one (the loud signal); House is the neutral outlined
   sibling (the quiet one) that sits beside it. */
.party-tag,
.house-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: transparent;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
}
.party-tag {
  padding-left: 0.5rem;
  border: 1px solid var(--c, currentColor);
  border-left-width: 3px;
  color: var(--c, var(--ink-muted));
}
.house-tag {
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}
.dd-empty-li {
  display: block;
  padding: 0.55rem 0;
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.88rem;
  border: 0;
}
.dd-rank-more {
  display: none;
  margin: 0.65rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.dd-rank-more:hover { color: var(--accent); text-decoration-color: var(--accent); }
.dd-rank-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- filter bar (active filters, above the contributions list) --- */

.dd-filter-bar {
  margin: 0.6rem 0 1.1rem;
  padding: 0.55rem 0.75rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.dd-filter-bar-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.dd-filter-bar-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-left: auto;
}
.dd-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--c, var(--ink-muted));
  color: var(--paper);
  border: 0;
  padding: 0.22rem 0.45rem 0.22rem 0.7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  max-width: 100%;
  transition: filter 120ms;
}
.dd-filter-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}
.dd-filter-chip-x {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  opacity: 0.8;
}
.dd-filter-chip:hover { filter: brightness(1.08); }
.dd-filter-chip:hover .dd-filter-chip-x { opacity: 1; }
.dd-filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-filter-clear {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.dd-filter-clear:hover { color: var(--accent); text-decoration-color: var(--accent); }
.dd-filter-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- headline list --- */

.dd-headlines-wrap { margin-top: 2rem; }
.dd-headlines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dd-hl {
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.dd-hl:last-child { border-bottom: 0; }
.dd-hl-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.dd-hl-date {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dd-hl-member { color: var(--ink-soft); }
.dd-hl-title {
  margin: 0.1rem 0 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  /* Same compound-title clamp as Search results */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dd-hl-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(0.2,.7,.2,1), color 120ms;
  padding-bottom: 0.05em;
}
.dd-hl-title a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}
.dd-hl-snippet {
  margin: 0.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 72ch;
}
.dd-hl-snippet mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: var(--ink);
  padding: 0 0.15em;
  font-weight: 500;
}

/* highlight current-page topnav link */
.topnav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* --- mobile --- */

@media (max-width: 880px) {
  .dd-stats { grid-template-columns: 1fr 1fr; }
  .dd-stat-cell:nth-child(2n) { border-right: 0; }
  .dd-stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

@media (max-width: 560px) {
  /* Form-specific mobile rules now come from .search; only Deep Dive
     panels need bespoke handling. */
  .dd-stats { grid-template-columns: 1fr 1fr; }
  .dd-stat-cell:nth-child(2n) { border-right: 0; }
  .dd-stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .dd-grid { grid-template-columns: 1fr; gap: 1rem; }
  .dd-chart { padding: 0.4rem; }
  .dd-chart svg { max-height: 280px; }
  .dd-rank:not(.is-expanded) li:nth-child(n+6) { display: none; }
  .dd-rank-more:not([hidden]) { display: inline-flex; }
}

/* ================================================================
   Committees
   ================================================================ */

.cm-results { display: block; margin-top: 1rem; }

.cm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 0 0 1.5rem;
}
@media (max-width: 880px) {
  .cm-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.cm-side-note {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
}

.cm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-item {
  padding: 0.9rem 0 1rem;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  gap: 0.3rem;
}
.cm-item:last-child { border-bottom: 0; }
.cm-item-title {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 28, 'wght' 500;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.cm-item-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(0.2,.7,.2,1), color 120ms;
  padding-bottom: 0.04em;
}
.cm-item-title a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}

.cm-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.cm-meta-line {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.cm-meta-date {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.cm-meta-inquiry {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.cm-meta-inquiry:hover { color: var(--accent); text-decoration-color: var(--accent); }

.cm-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
}
.cm-tag-open   { border-color: var(--src-spoken, var(--accent)); color: var(--src-spoken, var(--accent)); }
.cm-tag-closed { border-color: var(--rule); color: var(--ink-faint); }

.cm-witnesses {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}
.cm-witness {
  display: inline-block;
}
.cm-witness-ctx {
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.cm-witness-more {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.78rem;
}

.cm-empty-li {
  list-style: none;
  padding: 0.55rem 0;
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

/* One-line summary of an inquiry's scope, fetched lazily after the
   search renders. Quieter than the title, sits between the meta-tags
   and the latest-report line. */
.cm-inquiry-desc {
  margin: 0.15rem 0 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* --- archive switcher on the Transcripts page --- */

.tr-archives {
  margin: 0 0 1rem;
  padding: 1rem 0 1.2rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.tr-archives .dd-eyebrow { margin: 0 0 0.7rem; }

/* Rolling row at the top — the always-current default, prominent. */
.tr-archive-rolling { margin: 0 0 0.9rem; }
.tr-archive-rolling-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms;
}
.tr-archive-rolling-btn:hover { border-color: var(--ink); background: var(--paper-warm); }
.tr-archive-rolling-btn[aria-checked="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tr-archive-rolling-label { font-weight: 500; }
.tr-archive-rolling-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.tr-archive-rolling-btn[aria-checked="true"] .tr-archive-rolling-count {
  color: var(--paper);
  opacity: 0.75;
}

/* Year × Quarter grid for sealed archives. */
.tr-archive-grid {
  border-collapse: separate;
  border-spacing: 0.3rem;
  margin: 0 -0.3rem;        /* align edge of cells with rolling button */
  font-family: var(--sans);
  font-size: 0.85rem;
}
.tr-archive-grid thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  text-align: center;
  padding: 0.25rem 0.4rem;
}
.tr-archive-year {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 18, 'wght' 500;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
  padding: 0 0.6rem 0 0;
  font-weight: 500;
  white-space: nowrap;
}
.tr-archive-cell {
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.tr-archive-empty {
  color: var(--ink-faint);
  font-family: var(--mono);
}
.tr-archive-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 100%;
  min-width: 4rem;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 120ms;
}
.tr-archive-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-warm);
}
.tr-archive-btn[aria-checked="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tr-archive-btn-count {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' 1;
}
.tr-archive-btn-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.tr-archive-btn[aria-checked="true"] .tr-archive-btn-label {
  color: var(--paper);
  opacity: 0.75;
}

@media (max-width: 560px) {
  /* Tighten the grid so all 4 quarters + year fit a 360px viewport. */
  .tr-archive-grid { font-size: 0.78rem; border-spacing: 0.2rem; }
  .tr-archive-grid thead th { font-size: 0.6rem; padding: 0.15rem 0.2rem; }
  .tr-archive-year { font-size: 0.85rem; padding-right: 0.4rem; }
  .tr-archive-btn { min-width: 3rem; padding: 0.3rem 0.3rem; }
  .tr-archive-btn-count { font-size: 0.85rem; }
  .tr-archive-btn-label { font-size: 0.55rem; }
}

/* --- transcript text search section --- */

.cm-transcript-section {
  margin: 2rem 0 1rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--rule);
}
.cm-transcript-header { margin: 0 0 1rem; }
.cm-transcript-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 400;
}
.cm-transcript-load {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  max-width: 60ch;
}
.cm-transcript-load p {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 18, 'wght' 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cm-transcript-fineprint {
  margin-top: 0.8rem !important;
  font-family: var(--sans) !important;
  font-size: 0.8rem !important;
  font-style: italic;
  color: var(--ink-muted) !important;
}
.cm-witnesses-inline { color: var(--ink-muted); font-size: 0.82rem; }
.cm-snippet-more {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.4rem;
}
.cm-snippet-more .cm-meta-inquiry-btn { font-style: italic; }

/* Overflow snippets — hidden by default, revealed when the parent
   .cm-item has .is-snippets-expanded (the user clicked '+ N more'). */
.cm-snippet-overflow { display: none; }
.cm-item.is-snippets-expanded .cm-snippet-overflow { display: list-item; }

/* The "+ N more" toggle button. Quiet text-button styling. */
.cm-snippet-expand {
  margin: 0.5rem 0 0;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.cm-snippet-expand:hover { color: var(--accent); text-decoration-color: var(--accent); }
.cm-snippet-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.cm-snippet-expand .cm-expand-hide { display: none; }
.cm-item.is-snippets-expanded .cm-snippet-expand .cm-expand-show { display: none; }
.cm-item.is-snippets-expanded .cm-snippet-expand .cm-expand-hide { display: inline; }

/* Title-as-button — drills into the inquiry view. Resets browser button
   chrome so it reads as a heading link. */
.cm-drill-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(0.2,.7,.2,1), color 120ms;
  padding-bottom: 0.04em;
}
.cm-drill-btn:hover { background-size: 100% 1px; color: var(--accent); }
.cm-drill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Inquiry-meta button (the inquiry name shown on a session row) — same
   underline-on-hover treatment as a meta link. */
.cm-meta-inquiry-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.cm-meta-inquiry-btn:hover { color: var(--accent); text-decoration-color: var(--accent); }
.cm-meta-inquiry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* "Read transcript ↗" secondary link below a session row. */
.cm-secondary-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
}
.cm-secondary-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Focus highlight on a session row inside an inquiry's session list,
   when the user arrived via clicking that specific session. */
.cm-item.is-focus {
  background: var(--accent-tint);
  border-radius: 3px;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* --- drill-in view (one inquiry) --- */

.cm-inquiry-view {
  display: block;
  margin-top: 0.5rem;
}

.cm-back-btn {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.cm-back-btn:hover { color: var(--accent); }
.cm-back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.cm-inquiry-header {
  margin: 0 0 1.6rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.cm-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
.cm-inquiry-title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.cm-inquiry-extlink {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.cm-inquiry-extlink a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
}
.cm-inquiry-extlink a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.cm-inquiry-search {
  margin: 0 0 2rem;
}
.cm-inquiry-search .search { margin-top: 0.5rem; }

.cm-inquiry-sessions { margin: 0 0 2rem; }
.cm-inquiry-matches  { margin: 0 0 2rem; }

/* Snippet list inside a per-session match block */
.cm-snippets {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.cm-snippet {
  list-style: none;
}
.cm-snippet-link {
  display: grid;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  background: var(--paper-warm);
  border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms;
}
.cm-snippet-link:hover {
  background: var(--paper);
  border-left-color: var(--accent);
}
.cm-snippet-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Prior turn (the question above an answer) — quieter, sits ABOVE the
   matching snippet's link card with a small gap. Two flavours: a static
   div (when the prior fits the cap), and a button that toggles between
   truncated and full text on click (when the prior was truncated). */
.cm-snippet-prior {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0.8rem 0.55rem;
  background: var(--paper-warm);
  border-left: 2px dashed var(--rule);
  border-radius: 0 3px 3px 0;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.55;
  margin-bottom: -0.4rem;            /* nestle into the link below */
  text-align: left;
  width: 100%;
}
button.cm-snippet-prior {
  border-top: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.cm-snippet-prior:hover { background: var(--paper); border-left-color: var(--accent); }
button.cm-snippet-prior:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-snippet-prior-toggle {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.cm-snippet-prior.is-collapsed .cm-snippet-prior-full,
.cm-snippet-prior.is-collapsed .cm-toggle-hide { display: none; }
.cm-snippet-prior.is-expanded  .cm-snippet-prior-truncated,
.cm-snippet-prior.is-expanded  .cm-toggle-show { display: none; }

.cm-snippet-current {
  display: grid;
  gap: 0.2rem;
}
.cm-snippet-speaker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cm-snippet-text { display: block; }
.cm-snippet mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: var(--ink);
  padding: 0 0.15em;
  font-weight: 500;
}

/* ================================================================
   Reduced motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================================================================
   Estimates surface — section rows. Each row is one department's
   grilling for one date, with senator-questioner + witness chips
   and a search snippet pulled from the session transcript.
   ================================================================ */

.est-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.est-row {
  display: grid;
  gap: 0.4rem;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
  transition: background 140ms;
}
.est-row:hover { background: linear-gradient(to right, var(--paper-warm), transparent 70%); }
.est-row:last-child { border-bottom: 1px solid var(--ink); }

.est-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.est-section {
  margin: 0.05rem 0 0.1rem;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.est-section a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 220ms cubic-bezier(0.2, 0.7, 0.2, 1), color 120ms;
  padding-bottom: 0.05em;
}
.est-section a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}

.est-roles {
  margin: 0.15rem 0 0;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: baseline;
}
.est-roles-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.1rem;
}
.est-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--ink-soft);
}
.est-chip-more {
  background: transparent;
  color: var(--ink-faint);
  border-style: dashed;
}

.est-snippet {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 72ch;
}
.est-snippet mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%);
  color: inherit;
}

@media (max-width: 560px) {
  .est-row { padding: 1.2rem 0 1.3rem; }
  .est-section { font-size: 1.04rem; }
  .est-snippet { font-size: 0.92rem; }
}