/*
 * The Open Brief stylesheet.
 *
 * Two layers live here:
 *   1. Dossier design system — light-mode brief / news-magazine look.
 *      Drives the public surfaces (home/search, MP briefing, org profile)
 *      and the top chrome across the app. See "Dossier" sections.
 *   2. Tailwind-subset utilities — hand-curated classes still referenced
 *      by admin templates (scoped inside `.admin-shell`). Rebuild via
 *      `make tailwind` if you introduce new utilities outside this list.
 *
 * Surface palette: near-white slate with subtle blue tint, layered via
 * --bg-0..3 (lightest → darkest). Foreground via --fg-0..3 (darkest →
 * muted). Accent is indigo (--accent-h: 245). Component code uses the
 * tokens; if you find a baked oklch() outside :root, replace it with a
 * token — the design switches between light/dark by editing :root only.
 */

/* =====================================================================
 * Dossier — design tokens
 * ===================================================================== */
:root {
  /* Surface scale — lightest (page) to darkest (chrome edges). */
  --bg-0: oklch(0.99  0.005 240);
  --bg-1: oklch(0.97  0.008 240);
  --bg-2: oklch(0.94  0.010 240);
  --bg-3: oklch(0.91  0.012 240);
  --line: oklch(0.86  0.012 240 / 0.9);
  --line-strong: oklch(0.78 0.014 240);

  /* Foreground scale — darkest (headlines) to muted (caption). */
  --fg-0: oklch(0.22  0.012 240);
  --fg-1: oklch(0.36  0.012 240);
  --fg-2: oklch(0.48  0.012 240);
  --fg-3: oklch(0.62  0.010 240);

  --accent-h: 245;
  --accent:   oklch(0.48 0.16 var(--accent-h));   /* indigo */
  --accent-2: oklch(0.42 0.18 var(--accent-h));   /* deeper indigo */
  --accent-soft: oklch(0.94 0.04 var(--accent-h));/* light pill bg */
  --accent-ring: oklch(0.48 0.16 var(--accent-h) / 0.30);

  --flag:      oklch(0.62 0.16 70);
  --flag-soft: oklch(0.96 0.06 70);                /* light amber */
  --pos:       oklch(0.55 0.13 155);
  --pos-soft:  oklch(0.96 0.05 155);               /* light emerald */
  --neg:       oklch(0.55 0.18 25);
  --neg-soft:  oklch(0.96 0.05 25);                /* light rose */

  --p-national: oklch(0.55 0.16 250);
  --p-labour:   oklch(0.55 0.20 25);
  --p-greens:   oklch(0.55 0.16 150);
  --p-act:      oklch(0.62 0.16 85);
  --p-nzfirst:  oklch(0.50 0.16 285);
  --p-maori:    oklch(0.55 0.18 15);
  --p-teal:     oklch(0.55 0.13 195);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --pad-section: 28px;
  --gap-section: 32px;
}

/* =====================================================================
 * Reset
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--line); }
html, body { margin: 0; padding: 0; }
html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a { color: inherit; text-decoration: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; background: transparent; }
button { cursor: pointer; }
form { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }

/* =====================================================================
 * Dossier — body & chrome
 * ===================================================================== */
body.app {
  background: var(--bg-0);
  color: var(--fg-0);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.app::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% -10%, oklch(0.95 0.04 var(--accent-h) / 0.6), transparent 55%),
    radial-gradient(circle at 110% 20%, oklch(0.94 0.04 285 / 0.5), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Keep content above the fixed ::before gradient without forcing a
   stacking context on every direct child — an explicit z-index here
   would outrank the topbar's z-index:40 (same specificity rules the
   old CSS tripped over, which made the admin dropdown render behind
   page cards). */
body.app > *:not(.topbar) { position: relative; }

.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-feature-settings: "zero"; }

/* Top chrome */
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(16px);
  background: oklch(1 0 0 / 0.85);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 28px;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.brand-mark { height: 32px; width: auto; display: block; }
.brand-name { height: 22px; width: auto; display: block; }
.brand-env {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--fg-3);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.topbar-spacer { flex: 1; }
.topbar-nav { display: flex; gap: 4px; align-items: center; }
.topbar-link {
  color: var(--fg-1); text-decoration: none;
  font-size: 13px; padding: 7px 12px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  background: transparent; border: 0;
}
.topbar-link:hover { background: var(--bg-2); color: var(--fg-0); }
.topbar-link.is-active { color: var(--fg-0); background: var(--bg-2); }
/* Pro nav link — promoted from a plain link with a trailing ◆ glyph
   to a chiclet pill in the accent gradient so the paid surface reads
   as a clear "go here" affordance from the rest of the bar. The same
   class is reused whether the link points to /pro (marketing, anon /
   Free) or /pro/dashboard (entitlement, Pro / Team) — the destination
   differs but the visual treatment is consistent. */
.topbar-link--pro {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--bg-0) !important;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: 0.01em;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.topbar-link--pro:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}
.topbar-link--pro.is-active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 3px rgba(15,23,42,0.25);
}

/* Nav mega-search — topbar typeahead for MPs + topics. */
.nav-search-wrap {
  position: relative;
  flex: 1 1 200px;
  max-width: 340px;
  min-width: 0;
  z-index: 45;
}
.nav-search-input-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-1, #f5f5ef);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px oklch(0.7 0.15 var(--accent-h) / 0.15);
}
.nav-search-icon { color: var(--fg-3); flex-shrink: 0; }
.nav-search-input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-size: 13px; color: var(--fg-0);
  font-family: inherit;
}
.nav-search-input::placeholder { color: var(--fg-3); }
.nav-search-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}
.nav-search-dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 380px;
  margin-top: 4px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 50;
  overflow: hidden;
  max-height: 420px; overflow-y: auto;
}
.nav-search-dropdown:empty { display: none; }
.nav-search-results { padding: 4px 0; }
.nav-search-group { padding: 4px 0; }
.nav-search-group + .nav-search-group { border-top: 1px solid var(--line); }
.nav-search-group-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); padding: 6px 14px 4px;
}
.nav-search-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  text-decoration: none; color: var(--fg-1);
  transition: background 0.1s;
}
.nav-search-row:hover,
.nav-search-row.is-focused { background: var(--bg-2); color: var(--fg-0); }
.nav-search-row-bar {
  width: 2px; height: 24px; border-radius: 1px;
  background: var(--accent); flex-shrink: 0;
}
.nav-search-row-icon {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--accent); flex-shrink: 0;
}
.nav-search-row-avatar { flex-shrink: 0; border-radius: 50%; }
.nav-search-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-search-row-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-row-meta { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-row-arrow { color: var(--fg-3); font-size: 12px; flex-shrink: 0; }
.nav-search-empty { padding: 16px 14px; font-size: 13px; color: var(--fg-2); text-align: center; }
.nav-search-all {
  display: block; text-align: center;
  padding: 8px 14px; font-size: 12px; font-weight: 500;
  color: var(--accent); text-decoration: none;
  border-top: 1px solid var(--line);
}
.nav-search-all:hover { background: var(--bg-1); }

/* Mega menu — dropdown groups in the topbar nav (Profiles, Media Watch,
 * Analysis). Same <details>/<summary> pattern as admin/account dropdowns.
 * Each panel shows links with a title + description line for clarity. */
.mega-wrap {
  position: relative;
  isolation: isolate;
  z-index: 50;
}
.mega-wrap > summary { list-style: none; cursor: pointer; }
.mega-wrap > summary::-webkit-details-marker { display: none; }
.mega-toggle {
  color: var(--fg-1); text-decoration: none;
  font-size: 13px; padding: 7px 12px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  background: transparent; border: 0;
  display: inline-flex; align-items: center; gap: 5px;
  user-select: none;
}
.mega-toggle:hover { background: var(--bg-2); color: var(--fg-0); }
.mega-toggle.is-active { color: var(--fg-0); background: var(--bg-2); }
.mega-wrap[open] > .mega-toggle { background: var(--bg-2); color: var(--fg-0); }
.mega-wrap[open]::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 100%; height: 8px;
}
.mega-panel {
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 300px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 6px;
  z-index: 50;
}
.mega-item {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg-1);
  transition: background 0.12s;
}
.mega-item:hover { background: var(--bg-3); }
.mega-item.is-active { background: var(--bg-2); }
.mega-item-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-0);
  line-height: 1.3;
}
.mega-item-desc {
  display: block;
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.4;
  margin-top: 2px;
}

/* Avatar circle. Promoted out of the old .topbar-user descendant
   selector so it works wherever it's rendered (account dropdown
   toggle today; future profile cards / member rows). flex: none
   keeps it from getting squished into an oval inside flex containers
   like the dropdown toggle. */
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-3);
  display: grid; place-items: center;
  font-size: 11px; color: var(--fg-0); font-weight: 500;
  flex: none;
}

/* Admin dropdown
 *
 * Built on native <details> + <summary>. Two gotchas fixed here:
 *   1. The default ▶ summary marker shows up as a bullet in Safari/Firefox;
 *      we hide it with ::-webkit-details-marker and list-style: none.
 *   2. The topbar has backdrop-filter which creates its own stacking
 *      context. We give .admin-menu-wrap `isolation: isolate` + explicit
 *      z-index so the panel draws above siblings without leaking through
 *      the blurred backdrop. The panel is a solid hex (not oklch with
 *      alpha) so it reads as fully opaque regardless of what's behind.
 */
.admin-menu-wrap {
  position: relative;
  isolation: isolate;
  z-index: 60;
}
.admin-menu-wrap > summary { list-style: none; }
.admin-menu-wrap > summary::-webkit-details-marker { display: none; }
.admin-toggle {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-1);
  font-size: 12px; padding: 6px 10px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  user-select: none;
}
.admin-toggle:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.admin-menu-wrap[open] > .admin-toggle { background: var(--bg-2); color: var(--fg-0); }
.admin-toggle .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 6px;
  z-index: 60;
  /* The menu has grown past what fits on a laptop screen; cap it to the
     viewport and scroll internally so every item stays reachable. The
     section labels stick to the top as you scroll for orientation. */
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-panel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3); padding: 8px 10px 4px;
  /* Stick to the top while the (now scrollable) panel scrolls, so the
     current section stays labelled. */
  position: sticky; top: -6px;
  background: white;
}
.admin-panel a {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--fg-1); font-size: 13px;
  padding: 7px 10px; border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
.admin-panel a:hover { background: var(--bg-3); color: var(--fg-0); }
.admin-panel a.is-active { background: var(--bg-2); color: var(--fg-0); }

/* Account dropdown
 *
 * Mirrors .admin-menu-wrap structurally (native <details> + summary +
 * a panel anchored to the toggle). Visual differences from the admin
 * menu: the toggle leads with the avatar circle and shows "Account"
 * rather than a status dot + word; the panel has a header strip with
 * the user's email + tier badge so the email is still discoverable
 * once it's removed from the topbar. New per-tier surfaces (Watchlist,
 * Alerts, etc.) slot in as additional <a> rows with no extra plumbing.
 */
.account-menu-wrap {
  position: relative;
  isolation: isolate;
  z-index: 60;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.account-menu-wrap > summary { list-style: none; }
.account-menu-wrap > summary::-webkit-details-marker { display: none; }
.account-toggle {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-1);
  font-size: 12px; padding: 4px 10px 4px 4px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  user-select: none;
  cursor: pointer;
}
.account-toggle:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.account-menu-wrap[open] > .account-toggle { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.account-toggle-avatar {
  width: 24px; height: 24px;
}
.account-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 6px;
  z-index: 60;
}
.account-panel-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.account-panel-email {
  font-size: 12.5px;
  color: var(--fg-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-panel-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-top: 4px;
}
.account-panel-tier-sub {
  color: var(--fg-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.account-panel a,
.account-panel button {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--fg-1);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
}
.account-panel a:hover,
.account-panel button:hover { background: var(--bg-3); color: var(--fg-0); }
.account-panel a.is-active { background: var(--bg-2); color: var(--fg-0); }
.account-panel-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 8px;
}
.account-panel-logout { margin: 0; }

/* Mobile navigation hamburger
 *
 * Hidden by default — shown via the @media (max-width: 768px) block
 * lower in this file, where .topbar-nav and the standalone Party
 * Donors trigger are simultaneously hidden. Built on the same native
 * <details> + <summary> pattern as the admin / account dropdowns so
 * we don't pull in JS for a CSS-toggleable affordance. The panel
 * anchors right-aligned to the toggle and is constrained to the
 * viewport width so it never overflows the screen on a 360px phone.
 */
.nav-menu-wrap {
  position: relative;
  isolation: isolate;
  z-index: 60;
  display: none;
}
.nav-menu-wrap > summary { list-style: none; cursor: pointer; }
.nav-menu-wrap > summary::-webkit-details-marker { display: none; }
.nav-toggle {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-1);
  padding: 8px 10px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
}
.nav-toggle:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.nav-menu-wrap[open] > .nav-toggle { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle-bars > span {
  width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  display: block;
}
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px;
  max-width: calc(100vw - 24px);
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 6px;
  z-index: 60;
}
.nav-menu-panel a {
  display: block;
  color: var(--fg-1);
  font-size: 13.5px;
  padding: 9px 10px; border-radius: 6px;
  text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--bg-3); color: var(--fg-0); }
.nav-menu-panel a.is-active { background: var(--bg-2); color: var(--fg-0); }
.nav-menu-panel-pro {
  color: var(--accent) !important;
  font-weight: 600;
}
.nav-menu-panel-pro.is-active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.nav-menu-panel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3); padding: 8px 10px 4px;
}
.nav-menu-panel-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 8px;
}

.page-wrap { flex: 1; display: flex; flex-direction: column; }

/* Period picker. Its own row between the topbar and the page content
 * on time-bound pages (press / discourse / comparison). Right-aligned
 * inside the row so it reads as a page-scoped control rather than
 * page chrome. Two modes share the control: ISO-week snapshot
 * navigation and rolling 7-day. Free-tier users see locked rows in
 * the dropdown for the Pro upsell. */
.period-picker {
  background: white;
  border-bottom: 1px solid var(--line);
}
.period-picker-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 8px 24px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.period-mode-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px; gap: 0;
  background: var(--bg-2);
}
.period-mode-btn {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  color: var(--fg-2); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.period-mode-btn:hover { color: var(--fg-0); }
.period-mode-btn.is-active {
  background: white; color: var(--fg-0);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.period-week-nav {
  display: inline-flex; align-items: center; gap: 4px;
}
.period-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--line); background: white;
  color: var(--fg-1); text-decoration: none;
  font-size: 12px; line-height: 1;
}
.period-arrow:hover { background: var(--bg-2); color: var(--fg-0); }
.period-arrow.is-disabled {
  color: var(--fg-3); border-color: var(--line); background: var(--bg-2);
  cursor: not-allowed;
}
.period-week-select { position: relative; }
.period-week-summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: white;
  cursor: pointer; list-style: none;
  font-weight: 500; color: var(--fg-0);
  font-size: 12px;
}
.period-week-summary::-webkit-details-marker { display: none; }
.period-week-summary:hover { border-color: var(--line-strong); }
.period-week-select[open] > .period-week-summary {
  border-color: var(--line-strong); background: var(--bg-2);
}
.period-week-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 6px; z-index: 40;
  display: flex; flex-direction: column;
}
.period-week-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 6px;
  color: var(--fg-1); text-decoration: none;
  font-size: 13px;
}
.period-week-option:hover { background: var(--bg-3); color: var(--fg-0); }
.period-week-option.is-active { background: var(--bg-2); color: var(--fg-0); font-weight: 500; }
.period-week-option.is-locked {
  color: var(--fg-3); cursor: not-allowed;
}
.period-week-lock {
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
}
.period-week-upsell {
  margin-top: 4px; padding: 7px 10px;
  font-size: 12px; color: var(--accent-2);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.period-week-upsell:hover { background: var(--bg-3); }
.period-jump-current {
  padding: 4px 8px;
  font-size: 11px; color: var(--fg-2);
  text-decoration: none;
  border-radius: 6px;
}
.period-jump-current:hover { background: var(--bg-2); color: var(--fg-0); }
.period-rolling-label {
  color: var(--fg-2); font-size: 11px;
  font-style: italic;
}
/* Period-picker help icon. JS-free <details>; the panel anchors to the
 * right so it doesn't get cut off by the viewport edge when the picker
 * is right-aligned in the row. */
.period-help { position: relative; display: inline-flex; align-items: center; }
.period-help-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: white;
  color: var(--fg-2);
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.period-help-trigger::-webkit-details-marker { display: none; }
.period-help-trigger:hover { color: var(--fg-0); border-color: var(--line-strong); background: var(--bg-2); }
.period-help[open] > .period-help-trigger {
  background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong);
}
.period-help-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(360px, calc(100vw - 32px));
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.04);
  padding: 14px 16px; z-index: 50;
  font-size: 12px; line-height: 1.5; color: var(--fg-1);
}
.period-help-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--fg-3);
  margin: 0 0 6px;
}
.period-help-h + .period-help-h { margin-top: 12px; }
.period-help-list {
  list-style: disc; margin: 0 0 4px; padding-left: 18px;
}
.period-help-list li { margin: 0 0 6px; }
.period-help-list strong { color: var(--fg-0); }
.period-help-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--fg-2); font-size: 11px;
}
/* Tighten the row on narrow widths so the picker doesn't wrap onto two
 * lines but stays usable down to a phone. The mode toggle text shrinks
 * to "Wk / 7d" so the whole control fits on one row. */
@media (max-width: 640px) {
  .period-picker-inner { padding: 8px 12px; gap: 6px; }
  .period-week-summary { padding: 4px 8px; max-width: 180px; }
  .period-week-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .period-jump-current { display: none; }
}
.page { max-width: 1440px; margin: 0 auto; padding: 40px 28px 80px; width: 100%; }

.flash-rail {
  max-width: 1440px; margin: 16px auto 0;
  padding: 0 28px;
  width: 100%;
}
.flash {
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--fg-1);
  display: flex; gap: 8px; align-items: center;
}
.flash.is-error { border-color: color-mix(in oklch, var(--neg) 35%, var(--line)); color: var(--neg); background: var(--neg-soft); }
.flash.is-success { border-color: color-mix(in oklch, var(--pos) 35%, var(--line)); color: var(--pos); background: var(--pos-soft); }

/* =====================================================================
 * Search / landing page
 * ===================================================================== */
/* Search is the landing surface so it reads as focused — the design
   holds it ~320px narrower than the topbar (1120 vs 1440) so the bar
   feels prominent rather than stretched across a wide screen.
   width: 100% is load-bearing — page-wrap is a flex column container,
   so a child with only max-width would collapse to content width. */
.search-page { max-width: 1120px; width: 100%; margin: 0 auto; padding: 80px 28px 80px; }
.search-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.search-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-headline {
  font-size: 38px; line-height: 1.15;
  font-weight: 500; margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.search-sub { color: var(--fg-2); font-size: 15px; margin: 0 0 36px; max-width: 60ch; }
.search-bar {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.06);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.search-bar:hover {
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.08);
}
.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 28px oklch(0 0 0 / 0.08);
}
.search-bar-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
}
.search-bar-icon { color: var(--accent); flex-shrink: 0; }
.search-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--fg-0); font-size: 16px; font-weight: 500;
}
.search-input::placeholder { color: var(--fg-2); font-weight: 400; }
.search-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--fg-3);
  padding: 3px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg-0);
}

.search-results-pane {
  margin-top: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.result-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3);
  padding: 14px 16px 6px;
}
.result-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  color: var(--fg-1);
  border-left: 2px solid transparent;
  border-top: 1px solid var(--line);
}
.result-row:first-child { border-top: 0; }
.result-row:hover, .result-row:focus {
  background: var(--bg-2);
  border-left-color: var(--accent);
  color: var(--fg-0);
  outline: none;
}
.result-row .party-bar-inline { width: 3px; height: 32px; border-radius: 2px; background: var(--party-color, var(--fg-3)); flex-shrink: 0; }
.result-row .name { color: var(--fg-0); font-weight: 500; font-size: 14px; }
.result-row .meta { color: var(--fg-2); font-size: 12px; }
.result-row .arrow { margin-left: auto; color: var(--fg-3); }
.result-empty {
  padding: 24px 16px; text-align: center;
  color: var(--fg-3); font-size: 13px;
}
.result-bootstrap {
  padding: 18px;
  color: var(--fg-1);
  font-size: 13px;
  display: flex; gap: 10px; align-items: center;
}
.result-bootstrap::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.search-meta-strip {
  margin-top: 18px;
  display: flex; gap: 24px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.search-meta-strip span b { color: var(--fg-1); font-weight: 500; }

/* Electorate combobox — collapsed-by-default disclosure under the
 * main MP search bar. Sits visually as a quieter sibling: the
 * summary line is one row, the panel below opens on click and
 * carries its own typeahead input + scrollable result list.
 *
 * Implemented as <details>/<summary> so open/close is native; HTMX
 * loads the full alphabetised electorate roster on first focus
 * (hx-trigger=load) so opening always shows something concrete. */
.electorate-combobox {
  margin-top: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.electorate-combobox[open] {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 20px oklch(0 0 0 / 0.05);
}
.electorate-combobox-summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  user-select: none;
}
.electorate-combobox-summary::-webkit-details-marker { display: none; }
.electorate-combobox-summary:hover { background: var(--bg-2); }
.electorate-combobox-label {
  font-size: 13px; font-weight: 500; color: var(--fg-0);
  letter-spacing: 0.01em;
}
.electorate-combobox-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
}
.electorate-combobox-chev {
  margin-left: auto; color: var(--fg-2);
  transition: transform 0.15s ease;
}
.electorate-combobox[open] .electorate-combobox-chev {
  transform: rotate(180deg);
}
.electorate-combobox-panel {
  border-top: 1px solid var(--line);
  background: #ffffff;
}
.electorate-search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.electorate-search-bar .search-bar-icon { color: var(--fg-2); }
.electorate-search-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--fg-0); font-size: 14px; font-weight: 500;
}
.electorate-search-input::placeholder { color: var(--fg-3); font-weight: 400; }
.electorate-results-scroll {
  max-height: 360px;
  overflow-y: auto;
}
.electorate-results-pane .result-group-label {
  position: sticky; top: 0;
  background: #ffffff;
  z-index: 1;
}
.electorate-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  color: var(--fg-1);
  border-left: 2px solid transparent;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.electorate-row:first-of-type { border-top: 0; }
.electorate-row:hover, .electorate-row:focus {
  background: var(--bg-2);
  border-left-color: var(--accent);
  color: var(--fg-0);
  outline: none;
}
.electorate-row .party-bar-inline { width: 3px; height: 28px; border-radius: 2px; background: var(--party-color, var(--fg-3)); flex-shrink: 0; }
.electorate-row .electorate-name { color: var(--fg-0); font-weight: 500; font-size: 14px; }
.electorate-row .electorate-mp { color: var(--fg-2); font-size: 12px; }
.electorate-row .arrow { margin-left: auto; color: var(--fg-3); }

/* Pinned MPs card grid below the search bar. */
.search-section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 48px 0 14px;
}
.search-section-title h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-2); font-weight: 500; margin: 0;
}
/* One-line description sitting between a section title and its grid.
 * Quiet copy; tells a first-time visitor what they're looking at and
 * what clicking does. Sits in the same horizontal rhythm as the
 * grid below (no extra top margin — the title block already
 * provides the vertical spacing). */
.search-section-byline {
  margin: -6px 0 14px;
  font-size: 13px; line-height: 1.45; color: var(--fg-2);
  max-width: 70ch;
}

/* Discourse-at-a-glance CTA — sits in the right slot of the section
 * title where the "N ministers" mono caption usually goes. Replaces
 * the count with a forward-pointing link to the full discourse view. */
.home-discourse-cta {
  font-size: 12px; color: var(--accent-2); font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.home-discourse-cta:hover { text-decoration: underline; }

/* =====================================================================
 * Home page zones — three capabilities, three identities
 *
 * The home page surfaces three primary capabilities — People (MP
 * briefings), Discourse (commentary lens), and Press (news lens).
 * Each gets a colored zone header so a reader scrolling through the
 * page can recognise *which* product they're looking at without
 * reading the heading. Zone palettes mirror the heatmap palettes
 * used on the corresponding /discourse and /press surfaces, so the
 * home teaser and the destination feel like the same thing.
 *
 * Tokens are hex (not oklch) to match the ECharts heatmap gradients
 * exactly: discourse uses indigo-500/800, press uses amber-500/700.
 * ===================================================================== */
.zone {
  margin-top: 56px;
  position: relative;
}
.zone + .zone { margin-top: 64px; }

.zone-header {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.zone-header::after {
  content: ""; position: absolute;
  left: 0; bottom: -1px;
  width: 64px; height: 2px;
  background: var(--zone-color);
  border-radius: 1px;
}
.zone-marker {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--zone-color);
  box-shadow: 0 0 0 4px var(--zone-soft);
  flex-shrink: 0;
}
.zone-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--zone-strong);
  font-weight: 500;
}
.zone-title {
  font-size: 20px; font-weight: 500;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.zone-cta {
  margin-left: auto;
  font-size: 12px; color: var(--zone-strong);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
}
.zone-cta:hover { text-decoration: underline; }
.zone-byline {
  margin: 14px 0 18px;
  font-size: 13.5px; line-height: 1.5; color: var(--fg-2);
  max-width: 70ch;
}
.zone-byline a { color: var(--zone-strong); text-decoration: underline; text-decoration-color: var(--line); }
.zone-byline a:hover { text-decoration-color: var(--zone-strong); }

.zone-people {
  --zone-color:  #10b981;
  --zone-strong: #047857;
  --zone-soft:   #d1fae5;
}
.zone-discourse {
  --zone-color:  #6366f1;
  --zone-strong: #3730a3;
  --zone-soft:   #e0e7ff;
}
.zone-press {
  --zone-color:  #f59e0b;
  --zone-strong: #b45309;
  --zone-soft:   #fef3c7;
}

/* Subsection titles inside the People zone (Government / Opposition /
 * Pinned) pick up the zone marker color on the count caption. The
 * heading itself stays neutral so the page still reads as a single
 * People surface rather than three disconnected mini-zones. */
.zone-people .search-section-title { margin-top: 28px; }
.zone-people .search-section-title:first-of-type { margin-top: 18px; }

/* Card accents within each zone. The colored left rail is the
 * cheapest way to make a grid of cards "feel" like part of a zone
 * without redrawing them — the rest of the card stays the dossier
 * white-on-line look so densities still match. */
.zone-discourse .digest-card,
.zone-press .digest-card {
  border-left: 3px solid var(--zone-color);
}
.zone-discourse .digest-card:hover,
.zone-press .digest-card:hover {
  border-color: var(--zone-soft);
  border-left-color: var(--zone-strong);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.05);
}
/* The press digest variant pre-existing on /press already paints its
 * own amber rail — null it out inside the zone wrapper so the rule
 * above wins and we don't double-paint. */
.zone-press .digest-card.digest-card-press { border-left-color: var(--zone-color); }

/* Zone-aware anomaly cards. The anomaly grid sits inside the
 * Discourse zone on the home page; its cards already encode subject
 * kind (topic/mp/source) via left-border color, so we leave those
 * alone and only tint the surrounding background. */
.zone-discourse .anomaly-grid { margin-bottom: 18px; }

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Two-grid disclosure: first ~4 cards always live in their own grid
 * above; the rest live inside a sibling <details>. Avoids the
 * cross-browser headache of overriding the user-agent's content-hide
 * on closed <details> children — here, when closed the browser hides
 * only the second grid (which is what we want); the first grid is
 * outside the <details> entirely. */
.recent-grid-more {
  margin-top: 14px;
}
/* Toggle is the primary call-to-action between rows — wide enough
 * to read as a button, accent-tinted so it doesn't blur into the
 * grid above. Sits left-aligned with a chunky chevron. */
.recent-grid-more > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--accent-2);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.recent-grid-more > summary::-webkit-details-marker { display: none; }
.recent-grid-more > summary:hover {
  background: var(--accent-ring);
  border-color: var(--accent-2);
  color: white;
}
.recent-grid-more > summary:active { transform: translateY(1px); }
.recent-grid-more > summary .recent-grid-toggle-hide,
.recent-grid-more[open] > summary .recent-grid-toggle-show {
  display: none;
}
.recent-grid-more[open] > summary .recent-grid-toggle-hide {
  display: inline;
}
.recent-grid-more[open] > summary .recent-grid-toggle-chev {
  transform: rotate(180deg);
}
.recent-grid-toggle-chev {
  width: 12px; height: 12px;
  transition: transform 0.15s;
}
.recent-grid-more-list { margin-top: 14px; }
.recent-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  overflow: hidden;
  color: inherit;
  display: block;
}
.recent-card:hover {
  border-color: var(--line-strong);
  background: var(--bg-2);
  transform: translateY(-1px);
}
.recent-card .party-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--party-color, var(--accent));
}
.recent-card .recent-head {
  display: flex; gap: 12px; align-items: center;
}
.recent-card .recent-name {
  font-size: 14px; font-weight: 600; color: var(--fg-0);
  letter-spacing: -0.01em;
}
.recent-card .recent-sub {
  font-size: 12px; color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-card .recent-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--fg-3);
}
.recent-card .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--bg-3);
  color: var(--fg-1);
}

/* =====================================================================
 * Avatar
 * ===================================================================== */
.avatar-mp {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-soft) 0%, var(--bg-2) 100%);
  display: grid; place-items: center;
  color: var(--accent-2); font-weight: 600; font-size: 13px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.avatar-mp.large { width: 72px; height: 72px; font-size: 24px; }
.avatar-mp.xl { width: 96px; height: 96px; font-size: 30px; }

/* When the avatar is a real headshot the <img> inherits .avatar-mp's
 * round border + size; object-fit keeps portrait crops centred without
 * stretching. overflow:hidden kills any 1px bleed at the border. */
img.avatar-mp { object-fit: cover; overflow: hidden; background: none; }

/* Hero avatar column — photo on top, tiny attribution line underneath.
 * Used only on the briefing page's photo branch; initial-letter branch
 * keeps the flat div. */
.avatar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.photo-credit { font-size: 10px; color: var(--fg-3); letter-spacing: 0.02em; }
.photo-credit a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line); }
.photo-credit a:hover { text-decoration-color: var(--fg-2); }

/* =====================================================================
 * Briefing layout
 * ===================================================================== */
.briefing-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 48px;
  padding-top: 16px;
}
.briefing-layout.no-sidepanel { grid-template-columns: 200px minmax(0, 1fr); }

.rail {
  position: sticky; top: 88px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-top: 4px;
}
.rail-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-2); font-size: 12px;
  padding: 6px 0;
  margin-bottom: 20px;
}
.rail-back:hover { color: var(--fg-0); }
.rail-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line);
}
.rail-item {
  position: relative;
  padding: 6px 12px;
  margin-left: -1px;
  font-size: 13px;
  color: var(--fg-2);
  border-left: 1px solid transparent;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.15s, border-color 0.15s;
}
.rail-item:hover { color: var(--fg-0); }
.rail-item.is-active {
  color: var(--fg-0);
  border-left-color: var(--accent);
}
.rail-item .c {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
}
.rail-item.is-active .c { color: var(--accent); }

/* Hero */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, oklch(1 0 0) 0%, oklch(0.99 0.01 240) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px 32px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.03);
}
.hero-partybar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--party-color, var(--accent));
}
.hero-row { display: flex; gap: 22px; align-items: flex-start; }
.hero-main { flex: 1; min-width: 0; }
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.08em;
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.hero-eyebrow .dot-sep { color: var(--fg-3); opacity: 0.5; }
.hero-name {
  font-size: 26px;
  font-weight: 500; margin: 0 0 6px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.hero-name .honorific { color: var(--fg-2); font-weight: 500; }
.hero-role-line { color: var(--fg-2); font-size: 14px; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-1);
  text-decoration: none;
}
a.chip:hover { background: var(--accent-soft); color: var(--accent-2); }
.chip .bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); }
.chip.party .bullet { background: var(--party-color, var(--accent)); }
.chip.mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fg-2); }
.chip.flag { background: var(--flag-soft); color: var(--flag); border-color: transparent; }
.chip.flag .bullet { background: var(--flag); }
/* Atlas Network membership badge — amber, distinct from lean/kind chips so
   the "globally networked" signal reads at a glance on /lobby. */
.chip.atlas { background: #fef3c7; color: #92400e; border-color: #fcd34d; font-weight: 500; }
a.chip.atlas:hover { background: #fde68a; color: #78350f; }
.chip.atlas .bullet { background: #d97706; }
.chip.atlas.former { background: #f5f5f4; color: #78716c; border-color: #e7e5e4; }
.chip.atlas.former .bullet { background: #a8a29e; }
.chip.warn { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
/* Candidacy cross-link chip on the MP hero — uses the same yellow
 * cycle-pill tone as the candidate brief's eyebrow so the eye
 * recognises "election-cycle context" at a glance. */
a.chip.chip-candidacy {
  background: rgba(250, 204, 21, 0.10);
  color: #92400e;
  border-color: rgba(250, 204, 21, 0.32);
  font-weight: 500;
}
a.chip.chip-candidacy:hover {
  background: rgba(250, 204, 21, 0.18);
  color: #92400e;
}

.hero-stats {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hero-stat .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 6px;
}
.hero-stat .v {
  font-size: 20px; font-weight: 500; color: var(--fg-0);
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 6px;
}
.hero-stat .v .unit {
  font-size: 11px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
}

/* Sections */
.section { padding: var(--pad-section) 0 0; scroll-margin-top: 88px; }
.section + .section { margin-top: var(--gap-section); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-head h2 {
  font-size: 17px; font-weight: 600; margin: 0;
  letter-spacing: -0.015em;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-0);
}
.section-head h2 .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
  font-weight: 400;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.section-head .asof {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
}
.section-note {
  color: var(--fg-2); font-size: 13px;
  margin: -6px 0 12px;
}

/* Cards */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.card + .card { margin-top: 10px; }
.card-empty {
  padding: 18px 20px;
  color: var(--fg-3);
  font-size: 13px;
  font-style: italic;
}

/* Key-value table */
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
/* display: contents hoists .k and .v into the parent grid so the
   two-column layout works even though they're wrapped in a .kv-row
   for html readability. */
.kv-row { display: contents; }
.kv-row > * { padding: 14px 18px; border-top: 1px solid var(--line); }
.kv-row:first-child > * { border-top: 0; }
.kv-row .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: 500;
  background: var(--bg-1);
}
.kv-row .v { color: var(--fg-0); font-size: 13.5px; }
.kv-row .v .item { display: block; padding: 2px 0; }
.kv-row .v .item + .item { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.kv-row .v .sub { color: var(--fg-2); font-size: 12.5px; margin-top: 2px; }

.flag-inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--flag);
  padding: 1px 6px;
  background: var(--flag-soft);
  border-radius: 4px;
}
.flag-inline::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--flag);
}

.badge-sector {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg-3); color: var(--fg-1);
}
.badge-sector.is-portfolio { background: var(--flag-soft); color: var(--flag); }

/* List (positions / roles / directorships) */
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows li {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline;
}
.list-rows li:first-child { border-top: 0; }
.list-rows .label { color: var(--fg-0); font-weight: 500; font-size: 13.5px; }
.list-rows .label a { color: var(--fg-0); }
.list-rows .label a:hover { color: var(--accent); }
.list-rows .detail { color: var(--fg-2); font-size: 12.5px; }
.list-rows .when { color: var(--fg-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; white-space: nowrap; }
.a-link { color: var(--accent); }
.a-link:hover { color: var(--fg-0); text-decoration: underline; }

/* Meetings section */
.meetings-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter-chip {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
  padding: 5px 10px; border-radius: 999px;
}
.filter-chip:hover { color: var(--fg-0); background: var(--bg-2); }
.filter-chip.is-on {
  color: var(--accent);
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

.meetings-summary {
  color: var(--fg-2); margin-bottom: 14px; font-size: 13px;
}
.meetings-summary b { color: var(--fg-0); font-weight: 500; }

.timeline {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
}
.timeline-axis { position: relative; height: 64px; }
.timeline-ticks {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--fg-3);
}
.timeline-bars {
  position: absolute; left: 0; right: 0; top: 14px; bottom: 22px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.timeline-cluster {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 500;
  color: var(--accent);
  transition: transform 0.15s;
  box-shadow: 0 0 0 2px var(--bg-0);
}
.timeline-cluster:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 2; }
.timeline-cluster.flag { background: var(--flag-soft); border-color: var(--flag); color: var(--flag); }
.timeline-cluster[data-small="1"] .timeline-count { display: none; }
.timeline-legend {
  display: flex; gap: 14px; margin-top: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.timeline-legend .d { width: 8px; height: 8px; border-radius: 50%; }

.meetings-list {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.day-group { display: block; }
.day-group + .day-group { border-top: 1px solid var(--line); }
.day-group > summary { list-style: none; cursor: pointer; }
.day-group > summary::-webkit-details-marker { display: none; }
.day-head {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 0;
  color: var(--fg-1);
  text-align: left;
}
.day-head:hover { background: var(--bg-2); }
.day-chev {
  color: var(--fg-3);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.day-group[open] > .day-head .day-chev { transform: rotate(180deg); }
.day-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap;
}
.day-weekday {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
.day-counts {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.day-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-2);
  white-space: nowrap;
}
.day-body { padding: 6px 0 10px; background: var(--bg-1); }
.meeting-sub {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 16px 10px 36px;
  align-items: start;
  position: relative;
  border-top: 1px solid var(--line);
}
.meeting-sub:first-child { border-top: 0; }
.meeting-sub::before {
  content: "";
  position: absolute;
  left: 22px; top: 18px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fg-3);
  opacity: 0.6;
}
.meeting-sub .main { min-width: 0; }
.meeting-sub .who {
  color: var(--fg-0); font-weight: 500; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.meeting-sub .who a { color: var(--fg-0); }
.meeting-sub .who a:hover { color: var(--accent); }
.meeting-sub .desc { color: var(--fg-2); font-size: 12.5px; }
.meeting-sub .attendees { color: var(--fg-3); font-size: 12px; margin-top: 4px; }
.meeting-sub .flag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--flag);
  box-shadow: 0 0 0 3px var(--flag-soft);
}
.meeting-sub.is-portfolio { background: var(--flag-soft); }

.type-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Plain-paragraph section content */
.prose-section { color: var(--fg-1); font-size: 13.5px; }
.prose-section p { margin: 0 0 8px; }

/* At-a-glance side panel */
.side-panel { position: sticky; top: 88px; align-self: start; }
.mini {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
}
.mini-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3); font-weight: 500;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.mini-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  gap: 12px;
}
.mini-row:first-of-type { border-top: 0; padding-top: 0; }
.mini-row .k { color: var(--fg-2); }
.mini-row .v { color: var(--fg-0); font-weight: 500; }
.mini-flag {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--flag-soft);
  color: var(--flag);
  font-size: 12px;
  display: flex; gap: 10px; align-items: flex-start;
}
.mini-flag .icon { flex-shrink: 0; margin-top: 2px; }

/* =====================================================================
 * Dossier forms + tables + buttons
 *
 * Everything below lives on the dark surface. Admin templates use these
 * directly — no light-mode wrapper. Keep the class names small and
 * scoped-by-container so pages that want a bespoke layout can drop in
 * their own surfaces without fighting a utility soup.
 * ===================================================================== */
.dossier-heading {
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin-bottom: 6px;
}
.dossier-sub { color: var(--fg-2); font-size: 14px; margin-bottom: 24px; }
.dossier-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-field label {
  font-size: 11px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.form-field .hint { color: var(--fg-3); font-size: 12px; }
.form-field .error { color: var(--neg); font-size: 12px; }

.input,
.dossier-surface input[type="text"],
.dossier-surface input[type="search"],
.dossier-surface input[type="email"],
.dossier-surface input[type="password"],
.dossier-surface input[type="url"],
.dossier-surface input[type="number"],
.dossier-surface input[type="file"],
.dossier-surface select,
.dossier-surface textarea {
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  color: var(--fg-0);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus,
.dossier-surface input:focus,
.dossier-surface select:focus,
.dossier-surface textarea:focus {
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dossier-surface input[type="file"]::file-selector-button {
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  margin-right: 10px;
  cursor: pointer;
}
.dossier-surface input[type="file"]::file-selector-button:hover { background: color-mix(in oklch, var(--bg-3), white 10%); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  background: var(--bg-2);
  color: var(--fg-0);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-3); border-color: var(--fg-3); }
.btn-primary {
  background: var(--accent);
  color: var(--bg-0);
  border-color: transparent;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-danger {
  background: transparent;
  color: var(--neg);
  border-color: color-mix(in oklch, var(--neg) 50%, var(--line));
}
.btn-danger:hover { background: var(--neg-soft); color: var(--neg); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-2); color: var(--fg-0); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--fg-1);
  text-transform: uppercase;
}
.tag.ok { background: var(--pos-soft); color: var(--pos); }
.tag.warn { background: var(--flag-soft); color: var(--flag); }
.tag.err { background: var(--neg-soft); color: var(--neg); }
.tag.info { background: var(--accent-soft); color: var(--accent); }
.tag.muted { background: var(--bg-3); color: var(--fg-3); }

.dossier-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 13px;
}
.dossier-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: 500;
  padding: 10px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.dossier-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-1);
  vertical-align: top;
}
.dossier-table tbody tr:first-child td { border-top: 0; }
.dossier-table tbody tr:hover { background: var(--bg-2); }
/* /lobby amplification scoreboard — right-aligned tabular metrics. */
.lobby-scoreboard th.num, .lobby-scoreboard td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-scoreboard th { font-size: 11px; }
.lobby-scoreboard td a { color: var(--fg-0); font-weight: 500; }
.lobby-scoreboard td a:hover { color: var(--accent); }
.dossier-table a { color: var(--fg-0); }
.dossier-table a:hover { color: var(--accent); text-decoration: underline; }
.dossier-table .when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--fg-3);
  white-space: nowrap;
}

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  gap: 12px; flex-wrap: wrap;
}
.panel-head h3 {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.panel-head .asof {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
}
.panel-empty {
  color: var(--fg-3); font-size: 13px; font-style: italic;
  padding: 8px 0;
}

.kvlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  font-size: 13px;
}
.kvlist dt, .kvlist .k {
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 3px;
}
.kvlist dd, .kvlist .v { margin: 0; color: var(--fg-0); }
.kvlist a { color: var(--accent); }
.kvlist a:hover { text-decoration: underline; }

/* Pagination + toolbar helpers */
.toolbar {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pager { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.pager .pager-meta { color: var(--fg-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* =====================================================================
 * Tailwind-subset utilities
 *
 * Kept as a thin compatibility layer. Public surfaces don't use them —
 * the dossier primitives above are the path forward. They exist so any
 * admin template we haven't restyled yet keeps working (fragments,
 * etc.). The color map is the dark palette now, not slate.
 * ===================================================================== */
.flex{display:flex}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-baseline{align-items:baseline}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.min-w-0{min-width:0}.min-h-screen{min-height:100vh}
.max-w-5xl{max-width:64rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}
.mx-auto{margin-left:auto;margin-right:auto}.w-full{width:100%}.h-full{height:100%}
.align-top{vertical-align:top}

.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-10{margin-top:2.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}
.space-y-1 > * + *{margin-top:.25rem}
.space-y-2 > * + *{margin-top:.5rem}
.space-y-3 > * + *{margin-top:.75rem}
.space-y-4 > * + *{margin-top:1rem}

.text-\[10px\]{font-size:10px;line-height:1.2}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.font-normal{font-weight:400}.font-medium{font-weight:500}
.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}
.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.break-all{word-break:break-all}
.underline{text-decoration:underline}
.cursor-pointer{cursor:pointer}
.opacity-60{opacity:.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Slate/amber/emerald/red class names remap onto the dossier palette so
   any template we haven't yet restyled (or an HTMX fragment) still reads
   well on the (now light) surface. Tokens are dossier-native underneath:
   slate-50..200 are light surfaces, slate-700..900 are dark text scales,
   amber/red/emerald-50 are tinted backgrounds. */
.bg-slate-50{background:var(--bg-1)}
.bg-slate-100{background:var(--bg-2)}
.bg-slate-200{background:var(--bg-3)}
.bg-slate-700{background:var(--bg-3)}.bg-slate-800{background:var(--bg-2)}.bg-slate-900{background:var(--bg-1)}
.bg-white{background:var(--bg-1)}
.bg-red-50{background:var(--neg-soft)}
.bg-emerald-50{background:var(--pos-soft)}
.bg-amber-50{background:var(--flag-soft)}
.bg-amber-200{background:oklch(0.88 0.10 70)}
.bg-amber-700{background:var(--flag)}

.text-white{color:var(--fg-0)}
.text-slate-400{color:var(--fg-3)}.text-slate-500{color:var(--fg-3)}
.text-slate-600{color:var(--fg-2)}.text-slate-700{color:var(--fg-1)}
.text-slate-800{color:var(--fg-0)}.text-slate-900{color:var(--fg-0)}
.text-red-800{color:var(--neg)}
.text-emerald-700{color:var(--pos)}.text-emerald-800{color:var(--pos)}
.text-amber-700{color:var(--flag)}.text-amber-800{color:var(--flag)}.text-amber-900{color:var(--flag)}

.border{border-width:1px;border-style:solid;border-color:var(--line)}
.border-t{border-top-width:1px;border-top-style:solid;border-top-color:var(--line)}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--line)}
.border-l-4{border-left-width:4px;border-left-style:solid;border-left-color:var(--line-strong)}
.border-slate-200{border-color:var(--line)}.border-slate-300{border-color:var(--line-strong)}
.border-slate-400{border-color:var(--fg-3)}.border-slate-500{border-color:var(--fg-3)}
.border-red-200,.border-red-300{border-color:color-mix(in oklch, var(--neg) 40%, var(--line))}
.border-emerald-200,.border-emerald-300{border-color:color-mix(in oklch, var(--pos) 40%, var(--line))}
.border-amber-200,.border-amber-300{border-color:color-mix(in oklch, var(--flag) 40%, var(--line))}
.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}

.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:border-slate-500:focus{border-color:var(--accent-ring)}
.hover\:bg-slate-50:hover{background:var(--bg-2)}
.hover\:bg-slate-100:hover{background:var(--bg-2)}
.hover\:bg-slate-700:hover{background:var(--bg-3)}
.hover\:bg-slate-800:hover{background:var(--bg-3)}
.hover\:bg-amber-800:hover{background:color-mix(in oklch, var(--flag) 80%, black)}
.hover\:text-slate-900:hover{color:var(--fg-0)}
.hover\:text-red-800:hover{color:var(--neg)}

/* =====================================================================
 * Discourse Lens — /discourse + /discourse/topics/{label}
 *
 * Built on the same .card / .pill / .chip vocabulary as the rest of
 * the dossier, with a few discourse-specific patterns:
 *   .digest-grid + .digest-card  : weekly digest cards (5-up)
 *   .discourse-chart-card        : white card hosting an ECharts canvas
 *   .topic-hero                  : detail-page hero
 *   .framing-grid + .framing-card: per-orientation framing samples
 * ===================================================================== */
.discourse-page { max-width: 1280px; width: 100%; margin: 0 auto; padding: 56px 28px 80px; }
.discourse-hero { max-width: 720px; margin: 0 0 32px; }

/* Hero CTA — primary button on its own line with a small hint
 * caption below, used on landing surfaces where a sibling cross-corpus
 * view should be surfaced more prominently than an inline anchor.
 * Stacked (not inline) so the hint reads as a subtitle to the button
 * rather than a sentence flowing off its right edge. */
.hero-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 18px 0 0;
}
.hero-action-hint {
  font-size: 12.5px; color: var(--fg-2);
  max-width: 60ch; line-height: 1.45;
}

.section-title { display: flex; flex-direction: column; gap: 4px; margin: 36px 0 12px; scroll-margin-top: 134px; }
.section-title h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); }
.section-title p  { font-size: 13px; color: var(--fg-2); margin: 0; }

.digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.digest-card {
  display: block; padding: 18px;
  background: white; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer; color: inherit;
  /* positioning context for .digest-card-link::after, the
     stretched-link pseudo that makes the whole card clickable
     while the inner chip <a>s stay individually navigable. */
  position: relative;
}
.digest-card:hover {
  border-color: var(--accent-ring);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.04);
}
/* Stretched-link pattern. The ::after pseudo expands across the
   whole card, so a click anywhere outside an inner <a> still
   navigates to the topic detail. Chips opt out via z-index: 2. */
.digest-card-link {
  display: block;
  color: var(--fg-0);
  text-decoration: none;
}
.digest-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-md);
}
.digest-card .chip { position: relative; z-index: 2; }
/* Press variant — amber left rail so the corpus is visually distinct
   from the discourse digest cards on the home page. The two grids
   sit one above the other; without a marker they collapse into "two
   identical-looking sections" and the reader has to lean on the
   heading to keep them apart. */
.digest-card-press {
  border-left: 3px solid #b45309;
}
.digest-card-press:hover {
  border-left-color: #b45309;
}
.digest-label {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.25; color: var(--fg-0); min-height: 2.4em;
}
.digest-stat-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.digest-n { font-size: 28px; font-weight: 300; color: var(--fg-0); }
.digest-unit { font-size: 11px; color: var(--fg-3); }
.digest-trend { font-size: 11.5px; margin-left: auto; color: var(--fg-2); }
.digest-framing { font-size: 12.5px; color: var(--fg-1); font-style: italic; line-height: 1.4; margin: 12px 0 0; }
.digest-sources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.digest-stance { margin-top: 10px; }
.digest-stance-bar {
  display: flex; width: 100%; height: 6px;
  border-radius: 3px; overflow: hidden;
  background: var(--bg-2);
}
.digest-stance-seg { height: 100%; min-width: 2px; }

/* Methodology page. Reuses the briefing rail/section shell — these
 * rules just style the prose card and the live-data tables. */
.methodology-page .method-section { margin-top: 28px; }
.methodology-page .method-card {
  padding: 22px 24px;
  background: white;
  font-size: 14.5px; line-height: 1.55; color: var(--fg-1);
}
.methodology-page .method-card p { margin: 0 0 10px; }
.methodology-page .method-card p:last-child { margin-bottom: 0; }
.methodology-page .method-card h3 {
  font-size: 16px; font-weight: 600; color: var(--fg-0);
  margin: 18px 0 8px; letter-spacing: -0.005em;
}
.methodology-page .method-card ul,
.methodology-page .method-card ol { margin: 0 0 12px; padding-left: 22px; }
.methodology-page .method-card li { margin-bottom: 4px; }
.methodology-page .method-steps { padding-left: 22px; }
.methodology-page .method-substeps {
  margin: 6px 0 6px; padding-left: 18px; font-size: 13.5px; color: var(--fg-2);
}
.methodology-page .method-note {
  margin-top: 14px; padding: 10px 12px;
  background: var(--bg-1); border-left: 3px solid var(--accent-ring);
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--fg-1);
}
.method-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 14px;
}
.method-table th, .method-table td {
  padding: 6px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.method-table thead th {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-1);
}
.method-table-note { font-size: 12px; color: var(--fg-2); }
.method-table-empty { font-size: 12px; color: var(--fg-3); font-style: italic; }

/* Plain-English explainer block. Sits at the top of technical
 * sections so non-technical readers get the gist before the detail.
 * Visual treatment is muted-but-distinct so it reads as "context",
 * not as "warning". */
.method-plain {
  padding: 12px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--fg-1);
  margin: 0 0 12px;
}

/* Methodology cross-link rendered by the methodLink template helper.
 * Sized to sit unobtrusively next to a section heading or card stat
 * — small, accent-tinted, with its own hover affordance. */
.method-link {
  display: inline-block;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--accent-2);
  letter-spacing: 0.02em;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.method-link:hover { text-decoration: underline; }

.discourse-chart-card { padding: 16px; background: white; }

/* Source × topic sparkline matrix.
 *
 * The table can grow wider than the viewport when 8 sources are
 * shown — wrap in a horizontal scroller rather than letting cells
 * shrink, so each spark stays readable.
 *
 * `position: sticky` on the topic-name column keeps the row label
 * visible while scrolling sideways. */
.discourse-matrix-card { padding: 0; background: white; overflow: hidden; }
.sparkline-matrix-scroll { overflow-x: auto; padding: 8px 12px 12px; }
.sparkline-matrix { border-collapse: collapse; width: max-content; min-width: 100%; }
.sparkline-matrix th, .sparkline-matrix td {
  padding: 8px 10px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.sparkline-matrix thead th {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.matrix-corner {
  font-size: 10.5px; color: var(--fg-3);
  position: sticky; left: 0; background: var(--bg-1); z-index: 2;
  min-width: 200px;
}
.matrix-source-head {
  display: table-cell; min-width: 110px; vertical-align: bottom;
}
.matrix-source-head .matrix-source-stack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.matrix-source-head .matrix-source-name {
  color: var(--fg-1); font-size: 11.5px;
  text-transform: none; letter-spacing: 0; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
}
.matrix-source-head a.matrix-source-name:hover { color: var(--accent-2); text-decoration: underline; }
.matrix-source-head .pill-sm {
  display: inline-block; font-size: 9.5px; padding: 1px 6px;
  border-radius: 999px; text-transform: lowercase;
  white-space: nowrap;
}
.matrix-topic-head {
  font-size: 12.5px; font-weight: 500; color: var(--fg-0);
  position: sticky; left: 0; background: white; z-index: 1;
  min-width: 200px; max-width: 220px;
  text-transform: none; letter-spacing: 0;
}
.matrix-topic-head a { color: var(--fg-0); }
.matrix-topic-head a:hover { color: var(--accent-2); }
.matrix-cell {
  width: 110px; min-width: 110px;
  position: relative;
}
.matrix-cell .spark {
  display: block; width: 96px; height: 22px;
  margin-bottom: 2px;
}
.matrix-cell .matrix-total {
  font-size: 10.5px; color: var(--fg-3);
}
.sparkline-matrix tbody tr:hover .matrix-topic-head { background: var(--bg-1); }
.sparkline-matrix tbody tr:hover td { background: oklch(0.99 0 0); }

/* Reach badge on each matrix column header — small, low-key.
 * Renders only when the source has a reach signal (anchored,
 * estimated, or inferred). Cued in the title attr; the badge itself
 * is just the number so the column header doesn't get noisy. */
.matrix-source-head .matrix-source-reach {
  display: inline-block; font-size: 9.5px; padding: 1px 5px;
  border-radius: 4px; background: var(--bg-1); color: var(--fg-2);
  white-space: nowrap; cursor: help;
}

/* One-line framing that names the question each toggle mode answers.
 * Sits between the long collapsible "why" and the actual toggle so a
 * skimmer who never opens the explainer still gets the framing. */
.discourse-matrix-framing {
  margin: 12px 0 4px;
  font-size: 13px; color: var(--fg-1);
  line-height: 1.45;
}
.discourse-matrix-framing strong { color: var(--fg-0); }

/* Toolbar above the matrix — toggle between raw count and reach-
 * weighted attention. Uses the existing .chip vocabulary plus a
 * small toggle-active state. */
.discourse-matrix-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; flex-wrap: wrap;
}
.discourse-matrix-toolbar-label {
  font-size: 12px; color: var(--fg-2);
}
.chip-toggle {
  cursor: pointer; user-select: none;
  background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--bg-2);
  padding: 3px 10px; font-size: 11px;
  border-radius: 999px; transition: background 0.12s ease, color 0.12s ease;
}
.chip-toggle:hover { background: var(--bg-2); }
.chip-toggle.is-active {
  background: var(--accent-2); color: white;
  border-color: var(--accent-2);
}

/* Collapsible Layer 3 sections (graph, anomalies). The native
 * <details> chev keeps things accessible without extra JS. */
.discourse-collapsible { margin-top: 36px; }
.discourse-collapsible > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
  position: relative; padding-left: 22px;
}
.discourse-collapsible > summary::-webkit-details-marker { display: none; }
.discourse-collapsible > summary::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.discourse-collapsible[open] > summary::before { transform: rotate(45deg); top: 8px; }
.discourse-collapsible .section-title-h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0);
}
.discourse-collapsible .section-title-sub {
  font-size: 13px; color: var(--fg-2);
}
.graph-helper {
  font-size: 12.5px; color: var(--fg-2); margin: 0 0 12px;
  max-width: 64ch; line-height: 1.45;
}

/* Anomaly cards — sit above the digest when the detector has flagged
 * step-change events. Visual treatment is purposely a touch louder
 * than the rest of the page so they read as "this needs your eyes". */
.anomaly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.anomaly-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.anomaly-card.anomaly-topic  { border-left-color: #6366f1; }
.anomaly-card.anomaly-mp     { border-left-color: #db2777; }
.anomaly-card.anomaly-source { border-left-color: #059669; }
.anomaly-kind {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
}
.anomaly-headline {
  font-size: 14.5px; font-weight: 500; color: var(--fg-0); line-height: 1.3;
}
.anomaly-headline a { color: inherit; }
.anomaly-headline a:hover { color: var(--accent-2); }
.anomaly-stat-row {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
}
.anomaly-ratio {
  font-size: 18px; font-weight: 500; color: var(--accent-2); letter-spacing: -0.01em;
}
.anomaly-detail { font-size: 11px; color: var(--fg-2); }
.anomaly-when { font-size: 10.5px; color: var(--fg-3); margin-top: 2px; }

/* Stance breakdown bar — segmented horizontal bar showing the
 * supportive/critical/etc ratio for one topic. Hidden by the handler
 * when fewer than 5 edges have been classified, so by the time you
 * see it the totals are meaningful. */
.stance-card { padding: 16px 18px; background: white; }
.stance-bar {
  display: flex; width: 100%; height: 26px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-2);
}
.stance-seg {
  height: 100%; min-width: 4px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 11px; letter-spacing: 0.02em;
  transition: filter 0.15s;
}
.stance-seg:hover { filter: brightness(1.08); }
.stance-pct { color: white; font-weight: 500; }
.stance-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; font-size: 11.5px; color: var(--fg-2);
}
.stance-key { display: inline-flex; align-items: center; gap: 6px; }
.stance-key-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}
.stance-key-label { color: var(--fg-1); }
.stance-key-count { color: var(--fg-3); font-size: 11px; }

/* "How the public reacted" panel (socialReactionPanel partial) —
 * .card has no default padding, so without these rules the headline,
 * stance/sentiment bars, and toplist eyebrow all run flush with the
 * card border. Padding the card body fixes that; the toplist breaks
 * back out to full-bleed via negative margin so its border-top divider
 * still spans the whole card, and the .list-rows nested inside also
 * negative-margin out so its existing .list-rows li 18px horizontal
 * padding aligns with the headline above instead of double-indenting. */
.social-reaction-card { padding: 14px 18px; }
.social-reaction-card .social-reaction-toplist {
  margin: 18px -18px 0;
  padding: 14px 18px 0;
  border-top: 1px solid var(--line);
}
.social-reaction-card .social-reaction-toplist .list-rows {
  margin: 8px -18px -14px;
}

/* Small coloured indicator beside a label — used on /press outlet
   list and anywhere a quiet status pill would feel too heavy. */
.lean-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px;
  vertical-align: 1px;
}

/* Page-byline freshness annotation on /press and /discourse landings.
   Smaller and quieter than the main search-sub paragraph above it so
   the headline copy keeps its weight. */
.freshness-line {
  margin-top: 4px;
  font-size: 12.5px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: baseline;
  color: var(--fg-2);
}

/* MP briefing — commentary topic timeline panel.
 *
 * Vertical stack of rows: topic name (left) → fixed-width sparkline
 * (centre-left) → total badge (right). Width is capped so the line
 * stays a "sparkline" rather than a stretched chart on wide screens.
 * The axis-row at the top reuses the same column template so week
 * labels sit directly above the sparkline they describe. */
.topic-timeline { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }

.topic-timeline-axis,
.topic-timeline-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 260px 56px;
  align-items: center;
  column-gap: 18px;
}
.topic-timeline-axis {
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.topic-timeline-weeks {
  display: flex; justify-content: space-between;
  width: 260px;
  font-size: 9.5px; color: var(--fg-3); letter-spacing: 0.02em;
}

.topic-timeline-row {
  padding: 8px 0;
  border-bottom: 1px dashed oklch(0.94 0 0);
}
.topic-timeline-row:last-child { border-bottom: none; }

.topic-timeline-name {
  font-size: 13px; font-weight: 500; color: var(--fg-0);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topic-timeline-name:hover { color: var(--accent-2); }

.topic-timeline-spark {
  width: 260px;
  background: var(--bg-1);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}
.topic-timeline-spark .spark { display: block; width: 100%; height: 26px; }

/* In-press panel on /discourse/topics/{slug}. Header row holds the
   label, sparkline, and total — kept tight together so the eye reads
   them as a single statement ("12-week press volume: ▁▂▃ 5") rather
   than three things drifting apart in a wide bar. The sparkline is
   hard-capped at 140×26 because it inherits .spark which uses
   preserveAspectRatio="none" — without that cap the SVG stretches
   to the panel's full width and the line becomes a fat band. */
.press-panel { padding: 0; }
.press-panel-spark {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.press-panel-spark .press-panel-label {
  font-size: 12.5px; color: var(--fg-2); white-space: nowrap;
}
.press-panel-spark .spark {
  flex: 0 0 140px;
  height: 26px;
  display: block;
}
.press-panel-spark .press-panel-total {
  font-size: 13px; color: var(--fg-1);
  white-space: nowrap;
}
.press-panel-headlines li:first-child { border-top: 1px solid var(--line); }

.topic-timeline-total {
  font-size: 13px; color: var(--fg-1); text-align: right; font-weight: 500;
}

.empty-card {
  background: var(--bg-1); border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 24px; text-align: center; color: var(--fg-2); font-size: 14px;
}
.empty-card code { font-size: 12.5px; padding: 2px 6px; background: var(--bg-2); border-radius: 4px; }

/* Topic lens sub-nav — tabbed bar for switching between
 * Discourse / Press / Social / Blended on a topic page. */
.topic-lens-nav {
  background: var(--bg-1, #f5f5ef);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.topic-lens-nav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.topic-lens-tabs {
  display: flex; gap: 2px;
}
.topic-lens-tab {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 16px 8px;
  text-decoration: none;
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  border-radius: 6px 6px 0 0;
}
.topic-lens-tab:hover {
  color: var(--fg-0);
  background: var(--bg-2, #eceae2);
}
.topic-lens-tab.is-active {
  color: var(--fg-0);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.topic-lens-tab-label { font-size: 13px; font-weight: inherit; }
.topic-lens-tab-desc { font-size: 10.5px; color: var(--fg-3); }
.topic-lens-tab.is-active .topic-lens-tab-desc { color: var(--fg-2); }
.topic-lens-tab-badge {
  display: inline-block;
  font-size: 9px; font-weight: 600;
  padding: 1px 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--bg-0);
  border-radius: 3px;
  vertical-align: 1px;
}
/* Deep variant — topic detail pages. Darker shade signals
 * the user is one level below the landing page. */
.topic-lens-nav--deep {
  background: var(--bg-2, #eceae2);
}
.topic-lens-nav--deep .topic-lens-tab {
  color: var(--fg-3);
}
.topic-lens-nav--deep .topic-lens-tab.is-active {
  color: var(--fg-0);
}
.topic-lens-back {
  display: flex; align-items: center;
  width: 130px;
  margin-right: 12px; padding-right: 12px;
  border-right: 1px solid var(--line);
  font-size: 12px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
  flex-shrink: 0;
}
.topic-lens-back:hover { color: var(--accent-2); text-decoration: underline; }
.topic-lens-period {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}

/* Sub-nav responsive behaviour.
 *
 * Desktop crams a tab row and the period picker into one non-wrapping flex
 * row. On phones that row is wider than the viewport, shoving the period
 * picker off-screen. Two different fixes, depending on whether the tabs are
 * reachable elsewhere:
 *
 *  - Landing navs (Discourse/Press/Social, Media/Insights): the tabs are
 *    duplicated in the hamburger menu, so we drop them and keep just the
 *    period picker. The :has() guard means we only hide the tabs when a
 *    picker is actually present — otherwise the sub-nav would collapse to an
 *    empty bar on pages that don't opt into a period picker.
 *  - Topic-detail nav (.topic-lens-nav--deep): the per-topic lens tabs are
 *    NOT in the hamburger, so we keep them as a horizontally-scrollable strip
 *    and stack the period picker beneath. */
@media (max-width: 768px) {
  .topic-lens-nav-inner { padding: 8px 16px; }

  .topic-lens-nav:not(.topic-lens-nav--deep):has(.topic-lens-period) .topic-lens-tabs {
    display: none;
  }

  .topic-lens-nav--deep .topic-lens-nav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .topic-lens-nav--deep .topic-lens-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topic-lens-nav--deep .topic-lens-tabs::-webkit-scrollbar { display: none; }
  .topic-lens-nav--deep .topic-lens-back { width: auto; }
  .topic-lens-nav--deep .topic-lens-period {
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Topic detail */
.topic-detail-page { max-width: 1120px; width: 100%; margin: 0 auto; padding: 32px 28px 80px; }

.topic-hero { padding: 28px; margin-bottom: 24px; }
.topic-hero-name { font-size: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-0); margin: 4px 0 8px; line-height: 1.15; }
.topic-hero-meta { font-size: 12px; color: var(--fg-3); }
.topic-hero-desc { font-size: 14.5px; color: var(--fg-1); margin: 12px 0 0; max-width: 70ch; line-height: 1.5; }

.framing-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 12px;
}
.framing-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s;
}
.framing-card:hover { border-color: var(--accent-ring); }
.framing-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.framing-meta .pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; line-height: 1.4;
  text-transform: lowercase; letter-spacing: 0.02em;
  white-space: nowrap;
}
.framing-source { font-size: 11.5px; color: var(--fg-2); font-family: 'JetBrains Mono', monospace; text-decoration: none; }
a.framing-source:hover { color: var(--accent-2); text-decoration: underline; }
.framing-text { font-family: "Iowan Old Style","Charter","Georgia",serif; font-size: 15px; line-height: 1.4; margin: 0; color: var(--fg-0); }
.framing-link { font-size: 12.5px; color: var(--accent-2); margin-top: auto; line-height: 1.35; }
.framing-link:hover { text-decoration: underline; }
.framing-date { font-size: 11px; color: var(--fg-3); }

/* Source detail */
.source-detail-page .topic-hero-meta code {
  font-size: 10.5px; padding: 1px 5px; background: var(--bg-2); border-radius: 4px;
}
.source-coverage-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin: 0 0 24px;
}
.source-cov-cell {
  background: white; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; text-align: left;
}
.source-cov-n { font-size: 22px; font-weight: 500; color: var(--fg-0); line-height: 1.1; }
.source-cov-k { font-size: 11px; color: var(--fg-3); margin-top: 4px; text-transform: lowercase; letter-spacing: 0.02em; }
.source-cov-when .source-cov-k { margin-top: 0; }
.source-cov-n-mini { font-size: 11.5px; color: var(--fg-2); margin-top: 6px; }
.source-distinct-card { padding: 0; overflow: hidden; }
.source-distinct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.source-distinct-table th,
.source-distinct-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.source-distinct-table th { background: var(--bg-2); font-weight: 500; font-size: 11.5px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.source-distinct-table td.num,
.source-distinct-table th.num { text-align: right; }
.source-distinct-table tr:last-child td { border-bottom: 0; }
.source-distinct-table .a-link { color: var(--fg-0); }
.source-distinct-table .a-link:hover { color: var(--accent-2); text-decoration: underline; }
.source-distinct-unique {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-size: 10.5px; text-transform: lowercase; letter-spacing: 0.04em;
}
.source-recent-list .topic-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-2); color: var(--fg-2);
  font-size: 11px; margin-right: 2px;
}
@media (max-width: 900px) {
  .source-coverage-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Login / dossier surface marker — used by login.html.tmpl */
.login-shell {
  max-width: 28rem;
  margin: 80px auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  color: var(--fg-0);
}
.login-shell h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 16px; color: var(--fg-0); }
.login-shell label { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 6px; }
.login-shell input[type="email"],
.login-shell input[type="password"] {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--fg-0);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
.login-shell input:focus { outline: none; border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-shell button[type="submit"] {
  width: 100%;
  background: var(--accent);
  color: var(--bg-0);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: 14px;
  margin-top: 12px;
}
.login-shell button[type="submit"]:hover { background: var(--accent-2); }
.login-shell .error-msg { color: var(--neg); font-size: 13px; margin-bottom: 12px; }

/* =====================================================================
 * Scrollbars + responsive
 * ===================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  .briefing-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .rail { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* Topbar collapse — at <=1024px the inline public-nav row and the
 * standalone Party Donors dropdown trigger get hidden in favour of a
 * single hamburger that contains both. 1024px (not the conventional
 * 768px) is the empirical cutoff where the desktop chrome — brand +
 * nav links + Pro pill + admin/account triggers — starts overflowing
 * on logged-in admin users; below that we want the hamburger so
 * nothing wraps. The Account / Admin dropdowns keep their own
 * triggers (admins are a power-user audience; the avatar is small
 * enough to coexist with the hamburger on phones). */
@media (max-width: 1024px) {
  .topbar-inner { gap: 12px; }
  .topbar-nav { display: none; }
  .nav-search-wrap { display: none; }
  .nav-menu-wrap { display: inline-block; }
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv-row .k { background: transparent; padding-bottom: 0; }
  .topbar-inner { padding: 10px 16px; gap: 12px; }
  /* Hide the "Account" word on narrow viewports — the avatar circle
     is enough to signal the dropdown. */
  .account-toggle > span { display: none; }
  .page { padding: 24px 16px 60px; }
}
/* Sub-phone widths — hide the OpenBrief wordmark image so the
 * brand mark + Admin (if present) + Account avatar + hamburger fit
 * comfortably on a 360px-wide screen. */
@media (max-width: 480px) {
  .brand-name { display: none; }
  .topbar-inner { padding: 10px 12px; gap: 10px; }
  /* Tighten the admin trigger label to leave room for the hamburger. */
  .admin-toggle { padding: 6px 8px; }

  /* At phone widths the trigger sits near the right edge so an
   * absolute-positioned panel anchored right:0 of the trigger would
   * clip off the LEFT of the viewport once min-width exceeds the
   * trigger's distance from the screen edge. Switch to viewport-
   * anchored fixed positioning so the panel always lays inside the
   * screen, regardless of where the trigger landed. */
  .nav-menu-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    right: 12px; left: auto;
    width: calc(100vw - 24px);
    max-width: 300px;
    min-width: 0;
  }
}

/* =====================================================================
 * Background (research agent output) on the MP briefing
 * ===================================================================== */

.bio-section .section-head h2 .idx {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

.bio-banner {
  border-left: 3px solid var(--line);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
}
.bio-banner-pending {
  border-left-color: var(--flag);
  background: var(--flag-soft);
}
.bio-banner-approved {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
/* AI-generated note replaces the pending/approved review framing on
 * the public MP page. Same visual weight as `-approved` (muted, not
 * alarming) since the reader's call-to-action is "use as a starting
 * point", not "verify before trusting". */
.bio-banner-ai {
  border-left-color: var(--accent);
  background: var(--bg-1);
}
.bio-banner-ai em { font-style: normal; font-weight: 500; color: var(--fg-1); }
.bio-banner strong { color: var(--fg-0); margin-right: 4px; }

.bio-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.bio-chip-unverified { color: var(--flag); border-color: color-mix(in oklch, var(--flag) 35%, var(--line)); }
.bio-chip-disputed { color: var(--neg); border-color: color-mix(in oklch, var(--neg) 35%, var(--line)); }

.bio-group { padding: 12px 14px; }
.bio-group-heading {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 10px;
}

.bio-items { list-style: none; padding: 0; margin: 0; }
.bio-items > li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.bio-sentence {
  color: var(--fg-0);
  font-size: 14.5px;
  line-height: 1.5;
}
.bio-unverified .bio-sentence { color: var(--fg-1); }

.bio-caveat {
  margin-left: 8px;
  vertical-align: middle;
}

.bio-disputed .bio-disputed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bio-caveat-text { font-size: 12px; color: var(--fg-3); }

.bio-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bio-variant {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.bio-sources {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bio-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--fg-2);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
}
.bio-source:hover { color: var(--fg-0); border-color: var(--accent-ring); background: var(--bg-2); }
.bio-tier-badge {
  background: var(--bg-2);
  color: var(--fg-3);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
}
.bio-source.tier-T1 { border-color: var(--p-teal); }
.bio-source.tier-T1 .bio-tier-badge { background: oklch(0.94 0.05 195); color: var(--p-teal); }
.bio-source.tier-T2 .bio-tier-badge { background: var(--bg-2); color: var(--fg-2); }
.bio-source.tier-T3 { border-style: dashed; }
.bio-source.tier-T3 .bio-tier-badge { background: var(--bg-2); color: var(--flag); }

.bio-gaps { padding: 12px 14px; }
.bio-gap-list {
  margin: 0;
  padding-left: 18px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.bio-gaps .section-note { margin-top: 8px; }

@media (max-width: 900px) {
  .bio-variants { grid-template-columns: 1fr; }
}

/* Inline reviewer controls inside the awaiting-review banner. */
.bio-review-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bio-review-reject {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.bio-review-reject-label {
  display: block;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.bio-review-reject textarea {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: var(--fg-0);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
}
.bio-review-reject textarea:focus { outline: none; border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.bio-review-reject button { margin-top: 8px; }

/* Per-claim reject button (admin only, awaiting-review only). */
.bio-claim-reject { display: inline; margin-left: 8px; }
.bio-claim-reject-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-3);
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.bio-claim-reject-btn:hover {
  color: var(--neg);
  border-color: color-mix(in oklch, var(--neg) 50%, var(--line));
  background: var(--neg-soft);
}

/* Prose bio (LLM-generated, citation-linked). */
.bio-prose {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-0);
}
.bio-prose p { margin: 0 0 12px; }
.bio-prose p:last-child { margin-bottom: 0; }
.bio-prose-cite {
  font-size: 11px;
  vertical-align: super;
  margin-left: 1px;
}
.bio-prose-cite a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 2px;
}
.bio-prose-cite a:hover { background: var(--accent-soft); border-radius: 2px; }

.bio-prose-meta {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Collapsed structured section under the prose. */
.bio-structured-collapse {
  margin-top: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 14px;
}
.bio-structured-collapse > summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--fg-1);
  padding: 10px 0;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.bio-structured-collapse > summary::-webkit-details-marker { display: none; }
.bio-structured-collapse > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--fg-3);
  transition: transform 0.1s;
}
.bio-structured-collapse[open] > summary::before { transform: rotate(90deg); }
.bio-structured-collapse > summary strong { font-weight: 500; color: var(--fg-0); }
.bio-citation-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-3);
}

/* Verification affordance at the top of an MP biography. Sits above
 * the prose so casual readers see the citation layer exists before
 * they decide whether to click into it. Visual treatment is muted —
 * an info note, not a warning. */
.bio-verify-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.45; color: var(--fg-1);
}
.bio-verify-note svg { flex-shrink: 0; color: var(--accent-2); margin-top: 2px; }
.bio-verify-note a { color: var(--accent-2); }
.bio-verify-note a:hover { text-decoration: underline; }
.bio-verify-note .mono {
  background: white; padding: 1px 6px; border-radius: 3px;
  font-size: 11.5px; color: var(--fg-1);
}

/* Footnote number on each structured claim item. */
.bio-claim-num {
  display: inline-block;
  margin-right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  vertical-align: middle;
}
.bio-item:target {
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  margin: -4px -8px;
}

/* Role pill colours on the home page card grid. Tier government
   roles (PM / Deputy PM / Cabinet) by colour intensity; opposition
   roles (Leader / Deputy Leader) get a contrasting amber. Unknown
   roles fall back to the neutral .pill default already in app.css. */
.pill.role-prime_minister {
  background: var(--accent);
  color: white;
}
.pill.role-deputy_pm {
  background: var(--accent-soft);
  color: var(--accent-2);
}
.pill.role-cabinet {
  background: var(--accent-soft);
  color: var(--accent-2);
}
.pill.role-party_leader {
  background: var(--flag-soft);
  color: var(--flag);
}
.pill.role-deputy_party_leader {
  background: var(--flag-soft);
  color: var(--flag);
}

/* News-source collapsible groups in the briefing's "In the news"
 * section. Modelled on .day-group above — same chevron-rotation
 * affordance and bg tint on the summary row, narrowed to a single-
 * line layout (source name + count badge). All groups default
 * collapsed so a Luxon-sized list with 50 articles across 5
 * outlets stays scannable. */
.news-total {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  margin-left: auto;
}
.news-groups { padding: 0; }
.news-group { display: block; }
.news-group + .news-group { border-top: 1px solid var(--line); }
.news-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-1);
  color: var(--fg-1);
}
.news-group > summary::-webkit-details-marker { display: none; }
.news-group > summary:hover { background: var(--bg-2); }
.news-group-chev {
  color: var(--fg-3);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.news-group[open] > summary .news-group-chev { transform: rotate(180deg); }
.news-group-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
}
.news-group-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}
.news-group-body {
  background: var(--bg-1);
  margin: 0;
}

/* =====================================================================
 * /press/comparison — quadrant legend, lead-lag table, metric key.
 * The page used CSS classes (.lead-lag-table, .quadrant-legend, .dot-*)
 * that had no rules, so the table fell back to browser defaults and
 * looked broken. Styles here mirror the .sparkline-matrix vocabulary
 * already in use elsewhere on /press.
 * ===================================================================== */

/* Quadrant legend — coloured dot + plain prose, four entries that
 * mirror the four scatter buckets. Dots match the ECharts palette
 * (palette = ['#3730a3','#dc2626','#b45309','#94a3b8']) so the legend
 * and the dots on the chart line up by colour. */
.quadrant-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 18px;
  font-size: 13px; color: var(--fg-1); line-height: 1.45;
}
.quadrant-legend li {
  display: flex; align-items: baseline; gap: 8px;
}
.quadrant-legend .dot {
  flex-shrink: 0;
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  transform: translateY(1px);
}
.quadrant-legend .dot-shared { background: #3730a3; }
.quadrant-legend .dot-disc   { background: #dc2626; }
.quadrant-legend .dot-press  { background: #b45309; }
.quadrant-legend .dot-quiet  { background: #94a3b8; }

/* Metric key — used under the lead-lag intro to define each column.
 * Plain unordered list with bold leading term + prose definition,
 * tighter than a paragraph and easier to scan than a sentence. */
.metric-key {
  list-style: none; margin: 12px 0 0; padding: 0;
  font-size: 13px; color: var(--fg-1); line-height: 1.5;
}
.metric-key li { margin-bottom: 6px; }
.metric-key li:last-child { margin-bottom: 0; }
.metric-key strong { color: var(--fg-0); }
.metric-key em { color: var(--fg-1); font-style: italic; }

/* Lead-lag card + table. The card hosts a full-width zebra-striped
 * table with a subtle header row, right-aligned numeric columns, and
 * coloured direction badges so the relationship reads at a glance.
 * The table previously had no styles at all — this brings it in line
 * with the .sparkline-matrix on /press. */
.lead-lag-card { padding: 0; background: white; overflow: hidden; }
.lead-lag-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
.lead-lag-table th, .lead-lag-table td {
  padding: 10px 14px;
  text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.lead-lag-table thead th {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-1);
}
.lead-lag-table th.num, .lead-lag-table td.num { text-align: right; }
.lead-lag-table tbody tr:last-child td { border-bottom: none; }
.lead-lag-table tbody tr:hover td { background: var(--bg-1); }

.lead-lag-topic { display: flex; flex-direction: column; gap: 2px; }
.lead-lag-topic > a:first-child {
  color: var(--fg-0); font-weight: 500;
  text-decoration: none;
}
.lead-lag-topic > a:first-child:hover { color: var(--accent-2); text-decoration: underline; }
.lead-lag-disc {
  font-size: 11px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;
  text-decoration: none;
}
.lead-lag-disc:hover { color: var(--accent-2); text-decoration: underline; }

/* Direction badge — three colour modes. Discourse-leads = indigo
 * (mirrors the /discourse zone); press-leads = amber (mirrors /press);
 * in-step = neutral grey. Pill shape so it reads as a categorical
 * label, not free-floating text. */
.lead-lag-dir {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lead-lag-dir-disc  { background: #eef2ff; color: #3730a3; }
.lead-lag-dir-press { background: #fef3c7; color: #92400e; }
.lead-lag-dir-step  { background: var(--bg-2); color: var(--fg-2); }

/* r-value tint. Positive = aligned (green-ish), negative = inverted
 * (red-ish). Subtle — the colour cues the sign without overpowering
 * the digits. */
.lead-lag-r.pos { color: #166534; }
.lead-lag-r.neg { color: #991b1b; }

/* Methodology card on /press/comparison — long-form prose explaining
 * the balance filter / z-score / lead-lag choices. .card has no
 * padding by default (children own it); this gives the prose room to
 * breathe and keeps paragraph rhythm consistent. */
.methodology-card {
  padding: 18px 24px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--fg-1);
}
.methodology-card p { margin: 0 0 12px; }
.methodology-card p:last-child { margin-bottom: 0; }
.methodology-card strong { color: var(--fg-0); }

/* ============================================================
 * Elections (M56) — phase 1a styling.
 *
 * The election surface deliberately sits its own visual lane next to
 * the MP briefing (.briefing-*) so a candidate page (phase 3) reads
 * as a different kind of object than a sitting-MP brief. Phase 1a
 * only ships the index + year landing; classes here cover those.
 * Phase 3 will add .candidate-* parallel to .briefing-*.
 * ============================================================ */

.elections-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-2);
  margin: 0 0 16px;
}
.elections-breadcrumb a { color: var(--fg-2); text-decoration: none; }
.elections-breadcrumb a:hover { color: var(--fg-0); }
.elections-breadcrumb .dot-sep { color: var(--fg-3); }

/* Year picker on /elections — large numerals, current cycle gets the
 * accent treatment so the eye lands on the upcoming election first. */
.elections-year-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-top: 24px;
}
.elections-year-card {
  display: block; text-decoration: none; color: var(--fg-0);
  background: var(--bg-1); border: 1px solid var(--bg-3);
  border-radius: 10px; padding: 18px 20px;
  transition: border-color 120ms, transform 120ms;
}
.elections-year-card:hover {
  border-color: var(--accent); transform: translateY(-1px);
}
.elections-year-card.is-current {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), var(--bg-1));
}
.elections-year-eyebrow {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 500;
}
.elections-year-card.is-current .elections-year-eyebrow { color: var(--accent); }
.elections-year-num {
  font-size: 32px; font-weight: 700; line-height: 1.1;
  margin: 6px 0 2px; font-feature-settings: "tnum";
}
.elections-year-meta { font-size: 12.5px; color: var(--fg-2); }

/* Per-year hero: headline + headline-numbers. */
.elections-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin: 0 0 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bg-3);
}
.elections-hero-main { flex: 1; min-width: 240px; }
.elections-hero-headline {
  margin: 6px 0 0;
  font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--fg-0);
}
.elections-hero-headline-sub {
  font-weight: 500; color: var(--fg-2); font-size: 26px; letter-spacing: 0;
}
.elections-hero-stats {
  display: flex; gap: 24px; margin: 0;
  font-feature-settings: "tnum";
}
.elections-hero-stats > div { display: flex; flex-direction: column; gap: 2px; }
.elections-hero-stats dt {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 500;
}
.elections-hero-stats dd {
  margin: 0; font-size: 22px; font-weight: 600; color: var(--fg-0);
}
.elections-hero-stats > div.muted dd { color: var(--fg-2); }

/* Empty state used by both the index and per-year landing when
 * ingestion hasn't produced rows yet. */
.elections-empty {
  margin: 28px 0;
  padding: 28px 24px;
  background: var(--bg-1); border: 1px dashed var(--bg-3);
  border-radius: 10px;
}
.elections-empty-title { font-size: 14px; font-weight: 600; color: var(--fg-0); margin-bottom: 6px; }
.elections-empty-sub { color: var(--fg-2); font-size: 13px; line-height: 1.55; margin: 0; max-width: 60ch; }

/* Party Donors browser, hosted on the /elections index page. Pulled
 * out of the topbar dropdown so it sits in cycle context rather than
 * floating on every surface. Renders as a header + responsive grid
 * of party cards that link through to /orgs/{id}/donations. */
.elections-donors {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.elections-donors-head { margin-bottom: 22px; max-width: 64ch; }
.elections-donors-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.elections-donors-title {
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin: 0 0 8px;
}
.elections-donors-sub {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.elections-donors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.elections-donor-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 14px; color: var(--fg-0);
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.elections-donor-card:hover {
  background: var(--bg-1);
  border-color: var(--line-strong);
  border-left-color: var(--accent-2);
  transform: translateY(-1px);
}
.elections-donor-name { font-weight: 500; }
.elections-donor-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--fg-3);
}

.elections-section-title {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 600;
  margin: 32px 0 12px;
}

/* Party browser — small cards, accent rail on the left mirrors the
 * electorate-row pattern so the visual vocabulary stays consistent. */
.elections-party-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.elections-party-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--bg-3); border-radius: 8px;
  padding: 12px 14px;
}
.elections-party-card .party-bar-inline {
  width: 3px; height: 28px; border-radius: 2px;
  background: var(--party-color, var(--fg-3)); flex-shrink: 0;
}
.elections-party-name { font-size: 13.5px; font-weight: 500; color: var(--fg-0); flex: 1; min-width: 0; }
.elections-party-count { font-size: 12px; color: var(--fg-2); font-feature-settings: "tnum"; }

/* Clickable variant — used on the party browser when a per-party
 * page exists. Plain `.elections-party-card` keeps the same visual
 * but without the hover affordance, so phase 1a's static cards
 * read as "data display" while phase 2's cards read as "drillable". */
.elections-party-card.has-link {
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.elections-party-card.has-link:hover {
  border-color: var(--party-color, var(--accent));
  transform: translateY(-1px);
}

/* Slate cards — the per-electorate and per-party pages render these.
 * Two shapes: an `<a>.has-link` for sitting MPs (clickable through to
 * their /mps/{id} brief) and a plain `<div>` for non-MP candidates
 * (phase 3 will make those clickable too via the candidate brief). */
.elections-slate-list {
  display: flex; flex-direction: column;
  gap: 4px;
  margin: 0 0 24px;
}
.elections-slate-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-1); border: 1px solid var(--bg-3);
  border-radius: 8px;
  text-decoration: none; color: var(--fg-0);
}
.elections-slate-card .party-bar-inline {
  width: 3px; height: 32px; border-radius: 2px;
  background: var(--party-color, var(--fg-3)); flex-shrink: 0;
}
.elections-slate-card.has-link {
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.elections-slate-card.has-link:hover {
  border-color: var(--party-color, var(--accent));
  transform: translateX(1px);
}
/* Stretched-link overlay — used by the party slate where the row also
 * contains an electorate <a>. Nested anchors are invalid HTML, so the
 * party template renders the card as a <div> and lays this transparent
 * link over it; the inner electorate anchor wins clicks via z-index. */
.elections-slate-card-link {
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.elections-slate-body { flex: 1; min-width: 0; }
.elections-slate-name-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.elections-slate-name { font-size: 14px; font-weight: 500; color: var(--fg-0); }
.elections-slate-meta { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; font-feature-settings: "tnum"; }
.elections-slate-electorate {
  position: relative; z-index: 1;
  color: var(--fg-2); text-decoration: none;
  border-bottom: 1px dotted var(--fg-3);
}
.elections-slate-electorate:hover { color: var(--accent); border-bottom-color: var(--accent); }
.elections-slate-card .arrow { color: var(--fg-3); margin-left: auto; }

/* Sitting-MP badge — pill-style, matches the visual vocabulary
 * used elsewhere (admin tag chips). Gives the eye a quick "this
 * person is in the House right now, click through for the brief". */
.elections-slate-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.02em;
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

/* Party hero — small accent bar on the left of the headline so the
 * party-coloured rail visual idiom continues into the per-party page
 * hero. The css var --party-color is set inline on the .elections-hero. */
.elections-hero-party-bar {
  display: inline-block;
  width: 6px; height: 28px; border-radius: 3px;
  background: var(--party-color, var(--fg-3));
  margin-right: 10px;
  vertical-align: middle;
}

/* ============================================================
 * Candidate brief (M56 phase 3) — visually parallel to but distinct
 * from the MP briefing. The MP brief reads as "this person currently
 * holds office X"; the candidate brief reads as "this person is
 * standing in election X". Different framing, different vocabulary.
 *
 * Visual cues:
 *   - Vertical party-coloured rail on the left of the hero (MP brief
 *     uses a horizontal top rail; the orientation flip is what reads
 *     as "different surface, same vocabulary").
 *   - The candidacy framing line ("Standing for…" / "Defending…")
 *     sits ABOVE the candidate name so the eye reads it as a
 *     time-bounded event rather than a biographical headline.
 *   - Cycle pill (yellow) + sitting-MP pill (cyan) both surface in
 *     the eyebrow so a reader knows in <1s what kind of row this is.
 * ============================================================ */

.candidate-page {
  max-width: 1120px; width: 100%;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

/* Hero — vertical rail on the left + photo + main copy block. */
.candidate-hero {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--bg-3); border-radius: 12px;
  padding: 24px 26px 18px 32px;
  margin: 14px 0 28px;
  overflow: hidden;
}
.candidate-hero-rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--party-color, var(--fg-3));
}
.candidate-hero-row { display: flex; gap: 22px; align-items: flex-start; }
.candidate-hero-photo-wrap { flex-shrink: 0; }
.candidate-hero-photo {
  width: 96px; height: 96px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--bg-3);
}
.candidate-hero-photo.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 600; color: var(--fg-2);
  background: var(--bg-2);
  text-transform: uppercase;
}
.candidate-hero-credit {
  font-size: 10.5px; color: var(--fg-3);
  margin-top: 6px; max-width: 96px; line-height: 1.3;
}
.candidate-hero-credit a { color: var(--fg-2); }

.candidate-hero-main { flex: 1; min-width: 0; }
.candidate-hero-eyebrow {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.candidate-cycle-pill {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(250, 204, 21, 0.15);
  color: #b45309;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.35);
}
.candidate-sitting-pill {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(56, 189, 248, 0.14);
  color: var(--accent);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.32);
}

/* Framing line — "Standing for…" or "Defending…". Distinct from the
 * MP brief's hero-eyebrow ("MP · #N · in office since 2023") because
 * this row is a verb, not a credential. */
.candidate-hero-framing {
  font-size: 13px; color: var(--fg-2);
  margin: 4px 0 6px;
  font-weight: 500;
}
.candidate-hero-electorate {
  color: var(--fg-1); text-decoration: none;
  border-bottom: 1px dotted var(--fg-3);
}
.candidate-hero-electorate:hover { color: var(--accent); border-bottom-color: var(--accent); }

.candidate-hero-name {
  font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg-0);
}

.candidate-hero-meta {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  font-size: 13px; color: var(--fg-2);
}
.candidate-hero-party {
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--fg-1); text-decoration: none;
  font-weight: 500;
}
.candidate-hero-party:hover { color: var(--accent); }
.candidate-hero-party-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--party-color, var(--fg-3));
}
.candidate-hero-listrank { font-feature-settings: "tnum"; }
.candidate-hero-mplink {
  color: var(--accent); text-decoration: none;
  font-weight: 500;
}
.candidate-hero-mplink:hover { text-decoration: underline; }

/* Candidacy facts strip — small key/value list under the hero copy. */
.candidate-hero-facts {
  display: flex; gap: 24px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bg-3);
  flex-wrap: wrap;
}
.candidate-hero-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.candidate-hero-facts dt {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500;
}
.candidate-hero-facts dd {
  margin: 0; font-size: 13px; color: var(--fg-1); font-weight: 500;
  font-feature-settings: "tnum";
}

.candidate-outcome {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.candidate-outcome-won_electorate,
.candidate-outcome-won_list {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.candidate-outcome-lost {
  background: rgba(244, 114, 114, 0.12);
  color: #991b1b;
  border: 1px solid rgba(244, 114, 114, 0.30);
}
.candidate-outcome-withdrew {
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--bg-3);
}

/* Sections below the hero — single-column, more spacious than the
 * MP brief's two-column layout because a candidate brief carries
 * less data and the rail navigation isn't useful here. */
.candidate-section {
  background: var(--bg-1); border: 1px solid var(--bg-3); border-radius: 10px;
  padding: 20px 22px;
  margin: 0 0 18px;
}
.candidate-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}
.candidate-section-head h2 {
  font-size: 16px; font-weight: 600; margin: 0;
  color: var(--fg-0);
}
.candidate-section-asof { font-size: 11.5px; color: var(--fg-3); }
.candidate-section-context {
  font-size: 13px; color: var(--fg-2); line-height: 1.55;
  margin: 0 0 14px;
}
.candidate-subsection-head {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 600;
  margin: 16px 0 8px;
}

.candidate-interests {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: 12px 18px;
  margin: 0;
}
.candidate-interests > div { display: contents; }
.candidate-interests dt {
  font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  padding-top: 4px;
}
.candidate-interests dd { margin: 0; font-size: 13px; color: var(--fg-1); }
.candidate-interest-item {
  padding: 6px 0;
  border-bottom: 1px dashed var(--bg-3);
}
.candidate-interest-item:last-child { border-bottom: 0; }
.candidate-interest-entity { font-weight: 500; color: var(--fg-0); margin-right: 6px; }
.candidate-interest-desc { color: var(--fg-2); }

.candidate-row-list { list-style: none; margin: 0; padding: 0; }
.candidate-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--bg-3);
}
.candidate-row:first-child { border-top: 0; }
.candidate-row-name {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--fg-0); font-weight: 500;
  text-decoration: none;
}
a.candidate-row-name { color: var(--fg-0); }
a.candidate-row-name:hover { color: var(--accent); }
.candidate-row-meta { font-size: 12px; color: var(--fg-2); flex-shrink: 0; font-feature-settings: "tnum"; }

.candidate-news-source {
  border: 1px solid var(--bg-3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.candidate-news-source > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--fg-1);
  list-style: none;
}
.candidate-news-source > summary::-webkit-details-marker { display: none; }
.candidate-news-source-name { flex: 1; }
.candidate-news-source-count {
  font-size: 11px; color: var(--fg-2); font-feature-settings: "tnum";
  background: var(--bg-2); padding: 1px 8px; border-radius: 999px;
}
.candidate-news-source[open] { border-color: var(--accent); }
.candidate-news-source[open] > summary { margin-bottom: 8px; }

.candidate-empty-deep {
  text-align: center;
  padding: 32px 24px;
  background: var(--bg-1); border: 1px dashed var(--bg-3);
}
.candidate-empty-deep-title { font-size: 14px; font-weight: 600; color: var(--fg-0); margin-bottom: 6px; }
.candidate-empty-deep-sub { color: var(--fg-2); font-size: 13px; line-height: 1.55; margin: 0 auto; max-width: 60ch; }

/* Biography section on the candidate brief (M56 phase 4). Visual lane
 * is parallel to but distinct from the MP brief's .bio-* classes:
 * same affordances (prose, footnote anchors, structured claim cards,
 * gap notes) in the candidate-* namespace so phase 3's styling
 * boundary holds. Admin review controls are NOT replicated here —
 * those live on /mps/{id} where reviewers actually work. */

.candidate-bio-section { padding-bottom: 24px; }

.candidate-bio-verify {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 12.5px; color: var(--fg-2); line-height: 1.5;
  background: var(--bg-2); border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.candidate-bio-verify a { color: var(--accent); }

/* Prose body — wider line-height than the rest of the page because
 * this is read like a paragraph of biography, not scanned like a row
 * list. */
.candidate-bio-prose {
  font-size: 15px; line-height: 1.65;
  color: var(--fg-1);
  margin: 0 0 18px;
}
.candidate-bio-prose p { margin: 0 0 14px; }
.candidate-bio-prose p:last-child { margin-bottom: 0; }
.candidate-bio-prose .bio-prose-cite a {
  font-size: 11px; font-weight: 500;
  color: var(--accent); text-decoration: none;
  padding: 0 2px;
}
.candidate-bio-prose .bio-prose-cite a:hover { text-decoration: underline; }
.candidate-bio-prose-meta {
  font-size: 11px; color: var(--fg-3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg-3);
}

/* Banner — same shape as the MP brief's bio-banner-ai but adapted
 * to the candidate visual lane. */
.candidate-bio-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--fg-2);
}
.candidate-bio-banner strong { color: var(--fg-0); font-weight: 600; }
.candidate-bio-banner em { font-style: normal; font-weight: 500; color: var(--fg-1); }

/* Summary chips. Status colour-coding is identical to the MP brief
 * so a reader who's seen one surface recognises the other; only the
 * class names are namespaced. */
.candidate-bio-summary {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.candidate-bio-chip {
  font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--bg-3);
  background: var(--bg-2);
  color: var(--fg-2);
}
.candidate-bio-chip-confirmed {
  background: rgba(34, 197, 94, 0.10);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.30);
}
.candidate-bio-chip-unverified {
  background: rgba(250, 204, 21, 0.12);
  color: #92400e;
  border-color: rgba(250, 204, 21, 0.32);
}
.candidate-bio-chip-disputed {
  background: rgba(244, 114, 114, 0.10);
  color: #991b1b;
  border-color: rgba(244, 114, 114, 0.28);
}

/* Citation index — collapsible <details> wrapper around the
 * structured claim cards. Closed by default when prose exists so
 * the prose is the headline. */
.candidate-bio-citations {
  margin: 0 0 14px;
  border: 1px solid var(--bg-3); border-radius: 8px;
  background: var(--bg-1);
}
.candidate-bio-citations > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  font-size: 13px; color: var(--fg-1);
  list-style: none;
}
.candidate-bio-citations > summary::-webkit-details-marker { display: none; }
.candidate-bio-citations[open] > summary { border-bottom: 1px solid var(--bg-3); }
.candidate-bio-citation-count {
  font-size: 11px; color: var(--fg-3);
  margin-left: auto;
  font-feature-settings: "tnum";
}

/* Claim groups + items. Layout is roughly: [N]  sentence + chip
 * over a list of source links. Disputed items break sentence into
 * variants. */
.candidate-bio-group {
  padding: 16px;
  border-top: 1px solid var(--bg-3);
}
.candidate-bio-group:first-child { border-top: 0; }
.candidate-bio-group-heading {
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 600;
  margin: 0 0 10px;
}
.candidate-bio-items { list-style: none; padding: 0; margin: 0; }
.candidate-bio-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--bg-3);
}
.candidate-bio-item:first-child { border-top: 0; padding-top: 0; }
.candidate-bio-num {
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  align-self: start;
  padding-top: 2px;
}
.candidate-bio-sentence {
  font-size: 13.5px; color: var(--fg-1); line-height: 1.55;
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.candidate-bio-status-pill {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  padding: 1px 7px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--bg-3);
}
.candidate-bio-status-unverified {
  background: rgba(250, 204, 21, 0.12);
  color: #92400e;
  border-color: rgba(250, 204, 21, 0.32);
}
.candidate-bio-status-disputed {
  background: rgba(244, 114, 114, 0.10);
  color: #991b1b;
  border-color: rgba(244, 114, 114, 0.28);
}

.candidate-bio-disputed-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.candidate-bio-caveat-text { font-size: 11.5px; color: var(--fg-2); font-style: italic; }
.candidate-bio-variants {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 0 0 12px;
  border-left: 2px solid var(--bg-3);
}
.candidate-bio-variant { display: flex; flex-direction: column; gap: 4px; }

.candidate-bio-sources {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.candidate-bio-source {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg-2);
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--bg-3);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
}
.candidate-bio-source:hover { background: var(--bg-3); color: var(--fg-1); }
.candidate-bio-tier-badge {
  font-size: 9.5px; font-weight: 600;
  padding: 0 5px; border-radius: 3px;
  background: var(--bg-3); color: var(--fg-2);
}
.candidate-bio-tier-T1 .candidate-bio-tier-badge { background: rgba(34, 197, 94, 0.20); color: #166534; }
.candidate-bio-tier-T2 .candidate-bio-tier-badge { background: rgba(56, 189, 248, 0.20); color: var(--accent); }
.candidate-bio-tier-T3 .candidate-bio-tier-badge { background: rgba(250, 204, 21, 0.20); color: #92400e; }

/* Gaps — what the agent looked for and didn't find. */
.candidate-bio-gaps {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--bg-2); border: 1px dashed var(--bg-3); border-radius: 8px;
}
.candidate-bio-gap-list {
  list-style: disc; padding-left: 20px; margin: 0 0 8px;
  font-size: 13px; color: var(--fg-1);
}
.candidate-bio-gap-list li { padding: 2px 0; }

/* =====================================================================
 * Pro dashboard + Pro landing page (M62)
 *
 * Two surfaces share this block:
 *   1. /pro            — editorial marketing landing
 *   2. /pro/dashboard  — daily brief
 *
 * Both pages are static hi-fi demos at this stage; data plumbing slots
 * in once user types and entitlements exist. The styles intentionally
 * extend the existing OpenBrief light/teal language — same Inter +
 * JetBrains Mono pairing, same surface tokens — and only introduce
 * landing-specific patterns (the editorial pricing grid, the hero brief
 * mock-up panel) where the rest of the site has nothing to share.
 * ===================================================================== */

/* ---------- Pro dashboard ---------- */
.page.pro { max-width: 1280px; padding-top: 24px; }

.pro-header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.pro-eyebrow {
  display: flex; gap: 14px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pro-tag {
  background: var(--accent-2);
  color: #fff;
  padding: 2px 7px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.12em; font-weight: 600;
}
.pro-date { color: var(--fg-1); font-weight: 500; }
.pro-sync { margin-left: auto; }

.pro-headline {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 16px; color: var(--fg-0);
  max-width: 30ch;
}
.pro-summary-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--fg-1);
}
.pro-pill .d { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pro-pill .d.up { background: var(--neg); }
.pro-pill .d.down { background: var(--pos); }
.pro-pill .d.shift { background: var(--p-nzfirst); }
.pro-pill .d.watch { background: var(--flag); }

.pro-section { margin-bottom: 48px; }
.pro-section-head { margin-bottom: 16px; }
.pro-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin-bottom: 6px;
}
.pro-section-title {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-0); margin: 0 0 4px;
}
.pro-section-sub {
  color: var(--fg-2); font-size: 13px;
  margin: 0; max-width: 64ch;
}

/* Brief stack */
.brief-stack {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.brief-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.brief-card--neg   { border-left-color: var(--neg); }
.brief-card--warn  { border-left-color: var(--flag); }
.brief-card--actor { border-left-color: var(--accent); }
.brief-card--evo   { border-left-color: var(--p-nzfirst); }

.brief-card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.brief-icon { font-size: 16px; line-height: 1; }
.brief-topic {
  font-size: 16px; font-weight: 600;
  color: var(--fg-0); margin: 0;
  letter-spacing: -0.01em;
  flex: 1;
}
.brief-open { color: var(--accent); font-size: 12px; text-decoration: none; }
.brief-open:hover { text-decoration: underline; }
.brief-metrics {
  list-style: none; margin: 0 0 12px; padding: 10px 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brief-metrics li {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.brief-metrics .m-k, .brief-metrics .m-sub { overflow-wrap: anywhere; }
.brief-metrics .m-k {
  font-weight: 600; color: var(--fg-0);
  font-size: 13.5px; letter-spacing: -0.005em;
}
.brief-metrics .m-sub {
  font-size: 11px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.brief-why { font-size: 13px; color: var(--fg-1); line-height: 1.5; margin: 0; }
.brief-why-label { font-style: italic; color: var(--fg-2); font-weight: 500; margin-right: 4px; }

/* Split layout */
.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
}
.pro-rail {
  position: sticky; top: 80px;
  align-self: start;
  display: flex; flex-direction: column; gap: 12px;
}

/* Narratives table */
.narratives {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.narratives-head, .narratives-row {
  display: grid;
  grid-template-columns: 2fr 100px 70px 100px 1.4fr 110px;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}
.narratives-head {
  background: var(--bg-2);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.narratives-row {
  border-top: 1px solid var(--line);
  font-size: 13px; cursor: pointer;
}
.narratives-row:first-of-type { border-top: 0; }
.narratives-row:hover { background: var(--bg-1); }
.n-topic { color: var(--fg-0); font-weight: 500; }
.narratives-row .spark { display: block; width: 80px; height: 22px; }
.n-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
}
.n-trend.up { color: var(--neg); }
.n-trend.down { color: var(--pos); }
.n-driver {
  display: inline-flex; align-items: center;
  font-size: 11px;
  padding: 2px 8px; border-radius: 3px;
  background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line);
  width: fit-content;
}
.n-driver.press     { background: var(--neg-soft);    color: var(--neg);    border-color: transparent; }
.n-driver.discourse { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.n-driver.mixed     { background: var(--flag-soft);   color: var(--flag);   border-color: transparent; }
.n-framing {
  color: var(--fg-1); font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.shift-badge {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: oklch(0.50 0.16 285 / 0.12);
  color: var(--p-nzfirst);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.n-actors { display: flex; align-items: center; }
.actor-dot {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--fg-3);
  font-size: 9px; font-weight: 600;
  color: var(--fg-1);
  margin-right: -4px;
  font-family: 'Inter', sans-serif;
}
.evo-actors .actor-dot { margin-right: -4px; }

/* Quadrant chart */
.quadrant {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 28px 36px 32px;
  position: relative;
}
.quadrant-axes {
  position: relative;
  height: 360px;
  background:
    linear-gradient(to right, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%),
    linear-gradient(to top,   transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%);
}
.quad-corner {
  position: absolute;
  font-size: 10.5px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.quad-corner.tl { top: 6px; left: 6px; }
.quad-corner.tr { top: 6px; right: 6px; }
.quad-corner.bl { bottom: 6px; left: 6px; }
.quad-corner.br { bottom: 6px; right: 6px; }
.quad-x-label, .quad-y-label {
  position: absolute;
  font-size: 10px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.quad-x-label { bottom: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.quad-y-label {
  left: -22px; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap; transform-origin: center;
}
.quad-axis {
  position: absolute; background: var(--line);
  pointer-events: none;
}
.quad-axis-x { left: 0; right: 0; bottom: 50%; height: 1px; }
.quad-axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.quad-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  transform: translate(-50%, 50%);
  cursor: pointer;
}
.quad-dot:hover { z-index: 3; }
.quad-dot-label {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 4px);
  font-size: 10.5px; font-weight: 500;
  white-space: nowrap;
  color: var(--fg-1);
  background: oklch(1 0 0 / 0.9);
  padding: 0 4px;
}

/* Narrative evolution */
.evolutions { display: flex; flex-direction: column; gap: 10px; }
.evolution {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.evolution-chain {
  display: flex; align-items: stretch;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.evo-term {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
}
.evo-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.evo-text { font-size: 13px; color: var(--fg-0); font-weight: 500; }
.evo-arrow { color: var(--fg-3); font-size: 14px; align-self: center; }
.evolution-foot {
  display: flex; gap: 14px;
  font-size: 12px; color: var(--fg-2);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  flex-wrap: wrap; align-items: center;
}
.evo-origin { flex: 1; min-width: 220px; }
.evo-actors { display: flex; gap: 4px; align-items: center; }

/* Actor snapshots grid */
.actor-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.actor-snap {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
  color: inherit;
}
.actor-snap:hover { border-color: var(--line-strong); }
.actor-snap-body { min-width: 0; flex: 1; }
.actor-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--fg-3);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--fg-1);
  flex-shrink: 0;
}
.actor-name { font-size: 13.5px; font-weight: 600; color: var(--fg-0); margin-bottom: 2px; }
.actor-focus { font-size: 12px; color: var(--fg-1); margin-bottom: 6px; }
.actor-shift {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}
.actor-shift-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
.actor-note { font-size: 11.5px; color: var(--fg-2); font-style: italic; }

/* Right rail cards */
.rail-card, .watchlist {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.rail-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3); font-weight: 500;
  margin-bottom: 10px;
}
.rail-head > span:first-child { color: var(--fg-1); }
.rail-meta { color: var(--fg-3); font-size: 10.5px; text-decoration: none; }
.rail-meta:hover { color: var(--accent); }
.rail-edit {
  background: transparent; border: 0;
  font: inherit; font-size: 10.5px;
  color: var(--accent); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.watchlist-list { list-style: none; margin: 0; padding: 0; }
.watch-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.watch-item:first-child { border-top: 0; padding-top: 0; }
.watch-item:hover .watch-name { color: var(--accent); }
.watch-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-2); color: var(--fg-3);
  flex-shrink: 0;
  align-self: flex-start;
}
.watch-kind.mp                { background: var(--accent-soft); color: var(--accent); }
.watch-kind.topic             { background: var(--neg-soft);    color: var(--neg); }
.watch-kind.source            { background: var(--flag-soft);   color: var(--flag); }
.watch-kind.discourse_source  { background: var(--flag-soft);   color: var(--flag); }
.watch-kind.press_source      { background: var(--pos-soft);    color: var(--pos); }
.watch-body { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block; }
.watch-name { font-size: 12.5px; color: var(--fg-0); font-weight: 500; }
.watch-signal { font-size: 11.5px; color: var(--fg-2); margin-top: 1px; }
.watchlist-empty {
  font-size: 12px; color: var(--fg-2);
  margin: 6px 0 8px; line-height: 1.4;
}
.watchlist-add {
  margin-top: 10px; width: 100%;
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  color: var(--fg-2);
  font: inherit; font-size: 12px;
  padding: 7px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.watchlist-add:hover { color: var(--accent); border-color: var(--accent); }
.watchlist-add[disabled] { opacity: 0.5; cursor: not-allowed; }
.watchlist-add[disabled]:hover { color: var(--fg-2); border-color: var(--line-strong); }

/* ============ WATCHLIST MODAL ============ */
/* The <dialog> element handles backdrop + ESC for free; we style the
   open state and the inner sections. ::backdrop dims the page so the
   modal feels like a layer rather than a popover. */
.watchlist-modal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  background: var(--bg-0);
  box-shadow: 0 12px 48px oklch(0.22 0.012 240 / 0.18);
  color: var(--fg-0);
}
.watchlist-modal::backdrop {
  background: oklch(0.22 0.012 240 / 0.32);
  backdrop-filter: blur(2px);
}
.watchlist-modal-form {
  display: flex; flex-direction: column;
  max-height: inherit;
  margin: 0;
}
.watchlist-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}
.watchlist-modal-head h2 {
  font-size: 14px; font-weight: 600;
  margin: 0; color: var(--fg-0);
  letter-spacing: 0;
}
.watchlist-modal-close {
  background: transparent; border: 0;
  font-size: 20px; line-height: 1;
  color: var(--fg-3); cursor: pointer;
  padding: 4px 8px;
}
.watchlist-modal-close:hover { color: var(--fg-0); }

.watchlist-modal-add,
.watchlist-modal-current {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  overflow-y: auto;
}
.watchlist-modal-current { border-bottom: 0; }
.watchlist-modal-add h3,
.watchlist-modal-current h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3); font-weight: 500;
  margin: 0 0 10px;
}
.watchlist-modal-count {
  color: var(--fg-3); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  font-size: 11px;
}

/* Kind picker — four big friendly buttons. */
.watchlist-kind-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.watchlist-kind-btn {
  font: inherit; font-size: 12px;
  padding: 10px 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.watchlist-kind-btn:hover {
  border-color: var(--line-strong);
  color: var(--fg-0);
}
.watchlist-kind-btn.active,
.watchlist-kind-btn[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.watchlist-search-row { margin-bottom: 10px; }
.watchlist-search-input {
  width: 100%;
  font: inherit; font-size: 13px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-0);
}
.watchlist-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.watchlist-search-results-wrap {
  max-height: 260px;
  overflow-y: auto;
  margin: 0 -4px;
}
.watchlist-search-results {
  list-style: none; margin: 0; padding: 0;
}
.watchlist-result + .watchlist-result {
  border-top: 1px solid var(--line);
}
.watchlist-result-add {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent; border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.watchlist-result-add:hover {
  background: var(--bg-1);
}
.watchlist-result-add:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.watchlist-result-label {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  flex: 1; min-width: 0;
}
.watchlist-result-sub {
  font-size: 11.5px; color: var(--fg-3);
  flex-shrink: 0;
}
.watchlist-result-action {
  font-size: 16px; line-height: 1;
  color: var(--fg-3);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-2);
  flex-shrink: 0;
}
.watchlist-result-add:hover .watchlist-result-action {
  background: var(--accent);
  color: #fff;
}

/* "Currently watching" list inside the modal — same shape as the
   rail card item but compact and with a remove button. */
.watchlist-current-list {
  list-style: none; margin: 0; padding: 0;
}
.watchlist-current-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.watchlist-current-row:first-child { border-top: 0; padding-top: 0; }
.watchlist-current-label { color: var(--fg-0); font-weight: 500; flex: 1; min-width: 0; }
.watchlist-current-sub { color: var(--fg-3); font-size: 11px; flex-shrink: 0; }
.watchlist-current-remove {
  background: transparent; border: 0;
  font-size: 16px; line-height: 1;
  color: var(--fg-3); cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.watchlist-current-remove:hover {
  background: var(--neg-soft);
  color: var(--neg);
}

/* Toast — pinned at the bottom of the dialog, fades into view. */
.watchlist-modal-toast {
  margin: 0; padding: 10px 18px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
}

.alert-row {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  align-items: flex-start;
  text-decoration: none; color: inherit;
}
.alert-row:first-of-type { border-top: 0; padding-top: 0; }
.alert-row:hover .alert-msg b { color: var(--accent); }
.alert-empty {
  font-size: 12px; color: var(--fg-2);
  margin: 4px 0 8px; line-height: 1.4;
}
.alert-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
  flex-shrink: 0; padding-top: 1px;
}
.alert-msg { color: var(--fg-1); }
.alert-msg b { color: var(--fg-0); font-weight: 600; }

.source-bar {
  display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; margin-bottom: 8px;
}
.source-seg.pos     { background: var(--pos); }
.source-seg.neutral { background: var(--fg-3); }
.source-seg.neg     { background: var(--neg); }
.source-legend {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--fg-2);
}
.source-legend .d {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 6px;
}
.source-legend .d.pos     { background: var(--pos); }
.source-legend .d.neutral { background: var(--fg-3); }
.source-legend .d.neg     { background: var(--neg); }
.source-note {
  font-size: 11px; color: var(--fg-3);
  margin: 8px 0 0; line-height: 1.4;
}

@media (max-width: 980px) {
  .pro-split { grid-template-columns: 1fr; }
  .pro-rail { position: static; }
  .brief-stack { grid-template-columns: 1fr; }
  .actor-grid { grid-template-columns: 1fr; }
  .narratives-head, .narratives-row {
    grid-template-columns: 2fr 60px 60px 80px;
  }
  .narratives-head span:nth-child(n+5),
  .narratives-row > *:nth-child(n+5) { display: none; }
}

/* =====================================================================
 * Pro landing page (editorial / Reuters-product-page tone)
 * ===================================================================== */
.landing {
  background: var(--bg-1);
  color: var(--fg-0);
  min-height: 100vh;
}
.landing-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* Hero */
.landing-hero {
  padding: 80px 0 100px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.hero-copy { max-width: 520px; }
.hero-eyebrow-l {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-2);
  margin-bottom: 28px;
  text-transform: uppercase;
}
.hero-eyebrow-l .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  display: inline-block;
}
.hero-eyebrow-l .sep { color: var(--line-strong); }
.hero-headline-l {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 24px;
  color: var(--fg-0);
  text-wrap: balance;
}
.hero-sub-l {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0 0 36px;
  max-width: 46ch;
}
.hero-cta-row {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cta-primary {
  background: var(--fg-0);
  color: var(--bg-0);
  font: inherit;
  font-size: 14px; font-weight: 500;
  padding: 12px 22px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity 0.15s;
}
.cta-primary:hover { opacity: 0.85; color: var(--bg-0); }
.cta-secondary {
  background: transparent;
  color: var(--fg-0);
  font: inherit;
  font-size: 14px; font-weight: 500;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.cta-secondary:hover { border-color: var(--fg-0); color: var(--fg-0); }
.hero-meta {
  font-size: 12px; color: var(--fg-3);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-meta .sep { color: var(--line-strong); }

/* Hero visual — composed mock-up of the daily-brief panel */
.hero-visual { position: relative; perspective: 1400px; }
.brief-visual {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow:
    0 1px 0 var(--bg-2),
    0 24px 48px -16px oklch(0.4 0.05 240 / 0.18),
    0 8px 16px -8px oklch(0.4 0.05 240 / 0.10);
  overflow: hidden;
  position: relative;
  transform: rotate(0.4deg);
}
.bv-shadow-stack { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; }
.bv-shadow-stack::before, .bv-shadow-stack::after {
  content: ''; position: absolute; inset: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  z-index: -1;
}
.bv-shadow-stack::before { transform: translate(8px, 8px) rotate(-1deg); opacity: 0.6; }
.bv-shadow-stack::after  { transform: translate(16px, 16px) rotate(-2deg); opacity: 0.3; }
.bv-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.bv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-3);
}
.bv-title {
  margin-left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
}
.bv-body { padding: 22px 24px 24px; }
.bv-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
  margin-bottom: 12px;
}
.bv-tag {
  background: var(--accent-2); color: #fff;
  padding: 2px 6px; border-radius: 3px;
  font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600;
}
.bv-headline {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px; line-height: 1.3;
  color: var(--fg-0);
}
/* Brief-card mock — mirrors the real /pro/dashboard .brief-card layout
   (eyebrow head, 3-col metrics grid, why-this-matters footer) at a
   smaller scale. Class names are bv-* so they cannot collide with the
   real dashboard styles. */
.bv-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.bv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px; color: var(--fg-1);
}
.bv-d {
  width: 5px; height: 5px; border-radius: 50%;
  display: inline-block;
}
.bv-d.up { background: var(--neg); }
.bv-d.down { background: var(--pos); }
.bv-d.shift { background: var(--p-nzfirst); }
.bv-d.watch { background: var(--flag); }

.bv-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.bv-card--neg   { border-left-color: var(--neg); }
.bv-card--warn  { border-left-color: var(--flag); }
.bv-card--actor { border-left-color: var(--accent); }
.bv-card--evo   { border-left-color: var(--p-nzfirst); }

.bv-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.bv-icon { font-size: 14px; line-height: 1; }
.bv-topic { font-weight: 600; color: var(--fg-0); font-size: 13px; flex: 1; letter-spacing: -0.005em; }
.bv-open { color: var(--accent); font-size: 10.5px; }
.bv-metrics {
  list-style: none; margin: 0 0 10px; padding: 8px 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bv-metrics li {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.bv-metrics .m-k {
  font-weight: 600; color: var(--fg-0);
  font-size: 11.5px; letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.bv-metrics .m-sub {
  font-size: 9.5px; color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bv-why { font-size: 11.5px; color: var(--fg-1); margin: 0; line-height: 1.45; }
.bv-why-label { font-style: italic; color: var(--fg-2); font-weight: 500; margin-right: 3px; }

.bv-chain {
  display: flex; align-items: stretch;
  gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.bv-chain-step {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 8px;
}
.bv-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.bv-term { font-size: 11.5px; color: var(--fg-0); font-weight: 500; }
.bv-arrow { color: var(--fg-3); font-size: 12px; align-self: center; }

.bv-narratives {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.bv-nrow {
  display: grid;
  grid-template-columns: 1.6fr 60px 50px 70px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 11px;
  border-top: 1px solid var(--line);
}
.bv-nrow:first-child { border-top: 0; }
.bv-ntopic { color: var(--fg-0); font-weight: 500; font-size: 12px; }
.bv-spark { display: block; width: 60px; height: 18px; color: var(--fg-2); }
.bv-ntrend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
}
.bv-ntrend.up { color: var(--neg); }
.bv-ntrend.down { color: var(--pos); }
.bv-ndriver {
  display: inline-flex; align-items: center;
  font-size: 9.5px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg-2); color: var(--fg-2);
  width: fit-content;
  letter-spacing: 0.02em;
}
.bv-ndriver.press     { background: var(--neg-soft);    color: var(--neg); }
.bv-ndriver.discourse { background: var(--accent-soft); color: var(--accent); }
.bv-ndriver.mixed     { background: var(--flag-soft);   color: var(--flag); }
.bv-nactors { display: flex; align-items: center; }
.bv-adot {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--fg-3);
  font-size: 8px; font-weight: 600;
  color: var(--fg-1);
  margin-right: -3px;
}

/* Sections */
.landing .section { padding: 90px 0; border-bottom: 1px solid var(--line); }
.landing .section-head { margin-bottom: 48px; max-width: 720px; }
.landing .section-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.landing .section-title {
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-0);
  text-wrap: balance;
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 28px;
  background: #fff;
}
.feature-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-3);
  margin-bottom: 24px;
}
.feature-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--fg-0);
}
.feature-sub {
  font-size: 14px; color: var(--fg-1);
  line-height: 1.5;
  margin: 0 0 20px;
}
.feature-bullets {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.feature-bullets li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--fg-1);
  line-height: 1.5;
}
.feature-bullets li:last-child { border-bottom: 0; }

/* Built for */
.audience-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.audience-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 320px;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.audience-tag {
  font-size: 22px; font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.015em;
}
.audience-line {
  font-size: 16px; color: var(--fg-1);
  line-height: 1.55;
  margin: 0; max-width: 52ch;
  font-family: Georgia, 'Times New Roman', serif;
}
.audience-viz { width: 100%; }

/* Demo strip */
.section-demo { background: var(--bg-2); }
.demo-block { max-width: 980px; }
.demo-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.demo-headline {
  font-size: 30px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 36px;
  color: var(--fg-0);
  font-family: Georgia, 'Times New Roman', serif;
  text-wrap: balance;
}
.demo-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
}
.demo-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.demo-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.demo-term {
  font-size: 16px; font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.demo-meta {
  font-size: 12.5px; color: var(--fg-1);
  line-height: 1.45;
}
.demo-arrow {
  display: grid; place-items: center;
  color: var(--fg-3); font-size: 18px;
}
.demo-note {
  font-size: 13.5px;
  color: var(--fg-2);
  font-style: italic;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
}
.tier.is-featured {
  border: 1.5px solid var(--fg-0);
  padding: 40px 28px;
  margin: -8px 0;
  box-shadow: 0 8px 24px -12px oklch(0.4 0.05 240 / 0.18);
}
.tier-flag {
  position: absolute;
  top: -10px; left: 28px;
  background: var(--fg-0);
  color: var(--bg-0);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 500;
}
.tier-name {
  font-size: 14px; font-weight: 600;
  color: var(--fg-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tier-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.tier-amt {
  font-size: 44px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg-0);
}
.tier-amt--text { font-size: 26px; letter-spacing: -0.015em; }
.tier-sub { font-size: 13px; color: var(--fg-3); }
.tier-blurb {
  font-size: 13.5px; color: var(--fg-1);
  line-height: 1.5;
  margin: 0 0 22px;
  min-height: 42px;
}
.tier-features {
  list-style: none; margin: 0 0 24px; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  flex: 1;
}
.tier-features li {
  font-size: 13px; color: var(--fg-1);
  padding: 7px 0;
  position: relative;
  padding-left: 18px;
}
.tier-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--fg-3);
}
.tier-cta {
  background: transparent;
  color: var(--fg-0);
  font: inherit;
  font-size: 13.5px; font-weight: 500;
  padding: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.tier-cta:hover { border-color: var(--fg-0); color: var(--fg-0); }
.tier-cta.primary {
  background: var(--fg-0);
  color: var(--bg-0);
  border-color: var(--fg-0);
}
.tier-cta.primary:hover { opacity: 0.88; color: var(--bg-0); }

/* Methodology */
.section-methodology { background: var(--bg-2); }
.meth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.meth-row {
  display: flex; gap: 16px;
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid var(--line);
}
.meth-row:nth-child(odd)  { padding-right: 32px; border-right: 1px solid var(--line); padding-left: 0; }
.meth-row:nth-child(even) { padding-left: 32px; }
.meth-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
.meth-row h4 {
  font-size: 16px; font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.meth-row p {
  font-size: 13.5px; color: var(--fg-1);
  line-height: 1.55; margin: 0;
}
.meth-foot {
  display: flex; gap: 24px;
  margin-top: 24px;
  font-size: 13px;
}
.meth-foot .meth-link {
  color: var(--fg-0);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.meth-foot .meth-link:hover { border-bottom-color: var(--fg-0); }

/* =====================================================================
 * Site footer (global — replaces .app-footer one-liner)
 *
 * Lives at the bottom of every page (base.html.tmpl). Brand+blurb on
 * the left, then five link-list columns: Browse / Subscribe / Editorial
 * / Developers / Company. The brand column gets a slightly wider track
 * so the blurb has room; the rest split the remaining space evenly.
 * ===================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 64px 0 32px;
  margin-top: 64px;
  position: relative;
}
.site-footer-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 28px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.foot-brand {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.foot-mark { color: var(--accent); }
.foot-blurb {
  font-size: 13px; color: var(--fg-2);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0;
}
.foot-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  color: var(--fg-1);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
}
.foot-col a:hover { color: var(--fg-0); }
.foot-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  flex-wrap: wrap; gap: 8px;
}

/* Screenshot-frame wrapper — gives mini visualisations the look of a
   captured pane from the live product. Used in "What you get" feature
   cards and "Built for" audience rows. Mirrors the .brief-visual hero
   chrome treatment but at a smaller scale. */
.viz-shot {
  margin: 0 0 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 1px 0 var(--bg-2),
    0 18px 36px -14px oklch(0.4 0.05 240 / 0.18),
    0 6px 12px -6px oklch(0.4 0.05 240 / 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.viz-shot--tilt-l { transform: rotate(-0.4deg); }
.viz-shot--tilt-r { transform: rotate(0.4deg); }
.viz-shot:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 1px 0 var(--bg-2),
    0 24px 48px -16px oklch(0.4 0.05 240 / 0.22),
    0 10px 20px -8px oklch(0.4 0.05 240 / 0.12);
}
.viz-chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.viz-chrome .viz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-3);
}
.viz-chrome .viz-dot:nth-child(1) { background: oklch(0.78 0.14 28); }
.viz-chrome .viz-dot:nth-child(2) { background: oklch(0.85 0.13 92); }
.viz-chrome .viz-dot:nth-child(3) { background: oklch(0.78 0.14 145); }
.viz-path {
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viz-body { padding: 14px; }
.viz-body--flush { padding: 12px; }
.viz-caption {
  display: block;
  padding: 8px 12px 10px;
  border-top: 1px dashed var(--line);
  background: var(--bg-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Feature-card mini visualisations — inner content rendered inside
   .viz-body. The body itself supplies padding & background so these
   modifiers only style the actual chart/widget. */

/* Mini quadrant — Conversation dynamics */
.feature-viz--quadrant .fv-quad {
  position: relative;
  height: 130px;
  background:
    linear-gradient(to right, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%),
    linear-gradient(to top,   transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%);
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: #fff;
}
.feature-viz--quadrant .fv-quad-corner {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.04em;
  color: var(--fg-3); text-transform: uppercase;
  padding: 3px 4px;
}
.feature-viz--quadrant .fv-quad-corner.tl { top: 4px; left: 4px; }
.feature-viz--quadrant .fv-quad-corner.tr { top: 4px; right: 4px; }
.feature-viz--quadrant .fv-quad-corner.bl { bottom: 4px; left: 4px; }
.feature-viz--quadrant .fv-quad-corner.br { bottom: 4px; right: 4px; }
.feature-viz--quadrant .fv-quad-axis {
  position: absolute; background: var(--line);
}
.feature-viz--quadrant .fv-x { left: 0; right: 0; bottom: 50%; height: 1px; }
.feature-viz--quadrant .fv-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.feature-viz--quadrant .fv-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  transform: translate(-50%, 50%);
}
.feature-viz--quadrant .fv-axis-label {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--fg-3);
  text-align: center; letter-spacing: 0.04em;
}

/* Mini evolution chain — Narrative intelligence */
.feature-viz--chain .fv-chain {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 6px;
}
.feature-viz--chain .fv-chain-step {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
}
.feature-viz--chain .fv-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--fg-3);
  letter-spacing: 0.06em;
}
.feature-viz--chain .fv-term { font-size: 12px; color: var(--fg-0); font-weight: 500; }
.feature-viz--chain .fv-arrow { color: var(--fg-3); font-size: 13px; align-self: center; }
.feature-viz--chain .fv-shift-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
}
.feature-viz--chain .fv-shift-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: oklch(0.50 0.16 285 / 0.12);
  color: var(--p-nzfirst);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.feature-viz--chain .fv-shift-meta {
  font-size: 11px; color: var(--fg-2);
}

/* Mini actor cards — Actor strategy */
.feature-viz--actor { display: flex; flex-direction: column; gap: 8px; }
.feature-viz--actor .fv-actor {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
}
.feature-viz--actor .fv-avatar {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--fg-3);
  background: #fff;
  font-size: 10px; font-weight: 600;
  color: var(--fg-1);
  flex-shrink: 0;
}
.feature-viz--actor .fv-actor-body { min-width: 0; flex: 1; }
.feature-viz--actor .fv-actor-name {
  font-size: 12px; font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.005em;
}
.feature-viz--actor .fv-actor-focus {
  font-size: 11px; color: var(--fg-1);
  margin-top: 2px;
}
.feature-viz--actor .fv-actor-shift {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--fg-2);
  margin-top: 3px;
}
.feature-viz--actor .fv-shift-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--p-nzfirst);
}

/* Audience-row visualisations — small representative widgets */

/* Journalists: anomaly card */
.aud-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
}
.aud-card--neg  { border-left-color: var(--neg); }
.aud-card--warn { border-left-color: var(--flag); }
.aud-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.aud-icon { font-size: 14px; line-height: 1; }
.aud-topic { font-size: 13px; font-weight: 600; color: var(--fg-0); letter-spacing: -0.005em; }
.aud-meta { font-size: 11.5px; color: var(--fg-1); }
.aud-meta b { color: var(--fg-0); font-weight: 600; }

/* Policy analysts: stance bar */
.aud-stance {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.aud-stance-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--fg-0); font-weight: 500;
  margin-bottom: 8px;
}
.aud-stance-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--fg-3);
  letter-spacing: 0.04em;
}
.aud-stance-bar {
  display: flex; height: 8px;
  border-radius: 999px; overflow: hidden;
  background: var(--bg-2);
  margin-bottom: 8px;
}
.aud-stance-seg.pos { background: var(--pos); }
.aud-stance-seg.neu { background: var(--fg-3); opacity: 0.5; }
.aud-stance-seg.neg { background: var(--neg); }
.aud-stance-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--fg-2);
}
.aud-stance-legend .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 4px;
  vertical-align: middle;
}
.aud-stance-legend .dot.pos { background: var(--pos); }
.aud-stance-legend .dot.neu { background: var(--fg-3); opacity: 0.6; }
.aud-stance-legend .dot.neg { background: var(--neg); }

/* Comms teams: lead/lag rows */
.aud-leadlag {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.aud-ll-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
}
.aud-ll-label {
  font-size: 11px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aud-ll-bar {
  position: relative;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  grid-column: 2; grid-row: 1;
}
.aud-ll-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 3px;
}
.aud-ll-fill.press     { background: var(--neg); }
.aud-ll-fill.discourse { background: var(--accent); }
.aud-ll-fill.mixed     { background: var(--flag); }
.aud-ll-tag {
  grid-column: 2; grid-row: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.04em;
  margin-top: 4px;
}
.aud-ll-tag.press     { color: var(--neg); }
.aud-ll-tag.discourse { color: var(--accent); }
.aud-ll-tag.mixed     { color: var(--flag); }

/* Researchers: cited-claim card */
.aud-cite {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.aud-cite-claim {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px; color: var(--fg-0);
  line-height: 1.4;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.aud-cite-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.aud-cite-list li {
  display: grid;
  grid-template-columns: 26px 1fr 50px;
  align-items: center;
  gap: 8px;
  font-size: 11px; color: var(--fg-1);
}
.aud-cite-tier {
  display: inline-grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.aud-cite-tier.t1 {
  background: oklch(0.94 0.05 195);
  color: var(--p-teal);
}
.aud-cite-tier.t2 {
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--line);
}
.aud-cite-src { color: var(--fg-1); }
.aud-cite-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--fg-3);
  text-align: right;
}

/* Landing-page responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-headline-l { font-size: 40px; }
  .features-grid { grid-template-columns: 1fr; }
  .audience-row { grid-template-columns: 1fr; gap: 12px; }
  .audience-viz { max-width: 420px; }
  .demo-chain { grid-template-columns: 1fr; }
  .demo-arrow { transform: rotate(90deg); justify-self: start; padding-left: 24px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .tier.is-featured { margin: 0; }
  .meth-grid { grid-template-columns: 1fr; }
  .meth-row,
  .meth-row:nth-child(odd),
  .meth-row:nth-child(even) {
    padding: 24px 0; border-right: 0;
  }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid .foot-col:first-child { grid-column: 1 / -1; }
  .landing .section { padding: 64px 0; }
  .landing-hero { padding: 48px 0 64px; }
  .bv-nrow { grid-template-columns: 1.4fr 50px 44px 60px 80px; }
}

/* ---------------------------------------------------------------
   Tier upgrade bar — slim CTA strip rendered below preview content
   for under-tier users. Pages render the first 1-2 real items
   inline (so the visitor sees what they'd get), then this bar
   provides the upgrade affordance. See _tier_partials.html.tmpl.
   --------------------------------------------------------------- */

.tier-upgrade-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.tier-upgrade-bar--pro { border-left-color: var(--accent-2, var(--accent)); }
.tier-upgrade-bar--team { border-left-color: var(--fg-2); }

.tier-upgrade-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--fg-2);
  white-space: nowrap;
}
.tier-upgrade-badge--free {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.tier-upgrade-badge--pro {
  color: var(--accent-2, var(--accent));
  border-color: color-mix(in srgb, var(--accent-2, var(--accent)) 45%, var(--line));
}
.tier-upgrade-badge--team {
  color: var(--fg-1);
  border-color: var(--fg-3);
}

.tier-upgrade-why {
  flex: 1 1 240px;
  color: var(--fg-1);
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}
.tier-upgrade-cta-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Inline variant — for sub-section gating inside an unlocked panel. */
.tier-upgrade-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.tier-upgrade-inline--pro { border-left-color: var(--accent-2, var(--accent)); }
.tier-upgrade-inline--team { border-left-color: var(--fg-2); }
.tier-upgrade-inline-why {
  flex: 1 1 auto;
  color: var(--fg-2);
  font-size: 12.5px;
  min-width: 0;
}
.tier-upgrade-inline-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.tier-upgrade-inline-cta:hover { text-decoration: underline; }

.bio-preview-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-1);
  margin: 6px 0 14px;
}

/* ============================================================
 * Home landing — Parliamentary Intelligence
 *
 * The home page is a marketing landing with a strong hero and a
 * stack of CTA sections (MP dossiers, Discourse, Press, Social,
 * Pro). Each section is a two-column grid: copy on one side, a
 * viz-shot-style preview on the other. Sections alternate the
 * grid direction so the eye zig-zags down the page. Each carries
 * a small colour accent that ties back to the destination page
 * (people=green, discourse=indigo, press=amber, social=teal,
 * pro=violet).
 *
 * The actual MP search bar + Government/Opposition/Pinned grids
 * now live on /search (see .search-page); the home is no longer
 * a directory.
 * ============================================================ */

.home-landing {
  max-width: 100%;
  /* Sections own their own vertical rhythm; the landing wrapper
   * adds nothing so we don't double-pad. */
}

/* ----- Hero -----
 * Dark navy banner with an animated NZ outline + particle mesh on
 * the right. The canvas sits behind the text spanning the full
 * width; a left-anchored radial fade keeps the copy column legible
 * while the mesh on the right shows through cleanly. Falls back to
 * a flat dark gradient if the canvas script never runs. */
.home-hero {
  position: relative;
  padding: 80px 0 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 32%, oklch(0.32 0.08 var(--accent-h) / 0.55), transparent 55%),
    radial-gradient(circle at 96% 88%, oklch(0.30 0.10 var(--accent-h) / 0.45), transparent 55%),
    linear-gradient(180deg, oklch(0.20 0.05 var(--accent-h)), oklch(0.16 0.05 var(--accent-h)));
  color: oklch(0.92 0.015 240);
  border-bottom: 1px solid oklch(0.35 0.06 var(--accent-h) / 0.5);
}
.home-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Left-anchored radial gradient that hides the mesh behind the
 * copy column. Sits above the canvas but below the text. The fade
 * fully reveals the right ~45% so the NZ outline reads cleanly. */
.home-hero-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 110% at 0% 50%, oklch(0.18 0.05 var(--accent-h) / 0.94), transparent 70%),
    linear-gradient(90deg, oklch(0.18 0.05 var(--accent-h) / 0.55), transparent 55%);
}
.home-hero .landing-container { position: relative; z-index: 2; }
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}
.home-hero-copy { max-width: 60ch; }
@media (max-width: 900px) {
  .home-hero { padding: 56px 0 48px; }
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero-copy { max-width: none; }
  .home-hero-fade {
    background:
      radial-gradient(ellipse 120% 70% at 50% 0%, oklch(0.18 0.05 var(--accent-h) / 0.85), transparent 70%),
      linear-gradient(180deg, oklch(0.18 0.05 var(--accent-h) / 0.65), transparent 45%);
  }
}

.home-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.78 0.05 var(--accent-h));
  margin-bottom: 18px;
}
.home-hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.78 0.14 var(--accent-h));
  box-shadow: 0 0 0 4px oklch(0.78 0.14 var(--accent-h) / 0.18);
}
.home-hero-eyebrow .sep { color: oklch(0.55 0.03 var(--accent-h)); }
.home-hero-title {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: oklch(0.98 0.01 240);
  margin: 0 0 22px;
  max-width: 18ch;
  text-shadow: 0 1px 30px oklch(0.20 0.06 var(--accent-h) / 0.6);
}
.home-hero-sub {
  font-size: 17px; line-height: 1.55;
  color: oklch(0.85 0.015 240);
  max-width: 62ch;
  margin: 0 0 28px;
}
.home-hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 36px;
}
/* Override the global .cta-* defaults so the buttons pop against the
 * dark hero. Primary becomes a bright near-white fill on dark navy;
 * secondary stays ghost-style but with light borders / text. */
.home-hero-cta-row .cta-primary {
  background: oklch(0.96 0.02 var(--accent-h));
  color: oklch(0.20 0.06 var(--accent-h));
  box-shadow: 0 4px 18px oklch(0.50 0.16 var(--accent-h) / 0.35);
}
.home-hero-cta-row .cta-primary:hover {
  background: #ffffff;
  color: oklch(0.18 0.06 var(--accent-h));
  opacity: 1;
}
.home-hero-cta-row .cta-secondary {
  border-color: oklch(0.62 0.05 var(--accent-h) / 0.55);
  color: oklch(0.92 0.015 240);
}
.home-hero-cta-row .cta-secondary:hover {
  border-color: oklch(0.85 0.05 var(--accent-h));
  color: oklch(0.98 0.01 240);
}
/* Single-item data highlight: the live ingest scale. Sits between the
 * CTA row and the jump nav. The green pip pulses to read as "active",
 * the number is the headline, the mono label gives the context. */
.home-hero-pulse {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 28px;
  padding: 12px 16px;
  background: oklch(0.22 0.05 var(--accent-h) / 0.5);
  border: 1px solid oklch(0.45 0.06 var(--accent-h) / 0.5);
  border-radius: var(--r-md);
  max-width: max-content;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.home-hero-pulse-pip {
  align-self: center;
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.82 0.17 145);
  box-shadow: 0 0 0 4px oklch(0.82 0.17 145 / 0.18);
  animation: hero-pulse-blink 2.4s ease-in-out infinite;
}
@keyframes hero-pulse-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px oklch(0.82 0.17 145 / 0.18); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 7px oklch(0.82 0.17 145 / 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-pulse-pip { animation: none; }
}
.home-hero-pulse-n {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: oklch(0.98 0.01 240);
  font-variant-numeric: tabular-nums;
}
.home-hero-pulse-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: oklch(0.78 0.04 var(--accent-h));
}
.home-hero-pulse-label .sep { color: oklch(0.55 0.03 var(--accent-h)); }
.home-hero-jump {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 24px;
  padding: 10px 10px;
  background: oklch(0.20 0.04 var(--accent-h) / 0.55);
  border: 1px solid oklch(0.45 0.05 var(--accent-h) / 0.5);
  border-radius: var(--r-md);
  max-width: max-content;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.home-jump {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px; color: oklch(0.85 0.02 240);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.home-jump:hover {
  background: oklch(0.30 0.06 var(--accent-h) / 0.55);
  border-color: oklch(0.50 0.06 var(--accent-h) / 0.55);
  color: oklch(0.98 0.01 240);
}
.home-jump .jump-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  color: oklch(0.65 0.06 var(--accent-h));
}
.home-hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: oklch(0.72 0.025 240);
  letter-spacing: 0.02em;
}
.home-hero-meta .sep { color: oklch(0.50 0.03 var(--accent-h)); }

/* ----- Ingest banner ----- */
/* Full-width strip under the hero with the 24h per-category breakdown.
 * Kept dark to match the hero's lower edge so it reads as a
 * continuation of the banner rather than the first body section. */
.home-ingest-banner {
  background: oklch(0.16 0.05 var(--accent-h));
  border-bottom: 1px solid oklch(0.35 0.06 var(--accent-h) / 0.5);
  padding: 14px 0;
}
.home-ingest-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: oklch(0.80 0.02 240);
}
.ingest-banner-lead {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px;
  color: oklch(0.70 0.05 var(--accent-h));
}
.ingest-banner-lead .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.82 0.17 145);
  box-shadow: 0 0 0 3px oklch(0.82 0.17 145 / 0.18);
}
.ingest-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
}
.ingest-stat b {
  font-weight: 600;
  color: oklch(0.97 0.01 240);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .home-ingest-banner-inner { gap: 8px 14px; font-size: 11.5px; }
}

/* ----- Fresh report highlight -----
   Light accent band that bridges the dark hero/ingest strip into the body
   and promotes the newest report. The whole card is one link; it retires
   itself server-side once the report ages out (see latestFreshReport). */
.home-fresh-report {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.home-fresh-report-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  transition: transform 0.15s ease;
}
.home-fresh-report-card:hover { transform: translateY(-1px); }
.home-fresh-report-flag {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--accent-2);
}
.home-fresh-report-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
  animation: fresh-report-blink 2.4s ease-in-out infinite;
}
@keyframes fresh-report-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px var(--accent-ring); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 7px oklch(0.48 0.16 var(--accent-h) / 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .home-fresh-report-pip { animation: none; }
}
.home-fresh-report-body {
  display: block;
  flex: 1 1 320px;
  min-width: 0;
}
.home-fresh-report-title {
  display: block;
  font-size: 19px; font-weight: 650; color: var(--fg-0);
  line-height: 1.25; letter-spacing: -0.01em;
}
.home-fresh-report-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px;
  font-size: 13.5px; color: var(--fg-2); line-height: 1.5;
}
.home-fresh-report-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--fg-3);
}
.home-fresh-report-tag {
  background: oklch(1 0 0 / 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--accent-2);
}
.home-fresh-report-cta {
  flex-shrink: 0;
  font-size: 14px; font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.home-fresh-report-card:hover .home-fresh-report-cta { color: var(--accent-2); }
@media (max-width: 760px) {
  .home-fresh-report-cta { display: none; }
}

/* ----- "What we found" findings strip -----
   The homepage lead hook: three real synthesis findings drawn across
   three framings, each a link to the page that proves the figure. The
   per-framing accent (left rail + eyebrow) signals the balanced mix —
   money/influence (amber), press coverage (indigo), what NZ is talking
   about (teal) — so the strip reads as a deliberate spread, not a
   single stance. Markup: cmd/api/templates/_home_finding_card.html.tmpl */
.home-findings {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  padding: 40px 0 44px;
}
.home-findings-head { margin-bottom: 20px; }
.home-findings-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--accent-2);
}
.home-findings-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.62 0.18 145);
  box-shadow: 0 0 0 3px oklch(0.62 0.18 145 / 0.18);
}
.home-findings-sub {
  margin: 8px 0 0;
  font-size: 14px; color: var(--fg-2); line-height: 1.5;
  max-width: 60ch;
}
.home-findings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .home-findings-grid { grid-template-columns: 1fr; }
}
.home-finding-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-finding-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px oklch(0.22 0.012 240 / 0.10);
}
.home-finding-card--watchdog { border-left-color: var(--flag); }
.home-finding-card--media    { border-left-color: var(--accent); }
.home-finding-card--mirror   { border-left-color: var(--p-teal); }
.home-finding-eyebrow {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-3);
}
.home-finding-card--watchdog .home-finding-eyebrow { color: oklch(0.52 0.14 70); }
.home-finding-card--media    .home-finding-eyebrow { color: var(--accent-2); }
.home-finding-card--mirror   .home-finding-eyebrow { color: oklch(0.46 0.12 195); }
.home-finding-figure {
  font-size: 24px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.home-finding-text {
  font-size: 14px; line-height: 1.45; color: var(--fg-1);
}
.home-finding-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.home-finding-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}
.home-finding-card:hover .home-finding-link { color: var(--accent-2); }
.home-finding-asof {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--fg-3);
  white-space: nowrap;
}

/* ----- Verifiable-foundation framing line (above the lens trio) ----- */
.home-foundation-note {
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.home-foundation-note-text {
  margin: 0;
  font-size: 14.5px; color: var(--fg-2); line-height: 1.5;
  max-width: 72ch;
}

/* ----- Insights + Media promotion blocks (section 4) ----- */
.home-analysis-promo {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.home-analysis-head { margin-bottom: 22px; }
.home-analysis-kicker {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600; color: var(--accent-2);
}
.home-analysis-title {
  margin: 8px 0 0;
  font-size: 24px; font-weight: 680; letter-spacing: -0.02em;
  color: var(--fg-0);
}
.home-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) {
  .home-analysis-grid { grid-template-columns: 1fr; }
}
.home-analysis-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-analysis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px oklch(0.22 0.012 240 / 0.10);
}
.home-analysis-eyebrow {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--accent-2);
}
.home-analysis-figure {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.home-analysis-text {
  font-size: 14px; line-height: 1.5; color: var(--fg-1);
}
.home-analysis-link {
  margin-top: 2px;
  font-size: 14px; font-weight: 600; color: var(--accent);
}
.home-analysis-card:hover .home-analysis-link { color: var(--accent-2); }

/* ----- Section shell ----- */
.home-cta {
  padding: 80px 0;
  position: relative;
}
.home-cta + .home-cta { border-top: 1px solid var(--line); }
.home-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.home-cta-grid-reverse .home-cta-copy { order: 2; }
.home-cta-grid-reverse .home-cta-visual { order: 1; }
@media (max-width: 900px) {
  .home-cta { padding: 56px 0; }
  .home-cta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-cta-grid-reverse .home-cta-copy { order: 0; }
  .home-cta-grid-reverse .home-cta-visual { order: 0; }
}

/* Each section gets its own accent and background tint. The tint
 * is intentionally very light — we want sectional rhythm, not a
 * carnival. The --section-* tokens are consumed by the eyebrow
 * dot and the visual chrome shadow. */
.home-cta-people {
  background:
    radial-gradient(circle at 88% 0%, oklch(0.95 0.04 145 / 0.35), transparent 60%),
    var(--bg-0);
  --section-color:  #10b981;
  --section-strong: #047857;
  --section-soft:   #d1fae5;
}
.home-cta-discourse {
  background:
    radial-gradient(circle at 12% 100%, oklch(0.95 0.05 var(--accent-h) / 0.45), transparent 60%),
    var(--bg-1);
  --section-color:  #6366f1;
  --section-strong: #3730a3;
  --section-soft:   #e0e7ff;
}
.home-cta-press {
  background:
    radial-gradient(circle at 88% 0%, oklch(0.95 0.05 85 / 0.45), transparent 60%),
    var(--bg-0);
  --section-color:  #f59e0b;
  --section-strong: #b45309;
  --section-soft:   #fef3c7;
}
.home-cta-social {
  background:
    radial-gradient(circle at 12% 100%, oklch(0.94 0.06 195 / 0.45), transparent 60%),
    var(--bg-1);
  --section-color:  #0ea5b7;
  --section-strong: #0e7490;
  --section-soft:   #cffafe;
}
.home-cta-media {
  background:
    radial-gradient(circle at 88% 0%, oklch(0.94 0.06 350 / 0.45), transparent 60%),
    var(--bg-0);
  --section-color:  #e11d48;
  --section-strong: #9f1239;
  --section-soft:   #ffe4e6;
}
.home-cta-pro {
  background:
    radial-gradient(circle at 88% 0%, oklch(0.95 0.05 var(--accent-h) / 0.55), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  --section-color:  oklch(0.55 0.16 var(--accent-h));
  --section-strong: oklch(0.42 0.18 var(--accent-h));
  --section-soft:   oklch(0.94 0.04 var(--accent-h));
}
/* Footnote-style "What is OpenBrief?" addendum. Renders as a dark
 * band beneath the last CTA section — a visual "underline" closing
 * the page content before the lighter site-footer kicks in. The
 * dark→light boundary itself is the separator, so we kill the
 * footer's top margin + border whenever this footnote is present
 * (see the :has() rule below). The dark fill uses a deep indigo in
 * the same hue family as the accent so it reads as part of the
 * brand, not a generic black bar. */
.home-footnote {
  margin-top: 64px;
  padding: 32px 0 28px;
  background:
    radial-gradient(circle at 14% 0%, oklch(0.30 0.07 var(--accent-h) / 0.55), transparent 60%),
    radial-gradient(circle at 92% 100%, oklch(0.30 0.07 var(--accent-h) / 0.45), transparent 55%),
    oklch(0.20 0.04 var(--accent-h));
  color: oklch(0.82 0.015 240);
  font-size: 12.5px;
  border-top: none;
}
/* When the home footnote is present, the global footer below it
 * drops its top margin + border so the dark→light boundary itself
 * acts as the page underline. */
.page-wrap:has(.home-footnote) + .site-footer {
  margin-top: 0;
  border-top: none;
}
.home-footnote-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: start;
}
.home-footnote-kicker {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.70 0.06 var(--accent-h));
  padding-top: 2px;
}
.home-footnote-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: oklch(0.82 0.015 240);
  max-width: 78ch;
}
.home-footnote-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center;
  white-space: nowrap;
}
.home-footnote-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: oklch(0.82 0.10 var(--accent-h));
  text-decoration: none;
}
.home-footnote-link:hover { color: oklch(0.92 0.04 var(--accent-h)); text-decoration: underline; }
.home-footnote-link-quiet { color: oklch(0.68 0.015 240); }
.home-footnote-link-quiet:hover { color: oklch(0.85 0.015 240); }
@media (max-width: 900px) {
  .home-footnote-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .home-footnote-kicker { padding-top: 0; }
}

/* Copy column */
.home-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--section-strong, var(--fg-1));
  margin-bottom: 14px;
}
.home-cta-eyebrow .dot {
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--section-color, var(--accent));
  box-shadow: 0 0 0 4px var(--section-soft, var(--accent-soft));
}
.home-cta-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--fg-0);
  margin: 0 0 16px;
  max-width: 24ch;
}
.home-cta-lede {
  font-size: 15.5px; line-height: 1.6;
  color: var(--fg-1);
  margin: 0 0 20px;
  max-width: 56ch;
}
.home-cta-bullets {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; gap: 10px;
}
.home-cta-bullets li {
  font-size: 14px; line-height: 1.5;
  color: var(--fg-1);
  padding-left: 22px;
  position: relative;
}
.home-cta-bullets li::before {
  content: ""; position: absolute;
  left: 2px; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--section-color, var(--accent));
  opacity: 0.85;
}
.home-cta-bullets li b {
  color: var(--fg-0);
  font-weight: 600;
}
.home-cta-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-bottom: 6px;
}
.home-cta-quiet {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--fg-2);
  text-decoration: none;
}
.home-cta-quiet:hover { color: var(--fg-0); text-decoration: underline; }
.home-cta-meta-pro {
  font-size: 11.5px; color: var(--fg-2);
  margin-top: 14px;
  letter-spacing: 0.02em;
}

/* Visual column shares the pro-landing viz-shot chrome. Override
 * the default tilt magnitude slightly so adjacent sections don't
 * feel like they wobble. */
.home-cta-visual { position: relative; }
.home-cta-visual .viz-shot { width: 100%; max-width: 520px; margin: 0 auto; }
.home-cta-visual .viz-shot--tilt-l { transform: rotate(-0.25deg); }
.home-cta-visual .viz-shot--tilt-r { transform: rotate(0.25deg); }

/* MP dossier preview content inside the viz-shot frame */
.hmp-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.hmp-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--fg-0);
}
.hmp-meta { min-width: 0; }
.hmp-name {
  font-size: 15px; font-weight: 600;
  color: var(--fg-0);
}
.hmp-role {
  font-size: 12.5px; color: var(--fg-2);
  margin-top: 2px;
}
.hmp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.hmp-chip {
  padding: 4px 10px;
  background: var(--section-soft, var(--bg-2));
  color: var(--section-strong, var(--fg-1));
  border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.hmp-row {
  display: flex; gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.hmp-row:first-of-type { border-top: none; padding-top: 0; }
.hmp-row-k {
  color: var(--fg-3);
  width: 92px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hmp-row-v {
  color: var(--fg-1);
  flex: 1; min-width: 0;
}

/* Discourse / Press / Social digest preview rows inside viz-shot */
.hcta-anom {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--section-color, var(--accent));
  background: var(--section-soft, var(--bg-2));
}
.hcta-anom-kind {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--section-strong, var(--fg-2));
  margin-bottom: 4px;
}
.hcta-anom-headline {
  font-size: 14px; font-weight: 600;
  color: var(--fg-0);
  margin-bottom: 6px;
}
.hcta-anom-stats {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.hcta-anom-ratio {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--section-strong, var(--fg-0));
  font-size: 13px;
}
.hcta-anom-detail { color: var(--fg-2); }

.hcta-digest-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.hcta-digest-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.hcta-digest-row:first-of-type { border-top: none; padding-top: 4px; }
.hcta-digest-label {
  color: var(--fg-0);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hcta-digest-n {
  color: var(--fg-1);
  font-size: 12.5px;
}
.hcta-digest-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.hcta-digest-trend.arrow-up { color: oklch(0.52 0.18 145); }
.hcta-digest-trend.arrow-down { color: oklch(0.55 0.20 25); }
.hcta-digest-trend.arrow-flat { color: var(--fg-3); }

/* Mini outlet-scorecard preview used in the Media CTA section. Same
 * row rhythm as the digest list above but with an editorial-lean pill
 * in the middle column — mirrors the real /media scorecard's first
 * three columns (outlet, lean, article count). Lead/lag is deferred
 * to /media itself; the footer line under the list points readers
 * over for the full surface. */
.hcta-media-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.hcta-media-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.hcta-media-row:first-of-type { border-top: none; padding-top: 4px; }
.hcta-media-name {
  color: var(--fg-0);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hcta-media-n {
  color: var(--fg-1);
  font-size: 11.5px;
}
.hcta-media-unit { color: var(--fg-3); }
.hcta-media-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* Social topic-card preview used in the Social CTA section. Mirrors
 * the real /social digest card: title + engagement count + trend on
 * top, then the two AI bars stacked underneath (stance: 5-class
 * supportive→mocking; sentiment: 3-class positive/neutral/negative).
 * Segment colours are the production palette from discourse.go /
 * social.go so the tease reads as the live thing scaled down. */
.hcta-soc-card {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.hcta-soc-card:first-of-type { border-top: none; padding-top: 4px; }
.hcta-soc-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.hcta-soc-label {
  color: var(--fg-0);
  font-weight: 600;
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hcta-soc-n {
  color: var(--fg-1);
  font-size: 11.5px;
}
.hcta-soc-unit { color: var(--fg-3); }
.hcta-soc-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.hcta-soc-trend.arrow-up { color: oklch(0.52 0.18 145); }
.hcta-soc-trend.arrow-down { color: oklch(0.55 0.20 25); }
.hcta-soc-trend.arrow-flat { color: var(--fg-3); }
.hcta-soc-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 5px;
  height: 10px;
}
.hcta-soc-bar-k {
  flex: 0 0 56px;
  align-self: center;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hcta-soc-seg {
  display: block;
  min-width: 2px;
  border-radius: 2px;
}
/* Stance palette — matches buildStanceBar() in cmd/api/discourse.go */
.hcta-soc-seg.s-sup  { background: #059669; }
.hcta-soc-seg.s-neu  { background: #94a3b8; }
.hcta-soc-seg.s-dis  { background: #6b7280; }
.hcta-soc-seg.s-crit { background: #dc2626; }
.hcta-soc-seg.s-mock { background: #7c3aed; }
/* Sentiment palette — matches buildSentimentBar() in cmd/api/social.go */
.hcta-soc-seg.t-pos  { background: #059669; }
.hcta-soc-seg.t-neu  { background: #94a3b8; }
.hcta-soc-seg.t-neg  { background: #dc2626; }

/* Mini co-occurrence graph used in the Discourse CTA section. The
 * SVG itself is hand-placed (see home.html.tmpl); these rules tune
 * the spacing inside the viz-shot frame and add a subtle pulse on
 * the dominant node so the panel feels live without any JS. */
.hcta-graph {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  margin-bottom: 14px;
}
.hcta-graph .hcta-graph-nodes circle:first-child {
  animation: hcta-graph-pulse 4.2s ease-in-out infinite;
  transform-origin: 140px 100px;
  transform-box: fill-box;
}
@keyframes hcta-graph-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 oklch(0.55 0.16 var(--accent-h) / 0)); }
  50%      { filter: drop-shadow(0 0 6px oklch(0.55 0.16 var(--accent-h) / 0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .hcta-graph .hcta-graph-nodes circle:first-child { animation: none; }
}

.hcta-outlets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hcta-outlets .chip {
  padding: 3px 9px;
  font-size: 10.5px;
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ----- 01a · Election 2026 sub-CTA (nested in People section) ----- */
.home-subcta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 4px solid var(--section-color, var(--accent));
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.04);
}
.home-subcta-flag {
  align-self: start;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--section-strong, var(--fg-2));
  padding: 5px 10px;
  background: var(--section-soft, var(--bg-2));
  border-radius: 4px;
  white-space: nowrap;
}
.home-subcta-title {
  font-size: 18px; font-weight: 500;
  color: var(--fg-0);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.home-subcta-text {
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
  max-width: 60ch;
}
.home-subcta-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--section-strong, var(--accent));
  text-decoration: none;
  white-space: nowrap;
}
.home-subcta-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .home-subcta { grid-template-columns: 1fr; }
  .home-subcta-flag { justify-self: start; }
  .home-subcta-link { justify-self: start; }
}

/* ----- Compact brief-visual variant for the Pro CTA on home ----- */
.brief-visual--home {
  max-width: 520px;
  margin: 0 auto;
}
.brief-visual--home .bv-body { padding: 16px; }
.brief-visual--home .bv-card { margin-top: 14px; }

/* ----- /search page Election 2026 footer card ----- */
.search-elections-cta {
  margin-top: 56px;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 100% 0%, oklch(0.95 0.05 var(--accent-h) / 0.4), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
}
.search-elections-cta-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.search-elections-cta-title {
  font-size: 19px; font-weight: 500;
  color: var(--fg-0);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.search-elections-cta-text {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-1);
  margin: 0 0 14px;
  max-width: 64ch;
}
.search-elections-cta-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--accent-2);
  text-decoration: none;
}
.search-elections-cta-link:hover { text-decoration: underline; }

/* =========================================================================
 * /media — Media Transparency Page
 *
 * Citizen-facing narrative layer over /press × /discourse. Five sections:
 * findings list, outlet scorecard, coverage-gap cards, framing-shift list,
 * methodology summary. Mobile-first: most reads will be from a shared link
 * on a phone.
 * ===================================================================== */

.media-transparency .media-findings {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.media-finding {
  position: relative;
  padding: 14px 18px 14px 22px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md, 6px);
}
.media-finding--gap     { border-left-color: #2563eb; }
.media-finding--leadlag { border-left-color: #0891b2; }
.media-finding--drift   { border-left-color: #7c3aed; }
.media-finding--anomaly { border-left-color: #dc2626; }
.media-finding-text {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--fg-0);
}
.media-finding-link {
  font-size: 12.5px;
  margin-right: 14px;
}
.media-finding-correct {
  font-size: 11.5px;
}
@media (max-width: 640px) {
  .media-finding-link { display: block; margin: 4px 0 0; }
  .media-finding-correct { display: block; margin-top: 4px; }
}

.media-empty {
  padding: 18px 22px;
  background: var(--bg-1);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md, 6px);
  color: var(--fg-2);
  font-size: 14px;
  margin-bottom: 28px;
}

.media-scorecard-wrap {
  margin: 0 0 28px;
  overflow-x: auto;
}
.media-scorecard { width: 100%; }
.media-scorecard th { white-space: nowrap; }
.media-topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
}
.media-topic-list li { line-height: 1.35; }
.lean-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--lean-fg, var(--rule));
  color: var(--lean-fg, var(--fg-1));
  background: transparent;
  font-size: 11.5px;
  white-space: nowrap;
}

.media-gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 32px;
}
.media-gap-card {
  display: block;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
  color: var(--fg-0);
  text-decoration: none;
  transition: border-color .12s ease;
}
.media-gap-card:hover { border-color: var(--accent); }
.media-gap-name {
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 10px;
}
.media-gap-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.media-gap-stat {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.media-gap-stat--low { color: var(--fg-3); }

.media-shift-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-shift {
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
}
.media-shift-topic {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 4px;
}
.media-shift-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.4;
}
.media-shift-from { color: var(--fg-2); }
.media-shift-to   { color: var(--fg-0); font-weight: 500; }
.media-shift-arrow { color: var(--fg-3); }
.media-shift-count { margin-top: 4px; font-size: 11.5px; }

.media-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 32px;
}
.media-method-card {
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
}
.media-method-card h3 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-0);
}
.media-method-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-1);
}

/* =========================================================================
 * /pro landing — Built-for audience card grid and worked-example lead.
 * Lightweight cards (no figures, just text) sit between the detection
 * block and the worked example.
 * ===================================================================== */
.section-audience { padding-block: 56px; }
.audience-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.audience-card {
  padding: 18px 20px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
}
.audience-card-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.audience-card-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--fg-0);
}
.audience-card-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-1);
}

.demo-lead {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-2);
}

/* =====================================================================
 * /pro landing — sectional colour
 *
 * The page used to read as a wall of grey/white. To bring it in line
 * with the home page (which gives each section its own accent + soft
 * radial wash), each Pro landing section now defines --section-color
 * / --section-strong / --section-soft tokens and paints a very light
 * radial gradient behind itself. The tokens are consumed by the
 * section kicker dot, feature-card / audience-card top borders, the
 * meth-num arrow, and the demo-note border — small touches in many
 * places rather than one big block of colour, so the editorial tone
 * is preserved.
 * ===================================================================== */
.landing .section-features {
  background:
    radial-gradient(circle at 92% 0%, oklch(0.95 0.05 var(--accent-h) / 0.45), transparent 60%),
    var(--bg-0);
  --section-color:  oklch(0.55 0.16 var(--accent-h));
  --section-strong: oklch(0.42 0.18 var(--accent-h));
  --section-soft:   oklch(0.94 0.04 var(--accent-h));
}
.landing .section-builtfor {
  background:
    radial-gradient(circle at 8% 100%, oklch(0.95 0.05 85 / 0.4), transparent 60%),
    var(--bg-1);
  --section-color:  #f59e0b;
  --section-strong: #b45309;
  --section-soft:   #fef3c7;
}
.landing .section-audience {
  background:
    radial-gradient(circle at 88% 0%, oklch(0.95 0.04 145 / 0.35), transparent 60%),
    var(--bg-0);
  --section-color:  #10b981;
  --section-strong: #047857;
  --section-soft:   #d1fae5;
}
.landing .section-demo {
  background:
    radial-gradient(circle at 12% 100%, oklch(0.94 0.06 350 / 0.4), transparent 60%),
    var(--bg-1);
  --section-color:  #e11d48;
  --section-strong: #9f1239;
  --section-soft:   #ffe4e6;
}
.landing .section-pricing {
  background:
    radial-gradient(circle at 92% 0%, oklch(0.95 0.05 var(--accent-h) / 0.30), transparent 55%),
    var(--bg-0);
  --section-color:  oklch(0.55 0.16 var(--accent-h));
  --section-strong: oklch(0.42 0.18 var(--accent-h));
  --section-soft:   oklch(0.94 0.04 var(--accent-h));
}
.landing .section-methodology {
  background:
    radial-gradient(circle at 8% 100%, oklch(0.94 0.06 195 / 0.35), transparent 60%),
    var(--bg-1);
  --section-color:  #0ea5b7;
  --section-strong: #0e7490;
  --section-soft:   #cffafe;
}

/* Kicker — adopt the section colour and prepend a soft pill dot so the
   section opener visually rhymes with the home page's home-cta-eyebrow. */
.landing .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--section-strong, var(--accent));
}
.landing .section-kicker::before {
  content: "";
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--section-color, var(--accent));
  box-shadow: 0 0 0 4px var(--section-soft, var(--accent-soft));
}

/* Feature cards — keep the white surface but mark the top edge with a
   thin coloured rule, and tint the section number to match. */
.landing .section-features .feature-card {
  border-top: 2px solid var(--section-color);
  position: relative;
}
.landing .section-features .feature-num { color: var(--section-strong); }

/* Detection rows — tint the audience-tag in --section-strong and give
   it a subtle leading colour bar. */
.landing .section-builtfor .audience-tag {
  color: var(--section-strong);
  padding-left: 12px;
  border-left: 3px solid var(--section-color);
}

/* Built-for audience cards — coloured rule + accent eyebrow. */
.landing .section-audience .audience-card {
  border-top: 2px solid var(--section-color);
  background: color-mix(in oklch, var(--section-soft) 35%, var(--bg-1));
}
.landing .section-audience .audience-card-title { color: var(--section-strong); }

/* Worked example — replace the flat slate with a tinted block and let
   the demo-note's accent rail pick up the section colour. */
.landing .section-demo .demo-block {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--section-soft) 40%, transparent), transparent 80%);
  padding: 32px 32px 28px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.landing .section-demo .demo-eyebrow { color: var(--section-strong); }
.landing .section-demo .demo-lead { color: var(--section-strong); }
.landing .section-demo .demo-note { border-left-color: var(--section-color); }
.landing .section-demo .demo-step { border-top: 2px solid var(--section-color); }

/* Pricing — pull the featured tier ring to the section accent so the
   "Recommended" card stops reading as a slate-bordered box. */
.landing .section-pricing .tier.is-featured {
  border-color: var(--section-color);
  box-shadow: 0 12px 28px -14px color-mix(in oklch, var(--section-color) 55%, transparent);
}
.landing .section-pricing .tier-flag {
  background: var(--section-color);
  color: #fff;
}
.landing .section-pricing .tier-cta.primary {
  background: var(--section-color);
  border-color: var(--section-color);
  color: #fff;
}
.landing .section-pricing .tier-cta.primary:hover {
  background: var(--section-strong);
  border-color: var(--section-strong);
  color: #fff;
  opacity: 1;
}
.landing .section-pricing .tier-features .tier-group-head { color: var(--section-strong); }

/* Methodology — use the section colour on the arrow gutter so the
   read-rhythm of the four rows pops, and on the bottom links. */
.landing .section-methodology .meth-num { color: var(--section-color); }
.landing .section-methodology .meth-foot .meth-link {
  color: var(--section-strong);
  border-bottom-color: color-mix(in oklch, var(--section-color) 45%, transparent);
}
.landing .section-methodology .meth-foot .meth-link:hover {
  border-bottom-color: var(--section-strong);
}

/* Pricing — group headers inside the Pro tier's feature list. */
.tier-features .tier-group-head {
  list-style: none;
  margin-left: -1em;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.tier-features .tier-group-head:first-child { margin-top: 0; }

/* =====================================================================
 * About page
 *
 * Sectioned, lightly-coloured editorial layout. The page is short and
 * single-column, so each section gets a numbered eyebrow + ruled h2,
 * and the two parallel pledge lists ("Conflicts of interest" / "What
 * OpenBrief won't do") become side-by-side bordered cards. The hero
 * block reuses the accent radial gradient from the home-cta-pro shell
 * so About visually rhymes with the rest of the marketing surfaces.
 * ===================================================================== */
.about-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 0 8px;
}
.about-hero {
  position: relative;
  padding: 40px 36px 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 8%, oklch(0.95 0.05 var(--accent-h) / 0.55), transparent 60%),
    radial-gradient(circle at 8% 100%, oklch(0.95 0.05 145 / 0.30), transparent 60%),
    var(--bg-1);
  margin-bottom: 48px;
}
.about-hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 10px;
}
.about-hero-kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.about-hero h1 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0 0 16px;
  color: var(--fg-0);
}
.about-hero p {
  font-size: 15.5px; line-height: 1.6;
  color: var(--fg-1);
  margin: 0 0 12px;
  max-width: 64ch;
}
.about-hero p:last-child { margin-bottom: 0; }

.about-block { margin: 48px 0; }
.about-block-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.about-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--about-accent, var(--accent));
  font-weight: 600;
}
.about-h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg-0);
  margin: 0;
}
.about-block p {
  font-size: 15px; line-height: 1.62;
  color: var(--fg-1);
  margin: 0 0 12px;
}

/* Side-by-side pledge cards (Conflicts of interest / What we won't do).
   Each card carries its own accent via a CSS var so the two read as
   parallel but distinct — green for the "has none of these" inventory,
   amber for the "won't do" commitments. */
.about-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .about-grid-2 { grid-template-columns: 1fr; }
}
.about-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-1);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.about-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--about-accent, var(--accent));
}
.about-card--positive { --about-accent: #10b981; }
.about-card--commitment { --about-accent: #f59e0b; }
.about-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--about-accent, var(--accent));
  margin-bottom: 6px;
}
.about-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--fg-0);
}
.about-card p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg-2);
  margin: 12px 0 0;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid; gap: 8px;
}
.about-list li {
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg-1);
  padding-left: 22px;
  position: relative;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--about-accent, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--about-accent, var(--accent)) 55%, transparent);
}
.about-card--positive .about-list li::after {
  content: "";
  position: absolute;
  left: 3px; top: 0.72em;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--about-accent);
  border-bottom: 1.5px solid var(--about-accent);
  transform: rotate(-45deg);
}
.about-card--commitment .about-list li::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 0.62em;
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--about-accent);
  border-right: 1.5px solid var(--about-accent);
  transform: rotate(135deg);
}

/* Corrections / contact callout — accent-bordered panel so it reads as
   a "next action" block rather than just another paragraph. */
.about-callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, transparent 55%),
    var(--bg-1);
  padding: 20px 22px;
  margin-top: 16px;
}
.about-callout p {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-1);
  margin: 0 0 10px;
}
.about-callout p:last-child { margin-bottom: 0; }

.about-legal {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-2);
}
.about-legal p { margin: 0 0 8px; }
.about-foot-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.about-foot-links a { color: var(--accent); text-decoration: none; }
.about-foot-links a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .about-hero { padding: 28px 22px; }
  .about-block-head { grid-template-columns: 44px 1fr; gap: 12px; }
  .about-h2 { font-size: 19px; }
}

/* ===================================================================
   Insights page — /insights
   =================================================================== */

.insights-nav {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 28px;
  padding: 12px 16px;
  /* Indigo-tinted surface + accent edge + soft shadow so the floating rail
     reads as navigation and lifts clearly off the grey cards/tables. */
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px var(--accent-ring);
  /* Stay reachable on this long page: stick below the sticky analysis
     subnav (top:0, ~56px tall). Opaque background already set above so
     scrolled content doesn't show through. */
  position: sticky;
  top: 74px;
  z-index: 20;
}
.insights-nav-link {
  font-size: 12px; font-weight: 500;
  color: var(--accent-2);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.insights-nav-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.insights-chart-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}

.insights-table-wrap {
  margin-bottom: 32px;
  overflow-x: auto;
}

/* Third-party spend-by-lean filter + chart (insights 4b) */
.tp-filter {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
}
.tp-filter-btn {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: calc(var(--r-md) - 2px);
  cursor: pointer;
}
.tp-filter-btn.is-active {
  background: var(--bg-0);
  color: var(--fg-0);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tp-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--fg-2);
}
.tp-totals b { color: var(--fg-0); }
.tp-union-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--p-labour, #d7263d);
  color: #fff;
  vertical-align: middle;
}
.tp-period-note {
  font-size: 13px;
  color: var(--fg-2);
  margin: 8px 0 4px;
}
.tp-period-list {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0 0 12px;
  padding-left: 20px;
}
.tp-period-list li {
  margin-bottom: 4px;
}

.insights-empty {
  padding: 24px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: 13.5px;
  margin-bottom: 32px;
}

.insights-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.insights-chart-small {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
}
.insights-summary-cards {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}
.insights-stat-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex; align-items: baseline; gap: 12px;
}
.insights-stat-value {
  font-size: 28px; font-weight: 600;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.insights-stat-label {
  font-size: 13px; color: var(--fg-2);
}

/* Channel pills — coloured by corpus */
.channel-pill {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.channel-discourse { background: #fef3c7; color: #92400e; }
.channel-press     { background: #e0e7ff; color: #3730a3; }
.channel-social    { background: #fce7f3; color: #9d174d; }
.channel-audio     { background: #d1fae5; color: #065f46; }

/* Lifecycle classification pills */
.lifecycle-pill {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.lifecycle-persistent { background: #d1fae5; color: #065f46; }
.lifecycle-decaying   { background: #fef3c7; color: #92400e; }
.lifecycle-flash      { background: #fee2e2; color: #991b1b; }
.lifecycle-resurgent  { background: #e0e7ff; color: #3730a3; }

/* Stance pills for echo chamber table */
.stance-pill {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 3px;
}
.stance-pill.stance-supportive       { background: #d1fae5; color: #065f46; }
.stance-pill.stance-critical         { background: #fee2e2; color: #991b1b; }
.stance-pill.stance-mocking          { background: #fce7f3; color: #9d174d; }
.stance-pill.stance-dismissive       { background: #fef3c7; color: #92400e; }
.stance-pill.stance-neutral-explainer { background: #f1f5f9; color: #475569; }

/* Divergence bar — inline horizontal fill */
.divergence-bar {
  display: inline-block;
  position: relative;
  font-size: 11px; font-weight: 500;
  color: var(--fg-1);
  padding: 2px 8px;
  background: linear-gradient(90deg, #fecaca var(--div-width), var(--bg-1) var(--div-width));
  border: 1px solid var(--line);
  border-radius: 3px;
  min-width: 50px;
  text-align: right;
}

/* Anomaly cluster card — extends the existing anomaly-card */
.anomaly-card.anomaly-cluster {
  border-left-color: #7c3aed;
}
.anomaly-channels {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .insights-split { grid-template-columns: 1fr; }
  .insights-nav { gap: 4px 6px; }
  .insights-nav-link { font-size: 11px; padding: 3px 8px; }
}


/* Electorate seat page (Phase 0, electorate-intelligence layer).
   Reuses the elections slate-card system; these few additions style the
   per-cycle group header and the section sub-line. */
.section-sub { font-size: 13px; color: var(--fg-3); margin: 4px 0 0; line-height: 1.45; }
.elections-slate-cycle-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bg-2);
}
.elections-slate-cycle-year { font-size: 16px; font-weight: 650; color: var(--fg-0); font-feature-settings: "tnum"; }
.elections-slate-cycle-link { margin-left: auto; font-size: 12.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.elections-slate-cycle-link:hover { text-decoration: underline; }

/* Seat page "Past results" — condensed cycle rows linking to the full
   per-cycle slate. The Standing section reuses .elections-slate-* cards. */
.seat-results-list { display: flex; flex-direction: column; gap: 6px; }
.seat-result-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border: 1px solid var(--bg-3); border-radius: 8px; background: var(--bg-0);
  text-decoration: none; color: var(--fg-0);
}
.seat-result-row:hover { background: var(--bg-1); }
.seat-result-year { font-weight: 650; font-feature-settings: "tnum"; min-width: 3.5em; }
.seat-result-winner { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--fg-1); }
.seat-result-row .arrow { color: var(--fg-3); }

/* Nav-search electorate rows: split into a seat link (body) + an MP pill
   so a single match offers both destinations. */
.nav-search-row-split { padding: 0; gap: 0; }
.nav-search-row-main {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 7px 14px; text-decoration: none; color: var(--fg-1);
  transition: background 0.1s;
}
.nav-search-row-main:hover { background: var(--bg-2); color: var(--fg-0); }
.nav-search-row-mp {
  flex-shrink: 0; align-self: stretch; display: flex; align-items: center;
  padding: 0 14px; font-size: 11px; font-weight: 600; color: var(--accent);
  text-decoration: none; border-left: 1px solid var(--bg-3); transition: background 0.1s;
}
.nav-search-row-mp:hover { background: var(--bg-2); }

/* Slate page → seat hub cross-link, under the slate headline. */
.elections-hero-hublink {
  display: inline-block; margin-top: 6px; font-size: 13px;
  color: var(--accent); text-decoration: none; font-weight: 550;
}
.elections-hero-hublink:hover { text-decoration: underline; }

/* Contest-only seat hub: glyph avatar in place of an MP portrait. */
.avatar-mp.seat-glyph { color: var(--fg-3); font-weight: 400; font-size: 34px; line-height: 1; }

/* Seat page "In the news" — corpus coverage mentioning the area. */
.seat-mentions { display: flex; flex-direction: column; gap: 4px; }
.seat-mention-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--bg-2); border-radius: 8px; background: var(--bg-0);
  text-decoration: none; color: var(--fg-0);
}
.seat-mention-row:hover { background: var(--bg-1); }
.seat-mention-body { flex: 1; min-width: 0; }
.seat-mention-title { font-size: 14px; line-height: 1.3; }
.seat-mention-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px; font-size: 11.5px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.seat-mention-term {
  padding: 1px 6px; border-radius: 4px; background: var(--bg-2);
  color: var(--fg-2); text-transform: none; letter-spacing: 0; font-weight: 550;
}
.seat-mention-row .arrow { color: var(--fg-3); }

/* Seat page "Local topics" — discourse clusters scoped to the seat. */
.seat-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.seat-topic {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px;
  border: 1px solid var(--bg-3); border-radius: 999px; background: var(--bg-0);
  text-decoration: none; color: var(--fg-0); font-size: 13px;
}
.seat-topic:hover { background: var(--bg-1); border-color: var(--accent); }
.seat-topic-count {
  min-width: 20px; padding: 0 6px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--fg-2); font-size: 11px; font-weight: 650;
  font-feature-settings: "tnum";
}

/* =====================================================================
 * Reports — long-form section (/reports + /reports/{slug})
 *
 * Hand-authored to match the Dossier system (tokens, mono kickers, line
 * borders). The Reports templates use these classes; report-specific
 * one-offs live in a per-report /assets/reports/<slug>/report.css instead
 * of here. See cmd/api/templates/_report_layout.html.tmpl.
 * ===================================================================== */

/* --- Index --- */
.reports-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 0 8px;
}
.reports-hero {
  position: relative;
  padding: 40px 36px 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 92% 8%, oklch(0.95 0.05 var(--accent-h) / 0.55), transparent 60%),
    radial-gradient(circle at 8% 100%, oklch(0.95 0.05 145 / 0.30), transparent 60%),
    var(--bg-1);
  margin-bottom: 40px;
}
.reports-hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 10px;
}
.reports-hero-kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.reports-hero h1 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0 0 16px;
  color: var(--fg-0);
}
.reports-hero p {
  font-size: 15.5px; line-height: 1.6;
  color: var(--fg-1);
  margin: 0;
  max-width: 64ch;
}

.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .reports-grid { grid-template-columns: 1fr; }
}
.report-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  padding: 22px 22px 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.report-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px oklch(0.5 0.05 240 / 0.08);
  transform: translateY(-1px);
}
.report-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-card-title {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg-0); margin: 0;
}
.report-card-summary {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-2); margin: 10px 0 0; flex: 1;
}
.report-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-3); margin-top: 16px;
  font-feature-settings: "tnum";
}

.report-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.reports-empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 48px 24px; text-align: center;
  color: var(--fg-3); font-size: 15px;
}

/* --- Report detail (shared chrome) --- */
.report-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 8px;
}
.report-head { padding: 16px 0 8px; }
.report-back { margin-bottom: 20px; }
.report-back a { font-size: 13px; color: var(--fg-2); text-decoration: none; }
.report-back a:hover { color: var(--fg-0); }
.report-head-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.report-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--fg-0); margin: 0;
}
.report-subtitle {
  font-size: 19px; line-height: 1.45;
  color: var(--fg-2); margin: 14px 0 0; max-width: 60ch;
}
.report-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--fg-3); margin-top: 20px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
  font-feature-settings: "tnum";
}
.report-author { color: var(--fg-1); font-weight: 600; }

.report-body { padding-top: 28px; }
.report-body > .report-lede {
  font-size: 19px; line-height: 1.55; color: var(--fg-1);
  margin: 0 0 28px;
}
.report-body p {
  font-size: 16px; line-height: 1.72; color: var(--fg-1);
  margin: 0 0 18px;
}
.report-body h2 {
  font-size: 23px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--fg-0); margin: 40px 0 14px;
}
.report-body h3 {
  font-size: 18px; font-weight: 600; color: var(--fg-0);
  margin: 28px 0 10px;
}
.report-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.report-body ul, .report-body ol { margin: 0 0 18px; padding-left: 22px; color: var(--fg-1); }
.report-body li { font-size: 16px; line-height: 1.7; margin-bottom: 6px; }
.report-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--fg-1); font-size: 18px; font-style: italic;
}
.report-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 24px 0; }
.report-body figure { margin: 24px 0; }
.report-body figcaption { font-size: 13px; color: var(--fg-3); margin-top: 8px; text-align: center; }

.report-foot {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.report-foot-back { font-size: 14px; font-weight: 600; color: var(--fg-1); text-decoration: none; }
.report-foot-back:hover { color: var(--fg-0); }
.report-foot-note { font-size: 13px; color: var(--fg-3); margin: 12px 0 0; }
.report-foot-note a { color: var(--fg-2); text-decoration: underline; }
.report-foot-note a:hover { color: var(--fg-0); }

/* --- Report body extras: summary list, table, figures/charts, caveats --- */
.report-summary-list { margin: 0 0 20px; padding-left: 22px; }
.report-summary-list li { font-size: 16px; line-height: 1.62; color: var(--fg-1); margin-bottom: 12px; }

.report-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 24px;
  font-size: 15px;
}
.report-table th, .report-table td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.report-table thead th {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600; border-bottom: 1px solid var(--line-strong);
}
.report-table tbody td { color: var(--fg-1); }
.report-table tbody td:last-child { font-feature-settings: "tnum"; color: var(--fg-0); font-weight: 600; }
.report-table tbody tr:last-child td { border-bottom: none; }

.report-figure {
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-0);
  padding: 16px 16px 12px;
}
.report-chart { width: 100%; }
.report-figure figcaption {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}
.report-figure figcaption strong { color: var(--fg-1); }
.report-chart-dl {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid transparent; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.report-chart-dl:hover { border-color: var(--accent-ring); }
.report-chart-dl::before {
  content: "↓ "; font-weight: 700;
}

.report-caveat {
  font-size: 14px; line-height: 1.6; color: var(--fg-2);
  background: var(--flag-soft); border-left: 3px solid var(--flag);
  padding: 14px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0;
}
.report-caveat strong { color: var(--fg-1); }
.report-colophon {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--fg-3);
}

@media (max-width: 600px) {
  .report-figure figcaption { flex-direction: column; gap: 10px; }
}

/* --- Print: clean, ink-friendly report; charts reflow via beforeprint JS.
   Scoped with :has() to the Reports surfaces so other pages print unchanged. */
@media print {
  /* Firefox blanks every page after the first when content sits inside a
     flex / 100vh-min-height container or under a position:fixed element.
     body.app is exactly that (flex column, min-height:100vh, fixed ::before
     gradient, position:relative children). Flatten it for paginated print so
     the report flows across pages. Chrome tolerates the original; FF doesn't. */
  body:has(.report-page), body:has(.reports-page) {
    display: block !important; min-height: 0 !important;
  }
  body:has(.report-page)::before, body:has(.reports-page)::before { display: none !important; }
  body:has(.report-page) > *:not(.topbar),
  body:has(.reports-page) > *:not(.topbar) { position: static !important; }

  body:has(.report-page) .topbar,    body:has(.reports-page) .topbar,
  body:has(.report-page) .site-footer, body:has(.reports-page) .site-footer {
    display: none !important;
  }
  /* Interactive-only affordances have no place on paper. */
  .report-chart-dl, .report-back, .report-foot-back { display: none !important; }

  /* Full width, dark text, drop the hero gradient that wastes ink. */
  .report-page, .reports-page { max-width: 100%; margin: 0; padding: 0; }
  .report-head { padding-top: 0; }
  .report-title, .report-body, .report-body h2, .report-body h3,
  .report-body p, .report-body li,
  .report-table th, .report-table td { color: #000 !important; }
  .report-subtitle, .report-byline,
  .report-figure figcaption, .report-foot-note { color: #333 !important; }

  /* Keep figures, charts, tables and quotes whole across page breaks;
     keep headings with the text that follows them. */
  .report-figure, .report-chart, .report-table,
  blockquote, .report-caveat { break-inside: avoid; page-break-inside: avoid; }
  .report-body h2, .report-body h3 { break-after: avoid; page-break-after: avoid; }

  /* Force kept backgrounds/chart fills to actually print. */
  .report-figure, .report-tag, .report-caveat {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report-figure { border-color: #ccc; }
  /* Charts scale to the page width with no print-time JS. ECharts renders an
     absolutely-positioned <svg> inside a fixed-size, overflow:hidden wrapper,
     so a plain height:auto collapses the wrapper to zero in Firefox and the
     chart vanishes. Instead the container gets a DEFINITE height from its
     aspect ratio (--chart-ar, stamped by the chart script from the viewBox);
     the wrapper and svg then fill it with 100%/100%. Works the same in
     Chrome and Firefox. */
  .report-chart {
    width: 100% !important; height: auto !important;
    aspect-ratio: var(--chart-ar, 5 / 3);
  }
  .report-chart > div:first-child { width: 100% !important; height: 100% !important; }
  .report-chart svg { width: 100% !important; height: 100% !important; }

  /* a4-ish margins handled by the browser; give the body breathing room. */
  .report-body { padding-top: 16px; }
}