/* ── Design Tokens ───────────────────────────────────────────── */
/*
 * THEME RULE: Always use these variables for card text/backgrounds.
 * --card-text  = primary text INSIDE a card (light or dark bg)
 * --card-muted = secondary/muted text INSIDE a card
 * --card       = card background
 * --text / --muted are for the PAGE BG context (sidebars, feed bg).
 *
 * Override --card, --card-text, --card-muted in each [data-theme] block
 * so any new component using them automatically gets the right contrast.
 */
:root {
  --navy:         #0b2f63;
  --navy-light:   #0e3872;
  --navy-hover:   rgba(255,255,255,0.08);
  --accent:       #800000;
  --accent-dk:    #600000;
  /* Secondary "data / legislative" accent — used on the Explore page so its
     chrome (section icons, category + bill-number labels, card hovers) reads
     as one coherent blue instead of clashing with the brand red. Each theme
     can brighten it; dark does, below. */
  --accent-blue:      rgb(53,124,200);
  --accent-blue-tint: rgba(53,124,200,0.10);
  --white:        #ffffff;
  /* Page-context text (used on navy/dark page bg — sidebars, feed bg) */
  --text:         #1a2035;
  --muted:        #6b7a99;
  /* Card-context text (used inside white/light card backgrounds) */
  --card-text:    #1a2035;
  --card-muted:   #6b7a99;
  --card:         #ffffff;
  --border:       #dde3ef;
  /* Opaque tile background for icon badges that need a knockout/halo behind
     an overlaid mark (cycle 042b) — --border itself is translucent in dark,
     so a knockout painted in --border's literal value wouldn't fully cover
     strokes underneath it there. This token is always opaque. */
  --icon-tile-bg: var(--border);
  --bar-bg:       #e4e8f2;
  --shadow-sm:    0 2px 8px rgba(6,21,43,0.10);
  --shadow-md:    0 6px 22px rgba(6,21,43,0.16);
  --radius:       12px;
  --radius-sm:    8px;
  --sidebar-text: rgba(255,255,255,0.88);
  --sidebar-muted:#8d93a8;
  /* Sidebar background — used by .left-sidebar and .right-sidebar. Each
     theme overrides this below. */
  --sidebar-bg:   var(--navy);

  /* ── Semantic tokens (cycle 111, Restyle Phase 2 — the token foundation)
     Formalizes the proto-token layer above into a complete vocabulary.
     PIXEL-PARITY BY DEFINITION: aliases (surface-page/-card/-raised, ink,
     ink-muted, hairline-default, brand) point at the existing tokens above
     with zero value change. The genuinely NEW additions (surface-sunken,
     ink-secondary, ink-faint, hairline-strong, and the status triads) are
     chosen from this file's own most-common existing literal values where
     one exists (documented per token below), but are consumed narrowly or
     not at all this cycle -- see notes/cycle-111-plan.md's literal-sweep
     discipline: a token existing does not obligate every near-duplicate
     literal to be forced onto it if that would change a rendered pixel. */

  /* Surfaces */
  --surface-page:   var(--navy);   /* dark/america override below */
  --surface-card:   var(--card);   /* alias -- already fully theme-varying */
  --surface-raised: var(--sidebar-bg); /* alias -- already fully theme-varying */
  --surface-sunken: #f8f9fc; /* recessed-into-card fields (search/select/write-in inputs) --
                                 this exact value already used in ~10 such rules */

  /* Ink ramp */
  --ink:           var(--card-text);  /* alias */
  --ink-secondary: rgba(26,32,53,0.72); /* NEW tier between ink and muted; dark override
                                            below reuses an already-common 0.7 value */
  --ink-muted:     var(--card-muted); /* alias */
  --ink-faint:     rgba(26,32,53,0.4); /* NEW faintest tier; dark override below reuses
                                           an already-common 0.4 value */

  /* Hairlines */
  --hairline-default: var(--border); /* alias */
  --hairline-strong:  #d6dbe8; /* NEW, more visible divider -- this exact value already
                                   used for several stronger borders */

  /* Brand -- --accent stays; this is purely an additional semantic name,
     existing --accent consumers are untouched. */
  --brand: var(--accent);

  /* Status triads (Home Sapien grammar: brand != danger becomes
     expressible) -- defined, NOT applied anywhere new this cycle. Existing
     component reds/greens/ambers/blues are pre-existing, uncoordinated
     drift (multiple near-duplicate values per role) that predates this
     token layer; consolidating them onto these triads would change
     rendered pixels and is explicitly out of scope -- see the
     missing-variant inventory for the catalog, a future taste pass
     consumes it. */
  --ok-wash:    #d1fae5;
  --ok-ink:     #16a34a;
  --ok-border:  #86efac;
  --warn-wash:  #fef3c7;
  --warn-ink:   #92400e;
  --warn-border:#fcd34d;
  --info-wash:  #dbeafe;
  --info-ink:   #1e40af;
  --info-border:#93c5fd;
  --danger-wash:  #fee2e2;
  --danger-ink:   #991b1b;
  --danger-border:#fca5a5;

  /* ── Typography (cycle 109, Restyle Phase 1) ──────────────────────
     A SYSTEM serif stack — zero payload, no loading jank. Candidate
     fonts chosen for wide OS coverage; falls through to the platform
     serif if none are installed. A bundled display webfont is a
     registered follow-on if this underwhelms. */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  /* The serif trio — the only sizes this cycle is allowed to actually
     CHANGE (every other touched rule keeps its existing size, gaining
     only --font-display + a line-height nudge). */
  --type-display:    2rem;      /* 32px */
  --type-title:      1.625rem;  /* 26px */
  --type-title-sm:   1.375rem;  /* 22px */
  /* The rest of the ramp — existing rules ADOPT these only where a
     current size already matches exactly; nothing is force-fit. */
  --type-heading:    1.0625rem; /* 17px */
  --type-section:    1rem;      /* 16px */
  --type-body:       0.9375rem; /* 15px */
  --type-body-sm:    0.8125rem; /* 13px */
  --type-label:      0.75rem;   /* 12px */
  --type-caption:    0.6875rem; /* 11px */
  /* Kicker accent rule — light = brand maroon (--accent already is);
     dark/america explicitly override below (raw #800000 dies on a
     dark ground — the 059b lesson). */
  --kicker-rule: var(--accent);

  /* ── Motion (cycle 110, Restyle Round 2 Phase 4) ───────────────────
     Home Sapien's lib/motion.ts, translated: one easing, one-shot
     ceremonies, stillness by default. Every transition: in this file
     adopts these tokens (the sweep, below) -- structural check: no raw
     duration literals outside this block. */
  --ease-stately: cubic-bezier(0.2, 0, 0, 1);
  --dur-press-in:  120ms;  /* button :active engage */
  --dur-press-out: 200ms;  /* button release; also the nearest-fit token
                               for several pre-existing 0.2-0.28s hover/
                               slide transitions the sweep folds in below
                               (documented per-site where the fit isn't exact) */
  --dur-micro:     150ms;  /* the pre-existing ad-hoc "0.15s family" --
                               hover/focus color, border, background */
  --dur-ceremony:  480ms;  /* the vote-cast checkmark draw; also the
                               nearest-fit token for the pre-existing
                               0.4-1s bar-fill transitions (documented) */
  --dur-countup:   600ms;  /* the Common Ground figures count-up */
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Press texture (cycle 110) ──────────────────────────────────
   Texture, not ceremony: a quiet :active squeeze on the primary button
   families. Quick 120ms engage (the :active override below), slower 200ms
   release (each family's own base `transition:`, edited alongside its
   rule to carry `transform var(--dur-press-out)`). Enumerated families:
     - .poll-option, .btn-vote, .btn-vote-now      (the vote/option buttons)
     - :where(body.page-admin) .btn-create
     - :where(body.page-admin) .btn-row-action
     - .pnyxchat-btn   (own style universe -- chat-widget.js injectStyles())
     - .pnyxshare-btn  (own style universe -- share.js injectStyles())
   Tabs are not buttons -- excluded. .poll-icon-btn already had its own
   :active { transform: scale(0.92) } (pre-existing, untouched). */
.poll-option:active,
.btn-vote:active:not(:disabled),
.btn-vote-now:active,
:where(body.page-admin) .btn-create:active,
:where(body.page-admin) .btn-row-action:active {
  transform: scale(0.98);
  transition-duration: var(--dur-press-in);
}

/* ── Reduced motion (cycle 110) ─────────────────────────────────
   The accessibility half: the settled final frame IS the default state
   everywhere by construction. Catches every tokenized transition: above
   AND the pre-existing animation: keyframes (bill-pulse, pollDeeplinkFlash,
   sgspin, skel-pulse) without per-rule edits. The two JS ceremonies
   (vote checkmark, Common Ground count-up) separately check
   matchMedia('(prefers-reduced-motion: reduce)') BEFORE running, so they
   never animate-then-cancel -- this clamp alone only makes an
   already-started transition instant, it can't skip a JS-driven initial
   0%-state paint. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page { max-width: 1200px; margin: 0 auto; }

/* ── Kicker (cycle 109) — ONE definition: a small uppercase section
   label with a short accent rule. Existing per-page section-label
   classes are restyled IN PLACE (their own rules, elsewhere in this
   file) to these same values rather than renamed to this class — see
   each target's own comment for why. `.kicker` itself exists for any
   NEW section label written from here on. */
.kicker {
  display: block;
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

/* ── Layout ──────────────────────────────────────────────────── */
.layout {
  display: grid;
  /* `minmax(0, 1fr)` instead of plain `1fr` for the center column — a `1fr`
     track has an implicit `min-width: auto`, so when a child inside the
     middle column has intrinsic content wider than the available space
     (a long sponsor tooltip, the chamber-vote bar with long Yea/Nay
     numbers, etc.) the column grows past its share. That growth shifts
     the sticky sidebars off-axis and visually clips the center content
     behind them. Capping the min-width at 0 lets the track shrink to
     fit and prevents the crop. */
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  min-height: 100vh;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════════
   LEFT SIDEBAR
══════════════════════════════════════════════════════════════ */
.left-sidebar {
  background: var(--navy);
  padding: 16px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
}

.toc-nav-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 4px;
}

.sidebar-footer .nav-divider {
  display: none;
}

/* Hide sidebar username (show avatar only) */
.sidebar-username { display: none; }

/* Logo + account row */
.sidebar-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pnyx-logo {
  width: 72px;
  height: 72px;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}

.pnyx-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
:root:not([data-theme]) .pnyx-logo .logo-light,
[data-theme="dark"]    .pnyx-logo .logo-dark    { display: block; }
[data-theme="light"]   .pnyx-logo .logo-light   { display: block; }
[data-theme="america"] .pnyx-logo .logo-america { display: block; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-stately);
}

.sidebar-user:hover { background: transparent; }
.sidebar-user:hover .account-thumb { filter: brightness(1.25); }

.account-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b5fa0, #0b2f63);
  border: 2px solid rgba(255,255,255,0.35);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  user-select: none;
}

/* Sign-out separator + button */
.nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0;
}

.nav-link-signout {
  color: rgba(255,255,255,0.45) !important;
  border: none;
  font-family: inherit;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.nav-link-signout:hover {
  color: rgba(255,255,255,0.75) !important;
}

/* Nav */
.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}

.nav-link:hover {
  background: var(--navy-hover);
  color: var(--white);
}

.nav-link.active {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-left-color: var(--accent);
}

/* Chatrooms 16+ gate (cycle 120): stays present, goes inert -- a locked-
   until-16 feature reads more honestly than one that silently vanishes. */
.nav-link-locked {
  cursor: default;
  color: rgba(255,255,255,0.4);
}
.nav-link-locked:hover {
  background: none;
  color: rgba(255,255,255,0.4);
}
.nav-link-locked .nav-icon,
.nav-link-locked:hover .nav-icon {
  color: rgba(255,255,255,0.35);
}

.nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
  transition: color var(--dur-micro) var(--ease-stately);
}

.nav-icon svg { width: 26px; height: 26px; }

.nav-link:hover .nav-icon  { color: var(--white); }
.nav-link.active .nav-icon { color: var(--white); }

/* Feedback nav item (footer) */
.nav-link-feedback { color: rgba(255,255,255,0.7); }
.nav-link-feedback:hover { color: #7eb8e8; }
.nav-link-feedback.active { color: #7eb8e8; }
.nav-link-feedback .nav-icon,
.nav-link-feedback:hover .nav-icon,
.nav-link-feedback.active .nav-icon { color: #7eb8e8; }

/* Premium nav item */
.nav-link-premium { color: #f5c842; }
.nav-link-premium:hover { color: #f5c842; }
.nav-link-premium.active { color: #f5c842; }
.nav-icon-premium {
  background: none;
  color: #f5c842;
  width: 28px;
  height: 28px;
  border-radius: 0;
}
.nav-icon-premium svg { fill: currentColor; stroke: none; }
.nav-link-premium .nav-icon,
.nav-link-premium:hover .nav-icon,
.nav-link-premium.active .nav-icon { color: #f5c842; }

/* ══════════════════════════════════════════════════════════════
   CENTER FEED
══════════════════════════════════════════════════════════════ */
.middle-column {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px 40px;
  min-height: 100vh;
  min-width: 0;
  /* A non-visible overflow-x forces the used overflow-y to auto (CSS spec),
     turning this into a scroll container — any position:sticky descendant
     (the feed/profile tab bars) then sticks to THIS scrollport instead of
     the viewport and scrolls away with the page (cycle 047, Eris). `clip`
     still clips horizontally but does not establish a scroll container, so
     sticky engages correctly; `hidden` stays first as the pre-2022-browser
     fallback (today's behavior, no regression there). */
  overflow-x: hidden;
  overflow-x: clip;
  border-left: 1px solid rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.07);
}

/* Feed Tabs */
.feed-tabs {
  display: flex;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.feed-tab {
  flex: 1;
  padding: 15px 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-tab:hover { color: rgba(255,255,255,0.8); }

.feed-tab.active {
  color: var(--white);
  /* The underline hugs the active LABEL (its own box — correct at any tab
     count); the old border-bottom painted the whole flexed tab slot, which
     read as a half-bar-wide stripe on 2-tab bars (cycle 037, V4). */
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 15px;
}

/* Section label in feed */
.feed-heading {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 4px 2px 0;
}
.feed-heading::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

/* ── Poll Card ───────────────────────────────────────────────── */
.poll-card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.poll-card.featured {
  overflow: hidden;
  padding: 0 24px 24px;
}

/* Maroon header band */
.poll-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  padding: 14px 36px;
  margin: 0 -24px 22px;
}

.badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.badge-featured {
  background: rgba(255,255,255,0.2);
  color: var(--white);
}

.vote-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}

.poll-question {
  /* cycle 109: the flagship ceremony moment (todays-vote's daily question;
     also the shared base for .poll-archive-question rows). */
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--text);
}
/* Plain-language explainer (cycle 105): a collapsible, neutral "what is this"
   note under the question. Shown only when human-verified. */
.poll-explainer { margin: -8px 0 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg-subtle, var(--bar-bg)); overflow: hidden; }
.poll-explainer > summary {
  list-style: none; cursor: pointer; padding: 10px 14px; font-size: 0.86rem; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.poll-explainer > summary::-webkit-details-marker { display: none; }
.poll-explainer > summary::before { content: '›'; font-size: 1.1rem; line-height: 1; transition: transform var(--dur-micro) var(--ease-stately); color: var(--card-muted); }
.poll-explainer[open] > summary::before { transform: rotate(90deg); }
.poll-explainer > summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.poll-explainer-body { padding: 0 14px 12px 30px; font-size: 0.9rem; line-height: 1.55; color: var(--card-text, var(--text)); white-space: pre-wrap; }

/* ── Poll Options (classic style) ────────────────────────────── */
.poll-options { display: flex; flex-direction: column; gap: 12px; }

.poll-option {
  cursor: pointer;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
}

.poll-option:hover   { background: #f5f7ff; }
.poll-option.chosen  { background: var(--white); }

.poll-card.voted .poll-option         { cursor: default; }
.poll-card.voted .poll-option:hover   { background: transparent; }
.poll-card.voted .poll-option.chosen  { background: var(--white); }

.option-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  margin-bottom: 6px;
}

.option-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}

.option-dot.selected { background: var(--accent); border-color: var(--accent); }

.option-name { flex: 1; font-weight: 500; color: var(--card-text); }

.option-pct {
  font-weight: 700;
  font-size: 0.825rem;
  color: var(--muted);
  min-width: 34px;
  text-align: right;
}

.party-pcts {
  display: flex;
  gap: 12px;                       /* cycle 039: the three splits read as separate values */
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-right: 10px;             /* breathing room before the big total */
}
.party-pct-dem, .party-pct-rep, .party-pct-other {
  min-width: 34px;                 /* fits '100%' without clipping */
  text-align: right;
}
.party-pct-dem   { color: var(--accent-blue); }
.party-pct-rep   { color: rgb(135,46,39); }
.party-pct-other { color: #8b99b5; }

/* ── Poll info button & modal ── */
.poll-info-btn {
  background: rgba(255,255,255,0.18);
  border: none;
  color: var(--white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease-stately);
  margin-right: -22px;
}
.poll-info-btn:hover { background: rgba(255,255,255,0.32); }

.poll-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-stately);
}
.poll-info-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.poll-info-modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  width: min(420px, 90vw);
  overflow: hidden;
}
.poll-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
}
.poll-info-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.8;
}
.poll-info-close:hover { opacity: 1; }
.poll-info-modal-body {
  padding: 18px 20px;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poll-info-modal-body p { margin: 0; line-height: 1.5; }

/* ── Share modal ──
   Built on top of the .poll-info-overlay / .poll-info-modal chrome.
   Extras: a card-style preview, a "show how I voted" toggle, and a
   stack of share-target buttons. Per Share Card Spec, the modal
   always includes an "I'd rather not share" escape link — never
   coerce the user into sharing. */
.poll-share-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--card), var(--bar-bg));
  position: relative;
}
.poll-share-preview-brand {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.poll-share-preview-question {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 12px;
}
.poll-share-preview-vote {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 10px;
  background: rgba(128,0,0,0.08);
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
}
.poll-share-preview-vote.hidden { display: none; }
.poll-share-preview-foot {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

.poll-share-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text);
  user-select: none;
  cursor: pointer;
  padding: 6px 0;
}
.poll-share-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
  margin: 0;
}

.poll-share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.poll-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
.poll-share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.poll-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.poll-share-btn.copied {
  border-color: #16a34a;
  color: #16a34a;
}
[data-theme="dark"] .poll-share-preview {
  background: linear-gradient(135deg, var(--surface-card), #131d30);
  border-color: var(--hairline-default);
}
[data-theme="dark"] .poll-share-preview-question { color: var(--ink); }
[data-theme="dark"] .poll-share-preview-vote { background: rgba(252,165,165,0.15); color: #fca5a5; }
[data-theme="dark"] .poll-share-btn { background: var(--surface-card); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
[data-theme="dark"] .poll-share-btn:hover { color: #fca5a5; border-color: #fca5a5; }

.poll-share-skip {
  background: none;
  border: none;
  padding: 6px 0 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.poll-share-skip:hover { color: var(--text); }

.poll-info-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.poll-info-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.poll-info-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.swatch-rep   { background: rgb(135,46,39); }
.swatch-dem   { background: var(--accent-blue); }
.swatch-other { background: #b0b8c8; }
/* Compact inline variant of the SAME legend component, shown above the
   option list while per-option party splits are visible (cycle 039, N2).
   One definition; todays-vote + premium both render it. */
.poll-legend-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.poll-legend-inline .poll-info-legend-item { font-size: 0.72rem; color: var(--muted); }
.poll-legend-inline .poll-info-swatch { width: 10px; height: 10px; }
.poll-info-note {
  font-size: 0.78rem;
  color: var(--muted);
}
.poll-info-note a { color: var(--accent); }

.progress-track {
  display: flex;
  position: relative;
  height: 11px;
  background: var(--bar-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #a0a8b4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.progress-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.07)       100%
  );
  pointer-events: none;
}


.progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--navy);
  transition: width var(--dur-countup) var(--ease-stately);
}


/* Write-in field */
.other-write-in {
  display: none;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately);
  margin-top: 2px;
}

.other-write-in.visible { display: block; }

.other-write-in:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,0,0,0.1);
}

/* Poll Footer */
.poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.archive-poll-footer { margin-top: 14px; }

.btn-vote {
  background: var(--accent);
  color: var(--white);
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately), opacity var(--dur-micro) var(--ease-stately);
}

.btn-vote:hover:not(:disabled) {
  background: var(--accent-dk);
}

/* ── Ceremony 1 (cycle 110): the vote-cast checkmark draw ────────
   Fires only from the live doneVote() POST-success path (lockPoll's
   `justVoted` param) -- `.draw` -> `.drawn` animates the stroke in once;
   the page-load path (an already-voted reload) and reduced-motion both
   render `.settled` directly, dashoffset 0, no transition, no replay. */
.vote-check-wrap { display: inline-flex; vertical-align: middle; margin-right: 5px; }
.vote-check path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.vote-check.draw path { transition: stroke-dashoffset var(--dur-ceremony) var(--ease-stately); }
.vote-check.draw.drawn path,
.vote-check.settled path { stroke-dashoffset: 0; }

.btn-vote:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.change-vote-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  transition: color var(--dur-micro) var(--ease-stately);
}
.change-vote-btn:hover { color: #cf4b4b; }

/* Left-side cluster on the poll footer: Voted button + icon buttons
   sit together; the footer's flex space-between pushes Change vote
   to the far right. */
.poll-voted-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Icon-only buttons (Comment, Stats) — bare icons, no circle. */
.poll-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}
.poll-icon-btn:hover  { color: #cf4b4b; }
.poll-icon-btn:active { transform: scale(0.92); }
/* The brand maroon is too dark to read on the dark poll card; use a lighter red
   on hover (soft red on dark, like the rest of dark mode's accent text). */
[data-theme="dark"] .change-vote-btn:hover,
[data-theme="dark"] .poll-icon-btn:hover { color: #f4a7a7; }
.poll-icon-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Inline "Premium only" prompt shown when a non-premium user clicks
   the Stats icon. Sits inside the #poll-today card, just below the
   footer, and fades in/out. */
.poll-premium-toast {
  margin-top: 12px;
  padding: 9px 14px;
  background: var(--bar-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--card-text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-press-out) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
}
.poll-premium-toast.visible { opacity: 1; transform: translateY(0); }
.poll-premium-toast strong  { font-weight: 700; }
.poll-premium-toast a       { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 6px; }
.poll-premium-toast a:hover { text-decoration: underline; }
[data-theme="dark"] .poll-premium-toast {
  background: rgba(255,255,255,0.05);
  border-color: var(--hairline-default);
  color: rgba(255,255,255,0.88);
}

.poll-expiry { font-size: 0.8rem; color: var(--muted); }

/* ── News Cards (center feed) ────────────────────────────────── */
.news-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid transparent;
  transition: box-shadow var(--dur-press-out) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-left-color: var(--accent);
}

.news-card-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.news-dot { margin: 0 3px; }

.news-card-title {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 7px;
}

/* The "why this matters" line on a news card. A class instead of an
   inline accent color so dark/america themes can substitute readable
   tints — the raw accent red disappears on dark cards. */
.news-card-context { color: var(--accent); font-style: italic; }
/* America's news cards are light like the default theme, so the
   accent red stays readable there — only dark needs a swap. */
[data-theme="dark"] .news-card-context { color: #f4a7a7; }

.news-card-excerpt {
  font-size: 0.855rem;
  color: var(--card-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════════════════════════════════════ */
.right-sidebar {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding-top: 16px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

/* Search at top of right sidebar */
.right-sidebar .search-input {
  display: block;
  width: calc(100% - 36px);
  height: 36px;
  padding: 0 13px;
  margin: 0 18px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: inherit;
  font-size: 0.825rem;
  outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), background var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately);
}

.right-sidebar .search-input::placeholder { color: rgba(255,255,255,0.38); }

.right-sidebar .search-input:focus {
  border-color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.13);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

.sidebar-box { padding: 14px 18px; }

.sidebar-box + .sidebar-box {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar-box-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sidebar-text);
  margin-bottom: 11px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sbt-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Sidebar lists & items */
.trending-list,
.news-list,
.room-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.news-list { gap: 2px; }

.trending-item,
.news-item,
.room-item {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately);
}

.trending-item,
.news-item { display: flex; flex-direction: column; }
.news-item  { gap: 3px; }
.room-item  { display: flex; align-items: center; justify-content: space-between; }

.trending-item:hover,
.news-item:hover,
.room-item:hover { background: rgba(255,255,255,0.06); }

.trending-tag   { font-size: 0.875rem; font-weight: 700; color: var(--white); }
.trending-count { font-size: 0.71rem; color: var(--sidebar-muted); margin-top: 1px; }

.news-headline {
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease-stately);
}

.news-headline:hover { color: var(--white); }
.news-meta  { font-size: 0.72rem; color: var(--sidebar-muted); }
.room-name  { font-size: 0.845rem; font-weight: 500; color: var(--sidebar-text); }

.room-badge {
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  color: var(--sidebar-muted);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ── Right sidebar item left borders — appear on hover ── */
.trending-item,
.news-item,
.room-item {
  border-left: 3px solid transparent;
  padding-left: 10px !important;
}

.trending-item:hover,
.news-item:hover,
.room-item:hover {
  border-left-color: rgba(74,144,217,0.75);
}

[data-theme="light"] .trending-item:hover,
[data-theme="light"] .news-item:hover,
[data-theme="light"] .room-item:hover {
  border-left-color: rgba(55,120,200,0.85);
}

/* ── Bill Cards ─────────────────────────────────────────────── */
.bill-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  border-left: 5px solid transparent;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow var(--dur-press-out) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}

.bill-card:hover {
  box-shadow: var(--shadow-md);
  border-left-color: var(--accent);
}

/* Bill-card meta row styles (.bill-meta, .bill-num, .bill-status, .bill-date,
   the congress/category/state tags and purpose/lifecycle chips) all live
   together in the "BILL CARD META ROW" block further down — search for that. */

.bill-title {
  /* cycle 109: card/entity title -- serif, existing size kept. line-height
     already 1.35 (>= the ~1.3 metrics-risk floor); clamp:2 re-verified live. */
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bill-title a {
  color: inherit;
  text-decoration: none;
}
.bill-title a:hover { text-decoration: none; color: inherit; }

.bill-summary {
  font-size: 0.855rem;
  color: var(--card-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Boxed summary container (matches sketch — visible border around the summary text) */
.bill-summary-box {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  padding: 14px 16px;
  margin: 6px 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.025);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bill-summary-box.is-blurb {
  font-style: italic;
  -webkit-line-clamp: 4;
}
.bill-summary-box.is-placeholder {
  font-style: italic;
  opacity: 0.6;
  -webkit-line-clamp: 2;
}

/* Three-layer insight system — groups the chamber tally, likelihood, and tug-of-war */
.bill-insight {
  margin-bottom: 14px;
}
.bill-insight:empty { display: none; }
.bill-insight > * + * { margin-top: 12px; }

/* Passage-blurb fallback when no real summary exists (legacy class — kept for compatibility) */
.bill-summary-blurb {
  font-style: italic;
  opacity: 0.75;
  -webkit-line-clamp: 2;
}

/* ── Bill sponsor line ── */
.bill-sponsor {
  font-size: 0.775rem;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bill-sponsor-party {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bill-sponsor-party.dem { background: #dbeafe; color: #1e40af; }
.bill-sponsor-party.rep { background: #fee2e2; color: #991b1b; }
.bill-sponsor-party.ind { background: #f3e8ff; color: #6b21a8; }

/* ── Layer 1: Chamber vote tally ── */
.bill-vote-tally {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 7px 12px;
  background: var(--bar-bg);
  border-radius: 8px;
  letter-spacing: 0.01em;
}

/* ── Layer 2: Passage likelihood ── */
.bill-likelihood {
  margin-bottom: 14px;
}
.likelihood-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
/* Likelihood — single line, hover tooltip for the reason */
.likelihood-line {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 6px;
  position: relative;
  cursor: help;
}
.likelihood-line[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 9px 13px;
  border-radius: 8px;
  width: 280px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-stately);
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.likelihood-line[data-tooltip]:hover::after {
  opacity: 1;
}
.likelihood-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bar-bg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.likelihood-fill {
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur-ceremony) var(--ease-stately);
}
.likelihood-blurb {
  font-size: 0.775rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 7px;
  margin-bottom: 0;
}

/* ── Layer 3: Tug-of-war sentiment bar ── */
.bill-tugwar {
  margin-bottom: 14px;
}
/* Zero votes renders nothing (cycle 037) — no empty-state markup exists. */
.tugwar-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 5px;
}
.tugwar-side {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tugwar-side-opp { align-items: flex-end; }
.tugwar-pct {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
.tugwar-side-sup .tugwar-pct { color: #357cc8; }
.tugwar-side-opp .tugwar-pct { color: #872e27; }
.tugwar-lbl-sup,
.tugwar-lbl-opp {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tugwar-lbl-opp { color: #872e27; }
.tugwar-lbl-sup { color: #357cc8; }
.tugwar-lbl-mid {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6680;
  align-self: center;
  background: #e8ecf5;
  border: 1.5px solid #c4cce0;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.tugwar-counts  { color: var(--muted); font-weight: 500; }
.tugwar-wrap {
  position: relative;
}
.tugwar-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  z-index: 3;
  pointer-events: none;
}
.tugwar-wrap::before {
  bottom: 100%;
  margin-bottom: 3px;
  border-top: 5px solid var(--card-muted);
}
.tugwar-track {
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bar-bg);
  display: flex;
  position: relative;
  border: 1px solid #a0a8b4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
  will-change: transform;
}
.tugwar-track-empty {
  border-style: dashed;
  opacity: 0.5;
}
.tugwar-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.07)       100%
  );
  pointer-events: none;
}
.tugwar-track > div { height: 100%; flex-shrink: 0; }
.tugwar-support {
  position: relative;
  display: flex;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  will-change: transform;
}
.tugwar-support > div { height: 100%; flex-shrink: 0; }
/* Diagonal stripe overlays (restored by owner request — the texture removed in
   cycle 040 N5). Both sides hatched: support 45deg, oppose -45deg (mirror), in
   the sidebar-bg color at low opacity so the stripes read over the party-color
   fill without overpainting it. */
.tugwar-support::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    transparent 0, transparent 4px,
    var(--sidebar-bg) 4px, var(--sidebar-bg) 8px
  );
  opacity: 0.55;
  pointer-events: none;
}
.tugwar-oppose {
  position: relative;
  display: flex;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  will-change: transform;
}
.tugwar-oppose > div { height: 100%; flex-shrink: 0; }
.tugwar-oppose::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
    transparent 0, transparent 4px,
    var(--sidebar-bg) 4px, var(--sidebar-bg) 8px
  );
  opacity: 0.55;
  pointer-events: none;
}
.tugwar-divider {
  width: 2px;
  background: #000;
  flex-shrink: 0;
  z-index: 1;
}
[data-theme="light"] .tugwar-divider,
[data-theme="america"] .tugwar-divider { background: rgba(0,0,0,0.18); }
.tugwar-tooltip {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 5px;
  text-align: center;
}

/* Bill footer */
.bill-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bill-link {
  font-size: 0.825rem;
  font-weight: 600;
  color: #5b9bd5;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-stately);
}

.bill-link:hover { color: #3a7bbf; }

.btn-track {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: 1.5px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}

.btn-track:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --card:       #e8ecf4;
  --card-text:  #1a2035;
  --card-muted: #6b7a99;
  --border:     #d0d7e8;
  --bar-bg:     #d4daea;
  --sidebar-bg: #ffffff;
}
[data-theme="light"] body { background: #e8ecf4; color: var(--text); }

[data-theme="light"] .left-sidebar,
[data-theme="light"] .right-sidebar,
[data-theme="light"] .mobile-topbar   { background: var(--white); border-color: #d0d7e8; }

[data-theme="light"] .middle-column  { background: var(--white); border-color: #d0d7e8; }

[data-theme="light"] .sidebar-top    { border-bottom-color: #d0d7e8; }

[data-theme="light"] .nav-link       { color: rgba(26,32,53,0.6); }
[data-theme="light"] .nav-link:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
[data-theme="light"] .nav-link.active { background: rgba(96,0,0,0.07); color: var(--ink); border-left-color: var(--accent); }
[data-theme="light"] .nav-icon       { background: none; color: rgba(26,32,53,0.5); }
[data-theme="light"] .nav-link:hover .nav-icon  { color: rgba(26,32,53,0.9); }
[data-theme="light"] .nav-link.active .nav-icon { color: var(--accent); }
[data-theme="light"] .nav-link-premium          { color: #c49000; }
[data-theme="light"] .nav-link-premium:hover    { color: #c49000; }
[data-theme="light"] .nav-link-premium.active   { color: #c49000; }
[data-theme="light"] .nav-icon-premium          { color: #c49000; }
[data-theme="light"] .nav-link-premium .nav-icon,
[data-theme="light"] .nav-link-premium:hover .nav-icon,
[data-theme="light"] .nav-link-premium.active .nav-icon { color: #c49000; }
[data-theme="light"] .nav-divider    { background: rgba(0,0,0,0.08); }
[data-theme="light"] .nav-link-signout { color: rgba(26,32,53,0.38) !important; }
[data-theme="light"] .nav-link-signout:hover { color: rgba(26,32,53,0.65) !important; }

[data-theme="light"] .feed-tabs,
[data-theme="light"] .profile-tabs   { background: var(--white); border-bottom-color: #d0d7e8; }
[data-theme="light"] .feed-tab,
[data-theme="light"] .profile-tab    { color: rgba(26,32,53,0.4); }
[data-theme="light"] .feed-tab:hover,
[data-theme="light"] .profile-tab:hover { color: rgba(26,32,53,0.75); }
[data-theme="light"] .feed-tab.active { color: var(--ink); text-decoration-color: var(--accent); }
[data-theme="light"] .profile-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
[data-theme="light"] .feed-heading   { color: var(--ink-muted); }

[data-theme="light"] .right-sidebar .search-input {
  background: rgba(0,0,0,0.07);
  border-color: #c8d0e0;
  color: var(--ink);
}
[data-theme="light"] .right-sidebar .search-input::placeholder { color: rgba(0,0,0,0.32); }
[data-theme="light"] .right-sidebar .search-input:focus {
  background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.22); box-shadow: none;
}
[data-theme="light"] .sidebar-box-title { color: var(--ink); }
[data-theme="light"] .sidebar-box + .sidebar-box { border-top-color: #d0d7e8; }

[data-theme="light"] .poll-card,
[data-theme="light"] .news-card,
[data-theme="light"] .bill-card,
[data-theme="light"] .activity-item,
[data-theme="light"] .vote-history-card,
[data-theme="light"] .no-votes-msg,
[data-theme="light"] .settings-card,
[data-theme="light"] .profile-header-card,
[data-theme="light"] .poll-today-teaser,
[data-theme="light"] .poll-archive-card {
  background: var(--card);
  border-top: 1px solid #d8dde9;
  border-right: 1px solid #d8dde9;
  border-bottom: 1px solid #d8dde9;
  /* border-left is preserved from .bill-card base so the accent stripe still works on hover */
}
/* Hover border: lighten from dark maroon to a clear red in light mode */
[data-theme="light"] .bill-card:hover  { border-left-color: #c0392b; }
[data-theme="light"] .news-card:hover  { border-left-color: #c0392b; }
[data-theme="light"] .settings-field input,
[data-theme="light"] .settings-field select,
[data-theme="light"] #set-pet-other,
[data-theme="light"] #set-gender-other { background: var(--white); border-color: #c8d0e0; }
[data-theme="light"] .trending-tag   { color: var(--ink); }
[data-theme="light"] .trending-count { color: var(--ink-muted); }
[data-theme="light"] .trending-item:hover,
[data-theme="light"] .news-item:hover,
[data-theme="light"] .room-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .news-headline  { color: var(--ink); }
[data-theme="light"] .news-meta      { color: var(--ink-muted); }
[data-theme="light"] .room-name      { color: var(--ink); }
[data-theme="light"] .room-badge     { background: rgba(0,0,0,0.07); color: var(--ink-muted); }

/* ══════════════════════════════════════════════════════════════
   USER PREFERENCE OVERRIDES
   Applied via body class from localStorage on page load
══════════════════════════════════════════════════════════════ */

/* Compact card detail — hide summary text */
body.pnyx-compact .bill-summary,
body.pnyx-compact .bill-summary-box,
body.pnyx-compact .bill-summary-blurb { display: none !important; }

/* Hide party breakdown on poll bars */
body.pnyx-hide-party .party-pcts { display: none !important; }
/* No splits -> no legend explaining them (cycle 039). */
body.pnyx-hide-party .poll-legend-inline { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   DARK THEME (deepened navy + dark grey cards)
══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --accent:     #700000;
  --accent-lt:  #a00000;
  /* Kicker accent rule (cycle 109): raw #800000 dies on this near-black
     ground -- the same lifted value already used for accent-colored UI on
     dark grounds throughout the app (chat-widget.js's dark links/buttons). */
  --kicker-rule: #f4a7a7;
  /* Brighter blue on the near-black column so the Explore chrome stays legible */
  --accent-blue:      #7fb0ee;
  --accent-blue-tint: rgba(127,176,238,0.14);
  /* Card context — dark cards need light text */
  --card:       #1c2840;
  --card-text:  rgba(255,255,255,0.92);
  --card-muted: rgba(255,255,255,0.50);
  --border:     rgba(255,255,255,0.10);
  /* --border is translucent here, so a knockout painted in that literal
     value wouldn't opaquely cover strokes underneath (cycle 042b pin halo).
     This is the flat color --border actually renders as over --card. */
  --icon-tile-bg: #333e53;
  --bar-bg:     rgba(255,255,255,0.10);
  --sidebar-bg: #091525;

  /* ── Semantic tokens (cycle 111) ── */
  --surface-page:   #05101f; /* matches body's existing override, below */
  --surface-sunken: rgba(255,255,255,0.06); /* matches .va-search's existing value */
  --ink-secondary:  rgba(255,255,255,0.7);
  --ink-faint:      rgba(255,255,255,0.4);
  --hairline-strong: rgba(255,255,255,0.18);
  --ok-wash:    rgba(74,222,128,0.14);
  --ok-ink:     #4ade80;
  --ok-border:  #6ee7b7;
  --warn-wash:  rgba(252,211,77,0.14);
  --warn-ink:   #fcd34d;
  --warn-border:#e6b651;
  --info-wash:  rgba(147,197,253,0.14);
  --info-ink:   #93c5fd;
  --info-border:#5b9cf6;
  --danger-wash:  rgba(252,165,165,0.14);
  --danger-ink:   #fca5a5;
  --danger-border:#f4856e;
}
[data-theme="dark"] body             { background: var(--surface-page); }
[data-theme="dark"] .left-sidebar,
[data-theme="dark"] .right-sidebar,
[data-theme="dark"] .mobile-topbar    { background: var(--surface-raised); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .middle-column   { background: var(--surface-raised); border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .feed-tabs       { background: var(--surface-raised); }
[data-theme="dark"] .profile-tabs    { background: var(--surface-raised); }

/* ── Dark grey cards ── */
[data-theme="dark"] .poll-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .bill-card,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .vote-history-card,
[data-theme="dark"] .no-votes-msg,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .profile-header-card,
[data-theme="dark"] .danger-zone-body { background: var(--surface-card); }

/* ── Primary text ── */
[data-theme="dark"] .poll-question,
[data-theme="dark"] .option-name,
[data-theme="dark"] .news-card-title,
[data-theme="dark"] .bill-title,
[data-theme="dark"] .activity-title,
[data-theme="dark"] .vote-question,
[data-theme="dark"] .profile-name,
[data-theme="dark"] .stat-num,
[data-theme="dark"] .settings-field label,
[data-theme="dark"] .vote-chosen-name { color: var(--ink); }

/* ── Muted text ── */
[data-theme="dark"] .news-card-meta,
[data-theme="dark"] .news-card-excerpt,
[data-theme="dark"] .bill-summary,
[data-theme="dark"] .bill-date,
[data-theme="dark"] .activity-detail,
[data-theme="dark"] .activity-time,
[data-theme="dark"] .option-pct,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .profile-handle,
[data-theme="dark"] .profile-meta,
[data-theme="dark"] .settings-hint,
[data-theme="dark"] .vote-chosen-label,
[data-theme="dark"] .no-votes-msg { color: rgba(255,255,255,0.48); }

/* ── Borders & dividers inside cards ── */
[data-theme="dark"] .news-card        { border-left-color: transparent; }
[data-theme="dark"] .profile-stats    { border-top-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .settings-section-title { color: rgba(255,255,255,0.42); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .settings-group-title    { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .settings-footer  { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .danger-zone             { border-color: var(--accent); }
[data-theme="dark"] .danger-zone-title       { background: rgba(96,0,0,0.28); color: var(--ink-secondary); }
[data-theme="dark"] .danger-zone-body p      { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .danger-zone-body p span { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .btn-pw-toggle       { border-color: var(--accent); color: rgba(255,255,255,0.55); }
[data-theme="dark"] .btn-pw-toggle:hover { background: rgba(96,0,0,0.28); color: rgba(255,255,255,0.9); border-color: var(--accent); }
[data-theme="dark"] .btn-danger          { background: var(--surface-card); color: rgba(255,255,255,0.55); border-color: var(--accent); }
[data-theme="dark"] .btn-danger:hover    { background: rgba(96,0,0,0.28); color: rgba(255,255,255,0.9); border-color: var(--accent); }

/* ── Inputs inside settings cards ── */
[data-theme="dark"] .settings-field input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--white);
}
[data-theme="dark"] .settings-field input:focus {
  background: rgba(255,255,255,0.11);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,0,0,0.18);
}

/* ── Poll options ── */
[data-theme="dark"] .option-dot         { border-color: rgba(255,255,255,0.22); }
[data-theme="dark"] .progress-track     { background: var(--surface-raised); }
[data-theme="dark"] .progress-bar       { background: #6b7a99; }
[data-theme="dark"] .poll-card.featured .progress-track { background: var(--surface-raised); }

[data-theme="dark"] .poll-option:hover  { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .poll-option.chosen,
[data-theme="dark"] .poll-card.voted .poll-option.chosen { background: rgba(255,255,255,0.08); }

/* ── Vote chosen highlight ── */
[data-theme="dark"] .vote-chosen { background: rgba(96,0,0,0.18); border-color: rgba(96,0,0,0.35); }

[data-theme="dark"] .party-pct-rep { color: #f4856e; }
[data-theme="dark"] .party-pct-dem { color: #7eb5f5; }

/* ── Bill meta pieces ── */
[data-theme="dark"] .bill-num          { background: var(--hairline-default); color: rgba(255,255,255,0.82); }
[data-theme="dark"] .bill-vote-tally  { background: var(--surface-sunken); }
[data-theme="dark"] .likelihood-track { background: var(--hairline-default); }
[data-theme="dark"] .likelihood-line  { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .likelihood-blurb { color: rgba(255,255,255,0.58); }
[data-theme="dark"] .bill-summary-box { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.88); }
[data-theme="dark"] .tugwar-track     { background: var(--hairline-default); }
[data-theme="dark"] .tugwar-divider   { background: #000; }
/* Dark-mode stripe overlays (restored with the light ones): same dark navy on
   both sides, support lighter (0.3) than oppose (0.75) so support reads as the
   softer version of the same hatch. */
[data-theme="dark"] .tugwar-support::after {
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg,
    transparent 0, transparent 4px,
    var(--surface-raised) 4px, var(--surface-raised) 8px
  );
  opacity: 0.3;
}
[data-theme="dark"] .tugwar-oppose::after {
  background-color: transparent;
  background-image: repeating-linear-gradient(-45deg,
    transparent 0, transparent 4px,
    var(--surface-raised) 4px, var(--surface-raised) 8px
  );
  opacity: 0.75;
}
/* (cycle 040, N5: the dark-theme tugwar stripe overrides went with the base
   stripe overlays — both bar sides are solid in every theme.) */
[data-theme="dark"] .tugwar-lbl-opp            { color: #fca5a5; }
[data-theme="dark"] .tugwar-lbl-sup            { color: #93c5fd; }
[data-theme="dark"] .tugwar-lbl-mid            { color: #a0aec0; background: rgba(255,255,255,0.08); border-color: var(--hairline-strong); }
[data-theme="dark"] .tugwar-side-sup .tugwar-pct { color: #93c5fd; }
[data-theme="dark"] .tugwar-side-opp .tugwar-pct { color: #fca5a5; }
[data-theme="dark"] .bill-sponsor      { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .bill-sponsor-party.dem { background: rgba(219,234,254,0.12); color: #93c5fd; }
[data-theme="dark"] .bill-sponsor-party.rep { background: rgba(254,226,226,0.12); color: #fca5a5; }
[data-theme="dark"] .bill-sponsor-party.ind { background: rgba(243,232,255,0.12); color: #c4b5fd; }
[data-theme="dark"] .bill-link         { color: var(--white); }
[data-theme="dark"] .bill-link:hover   { color: var(--ink-secondary); }
[data-theme="america"] .bill-link      { color: var(--accent); }
[data-theme="america"] .bill-link:hover { color: var(--accent-dk); }
/* Dark mode: white ghost button on dark card */
[data-theme="dark"] .btn-track       { color: rgba(255,255,255,0.78); border-color: var(--hairline-strong); }
[data-theme="dark"] .btn-track:hover { background: var(--hairline-default); border-color: rgba(255,255,255,0.3); color: var(--white); }
/* America mode: accent-colored button on light (#e8ecf4) card */
[data-theme="america"] .btn-track       { color: var(--accent); border-color: var(--accent); }
[data-theme="america"] .btn-track:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
/* legislation-details.html renders a Track button inside the NAVY right sidebar —
   accent maroon is invisible there. Light treatment for that context. */
[data-theme="america"] .right-sidebar .btn-track       { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }
[data-theme="america"] .right-sidebar .btn-track:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); color: var(--white); }

/* ── News card hover ── */
[data-theme="dark"] .news-card:hover { border-left-color: var(--accent); box-shadow: 0 6px 22px rgba(0,0,0,0.4); }

/* ── Profile / account ── */
[data-theme="light"]   .profile-avatar      { border-color: #e8ecf4; }
[data-theme="america"] .profile-avatar      { border-color: var(--surface-card); }
[data-theme="dark"] .profile-avatar         { border-color: var(--surface-card); }
[data-theme="dark"] .account-thumb          { border: 2px solid rgba(255,255,255,0.85); }
[data-theme="dark"] .btn-edit-profile       { color: rgba(255,255,255,0.78); border-color: var(--hairline-strong); background: none; }
[data-theme="dark"] .btn-edit-profile:hover { background: rgba(255,255,255,0.07); }

/* ── Misc ── */
[data-theme="dark"] .no-votes-msg a         { color: #5b9bd5; }
[data-theme="dark"] .no-votes-msg a:hover   { color: #7bb5e8; }
[data-theme="dark"] .flag-opt               { border: none; }
[data-theme="dark"] .flag-opt:hover         { }
[data-theme="dark"] .flag-opt.selected      { border: none; box-shadow: 0 0 0 3px rgba(245,200,66,0.7); }

/* ══════════════════════════════════════════════════════════════
   AMERICA THEME (original navy + maroon — same as base default)
══════════════════════════════════════════════════════════════ */
[data-theme="america"] body          { background: var(--surface-page); }
[data-theme="america"] .left-sidebar,
[data-theme="america"] .right-sidebar,
[data-theme="america"] .mobile-topbar { background: var(--surface-raised); border-color: rgba(255,255,255,0.07); }
[data-theme="america"] .middle-column { background: var(--surface-raised); border-color: rgba(255,255,255,0.07); }
[data-theme="america"] .feed-tabs    { background: var(--surface-raised); }
[data-theme="america"] .profile-tabs { background: var(--surface-raised); }

[data-theme="america"] .poll-card,
[data-theme="america"] .news-card,
[data-theme="america"] .bill-card,
[data-theme="america"] .activity-item,
[data-theme="america"] .vote-history-card,
[data-theme="america"] .no-votes-msg,
[data-theme="america"] .settings-card,
[data-theme="america"] .profile-header-card,
[data-theme="america"] .poll-today-teaser,
[data-theme="america"] .poll-archive-card,
[data-theme="america"] .bookmarks-empty { background: var(--surface-card); }
[data-theme="america"] {
  --accent:     #800000;
  --accent-dk:  #600000;
  /* Cards sit on navy bg — blue-tinted off-white per spec, dark text */
  --card:       #e8ecf4;
  --card-text:  #1a2035;
  --card-muted: #6b7a99;
  --sidebar-bg: #0b2f63;
  /* Kicker accent rule (cycle 109): america's page/sidebar ground is dark
     navy (same situation as dark theme, even though its cards are light) —
     the same lifted value already proven live here (.bm-chip hover,
     styles.css:6113+3). */
  --kicker-rule: #f4a7a7;

  /* ── Semantic tokens (cycle 111) ──
     surface-sunken/ink-secondary/ink-faint/hairline-strong/the status
     triads are deliberately NOT overridden here: america's card content
     area is light-styled (--card/--card-text/--card-muted above match
     the base :root values), so it correctly falls through to :root's
     light-tuned definitions of those tokens. Only the page ground
     (outside any card) actually differs. */
  --surface-page: #082552; /* matches body's existing override, below */
}

/* ══════════════════════════════════════════════════════════════
   POLL VISUALIZATION ENHANCEMENTS
══════════════════════════════════════════════════════════════ */

/* Raw vote count per option — hidden until voted or on archive */
.option-vote-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--card-muted);
  min-width: 48px;
  text-align: right;
  display: none;
}
.poll-card.voted .option-vote-count,
.poll-options-results .option-vote-count {
  display: inline;
}

/* Bigger, bolder percentage after voting */
.poll-card.voted .option-pct,
.poll-options-results .option-pct {
  font-size: 1rem;
  font-weight: 800;
  color: var(--card-text);
  min-width: 44px;
}

/* Leading bar — same color as other bars (no highlight) */
.progress-bar.leading {
  background: var(--navy);
}

/* Leading badge chip */
.leading-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Category badge in header */
.badge-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--white);
  background: rgba(0,0,0,0.18);
}

/* Category-colored card headers */
.poll-card-header.cat-economy        { background: #2e7d32; }
.poll-card-header.cat-healthcare     { background: #1565c0; }
.poll-card-header.cat-climate        { background: #00695c; }
.poll-card-header.cat-immigration    { background: #6a1b9a; }
.poll-card-header.cat-education      { background: #e65100; }
.poll-card-header.cat-crime          { background: #b71c1c; }
.poll-card-header.cat-housing        { background: #4527a0; }
.poll-card-header.cat-foreign-policy { background: #37474f; }
.poll-card-header.cat-social-issues  { background: #c62828; }
.poll-card-header.cat-voting         { background: #0277bd; }
.poll-card-header.cat-other          { background: var(--ink-muted); }
.poll-card-header[class*="cat-"] .vote-count { color: rgba(255,255,255,0.85); }

/* Two badges side by side in poll header */
.poll-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Archive link in poll footer */
.poll-archive-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-stately);
}
.poll-archive-link:hover { color: var(--accent); }

/* ── todays-vote.html — Today's teaser box ── */
.poll-today-teaser {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  margin: 12px 0;
}
.today-teaser-question {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  min-width: 160px;
}
.today-teaser-question:hover { color: var(--accent); }

.btn-vote-now {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
}
.btn-vote-now:hover { background: var(--accent-dk); }

/* ── todays-vote.html — Archive ── */
.polls-archive {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poll-archive-card {
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 24px 24px;
}

.poll-archive-body {
  padding: 18px 24px 0;
}

.poll-archive-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.poll-archive-question {
  font-size: 1rem;
  margin-bottom: 16px;
}

/* "You voted" indicator */
.poll-voted-indicator {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--white);
  border: 1.5px solid #f5c0c0;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

/* No polls fallback */
.no-polls-msg {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Category filter scroll strip */
.category-filter-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}
.category-filter-scroll::-webkit-scrollbar { display: none; }
/* flex: 0 0 auto (not just flex-shrink: 0): .feed-tab's base flex:1 has basis
   0%, so grow split the scroller's width EQUALLY across all tabs — labels
   clipped mid-word and scrollWidth never exceeded clientWidth (the arrows
   thought there was nothing to scroll). Content-sized tabs overflow properly
   and the scroller actually scrolls (cycle 040, N3). */
.category-tab { flex: 0 0 auto; font-size: 0.8rem; padding: 15px 10px; }

/* Category tabs scroll wrapper */
.cat-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.cat-scroll-inner {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.cat-scroll-inner::-webkit-scrollbar { display: none; }
/* Edge fade (cycle 040, N3): updateArrows() sets .fade-left/.fade-right while
   more tabs exist in that direction, so a cut-off tab reads as "more this
   way" rather than broken. Defined once, on this container only. */
.cat-scroll-inner.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px);
  mask-image: linear-gradient(to right, transparent 0, #000 26px);
}
.cat-scroll-inner.fade-right {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px);
  mask-image: linear-gradient(to left, transparent 0, #000 26px);
}
.cat-scroll-inner.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.cat-scroll-btn {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  z-index: 1;
}
.cat-scroll-btn:hover { background: var(--border); }
.cat-scroll-btn.hidden { opacity: 0; pointer-events: none; }
.cat-scroll-left  { margin-right: 4px; }
.cat-scroll-right { margin-left: 4px; }

/* ── Dark theme additions ── */
[data-theme="dark"] .poll-today-teaser,
[data-theme="dark"] .poll-archive-card      { background: var(--surface-card); }
[data-theme="dark"] .today-teaser-question  { color: var(--ink); }
[data-theme="dark"] .today-teaser-question:hover { color: rgba(255,255,255,1); }
[data-theme="dark"] .poll-archive-date      { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .poll-archive-question  { color: var(--ink); }
[data-theme="dark"] .poll-card.voted .option-pct,
[data-theme="dark"] .poll-options-results .option-pct { color: var(--ink); }
[data-theme="dark"] .poll-voted-indicator {
  background: rgba(96,0,0,0.18);
  border-color: rgba(96,0,0,0.35);
}
[data-theme="dark"] .no-polls-msg          { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .poll-archive-link     { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .poll-archive-link:hover { color: rgba(255,255,255,0.8); }

/* ── Light theme additions ── */
[data-theme="light"] .poll-today-teaser    { background: var(--white); }
[data-theme="light"] .poll-voted-indicator { background: var(--white); border-color: #f5c0c0; }
[data-theme="light"] .poll-archive-date    { color: var(--ink-muted); }
[data-theme="light"] .poll-card.voted .option-pct,
[data-theme="light"] .poll-options-results .option-pct { color: var(--navy); }

/* ── Medium screens — drop right sidebar ─────────────────────── */
/* Bounded at 641px+ (cycle 046): phones now get the off-canvas drawer
   system below instead of this tablet-only 2-column collapse — the two
   must not both apply to the same width, or the right-sidebar's
   `display:none` here would fight the drawer's own show/hide logic. */
@media (min-width: 641px) and (max-width: 1080px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); }
  .right-sidebar { display: none; }
}

/* ── Mobile-adjacent tablet stacking (641-820px only) ─────────── */
/* Bounded the same way and for the same reason as the block above — this
   in-flow stacking is superseded by the off-canvas drawers at <=640px. */
@media (min-width: 641px) and (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }

  .left-sidebar, .right-sidebar {
    position: static;
    height: auto;
    border: none;
  }

  .left-sidebar { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }

  .toc-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
  }

  .toc-nav::-webkit-scrollbar { display: none; }

  .nav-link {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    flex-direction: column;
    padding: 8px 12px;
    gap: 4px;
    font-size: 0.75rem;
    text-align: center;
  }

  .nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }

  .middle-column { padding: 0 0 32px; border: none; }

  .right-sidebar .search-input { width: calc(100% - 32px); margin: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE OFF-CANVAS NAV (cycle 046) — top bar + edge-swipe drawers,
   replacing in-flow sidebar stacking below 641px. This is geometry
   only; the top bar's markup, drawer toggling, and gesture handling
   all live in js/mobile-nav.js (one shared module, loaded everywhere
   with a layout) so there's a single behavior definition, not 22
   per-page copies.
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --mobile-topbar-h: 56px; }

  body { padding-top: var(--mobile-topbar-h); }

  .mobile-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--mobile-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 500;
  }
  .mobile-topbar-logo-btn {
    background: none; border: none; padding: 4px; margin: -4px;
    display: flex; align-items: center; cursor: pointer;
  }
  .mobile-topbar-logo-btn .pnyx-logo { width: 40px; height: 40px; }
  .mobile-topbar-avatar {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .mobile-topbar-avatar .account-thumb { width: 36px; height: 36px; }

  .mobile-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(6,12,26,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-press-out) var(--ease-stately);
    z-index: 550;
  }
  .mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .layout { grid-template-columns: 1fr; }

  /* The two asides leave the grid entirely (fixed positioning) and
     become full-height off-canvas panels; .open slides each in from
     the edge it belongs to. */
  .left-sidebar, .right-sidebar {
    position: fixed;
    top: 0;
    height: 100dvh;
    width: min(84vw, 320px);
    z-index: 600;
    transition: transform var(--dur-press-out) var(--ease-stately);
    border: none;
    box-shadow: var(--shadow-md);
  }
  .left-sidebar  { left: 0; transform: translateX(-100%); }
  .right-sidebar { right: 0; transform: translateX(100%); }
  .left-sidebar.open,
  .right-sidebar.open { transform: translateX(0); }

  .middle-column { padding: 0 12px 32px; border: none; }

  /* These stick to the viewport's top:0, not the fixed top bar's box —
     without the offset they'd scroll up and disappear behind it
     (higher z-index) instead of parking just below it. */
  .feed-tabs,
  body.page-account .profile-tabs,
  body.page-admin .admin-header {
    top: var(--mobile-topbar-h);
  }

  /* Bill/nomination/treaty card action row (cycle 047, M3): at 390px
     .bill-action-right doesn't have room for "View on Congress.gov →"
     next to "+ Track", so the LINK TEXT ITSELF wraps to two lines before
     the row ever gets to wrap the link and button apart — three cramped
     lines total. Dropping the "View on " lead-in (the {source} + arrow
     alone reads fine as a link label) fits it on one line again. */
  .bill-link-verb { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   BILLS — LEVEL TABS
══════════════════════════════════════════════════════════════ */
.level-tabs {
  display: flex;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.level-tab {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 13px 16px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  letter-spacing: 0.01em;
}

.level-tab:hover  { color: var(--text); }
.level-tab.active { color: var(--navy); border-bottom-color: var(--accent); }

/* ── Filter Bar ── */
.bills-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-items: center;
}
/* Tracked mode (set in updateLegControls): the bar shows only search + sort +
   the icon buttons, so collapse both filter-rows onto a single wrapping line.
   display:contents lifts the .filter-row children into the (now row-direction)
   bar; the many hidden controls take no space, so the few visible ones fit. */
.bills-filter-bar.one-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.bills-filter-bar.one-row .filter-row { display: contents; }
/* The icon buttons live in row 1 (first in DOM), so on the flattened line they'd
   land on the left. Order them last so sort + search sit left and the dots sit
   right (search's flex-grow fills the gap between). */
.bills-filter-bar.one-row .filter-opinion-toggle,
.bills-filter-bar.one-row .filter-info-btn { order: 2; }

.filter-opinion-toggle {
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #f0f3fa;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
.filter-opinion-toggle svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  pointer-events: none;
}
.filter-opinion-toggle:hover {
  border-color: #e07b00;
  color: #e07b00;
}
.filter-opinion-toggle.active {
  background: #e07b00;
  border-color: #e07b00;
  color: var(--white);
}
/* ── Info button ── */
.filter-info-btn {
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
.filter-info-btn svg { width: 15px; height: 15px; pointer-events: none; }
.filter-info-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .filter-info-btn,
[data-theme="america"] .filter-info-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
.filter-info-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
[data-theme="dark"] .filter-info-btn.active,
[data-theme="america"] .filter-info-btn.active {
  background: #3b5bdb;
  border-color: #3b5bdb;
  color: #fff;
}

/* ── Info modal ── */
.info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.info-modal-overlay[hidden] { display: none; }
.info-modal {
  background: var(--white);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.info-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
.info-modal-close:hover { background: var(--hover-bg); color: var(--text); }
.info-modal-close svg { width: 16px; height: 16px; }
.info-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 20px;
  padding-right: 32px;
}
.info-section {
  margin-bottom: 20px;
}
.info-section:last-child { margin-bottom: 0; }
.info-section h3 {
  /* cycle 109 addendum: kicker typography (caption size / 800 / 0.14em) --
     color stays var(--accent), its existing value, unchanged (this pass
     is color-neutral outside --kicker-rule). No ::after: the text is
     already accent-colored, so a same-colored rule right after it would
     double up rather than accent a neutral label -- same reasoning as
     .rep-boot-kicker/.thread-kicker below. */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 8px;
}
.info-section p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.info-section ul, .info-section ol {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  padding-left: 18px;
}
.info-section li { margin-bottom: 3px; }
[data-theme="dark"] .info-modal,
[data-theme="america"] .info-modal {
  background: #1c2840;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
[data-theme="dark"] .info-modal .info-modal-title,
[data-theme="america"] .info-modal .info-modal-title { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .info-modal .info-section h3,
[data-theme="america"] .info-modal .info-section h3 { color: #5b9bd5; }
[data-theme="dark"] .info-modal .info-section p,
[data-theme="dark"] .info-modal .info-section ul,
[data-theme="dark"] .info-modal .info-section ol,
[data-theme="america"] .info-modal .info-section p,
[data-theme="america"] .info-modal .info-section ul,
[data-theme="america"] .info-modal .info-section ol { color: rgba(255,255,255,0.82); }
[data-theme="dark"] .info-modal-close,
[data-theme="america"] .info-modal-close { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .info-modal-close:hover,
[data-theme="america"] .info-modal-close:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }

/* ── Bill-becomes-law stepper (inside process modal) ── */
.bill-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bill-step { display: flex; gap: 12px; position: relative; }
.bill-step + .bill-step::before {
  content: '';
  position: absolute;
  left: 11px;
  top: -14px;
  width: 2px;
  height: 14px;
  background: var(--border, rgba(0,0,0,0.12));
}
.bill-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bar-bg, #d4daea);
  color: var(--muted, var(--ink-muted));
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.bill-step-body { padding-bottom: 14px; flex: 1; }
.bill-step-label { font-size: 0.85rem; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.bill-step-desc  { font-size: 0.8rem; line-height: 1.55; color: var(--muted); margin: 0; }
.bill-step.step-signed .bill-step-dot { background: #059669; color: var(--white); }
.bill-step.step-vetoed .bill-step-dot { background: #dc2626; color: var(--white); }

[data-theme="dark"] .bill-step + .bill-step::before,
[data-theme="america"] .bill-step + .bill-step::before { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .bill-step-dot,
[data-theme="america"] .bill-step-dot { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .bill-step-label,
[data-theme="america"] .bill-step-label { color: rgba(255,255,255,0.88); }
[data-theme="dark"] .bill-step-desc,
[data-theme="america"] .bill-step-desc { color: rgba(255,255,255,0.5); }

[data-theme="dark"] .filter-opinion-toggle,
[data-theme="america"] .filter-opinion-toggle {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
[data-theme="light"] .filter-opinion-toggle {
  background: var(--surface-sunken);
  color: var(--text);
}
[data-theme="light"] .filter-opinion-toggle.active {
  background: #e07b00;
  border-color: #e07b00;
  color: var(--white);
}
[data-theme="dark"] .filter-opinion-toggle.active,
[data-theme="america"] .filter-opinion-toggle.active {
  background: #b85c00;
  border-color: #b85c00;
  color: #fff;
}

.filter-row .filter-select,
.filter-row .bills-search {
  flex: 1 1 130px;
  min-width: 130px;
}

/* Narrow viewports: stack filters one per line so option text never truncates */
@media (max-width: 500px) {
  .filter-row .filter-select,
  .filter-row .bills-search {
    flex-basis: 100%;
  }
}

.filter-select {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: #f0f3fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-stately), background-color var(--dur-micro) var(--ease-stately);
}

.filter-select:focus { border-color: var(--accent); background-color: var(--white); }
.filter-select option { color: var(--ink); background: var(--white); }

/* ── Status multi-select panel ── */
/* The 158px floor is THE button-fit rule (cycle 040, N6): "2 categories
   hidden" renders whole at desktop widths on every kind's row (the generic
   .filter-select 130px floor truncated it). Rows flex-wrap below the floor
   instead of ellipsizing mid-word. */
.status-filter-wrap { position: relative; min-width: 158px; }
.status-filter-btn  {
  width: 100%; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status-filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 6px 0 4px; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  min-width: 210px;
}
.sfp-group-label {
  /* cycle 109 addendum: restyled to the kicker treatment -- groups
     checkbox items within the Status Filter Panel dropdown ("Early
     Stage", "Active", ...). Plain block label, safe for ::after. */
  font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--card-muted);
  padding: 6px 14px 3px;
}
.sfp-group-label::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
.sfp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; cursor: pointer;
  font-size: 0.8rem; color: var(--card-text);
  transition: background var(--dur-press-in) var(--ease-stately);
}
.sfp-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"]    .sfp-item:hover,
[data-theme="america"] .sfp-item:hover { background: rgba(255,255,255,0.05); }
.sfp-item input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.sfp-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* row-reverse flips the visual order so "Hide all" (second in DOM) appears on
   the LEFT and "Show all" (first in DOM) appears on the RIGHT. space-between
   pushes them to opposite edges of the footer. Tab/keyboard order stays DOM
   order, so Show-all is still tabbed first. */
.sfp-footer { padding: 6px 14px 4px; display: flex; flex-direction: row-reverse; justify-content: space-between; }
.sfp-clear {
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  /* Blue (not the accent maroon) — the maroon "Show all" was hard to read
     against the dark filter-panel background on dark mode. Blue keeps a
     "this is a link" affordance with better contrast on every theme. */
  color: #357cc8; background: none; border: none; cursor: pointer;
  padding: 0; text-decoration: underline;
}
[data-theme="dark"] .sfp-clear { color: #93c5fd; }

.bills-search {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: #f0f3fa;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}

.bills-search:focus { border-color: var(--accent); background: var(--white); }

/* ── Loading / Status ── */
.bills-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.bills-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: bill-pulse 1.2s ease-in-out infinite;
}
.bills-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.bills-loading-dot:nth-child(3) { animation-delay: 0.4s; }
/* The dots animate ONLY while #bills-loading is shown (settled/error/empty
   states render static markup — V11: an idle page must not repaint). */
@media (prefers-reduced-motion: reduce) { .bills-loading-dot { animation: none; } }

@keyframes bill-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

/* (.bills-live-badge / .live-dot removed in cycle 037 — dead styles whose
   infinite blink was the page's only always-on animation definition.) */

.bills-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* Centered in a sane well (cycle 040, N9) — a one-line message must not
     sit as a thin strip above a dead lower half. */
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
}

/* ================================================================
   BILL CARD META ROW — every label across the top of a bill card,
   in DOM order (renderCard in legislation.html builds the row):

     [119th] [H.R. 1234] [Funding] [In Committee] [Healthcare] [UT] [date]
      congress  bill-num   purpose    status or      category  state  date
        tag                 chip     lifecycle chip     tag     tag

   Status badge COLORS (the canonical 23-key set + legacy aliases)
   follow this block; dark-theme variants live in the dark section
   and override these by specificity, wherever they sit in the file.
   ================================================================ */
.bill-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Which Congress the bill is from (e.g. "119th") — quiet neutral pill.
   var(--border)/var(--muted) adapt to dark/america themes on their own. */
.bill-congress-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--border);
  color: var(--muted);
}

.bill-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy);
  background: #e8edf8;
  padding: 3px 8px;
  border-radius: 999px;
}

.bill-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Roll-call tally beside a status pill (nominations "51–50", treaties
   "95–1") — the ONE definition (cycle 037, V7): pills carry status only;
   the tally renders in this element, same format and placement everywhere
   it exists. */
.meta-tally {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Legacy status colors (pre-23-key data can still carry these keys). */
.status-passed,
.status-signed    { background: #d1fae5; color: #065f46; }
.status-committee { background: #fef3c7; color: #92400e; }
.status-senate    { background: #dbeafe; color: #1e40af; }
.status-house     { background: #ede9fe; color: #5b21b6; }
.status-vetoed    { background: #fee2e2; color: #991b1b; }

.bill-date {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
}

/* ── Status badge variants — canonical 23-key set ── */
.status-introduced-to-house                        { background: #f1f5f9; color: #475569; }
.status-introduced-to-senate                       { background: #f1f5f9; color: #475569; }
.status-referred-to-committee                      { background: #fef3c7; color: #92400e; }
.status-returned-to-committee                      { background: #fde68a; color: #78350f; }
.status-reported-and-scheduled                     { background: #dbeafe; color: #1e40af; }
.status-on-house-floor                             { background: #ede9fe; color: #5b21b6; }
.status-on-senate-floor                            { background: #dbeafe; color: #1e40af; }
.status-rules-suspended                            { background: #fae8ff; color: #86198f; }
.status-amendment                                  { background: #e0e7ff; color: #3730a3; }
.status-passed-house                               { background: #ccfbf1; color: #0f766e; }
.status-passed-senate                              { background: #d1fae5; color: #065f46; }
.status-returned-to-house                          { background: #cffafe; color: #155e75; }
.status-returned-to-senate                         { background: #cffafe; color: #155e75; }
.status-conference-committee                       { background: #ffe4e6; color: #9f1239; }
.status-to-president                               { background: #fef9c3; color: #713f12; }
.status-signed                                     { background: #dcfce7; color: #166534; font-weight: 800; }
.status-law-by-default                             { background: #dcfce7; color: #166534; font-weight: 800; }
.status-vetoed                                     { background: #fee2e2; color: #991b1b; }
.status-pocket-vetoed                              { background: #fee2e2; color: #991b1b; }
.status-veto-override                              { background: #fce7f3; color: #9d174d; }
.status-failed                                     { background: #fee2e2; color: #991b1b; }
.status-failed-with-possibility-of-reconsideration { background: #fecaca; color: #7f1d1d; }
.status-tabled                                     { background: #f1f5f9; color: #64748b; }

/* ── Legacy alias classes (kept so any unmigrated row still renders) ── */
.status-introduced      { background: #f1f5f9; color: #475569; }
.status-committee       { background: #fef3c7; color: #92400e; }
.status-passed-committee{ background: #dbeafe; color: #1e40af; }
.status-floor-scheduled { background: #fef3c7; color: #92400e; }
.status-in-house        { background: #ede9fe; color: #5b21b6; }
.status-in-senate       { background: #dbeafe; color: #1e40af; }
.status-passed-both     { background: #bbf7d0; color: #14532d; }
.status-sent-president  { background: #fef9c3; color: #713f12; }

/* ── Bill meta tags ── */
.bill-category-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8edf8;
  color: var(--navy);
}

.bill-state-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  letter-spacing: 0.04em;
}

/* ── Card purpose chips (cycle 026): flag the exceptional purposes only. ── */
.bill-purpose-chip { font-size:0.7rem; font-weight:800; letter-spacing:0.03em; padding:3px 9px; border-radius:999px; white-space:nowrap; text-transform:uppercase; }
.bill-purpose-chip.pc-funding { background:#fef3c7; color:#92400e; }
.bill-purpose-chip.pc-war,
.bill-purpose-chip.pc-accountability { background:#fee2e2; color:#991b1b; }
.bill-purpose-chip.pc-amendment { background:#ede9fe; color:#5b21b6; }
.bill-purpose-chip.pc-budget { background:#dbeafe; color:#1e40af; }
[data-theme="dark"] .bill-purpose-chip.pc-funding { background:rgba(245,158,11,0.18); color:#fcd34d; }
[data-theme="dark"] .bill-purpose-chip.pc-war,
[data-theme="dark"] .bill-purpose-chip.pc-accountability { background:rgba(239,68,68,0.18); color:#fca5a5; }
[data-theme="dark"] .bill-purpose-chip.pc-amendment { background:rgba(139,92,246,0.20); color:#c4b5fd; }
[data-theme="dark"] .bill-purpose-chip.pc-budget { background:rgba(59,130,246,0.18); color:#93c5fd; }
/* Resolutions noise chips (honorary/procedural): muted gray (cycle 027). */
.bill-purpose-chip.pc-muted { background:var(--border); color:var(--muted); }
[data-theme="dark"] .bill-purpose-chip.pc-muted { background:rgba(255,255,255,0.12); color:#9ca3af; }

/* Voting-soon tag (cycle 070): a quiet amber pill in the .bill-meta row,
   same shape/height as .bill-status/.bill-purpose-chip -- no existing amber
   PILL class fit (grepped first; .bm-room-icon's amber is an icon disc, not
   a text pill). Colors match the established pc-funding amber pair. */
.bill-vsoon-tag { font-size:0.7rem; font-weight:800; letter-spacing:0.03em; padding:3px 9px; border-radius:999px; white-space:nowrap; text-transform:uppercase; background:#fef3c7; color:#92400e; }
[data-theme="dark"] .bill-vsoon-tag { background:rgba(245,158,11,0.18); color:#fcd34d; }

/* Resolution lifecycle chip (In progress / Agreed to / Didn't pass). */
.bill-life-chip { font-size:0.7rem; font-weight:800; letter-spacing:0.03em; padding:3px 9px; border-radius:999px; white-space:nowrap; text-transform:uppercase; }
.bill-life-chip.lc-agreed { background:#dcfce7; color:#166534; }
.bill-life-chip.lc-in-progress { background:var(--border); color:var(--muted); }
.bill-life-chip.lc-didnt-pass { background:#f3f4f6; color:#6b7280; }
.bill-life-chip.lc-now-law { background:#dbeafe; color:#1e40af; }
[data-theme="dark"] .bill-life-chip.lc-agreed { background:rgba(34,197,94,0.18); color:#86efac; }
[data-theme="dark"] .bill-life-chip.lc-in-progress { background:rgba(255,255,255,0.12); color:#9ca3af; }
[data-theme="dark"] .bill-life-chip.lc-didnt-pass { background:rgba(255,255,255,0.08); color:#9ca3af; }
[data-theme="dark"] .bill-life-chip.lc-now-law { background:rgba(59,130,246,0.18); color:#93c5fd; }

/* Funding expiry line on funding cards (below the title, not in the meta row). */
.bill-funding-expiry { font-size:0.78rem; font-weight:600; color:#92400e; margin:2px 0 6px; display:flex; align-items:center; gap:5px; }
[data-theme="dark"] .bill-funding-expiry { color:#fcd34d; }

.bill-api-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Thumb buttons ── */
.bill-thumb-group {
  display: flex;
  gap: 4px;
}

.btn-thumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--muted);
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}

.btn-thumb svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-thumb:hover { transform: scale(1.05); }

.btn-thumb-up:hover,
.btn-thumb-up.active  { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }

.btn-thumb-down:hover,
.btn-thumb-down.active { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* Keyboard focus indicators — visible only on keyboard navigation, not mouse clicks */
.btn-thumb:focus-visible,
.btn-track:focus-visible,
.bill-link:focus-visible,
.bill-title a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Track button — tracked state ── */
.btn-track.tracked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.btn-track.tracked:hover {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
}

/* ── Bill actions layout ── */
.bill-action-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Tracked bill card on account page ── */
.tracked-bill-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.tracked-bill-header { background: var(--navy); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tracked-bill-header .tbh-num  { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.tracked-bill-header .tbh-date { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-left: auto; }
.tracked-bill-body  { padding: 14px 18px; }
.tracked-bill-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.35; }
.tracked-bill-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tracked-bill-link  { font-size: 0.78rem; font-weight: 600; color: #5b9bd5; text-decoration: none; }
.tracked-bill-link:hover { color: #3a7bbf; }
.votes-section-title {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  padding: 14px 0 8px; margin-top: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.votes-section-title::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

/* ── Dark theme overrides for bills ── */
[data-theme="dark"] .level-tabs,
[data-theme="dark"] .bills-filter-bar { background: #0e1e36; border-color: rgba(255,255,255,0.08); }

[data-theme="dark"] .level-tab        { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .level-tab:hover  { color: rgba(255,255,255,0.8); }
[data-theme="dark"] .level-tab.active { color: var(--white); border-bottom-color: var(--accent); }

[data-theme="dark"] .filter-select {
  background-color: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
[data-theme="dark"] .filter-select:focus { border-color: var(--accent); background-color: var(--hairline-default); }
/* Cycle 061: same option-popup gap as .form-field select -- the closed box's
   translucent background doesn't carry into the OS-rendered popup, so pin it. */
[data-theme="dark"] .filter-select option { color: rgba(255,255,255,0.88); background: var(--surface-card); }

[data-theme="dark"] .bills-search {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
[data-theme="dark"] .bills-search:focus  { border-color: var(--accent); background: var(--hairline-default); }
[data-theme="dark"] .bills-search::placeholder { color: rgba(255,255,255,0.3); }

[data-theme="dark"] .bills-empty      { background: #0e1e36; color: var(--ink-faint); }

[data-theme="dark"] .bill-category-tag { background: var(--hairline-default); color: rgba(255,255,255,0.75); }
[data-theme="dark"] .bill-state-tag    { background: rgba(254,243,199,0.15); color: #fde68a; }
[data-theme="dark"] .bill-api-tag      { background: rgba(209,250,229,0.15); color: #6ee7b7; }

[data-theme="dark"] .btn-thumb { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); }
[data-theme="dark"] .btn-thumb-up:hover,
[data-theme="dark"] .btn-thumb-up.active   { background: rgba(16,185,129,0.18); border-color: rgba(110,231,183,0.4); color: #6ee7b7; }
[data-theme="dark"] .btn-thumb-down:hover,
[data-theme="dark"] .btn-thumb-down.active { background: rgba(239,68,68,0.18); border-color: rgba(252,165,165,0.4); color: #fca5a5; }

/* ── Dark-theme status badges — canonical 23-key set ── */
[data-theme="dark"] .status-introduced-to-house                        { background: rgba(71,85,105,0.3); color: #94a3b8; }
[data-theme="dark"] .status-introduced-to-senate                       { background: rgba(71,85,105,0.3); color: #94a3b8; }
[data-theme="dark"] .status-referred-to-committee                      { background: rgba(146,64,14,0.35); color: #fcd34d; }
[data-theme="dark"] .status-returned-to-committee                      { background: rgba(180,83,9,0.4);  color: #fbbf24; }
[data-theme="dark"] .status-reported-and-scheduled                     { background: rgba(30,64,175,0.35); color: #bfdbfe; }
[data-theme="dark"] .status-on-house-floor                             { background: rgba(91,33,182,0.3);  color: #c4b5fd; }
[data-theme="dark"] .status-on-senate-floor                            { background: rgba(30,64,175,0.3);  color: #93c5fd; }
[data-theme="dark"] .status-rules-suspended                            { background: rgba(134,25,143,0.3); color: #f0abfc; }
[data-theme="dark"] .status-amendment                                  { background: rgba(55,48,163,0.35); color: #a5b4fc; }
[data-theme="dark"] .status-passed-house                               { background: rgba(15,118,110,0.3); color: #5eead4; }
[data-theme="dark"] .status-passed-senate                              { background: rgba(6,95,70,0.35);   color: #6ee7b7; }
[data-theme="dark"] .status-returned-to-house                          { background: rgba(21,94,117,0.35); color: #67e8f9; }
[data-theme="dark"] .status-returned-to-senate                         { background: rgba(21,94,117,0.35); color: #67e8f9; }
[data-theme="dark"] .status-conference-committee                       { background: rgba(159,18,57,0.3);  color: #fda4af; }
[data-theme="dark"] .status-to-president                               { background: rgba(113,63,18,0.35); color: #fde68a; }
[data-theme="dark"] .status-signed                                     { background: rgba(22,101,52,0.4);  color: #86efac; }
[data-theme="dark"] .status-law-by-default                             { background: rgba(22,101,52,0.4);  color: #86efac; }
[data-theme="dark"] .status-vetoed                                     { background: rgba(153,27,27,0.3);  color: #fca5a5; }
[data-theme="dark"] .status-pocket-vetoed                              { background: rgba(153,27,27,0.3);  color: #fca5a5; }
[data-theme="dark"] .status-veto-override                              { background: rgba(157,23,77,0.3);  color: #f9a8d4; }
[data-theme="dark"] .status-failed                                     { background: rgba(153,27,27,0.3);  color: #fca5a5; }
[data-theme="dark"] .status-failed-with-possibility-of-reconsideration { background: rgba(127,29,29,0.35); color: #fca5a5; }
[data-theme="dark"] .status-tabled                                     { background: rgba(51,65,85,0.4);   color: #94a3b8; }

/* ── Dark-theme legacy alias classes ── */
[data-theme="dark"] .status-introduced      { background: rgba(71,85,105,0.3); color: #94a3b8; }
[data-theme="dark"] .status-committee       { background: rgba(146,64,14,0.35); color: #fcd34d; }
[data-theme="dark"] .status-passed-committee{ background: rgba(30,64,175,0.35); color: #bfdbfe; }
[data-theme="dark"] .status-floor-scheduled { background: rgba(146,64,14,0.35); color: #fcd34d; }
[data-theme="dark"] .status-in-house        { background: rgba(91,33,182,0.3); color: #c4b5fd; }
[data-theme="dark"] .status-in-senate       { background: rgba(30,64,175,0.3); color: #93c5fd; }
[data-theme="dark"] .status-passed-both     { background: rgba(20,83,45,0.35); color: #86efac; }
[data-theme="dark"] .status-sent-president  { background: rgba(113,63,18,0.35); color: #fde68a; }

[data-theme="dark"] .tracked-bill-header    { background: #07182e; }
[data-theme="dark"] .tracked-bill-link      { color: #93c5fd; }
[data-theme="dark"] .tracked-bill-link:hover{ color: #bfdbfe; }
[data-theme="dark"] .votes-section-title    { color: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.08); }

/* ── America theme overrides for bills ── */
[data-theme="america"] .level-tabs,
[data-theme="america"] .bills-filter-bar { background: #071e48; border-color: rgba(255,255,255,0.10); }
[data-theme="america"] .level-tab        { color: rgba(255,255,255,0.45); }
[data-theme="america"] .level-tab:hover  { color: rgba(255,255,255,0.8); }
[data-theme="america"] .level-tab.active { color: var(--white); border-bottom-color: #cc0000; }
[data-theme="america"] .filter-select    { background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="america"] .filter-select option { color: rgba(255,255,255,0.88); background: #1c2840; }
[data-theme="america"] .bills-search     { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="america"] .bills-search::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="america"] .tracked-bill-link { color: var(--white); }
[data-theme="america"] .tracked-bill-link:hover { color: rgba(255,255,255,0.7); }

/* ── Light theme overrides for bills ── */
[data-theme="light"] .level-tabs,
[data-theme="light"] .bills-filter-bar { background: #d8e0ee; border-color: #c8d2e4; }
[data-theme="light"] .level-tab.active { color: var(--navy); }
[data-theme="light"] .filter-select    { background-color: var(--surface-sunken); color: var(--text); }
[data-theme="light"] .bills-search     { background: var(--surface-sunken); color: var(--text); }
[data-theme="light"] .bills-search::placeholder { color: rgba(26,32,53,0.38); }

/* ════════════════════════════════════════════════
   LOCATION FILTER BAR (New Bills + Voter's Aid)
   ════════════════════════════════════════════════ */

.location-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
}
.loc-pin     { font-size: 1rem; flex-shrink: 0; line-height: 1; color: var(--card-muted); }
.loc-viewing {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--card-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.loc-state-select {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--card-text);
  /* PP3 (cycle 042, verified real): this select rendered the NATIVE OS arrow
     jammed inside 10px padding. Same chevron treatment as .filter-select —
     appearance:none + the shared SVG chevron + room on the right. The theme
     overrides below use background-color (not the shorthand) so they can't
     wipe this image. */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 26px 4px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-stately);
}
.loc-state-select:focus { border-color: var(--accent); }
.loc-city-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loc-divider  { color: var(--card-muted); font-size: 0.85rem; }
.loc-city-input {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--card-text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  outline: none;
  width: 160px;
  transition: border-color var(--dur-micro) var(--ease-stately);
}
.loc-city-input::placeholder { color: var(--card-muted); }
.loc-city-input:focus { border-color: var(--accent); }
.loc-profile-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
}
.loc-profile-link:hover { text-decoration: underline; }

/* ── Dark theme ── */
[data-theme="dark"] .location-filter-bar { background: var(--surface-card); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .loc-state-select    { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.15); background-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .loc-city-input      { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); }
[data-theme="dark"] .loc-state-select option { background: var(--surface-card); color: rgba(255,255,255,0.88); }

/* ── Light theme ── */
[data-theme="light"] .location-filter-bar { background: var(--white); border-color: var(--hairline-default); }
[data-theme="light"] .loc-state-select     { color: var(--ink); border-color: var(--hairline-default); background-color: var(--surface-sunken); }
[data-theme="light"] .loc-city-input       { color: var(--ink); border-color: var(--hairline-default); background: var(--surface-sunken); }

/* ── America theme ── */
[data-theme="america"] .location-filter-bar { background: rgba(255,255,255,0.92); border-color: #dde3ef; }
[data-theme="america"] .loc-state-select     { color: var(--ink); border-color: #dde3ef; background-color: var(--white); }
[data-theme="america"] .loc-city-input       { color: var(--ink); border-color: #dde3ef; background: var(--white); }

/* ════════════════════════════════════════════════
   VOTER'S AID — Candidate Cards
   ════════════════════════════════════════════════ */

/* ── Filter bar ── */
.va-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.va-party-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.va-party-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  font-family: 'Inter', sans-serif;
}
.va-party-btn:hover { background: rgba(128,0,0,0.08); color: var(--accent); border-color: var(--accent); }
.va-party-btn.active { background: var(--accent); color: var(--white); border-color: var(--accent); }
.va-party-btn.dem.active   { background: #1d4ed8; border-color: #1d4ed8; }
.va-party-btn.rep.active   { background: #dc2626; border-color: #dc2626; }
.va-party-btn.ind.active   { background: #6b7280; border-color: #6b7280; }
.va-search {
  flex: 0 0 200px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-text);
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  outline: none;
}
.va-search::placeholder { color: var(--card-muted); }
.va-search:focus { border-color: var(--accent); }

/* ── Candidate list container ── */
.candidates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.candidates-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 0.9rem;
}

/* ── Candidate card ── */
.candidate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow var(--dur-micro) var(--ease-stately);
}
.candidate-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.12); }

/* ── Collapsed header ── */
.candidate-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.candidate-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.candidate-info {
  flex: 1;
  min-width: 0;
}
.candidate-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--card-text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.candidate-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.candidate-position {
  font-size: 0.8rem;
  color: var(--card-muted);
}
.candidate-party-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.expand-arrow {
  width: 22px;
  height: 22px;
  color: var(--card-muted);
  flex-shrink: 0;
  transition: transform var(--dur-press-out) var(--ease-stately);
}
.candidate-card.open .expand-arrow { transform: rotate(180deg); }

/* ── Expanded details ── */
.candidate-details {
  display: none;
  padding: 0 16px 18px;
  border-top: 1px solid var(--border);
}
.candidate-card.open .candidate-details { display: block; }

.candidate-summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--card-muted);
  margin: 14px 0 6px;
}
.candidate-summary {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--card-text);
  margin-bottom: 16px;
}

/* ── Stances ── */
.stances-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--card-muted);
  margin-bottom: 10px;
}
.stance-row {
  margin-bottom: 14px;
}
.stance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.stance-topic {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--card-text);
}
.stance-leaning-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  color: var(--white);
  white-space: nowrap;
}
/* ── Leaning gradient track ── */
.leaning-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #1e3a8a 0%, #1d4ed8 20%, #7c3aed 30%, #dc2626 80%, #7f1d1d 100%);
  margin-bottom: 5px;
}
.leaning-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2.5px solid currentColor;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: left var(--dur-ceremony) var(--ease-stately);
}
.stance-detail {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--card-muted);
}

/* ── Dark theme overrides ── */
/* Filter bar: match card bg so it reads as one unit */
[data-theme="dark"] .va-filter-bar   { background: var(--surface-card); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .va-party-btn:not(.active)    { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .va-party-btn:not(.active):hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .va-search       { background: var(--surface-sunken); border-color: rgba(255,255,255,0.12); }
/* Card: --card variable already sets #1c2840 in dark, but border needs explicit override */
[data-theme="dark"] .candidate-card  { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .candidate-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .candidate-details { border-color: rgba(255,255,255,0.08); }
/* Marker bg should match the card bg for the hollow-circle illusion */
[data-theme="dark"] .leaning-marker  { background: var(--surface-card); }
[data-theme="dark"] .candidates-empty { color: rgba(255,255,255,0.40); }

/* ── Light theme overrides ── */
[data-theme="light"] .va-filter-bar  { background: #d8e0ee; border-color: #c8d2e4; }
/* :not(.active) — the bare theme rule out-specifies .va-party-btn.active
   and would repaint the active button's white label gray-on-maroon. */
[data-theme="light"] .va-party-btn:not(.active)   { color: #4b5563; border-color: var(--hairline-default); }
[data-theme="light"] .va-search      { background: var(--surface-sunken); }
[data-theme="light"] .candidate-card { border-color: var(--hairline-default); }
[data-theme="light"] .candidate-details { border-color: var(--hairline-default); }
[data-theme="light"] .leaning-marker { background: var(--white); }

/* ── America theme overrides ── */
[data-theme="america"] .va-filter-bar  { background: #071e48; border-color: rgba(255,255,255,0.10); }
[data-theme="america"] .va-party-btn:not(.active)   { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.12); }
[data-theme="america"] .va-party-btn:not(.active):hover { color: var(--white); border-color: rgba(255,255,255,0.5); }
[data-theme="america"] .va-search      { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
/* Cards use #e8ecf4 (blue-tinted off-white) per America theme spec */
[data-theme="america"] .candidate-card { background: var(--surface-card); border-color: #d0d7e8; }
[data-theme="america"] .candidate-details { border-color: #dde3ef; }
[data-theme="america"] .leaning-marker { background: var(--white); }

/* ════════════════════════════════════════════════
   POLL — LEADING BAR  &  LEADING BADGE
   ════════════════════════════════════════════════ */

/* The winning bar turns maroon after voting (and in archive results) */
.poll-card.voted .progress-bar.leading,
.poll-options-results .progress-bar.leading {
  background: var(--accent);
}

/* Small "Leading" pill appended to winning option label */
.leading-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--white);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}

/* ════════════════════════════════════════════════
   POLL — WRITE-IN DISPLAY (post-vote static box)
   ════════════════════════════════════════════════ */

.write-in-display {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--white);
  border: 1.5px solid #f5c0c0;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.4;
}
[data-theme="dark"] .write-in-display {
  background: rgba(112, 0, 0, 0.18);
  border-color: rgba(200, 0, 0, 0.30);
  color: #e88;
}
[data-theme="america"] .write-in-display {
  background: #fff0f0;
  border-color: #f5c0c0;
  color: var(--accent);
}

/* ════════════════════════════════════════════════
   POLL — WRITE-IN OPTION INPUT (inside an option row)
   ════════════════════════════════════════════════ */

/*
 * Rendered below the option label/bar when opt.writeIn === true.
 * Hidden by default; CSS shows it when the parent option is .selected.
 * After voting, the input is hidden and replaced with .write-in-display.
 */
.writein-option-input {
  display: none;  /* shown via .poll-option.selected rule below */
  width: 100%;
  margin-top: 10px;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--card-text);
  background: var(--surface-sunken);
  outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately), background var(--dur-press-out) var(--ease-stately);
}
.writein-option-input::placeholder { color: var(--card-muted); opacity: 1; }
.writein-option-input:focus {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
}
.poll-option.selected .writein-option-input { display: block; }

/* Dark theme */
[data-theme="dark"] .writein-option-input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.88);
}
[data-theme="dark"] .writein-option-input:focus {
  background: rgba(255,255,255,0.11);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,0,0,0.22);
}
/* Light theme */
[data-theme="light"] .writein-option-input { background: var(--surface-sunken); border-color: var(--hairline-default); }
/* America theme */
[data-theme="america"] .writein-option-input { background: var(--white); border-color: #dde3ef; }


/* ####################################################################
   PER-PAGE SECTIONS (CSS consolidation, 2026-07-03)
   Everything above is the shared base sheet; everything below was
   moved out of each page's inline <style> block, one banner-labeled
   section per page, in alphabetical order:
     - PAGE: account.html
     - PAGE: admin.html
     - PAGE: ballot.html
     - PAGE: chatrooms.html
     - PAGE: explore.html
     - PAGE: following.html
     - PAGE: friends.html
     - PAGE: glossary.html
     - PAGE: legislation-details.html
     - PAGE: legislation.html
     - PAGE: notpremium.html
     - PAGE: political-profile.html
     - PAGE: politician-details.html
     - PAGE: politicians.html
     - PAGE: premium.html
     - PAGE: races.html
     - PAGE: todays-vote.html
     - PAGE: voting-aid.html
   Page sections come after the base sheet on purpose: a page rule
   that overrides a base rule of equal specificity must stay later
   in the cascade, exactly as the inline blocks were.
   login.html keeps its own inline styles (standalone page; it does
   not link this sheet).
   #################################################################### */

/* ================================================================
   PAGE: account.html   (moved from its inline <style> block)
   NOTE: selectors touching .btn-danger, :where(body.page-account) .party-badge, :where(body.page-account) .stat-label, .stat-num are scoped
   :where(body.page-account) — same class names are styled differently
   on another page; :where() adds no specificity.
   ================================================================ */

/* ── Profile Banner ── */
:where(body.page-account) .profile-banner {
  height: 120px;
  background: linear-gradient(135deg,#072247 0%,#0b2f63 40%,#1a4a8a 70%,#800000 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

:where(body.page-account) .profile-header-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 4px;
}

:where(body.page-account) .profile-body { padding: 0 24px 20px; }

:where(body.page-account) .profile-avatar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -36px;
  margin-bottom: 12px;
}

:where(body.page-account) .profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg,#3b5fa0,#0b2f63);
  border: 4px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: var(--white);
  letter-spacing: 0.03em; flex-shrink: 0; user-select: none;
  overflow: hidden;
}

:where(body.page-account) .btn-edit-profile {
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  color: var(--text); background: none; border: 1.5px solid var(--border);
  padding: 7px 18px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .btn-edit-profile:hover { background: #f0f2f7; border-color: #b0b8cc; }

:where(body.page-account) .profile-name { font-size: 1.2rem; font-weight: 800; color: var(--text); }
:where(body.page-account) .profile-handle { font-size: 0.875rem; color: var(--muted); margin-bottom: 8px; }

:where(body.page-account) .profile-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; }
:where(body.page-account) .profile-meta-item { display: flex; align-items: center; gap: 4px; }
:where(body.page-account) .profile-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

:where(body.page-account) .profile-stats { display: flex; gap: 24px; padding-top: 14px; border-top: 1px solid var(--border); }
:where(body.page-account) .profile-stat  { display: flex; flex-direction: column; gap: 1px; }
:where(body.page-account) .stat-num   { font-size: 1rem; font-weight: 800; color: var(--text); }
:where(body.page-account) .stat-label { font-size: 0.75rem; color: var(--muted); font-weight: 500; }

/* ── Profile Tabs ── */
:where(body.page-account) .profile-tabs {
  display: flex; background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky; top: 0; z-index: 10;
}
:where(body.page-account) .profile-tab {
  flex: 1; padding: 15px 8px; background: none; border: none;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  color: rgba(255,255,255,0.45); cursor: pointer;
  border-bottom: 3px solid transparent; transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .profile-tab:hover  { color: rgba(255,255,255,0.8); }
:where(body.page-account) .profile-tab.active { color: var(--white); border-bottom-color: var(--accent); }

/* ── Tab Panels ── */
:where(body.page-account) .tab-panel        { display: none; }
/* min-height keeps short tabs (Settings) from collapsing the page into a
   header + dead void on tab-switch (cycle 040, N9). */
:where(body.page-account) .tab-panel.active { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; min-height: 420px; }

/* ── Activity ── */
:where(body.page-account) .activity-item {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start;
}
:where(body.page-account) .activity-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
:where(body.page-account) .activity-icon svg { width: 17px; height: 17px; }
:where(body.page-account) .activity-icon.vote { background: #fee2e2; color: #991b1b; }
:where(body.page-account) .activity-icon.bill { background: #dbeafe; color: #1e40af; }
:where(body.page-account) .activity-icon.join { background: #d1fae5; color: #065f46; }
:where(body.page-account) .activity-icon.chat { background: #ede9fe; color: #5b21b6; }
/* Executive Actions (cycle 073): its own indigo color class, distinct from
   .bill -- the guardrail visually extended (never let a tracked EO's
   ledger entry read as an ordinary Bills row). Same indigo as
   .bill-status.status-order (executive-actions.css), one hue for the
   feature. */
:where(body.page-account) .activity-icon.executive  { background: #e0e7ff; color: #3730a3; }
/* Civic ledger (cycle 071 + 072): every activity-icon color carries an
   explicit dark value in the SAME translucent-rgba-bg + light-tint-text
   idiom (the four above predate the 071 rule -- cycle 072 closed the gap
   rather than leaving them as pastel discs on a dark card). milestone
   reuses the app's established amber "notable" semantic verbatim
   (.bill-vsoon-tag, cycle 070). */
:where(body.page-account) .activity-icon.politician { background: #ccfbf1; color: #115e59; }
:where(body.page-account) .activity-icon.race       { background: #fed7aa; color: #9a3412; }
:where(body.page-account) .activity-icon.milestone  { background: #fef3c7; color: #92400e; }
[data-theme="dark"] :where(body.page-account) .activity-icon.vote       { background: rgba(248,113,113,0.18); color: #fca5a5; }
[data-theme="dark"] :where(body.page-account) .activity-icon.bill       { background: rgba(96,165,250,0.18); color: #93c5fd; }
[data-theme="dark"] :where(body.page-account) .activity-icon.join       { background: rgba(52,211,153,0.18); color: #6ee7b7; }
[data-theme="dark"] :where(body.page-account) .activity-icon.chat       { background: rgba(167,139,250,0.18); color: #c4b5fd; }
[data-theme="dark"] :where(body.page-account) .activity-icon.politician { background: rgba(45,212,191,0.18); color: #5eead4; }
[data-theme="dark"] :where(body.page-account) .activity-icon.race       { background: rgba(251,146,60,0.18); color: #fdba74; }
[data-theme="dark"] :where(body.page-account) .activity-icon.milestone  { background: rgba(245,158,11,0.18); color: #fcd34d; }
[data-theme="dark"] :where(body.page-account) .activity-icon.executive  { background: rgba(99,102,241,0.22); color: #a5b4fc; }
:where(body.page-account) .activity-content { flex: 1; min-width: 0; }
:where(body.page-account) .activity-title  { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
:where(body.page-account) .activity-detail { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
/* Time capsule (cycle 093): a quiet, reflective note under a re-run vote — muted,
   a hair smaller, with a soft accent rule so it reads as an aside, not a metric. */
:where(body.page-account) .activity-capsule {
  font-size: 0.76rem; color: var(--muted); line-height: 1.4; font-style: italic;
  margin-top: 4px; padding-left: 9px; border-left: 2px solid var(--border);
}
/* Month-in-review header (cycle 094): a quiet divider before each month's entries
   with that month's rollup. Calm — a small uppercase label + a muted summary, not
   a loud metric card. */
:where(body.page-account) .activity-month-head {
  /* cycle 109: kicker typography (no ::after accent rule -- this is a flex
     row with a second piece of content alongside the label; a pseudo-
     element would become a stray third flex item under space-between). */
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 18px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
  font-size: var(--type-caption); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--card-text);
}
:where(body.page-account) .activity-month-head:first-child { margin-top: 2px; }
:where(body.page-account) .activity-month-sum {
  font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.75rem;
}
:where(body.page-account) .activity-time   { font-size: 0.75rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* Milestone row modifier: a quiet amber left-edge stripe, calm not loud --
   celebrates without shouting (no confetti, no fire). */
:where(body.page-account) .activity-item.activity-milestone {
  border-left: 3px solid #f59e0b;
  padding-left: 17px;
}

/* Same-day burst rows: a plain-button summary that expands to the item
   list on tap (the admin .poll-expand toggle-a-class pattern, cycle 060 --
   the SHAPE differs since this content is a link list, not poll results). */
:where(body.page-account) .activity-item.activity-burst { cursor: pointer; }
:where(body.page-account) .activity-burst-chevron {
  font-size: 0.7rem; color: var(--muted); margin-left: 6px; transition: transform var(--dur-micro) var(--ease-stately);
  display: inline-block;
}
:where(body.page-account) .activity-item.activity-burst.open .activity-burst-chevron { transform: rotate(180deg); }
:where(body.page-account) .activity-burst-items {
  display: none; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
:where(body.page-account) .activity-item.activity-burst.open .activity-burst-items { display: flex; flex-direction: column; gap: 6px; }
:where(body.page-account) .activity-burst-item { font-size: 0.8rem; }
:where(body.page-account) .activity-burst-item a { color: var(--accent-blue); text-decoration: none; }
:where(body.page-account) .activity-burst-item a:hover { text-decoration: underline; }

/* Fingerprint header: "Where your attention goes" atop the panel. */
:where(body.page-account) .fingerprint-box {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 20px; margin-bottom: 4px;
}
:where(body.page-account) .fingerprint-empty { font-size: 0.85rem; color: var(--muted); }

/* Empty state (new account): the Joined row + one calm line, no filler. */
:where(body.page-account) .activity-empty-line {
  font-size: 0.85rem; color: var(--muted); text-align: center; padding: 18px 0 4px;
}

/* "Show more" pagination footer. */
:where(body.page-account) .activity-show-more {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--card-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
:where(body.page-account) .activity-show-more:hover { border-color: var(--accent); color: var(--accent); }

/* Receipts: download-your-civic-record control (cycle 077). Colour comes from
   theme tokens; the buttons reuse .activity-show-more above. */
:where(body.page-account) .record-export { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
:where(body.page-account) .record-export-note { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
:where(body.page-account) .record-export-btns { display: flex; gap: 8px; }
:where(body.page-account) .record-export-btns .activity-show-more { margin-top: 0; }
:where(body.page-account) .record-export-status { font-size: 0.78rem; color: var(--muted); margin-top: 8px; min-height: 1em; }
:where(body.page-account) .record-export-status.err { color: var(--accent); }

/* ── Vote History ── */
:where(body.page-account) .vote-history-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
:where(body.page-account) .vote-history-header { background: var(--accent); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
:where(body.page-account) .vote-history-header span { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); }
:where(body.page-account) .vote-history-body { padding: 18px 20px; }
:where(body.page-account) .vote-question { font-size: 0.96rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
:where(body.page-account) .vote-chosen { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff5f5; border: 1.5px solid #f5c0c0; border-radius: var(--radius-sm); }
:where(body.page-account) .vote-chosen-dot  { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
:where(body.page-account) .vote-chosen-name { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
:where(body.page-account) .vote-chosen-label { font-size: 0.75rem; color: var(--muted); margin-left: auto; }
:where(body.page-account) .no-votes-msg { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 32px 20px; text-align: center; color: var(--muted); font-size: 0.875rem; }
:where(body.page-account) .no-votes-msg a { color: #5b9bd5; text-decoration: none; font-weight: 600; }

/* ── Political Profile Card ── */
:where(body.page-account) .political-profile-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
:where(body.page-account) .political-profile-empty { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }
:where(body.page-account) .political-profile-lean {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent);
  background: #fff5f5;
  border: 1px solid #f5c0c0;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
}
:where(body.page-account) .political-profile-highlights { display: flex; flex-direction: column; gap: 0; }
:where(body.page-account) .political-highlight-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
:where(body.page-account) .political-highlight-row:last-child { border-bottom: none; padding-bottom: 0; }
:where(body.page-account) .political-highlight-cat { font-weight: 600; color: var(--text); flex-shrink: 0; }
:where(body.page-account) .political-highlight-val { color: var(--muted); text-align: right; line-height: 1.35; }
:where(body.page-account) .btn-political-quiz {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.875rem; font-weight: 700;
  color: var(--white); background: var(--accent); border: none;
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}
:where(body.page-account) .btn-political-quiz:hover { background: var(--accent-dk); transform: translateY(-1px); }

/* ── Settings Cards ── */
:where(body.page-account) .settings-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
:where(body.page-account) .settings-section-title {
  /* cycle 109: kicker typography (no ::after accent rule -- flex row with
     content on both ends; see .activity-month-head's identical reasoning). */
  font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  padding: 14px 22px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
:where(body.page-account) .settings-body   { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
/* Sub-headings WITHIN a single settings-card (cycle 053, pet-peeve #8) — one
   level below .settings-section-title, so a multi-topic card (Profile
   Information: Account / Location & districts / About you) reads as three
   scannable groups instead of one interleaved field list. */
:where(body.page-account) .settings-group-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); margin-top: 6px;
}
:where(body.page-account) .settings-group-title:first-child { margin-top: 0; }
:where(body.page-account) .settings-field  { display: flex; flex-direction: column; gap: 5px; }
:where(body.page-account) .settings-field label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
:where(body.page-account) .settings-field input {
  width: 100%; height: 40px; padding: 0 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.875rem; color: var(--text);
  background: var(--surface-sunken); outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately), background var(--dur-press-out) var(--ease-stately);
}
:where(body.page-account) .settings-field input:focus { border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 3px rgba(128,0,0,0.08); }
:where(body.page-account) .settings-hint { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
:where(body.page-account) .settings-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-top: 1px solid var(--border); gap: 12px;
}
:where(body.page-account) .settings-msg { font-size: 0.8rem; font-weight: 500; color: #065f46; visibility: hidden; }
:where(body.page-account) .settings-msg.visible { visibility: visible; }
:where(body.page-account) .settings-msg.error   { color: #991b1b; }
:where(body.page-account) .btn-save {
  font-family: inherit; font-size: 0.875rem; font-weight: 700;
  color: var(--white); background: var(--accent); border: none;
  padding: 9px 24px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately); white-space: nowrap;
}
:where(body.page-account) .btn-save:hover { background: var(--accent-dk); transform: translateY(-1px); }

/* ── Password toggle button ── */
:where(body.page-account) .btn-pw-toggle {
  font-family: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--accent); background: none; border: 1.5px solid #f5c0c0;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .btn-pw-toggle:hover { background: #fff5f5; border-color: var(--accent); }

/* ── Collapsible pw body ── */
:where(body.page-account) .pw-form-body   { display: none; flex-direction: column; gap: 14px; padding: 18px 22px; }
:where(body.page-account) .pw-form-footer { display: none; align-items: center; justify-content: space-between; padding: 12px 22px; border-top: 1px solid var(--border); gap: 12px; }
:where(body.page-account) .pw-form-body.open   { display: flex; }
:where(body.page-account) .pw-form-footer.open { display: flex; }

/* ── Profile Picture Picker ── */
:where(body.page-account) .pfp-preview-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px 14px;
}
:where(body.page-account) .pfp-large {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg,#3b5fa0,#0b2f63);
  border: 3px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: var(--white);
  flex-shrink: 0; overflow: hidden;
}
:where(body.page-account) .pfp-preview-label { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
:where(body.page-account) .pfp-preview-label strong { color: var(--text); display: block; font-size: 0.92rem; margin-bottom: 2px; }

:where(body.page-account) .flag-sections { padding: 0 22px 18px; display: flex; flex-direction: column; gap: 18px; }

:where(body.page-account) .flag-section-label {
  /* cycle 109 addendum: restyled to the kicker treatment -- .flag-sections
     stacks vertically (flex-direction:column), so this label is never a
     flex-row cohabitant; safe for ::after. */
  font-size: var(--type-caption); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin-bottom: 10px;
}
:where(body.page-account) .flag-section-label::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

:where(body.page-account) .flag-grid { display: flex; flex-wrap: wrap; gap: 8px; }

:where(body.page-account) .flag-opt {
  width: 46px; height: 46px; border-radius: 50%;
  border: none;
  cursor: pointer; padding: 0; background: none;
  transition: border-color var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
  overflow: visible; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
:where(body.page-account) .flag-opt:hover    { transform: scale(1.1); }
:where(body.page-account) .flag-opt.selected { box-shadow: 0 0 0 3px rgba(245,200,66,0.7); transform: scale(1.05); }
:where(body.page-account) .flag-opt[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: var(--white);
  font-size: 0.7rem; white-space: nowrap; padding: 3px 7px; border-radius: 4px;
  pointer-events: none; opacity: 0;
  /* cycle 110 sweep: this was `transition: opacity 0s` -- a deliberate
     instant show/hide, not a motion transition to re-token. Removed
     rather than forced onto a token (0s + a token would add a fade that
     never existed; value-preserving means staying instant here). */
}
:where(body.page-account) .flag-opt[data-tooltip]:hover::after { opacity: 1; }

:where(body.page-account) .flag-inner {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.5rem; line-height: 1;
}

:where(body.page-account) .flag-abbr {
  font-size: 0.55rem; font-weight: 900; color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  letter-spacing: 0.03em; line-height: 1;
}

/* ── Poll Display Mode ── */
:where(body.page-account) .settings-section-body { padding: 14px 0 0; }
:where(body.page-account) .settings-label { font-size: 0.78rem; color: var(--muted); padding: 0 22px 10px; display: block; }
:where(body.page-account) .display-mode-btns { display: flex; gap: 10px; padding: 0 22px 18px; }
:where(body.page-account) .display-mode-btn {
  flex: 1; border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 6px 10px; background: none; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately); display: flex;
  flex-direction: column; align-items: center; gap: 8px; font-size: 0.78rem;
  color: var(--card-text); font-weight: 600;
}
:where(body.page-account) .display-mode-btn.active { border-color: #f5c842; }
:where(body.page-account) .display-mode-preview {
  --pv-rep: rgb(135,46,39); --pv-dem: rgb(53,124,200); --pv-other: #8b99b5;
  --pv-pct: #1a2035; --pv-bg: #f4f6fb; --pv-track: rgba(0,0,0,0.10); --pv-simple: #4a6490;
  width: 100%; display: flex; flex-direction: column; gap: 5px;
  background: var(--pv-bg); border-radius: 4px; padding: 6px 5px;
}
[data-theme="dark"] :where(body.page-account) .display-mode-preview {
  --pv-rep: rgb(135,46,39); --pv-dem: rgb(35,90,149); --pv-other: #b0b8c8;
  --pv-pct: #ffffff; --pv-bg: #0d1e36; --pv-track: rgba(255,255,255,0.10); --pv-simple: #6b7a99;
}
[data-theme="dark"] :where(body.page-account) .display-mode-preview .dm-r { color: #f4856e; }
[data-theme="dark"] :where(body.page-account) .display-mode-preview .dm-d { color: #7eb5f5; }
:where(body.page-account) .dm-option-group { display: flex; flex-direction: column; gap: 2px; }
:where(body.page-account) .dm-text-row { display: flex; justify-content: space-between; align-items: center; }
:where(body.page-account) .dm-party-pcts { display: flex; gap: 3px; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
:where(body.page-account) .dm-d { color: var(--pv-dem); }
:where(body.page-account) .dm-r { color: var(--pv-rep); }
:where(body.page-account) .dm-bar {
  position: relative; width: 100%; height: 9px;
  border-radius: 999px; background: var(--pv-track); overflow: hidden;
  border: 1px solid #a0a8b4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
:where(body.page-account) .dm-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.07)       100%
  );
  pointer-events: none; z-index: 1;
}
:where(body.page-account) .dm-fill         { height: 100%; border-radius: 999px; background: linear-gradient(to right, var(--pv-rep) 55%, var(--pv-dem) 55% 100%); }
:where(body.page-account) .dm-fill-rep     { height: 100%; border-radius: 999px; background: linear-gradient(to right, var(--pv-rep) 44%, var(--pv-dem) 44% 100%); }
:where(body.page-account) .dm-pct { font-size: 0.7rem; font-weight: 700; color: var(--pv-pct); flex-shrink: 0; }

/* ── Appearance / Theme ── */
:where(body.page-account) .theme-cards { display: flex; gap: 10px; padding: 0 22px 18px; }
:where(body.page-account) .theme-card {
  flex: 1; border: 2px solid #b0b8cc; border-radius: var(--radius-sm);
  padding: 8px 6px 10px; background: none; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately); display: flex;
  flex-direction: column; gap: 7px; align-items: center;
}
:where(body.page-account) .theme-card:hover    { border-color: #8a9ab8; }
:where(body.page-account) .theme-card.active   { border-color: #f5c842; }
:where(body.page-account) .theme-card span { font-size: 0.75rem; font-weight: 700; color: #8a9ab8; }
/* ── Party badge ── */
:where(body.page-account) .profile-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
:where(body.page-account) .profile-party-badge { font-size: 0.85rem; font-weight: 800; flex-shrink: 0; }
:where(body.page-account) .profile-party-badge.rep   { color: #dc2626; }
:where(body.page-account) .profile-party-badge.dem   { color: #2563eb; }
:where(body.page-account) .profile-party-badge.ind   { color: var(--ink-muted); }
:where(body.page-account) .profile-party-badge.other { color: #7c3aed; }
:where(body.page-account) .theme-preview { width: 100%; height: 52px; border-radius: 6px; overflow: hidden; display: flex; }
:where(body.page-account) .tp-sb   { width: 28%; height: 100%; }
:where(body.page-account) .tp-main { flex: 1; padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; }
:where(body.page-account) .tp-card { border-radius: 3px; height: 10px; }
:where(body.page-account) .tp-card2 { border-radius: 3px; height: 7px; opacity: 0.65; }

/* Dark preview */
:where(body.page-account) .tp-dark            { background: #0b2f63; }
:where(body.page-account) .tp-dark .tp-sb     { background: #072247; }
:where(body.page-account) .tp-dark .tp-card   { background: var(--white); }
:where(body.page-account) .tp-dark .tp-card2  { background: var(--white); }

/* Light preview */
:where(body.page-account) .tp-light           { background: #e8ecf4; }
:where(body.page-account) .tp-light .tp-sb    { background: var(--white); border-right: 1px solid var(--hairline-default); }
:where(body.page-account) .tp-light .tp-card  { background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
:where(body.page-account) .tp-light .tp-card2 { background: #e0e5f0; }

/* Dark preview (deep navy) */
:where(body.page-account) .tp-dark-deep         { background: #05101f; }
:where(body.page-account) .tp-dark-deep .tp-sb  { background: #091525; border-right: 1px solid rgba(255,255,255,0.08); }
:where(body.page-account) .tp-dark-deep .tp-card  { background: var(--white); }
:where(body.page-account) .tp-dark-deep .tp-card2 { background: rgba(255,255,255,0.3); }

/* America preview (original navy) */
:where(body.page-account) .tp-america         { background: #0b2f63; }
:where(body.page-account) .tp-america .tp-sb  { background: #072247; border-right: 1px solid rgba(255,255,255,0.08); }
:where(body.page-account) .tp-america .tp-card  { background: var(--white); }
:where(body.page-account) .tp-america .tp-card2 { background: rgba(255,255,255,0.3); }

/* ── Select fields ── */
:where(body.page-account) .settings-field select {
  width: 100%; height: 40px; padding: 0 36px 0 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.875rem; color: var(--text);
  background: var(--surface-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px 8px;
  -webkit-appearance: none; appearance: none; outline: none; cursor: pointer;
  transition: border-color var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately), background-color var(--dur-press-out) var(--ease-stately);
}
:where(body.page-account) .settings-field select:focus {
  border-color: var(--accent); background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
}

/* ── Party picker ── */
:where(body.page-account) .party-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }

:where(body.page-account) .party-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px 10px; border: 2px solid var(--border);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
  font-family: inherit; transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .party-opt:hover { background: #f5f7ff; border-color: #b0b8cc; }

:where(body.page-account) .party-badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 900; flex-shrink: 0;
}
:where(body.page-account) .party-opt .party-label {
  font-size: 0.68rem; font-weight: 700; color: var(--text);
  text-align: center; line-height: 1.25;
}

:where(body.page-account) .party-opt[data-party="republican"].active { border-color: #dc2626; background: #fef2f2; }
:where(body.page-account) .party-opt[data-party="democrat"].active   { border-color: #2563eb; background: #eff6ff; }
:where(body.page-account) .party-opt[data-party="undecided"].active  { border-color: var(--ink-muted); background: #f5f6fb; }
:where(body.page-account) .party-opt[data-party="other"].active      { border-color: #7c3aed; background: #f5f3ff; }

/* ── Pet picker ── */
:where(body.page-account) .pet-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
:where(body.page-account) .pet-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border: 2px solid var(--border);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
  font-family: inherit; transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .pet-opt:hover { background: #f5f7ff; border-color: #b0b8cc; }
:where(body.page-account) .pet-opt.active { border-color: var(--accent); background: #fff5f5; }
:where(body.page-account) .pet-emoji { font-size: 1.6rem; line-height: 1; }
:where(body.page-account) .pet-opt .pet-label { font-size: 0.68rem; font-weight: 700; color: var(--text); text-align: center; }

/* ── Dark mode overrides ── */
[data-theme="dark"] :where(body.page-account) .pet-opt .pet-label { color: rgba(255,255,255,0.82); }
[data-theme="dark"] :where(body.page-account) .pet-opt { border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] :where(body.page-account) .pet-opt:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.25); }
[data-theme="dark"] :where(body.page-account) .pet-opt.active { background: rgba(128,0,0,0.25); border-color: rgba(200,40,40,0.65); }
[data-theme="dark"] :where(body.page-account) #set-pet-other {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}
[data-theme="dark"] :where(body.page-account) .pfp-preview-label { color: rgba(255,255,255,0.55); }
[data-theme="dark"] :where(body.page-account) .pfp-preview-label strong { color: rgba(255,255,255,0.88); }
[data-theme="light"] :where(body.page-account) .pet-opt { background: var(--white); }
[data-theme="america"] :where(body.page-account) .pet-opt .pet-label { color: var(--ink); }
[data-theme="america"] :where(body.page-account) .pet-opt { border-color: #dde3ef; background: var(--white); }
[data-theme="america"] :where(body.page-account) .pet-opt:hover { background: #f5f7ff; border-color: #b0b8cc; }
[data-theme="america"] :where(body.page-account) .pfp-preview-label { color: var(--ink-muted); }
[data-theme="america"] :where(body.page-account) .pfp-preview-label strong { color: var(--ink); }

/* ── Danger Zone ── */
:where(body.page-account) .danger-zone { border: 1.5px solid #fca5a5; border-radius: var(--radius); overflow: hidden; }
:where(body.page-account) .danger-zone-title { background: #fee2e2; padding: 12px 22px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #991b1b; }
:where(body.page-account) .danger-zone-body  { background: var(--white); padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:where(body.page-account) .danger-zone-body p { font-size: 0.855rem; color: var(--text); line-height: 1.5; }
:where(body.page-account) .danger-zone-body p span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
:where(body.page-account) .btn-danger {
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  color: #991b1b; background: none; border: 1.5px solid #fca5a5;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-account) .btn-danger:hover { background: #fee2e2; border-color: #f87171; }


/* ================================================================
   PAGE: admin.html   (moved from its inline <style> block)
   NOTE: selectors touching .stat-card, :where(body.page-admin) .stat-label, .stat-num are scoped
   :where(body.page-admin) — same class names are styled differently
   on another page; :where() adds no specificity.
   ================================================================ */

/* ── Admin layout overrides ──
   minmax(0, :where(body.page-admin) 1fr) is critical: with plain 1fr, :where(body.page-admin) CSS Grid items default to
   min-width:auto so wide content (the 4-card stats strip, :where(body.page-admin) the form rows
   with side-by-side selects) blows the column out and crops the right
   edge. Same fix we apply to the .layout grid elsewhere. */
:where(body.page-admin) .admin-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  align-items: start;
}

:where(body.page-admin) .admin-main {
  background: var(--navy);
  padding: 0 24px 60px;
  min-height: 100vh;
  border-left: 1px solid rgba(255,255,255,0.07);
  min-width: 0;
}

:where(body.page-admin) .admin-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

:where(body.page-admin) .admin-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
}

:where(body.page-admin) .admin-subtitle {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
}

:where(body.page-admin) .today-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  padding: 5px 12px;
  border-radius: 999px;
}

:where(body.page-admin) .today-badge strong {
  color: var(--white);
}

/* ── Form card ── */
:where(body.page-admin) .form-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

:where(body.page-admin) .form-card-header {
  background: var(--accent);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(body.page-admin) .form-card-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--white);
}

:where(body.page-admin) .form-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:where(body.page-admin) .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

:where(body.page-admin) .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

:where(body.page-admin) .form-field label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--card-text);
  letter-spacing: 0.02em;
}

:where(body.page-admin) .form-field input,
:where(body.page-admin) .form-field select,
:where(body.page-admin) .form-field textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--card-text);
  background: var(--card);
  outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), box-shadow var(--dur-press-out) var(--ease-stately), background var(--dur-press-out) var(--ease-stately);
}

:where(body.page-admin) .form-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

:where(body.page-admin) .form-field input:focus,
:where(body.page-admin) .form-field select:focus,
:where(body.page-admin) .form-field textarea:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
}

:where(body.page-admin) .form-field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
  padding-right: 36px;
  cursor: pointer;
}
/* Cycle 061: the OS-rendered <option> popup doesn't reliably inherit the
   select's own CSS -- a translucent parent background (the dark-theme rule
   below) reads as near-white to the popup, so the inherited light text goes
   invisible. Pin every theme's option colors explicitly rather than trust
   inheritance (the 059b lesson). */
:where(body.page-admin) .form-field select option { color: var(--ink); background: var(--white); }
[data-theme="dark"] :where(body.page-admin) .form-field select option { color: rgba(255,255,255,0.88); background: var(--surface-card); }
[data-theme="america"] :where(body.page-admin) .form-field select option { color: var(--ink); background: var(--white); }

:where(body.page-admin) .form-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Options builder ── */
:where(body.page-admin) .options-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--card-text);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

:where(body.page-admin) .option-row {
  display: grid;
  /* PP4 (cycle 042): the row has SEVEN children (label + Dem/Rep/Other votes
     + write-in + Details + delete) — the old six-column template squeezed
     "Details · N" into 36px and dropped the × into an implicit second row.
     minmax(0,1fr) lets the label input shrink (its intrinsic min caused the
     878>863px overflow); the Details column sizes to its own text. */
  grid-template-columns: minmax(0, 1fr) 64px 64px 64px 36px auto 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Drag-reorder (cycle 060): same visual language as .poll-row-wrapper's
   drag states (opacity fade + insertion-line box-shadow), redeclared under
   its own selector rather than reusing that class outright -- .poll-row-
   wrapper also carries border-radius/overflow:hidden/box-shadow base styles
   that would clip the rich-details editor and add an unwanted card look to
   every option row. */
:where(body.page-admin) .option-row-wrap.is-dragging     { opacity: 0.35; }
:where(body.page-admin) .option-row-wrap.drag-over-top    { box-shadow: 0 -3px 0 var(--accent) !important; }
:where(body.page-admin) .option-row-wrap.drag-over-bottom { box-shadow: 0 3px 0 var(--accent) !important; }

/* Party-vote inputs */
:where(body.page-admin) .option-row input.votes-dem  { border-left: 3px solid var(--accent-blue); }
:where(body.page-admin) .option-row input.votes-rep  { border-left: 3px solid rgb(165, 39, 39); }
:where(body.page-admin) .option-row input.votes-other{ border-left: 3px solid #b0b8c8; }

:where(body.page-admin) .option-row input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.855rem;
  color: var(--card-text);
  background: var(--card);
  outline: none;
  transition: border-color var(--dur-press-out) var(--ease-stately), background var(--dur-press-out) var(--ease-stately);
}

:where(body.page-admin) .option-row input:focus {
  border-color: var(--accent);
  background: var(--card);
}

:where(body.page-admin) .option-row input[type="number"] {
  text-align: center;
}

:where(body.page-admin) .btn-remove-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
  flex-shrink: 0;
}

:where(body.page-admin) .btn-remove-option:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ── Write-in toggle ── */
:where(body.page-admin) .btn-writein-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
  position: relative;
}
:where(body.page-admin) .btn-writein-toggle:hover {
  background: #e8edf8;
  border-color: var(--navy);
  color: var(--navy);
}
:where(body.page-admin) .btn-writein-toggle.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
/* Small tooltip on hover */
:where(body.page-admin) .btn-writein-toggle::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--navy);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .btn-writein-toggle:hover::after { opacity: 1; }

/* Dark theme additions */
[data-theme="dark"] :where(body.page-admin) .btn-writein-toggle { border-color: rgba(255,255,255,0.15); color: var(--ink-faint); }
[data-theme="dark"] :where(body.page-admin) .btn-writein-toggle:hover { background: var(--hairline-default); border-color: var(--ink-faint); color: var(--white); }
[data-theme="dark"] :where(body.page-admin) .btn-writein-toggle.active { background: #3b5bdb; border-color: #3b5bdb; color: var(--white); }

:where(body.page-admin) .btn-add-option {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  background: none;
  border: 1.5px dashed var(--border);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  margin-top: 2px;
}

:where(body.page-admin) .btn-add-option:hover {
  border-color: var(--navy);
  background: #f5f7ff;
}

/* ── Form footer ── */
:where(body.page-admin) .form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  gap: 12px;
}

:where(body.page-admin) .form-msg {
  font-size: 0.8rem;
  font-weight: 600;
  color: #065f46;
  display: none;
}

:where(body.page-admin) .form-msg.visible { display: block; }
:where(body.page-admin) .form-msg.error   { color: #991b1b; }

:where(body.page-admin) .btn-create {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: none;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
  white-space: nowrap;
}

:where(body.page-admin) .btn-create:hover { background: var(--accent-dk); transform: translateY(-1px); }

/* ── Poll list ── */
:where(body.page-admin) .section-label {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
  padding: 0 2px;
}
:where(body.page-admin) .section-label::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

:where(body.page-admin) .polls-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(body.page-admin) .poll-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

:where(body.page-admin) .poll-row-index {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  min-width: 24px;
  text-align: center;
}

:where(body.page-admin) .poll-row-index.today-idx {
  color: var(--accent);
}

:where(body.page-admin) .poll-row-info {
  flex: 1;
  min-width: 0;
}

:where(body.page-admin) .poll-row-question {
  /* cycle 109: single-line ellipsis truncation -- safe under a wider serif
     (the container width is fixed either way, ellipsis just triggers a
     touch sooner; re-verified live). */
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--card-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

:where(body.page-admin) .poll-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

:where(body.page-admin) .poll-row-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
}

:where(body.page-admin) .badge-base {
  background: #e8edf8;
  color: var(--navy);
}

:where(body.page-admin) .badge-custom {
  background: #d1fae5;
  color: #065f46;
}

:where(body.page-admin) .badge-today {
  background: var(--accent);
  color: var(--white);
}

/* Poll Drafter row badges (cycle 059b): lane / cadence / undated -- were
   inline hex in the row renderer (no dark values at all), pulled out to
   classes so dark mode can override them like every other badge here. */
:where(body.page-admin) .badge-lane     { background: #f1f5f9; color: #64748b; }
:where(body.page-admin) .badge-cadence  { background: #ccfbf1; color: #0f766e; }
:where(body.page-admin) .badge-undated  { background: #fef3c7; color: #92400e; }

/* "Live in Poll Manager →" link (cycle 059b): was var(--accent, #2563eb) --
   --accent is the maroon brand color, so that read as an off-brand link with
   a dead fallback. --accent-blue is the codebase's actual "this is a link"
   token and is already theme-aware (rgb(53,124,200) light / #7fb0ee dark). */
:where(body.page-admin) .poll-row-link {
  font-size: 0.75rem;
  color: var(--accent-blue);
  text-decoration: none;
}
:where(body.page-admin) .poll-row-link:hover { text-decoration: underline; }

:where(body.page-admin) .poll-row-opts {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── Rich option editor (blanks + follow-ups) ── */
:where(body.page-admin) .btn-rich-toggle {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid var(--border, #d6dbe8);
  background: none;
  color: var(--muted, var(--ink-muted));
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
:where(body.page-admin) .btn-rich-toggle.active { border-color: #d4a017; color: #b08800; }
:where(body.page-admin) .option-rich-editor {
  display: none;
  margin: 4px 0 12px 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--border, #d6dbe8);
  background: rgba(0,0,0,0.025);
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
}
:where(body.page-admin) .option-rich-editor.open { display: block; }
:where(body.page-admin) .rich-section-label {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted, var(--ink-muted));
  margin: 10px 0 6px;
}
:where(body.page-admin) .rich-section-label::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-admin) .rich-section-label:first-child { margin-top: 0; }
:where(body.page-admin) .rich-hint { font-size: 0.72rem; color: var(--muted, var(--ink-muted)); margin: 2px 0 8px; line-height: 1.5; }
:where(body.page-admin) .blank-config-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
:where(body.page-admin) .blank-config-row code {
  font-weight: 700;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 2px 7px;
  min-width: 60px;
  text-align: center;
}
:where(body.page-admin) .blank-config-row input {
  font-family: inherit;
  font-size: 0.76rem;
  border: 1px solid var(--border, #d6dbe8);
  border-radius: 6px;
  padding: 5px 8px;
  width: 78px;
}
:where(body.page-admin) .followup-block {
  border: 1px solid var(--border, #d6dbe8);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--card, var(--white));
}
:where(body.page-admin) .followup-block-head { display: flex; gap: 8px; margin-bottom: 6px; }
:where(body.page-admin) .followup-block-head input[data-role="fu-label"] {
  flex: 1;
  font-family: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--border, #d6dbe8);
  border-radius: 6px;
  padding: 5px 8px;
}
:where(body.page-admin) .followup-block-head select {
  font-family: inherit;
  font-size: 0.76rem;
  border: 1px solid var(--border, #d6dbe8);
  border-radius: 6px;
  padding: 4px 6px;
  /* Cycle 061: this select had no background/color of its own, so it fell
     through to body's default text color on a transparent background --
     dark-on-dark in the dark theme. --card/--card-text already flip per
     theme (see .poll-edit-form above), so anchoring to them fixes the box
     everywhere at once. */
  background: var(--card, var(--white));
  color: var(--card-text, var(--ink));
}
/* Same OS-popup gap as .form-field select -- pin <option> explicitly too. */
:where(body.page-admin) .followup-block-head select option { color: var(--ink); background: var(--white); }
[data-theme="dark"] :where(body.page-admin) .followup-block-head select option { color: rgba(255,255,255,0.88); background: var(--surface-card); }
[data-theme="america"] :where(body.page-admin) .followup-block-head select option { color: var(--ink); background: var(--white); }
:where(body.page-admin) .followup-block textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--border, #d6dbe8);
  border-radius: 6px;
  padding: 6px 8px;
  min-height: 64px;
  resize: vertical;
}
:where(body.page-admin) .btn-add-followup {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1.5px dashed var(--border, #d6dbe8);
  background: none;
  color: var(--muted, var(--ink-muted));
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
:where(body.page-admin) .btn-delete-poll {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #991b1b;
  background: none;
  border: 1.5px solid #fca5a5;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  flex-shrink: 0;
}

:where(body.page-admin) .btn-delete-poll:hover { background: #fee2e2; border-color: #f87171; }

:where(body.page-admin) .poll-row-today-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Expanded options panel ── */
:where(body.page-admin) .poll-expand {
  display: none;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
}
:where(body.page-admin) .poll-expand.open { display: block; }
:where(body.page-admin) .expand-opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
:where(body.page-admin) .expand-opt-label { font-size: 0.78rem; font-weight: 600; color: var(--card-text); min-width: 170px; flex-shrink: 0; }
:where(body.page-admin) .expand-opt-bar-wrap { flex: 1; background: var(--bar-bg); border-radius: 999px; height: 8px; overflow: hidden; }
:where(body.page-admin) .expand-opt-bar { height: 100%; border-radius: 999px; background: var(--accent); transition: width var(--dur-ceremony) var(--ease-stately); }
:where(body.page-admin) .expand-opt-pct { font-size: 0.72rem; font-weight: 700; color: var(--muted); min-width: 36px; text-align: right; }
:where(body.page-admin) .expand-opt-votes { font-size: 0.7rem; color: var(--muted); min-width: 60px; text-align: right; }

/* ── Edit form (inline) ── */
:where(body.page-admin) .poll-edit-form {
  display: none;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
}
:where(body.page-admin) .poll-edit-form.open { display: block; }

/* ── Action buttons on poll rows ── */
:where(body.page-admin) .poll-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; flex-wrap: nowrap; }
:where(body.page-admin) .btn-row-action {
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid; white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
}
:where(body.page-admin) .btn-expand  { color: var(--navy);  border-color: var(--border); background: none; }
:where(body.page-admin) .btn-expand:hover  { background: #eef1f8; }
:where(body.page-admin) .btn-expand.active { background: #e8edf8; border-color: var(--navy); }
:where(body.page-admin) .btn-edit    { color: #1e40af; border-color: #bfdbfe; background: none; }
:where(body.page-admin) .btn-edit:hover    { background: #eff6ff; }
/* Navy/blue action text disappears on dark cards — america's poll
   rows are light, :where(body.page-admin) so only the dark theme needs the swap. */
[data-theme="dark"] :where(body.page-admin) .btn-expand {
  color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25);
}
[data-theme="dark"] :where(body.page-admin) .btn-expand:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] :where(body.page-admin) .btn-expand.active { background: rgba(255,255,255,0.12); border-color: var(--ink-muted); }
[data-theme="dark"] :where(body.page-admin) .btn-edit {
  color: #9db8f5; border-color: rgba(157,184,245,0.4);
}
[data-theme="dark"] :where(body.page-admin) .btn-edit:hover { background: rgba(157,184,245,0.1); }
:where(body.page-admin) .btn-split   { color: #6d28d9; border-color: #ddd6fe; background: none; }
:where(body.page-admin) .btn-split:hover   { background: #f5f3ff; }
:where(body.page-admin) .btn-rerun   { color: #0f766e; border-color: #99f6e4; background: none; }
:where(body.page-admin) .btn-rerun:hover   { background: #f0fdfa; }
[data-theme="dark"] :where(body.page-admin) .btn-rerun { color: #5eead4; border-color: rgba(94,234,212,0.4); }
[data-theme="dark"] :where(body.page-admin) .btn-rerun:hover { background: rgba(94,234,212,0.1); }
:where(body.page-admin) .btn-delete-poll   { color: #991b1b; border-color: #fca5a5; background: none; }
:where(body.page-admin) .btn-delete-poll:hover { background: #fee2e2; }
:where(body.page-admin) .lock-icon { font-size: 0.75rem; color: var(--muted); }

/* Dark theme */
[data-theme="dark"] :where(body.page-admin) .form-card,
[data-theme="dark"] :where(body.page-admin) .poll-row           { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-admin) .poll-expand,
[data-theme="dark"] :where(body.page-admin) .poll-edit-form     { background: #0f1e35; border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] :where(body.page-admin) .form-field label,
[data-theme="dark"] :where(body.page-admin) .options-label      { color: rgba(255,255,255,0.88); }
[data-theme="dark"] :where(body.page-admin) .form-field input,
[data-theme="dark"] :where(body.page-admin) .form-field select,
[data-theme="dark"] :where(body.page-admin) .form-field textarea,
[data-theme="dark"] :where(body.page-admin) .option-row input   {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--white);
}
[data-theme="dark"] :where(body.page-admin) .form-field input:focus,
[data-theme="dark"] :where(body.page-admin) .form-field select:focus,
[data-theme="dark"] :where(body.page-admin) .form-field textarea:focus,
[data-theme="dark"] :where(body.page-admin) .option-row input:focus {
  background: rgba(255,255,255,0.11);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,0,0,0.18);
}
[data-theme="dark"] :where(body.page-admin) .form-footer        { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] :where(body.page-admin) .btn-add-option     { color: var(--ink-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] :where(body.page-admin) .btn-add-option:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.3); color: var(--white); }
[data-theme="dark"] :where(body.page-admin) .btn-remove-option  { border-color: rgba(255,255,255,0.15); color: var(--ink-faint); }
[data-theme="dark"] :where(body.page-admin) .poll-row-question  { color: var(--ink); }
[data-theme="dark"] :where(body.page-admin) .poll-row-opts,
[data-theme="dark"] :where(body.page-admin) .poll-row-meta      { color: rgba(255,255,255,0.42); }
[data-theme="dark"] :where(body.page-admin) .badge-base         { background: var(--hairline-default); color: var(--ink-secondary); }
[data-theme="dark"] :where(body.page-admin) .badge-lane         { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
[data-theme="dark"] :where(body.page-admin) .badge-cadence      { background: rgba(15,118,110,0.3); color: #5eead4; }
[data-theme="dark"] :where(body.page-admin) .badge-undated      { background: rgba(217,119,6,0.28); color: #fbbf24; }
[data-theme="dark"] :where(body.page-admin) .admin-main         { background: var(--surface-raised); }
[data-theme="dark"] :where(body.page-admin) .admin-header       { background: var(--surface-raised); border-color: var(--hairline-default); }
[data-theme="dark"] :where(body.page-admin) .form-hint          { color: rgba(255,255,255,0.38); }

/* Light theme */
[data-theme="light"] :where(body.page-admin) .admin-main        { background: #f0f4fa; }
[data-theme="light"] :where(body.page-admin) .admin-header      { background: #f0f4fa; }

:where(body.page-admin) .admin-feed-tabs { margin: 0 -24px 20px; padding: 0 24px; }
:where(body.page-admin) .admin-tab-panel { display: none; }
:where(body.page-admin) .admin-tab-panel.active { display: block; }

:where(body.page-admin) .feedback-list { display: flex; flex-direction: column; gap: 10px; }
:where(body.page-admin) .feedback-item {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
}
:where(body.page-admin) .feedback-item-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
:where(body.page-admin) .feedback-item-user { font-size: 0.875rem; font-weight: 700; color: var(--card-text); }
:where(body.page-admin) .feedback-item-meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
:where(body.page-admin) .feedback-item-cat {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent);
  background: #fff5f5; border: 1px solid #f5c0c0;
  padding: 3px 8px; border-radius: 999px;
}
:where(body.page-admin) .feedback-item-msg { font-size: 0.875rem; color: var(--card-text); line-height: 1.55; white-space: pre-wrap; }
:where(body.page-admin) .feedback-empty {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 40px 24px; text-align: center; color: var(--muted); font-size: 0.875rem;
}

/* ── Drag-and-drop ── */
:where(body.page-admin) .poll-drag-handle {
  cursor: grab; color: var(--muted); display: flex; align-items: center;
  padding: 0 8px 0 0; flex-shrink: 0; opacity: 0.35;
  transition: opacity var(--dur-micro) var(--ease-stately); user-select: none;
}
:where(body.page-admin) .poll-drag-handle:hover { opacity: 0.7; }
:where(body.page-admin) .poll-row-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
:where(body.page-admin) .poll-row-wrapper.is-dragging { opacity: 0.35; }
:where(body.page-admin) .poll-row-wrapper.drag-over-top    { box-shadow: 0 -3px 0 var(--accent), var(--shadow-sm) !important; }
:where(body.page-admin) .poll-row-wrapper.drag-over-bottom { box-shadow: 0 3px 0 var(--accent), var(--shadow-sm) !important; }

/* ── Calendar ── */
:where(body.page-admin) .cal-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
:where(body.page-admin) .cal-month-label {
  font-size: 1rem; font-weight: 800; color: var(--white);
  min-width: 160px;
}
:where(body.page-admin) .cal-nav-btn {
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.8);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .cal-nav-btn:hover { background: rgba(255,255,255,0.2); }
:where(body.page-admin) .cal-today-btn {
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  background: var(--accent); border: none; color: var(--white);
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately); margin-left: 4px;
}
:where(body.page-admin) .cal-today-btn:hover { background: var(--accent-dk); }
:where(body.page-admin) .cal-legend { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
:where(body.page-admin) .cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.55); }
:where(body.page-admin) .cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
:where(body.page-admin) .cal-legend-dot.future  { background: #1e3a5f; }
:where(body.page-admin) .cal-legend-dot.today   { background: var(--accent); }
:where(body.page-admin) .cal-legend-dot.past    { background: rgba(255,255,255,0.15); }
:where(body.page-admin) .cal-legend-dot.split   { background: #5b21b6; }
/* Cadence dots (cycle 062, replaces the single .cyclical dot) -- same
   hues/dark values as the chip's own cadence border, reused rather than
   redefined. .singular is the "no accent" state: an outline-only dot,
   distinct from .ghost's dashed outline (projected, not just uncategorized). */
:where(body.page-admin) .cal-legend-dot.cad-monthly    { background: #db2777; }
:where(body.page-admin) .cal-legend-dot.cad-quarterly  { background: #0284c7; }
:where(body.page-admin) .cal-legend-dot.cad-semiannual { background: #d97706; }
:where(body.page-admin) .cal-legend-dot.cad-yearly     { background: #0d9488; }
:where(body.page-admin) .cal-legend-dot.singular { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); }
[data-theme="dark"] :where(body.page-admin) .cal-legend-dot.cad-monthly    { background: #e0399d; }
[data-theme="dark"] :where(body.page-admin) .cal-legend-dot.cad-quarterly  { background: #0f93d4; }
[data-theme="dark"] :where(body.page-admin) .cal-legend-dot.cad-semiannual { background: #c97814; }
[data-theme="dark"] :where(body.page-admin) .cal-legend-dot.cad-yearly    { background: #159e91; }
:where(body.page-admin) .cal-legend-dot.ghost { background: transparent; border: 1.5px dashed rgba(255,255,255,0.4); }

:where(body.page-admin) .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
:where(body.page-admin) .cal-day-header {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
  text-align: center; padding-bottom: 4px;
}
:where(body.page-admin) .cal-cell {
  min-height: 90px; background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .cal-cell.other-month { background: rgba(255,255,255,0.015); }
:where(body.page-admin) .cal-cell.is-today    { background: rgba(128,0,0,0.18); outline: 1.5px solid var(--accent); }
:where(body.page-admin) .cal-cell.drop-hover  { background: rgba(255,255,255,0.12); }
:where(body.page-admin) .cal-cell-num {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.4); line-height: 1;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
:where(body.page-admin) .cal-cell.is-today .cal-cell-num {
  background: var(--accent); color: var(--white);
}
:where(body.page-admin) .cal-cell.other-month .cal-cell-num { color: rgba(255,255,255,0.18); }

/* Year view (cycle 062) -- the ONE new visual family this cycle. A 12-
   mini-month grid, read-only (no drag, v1): each mini-month is a small
   clickable card whose days are tiny cells holding zero or more dots
   (.cal-legend-dot, reused directly -- no new dot-size class) so a whole
   year's spread of occurrences is visible at a glance. Same cell-bg/radius
   language as .cal-cell above, scaled down. */
:where(body.page-admin) .cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
:where(body.page-admin) .cal-mini-month {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .cal-mini-month:hover { background: rgba(255,255,255,0.09); }
:where(body.page-admin) .cal-mini-month-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.55);
  text-align: center; margin-bottom: 6px;
}
:where(body.page-admin) .cal-mini-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
:where(body.page-admin) .cal-mini-day {
  min-height: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1px;
}
[data-theme="dark"] :where(body.page-admin) .cal-mini-month { background: rgba(255,255,255,0.05); }
[data-theme="dark"] :where(body.page-admin) .cal-mini-month:hover { background: var(--hairline-default); }

:where(body.page-admin) .cal-poll-chip {
  font-size: 0.68rem; font-weight: 600; line-height: 1.35;
  padding: 4px 6px; border-radius: 5px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  cursor: default;
}
:where(body.page-admin) .cal-poll-chip.future   { background: #1e3a5f; color: #9bb8e8; }
:where(body.page-admin) .cal-poll-chip.is-today { background: var(--accent); color: var(--white); cursor: grab; }
:where(body.page-admin) .cal-poll-chip.past     { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); }
:where(body.page-admin) .cal-poll-chip.split    { background: #3b1a6e; color: #c4b5fd; }
/* Ghost (cycle 061): a projected-but-not-yet-loaded cyclical occurrence --
   dashed/muted so it reads as "not real yet" next to solid poll chips, and
   still draggable (the gesture that moves the cycle itself). The ONE new
   visual definition this cycle -- explicit dark rule per the 059b lesson
   (never assume a light-mode value reads fine on the dark card too). */
:where(body.page-admin) .cal-poll-chip.ghost {
  background: transparent; border: 1.5px dashed rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.55); cursor: grab;
}
[data-theme="dark"] :where(body.page-admin) .cal-poll-chip.ghost { border-color: rgba(255,255,255,0.2); color: var(--ink-faint); }
/* Cadence outline (cycle 062, replaces 059's single teal .cyclical accent):
   a left-border accent layered over whichever future/is-today/past/split/
   ghost fill already applies -- a poll (or ghost) can be both e.g. future
   AND quarterly. MUST come after .ghost above: .ghost's `border` shorthand
   sets border-left too, and same-specificity same-property ties go to
   whichever rule is later in source -- so defined here, this wins and cuts
   a solid cadence-colored edge into the ghost's dashed border, which is the
   intended "layered on top" look. Four distinguishable hues (no accent =
   singular), explicit dark values per the 059b/061 standing rule --
   validated via the dataviz skill's palette checker (CVD-safe adjacent
   pairs, in-band lightness/contrast against both #1c2840 and #05101f, the
   app's two dark surfaces). */
:where(body.page-admin) .cal-poll-chip.cad-monthly    { border-left: 3px solid #db2777; padding-left: 4px; }
:where(body.page-admin) .cal-poll-chip.cad-quarterly  { border-left: 3px solid #0284c7; padding-left: 4px; }
:where(body.page-admin) .cal-poll-chip.cad-semiannual { border-left: 3px solid #d97706; padding-left: 4px; }
:where(body.page-admin) .cal-poll-chip.cad-yearly     { border-left: 3px solid #0d9488; padding-left: 4px; }
[data-theme="dark"] :where(body.page-admin) .cal-poll-chip.cad-monthly    { border-left-color: #e0399d; }
[data-theme="dark"] :where(body.page-admin) .cal-poll-chip.cad-quarterly  { border-left-color: #0f93d4; }
[data-theme="dark"] :where(body.page-admin) .cal-poll-chip.cad-semiannual { border-left-color: #c97814; }
[data-theme="dark"] :where(body.page-admin) .cal-poll-chip.cad-yearly    { border-left-color: #159e91; }

/* Parking bucket (cycle 063): DB-backed holding box under each calendar. */
:where(body.page-admin) .cal-bucket {
  margin-top: 12px; padding: 10px 12px; min-height: 66px;
  border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
:where(body.page-admin) .cal-bucket.drop-hover {
  border-color: var(--accent-blue, #4dabf7); background: rgba(77,171,247,0.10);
}
:where(body.page-admin) .cal-bucket-head {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px;
}
:where(body.page-admin) .cal-bucket-head::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-admin) .cal-bucket-body {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
}
:where(body.page-admin) .cal-bucket-body .cal-poll-chip { width: 150px; }
:where(body.page-admin) .cal-bucket-empty { font-size: 0.8rem; color: var(--muted); opacity: 0.7; }
:where(body.page-admin) .cal-poll-chip[draggable="true"] { cursor: grab; }
:where(body.page-admin) .cal-chip-label {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 2px;
  /* Cycle 062: category names run longer than the split labels (REP/DEM/IND)
     this class originally carried -- truncate with an ellipsis rather than
     wrap or overflow the chip; the title attribute carries the full value. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

[data-theme="dark"] :where(body.page-admin) .cal-cell        { background: rgba(255,255,255,0.05); }
[data-theme="dark"] :where(body.page-admin) .cal-cell.other-month { background: rgba(255,255,255,0.02); }
[data-theme="dark"] :where(body.page-admin) .cal-cell.is-today    { background: rgba(128,0,0,0.22); }

/* Solid-chip click-through highlight (cycle 061): reuses premium.html's
   poll-deeplink-flash keyframes (same animation, new page scope) rather than
   inventing a second "briefly highlight this row" effect. */
:where(body.page-admin) .poll-row-wrapper.poll-deeplink-flash { animation: pollDeeplinkFlash 2.4s ease-out; border-radius: var(--radius); }

/* ── Stats strip ── */
:where(body.page-admin) .stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
:where(body.page-admin) .stat-card {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 16px 20px;
}
/* Mobile (cycle 090): four 1fr stat cards can't fit 375px without overflowing
   (the 1.9rem numbers exceed a ~94px track), so collapse the strip to two
   columns. Fixes the admin.html docW 444>375 overflow at the stats row. */
@media (max-width: 640px) {
  :where(body.page-admin) .stats-strip { grid-template-columns: repeat(2, 1fr); }
}
:where(body.page-admin) .stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
:where(body.page-admin) .stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
[data-theme="light"] :where(body.page-admin) .stat-card  { background: var(--card); box-shadow: var(--shadow-sm); }
[data-theme="light"] :where(body.page-admin) .stat-num   { color: var(--text); }

/* ── News prefetch in expand panel ── */
:where(body.page-admin) .expand-news-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
:where(body.page-admin) .expand-news-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); flex: 1; }
:where(body.page-admin) .btn-prefetch-news {
  font-family: inherit; font-size: 0.72rem; font-weight: 700;
  color: #1e40af; border: 1.5px solid #bfdbfe; background: none;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .btn-prefetch-news:hover    { background: #eff6ff; }
:where(body.page-admin) .btn-prefetch-news:disabled { opacity: 0.5; cursor: default; }

/* ── Users tab ── */
:where(body.page-admin) .users-list { display: flex; flex-direction: column; gap: 8px; }
:where(body.page-admin) .user-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
:where(body.page-admin) .user-thumb {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
:where(body.page-admin) .user-row-info { flex: 1; min-width: 0; }
:where(body.page-admin) .user-row-name { font-size: 0.875rem; font-weight: 700; color: var(--card-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body.page-admin) .user-row-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
:where(body.page-admin) .user-row-badges { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
:where(body.page-admin) .btn-badge-toggle {
  font-family: inherit; font-size: 0.7rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid; white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-stately), opacity var(--dur-micro) var(--ease-stately);
}
:where(body.page-admin) .btn-badge-toggle.admin-on  { color: #92400e; border-color: #fcd34d; background: #fef3c7; }
:where(body.page-admin) .btn-badge-toggle.admin-off { color: var(--muted); border-color: var(--border); background: none; }
:where(body.page-admin) .btn-badge-toggle.prem-on   { color: #5b21b6; border-color: #c4b5fd; background: #ede9fe; }
:where(body.page-admin) .btn-badge-toggle.prem-off  { color: var(--muted); border-color: var(--border); background: none; }
[data-theme="dark"] :where(body.page-admin) .user-row { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-admin) .user-row-name { color: var(--ink); }
[data-theme="dark"] :where(body.page-admin) .user-row-meta { color: rgba(255,255,255,0.38); }
[data-theme="dark"] :where(body.page-admin) .btn-badge-toggle.admin-off,
[data-theme="dark"] :where(body.page-admin) .btn-badge-toggle.prem-off  { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.35); }

/* ── Delete feedback ── */
:where(body.page-admin) .btn-delete-feedback {
  font-family: inherit; font-size: 0.7rem; font-weight: 700;
  color: #991b1b; border: 1.5px solid #fca5a5; background: none;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately); flex-shrink: 0;
}
:where(body.page-admin) .btn-delete-feedback:hover { background: #fee2e2; }
[data-theme="dark"] :where(body.page-admin) .feedback-item { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-admin) .feedback-item-user  { color: rgba(255,255,255,0.9); }
[data-theme="dark"] :where(body.page-admin) .feedback-item-meta  { color: rgba(255,255,255,0.38); }
[data-theme="dark"] :where(body.page-admin) .feedback-item-msg   { color: rgba(255,255,255,0.78); }
[data-theme="dark"] :where(body.page-admin) .feedback-empty      { background: var(--surface-card); color: rgba(255,255,255,0.38); }


/* ================================================================
   PAGE: ballot.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Date group heading ── */
:where(body.page-ballot) .elec-date-heading {
  /* cycle 109: restyled to the kicker treatment (already uppercase/800/
     muted -- widened tracking + the accent rule below). */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 2px 8px;
}
:where(body.page-ballot) .elec-date-heading::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-ballot) .elec-date-heading .elec-countdown {
  /* cycle 109: "race countdowns" -- the ceremony target named in the plan.
     Escapes the kicker parent's caps/tracking (font-weight/letter-spacing/
     text-transform below); no dedicated bigger display exists for this
     today, so this stays modest-scale, serif only. */
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 8px;
}

/* ── Election rows ── */
:where(body.page-ballot) .elec-list-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
:where(body.page-ballot) .elec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
:where(body.page-ballot) .elec-row:last-child { border-bottom: none; }
:where(body.page-ballot) .elec-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: var(--border);
}
:where(body.page-ballot) .elec-body { flex: 1; min-width: 0; }
:where(body.page-ballot) .elec-name { font-size: 0.84rem; font-weight: 700; color: var(--card-text); }
:where(body.page-ballot) .elec-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
:where(body.page-ballot) .elec-meta-line { line-height: 1.5; }
:where(body.page-ballot) .elec-incumbent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:where(body.page-ballot) .elec-photo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-ballot) .elec-photo.dem { border-color: var(--accent-blue); }
:where(body.page-ballot) .elec-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-ballot) .elec-incumbent .dem { color: var(--accent-blue); font-weight: 700; }
:where(body.page-ballot) .elec-incumbent .rep { color: rgb(180,30,30); font-weight: 700; }
[data-theme="dark"] :where(body.page-ballot) .elec-incumbent .dem { color: #93c5fd; }
[data-theme="dark"] :where(body.page-ballot) .elec-incumbent .rep { color: #f4a7a7; }
:where(body.page-ballot) .btn-elec-track {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
:where(body.page-ballot) .btn-elec-track:hover { border-color: #d4a017; color: #d4a017; }
:where(body.page-ballot) .btn-elec-track.tracked {
  background: rgba(220,160,40,0.16);
  border-color: #d4a017;
  color: #d4a017;
}
:where(body.page-ballot) .sb-profile-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
}
/* The theme accent (#700000) is unreadable on dark cards; use the
   same soft red the rest of dark mode uses for accent text. */
[data-theme="dark"] :where(body.page-ballot) .sb-profile-link { color: #f4a7a7; border-color: #f4a7a7; }
/* America's sidebar is navy; follow its existing button treatment
   (white-translucent, :where(body.page-ballot) like .right-sidebar .btn-track). */
[data-theme="america"] :where(body.page-ballot) .sb-profile-link { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }

/* ── My Ballot Info: a full-bleed rule under the title, :where(body.page-ballot) a strong location
   header, :where(body.page-ballot) then one labeled field per district so the eye can scan
   type → value down the column. ── */
/* Indent the districts content to match the "Next race" card (no border). */
:where(body.page-ballot) #sb-districts { padding-left: 12px; margin-top: 12px; }
:where(body.page-ballot) .bi-divider { display: none; }
:where(body.page-ballot) .bi-loc {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 700; margin-bottom: 2px;
  color: var(--card-text);
}
:where(body.page-ballot) .bi-loc svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.9; }
:where(body.page-ballot) .bi-field {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--border);
}
:where(body.page-ballot) .bi-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
:where(body.page-ballot) .bi-value { font-weight: 600; text-align: right; color: var(--card-text); }
/* America's rail is navy but --card-text/--border stay light-theme values,
   :where(body.page-ballot) so flip text light and soften the hairlines there. */
[data-theme="america"] :where(body.page-ballot) .bi-loc,
[data-theme="america"] :where(body.page-ballot) .bi-value  { color: rgba(255,255,255,0.92); }
[data-theme="america"] :where(body.page-ballot) .bi-label  { color: rgba(255,255,255,0.6); }
[data-theme="america"] :where(body.page-ballot) .bi-divider { background: rgba(255,255,255,0.14); }
[data-theme="america"] :where(body.page-ballot) .bi-field  { border-top-color: rgba(255,255,255,0.12); }

/* ── My Ballot: the predicted full ballot (GET /api/me/ballot) ── */
:where(body.page-ballot) .mb-wrap { padding: 8px 0 0; }
:where(body.page-ballot) .mb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
:where(body.page-ballot) .mb-title { font-size: 1.05rem; font-weight: 800; color: var(--card-text); }
:where(body.page-ballot) .mb-sub { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
:where(body.page-ballot) .mb-disclaimer {
  font-size: 0.78rem; color: var(--muted); line-height: 1.5;
  background: var(--bar-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 18px;
}
:where(body.page-ballot) .mb-disclaimer a { color: var(--accent); font-weight: 700; text-decoration: none; }
:where(body.page-ballot) .mb-group { margin-bottom: 18px; }
:where(body.page-ballot) .mb-group:last-child { margin-bottom: 0; }
:where(body.page-ballot) .mb-groups { border-top: 1px solid var(--border); padding-top: 16px; }
:where(body.page-ballot) .mb-group-label {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
:where(body.page-ballot) .mb-group-label::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-ballot) .mb-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
:where(body.page-ballot) .mb-item-main { flex: 1; min-width: 0; }
:where(body.page-ballot) .mb-item-office { font-size: 0.9rem; font-weight: 700; color: var(--card-text); }
:where(body.page-ballot) .mb-dist { font-weight: 600; color: var(--muted); }
:where(body.page-ballot) .mb-muted { color: var(--muted); font-weight: 600; }
:where(body.page-ballot) .mb-item-note { font-size: 0.78rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
:where(body.page-ballot) .mb-cands { font-size: 0.8rem; color: var(--card-text); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 10px; }
:where(body.page-ballot) .mb-cand { white-space: nowrap; }
:where(body.page-ballot) .mb-badge {
  flex-shrink: 0; align-self: center;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
:where(body.page-ballot) .mb-badge-confirmed { background: rgba(22,163,74,0.12);  color: #16a34a; }
:where(body.page-ballot) .mb-badge-likely    { background: rgba(61,127,212,0.12); color: #3d7fd4; }
:where(body.page-ballot) .mb-badge-expected  { background: rgba(217,119,6,0.12);  color: #b45309; }
:where(body.page-ballot) .mb-conf-confirmed { border-left-color: #16a34a; }
:where(body.page-ballot) .mb-conf-likely    { border-left-color: #3d7fd4; }
:where(body.page-ballot) .mb-conf-expected  { border-left-color: #d4a017; }
:where(body.page-ballot) .mb-src { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-decoration: none; align-self: center; flex-shrink: 0; white-space: nowrap; }
:where(body.page-ballot) a.mb-item-link { text-decoration: none; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately); }
:where(body.page-ballot) a.mb-item-link:hover { border-color: var(--accent); background: var(--bar-bg); }
:where(body.page-ballot) .mb-chev { align-self: center; flex-shrink: 0; color: var(--muted); font-size: 1.15rem; font-weight: 700; line-height: 1; }
:where(body.page-ballot) .mb-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
:where(body.page-ballot) .mb-tab { font-family: inherit; font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
:where(body.page-ballot) .mb-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(128,0,0,0.06); }
[data-theme="dark"] :where(body.page-ballot) .mb-tab.active { color: #f4a7a7; border-color: #f4a7a7; background: rgba(200,40,40,0.12); }
:where(body.page-ballot) .mb-info { display: flex; gap: 9px; align-items: flex-start; font-size: 0.8rem; line-height: 1.55; color: var(--card-text); background: var(--bar-bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin: 14px 0 14px; }
:where(body.page-ballot) .mb-info-icon { flex-shrink: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
:where(body.page-ballot) .mb-info a { color: #3d7fd4; font-weight: 700; text-decoration: none; }
[data-theme="dark"] :where(body.page-ballot) .mb-info a { color: #93c5fd; }
[data-theme="america"] :where(body.page-ballot) .mb-info a { color: #93c5fd; }
:where(body.page-ballot) .mb-info strong { color: var(--card-text); font-weight: 700; }
:where(body.page-ballot) .mb-foot { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin: -6px 2px 16px; }
:where(body.page-ballot) .mb-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: 12px 2px 4px; }
:where(body.page-ballot) .mb-back:hover { color: var(--text); }
[data-theme="dark"] :where(body.page-ballot) .mb-back { color: rgba(255,255,255,0.55); }
[data-theme="dark"] :where(body.page-ballot) .mb-back:hover { color: var(--ink); }
/* ── Update-address section ── */
:where(body.page-ballot) .addr-section { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--border); }
:where(body.page-ballot) .addr-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
:where(body.page-ballot) .addr-toggle:hover { color: var(--card-text); }
:where(body.page-ballot) .addr-panel { margin-top: 12px; max-width: 460px; }
:where(body.page-ballot) .addr-note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
:where(body.page-ballot) .addr-panel input, :where(body.page-ballot) .addr-panel select { box-sizing: border-box; }
:where(body.page-ballot) #addr-street, :where(body.page-ballot) #addr-city { display: block; width: 100%; margin-bottom: 10px; }
:where(body.page-ballot) .addr-row { display: flex; gap: 10px; margin-bottom: 12px; }
:where(body.page-ballot) #addr-state { flex: 1 1 auto; min-width: 0; }
:where(body.page-ballot) #addr-zip { flex: 0 0 110px; }
:where(body.page-ballot) .addr-actions { display: flex; align-items: center; gap: 12px; }
:where(body.page-ballot) .addr-save { font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--white); background: var(--accent); border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
:where(body.page-ballot) .addr-save:hover { opacity: 0.92; }
:where(body.page-ballot) .addr-save:disabled { opacity: 0.55; cursor: default; }
:where(body.page-ballot) .addr-msg { font-size: 0.78rem; }
:where(body.page-ballot) .addr-msg.ok { color: #16a34a; }
:where(body.page-ballot) .addr-msg.err { color: #dc2626; }
[data-theme="dark"] :where(body.page-ballot) .addr-msg.ok { color: #4ade80; }
[data-theme="dark"] :where(body.page-ballot) .addr-msg.err { color: #f87171; }
[data-theme="dark"] :where(body.page-ballot) .mb-badge-expected { color: #e0a83a; }
[data-theme="dark"] :where(body.page-ballot) .mb-badge-likely   { color: #93c5fd; }

:where(body.page-ballot) .elec-loading {
  padding: 32px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Candidates expansion ── */
:where(body.page-ballot) .btn-elec-expand,
:where(body.page-ballot) .btn-elec-discuss {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:where(body.page-ballot) .btn-elec-discuss { text-decoration: none; }
:where(body.page-ballot) .btn-elec-expand:hover,
:where(body.page-ballot) .btn-elec-discuss:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] :where(body.page-ballot) .btn-elec-expand:hover,
[data-theme="dark"] :where(body.page-ballot) .btn-elec-discuss:hover { border-color: #f4a7a7; color: #f4a7a7; }
/* Expanded state: filled accent so the open card's button reads
   as "on" - mirrors how the Tracking button fills when active. */
/* var(--accent) resolves to each theme's own red (light/america
   #800000, :where(body.page-ballot) dark #700000), :where(body.page-ballot) so the open state always matches the
   mode's standard accent. */
:where(body.page-ballot) .btn-elec-expand.open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
:where(body.page-ballot) .btn-elec-expand.open:hover { border-color: var(--accent); color: var(--white); }

:where(body.page-ballot) .elec-candidates {
  padding: 6px 16px 12px 66px;   /* aligns under the row body, past the photo */
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.015);
}
[data-theme="dark"] :where(body.page-ballot) .elec-candidates { background: rgba(255,255,255,0.025); }
:where(body.page-ballot) .elec-candidates:last-child { border-bottom: none; }
:where(body.page-ballot) .elec-cand-heading {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 8px;
}
:where(body.page-ballot) .elec-cand-heading::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-ballot) .elec-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur-press-in) var(--ease-stately);
}
:where(body.page-ballot) .elec-cand:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] :where(body.page-ballot) .elec-cand:hover { background: rgba(255,255,255,0.05); }
:where(body.page-ballot) .elec-cand-photo {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-ballot) .elec-cand-photo.dem { border-color: var(--accent-blue); }
:where(body.page-ballot) .elec-cand-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-ballot) .elec-cand-initial {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; color: var(--muted);
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-ballot) .elec-cand-initial.dem { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-ballot) .elec-cand-initial.rep { border-color: rgb(180,30,30); color: rgb(180,30,30); }
:where(body.page-ballot) .elec-cand-name { font-size: 0.8rem; font-weight: 700; color: var(--card-text); }
:where(body.page-ballot) .elec-cand-party {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:where(body.page-ballot) .elec-cand-party.dem { background: rgba(53,124,200,0.12); color: var(--accent-blue); }
:where(body.page-ballot) .elec-cand-party.rep { background: rgba(180,30,30,0.12); color: rgb(180,30,30); }
:where(body.page-ballot) .elec-cand-party.other { background: var(--border); color: var(--muted); }
[data-theme="dark"] :where(body.page-ballot) .elec-cand-party.dem { color: #93c5fd; }
[data-theme="dark"] :where(body.page-ballot) .elec-cand-party.rep { color: #f4a7a7; }
:where(body.page-ballot) .elec-cand-empty {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0 2px;
}


/* ================================================================
   PAGE: chatrooms.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Age gate (cycle 120) ───────────────────────────────────────── */
#age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: 24px;
}
.age-gate-card {
  max-width: 420px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
/* cycle 120 F2: text INSIDE .age-gate-card (background:var(--card)) must use
   the CARD interior tokens, not the page tokens -- dark keeps --text/--muted
   dark on its dark card (~1.1 contrast, invisible), while --card-text flips
   light. The file's own header convention; the same no-override drift class
   as cycle 111.
   MEASURED CORRECTION to the addendum's candidate: it suggested body ->
   --card-muted, but --card-muted (#6b7a99) measures 4.31:1 on the light card
   (#fff) and 3.64:1 on the america card (#e8ecf4) -- BOTH under the addendum's
   own "body >= 4.5:1" bar. The only way to hit 4.5:1 across all three card
   backgrounds without globally re-tuning the shared --card-muted token is
   --card-text (title 16.1/13.6/12.7:1, body identical). For a full-page
   BLOCKING gate, full legibility of the instruction is correct anyway; the
   title/body hierarchy is carried by font-size (1.15rem vs 0.9rem), not color. */
.age-gate-title { margin: 0 0 10px; font-size: 1.15rem; color: var(--card-text); }
.age-gate-body { color: var(--card-text); font-size: 0.9rem; margin: 0 0 18px; }
.age-gate-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-bottom: 14px;
}
/* F2 (same drift class): the label sits on the card, so it needs the card
   interior token too. The input keeps --text because its own background is
   var(--white) (a light box, unchanged in dark) -- dark --text on a white
   input reads fine; only text on the card itself must flip. */
.age-gate-field label { font-size: 0.8rem; font-weight: 600; color: var(--card-text); }
.age-gate-field input {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
}
.age-gate-error { color: var(--accent); font-size: 0.82rem; margin-bottom: 10px; min-height: 1em; }
.age-gate-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-stately);
}
.age-gate-submit:hover { opacity: 0.9; }

/* ── Room list ──────────────────────────────────────────────── */
:where(body.page-chatrooms) .room-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 40px;
}

:where(body.page-chatrooms) .room-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: box-shadow var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
  box-shadow: var(--shadow-sm);
}
:where(body.page-chatrooms) .room-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

:where(body.page-chatrooms) .room-info { flex: 1; min-width: 0; }
:where(body.page-chatrooms) .room-category-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }

:where(body.page-chatrooms) .room-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--card-muted);
}

:where(body.page-chatrooms) .room-card .room-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--card-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(body.page-chatrooms) .room-desc {
  font-size: 0.78rem;
  color: var(--card-muted);
  margin-top: 3px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(body.page-chatrooms) .room-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

:where(body.page-chatrooms) .room-active {
  font-size: 0.72rem;
  font-weight: 600;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 4px;
}
:where(body.page-chatrooms) .room-active::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
}
/* (.room-active.is-quiet removed in cycle 041 — quiet rooms render no
   activity label at all; positive signals only.) */

:where(body.page-chatrooms) .room-count {
  font-size: 0.7rem;
  color: var(--card-muted);
}

:where(body.page-chatrooms) .room-join {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #3d7fd4;
  background: none;
  border: 1.5px solid #3d7fd4;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
  white-space: nowrap;
}
:where(body.page-chatrooms) .room-join:hover { background: #3d7fd4; color: var(--white); border-color: #3d7fd4; }

/* Dark mode: slightly brighter blue on dark card */
[data-theme="dark"] :where(body.page-chatrooms) .room-join       { color: #5b9cf6; border-color: #5b9cf6; }
[data-theme="dark"] :where(body.page-chatrooms) .room-join:hover { background: #5b9cf6; color: var(--white); border-color: #5b9cf6; }
/* America mode: same medium blue as light mode (card is #e8ecf4 so same rules apply) */
[data-theme="america"] :where(body.page-chatrooms) .room-join       { color: #3d7fd4; border-color: #3d7fd4; }
[data-theme="america"] :where(body.page-chatrooms) .room-join:hover { background: #3d7fd4; color: var(--white); border-color: #3d7fd4; }

/* ── Favorite star ──────────────────────────────────────────── */
:where(body.page-chatrooms) .room-fav {
  background: none;
  border: none;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: var(--card-muted);
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  transition: color var(--dur-micro) var(--ease-stately), transform var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .room-fav:hover  { color: #f59e0b; transform: scale(1.2); }
:where(body.page-chatrooms) .room-fav.is-fav { color: #f59e0b; }

/* ── No results ─────────────────────────────────────────────── */
:where(body.page-chatrooms) .no-rooms {
  text-align: center;
  padding: 48px 24px;
  color: var(--sidebar-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ── Threads (cycle 074): board grid ───────────────────────────
   The entity directory's chip row above (type filter over 9k rooms) is
   retired along with the directory itself -- boards replace it, and boards
   are few enough (~20) to browse as a grid, no filter needed. */
:where(body.page-chatrooms) .board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 4px 0 18px;
}
:where(body.page-chatrooms) .board-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}
:where(body.page-chatrooms) .board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
:where(body.page-chatrooms) .board-card-name {
  font-size: 0.92rem; font-weight: 700; color: var(--card-text);
  padding-right: 22px;
}
:where(body.page-chatrooms) .board-card-meta { font-size: 0.74rem; color: var(--card-muted); margin-top: 4px; }
:where(body.page-chatrooms) .board-fav {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; font-size: 0.95rem; line-height: 1;
  cursor: pointer; color: var(--card-muted); padding: 0;
  transition: color var(--dur-micro) var(--ease-stately), transform var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .board-fav:hover  { color: #f59e0b; transform: scale(1.2); }
:where(body.page-chatrooms) .board-fav.is-fav { color: #f59e0b; }

/* ── Threads: the "Threads" search-result / for-you feed-heading sub-label ── */
:where(body.page-chatrooms) .feed-heading-sub {
  font-weight: 500; text-transform: none; letter-spacing: normal;
  color: var(--card-muted); margin-left: 6px; font-size: 0.78rem;
}

/* ── Threads: back-to-boards control ───────────────────────────── */
:where(body.page-chatrooms) .thread-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--card-muted); background: none; border: none; cursor: pointer;
  padding: 8px 0 4px; transition: color var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .thread-back:hover { color: var(--accent); }
:where(body.page-chatrooms) .thread-back svg { width: 16px; height: 16px; }

/* ── Threads: thread row — ONE definition (For you, board view, search) ── */
:where(body.page-chatrooms) .thread-list { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 20px; }
:where(body.page-chatrooms) .thread-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}
:where(body.page-chatrooms) .thread-row.daily {
  border-left: 4px solid var(--accent);
}
:where(body.page-chatrooms) .thread-kicker {
  /* cycle 109 addendum: already kicker-shaped (name and all) -- widened
     tracking to match the unified spec, adopted --type-caption (was
     already ~equal at 0.68rem). Color stays var(--accent), its existing
     value, unchanged: it's a one-off ceremony flag on the pinned daily
     thread, not a neutral section label, so no ::after either (same
     already-accent-colored reasoning as .info-section h3 above). */
  font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
:where(body.page-chatrooms) .thread-row-title {
  display: block; font-family: var(--font-display); font-size: 0.92rem; font-weight: 700;
  line-height: 1.3; color: var(--card-text);
  text-decoration: none; margin-bottom: 5px; cursor: pointer;
}
:where(body.page-chatrooms) .thread-row-title:hover { color: var(--accent); }
:where(body.page-chatrooms) .thread-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--card-muted);
}
:where(body.page-chatrooms) .thread-board-chip {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--border); color: var(--card-muted);
  border-radius: 999px; padding: 2px 9px;
}
:where(body.page-chatrooms) .thread-entity-chip {
  font-size: 0.72rem; font-weight: 600; color: var(--accent);
  background: rgba(128,0,0,0.07); border-radius: 6px; padding: 2px 8px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(body.page-chatrooms) .thread-claim-btn {
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--white);
  background: var(--accent); border: none; border-radius: 999px;
  padding: 8px 16px; margin-top: 8px; cursor: pointer; transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .thread-claim-btn:hover { background: var(--accent-dk); }

/* ── Threads: board-view header + New-thread form ──────────────── */
:where(body.page-chatrooms) .board-view-header {
  display: flex; align-items: center; gap: 10px; padding: 8px 0 4px;
}
:where(body.page-chatrooms) .board-view-header .board-fav {
  position: static; font-size: 1.1rem;
}
:where(body.page-chatrooms) .board-view-title { flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); }
:where(body.page-chatrooms) .thread-new-btn {
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--white);
  background: var(--accent); border: none; border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: background var(--dur-micro) var(--ease-stately); flex-shrink: 0;
}
:where(body.page-chatrooms) .thread-new-btn:hover { background: var(--accent-dk); }

:where(body.page-chatrooms) .thread-new-form {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px 16px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px;
}
:where(body.page-chatrooms) .thread-new-form input[type="text"],
:where(body.page-chatrooms) .thread-new-form textarea,
:where(body.page-chatrooms) .thread-new-form select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.86rem;
  color: var(--card-text); background: var(--card);
  border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 11px;
}
:where(body.page-chatrooms) .thread-new-form textarea { min-height: 84px; resize: vertical; }
:where(body.page-chatrooms) .thread-new-form input:focus,
:where(body.page-chatrooms) .thread-new-form textarea:focus,
:where(body.page-chatrooms) .thread-new-form select:focus { border-color: var(--accent); outline: none; }
:where(body.page-chatrooms) .tn-entity-picker { display: flex; flex-direction: column; gap: 6px; }
:where(body.page-chatrooms) .tn-entity-results { display: flex; flex-direction: column; gap: 2px; }
:where(body.page-chatrooms) .tn-entity-opt {
  text-align: left; font: inherit; font-size: 0.82rem; color: var(--card-text);
  background: none; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 10px; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .tn-entity-opt:hover { border-color: var(--accent); color: var(--accent); }
:where(body.page-chatrooms) .tn-entity-none { font-size: 0.78rem; color: var(--card-muted); padding: 4px 2px; }
:where(body.page-chatrooms) .tn-entity-selected {
  font-size: 0.82rem; color: var(--card-text);
  background: var(--border); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px;
}
:where(body.page-chatrooms) .tn-entity-clear {
  background: none; border: none; color: var(--card-muted); cursor: pointer;
  font-size: 0.85rem; padding: 0 2px;
}
:where(body.page-chatrooms) .tn-entity-clear:hover { color: var(--accent); }
:where(body.page-chatrooms) .tn-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
:where(body.page-chatrooms) .tn-cancel {
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--card-muted);
  background: none; border: none; cursor: pointer; padding: 8px 10px;
}
:where(body.page-chatrooms) .tn-cancel:hover { color: var(--card-text); }
:where(body.page-chatrooms) .tn-submit {
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--white);
  background: var(--accent); border: none; border-radius: 999px;
  padding: 8px 18px; cursor: pointer; transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .tn-submit:hover { background: var(--accent-dk); }
:where(body.page-chatrooms) .tn-submit:disabled { opacity: 0.6; cursor: default; }
:where(body.page-chatrooms) .tn-err { color: #c0392b; font-size: 0.78rem; min-height: 1em; }
[data-theme="dark"] :where(body.page-chatrooms) .tn-err { color: #f4a7a7; }

/* ── Load more ──────────────────────────────────────────────── */
:where(body.page-chatrooms) .dir-more { text-align: center; padding: 6px 0 40px; }
:where(body.page-chatrooms) .dir-loadmore {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d7fd4;
  background: none;
  border: 1.5px solid #3d7fd4;
  border-radius: 999px;
  padding: 8px 22px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-chatrooms) .dir-loadmore:hover { background: #3d7fd4; color: var(--white); }
:where(body.page-chatrooms) .dir-loadmore:disabled { opacity: 0.6; cursor: default; }
[data-theme="dark"] :where(body.page-chatrooms) .dir-loadmore { color: #5b9cf6; border-color: #5b9cf6; }
[data-theme="dark"] :where(body.page-chatrooms) .dir-loadmore:hover { background: #5b9cf6; color: var(--white); }


/* ================================================================
   PAGE: explore.html   (moved from its inline <style> block)
   NOTE: :root var overrides became body.page-explore (page-local).
   ================================================================ */

/* Defined inline (like the rest of the brief chrome) so a stale cached
   styles.css can't leave the data accent undefined. One calm medium blue
   across themes; party red for the Republican side. */
body.page-explore { --accent-blue: rgb(53,124,200); --accent-blue-tint: rgba(53,124,200,0.16); }
/* The `.middle-column { overflow: visible }` escape hatch this page needed
   (its own sticky .brief-customize-bar hit the exact scroll-container trap
   cycle 047 fixed at the source) is gone — the base rule's overflow-x:clip
   doesn't create a scroll container, so this page's sticky now works
   without a page-specific override. Verified: brief-customize-bar still
   sticks at top:50px after scrolling, no new horizontal overflow. */

/* ── Today brief: each module is ONE card (cycle 009b/c) ── filled surface +
   soft shadow + border + radius, :where(body.page-explore) overflow:hidden so the colour band bleeds
   to the rounded corners. Calm, :where(body.page-explore) pull-based, :where(body.page-explore) bounded scroll. */
:where(body.page-explore) .brief-module {
  margin-bottom: 22px;
  background: var(--card); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
:where(body.page-explore) .brief-module:last-child { margin-bottom: 0; }

/* ── Customize control (top, :where(body.page-explore) filter-bar pattern) ── */
:where(body.page-explore) .brief-customize-bar {
  position: sticky; top: 50px; z-index: 9;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 22px;
}
[data-theme="america"] :where(body.page-explore) .brief-customize-bar { background: var(--surface-card); }
:where(body.page-explore) .brief-customize-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--card-text);
  background: none; border: none; cursor: pointer; padding: 2px;
}
:where(body.page-explore) .brief-customize-toggle svg { width: 17px; height: 17px; color: var(--accent-blue); }
:where(body.page-explore) .brief-customize-toggle:hover { color: var(--accent-blue); }
:where(body.page-explore) .brief-customize-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
:where(body.page-explore) .brief-customize-hint { font-size: 0.76rem; color: var(--card-muted); margin: 0 2px 10px; }
:where(body.page-explore) .brief-mod-row {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
:where(body.page-explore) .brief-mod-row:last-child { border-bottom: none; }
:where(body.page-explore) .brief-mod-row.dragging { opacity: 0.45; }
/* Drag handle (cycle 101) — the reorder affordance. Only this is draggable, so
   the toggle + click-to-toggle label are never hijacked. */
:where(body.page-explore) .brief-mod-handle {
  flex-shrink: 0; display: flex; align-items: center; color: var(--muted);
  padding: 2px 4px; cursor: grab; touch-action: none;
}
:where(body.page-explore) .brief-mod-handle:active { cursor: grabbing; }
:where(body.page-explore) .brief-mod-handle:focus-visible {
  outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; color: var(--card-text);
}
/* The label+switch stay one click-to-toggle target (a <label>), flexing to fill. */
:where(body.page-explore) .brief-mod-main {
  flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; cursor: pointer;
}
:where(body.page-explore) .brief-mod-label { font-size: 0.86rem; font-weight: 600; color: var(--card-text); }
/* "Topics you follow" (cycle 107) — a simple labelled toggle per category
   (no drag handle; topics aren't reordered). Reuses .brief-mod-label + switch. */
:where(body.page-explore) .brief-topics-head { font-size: 0.86rem; font-weight: 800; color: var(--card-text); margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--border); }
:where(body.page-explore) .brief-topic-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 4px; cursor: pointer; }
/* Switch — a labelled checkbox styled as a calm toggle. */
:where(body.page-explore) .brief-switch { position: relative; flex-shrink: 0; width: 40px; height: 22px; }
:where(body.page-explore) .brief-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
:where(body.page-explore) .brief-switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--bar-bg);
  transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-explore) .brief-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform var(--dur-micro) var(--ease-stately);
}
:where(body.page-explore) .brief-switch input:checked + .brief-switch-track { background: var(--accent-blue); }
:where(body.page-explore) .brief-switch input:checked + .brief-switch-track::after { transform: translateX(18px); }
:where(body.page-explore) .brief-switch input:focus-visible + .brief-switch-track { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ── Section header BAND (cycle 009c) ── a full-bleed, :where(body.page-explore) poll-of-the-day-style
   colour band capping each module card: white icon + white title on a deep,
   :where(body.page-explore) white-text-safe hue. Mirrors styles.css .poll-card-header. It bleeds to
   the card edges because the .brief-module card has padding:0. */
:where(body.page-explore) .ex-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; margin: 0;
  background: var(--ehband, var(--accent-blue));
}
:where(body.page-explore) .ex-head-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,0.18); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
:where(body.page-explore) .ex-head-icon svg { width: 18px; height: 18px; }
:where(body.page-explore) .ex-head-title { font-size: 0.98rem; font-weight: 800; color: var(--white); letter-spacing: -0.01em; }
:where(body.page-explore) .ex-head-sub { font-size: 0.75rem; color: rgba(255,255,255,0.82); margin-top: 1px; line-height: 1.3; }

/* ── Per-module band hue (cycle 009c) ── deep stops (white text always has
   contrast), :where(body.page-explore) grouped to ~6 families so it's colour-coded but cohesive. Every
   band is identical but for the hue, :where(body.page-explore) set on the module wrapper. */
:where(body.page-explore) .brief-module[data-module="common_ground"]   { --ehband:#800000; }  /* maroon (flagship) */
:where(body.page-explore) .brief-module[data-module="todays_vote"]      { --ehband:#0b2f63; }  /* navy (core action) */
:where(body.page-explore) .brief-module[data-module="yesterday"]        { --ehband:#854f0b; }  /* deep amber */
:where(body.page-explore) .brief-module[data-module="representation"]   { --ehband:#0f6e56; }  /* deep teal */
:where(body.page-explore) .brief-module[data-module="your_state"]       { --ehband:#0f6e56; }  /* deep teal */
:where(body.page-explore) .brief-module[data-module="in_the_news"]      { --ehband:#185fa5; }  /* deep blue */
:where(body.page-explore) .brief-module[data-module="fresh_bills"]      { --ehband:#185fa5; }  /* deep blue */
:where(body.page-explore) .brief-module[data-module="active_chatrooms"] { --ehband:#3c3489; }  /* deep purple */
:where(body.page-explore) .brief-module[data-module="stock_trades"]     { --ehband:#475569; }  /* slate */
:where(body.page-explore) .brief-module[data-module="opinion_trend"]    { --ehband:#5b2a6e; }  /* deep plum (opinion over time) */
/* Dark: lift the two bands that would otherwise blend into the dark card
   (#1c2840) — keep white text contrast, :where(body.page-explore) just nudge the hue brighter. */
[data-theme="dark"] :where(body.page-explore) .brief-module[data-module="todays_vote"]  { --ehband:#265a9e; }
[data-theme="dark"] :where(body.page-explore) .brief-module[data-module="stock_trades"] { --ehband:#5a6b86; }

/* ── Calm empty states ── */
:where(body.page-explore) .mod-empty { font-size: 0.84rem; color: var(--card-muted); line-height: 1.5; }
:where(body.page-explore) .mod-empty-card { padding: 16px 18px; }

/* ── opinion_trend ("How America changed its mind") — honest & sparse-safe.
   No connecting line under 3 readings; every reading shows its date AND
   sample size N (cards show N inline, :where(body.page-explore) the 3+ line chart shows a compact N
   under each date with the exact count on hover); option lines use a
   neutral palette; the party split is descriptive. ── */
:where(body.page-explore) .ot-card { padding: 20px 22px; }
:where(body.page-explore) .ot-q { font-size: 0.96rem; font-weight: 700; color: var(--card-text); line-height: 1.35; }
:where(body.page-explore) .ot-meta { font-size: 0.74rem; color: var(--card-muted); margin: 3px 0 14px; }
:where(body.page-explore) .ot-chart { width: 100%; height: auto; display: block; overflow: visible; }
:where(body.page-explore) .ot-grid { stroke: var(--border); stroke-width: 1; opacity: 0.55; }
:where(body.page-explore) .ot-axis { fill: var(--card-muted); font-size: 10px; }
:where(body.page-explore) .ot-axis-sub { font-size: 9px; opacity: 0.8; }
:where(body.page-explore) .ot-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
:where(body.page-explore) .ot-dot { stroke: var(--card); stroke-width: 1.5; }
:where(body.page-explore) .ot-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
:where(body.page-explore) .ot-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--card-text); }
:where(body.page-explore) .ot-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
:where(body.page-explore) .ot-readings { display: flex; flex-wrap: wrap; gap: 10px; }
:where(body.page-explore) .ot-reading { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
:where(body.page-explore) .ot-reading-date { font-size: 0.7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--card-muted); }
:where(body.page-explore) .ot-reading-lead { font-size: 1rem; font-weight: 700; color: var(--card-text); margin: 5px 0 2px; }
:where(body.page-explore) .ot-reading-n { font-size: 0.72rem; color: var(--card-muted); }
:where(body.page-explore) .ot-caveat { font-size: 0.76rem; color: var(--card-muted); font-style: italic; line-height: 1.5; margin-top: 12px; }
:where(body.page-explore) .ot-split { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 0.76rem; color: var(--card-muted); }
:where(body.page-explore) .ot-split b { color: var(--card-text); }
:where(body.page-explore) .brief-inline-link { color: var(--accent-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
:where(body.page-explore) .brief-inline-link:hover { text-decoration: underline; }
:where(body.page-explore) .explore-loading { padding: 18px; text-align: center; font-size: 0.85rem; color: var(--muted); font-style: italic; }
:where(body.page-explore) .brief-empty {
  text-align: center; padding: 48px 24px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
:where(body.page-explore) .brief-empty-title { font-size: 1.05rem; font-weight: 800; color: var(--card-text); margin-bottom: 6px; }
:where(body.page-explore) .brief-empty-sub { font-size: 0.85rem; color: var(--card-muted); }
[data-theme="america"] :where(body.page-explore) .brief-empty-title { color: var(--white); }
[data-theme="america"] :where(body.page-explore) .brief-empty-sub { color: rgba(255,255,255,0.7); }

/* ── Today's vote CTA card ── the loop stays one tap away, :where(body.page-explore) never gated. */
:where(body.page-explore) .tv-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  padding: 16px 20px;
}
/* The core action carries the brand maroon (icon tint + CTA). */
:where(body.page-explore) .tv-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: rgba(128,0,0,0.10); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
:where(body.page-explore) .tv-icon svg { width: 24px; height: 24px; }
:where(body.page-explore) .tv-body { flex: 1; min-width: 0; }
:where(body.page-explore) .tv-title { display: block; font-size: 1rem; font-weight: 800; color: var(--card-text); }
:where(body.page-explore) .tv-sub { display: block; font-size: 0.82rem; color: var(--card-muted); margin-top: 2px; line-height: 1.4; }
:where(body.page-explore) .tv-cta { flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
/* Dark: brighten the maroon so it reads on the dark card. */
[data-theme="dark"] :where(body.page-explore) .tv-icon { color: #f4a7a7; }
[data-theme="dark"] :where(body.page-explore) .tv-cta  { color: #f4a7a7; }

/* ── Common Ground marquee ── D and R at equal visual weight; no "winner". */
/* Body sits below the maroon band (the band is now the flagship accent). */
:where(body.page-explore, body.page-landing) .cg-card { padding: 20px 22px; }
:where(body.page-explore, body.page-landing) .cg-cat {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #800000; background: rgba(128,0,0,0.10); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
[data-theme="dark"] :where(body.page-explore, body.page-landing) .cg-cat { color: #f4a7a7; background: rgba(244,167,167,0.12); }
:where(body.page-explore, body.page-landing) .cg-question { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--card-text); line-height: 1.35; letter-spacing: -0.01em; }
:where(body.page-explore, body.page-landing) .cg-agree { font-size: 0.9rem; color: var(--card-text); margin-top: 10px; line-height: 1.45; }
:where(body.page-explore, body.page-landing) .cg-agree strong { color: var(--accent-blue); }
:where(body.page-explore, body.page-landing) .cg-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
:where(body.page-explore, body.page-landing) .cg-bar-row { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 10px; }
:where(body.page-explore, body.page-landing) .cg-bar-label { font-size: 0.8rem; font-weight: 700; color: var(--card-text); }
:where(body.page-explore, body.page-landing) .cg-bar-track { height: 14px; border-radius: 999px; background: var(--bar-bg); overflow: hidden; }
:where(body.page-explore, body.page-landing) .cg-bar-fill { height: 100%; border-radius: 999px; }
:where(body.page-explore, body.page-landing) .cg-bar-fill.dem { background: var(--accent-blue); }
:where(body.page-explore, body.page-landing) .cg-bar-fill.rep { background: rgb(180,30,30); }
:where(body.page-explore, body.page-landing) .cg-bar-pct { font-size: 0.82rem; font-weight: 800; color: var(--card-text); text-align: right; }
:where(body.page-explore, body.page-landing) .cg-sample { font-size: 0.74rem; color: var(--card-muted); margin-top: 14px; }
/* "Your party this week" (cycle 103) — reuses the cg-bar; only the per-poll
   framing is new. Both parties keep equal visual weight. */
:where(body.page-explore) .pw-card { padding: 4px 0; }
:where(body.page-explore) .pw-note { font-size: 0.78rem; color: var(--card-muted); margin-bottom: 12px; }
:where(body.page-explore) .pw-poll { padding: 10px 0; border-top: 1px solid var(--border); }
:where(body.page-explore) .pw-poll:first-of-type { border-top: none; }
:where(body.page-explore) .pw-q { font-size: 0.9rem; font-weight: 700; color: var(--card-text); margin-bottom: 3px; }
:where(body.page-explore) .pw-lead { font-size: 0.78rem; color: var(--card-muted); margin-bottom: 9px; }
:where(body.page-explore) .pw-poll .cg-bar-row { margin-top: 6px; }
/* "Agreement by topic" (cycle 104) — a single NEUTRAL fill; length = party
   divergence, no colour value-judgment, no party ownership of a topic. */
:where(body.page-explore) .cm-card { padding: 4px 0; }
:where(body.page-explore) .cm-legend { font-size: 0.76rem; color: var(--card-muted); margin-bottom: 12px; }
:where(body.page-explore) .cm-row { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 10px; margin-top: 9px; }
:where(body.page-explore) .cm-label { font-size: 0.82rem; font-weight: 700; color: var(--card-text); }
:where(body.page-explore) .cm-track { height: 12px; border-radius: 999px; background: var(--bar-bg); overflow: hidden; }
:where(body.page-explore) .cm-fill { height: 100%; border-radius: 999px; background: var(--accent); }
:where(body.page-explore) .cm-val { font-size: 0.82rem; font-weight: 800; color: var(--card-text); text-align: right; }
:where(body.page-explore) .cm-unit { font-size: 0.68rem; font-weight: 600; color: var(--card-muted); margin-left: 1px; }
:where(body.page-explore, body.page-landing) .cg-actions { margin-top: 16px; }
:where(body.page-explore, body.page-landing) .cg-share-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.83rem; font-weight: 700;
  color: var(--white); background: var(--accent); border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: filter var(--dur-micro) var(--ease-stately);
}
:where(body.page-explore, body.page-landing) .cg-share-btn:hover { filter: brightness(0.94); }
:where(body.page-explore, body.page-landing) .cg-share-btn svg { width: 15px; height: 15px; }

/* ── Yesterday's reveal ── free aggregate result + party split. */
:where(body.page-explore) .yr-card { padding: 20px 22px; }
:where(body.page-explore) .yr-cat {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-blue); background: var(--accent-blue-tint); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
:where(body.page-explore) .yr-question { font-size: 1.02rem; font-weight: 700; color: var(--card-text); line-height: 1.4; }
:where(body.page-explore) .yr-answer { font-size: 0.95rem; color: var(--card-text); margin-top: 10px; }
:where(body.page-explore) .yr-answer strong { color: var(--accent-blue); }
:where(body.page-explore) .yr-split { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
:where(body.page-explore) .yr-split-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--card-text); }
:where(body.page-explore) .yr-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
:where(body.page-explore) .yr-dot.dem { background: var(--accent-blue); }
:where(body.page-explore) .yr-dot.rep { background: rgb(180,30,30); }
:where(body.page-explore) .yr-sample { font-size: 0.74rem; color: var(--card-muted); margin-top: 14px; }

/* ── Representation module ── calm, :where(body.page-explore) factual; never outrage. ── */
:where(body.page-explore) .rep-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
:where(body.page-explore) .rep-block { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
:where(body.page-explore) .rep-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; transition: background var(--dur-press-in) var(--ease-stately); }
:where(body.page-explore) .rep-head:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] :where(body.page-explore) .rep-head:hover { background: rgba(255,255,255,0.04); }
:where(body.page-explore) .rep-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--card-muted); }
:where(body.page-explore) .rep-dot.dem { background: var(--accent-blue); }
:where(body.page-explore) .rep-dot.rep { background: rgb(180,30,30); }
:where(body.page-explore) .rep-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:where(body.page-explore) .rep-name { font-size: 0.92rem; font-weight: 800; color: var(--card-text); }
:where(body.page-explore) .rep-role { font-size: 0.72rem; color: var(--card-muted); }
:where(body.page-explore) .rep-summary { font-size: 0.82rem; font-weight: 600; color: var(--accent-blue); margin-top: 3px; }
:where(body.page-explore) .rep-chevron { flex-shrink: 0; font-size: 1.2rem; color: var(--card-muted); line-height: 1; }
:where(body.page-explore) .rep-expand {
  display: block; width: 100%; text-align: left; font-family: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--accent-blue); background: none; border: none; border-top: 1px solid var(--border);
  padding: 10px 16px; cursor: pointer;
}
:where(body.page-explore) .rep-expand:hover { background: rgba(53,124,200,0.06); }
:where(body.page-explore) .rep-detail { border-top: 1px solid var(--border); }
:where(body.page-explore) .rep-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); }
:where(body.page-explore) .rep-detail .rep-item:first-child { border-top: none; }
:where(body.page-explore) .rep-item-bill { flex: 1 1 100%; font-size: 0.78rem; font-weight: 700; color: var(--card-text); }
:where(body.page-explore) .rep-item-bill a,
:where(body.page-explore) .rep-boot-bill a { color: inherit; text-decoration: none; }
:where(body.page-explore) .rep-item-line { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--card-muted); }
:where(body.page-explore) .rep-item-tag { flex-shrink: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
:where(body.page-explore) .rep-tag-aligned { background: rgba(26,127,55,0.12); color: #1a7f37; }
:where(body.page-explore) .rep-tag-diverged { background: rgba(180,30,30,0.10); color: #b41e1e; }
:where(body.page-explore) .rep-tag-no_signal { background: var(--bar-bg); color: var(--card-muted); }
[data-theme="dark"] :where(body.page-explore) .rep-tag-aligned { color: #7ee2a0; }
[data-theme="dark"] :where(body.page-explore) .rep-tag-diverged { color: #f4a7a7; }
:where(body.page-explore) .rep-deepen { font-size: 0.8rem; font-weight: 600; color: var(--card-muted); margin-top: 4px; }
:where(body.page-explore) .rep-bootstrap { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
/* cycle 109: typography-only kicker treatment -- its OWN Explore "data"
   accent color (var(--accent-blue), not brand maroon) stays untouched;
   this pass is color-neutral outside --kicker-rule, and no ::after here
   to avoid introducing a maroon-family accent into a blue-themed module. */
:where(body.page-explore) .rep-boot-kicker { font-size: var(--type-caption); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-blue); margin-bottom: 8px; }
:where(body.page-explore) .rep-boot-bill { font-size: 0.98rem; font-weight: 700; color: var(--card-text); line-height: 1.4; }
:where(body.page-explore) .rep-boot-cat {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-blue); background: var(--accent-blue-tint); padding: 2px 8px; border-radius: 999px; margin-top: 8px;
}
:where(body.page-explore) .rep-boot-ask { display: flex; gap: 10px; margin-top: 14px; }
:where(body.page-explore) .rep-boot-btn {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: transparent; color: var(--card-text); transition: all var(--dur-press-in) var(--ease-stately);
}
:where(body.page-explore) .rep-boot-btn.support:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-explore) .rep-boot-btn.oppose:hover { border-color: rgb(180,30,30); color: rgb(180,30,30); }
:where(body.page-explore) .rep-boot-btn:disabled { opacity: 0.45; cursor: default; }
:where(body.page-explore) .rep-boot-btn.chosen.support { background: var(--accent-blue); color: var(--white); border-color: var(--accent-blue); opacity: 1; }
:where(body.page-explore) .rep-boot-btn.chosen.oppose { background: rgb(180,30,30); color: var(--white); border-color: rgb(180,30,30); opacity: 1; }
:where(body.page-explore) .rep-boot-reveal { margin-top: 14px; }
:where(body.page-explore) .rep-boot-youwrote { font-size: 0.82rem; font-weight: 600; color: var(--card-text); margin-bottom: 8px; }
:where(body.page-explore) .rep-boot-reveal .rep-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; }
:where(body.page-explore) .rep-boot-reveal .rep-expand { border-top: none; padding: 8px 2px; }

/* ── Ported list modules (In the News / Fresh bills / Trades / Rooms / State) ── */
:where(body.page-explore) .explore-news-list, :where(body.page-explore) .explore-trade-list, :where(body.page-explore) .explore-bill-list, :where(body.page-explore) .explore-room-list {
  overflow: hidden;
}
:where(body.page-explore) .explore-news-item, :where(body.page-explore) .explore-trade-item, :where(body.page-explore) .explore-bill-item, :where(body.page-explore) .explore-room-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); text-decoration: none; transition: background var(--dur-press-in) var(--ease-stately);
}
:where(body.page-explore) .explore-news-item:last-child, :where(body.page-explore) .explore-trade-item:last-child,
:where(body.page-explore) .explore-bill-item:last-child, :where(body.page-explore) .explore-room-item:last-child { border-bottom: none; }
:where(body.page-explore) .explore-news-item:hover, :where(body.page-explore) .explore-trade-item:hover, :where(body.page-explore) .explore-bill-item:hover, :where(body.page-explore) .explore-room-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] :where(body.page-explore) .explore-news-item:hover, [data-theme="dark"] :where(body.page-explore) .explore-trade-item:hover,
[data-theme="dark"] :where(body.page-explore) .explore-bill-item:hover, [data-theme="dark"] :where(body.page-explore) .explore-room-item:hover { background: rgba(255,255,255,0.04); }

:where(body.page-explore) .explore-news-photo, :where(body.page-explore) .explore-news-initial { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--border); border: 2px solid transparent; }
:where(body.page-explore) .explore-news-photo { object-fit: cover; }
:where(body.page-explore) .explore-news-photo.dem, :where(body.page-explore) .explore-news-initial.dem { border-color: var(--accent-blue); }
:where(body.page-explore) .explore-news-photo.rep, :where(body.page-explore) .explore-news-initial.rep { border-color: rgb(180,30,30); }
:where(body.page-explore) .explore-news-initial { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; color: var(--muted); }
:where(body.page-explore) .explore-news-initial.dem { color: var(--accent-blue); }
:where(body.page-explore) .explore-news-initial.rep { color: rgb(180,30,30); }
:where(body.page-explore) .explore-news-body { flex: 1; min-width: 0; }
:where(body.page-explore) .explore-news-name { font-size: 0.84rem; font-weight: 700; color: var(--card-text); margin-bottom: 1px; }
:where(body.page-explore) .explore-news-headline { font-size: 0.76rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
:where(body.page-explore) .explore-news-count { flex-shrink: 0; font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

:where(body.page-explore) .explore-bill-num { flex-shrink: 0; font-size: 0.7rem; font-weight: 800; color: var(--accent-blue); background: var(--accent-blue-tint); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
:where(body.page-explore) .explore-bill-title { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--card-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(body.page-explore) .explore-bill-meta { flex-shrink: 0; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

:where(body.page-explore) .explore-trade-ticker { flex-shrink: 0; width: 56px; font-size: 0.78rem; font-weight: 800; color: var(--card-text); background: var(--border); padding: 4px 0; border-radius: 6px; text-align: center; }
:where(body.page-explore) .explore-trade-body { flex: 1; min-width: 0; }
:where(body.page-explore) .explore-trade-name { font-size: 0.82rem; font-weight: 700; color: var(--card-text); }
:where(body.page-explore) .explore-trade-meta { font-size: 0.72rem; color: var(--muted); }
:where(body.page-explore) .explore-trade-type { flex-shrink: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
:where(body.page-explore) .explore-trade-type.buy { background: rgba(22,163,74,0.12); color: #16a34a; }
:where(body.page-explore) .explore-trade-type.sell { background: rgba(220,38,38,0.10); color: #dc2626; }
[data-theme="dark"] :where(body.page-explore) .explore-trade-type.buy { background: rgba(22,163,74,0.20); }
[data-theme="dark"] :where(body.page-explore) .explore-trade-type.sell { background: rgba(220,38,38,0.18); }

:where(body.page-explore) .explore-state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
:where(body.page-explore) .explore-official { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-stately); }
:where(body.page-explore) .explore-official:hover { border-color: var(--accent-blue); }
:where(body.page-explore) .explore-official-photo, :where(body.page-explore) .explore-official-initial { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; display: block; border: 3px solid transparent; background: var(--border); }
:where(body.page-explore) .explore-official-photo { object-fit: cover; }
:where(body.page-explore) .explore-official-initial { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: var(--muted); }
:where(body.page-explore) .explore-official-photo.dem { border-color: var(--accent-blue); }
:where(body.page-explore) .explore-official-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-explore) .explore-official-initial.dem { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-explore) .explore-official-initial.rep { border-color: rgb(180,30,30); color: rgb(180,30,30); }
:where(body.page-explore) .explore-official-name { font-size: 0.84rem; font-weight: 700; color: var(--card-text); margin-bottom: 2px; }
:where(body.page-explore) .explore-official-role { font-size: 0.72rem; color: var(--muted); }

:where(body.page-explore) .explore-room-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-blue-tint); color: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
:where(body.page-explore) .explore-room-body { flex: 1; min-width: 0; }
:where(body.page-explore) .explore-room-name { font-size: 0.875rem; font-weight: 700; color: var(--card-text); }
:where(body.page-explore) .explore-room-desc { font-size: 0.775rem; color: var(--card-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body.page-explore) .explore-room-badge { font-size: 0.72rem; font-weight: 700; color: var(--card-muted); white-space: nowrap; flex-shrink: 0; }

/* America's middle column is navy — give the bordered cards a light surface
   so their dark text stays readable (matching the rest of that theme). */
[data-theme="america"] :where(body.page-explore, body.page-landing) .cg-card, [data-theme="america"] :where(body.page-explore) .yr-card, [data-theme="america"] :where(body.page-explore) .tv-card,
[data-theme="america"] :where(body.page-explore) .mod-empty-card, [data-theme="america"] :where(body.page-explore) .explore-news-list,
[data-theme="america"] :where(body.page-explore) .explore-trade-list, [data-theme="america"] :where(body.page-explore) .explore-bill-list,
[data-theme="america"] :where(body.page-explore) .explore-room-list, [data-theme="america"] :where(body.page-explore) .explore-official,
[data-theme="america"] :where(body.page-explore) .rep-block, [data-theme="america"] :where(body.page-explore) .rep-bootstrap,
[data-theme="america"] :where(body.page-explore) .brief-empty { background: var(--surface-card); }

/* ── Hover-lift (cycle 009) ── a calm, :where(body.page-explore) tactile lift on the card-shaped
   modules. The connected list rows (news / fresh-bills / trades / rooms)
   keep their existing background-hover instead — lifting joined rows out of
   a single bordered list would read as motion noise, :where(body.page-explore) not warmth. The shadow
   applies to everyone; the transform is gated on prefers-reduced-motion. */
/* Hover-lift now applies to the whole module card (cycle 009c): lift from the
   resting --shadow-sm to --shadow-md; transform gated on reduced-motion. */
:where(body.page-explore) .brief-module { transition: box-shadow var(--dur-micro) var(--ease-stately), transform var(--dur-micro) var(--ease-stately); }
:where(body.page-explore) .brief-module:hover { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) {
  :where(body.page-explore) .brief-module:hover { transform: translateY(-2px); }
}


/* ================================================================
   PAGE: following.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Per-section empty state ── */
:where(body.page-following) .bookmarks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  margin-bottom: 20px;
}
:where(body.page-following) .bookmarks-empty-icon { font-size: 2rem; line-height: 1; }
:where(body.page-following) .bookmarks-empty-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--card-text);
}
:where(body.page-following) .bookmarks-empty-sub {
  font-size: 0.82rem;
  color: var(--card-muted);
  max-width: 280px;
  line-height: 1.5;
}
:where(body.page-following) .bookmarks-empty-cta {
  font-size: 0.8rem;
  font-weight: 700;
  /* Blue accent (owner call): calmer / more inviting than red for an empty
     state. --accent-blue adapts per theme (medium blue light, #7fb0ee dark). */
  color: var(--accent-blue);
  text-decoration: none;
  border: 1.5px solid var(--accent-blue);
  border-radius: 999px;
  padding: 6px 16px;
  margin-top: 4px;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-following) .bookmarks-empty-cta:hover { background: var(--accent-blue); color: var(--white); }
/* Dark-mode hover fill is light blue, so dark text stays legible on it. */
[data-theme="dark"] :where(body.page-following) .bookmarks-empty-cta:hover { color: #12203a; }

:where(body.page-following) .bm-loading {
  padding: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Type chips (filter the feed by type; counts are live). Scope widened
   cycle 071 (the bill-meta precedent): account.html's civic-ledger chips
   reuse this SAME family verbatim, not a clone. ── */
:where(body.page-following, body.page-account) .bm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:where(body.page-following, body.page-account) .bm-chips:empty { display: none; }
/* Visually hidden but available to screen readers (the live status region). */
:where(body.page-following, body.page-account) .bm-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;
}
:where(body.page-following, body.page-account) .bm-chip {
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--card-muted); background: transparent;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
:where(body.page-following, body.page-account) .bm-chip:hover { border-color: #cf4b4b; color: #cf4b4b; }
/* The deep maroon hover vanished against the dark/navy backgrounds — use a
   soft light red on those themes so the hovered chip actually reads. */
[data-theme="dark"] :where(body.page-following, body.page-account) .bm-chip:hover,
[data-theme="america"] :where(body.page-following, body.page-account) .bm-chip:hover { border-color: #f4a7a7; color: #f4a7a7; }
:where(body.page-following, body.page-account) .bm-chip.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
:where(body.page-following, body.page-account) .bm-chip-count {
  font-size: 0.72rem; font-weight: 800;
  background: var(--border); color: var(--card-muted);
  border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center;
}
:where(body.page-following, body.page-account) .bm-chip.active .bm-chip-count { background: rgba(255,255,255,0.25); color: var(--white); }
[data-theme="america"] :where(body.page-following, body.page-account) .bm-chip.active { color: var(--white); }

/* ── Friends rail (right sidebar — navy bg, :where(body.page-following) light text) ── */
:where(body.page-following) .bm-rail-friend { display: flex; align-items: center; gap: 9px; padding: 6px 0; text-decoration: none; }
:where(body.page-following) .bm-rail-friend .bm-initial { width: 30px; height: 30px; font-size: 0.8rem; }
:where(body.page-following) .bm-rail-name {
  font-size: 0.82rem; font-weight: 600; color: var(--sidebar-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(body.page-following) .bm-rail-friend:hover .bm-rail-name { text-decoration: underline; }
:where(body.page-following) .bm-rail-meta { font-size: 0.72rem; color: var(--sidebar-muted); margin-left: auto; flex-shrink: 0; }
:where(body.page-following) .bm-rail-manage { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: #f4a7a7; text-decoration: none; }
:where(body.page-following) .bm-rail-manage:hover { text-decoration: underline; }
:where(body.page-following) .bm-rail-empty { font-size: 0.82rem; color: var(--sidebar-muted); }

/* ── Activity strip (cycle 068): unread-inbox events, shown above the
   watchlist. Hidden entirely at zero events (the caught-up line takes its
   place — see #fw-caught-up in the HTML). ── */
:where(body.page-following) .fw-strip {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 6px;
  margin-bottom: 20px;
}
:where(body.page-following) .fw-strip-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
:where(body.page-following) .fw-strip-title { font-weight: 800; font-size: 0.82rem; color: var(--card-text); }
:where(body.page-following) .fw-strip-count {
  background: var(--accent); color: var(--white); border-radius: 999px;
  padding: 1px 8px; font-size: 0.7rem; margin-left: 6px;
}
:where(body.page-following) .fw-clear-all {
  font-family: inherit; background: none; border: none; cursor: pointer;
  color: var(--card-muted); font-size: 0.74rem; text-decoration: underline; padding: 0;
}
:where(body.page-following) .fw-caught-up {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px; margin-bottom: 20px; text-align: center;
  font-size: 0.82rem; color: var(--card-muted);
}
:where(body.page-following) .fw-event {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.8rem;
}
:where(body.page-following) .fw-event:first-child { border-top: none; }
/* Seen events grey out (still ✕-able) but the whole row stays legible --
   opacity alone would also fade the ✕, which must stay easy to hit. */
:where(body.page-following) .fw-event.is-seen .fw-event-link { opacity: 0.5; }
:where(body.page-following) .fw-event-icon {
  flex: 0 0 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: var(--white); text-transform: uppercase;
}
/* Same type palette as the retired .bm-row left-edge marks, extended for
   the two new trackable kinds (nominations/treaties). */
:where(body.page-following) .fw-event-icon.fw-t-bill { background: #3d7fd4; }
:where(body.page-following) .fw-event-icon.fw-t-politician { background: #c026d3; }
:where(body.page-following) .fw-event-icon.fw-t-race { background: var(--accent); }
:where(body.page-following) .fw-event-icon.fw-t-nom { background: #16a34a; }
:where(body.page-following) .fw-event-icon.fw-t-td { background: #0d9488; }
:where(body.page-following) .fw-event-link {
  flex: 1; min-width: 0; display: block; text-decoration: none; color: var(--card-text);
}
:where(body.page-following) .fw-event-title { font-weight: 700; }
:where(body.page-following) .fw-event-sub { color: var(--card-muted); display: block; margin-top: 1px; }
:where(body.page-following) .fw-event-x {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--card-muted); font-weight: 700; padding: 0 4px; font-size: 0.9rem;
}
:where(body.page-following) .fw-event-x:hover { color: #dc2626; }

/* ── Watchlist: one .fw-card family, type modifiers only -- no per-type
   clone (structural rule). "B plus stage bar" depth: header row · title ·
   stage bar (bills family only) · highlighted latest-action box ·
   sentiment bar (PnyxSentiment.buildTugHtml, reused verbatim). ── */
:where(body.page-following) .fw-list { margin-bottom: 20px; }
:where(body.page-following) .fw-card {
  background: var(--card);
  color: var(--card-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* Right padding reserves a column for the absolute .fw-remove (cycle 070)
     -- content can never collide with it, on any card, at any width. */
  padding: 13px 44px 13px 15px;
  margin-bottom: 10px;
  position: relative;
}
:where(body.page-following) .fw-card-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(body.page-following) .fw-card-meta { color: var(--card-muted); font-size: 0.75rem; margin-left: auto; white-space: nowrap; }
:where(body.page-following) .fw-card-title-link { text-decoration: none; }
:where(body.page-following) .fw-card-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.9rem; line-height: 1.3; color: var(--card-text); margin: 5px 0 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Action line (cycle 070): calmed down -- no box, no bold-blue action text.
   "Latest:" and the date are the quiet muted bits; the action text itself
   reads as plain card-text. Full text kept, nothing truncated. */
:where(body.page-following) .fw-card-action { font-size: 0.78rem; margin-top: 7px; color: var(--card-text); }
:where(body.page-following) .fw-action-muted { color: var(--card-muted); }

/* Following bill card meta row (cycle 108): pin the activity time to the
   row's top-right in its own non-shrinking column, so the chips wrap beneath
   it instead of shoving "23 days ago" onto its own line. */
:where(body.page-following) .bill-meta { flex-wrap: nowrap; align-items: flex-start; }
:where(body.page-following) .bill-meta-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
}
:where(body.page-following) .bill-date {
  margin-left: 0; flex-shrink: 0; white-space: nowrap; padding-top: 3px;
}
/* Breathing room above the public-opinion bar (cycle 108) -- it was sitting
   right on top of the "Latest:" action line. */
:where(body.page-following) .fw-card .bill-tugwar { margin-top: 14px; }

/* The stage bar -- 5 segments, bills-family cards only. The current-stage
   caption above it (cycle 108) restores the context a prior cycle dropped:
   the bar shows progress, the label names the stage the bill sits at now.
   .fw-stage owns the top gap; the label owns the label->bar gap. */
:where(body.page-following) .fw-stage { margin-top: 10px; }
:where(body.page-following) .fw-stage-label {
  font-size: 0.72rem; font-weight: 700; color: var(--card-text); margin-bottom: 5px;
}
:where(body.page-following) .fw-stage-bar { display: flex; gap: 3px; }
:where(body.page-following) .fw-stage-bar i {
  flex: 1; height: 5px; border-radius: 999px; background: var(--border); font-style: normal;
}
:where(body.page-following) .fw-stage-bar i.on { background: var(--accent-blue); }
/* :not(.on) is load-bearing (cycle 070 fix): without it, this rule and
   i.on above are EQUALLY specific (2 class-tier selectors + 1 element each),
   so source order alone decided the winner -- this rule, being later, was
   painting EVERY segment (on or off) the same dark "off" gray, regardless
   of stage_index. Every card in every theme showed all segments off. */
[data-theme="dark"] :where(body.page-following) .fw-stage-bar i:not(.on) { background: rgba(255,255,255,0.12); }

/* Shared 40px identity slot + two-line rhythm (cycle 070): politician AND
   room cards use this -- one definition, not a per-type clone. Icon/avatar
   beside a flex:1 title+meta column. */
:where(body.page-following) .fw-card-identity { display: flex; gap: 12px; }
:where(body.page-following) .fw-votes { margin-top: 4px; }
:where(body.page-following) .fw-votes li { font-size: 0.76rem; margin-top: 4px; color: var(--card-text); list-style: none; }
:where(body.page-following) .fw-vote-tag {
  font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 6px;
  color: var(--white); margin-right: 5px; text-transform: uppercase;
}
:where(body.page-following) .fw-vote-tag.yea { background: #2f855a; }
:where(body.page-following) .fw-vote-tag.nay { background: #b03030; }
:where(body.page-following) .fw-vote-tag.abstain,
:where(body.page-following) .fw-vote-tag.not-voting { background: var(--card-muted); }

/* Countdown (cycle 070): muted, not maroon -- maroon is for alarms, not
   calendars. Matches the quiet tone of the rest of the card. */
:where(body.page-following) .fw-countdown { font-size: 0.75rem; font-weight: 700; color: var(--card-muted); }

:where(body.page-following) .fw-remove {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: transparent; color: var(--card-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  opacity: 0.4; transition: opacity var(--dur-press-in) var(--ease-stately), background var(--dur-press-in) var(--ease-stately), color var(--dur-press-in) var(--ease-stately);
}
:where(body.page-following) .fw-card:hover .fw-remove { opacity: 1; }
:where(body.page-following) .fw-remove:hover { background: rgba(220,38,38,0.12); color: #dc2626; }
:where(body.page-following) .fw-remove:focus-visible { opacity: 1; outline: 2px solid var(--accent); }


/* Politician / friend avatars */
:where(body.page-following) .bm-photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-following) .bm-photo.dem { border-color: var(--accent-blue); }
:where(body.page-following) .bm-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-following) .bm-initial {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; color: var(--muted);
  background: var(--border);
  border: 2px solid transparent;
  overflow: hidden;
}
:where(body.page-following) .bm-initial.dem { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-following) .bm-initial.rep { border-color: rgb(180,30,30); color: rgb(180,30,30); }
:where(body.page-following) .bm-initial img { width: 100%; height: 100%; object-fit: cover; }

/* Room / election icon disc (Feather line SVGs) */
/* Amber chip: a soft amber tint with an amber glyph. The glyph goes darker
   in light mode (so it reads on the pale feed) and brighter on the
   navy/dark themes. */
:where(body.page-following) .bm-room-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,168,58,0.16);
  color: #b45309;
}
[data-theme="dark"] :where(body.page-following) .bm-room-icon,
[data-theme="america"] :where(body.page-following) .bm-room-icon { color: #e0a83a; }
:where(body.page-following) .bm-room-icon svg { width: 20px; height: 20px; }
:where(body.page-following) .bm-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 5px;
}

/* Remove (×) button — visible at rest (so it works on touch, :where(body.page-following) where there
   is no hover); hover/focus just makes it more prominent. */
:where(body.page-following) .bm-remove {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--dur-press-in) var(--ease-stately), background var(--dur-press-in) var(--ease-stately), color var(--dur-press-in) var(--ease-stately);
}
:where(body.page-following) .bm-row:hover .bm-remove { opacity: 1; }
:where(body.page-following) .bm-remove:hover { background: rgba(220,38,38,0.12); color: #dc2626; }
/* Keyboard focus shows it too */
:where(body.page-following) .bm-remove:focus-visible { opacity: 1; outline: 2px solid var(--accent); }

/* ── Undo toast — bottom-center, :where(body.page-following) one at a time ── */
:where(body.page-following) .bm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-press-out) var(--ease-stately), transform var(--dur-press-out) var(--ease-stately);
  max-width: min(480px, 90vw);
}
:where(body.page-following) .bm-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
:where(body.page-following) .bm-toast-undo {
  background: none;
  border: none;
  color: #93c5fd;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
:where(body.page-following) .bm-toast-undo:hover { text-decoration: underline; }

/* ── Global empty state (nothing saved anywhere) ── */
:where(body.page-following) .bm-global-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
:where(body.page-following) .bm-global-empty-icon { font-size: 2.6rem; line-height: 1; }
:where(body.page-following) .bm-global-empty-title { font-size: 1.05rem; font-weight: 800; color: var(--card-text); }
:where(body.page-following) .bm-global-empty-sub {
  font-size: 0.85rem; color: var(--card-muted);
  max-width: 360px; line-height: 1.55;
}
:where(body.page-following) .bm-global-empty-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

:where(body.page-following) .bm-search-empty { padding: 18px 4px; font-size: 0.85rem; color: var(--card-muted); font-style: italic; }


/* ================================================================
   PAGE: friends.html   (moved from its inline <style> block)
   NOTE: selectors touching .btn-danger are scoped
   :where(body.page-friends) — same class names are styled differently
   on another page; :where() adds no specificity.
   ================================================================ */

/* ── Search bar ── */
:where(body.page-friends) .friends-search-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
:where(body.page-friends) .friends-search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  background: var(--card);
  color: var(--card-text);
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-friends) .friends-search-input:focus { border-color: var(--accent); }
:where(body.page-friends) .friends-search-btn {
  padding: 10px 18px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-stately);
}
:where(body.page-friends) .friends-search-btn:hover { opacity: 0.85; }

/* ── User cards ── */
:where(body.page-friends) .friends-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
:where(body.page-friends) .friend-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
:where(body.page-friends) .friend-card + .friend-card {
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
}
:where(body.page-friends) .friends-list .friend-card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
:where(body.page-friends) .friends-list .friend-card:last-child  { border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-sm); }
:where(body.page-friends) .friends-list .friend-card:only-child  { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

:where(body.page-friends) .friend-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3560, #0b2f63);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
:where(body.page-friends) .friend-info { flex: 1; min-width: 0; }
:where(body.page-friends) .friend-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--card-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(body.page-friends) .friend-meta {
  font-size: 0.78rem;
  color: var(--card-muted);
  margin-top: 2px;
}
:where(body.page-friends) .friend-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Buttons ── */
:where(body.page-friends) .btn-sm {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity var(--dur-micro) var(--ease-stately);
}
:where(body.page-friends) .btn-sm:hover { opacity: 0.8; }
:where(body.page-friends) .btn-primary   { background: var(--accent); color: var(--white); }
:where(body.page-friends) .btn-ghost     { background: transparent; color: var(--card-muted); border: 1px solid var(--border); }
:where(body.page-friends) .btn-danger    { background: transparent; color: #c0392b; border: 1px solid #e0a0a0; }
:where(body.page-friends) .btn-success   { background: #1a7a3f; color: var(--white); }
:where(body.page-friends) .btn-disabled  { background: var(--border); color: var(--card-muted); cursor: default; pointer-events: none; }

/* ── Empty state ── */
:where(body.page-friends) .friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
:where(body.page-friends) .friends-empty-icon { font-size: 2rem; color: var(--card-muted); }
:where(body.page-friends) .friends-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--card-text); line-height: 1.5; }
:where(body.page-friends) .friends-empty-sub   { font-size: 0.82rem; color: var(--card-muted); max-width: 240px; line-height: 1.5; }

/* ── Dark theme overrides ── */
[data-theme="dark"] :where(body.page-friends) .friend-card,
[data-theme="dark"] :where(body.page-friends) .friends-empty { background: var(--surface-card); }

[data-theme="dark"] :where(body.page-friends) .friend-name   { color: var(--ink); }
[data-theme="dark"] :where(body.page-friends) .friend-meta   { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-friends) .friends-empty-title { color: var(--ink); }
[data-theme="dark"] :where(body.page-friends) .friends-empty-sub   { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-friends) .friends-search-input {
  background: var(--surface-card);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
}
[data-theme="dark"] :where(body.page-friends) .btn-ghost {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
}
[data-theme="dark"] :where(body.page-friends) .btn-danger { border-color: rgba(192,57,43,0.5); }

/* ── Toast ── */
:where(body.page-friends) #friends-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1a3560;
  color: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 999;
  transition: transform var(--dur-press-out) var(--ease-stately);
  pointer-events: none;
}
:where(body.page-friends) #friends-toast.show { transform: translateX(-50%) translateY(0); }


/* ================================================================
   PAGE: glossary.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Page-specific styles ── */
:where(body.page-glossary) .gl-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { :where(body.page-glossary) .gl-card { padding: 18px 16px; } }

/* ================================================================
   PAGE: terms.html + privacy.html  (cycle 130)
   Static legal prose. Reuses the glossary card model + theme tokens
   (no colour literals); the 109 serif/kicker rules apply to the
   headings automatically. Read-width column so long text stays legible.
   ================================================================ */
:where(body.page-terms, body.page-privacy) .legal-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px 36px;
  margin-bottom: 14px;
  max-width: 760px;
  color: var(--card-text);
}
:where(body.page-terms, body.page-privacy) .legal-title {
  font-size: 1.7rem;
  margin: 4px 0 18px;
  color: var(--card-text);
}
:where(body.page-terms, body.page-privacy) .legal-card h2 {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 26px 0 8px;
  color: var(--card-text);
}
:where(body.page-terms, body.page-privacy) .legal-card p,
:where(body.page-terms, body.page-privacy) .legal-card li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--card-text);
}
:where(body.page-terms, body.page-privacy) .legal-card ul { margin: 8px 0 8px 1.1rem; }
:where(body.page-terms, body.page-privacy) .legal-card li { margin-bottom: 6px; }
:where(body.page-terms, body.page-privacy) .legal-card a { color: var(--accent-blue); }
:where(body.page-terms, body.page-privacy) .legal-card code {
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bar-bg);
}
/* The attorney-review notice: a calm, clearly-marked banner (amber-ish via the
   existing warning token if present, else a bordered box on tokens). */
:where(body.page-terms, body.page-privacy) .legal-banner {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--card-muted);
}
:where(body.page-terms, body.page-privacy) .legal-meta {
  font-size: 0.82rem;
  color: var(--card-muted);
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  :where(body.page-terms, body.page-privacy) .legal-card { padding: 22px 18px; }
}

/* Register-form consent checkbox (cycle 130) — login.html #reg-consent. */
.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 14px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.reg-consent input { margin-top: 2px; flex-shrink: 0; }
.reg-consent a { color: var(--accent-blue); font-weight: 600; }

/* The two legal links injected into every .sidebar-footer (auth.js
   decorateSidebar, cycle 130). One definition, theme-token colours. */
.sidebar-legal {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px 2px;
  font-size: 0.72rem;
}
.sidebar-legal a { color: var(--sidebar-muted, var(--muted)); text-decoration: none; }
.sidebar-legal a:hover { text-decoration: underline; }
.sidebar-legal span { color: var(--sidebar-muted, var(--muted)); opacity: 0.6; }

:where(body.page-glossary) .gl-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--card-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
:where(body.page-glossary) .gl-subtitle {
  font-size: 0.86rem;
  color: var(--card-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Search */
:where(body.page-glossary) .gl-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
:where(body.page-glossary) .gl-search {
  width: 100%;
  padding: 11px 14px 11px 38px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--bar-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--card-text);
  transition: border-color var(--dur-micro) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
}
:where(body.page-glossary) .gl-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.15);
}
:where(body.page-glossary) .gl-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--card-muted);
  pointer-events: none;
}

/* Category filter chips */
:where(body.page-glossary) .gl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
:where(body.page-glossary) .gl-cat {
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bar-bg);
  color: var(--card-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-glossary) .gl-cat:hover { color: var(--card-text); }
:where(body.page-glossary) .gl-cat.active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* A-Z jump */
:where(body.page-glossary) .gl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
:where(body.page-glossary) .gl-jump-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--dur-press-in) var(--ease-stately);
}
:where(body.page-glossary) .gl-jump-letter:hover { background: var(--bar-bg); }
:where(body.page-glossary) .gl-jump-letter.disabled {
  color: var(--card-muted);
  opacity: 0.35;
  pointer-events: none;
}

/* Letter section */
:where(body.page-glossary) .gl-letter-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 22px 18px;
  margin-bottom: 12px;
}
@media (max-width: 640px) { :where(body.page-glossary) .gl-letter-section { padding: 14px 14px 16px; } }

:where(body.page-glossary) .gl-letter-heading {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--bar-bg);
  scroll-margin-top: 12px;
}

:where(body.page-glossary) .gl-term {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: padding-left var(--dur-micro) var(--ease-stately);
}
:where(body.page-glossary) .gl-term:last-child { border-bottom: none; }
:where(body.page-glossary) .gl-term:hover { padding-left: 4px; }
:where(body.page-glossary) .gl-term-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--card-text);
  margin-bottom: 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
:where(body.page-glossary) .gl-term-cat {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--card-muted);
  background: var(--bar-bg);
  padding: 2px 7px;
  border-radius: 4px;
}
:where(body.page-glossary) .gl-term-def {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--card-muted);
}
:where(body.page-glossary) .gl-term-def.placeholder {
  font-style: italic;
  opacity: 0.7;
}

/* Empty state */
:where(body.page-glossary) .gl-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--card-muted);
  font-size: 0.9rem;
}

/* Definition side panel — covers the right sidebar */
:where(body.page-glossary) .gl-defpanel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px 18px 20px;
  /* Inset the card 18px from the sidebar edges so it lines up with the
     content of the other segments (.sidebar-box uses 18px side padding). */
  margin: 0 18px;
  position: sticky;
  top: 18px;
}
:where(body.page-glossary) .gl-defpanel-empty {
  color: var(--card-muted);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  padding: 14px 4px;
}
:where(body.page-glossary) .gl-defpanel-empty-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  opacity: 0.6;
  color: var(--muted);
}
:where(body.page-glossary) .gl-defpanel-term {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--card-text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
:where(body.page-glossary) .gl-defpanel-cat {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 12px;
}
:where(body.page-glossary) .gl-defpanel-def {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--card-text);
  margin-bottom: 14px;
}
:where(body.page-glossary) .gl-defpanel-def.placeholder {
  font-style: italic;
  color: var(--card-muted);
  opacity: 0.85;
}
:where(body.page-glossary) .gl-defpanel-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--card-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-glossary) .gl-defpanel-close:hover {
  background: var(--bar-bg);
  color: var(--card-text);
}


/* ================================================================
   PAGE: legislation-details.html   (moved from its inline <style> block)
   NOTE: selectors touching .party-badge are scoped
   :where(body.page-legislation-details) — same class names are styled differently
   on another page; :where() adds no specificity.
   ================================================================ */

/* ── Page layout ── */
:where(body.page-legislation-details) .law-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color var(--dur-micro) var(--ease-stately);
}
:where(body.page-legislation-details) .law-back:hover { color: var(--accent); }
:where(body.page-legislation-details) .law-back svg { width: 14px; height: 14px; }

:where(body.page-legislation-details) .law-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { :where(body.page-legislation-details) .law-card { padding: 20px 18px; } }

/* ── Header ── */
:where(body.page-legislation-details) .law-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* Match the .bill-num badge on legislation.html exactly — same font size,
   :where(body.page-legislation-details) weight, :where(body.page-legislation-details) padding, :where(body.page-legislation-details) colors, :where(body.page-legislation-details) no letter-spacing, :where(body.page-legislation-details) and no uppercase
   transform (so "H.Res. 1333" renders as authored, :where(body.page-legislation-details) not "H.RES. 1333"). */
:where(body.page-legislation-details) .law-bill-num {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8edf8;
  color: var(--navy);
}
[data-theme="dark"] :where(body.page-legislation-details) .law-bill-num { background: var(--hairline-default); color: rgba(255,255,255,0.82); }
[data-theme="america"] :where(body.page-legislation-details) .law-bill-num { background: #e8edf8; color: var(--navy); }
:where(body.page-legislation-details) .law-title {
  /* cycle 109: the shared detail-page title (all six thin detail pages
     carry this class) -- one of the serif trio's targets, bumped to
     --type-title alongside the new typeface. */
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 10px;
}
:where(body.page-legislation-details) .law-summary {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 18px;
}
:where(body.page-legislation-details) .law-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
:where(body.page-legislation-details) .law-meta-item strong { color: var(--text); }
:where(body.page-legislation-details) .law-full-link {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
:where(body.page-legislation-details) .law-full-link:hover { text-decoration: underline; }

/* ── Read Full Bill card ── */
:where(body.page-legislation-details) .law-fullbill-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
:where(body.page-legislation-details) .law-fullbill-text { flex: 1; min-width: 0; }
:where(body.page-legislation-details) .law-fullbill-source {
  font-size: 0.86rem;
  color: var(--card-muted);
  line-height: 1.45;
}
:where(body.page-legislation-details) .law-fullbill-source strong {
  color: var(--card-text);
  font-weight: 700;
}
:where(body.page-legislation-details) .law-fullbill-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--white);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}
:where(body.page-legislation-details) .law-fullbill-btn:hover  { background: var(--accent-dk); }
:where(body.page-legislation-details) .law-fullbill-btn:active { transform: translateY(1px); }

/* ── Section titles ── */
:where(body.page-legislation-details) .law-section-title {
  /* cycle 109 addendum: restyled to the kicker treatment (missed in the
     original sweep). Every usage (Progress, Chamber Votes, Community
     Sentiment, Latest action, Read Full Bill, The Constitution -- all six
     thin detail pages share this body class, so one rule covers all)
     is a plain block div, never a flex-row cohabitant with other inline
     content, so it gets the ::after accent rule below like most kickers.
     The dark/america color overrides at [data-theme="dark"|"america"]
     .law-section-title (grouped with .law-summary/.law-meta-row/etc.)
     are untouched -- they only ever set `color`, never font-size/weight/
     letter-spacing, so there's no conflict with this rule to reconcile;
     they're a legitimate per-card-context tuning of "muted ink" for this
     card family, not a stale remnant. */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 8px;
}
:where(body.page-legislation-details) .law-section-title::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

/* ── Progress timeline ──
   Wrapped in a container with left/right chevron buttons so the
   12-stage chain can scroll horizontally instead of squeezing the
   labels into ~50px columns. */
:where(body.page-legislation-details) .law-timeline-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Breathing room above the dots — keeps the larger 29px dots from
     feeling clipped against the section header. */
  padding-top: 14px;
}
:where(body.page-legislation-details) .law-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* `safe center` centers the steps when they all fit, but falls back
     to flex-start when content overflows — that way the chevron arrows
     can still scroll the full chain on long bills without losing
     steps off the left edge (which a plain `justify-content: center`
     would do under overflow). */
  justify-content: safe center;
  /* 8px top/bottom padding so the failed dot's 3px box-shadow ring
     renders with ~5px of comfortable clearance under overflow-y:hidden
     (5px barely cleared — bumped to 8 for safety on subpixel layouts). */
  padding: 8px 0 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
:where(body.page-legislation-details) .law-timeline::-webkit-scrollbar { display: none; }
:where(body.page-legislation-details) .law-timeline-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  padding: 0;
}
:where(body.page-legislation-details) .law-timeline-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
}
:where(body.page-legislation-details) .law-timeline-arrow[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
:where(body.page-legislation-details) .timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 90px;
  position: relative;
  cursor: default;
}
:where(body.page-legislation-details) .timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  /* Aligned to the vertical center of a 29px dot (14.5px), rounded
     to 14px — half-pixel offset is invisible. Horizontal start and
     width also derive from the 29px dot diameter. */
  top: 14px;
  left: calc(50% + 14.5px);
  width: calc(100% - 29px);
  height: 2px;
  background: var(--border);
}
/* Progress chain palette — blue (in-progress completed steps),
   :where(body.page-legislation-details) red (failed), :where(body.page-legislation-details) green (signed/became law), :where(body.page-legislation-details) orange (at-risk: tabled
   or failed-with-possibility-of-reconsideration). Connector lines
   between any two done steps are blue. */
:where(body.page-legislation-details) .timeline-step.done:not(:last-child)::after { background: #2e5f9f; }
:where(body.page-legislation-details) .timeline-dot {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--white);
  margin-bottom: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
:where(body.page-legislation-details) .timeline-step.done    .timeline-dot { background: #2e5f9f; border-color: #2e5f9f; }
/* Current stage — same blue fill as the done dots, :where(body.page-legislation-details) with a 3px grey
   box-shadow halo (same color as the failed dot's ring) so it reads
   as "you're here right now" without needing a separate fill color. */
:where(body.page-legislation-details) .timeline-step.current .timeline-dot {
  background: #2e5f9f;
  border-color: #2e5f9f;
  box-shadow: 0 0 0 1px #a3aab8;
}
/* Terminal-state colors — applied only to the rightmost real dot when
   the bill is in a corresponding bill.status. */
:where(body.page-legislation-details) .timeline-step.signed  .timeline-dot { background: #16a34a; border-color: #16a34a; }
/* At-risk mirrors the failed dot's treatment — same 3px grey ring for
   visual prominence — but keeps its orange fill instead of maroon.
   Burnt orange — saturated enough to still read as warm/alert without
   the alarm-clock brightness of a vivid orange-500. */
:where(body.page-legislation-details) .timeline-step.at-risk .timeline-dot {
  background: #c45525;
  border-color: #c45525;
  box-shadow: 0 0 0 3px #a3aab8;
}
/* Failed sticks with the deep maroon `var(--accent)`. The 3px grey
   ring is a box-shadow rather than a border so it doesn't eat into
   the dot's interior dimensions — same outer rendered size as the
   other 29px dots, :where(body.page-legislation-details) plus the ring sits outside the circle. */
:where(body.page-legislation-details) .timeline-step.failed  .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #a3aab8;
}
:where(body.page-legislation-details) .timeline-fail-x { width: 20px; height: 20px; }
/* future steps: hollow dot, :where(body.page-legislation-details) dashed connector */
:where(body.page-legislation-details) .timeline-step.future .timeline-dot {
  background: transparent;
  border-color: var(--border);
  border-style: dashed;
}
:where(body.page-legislation-details) .timeline-step.future:not(:last-child)::after {
  background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 4px, transparent 4px, transparent 8px);
}
/* done→future transition line */
:where(body.page-legislation-details) .timeline-step.current:not(:last-child)::after {
  background: repeating-linear-gradient(90deg, #2e5f9f 0, #2e5f9f 4px, transparent 4px, transparent 8px);
}
:where(body.page-legislation-details) .timeline-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  padding: 0 6px;
  word-break: normal;
  overflow-wrap: break-word;
}
:where(body.page-legislation-details) .timeline-step.done .timeline-label,
:where(body.page-legislation-details) .timeline-step.current .timeline-label { color: var(--text); }
:where(body.page-legislation-details) .timeline-step.future .timeline-label { color: var(--muted); opacity: 0.6; }
:where(body.page-legislation-details) .timeline-date {
  font-size: 0.6rem;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}

/* ── Timeline floating tooltip (fixed to viewport, :where(body.page-legislation-details) escapes overflow) ── */
:where(body.page-legislation-details) #tl-float {
  position: fixed;
  z-index: 9999;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-press-in) var(--ease-stately);
  overflow: visible;
  padding: 4px;
}
:where(body.page-legislation-details) #tl-float.visible { opacity: 1; }
:where(body.page-legislation-details) #tl-float .tl-tooltip {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  max-height: 220px;
  overflow-y: auto;
}
:where(body.page-legislation-details) .tl-tip-stage {
  font-size: 0.73rem;
  font-weight: 700;
  /* Use --card-text (not --text) so the header reads against the
     card background in dark mode — --text is the page-context text
     color (dark navy) which is nearly invisible on the dark card. */
  color: var(--card-text);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
:where(body.page-legislation-details) .tl-tip-item {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.4;
  padding: 4px 0;
}
/* Separator between consecutive items only (no border above the first
   item, :where(body.page-legislation-details) otherwise it stacks against the stage's border-bottom and
   reads as a double line). The previous `:first-of-type` selector
   never matched because `.tl-tip-stage` was the first <div> child. */
:where(body.page-legislation-details) .tl-tip-item + .tl-tip-item { border-top: 1px solid var(--border); }
:where(body.page-legislation-details) .tl-tip-date {
  font-size: 0.61rem;
  font-weight: 700;
  /* Blue (was --accent maroon). Theme-aware override below. */
  color: #357cc8;
  margin-bottom: 2px;
}
[data-theme="dark"] :where(body.page-legislation-details) .tl-tip-date { color: #93c5fd; }
:where(body.page-legislation-details) .tl-tip-empty { font-size: 0.68rem; color: var(--muted); font-style: italic; }
:where(body.page-legislation-details) #tl-float .tl-tip-arrow {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--border);
  margin: 0 auto;
  position: relative;
}
:where(body.page-legislation-details) #tl-float .tl-tip-arrow::after {
  content: '';
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--card);
  position: absolute;
  top: -8px;
  left: -6px;
}

/* ── Chamber vote ── */
:where(body.page-legislation-details) .law-vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
:where(body.page-legislation-details) .law-vote-box {
  background: #f4f6fb;
  border-radius: 8px;
  padding: 14px 16px;
}
:where(body.page-legislation-details) .law-vote-chamber {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
:where(body.page-legislation-details) .law-vote-tally {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
:where(body.page-legislation-details) .law-vote-tally .yea { color: #16a34a; }
:where(body.page-legislation-details) .law-vote-tally .nay { color: #dc2626; }
:where(body.page-legislation-details) .law-vote-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
:where(body.page-legislation-details) .law-vote-bar-fill { height: 100%; background: #16a34a; border-radius: 999px; }

/* ── Tug-of-war sentiment bar (uses tugwar-* classes from styles.css) ── */
:where(body.page-legislation-details) #sentiment-card .bill-tugwar {
  margin-bottom: 0;
}

/* Chamber vote bars — reuse the .bill-tugwar visual chrome with
   Yea/Nay-specific colors set inline in JS. Row wrapper keeps
   House and Senate bars cleanly stacked when both render. */
:where(body.page-legislation-details) .chamber-vote-row .bill-tugwar { margin-bottom: 0; }
:where(body.page-legislation-details) .chamber-vote-row-second { margin-top: 16px; }

/* ── Related bills ── */
:where(body.page-legislation-details) .law-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(body.page-legislation-details) .law-related-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #f4f6fb;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-stately);
}
:where(body.page-legislation-details) .law-related-item:hover { background: #e8ecf6; }
:where(body.page-legislation-details) .law-related-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  font-family: monospace;
  flex-shrink: 0;
  margin-top: 1px;
}
:where(body.page-legislation-details) .law-related-body {
  flex: 1;
  min-width: 0;
}
:where(body.page-legislation-details) .law-related-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:where(body.page-legislation-details) .law-related-cat {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Party badge ── */
:where(body.page-legislation-details) .party-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  vertical-align: middle;
}
:where(body.page-legislation-details) .party-badge-d { background: #2563eb; }
:where(body.page-legislation-details) .party-badge-r { background: #dc2626; }
:where(body.page-legislation-details) .party-badge-i { background: #7c3aed; }

/* ── Key facts card ── */
:where(body.page-legislation-details) .law-facts-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 32px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px 24px;
}
@media (max-width: 640px) { :where(body.page-legislation-details) .law-facts-card { padding: 14px 18px; } }
:where(body.page-legislation-details) .law-fact-item { display: flex; flex-direction: column; gap: 3px; }
:where(body.page-legislation-details) .law-fact-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
:where(body.page-legislation-details) .law-fact-value {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
  position: relative;
}

/* ── Inline tooltip ── */
:where(body.page-legislation-details) .fact-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  text-decoration: underline dotted rgba(0,0,0,0.25);
  text-underline-offset: 3px;
}
[data-theme="dark"] :where(body.page-legislation-details) .fact-tooltip-wrap {
  text-decoration-color: rgba(255,255,255,0.25);
}
:where(body.page-legislation-details) .fact-tooltip {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 7px);
  /* Anchor to the LEFT edge of the trigger by default so wide tooltips
     grow rightward into the card instead of leftward past the card
     edge (and visually into the sidebar). For triggers in the
     rightmost column of the fact-grid, add `.anchor-right` to
     flip the anchor. */
  left: 0;
  background: var(--ink);
  color: #e8ecf4;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: opacity var(--dur-micro) var(--ease-stately), visibility var(--dur-micro) var(--ease-stately);
  text-align: left;
}
:where(body.page-legislation-details) .fact-tooltip.wide { white-space: normal; min-width: 180px; max-width: 260px; }
:where(body.page-legislation-details) .fact-tooltip.anchor-right {
  left: auto;
  right: 0;
}
:where(body.page-legislation-details) .fact-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
:where(body.page-legislation-details) .fact-tooltip.anchor-right::after {
  left: auto;
  right: 16px;
}
:where(body.page-legislation-details) .fact-tooltip-wrap:hover .fact-tooltip { visibility: visible; opacity: 1; }

/* ── Sentiment vote buttons row ── */
:where(body.page-legislation-details) .sentiment-vote-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
:where(body.page-legislation-details) .sentiment-vote-row .btn-thumb { flex: 1; justify-content: center; }

/* ── Sentiment empty state ── */
:where(body.page-legislation-details) .sentiment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 4px;
}
:where(body.page-legislation-details) .sentiment-empty-prompt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
:where(body.page-legislation-details) .sentiment-empty-buttons {
  display: flex;
  gap: 10px;
}
:where(body.page-legislation-details) .sentiment-empty-buttons .btn-thumb { min-width: 110px; justify-content: center; }
:where(body.page-legislation-details) .sentiment-empty-note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Not found ── */
:where(body.page-legislation-details) .law-not-found {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
:where(body.page-legislation-details) .law-not-found h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }

/* ── Dark mode ── */
[data-theme="dark"] :where(body.page-legislation-details) .law-card,
[data-theme="dark"] :where(body.page-legislation-details) .law-facts-card    { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-legislation-details) .law-vote-box { background: #131d30; }
[data-theme="dark"] :where(body.page-legislation-details) .law-related-item { background: #131d30; }
[data-theme="dark"] :where(body.page-legislation-details) .law-related-item:hover { background: #243352; }
[data-theme="dark"] :where(body.page-legislation-details) .law-title,
[data-theme="dark"] :where(body.page-legislation-details) .law-vote-tally,
[data-theme="dark"] :where(body.page-legislation-details) .law-related-title,
[data-theme="dark"] :where(body.page-legislation-details) .law-fact-value    { color: var(--ink); }
[data-theme="dark"] :where(body.page-legislation-details) .law-summary,
[data-theme="dark"] :where(body.page-legislation-details) .law-section-title,
[data-theme="dark"] :where(body.page-legislation-details) .law-meta-row,
[data-theme="dark"] :where(body.page-legislation-details) .law-vote-chamber,
[data-theme="dark"] :where(body.page-legislation-details) .law-related-cat,
[data-theme="dark"] :where(body.page-legislation-details) .law-fact-label,
[data-theme="dark"] :where(body.page-legislation-details) .law-back,
[data-theme="dark"] :where(body.page-legislation-details) .timeline-label,
[data-theme="dark"] :where(body.page-legislation-details) .timeline-date { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step.done .timeline-label,
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step.current .timeline-label { color: rgba(255,255,255,0.85); }
/* Current dot uses the same blue + grey halo treatment across all
   themes — no separate dark-theme override needed. */
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step:not(:last-child)::after { background: var(--hairline-default); }
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step.done:not(:last-child)::after { background: #2e5f9f; }
[data-theme="dark"] :where(body.page-legislation-details) .law-meta-item strong { color: rgba(255,255,255,0.85); }
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step:not(:last-child)::after { background: var(--hairline-default); }
[data-theme="dark"] :where(body.page-legislation-details) .timeline-step.done:not(:last-child)::after { background: #2e5f9f; }
[data-theme="dark"] :where(body.page-legislation-details) .law-not-found h2 { color: rgba(255,255,255,0.85); }
/* Bill number in related list: accent is too dark on dark cards — use muted blue */
[data-theme="dark"] :where(body.page-legislation-details) .law-related-num { color: #5b9bd5; }
/* Category tag contrast in dark */
[data-theme="dark"] :where(body.page-legislation-details) .bill-category-tag { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.12); }
/* Sentiment empty state */
[data-theme="dark"] :where(body.page-legislation-details) .sentiment-empty-prompt { color: rgba(255,255,255,0.88); }
[data-theme="dark"] :where(body.page-legislation-details) .sentiment-empty-note   { color: rgba(255,255,255,0.38); }
[data-theme="america"] :where(body.page-legislation-details) .sentiment-empty-prompt { color: var(--ink); }
[data-theme="america"] :where(body.page-legislation-details) .sentiment-empty-note   { color: #5a6680; }

/* ── America mode ── */
[data-theme="america"] :where(body.page-legislation-details) .law-card,
[data-theme="america"] :where(body.page-legislation-details) .law-facts-card  { background: var(--white); }
[data-theme="america"] :where(body.page-legislation-details) .law-vote-box      { background: var(--surface-card); }
[data-theme="america"] :where(body.page-legislation-details) .law-related-item  { background: var(--surface-card); }
[data-theme="america"] :where(body.page-legislation-details) .law-related-item:hover { background: #d4daea; }
[data-theme="america"] :where(body.page-legislation-details) .law-title,
[data-theme="america"] :where(body.page-legislation-details) .law-vote-tally,
[data-theme="america"] :where(body.page-legislation-details) .law-related-title,
[data-theme="america"] :where(body.page-legislation-details) .law-fact-value    { color: var(--ink); }
[data-theme="america"] :where(body.page-legislation-details) .law-summary,
[data-theme="america"] :where(body.page-legislation-details) .law-section-title,
[data-theme="america"] :where(body.page-legislation-details) .law-meta-row,
[data-theme="america"] :where(body.page-legislation-details) .law-vote-chamber,
[data-theme="america"] :where(body.page-legislation-details) .law-related-cat,
[data-theme="america"] :where(body.page-legislation-details) .law-fact-label,
[data-theme="america"] :where(body.page-legislation-details) .law-meta-item,
[data-theme="america"] :where(body.page-legislation-details) .law-back          { color: #5a6680; }
[data-theme="america"] :where(body.page-legislation-details) .law-meta-item strong { color: var(--ink); }
[data-theme="america"] :where(body.page-legislation-details) .law-related-num   { color: var(--accent); }
[data-theme="america"] :where(body.page-legislation-details) .law-full-link     { color: var(--accent); }
[data-theme="america"] :where(body.page-legislation-details) .law-not-found h2  { color: var(--ink); }
[data-theme="america"] :where(body.page-legislation-details) .timeline-step:not(:last-child)::after { background: #c4cce0; }
[data-theme="america"] :where(body.page-legislation-details) .timeline-step.done .timeline-label,
[data-theme="america"] :where(body.page-legislation-details) .timeline-step.current .timeline-label { color: var(--ink); }


:where(body.page-legislation-details) .law-ctx-sponsor{display:flex;align-items:center;gap:9px;}
:where(body.page-legislation-details) .law-ctx-sponsor-text{display:flex;flex-direction:column;min-width:0;}
:where(body.page-legislation-details) .law-ctx-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
:where(body.page-legislation-details) .law-ctx-name{font-size:0.86rem;font-weight:600;color:var(--white);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-theme="light"] :where(body.page-legislation-details) .law-ctx-name{color:var(--ink);}
:where(body.page-legislation-details) .law-ctx-sub{font-size:0.72rem;color:var(--sidebar-muted);}
[data-theme="light"] :where(body.page-legislation-details) .law-ctx-sub{color:var(--ink-muted);}
:where(body.page-legislation-details) .law-ctx-bar-track{display:flex;height:18px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.08);}
[data-theme="light"] :where(body.page-legislation-details) .law-ctx-bar-track{background:rgba(11,47,99,0.08);}
:where(body.page-legislation-details) .law-ctx-bar-row{display:flex;justify-content:space-between;font-size:0.72rem;margin-top:5px;}
:where(body.page-legislation-details) .law-ctx-sup{color:#3fae82;font-weight:600;}
:where(body.page-legislation-details) .law-ctx-opp{color:#e2706e;font-weight:600;}
:where(body.page-legislation-details) .law-ctx-votes{font-size:0.68rem;color:var(--sidebar-muted);margin-top:2px;}
[data-theme="light"] :where(body.page-legislation-details) .law-ctx-votes{color:var(--ink-muted);}
:where(body.page-legislation-details) .law-ctx-empty{font-size:0.78rem;color:var(--sidebar-muted);}
[data-theme="light"] :where(body.page-legislation-details) .law-ctx-empty{color:var(--ink-muted);}


/* ================================================================
   PAGE: legislation.html   (moved from its inline <style> block)
   ================================================================ */

/* Section-header accordion shell: originally legislation-only (Explore,
   cycle 034), now shared with politicians.html's For-you tab (cycle 069) --
   one definition, two pages. */
:where(body.page-legislation, body.page-politicians) .exp-section { margin-bottom: 14px; }
:where(body.page-legislation, body.page-politicians) .exp-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--card-text); cursor: pointer; }
:where(body.page-legislation, body.page-politicians) .exp-head:hover { border-color: #3d7fd4; }
:where(body.page-legislation, body.page-politicians) .exp-head .exp-chev { transition: transform var(--dur-micro) var(--ease-stately); color: var(--muted); display: inline-flex; }
:where(body.page-legislation, body.page-politicians) .exp-head.open .exp-chev { transform: rotate(90deg); }
:where(body.page-legislation, body.page-politicians) .exp-head .exp-count { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
:where(body.page-legislation, body.page-politicians) .exp-body { padding-top: 10px; }
:where(body.page-legislation, body.page-politicians) .exp-more { margin: 4px 2px 2px; background: none; border: none; color: #3d7fd4; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 4px 2px; }
:where(body.page-legislation, body.page-politicians) .exp-more:hover { text-decoration: underline; }
:where(body.page-legislation, body.page-politicians) .exp-loading { color: var(--muted); font-size: 0.85rem; padding: 16px 2px; }
:where(body.page-legislation) .state-gather { display:flex; align-items:center; gap:8px; background:#fcf3f6; border:1px solid #efd6df;
  color:var(--accent); border-radius:8px; padding:9px 12px; font-weight:600; font-size:0.82rem; margin-bottom:12px; }
:where(body.page-legislation) .state-gather .sg-spin { width:13px; height:13px; border:2px solid #e3b9c7; border-top-color:var(--accent);
  border-radius:50%; animation:sgspin 0.8s linear infinite; flex:0 0 auto; }
@keyframes sgspin { to { transform:rotate(360deg); } }
/* Bills / Laws segmented toggle (cycle 025). */
:where(body.page-legislation) .bl-toggle { display:inline-flex; border:1.5px solid var(--border); border-radius:999px; overflow:hidden; background:var(--card); }
:where(body.page-legislation) .bl-seg { flex:1 1 0; box-sizing:border-box; min-width:64px; text-align:center; font:inherit; font-size:0.8rem; font-weight:700; padding:6px 14px; border:none; background:none;
  color:var(--muted); cursor:pointer; transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately); }
/* Archives replaces both segments — span the full two-segment width so the
   pill doesn't shrink when Archived is toggled on. */
:where(body.page-legislation) .bl-seg-archives { min-width:128px; }
/* The Constitution pill's two segments (Proposed/Existing) are wider than
   Bills/Laws — its Archives label needs a wider floor so the pill doesn't
   shrink when Archives collapses it (165px = the two segments' width). */
:where(body.page-legislation) #const-view-toggle .bl-seg-archives { min-width:165px; }
:where(body.page-legislation) .bl-seg.active { background:var(--accent); color:var(--white); }
[data-theme="dark"] :where(body.page-legislation) .bl-toggle { border-color:var(--hairline-strong); }
[data-theme="dark"] :where(body.page-legislation) .bl-seg.active { background:#7a1414; }
/* Archived button "on" state (reuses the shared .filter-info-btn shape). */
:where(body.page-legislation) #toggle-archived.active { color:var(--accent); background:rgba(128,0,0,0.08); border-radius:8px; }
[data-theme="dark"] :where(body.page-legislation) #toggle-archived.active { color:#f4a7a7; background:rgba(244,167,167,0.12); }

/* ── Sidebar table of contents (cycle 026) ── */
:where(body.page-legislation) #toc-box .toc-list { display:flex; flex-direction:column; gap:2px; }
:where(body.page-legislation) .toc-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
  border:1px solid transparent; border-radius:10px; padding:8px 10px; font-family:inherit; cursor:pointer; }
:where(body.page-legislation) .toc-row .toc-ico { flex:0 0 auto; width:18px; height:18px; color:var(--muted); }
/* Label stacked over its description — inline spans ran together. */
:where(body.page-legislation) .toc-row .toc-txt { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
:where(body.page-legislation) .toc-row .toc-label { font-size:0.9rem; font-weight:700; color:var(--card-text); line-height:1.15; }
:where(body.page-legislation) .toc-row .toc-sub { font-size:0.72rem; color:var(--muted); line-height:1.2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(body.page-legislation) .toc-row.live:hover { border-color:var(--border); background:var(--bg); }
:where(body.page-legislation) .toc-row.active { background:rgba(128,0,0,0.07); border-color:rgba(128,0,0,0.18); }
:where(body.page-legislation) .toc-row.active .toc-ico, :where(body.page-legislation) .toc-row.active .toc-label { color:var(--accent); }
[data-theme="dark"] :where(body.page-legislation) .toc-row.active { background:rgba(244,167,167,0.10); border-color:rgba(244,167,167,0.22); }
[data-theme="dark"] :where(body.page-legislation) .toc-row.active .toc-ico, [data-theme="dark"] :where(body.page-legislation) .toc-row.active .toc-label { color:#f4a7a7; }
:where(body.page-legislation) .toc-row.soon { cursor:default; opacity:0.62; }
:where(body.page-legislation) .toc-row.soon .toc-soon { font-size:0.6rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:1px 6px; margin-left:auto; align-self:center; }
/* Per-kind feed-size badge (cycle 106) — Federal / All-mode counts only. */
:where(body.page-legislation) .toc-row .toc-count { font-size:0.72rem; font-weight:800; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:1px 8px; margin-left:auto; align-self:center; flex:0 0 auto; }
:where(body.page-legislation) .toc-row.active .toc-count { color:var(--accent); border-color:rgba(128,0,0,0.18); }
[data-theme="dark"] :where(body.page-legislation) .toc-row.active .toc-count { color:#f4a7a7; border-color:rgba(244,167,167,0.22); }

/* Divided TOC section (cycle 073): the Executive branch reads as its OWN
   area, not a sixth row indistinguishable from the five Congress kinds --
   the doctrine's "own area" language made structural. A rule + a small
   uppercase label, nothing louder. */
:where(body.page-legislation) .toc-divider { display:flex; align-items:center; gap:8px; margin:10px 4px 4px; }
:where(body.page-legislation) .toc-divider::before { content:''; flex:1 1 auto; height:1px; background:var(--border); }
/* cycle 109 addendum: kicker typography, no ::after -- .toc-divider
   already trails this label with its own full-width ::before rule
   (styles.css, .toc-divider::before), so a second accent line would
   double up rather than accent a bare label. */
:where(body.page-legislation) .toc-divider-label { font-size:var(--type-caption); font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
[data-theme="dark"] :where(body.page-legislation) .toc-divider::before { background:rgba(255,255,255,0.12); }
[data-theme="dark"] :where(body.page-legislation) .toc-divider-label { color:rgba(255,255,255,0.45); }

/* Card purpose/lifecycle chips + funding-expiry line moved to the shared
   "BILL CARD META ROW" block in the base sheet above — they're bill-card
   vocabulary, not page chrome. */
/* Purpose panel: premium-locked protected rows + note (cycle 027). */
:where(body.page-legislation) .sfp-item.sfp-locked { opacity:0.9; }
:where(body.page-legislation) .sfp-item .sfp-lock { margin-left:auto; font-size:0.62rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--accent); background:rgba(128,0,0,0.08); border-radius:999px; padding:1px 7px; white-space:nowrap; }
[data-theme="dark"] :where(body.page-legislation) .sfp-item .sfp-lock { color:#f4a7a7; background:rgba(244,167,167,0.14); }
:where(body.page-legislation) .sfp-note { font-size:0.7rem; line-height:1.35; color:var(--muted); padding:8px 10px 2px; border-top:1px solid var(--border); margin-top:2px; }
/* ── Constitution "The text" reader (cycle 028) ── */
:where(body.page-legislation) .const-doc { display:flex; flex-direction:column; gap:8px; }
/* cycle 109 addendum: restyled to the kicker treatment. Plain block
   labels (Constitution reader section dividers), safe for ::after. */
:where(body.page-legislation) .const-group { font-size:var(--type-caption); font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:16px 2px 2px; }
:where(body.page-legislation) .const-group::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-legislation) .const-group:first-child { margin-top:2px; }
:where(body.page-legislation) .const-item { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
:where(body.page-legislation) .const-head { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; font-family:inherit; padding:13px 15px; cursor:pointer; color:var(--card-text); }
:where(body.page-legislation) .const-head:hover { background:var(--bg); }
:where(body.page-legislation) .const-chev { color:var(--muted); font-size:0.8rem; transition: transform var(--dur-micro) var(--ease-stately); flex:0 0 auto; }
:where(body.page-legislation) .const-item.open .const-chev { transform:rotate(90deg); }
:where(body.page-legislation) .const-htext { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
:where(body.page-legislation) .const-title { font-size:0.95rem; font-weight:800; color:var(--card-text); }
:where(body.page-legislation) .const-label { font-size:0.8rem; color:var(--muted); margin-top:1px; }
:where(body.page-legislation) .const-year { font-size:0.68rem; font-weight:700; color:var(--muted); background:var(--border); border-radius:999px; padding:2px 9px; white-space:nowrap; flex:0 0 auto; align-self:center; }
:where(body.page-legislation) .const-body { display:none; padding:0 16px 14px; border-top:1px solid var(--border); }
:where(body.page-legislation) .const-item.open .const-body { display:block; }
:where(body.page-legislation) .const-body p { margin:12px 0 0; font-size:0.9rem; line-height:1.65; color:var(--card-text); }
[data-theme="dark"] :where(body.page-legislation) .const-year { background:var(--hairline-default); }

/* ── Nominations kind (cycle 029) ── */
/* Consistent 16px frame on both sides; the extra left padding (16 frame +
   56 portrait + 14 gap = 86) is the gutter the absolutely-positioned,
   vertically-centered portrait lives in. Every content row — chips, name,
   opinion bar, actions — shares the same left edge. */
/* Gutter shifted +10px (16→26 avatar, 86→96 pad) so the avatar starts on the
   same 27px rhythm line as the other kinds' text edge (cycle 037, V9). */
/* Bottom padding 18px (cycle 042, PP2): the last text line must clear the
   card edge with real breathing room (bills sit at 20px; 14px read pinched). */
:where(body.page-legislation) .nom-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px 18px 96px; margin-bottom:12px; }
/* Nominee portrait (left column): photo_url when the Wikidata enrichment has
   one, otherwise an initials avatar (data-initials on the wrapper). */
/* top:14px (the card's top padding), NOT top:50%/translateY: centering against
   full card height made avatars sit at different heights on with-bar vs
   without-bar cards — pinned to the header row they align identically
   (cycle 040, N4). The details page overrides position inline, unaffected. */
:where(body.page-legislation, body.page-legislation-details) .nom-photo { position:absolute; left:26px; top:14px; width:56px; height:56px; border-radius:50%; overflow:hidden; background:#e8edf8; display:flex; align-items:center; justify-content:center; }
:where(body.page-legislation, body.page-legislation-details) .nom-photo.no-img::after { content:attr(data-initials); font-size:1.05rem; font-weight:800; letter-spacing:0.02em; color:var(--navy); }
:where(body.page-legislation, body.page-legislation-details) .nom-photo-img { width:100%; height:100%; object-fit:cover; display:block; }
/* PP2 (cycle 042): actions carry their own 10px gap so the org line never
   pinches against the buttons on BARLESS cards (margin-top:0 assumed a bar
   always sat between — untrue since 037's zero-votes-renders-nothing); the
   bar's old margin-bottom folds into that same 10px so with-bar spacing is
   unchanged in feel. */
:where(body.page-legislation) .nom-card .bill-tugwar { margin-top:12px; margin-bottom:0; }
:where(body.page-legislation) .nom-card .bill-actions { margin-top:10px; }
/* The Nominations pill: "Confirmed" needs ~95px at 0.8rem/700, so an equal
   split floors both segments at 96px (the shared 64px floor cramps it). The
   Archives label spans the two segments' width so the pill doesn't shrink
   (the #const-view-toggle precedent). */
:where(body.page-legislation) #nom-view-toggle .bl-seg { min-width:96px; }
:where(body.page-legislation) #nom-view-toggle .bl-seg-archives { min-width:192px; }
/* Meta-row chips: nomination cards REUSE the bill-card components
   (.bill-meta/.bill-num/.bill-status/.bill-category-tag/.bill-date — see
   BILL CARD META ROW) so the kinds share one look and can't drift. Only the
   nomination status COLORS (ns-*) are defined here, as variants of the shared
   .bill-status shape — the exact analog of the bills status-* variants. */
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-pending { background:#dbeafe; color:#1e40af; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-confirmed { background:#dcfce7; color:#166534; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-rejected { background:#fee2e2; color:#991b1b; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-returned,
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-withdrawn { background:#f3f4f6; color:#6b7280; }
:where(body.page-legislation) .nom-name { font-family:var(--font-display); font-size:1.02rem; font-weight:800; line-height:1.3; color:var(--card-text); margin:2px 0; }
:where(body.page-legislation) .nom-position { font-size:0.88rem; color:var(--card-text); line-height:1.45; }
:where(body.page-legislation) .nom-org { font-size:0.8rem; color:var(--muted); margin-top:2px; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-pending { background:rgba(59,130,246,0.18); color:#93c5fd; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-confirmed { background:rgba(34,197,94,0.18); color:#86efac; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-rejected { background:rgba(239,68,68,0.18); color:#fca5a5; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-returned,
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ns-withdrawn { background:var(--hairline-default); color:#9ca3af; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details) .nom-photo { background:var(--hairline-default); }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details) .nom-photo.no-img::after { color:rgba(255,255,255,0.85); }

/* ── Treaties kind (cycle 031) — the nominations sibling ── */
/* Same card frame as .nom-card minus the portrait gutter (treaties have no
   photo): a consistent 16px frame, the shared meta-row components on top. */
/* Left padding 26px (not 16): 1px border + 26px = the same 27px text inset
   as .bill-card (5px accent border + 22px pad), so the title/meta left edge
   doesn't jump when switching kinds (cycle 037, V9). */
/* Bottom padding 18px + the 10px actions gap: same PP2 treatment as .nom-card
   (covers .treaty-countries AND the "Pending since {year}" line). */
:where(body.page-legislation) .treaty-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px 18px 26px; margin-bottom:12px; }
:where(body.page-legislation) .treaty-card .bill-tugwar { margin-top:12px; margin-bottom:0; }
:where(body.page-legislation) .treaty-card .bill-actions { margin-top:10px; }
/* The Treaties pill: "Approved" ≈ "Confirmed" width — same 96px equal split +
   spanning Archives label as #nom-view-toggle. */
/* "In the Senate" renders ~107px at 0.8rem/700. Both floors must BIND (exceed
   the natural text width) for the pill to hold one width: 110px per segment
   expanded, 220px (= the pair) for the Archives collapse. */
:where(body.page-legislation) #treaty-view-toggle .bl-seg { min-width:110px; }
:where(body.page-legislation) #treaty-view-toggle .bl-seg-archives { min-width:220px; }
/* Status colors (ts-*): variants of the shared .bill-status shape, matching
   the ns-* palette — Pending blue, Approved green, Returned/Withdrawn muted.
   (Approved = the Senate's advice and consent — deliberately NOT an "in force"
   claim; ratification is the President's act.) */
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-pending { background:#dbeafe; color:#1e40af; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-approved { background:#dcfce7; color:#166534; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-returned,
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-withdrawn { background:#f3f4f6; color:#6b7280; }
:where(body.page-legislation) .treaty-topic { font-family:var(--font-display); font-size:1.02rem; font-weight:800; line-height:1.3; color:var(--card-text); margin:2px 0; }
:where(body.page-legislation) .treaty-countries { font-size:0.88rem; color:var(--card-text); line-height:1.45; }

/* Executive Actions (cycle 073) — the treaty-card shape (no photo gutter
   needed, unlike nominations). Doc-type pill: two new .bill-status variants,
   explicit dark values (order = indigo/formal, memorandum = slate/lesser
   weight). "Not voted on" is a quiet inline marker, never louder than the
   meta row it sits in — the doctrine's label, not a warning. */
:where(body.page-legislation) .exec-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px 18px 20px; margin-bottom:12px; }
:where(body.page-legislation) .exec-card .bill-tugwar { margin-top:12px; margin-bottom:0; }
:where(body.page-legislation) .exec-card .bill-actions { margin-top:10px; }
:where(body.page-legislation) .exec-title { font-family:var(--font-display); font-size:1.02rem; font-weight:800; line-height:1.3; color:var(--card-text); margin:2px 0; }
:where(body.page-legislation) .exec-abstract { font-size:0.88rem; color:var(--card-text); line-height:1.45; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.status-order      { background:#e0e7ff; color:#3730a3; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.status-memorandum { background:#f1f5f9; color:#475569; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.status-order      { background:rgba(99,102,241,0.22); color:#a5b4fc; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.status-memorandum { background:rgba(100,116,139,0.28); color:#cbd5e1; }
:where(body.page-legislation, body.page-legislation-details, body.page-following) .exec-not-voted { font-size:0.7rem; font-weight:600; color:var(--muted); white-space:nowrap; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .exec-not-voted { color:rgba(255,255,255,0.45); }
/* The long-pending line — the age is the story on decades-old treaty docs. */
:where(body.page-legislation, body.page-legislation-details) .treaty-pending-since { font-size:0.78rem; font-weight:600; color:#92400e; margin-top:6px; display:flex; align-items:center; gap:5px; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-pending { background:rgba(59,130,246,0.18); color:#93c5fd; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-approved { background:rgba(34,197,94,0.18); color:#86efac; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-returned,
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details, body.page-following) .bill-status.ts-withdrawn { background:var(--hairline-default); color:#9ca3af; }
[data-theme="dark"] :where(body.page-legislation, body.page-legislation-details) .treaty-pending-since { color:#fcd34d; }
/* Grouped Tracked tab section headers (cycle 032) — the Constitution reader's
   .const-group look, shared by the Bills / Nominations / Treaties sections. */
/* cycle 109 addendum: restyled to the kicker treatment -- the SAME look
   as .const-group above (per the pre-existing comment), plain block
   labels, safe for ::after. */
:where(body.page-legislation) .trk-group { font-size:var(--type-caption); font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:16px 2px 8px; }
:where(body.page-legislation) .trk-group::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-legislation) .trk-group:first-child { margin-top:2px; }


/* ================================================================
   PAGE: notpremium.html   (moved from its inline <style> block)
   ================================================================ */

:where(body.page-notpremium) .upgrade-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

:where(body.page-notpremium) .upgrade-hero { text-align: center; margin-bottom: 48px; }
:where(body.page-notpremium) .upgrade-star { font-size: 2.8rem; margin-bottom: 16px; color: #f5c842; }
[data-theme="light"] :where(body.page-notpremium) .upgrade-star { color: #c49000; }
:where(body.page-notpremium) .upgrade-headline { font-family: var(--font-display); font-size: var(--type-display); font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 12px; }
:where(body.page-notpremium) .upgrade-sub { font-size: 1rem; color: var(--muted); line-height: 1.6; max-width: 500px; margin: 0 auto; }

:where(body.page-notpremium) .upgrade-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
:where(body.page-notpremium) .feature-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
:where(body.page-notpremium) .feature-icon { font-size: 1.8rem; flex-shrink: 0; margin-top: 2px; color: var(--muted); }
:where(body.page-notpremium) .feature-title { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
:where(body.page-notpremium) .feature-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.55; }

:where(body.page-notpremium) .feature-preview { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
:where(body.page-notpremium) .preview-bar-row { display: flex; align-items: center; gap: 8px; }
:where(body.page-notpremium) .preview-bar-label { width: 80px; font-size: 0.72rem; font-weight: 600; color: var(--muted); flex-shrink: 0; }
:where(body.page-notpremium) .preview-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
:where(body.page-notpremium) .preview-bar-fill { height: 100%; border-radius: 999px; transition: width var(--dur-countup) var(--ease-stately); }
:where(body.page-notpremium) .preview-bar-pct { font-size: 0.7rem; font-weight: 700; color: var(--muted); min-width: 28px; text-align: right; }

:where(body.page-notpremium) .upgrade-cta-box {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6e 100%);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
}
:where(body.page-notpremium) .upgrade-cta-title { font-size: 1.2rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
:where(body.page-notpremium) .upgrade-cta-desc  { font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-bottom: 22px; line-height: 1.5; }
:where(body.page-notpremium) .btn-request-access {
  font-family: inherit; font-size: 1rem; font-weight: 800;
  color: var(--navy); background: var(--white); border: none;
  border-radius: 999px; padding: 13px 36px; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
:where(body.page-notpremium) .btn-request-access:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
:where(body.page-notpremium) .upgrade-cta-note { margin-top: 14px; font-size: 0.75rem; color: rgba(255,255,255,0.4); }

:where(body.page-notpremium) .modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 1000;
  align-items: center; justify-content: center;
}
:where(body.page-notpremium) .modal-overlay.open { display: flex; }
:where(body.page-notpremium) .modal-box { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 28px; width: 100%; max-width: 420px; margin: 16px; }
:where(body.page-notpremium) .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--card-text); margin-bottom: 6px; }
:where(body.page-notpremium) .modal-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
:where(body.page-notpremium) .modal-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
:where(body.page-notpremium) .modal-field label { font-size: 0.78rem; font-weight: 700; color: var(--card-text); }
:where(body.page-notpremium) .modal-field textarea {
  padding: 10px 13px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 0.875rem;
  color: var(--card-text); background: var(--card); resize: vertical; min-height: 80px; outline: none;
}
:where(body.page-notpremium) .modal-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(128,0,0,0.08); background: var(--card); }
:where(body.page-notpremium) .modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
:where(body.page-notpremium) .btn-modal-cancel { font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--muted); background: none; border: 1.5px solid var(--border); padding: 9px 20px; border-radius: 999px; cursor: pointer; }
:where(body.page-notpremium) .btn-modal-send { font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--white); background: var(--accent); border: none; padding: 9px 24px; border-radius: 999px; cursor: pointer; }
:where(body.page-notpremium) .btn-modal-send:hover { background: var(--accent-dk); }
:where(body.page-notpremium) .modal-msg { font-size: 0.8rem; font-weight: 600; color: #065f46; margin-top: 10px; display: none; }
:where(body.page-notpremium) .modal-msg.visible { display: block; }
:where(body.page-notpremium) .modal-msg.error   { color: #991b1b; }

[data-theme="dark"] :where(body.page-notpremium) .feature-card { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-notpremium) .upgrade-headline,
[data-theme="dark"] :where(body.page-notpremium) .feature-title { color: var(--ink); }
[data-theme="dark"] :where(body.page-notpremium) .modal-box { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-notpremium) .modal-field textarea { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: var(--white); }
[data-theme="dark"] :where(body.page-notpremium) .modal-field label { color: rgba(255,255,255,0.85); }
[data-theme="dark"] :where(body.page-notpremium) .modal-title { color: var(--ink); }
[data-theme="dark"] :where(body.page-notpremium) .btn-modal-cancel { border-color: rgba(255,255,255,0.15); color: var(--ink-muted); }


/* ================================================================
   PAGE: political-profile.html   (moved from its inline <style> block)
   ================================================================ */

:where(body.page-political-profile) .quiz-wrap {
  padding: 24px 0 48px;
}
:where(body.page-political-profile) .quiz-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
:where(body.page-political-profile) .quiz-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
}
:where(body.page-political-profile) .quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--card-muted);
  text-decoration: none;
  margin-bottom: 14px;
}
:where(body.page-political-profile) .quiz-back:hover { text-decoration: underline; }
:where(body.page-political-profile) .quiz-title {
  /* cycle 109: the serif trio's secondary tier. */
  font-family: var(--font-display);
  font-size: var(--type-title-sm);
  font-weight: 800;
  line-height: 1.3;
  color: var(--card-text);
  margin-bottom: 6px;
}
:where(body.page-political-profile) .quiz-sub {
  font-size: 0.875rem;
  color: var(--card-muted);
  line-height: 1.5;
}
:where(body.page-political-profile) .quiz-progress-wrap {
  padding: 0 24px 16px;
}
:where(body.page-political-profile) .quiz-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-muted);
  margin-bottom: 8px;
}
:where(body.page-political-profile) .quiz-progress-meta .progress-cat {
  color: var(--card-text);
  font-weight: 700;
}
:where(body.page-political-profile) .quiz-resume-banner {
  margin: 0 24px 14px;
  padding: 8px 12px;
  background: var(--bar-bg);
  border: 1px solid var(--border);
  color: var(--card-text);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
}
:where(body.page-political-profile) .quiz-progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
:where(body.page-political-profile) .quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  border-radius: 999px;
  transition: width var(--dur-press-out) var(--ease-stately);
}
:where(body.page-political-profile) .quiz-body { padding: 8px 24px 24px; }
:where(body.page-political-profile) .quiz-category {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
}
:where(body.page-political-profile) .quiz-question {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--card-text);
  line-height: 1.45;
  margin-bottom: 18px;
}
:where(body.page-political-profile) .quiz-options { display: flex; flex-direction: column; gap: 10px; }
:where(body.page-political-profile) .quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--card-text);
  background: var(--bar-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
}
:where(body.page-political-profile) .quiz-option:hover {
  border-color: #b0b8cc;
  background: var(--card);
}
:where(body.page-political-profile) .quiz-option.selected {
  border-color: var(--accent);
  background: rgba(128,0,0,0.07);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
}
:where(body.page-political-profile) .quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
:where(body.page-political-profile) .quiz-btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  border: none;
  transition: background var(--dur-micro) var(--ease-stately), transform var(--dur-press-in) var(--ease-stately);
}
:where(body.page-political-profile) .quiz-btn:disabled { opacity: 0.45; cursor: not-allowed; }
:where(body.page-political-profile) .quiz-btn-secondary {
  color: var(--card-text);
  background: none;
  border: 1.5px solid var(--border);
}
:where(body.page-political-profile) .quiz-btn-secondary:hover:not(:disabled) { background: var(--bar-bg); }
:where(body.page-political-profile) .quiz-btn-primary {
  color: var(--white);
  background: var(--accent);
}
:where(body.page-political-profile) .quiz-btn-primary:hover:not(:disabled) {
  background: var(--accent-dk);
  transform: translateY(-1px);
}
:where(body.page-political-profile) .quiz-btn-overview {
  color: var(--white);
  background: #16a34a;
}
:where(body.page-political-profile) .quiz-btn-overview:hover:not(:disabled) {
  background: #15803d;
  transform: translateY(-1px);
}
:where(body.page-political-profile) .quiz-msg {
  font-size: 0.8rem;
  font-weight: 600;
  color: #991b1b;
  min-height: 1.2em;
}
:where(body.page-political-profile) .quiz-done {
  text-align: center;
  padding: 40px 24px;
}
/* Top-issues multi-select */
:where(body.page-political-profile) .quiz-issues-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}
:where(body.page-political-profile) .quiz-issues-hint span {
  color: var(--accent);
}
:where(body.page-political-profile) .quiz-issues-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
:where(body.page-political-profile) .quiz-issue-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--card-text);
  background: var(--bar-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
}
:where(body.page-political-profile) .quiz-issue-btn:hover:not(:disabled) {
  border-color: #b0b8cc;
  background: var(--card);
}
:where(body.page-political-profile) .quiz-issue-btn.selected {
  border-color: var(--accent);
  background: rgba(128,0,0,0.07);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
  font-weight: 600;
}
:where(body.page-political-profile) .quiz-issue-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Overview screen ── */
:where(body.page-political-profile) .quiz-overview-body { padding: 20px 24px 24px; }
:where(body.page-political-profile) .quiz-overview-intro {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
}
:where(body.page-political-profile) .quiz-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
:where(body.page-political-profile) .quiz-overview-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--bar-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately), box-shadow var(--dur-micro) var(--ease-stately);
  position: relative;
  padding: 6px 4px;
}
:where(body.page-political-profile) .quiz-overview-cell:hover {
  border-color: var(--accent);
  background: rgba(128,0,0,0.10);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.07);
}
:where(body.page-political-profile) .quiz-overview-cell.answered {
  border-color: #22c55e;
  background: rgba(34,197,94,0.12);
}
:where(body.page-political-profile) .quiz-overview-cell.answered:hover {
  border-color: #16a34a;
  background: rgba(34,197,94,0.20);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
:where(body.page-political-profile) .quiz-overview-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--card-text);
  line-height: 1;
}
:where(body.page-political-profile) .quiz-overview-cat {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--card-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
:where(body.page-political-profile) .quiz-overview-check {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 0.65rem;
  color: #16a34a;
  font-weight: 900;
}
:where(body.page-political-profile) .quiz-overview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
:where(body.page-political-profile) .quiz-overview-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  color: var(--card-muted);
}
:where(body.page-political-profile) .quiz-overview-legend span { display: flex; align-items: center; gap: 4px; }
:where(body.page-political-profile) .legend-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1.5px solid;
  flex-shrink: 0;
}
:where(body.page-political-profile) .legend-dot.unanswered { background: var(--bar-bg); border-color: var(--border); }
:where(body.page-political-profile) .legend-dot.answered   { background: rgba(34,197,94,0.12); border-color: #22c55e; }
[data-theme="dark"] :where(body.page-political-profile) .quiz-category { color: #4ade80; }
[data-theme="dark"] :where(body.page-political-profile) .quiz-issues-hint span { color: #4ade80; }


/* ================================================================
   PAGE: politician-details.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Back link ── */
:where(body.page-politician-details) .pd-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 12px 16px 4px;
}
:where(body.page-politician-details) .pd-back:hover { color: var(--text); }
[data-theme="dark"] :where(body.page-politician-details) .pd-back { color: rgba(255,255,255,0.55); }
[data-theme="dark"] :where(body.page-politician-details) .pd-back:hover { color: var(--ink); }

/* ── Header card ── */
:where(body.page-politician-details) .pd-header {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 6px 0 12px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-header { background: var(--surface-card); }
/* Brighter chip background + lighter text reads cleanly on the dark card.
   The 0.14 alpha that works in light disappears against #1c2840. */
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.dem { background: rgba(53,124,200,0.28); color: #93c5fd; }
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.rep { background: rgba(220,80,80,0.28);  color: #fca5a5; }
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.lib   { background: rgba(217,119,6,0.28);  color: #fbbf24; }
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.green { background: rgba(22,163,74,0.28);   color: #4ade80; }
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.ind   { background: rgba(148,163,184,0.20); color: #cbd5e1; }
[data-theme="dark"] :where(body.page-politician-details) .pd-party-chip.other { background: var(--hairline-default); color: rgba(255,255,255,0.72); }
:where(body.page-politician-details) .pd-photo, :where(body.page-politician-details) .pd-photo-placeholder {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 4px solid transparent;
  background: var(--border);
}
:where(body.page-politician-details) .pd-photo.dem, :where(body.page-politician-details) .pd-photo-placeholder.dem { border-color: var(--accent-blue); }
:where(body.page-politician-details) .pd-photo.rep, :where(body.page-politician-details) .pd-photo-placeholder.rep { border-color: rgb(180,30,30); }
:where(body.page-politician-details) .pd-photo.other, :where(body.page-politician-details) .pd-photo-placeholder.other { border-color: var(--muted); }
:where(body.page-politician-details) .pd-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 900;
  color: var(--muted);
}
:where(body.page-politician-details) .pd-photo-placeholder.dem { color: var(--accent-blue); }
:where(body.page-politician-details) .pd-photo-placeholder.rep { color: rgb(180,30,30); }

:where(body.page-politician-details) .pd-header-body { flex: 1; min-width: 0; }
/* Row 1 — name + party chip on the same line so the chip reads as a
   qualifier on the name, :where(body.page-politician-details) not a standalone tag. The chip gets its own
   vertical alignment via flex so it sits with the cap-height. */
:where(body.page-politician-details) .pd-title-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
:where(body.page-politician-details) .pd-name {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-name { color: rgba(255,255,255,0.94); }
:where(body.page-politician-details) .pd-party-chip {
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.4;
}
:where(body.page-politician-details) .pd-party-chip.dem { background: rgba(53,124,200,0.14); color: var(--accent-blue); }
:where(body.page-politician-details) .pd-party-chip.rep { background: rgba(180,30,30,0.14); color: rgb(180,30,30); }
:where(body.page-politician-details) .pd-party-chip.lib   { background: rgba(217,119,6,0.16);  color: #b45309; }
:where(body.page-politician-details) .pd-party-chip.green { background: rgba(22,163,74,0.15);  color: #15803d; }
:where(body.page-politician-details) .pd-party-chip.ind   { background: rgba(107,114,128,0.18); color: #4b5563; }
:where(body.page-politician-details) .pd-party-chip.other { background: var(--border); color: var(--muted); }
/* Row 2 — office, :where(body.page-politician-details) sits as a quiet subtitle directly under the name */
:where(body.page-politician-details) .pd-office {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 16px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-office { color: rgba(255,255,255,0.55); }
/* Row 3 — actions. Track + Website + Twitter as a unified pill set. */
:where(body.page-politician-details) .pd-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
:where(body.page-politician-details) .btn-track-politician,
:where(body.page-politician-details) .btn-pd-link {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--muted);
  transition: border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
:where(body.page-politician-details) .btn-track-politician:hover { border-color: #d4a017; color: #d4a017; }
:where(body.page-politician-details) .btn-track-politician.tracked {
  background: rgba(220,160,40,0.16);
  border-color: #d4a017;
  color: #d4a017;
}
[data-theme="dark"] :where(body.page-politician-details) .btn-track-politician { border-color: var(--hairline-strong); color: rgba(255,255,255,0.6); }
[data-theme="dark"] :where(body.page-politician-details) .btn-track-politician:hover { border-color: #e6b651; color: #e6b651; }
[data-theme="dark"] :where(body.page-politician-details) .btn-track-politician.tracked { background: rgba(220,160,40,0.22); border-color: #e6b651; color: #e6b651; }
/* Website / Twitter pills — link-blue treatment, :where(body.page-politician-details) matches the directory
   Website button so both pages feel like one family. */
:where(body.page-politician-details) .btn-pd-link {
  color: #357cc8;
  border-color: #357cc8;
}
:where(body.page-politician-details) .btn-pd-link:hover { background: #357cc8; color: var(--white); }
[data-theme="dark"] :where(body.page-politician-details) .btn-pd-link { color: #93c5fd; border-color: #93c5fd; }
[data-theme="dark"] :where(body.page-politician-details) .btn-pd-link:hover { background: #93c5fd; color: var(--surface-raised); }
[data-theme="america"] :where(body.page-politician-details) .btn-pd-link { color: #2d5b8a; border-color: #2d5b8a; }
[data-theme="america"] :where(body.page-politician-details) .btn-pd-link:hover { background: #2d5b8a; color: var(--white); }

/* Approve / disapprove — same calm pill family as Track. Aggregate counts
   only; neutral framing (no leaderboard / dunk treatment). */
:where(body.page-politician-details) .pd-thumbs { display: inline-flex; gap: 6px; align-items: center; }
:where(body.page-politician-details) .pd-thumb {
  font-size: 0.82rem; font-weight: 700; line-height: 1.2;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: none; color: var(--muted);
  transition: border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  display: inline-flex; align-items: center; gap: 6px;
}
:where(body.page-politician-details) .pd-thumb svg { width: 15px; height: 15px; flex: 0 0 auto; }
:where(body.page-politician-details) .pd-thumb-count { font-variant-numeric: tabular-nums; }
:where(body.page-politician-details) .pd-thumb-up:hover { border-color: #2e7d52; color: #2e7d52; }
:where(body.page-politician-details) .pd-thumb-up.active { background: rgba(46,125,82,0.14); border-color: #2e7d52; color: #2e7d52; }
:where(body.page-politician-details) .pd-thumb-down:hover { border-color: #b3463b; color: #b3463b; }
:where(body.page-politician-details) .pd-thumb-down.active { background: rgba(179,70,59,0.14); border-color: #b3463b; color: #b3463b; }
[data-theme="dark"] :where(body.page-politician-details) .pd-thumb { border-color: var(--hairline-strong); color: rgba(255,255,255,0.6); }
[data-theme="dark"] :where(body.page-politician-details) .pd-thumb-up:hover { border-color: #6cc295; color: #6cc295; }
[data-theme="dark"] :where(body.page-politician-details) .pd-thumb-up.active { background: rgba(46,125,82,0.26); border-color: #6cc295; color: #6cc295; }
[data-theme="dark"] :where(body.page-politician-details) .pd-thumb-down:hover { border-color: #e08a80; color: #e08a80; }
[data-theme="dark"] :where(body.page-politician-details) .pd-thumb-down.active { background: rgba(179,70,59,0.26); border-color: #e08a80; color: #e08a80; }

/* ── Candidacy card (Currently running for) ── */
:where(body.page-politician-details) .pd-candidacy {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
:where(body.page-politician-details) .pd-candidacy:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-candidacy { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-candidacy-flag {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,200,66,0.18);
  color: #b8860b;
  border-radius: 50%;
  font-size: 1rem;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-candidacy-flag { background: rgba(245,200,66,0.22); color: #e6b651; }
:where(body.page-politician-details) .pd-candidacy-body { flex: 1; min-width: 0; }
:where(body.page-politician-details) .pd-candidacy-office {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
[data-theme="dark"] :where(body.page-politician-details) .pd-candidacy-office { color: var(--ink); }
:where(body.page-politician-details) .pd-candidacy-meta {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
}
:where(body.page-politician-details) .pd-candidacy.withdrew { opacity: 0.55; }
:where(body.page-politician-details) .pd-candidacy.withdrew .pd-candidacy-office::after {
  content: ' (withdrew)';
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

/* ── Section card ── */
:where(body.page-politician-details) .pd-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 12px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-card { background: var(--surface-card); }

/* Campaign finance (cycle 128) — LAYOUT ONLY. The fingerprint bars reuse the
   global .option-label / .option-name / .option-pct / .progress-track family
   (the same classes explore's yesterday reveal reuses), so no chart idiom is
   duplicated here. Every colour is a theme token -> resolves in all four
   themes; no literal hexes. */
:where(body.page-politician-details) .pd-fec-headline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
:where(body.page-politician-details) .pd-fec-stat {
  background: var(--bar-bg);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
}
:where(body.page-politician-details) .pd-fec-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--card-text);
  line-height: 1.15;
}
:where(body.page-politician-details) .pd-fec-lbl {
  font-size: 0.7rem;
  color: var(--card-muted);
  margin-top: 3px;
  line-height: 1.35;
}
:where(body.page-politician-details) .pd-fec-shape-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--card-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 8px;
}
:where(body.page-politician-details) .pd-fec-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--card-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
@media (max-width: 520px) {
  :where(body.page-politician-details) .pd-fec-headline { grid-template-columns: 1fr; }
}
:where(body.page-politician-details) .pd-section-title {
  /* cycle 109: kicker typography (no ::after -- .pd-card's collapsible
     variant below turns this into a flex row with a chevron; a pseudo-
     element would become a stray flex item there). */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── Stats grid (Seniority + counts) ── */
:where(body.page-politician-details) .pd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
:where(body.page-politician-details) .pd-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
:where(body.page-politician-details) .pd-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stat-value { color: var(--ink); }
:where(body.page-politician-details) .pd-stat-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
:where(body.page-politician-details) .pd-party-bar {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
:where(body.page-politician-details) .pd-party-fill { height: 100%; border-radius: 999px; }
:where(body.page-politician-details) .pd-party-fill.dem { background: var(--accent-blue); }
:where(body.page-politician-details) .pd-party-fill.rep { background: rgb(180,30,30); }

/* ── Top issues list ── */
:where(body.page-politician-details) .pd-issue {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
:where(body.page-politician-details) .pd-issue:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-issue { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-issue-tag {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
  flex: 0 0 35%;
  max-width: 35%;
  line-height: 1.35;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-issue-tag { color: var(--ink); }
:where(body.page-politician-details) .pd-issue-pos {
  flex: 1;
  min-width: 0;
}
:where(body.page-politician-details) .pd-issue-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(53,124,200,0.10);
  color: var(--text);
  margin-bottom: 4px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-issue-label { background: rgba(53,124,200,0.18); color: var(--ink); }
[data-theme="america"] :where(body.page-politician-details) .pd-issue-label { background: rgba(255,255,255,0.78); color: var(--ink); }
:where(body.page-politician-details) .pd-issue-detail {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-issue-detail { color: rgba(255,255,255,0.6); }

/* ── Stances list (extracted from official website by scripts/fetch_stances.py) ── */
:where(body.page-politician-details) .pd-stance {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
:where(body.page-politician-details) .pd-stance:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-stance { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-stance.missing { opacity: 0.55; }
:where(body.page-politician-details) .pd-stance-category {
  flex: 0 0 32%;
  max-width: 32%;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-category { color: var(--ink); }
:where(body.page-politician-details) .pd-stance-body {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.55;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-body { color: rgba(255,255,255,0.8); }
:where(body.page-politician-details) .pd-stance-quote {
  font-style: italic;
  /* Slightly tighter quote color so the prose feels like a pull-quote,
     not body copy. */
  color: var(--text);
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-quote { color: rgba(255,255,255,0.88); }
:where(body.page-politician-details) .pd-stance.missing .pd-stance-body {
  color: var(--muted);
  font-style: italic;
  font-size: 0.78rem;
}
:where(body.page-politician-details) .pd-stance-source {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 6px;
  font-style: italic;
}
:where(body.page-politician-details) .pd-stance-source a { color: #357cc8; text-decoration: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-source a { color: #93c5fd; }
[data-theme="america"] :where(body.page-politician-details) .pd-stance-source a { color: #2d5b8a; }

/* AI summary block — sits above the source quotes. Uses a tinted
   background so it reads as "synthesis" distinct from the verbatim
   quotes underneath. The badge + tooltip ⓘ provide the AI-disclosure
   framing without requiring extra body copy in the card. */
:where(body.page-politician-details) .pd-stance-ai {
  background: rgba(53, 124, 200, 0.07);
  border-left: 3px solid rgba(53, 124, 200, 0.5);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-ai {
  background: rgba(147, 197, 253, 0.08);
  border-left-color: rgba(147, 197, 253, 0.4);
}
:where(body.page-politician-details) .pd-stance-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #357cc8;
  margin-bottom: 4px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-ai-badge { color: #93c5fd; }
:where(body.page-politician-details) .pd-stance-ai-disclaimer {
  cursor: help;
  font-size: 0.8rem;
  opacity: 0.7;
}
:where(body.page-politician-details) .pd-stance-ai-text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-ai-text { color: rgba(255,255,255,0.88); }

/* Source citations under the AI summary. */
:where(body.page-politician-details) .pd-stance-citations-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
/* Collapsible source quotes — closed by default when an AI summary is
   present. Uses native <details>/<summary> so the toggle works without JS. */
:where(body.page-politician-details) .pd-stance-quotes-collapse > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  user-select: none;
  transition: color var(--dur-micro) var(--ease-stately);
}
:where(body.page-politician-details) .pd-stance-quotes-collapse > summary::-webkit-details-marker { display: none; }
:where(body.page-politician-details) .pd-stance-quotes-collapse > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform var(--dur-micro) var(--ease-stately);
  transform-origin: 50% 55%;
}
:where(body.page-politician-details) .pd-stance-quotes-collapse[open] > summary::before {
  transform: rotate(90deg);
}
/* Hover brightens the label. Default (light) theme darkens toward
   --text; dark / america themes lighten toward white so the label
   doesn't sink into the dark card background. */
:where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover { color: var(--text); }
:where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover::before { color: var(--text); }
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover,
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover::before {
  color: var(--ink);
}
/* America cards are light — hover darkens toward the card text
   color instead of lightening toward white. */
[data-theme="america"] :where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover,
[data-theme="america"] :where(body.page-politician-details) .pd-stance-quotes-collapse > summary:hover::before {
  color: var(--ink);
}
:where(body.page-politician-details) .pd-stance-citations-count {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(53,124,200,0.12);
  color: var(--muted);
  letter-spacing: 0;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-citations-count {
  background: rgba(147,197,253,0.15);
}
:where(body.page-politician-details) .pd-stance-quotes-collapse[open] > .pd-stance-quotes {
  margin-top: 8px;
}
:where(body.page-politician-details) .pd-stance-quotes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(body.page-politician-details) .pd-stance-quote-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.5;
}
:where(body.page-politician-details) .pd-stance-quote-marker {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.78rem;
  padding-top: 2px;
}
:where(body.page-politician-details) .pd-stance-quote-text {
  font-style: italic;
  color: var(--text);
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-quote-text { color: rgba(255,255,255,0.85); }
:where(body.page-politician-details) .pd-stance-quote-cite {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
  display: inline;
  margin-left: 4px;
}
:where(body.page-politician-details) .pd-stance-quote-cite a {
  color: #357cc8;
  text-decoration: none;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-quote-cite a,
[data-theme="america"] :where(body.page-politician-details) .pd-stance-quote-cite a { color: #2d5b8a; }

/* Card-level AI disclaimer above the stance rows. */
:where(body.page-politician-details) .pd-stance-disclaimer {
  background: rgba(53, 124, 200, 0.05);
  border: 1px solid rgba(53, 124, 200, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-disclaimer {
  background: rgba(147, 197, 253, 0.05);
  border-color: rgba(147, 197, 253, 0.15);
}

/* Attribution badge — tiny pill before the source URL telling the reader
   how confident the attribution is. Color comes from inline style (one
   color per type, :where(body.page-politician-details) set in JS). Keep this restrained — it's metadata, :where(body.page-politician-details) not
   a call to action. */
:where(body.page-politician-details) .pd-attr-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  color: var(--white);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
  margin-right: 4px;
}

/* Toggle to show/hide categories where extraction came up empty. */
:where(body.page-politician-details) .pd-stance-toggle {
  margin-top: 14px;
  font-size: 0.74rem;
  color: #357cc8;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 4px 0;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-stance-toggle { color: #93c5fd; }
[data-theme="america"] :where(body.page-politician-details) .pd-stance-toggle { color: #2d5b8a; }

/* ── Collapsible card chrome ──
   Each .pd-card's title becomes the click target. A chevron rotates
   to communicate state, :where(body.page-politician-details) and .pd-card-body wraps everything below the
   title so we can hide it cleanly with a single rule.

   The chevron is an inline SVG (.pd-chev) rendered by the post-render
   JS, :where(body.page-politician-details) NOT a unicode glyph — earlier ::after with "⌄" looked jagged
   because the glyph has uneven baseline metrics that shift visually
   between rotated and unrotated states. An SVG with a centered viewBox
   rotates around its true center every time. */
:where(body.page-politician-details) .pd-card .pd-section-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
:where(body.page-politician-details) .pd-chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform var(--dur-press-out) var(--ease-stately);
  flex-shrink: 0;
}
:where(body.page-politician-details) .pd-card.pd-collapsed .pd-chev {
  transform: rotate(-90deg);
}
:where(body.page-politician-details) .pd-card.pd-collapsed .pd-card-body {
  display: none;
}
:where(body.page-politician-details) .pd-card .pd-section-title:hover { color: var(--card-text); }
:where(body.page-politician-details) .pd-card .pd-section-title:hover .pd-chev { color: var(--card-text); }

/* ── Bio ── */
:where(body.page-politician-details) .pd-bio-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
:where(body.page-politician-details) .pd-bio-row:last-of-type { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-bio-row { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-bio-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 1px;
}
:where(body.page-politician-details) .pd-bio-value {
  color: var(--card-text);
  line-height: 1.4;
}
:where(body.page-politician-details) .pd-bio-attribution {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 10px;
  text-align: right;
}
:where(body.page-politician-details) .pd-bio-attribution a { color: #357cc8; text-decoration: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-bio-attribution a { color: #93c5fd; }
[data-theme="america"] :where(body.page-politician-details) .pd-bio-attribution a { color: #2d5b8a; }

/* ── News card ── */
:where(body.page-politician-details) .pd-news-group {
  margin-bottom: 16px;
}
:where(body.page-politician-details) .pd-news-group:last-child { margin-bottom: 0; }
:where(body.page-politician-details) .pd-news-group-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
:where(body.page-politician-details) .pd-news-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--card-text);
}
:where(body.page-politician-details) .pd-news-item:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-news-item { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-news-item:hover { background: rgba(0,0,0,0.02); }
[data-theme="dark"] :where(body.page-politician-details) .pd-news-item:hover { background: rgba(255,255,255,0.03); }
:where(body.page-politician-details) .pd-news-title {
  font-size: 0.85rem;
  line-height: 1.4;
  flex: 1;
}
:where(body.page-politician-details) .pd-news-item:hover .pd-news-title {
  color: #357cc8;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-news-item:hover .pd-news-title {
  color: #93c5fd;
}
[data-theme="america"] :where(body.page-politician-details) .pd-news-item:hover .pd-news-title {
  color: #2d5b8a;
}
:where(body.page-politician-details) .pd-news-host {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
:where(body.page-politician-details) .pd-news-toggle {
  margin-top: 10px;
  font-size: 0.74rem;
  color: #357cc8;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 4px 0;
  font-family: inherit;
}
:where(body.page-politician-details) .pd-news-toggle:hover { text-decoration: underline; }
[data-theme="dark"] :where(body.page-politician-details) .pd-news-toggle { color: #93c5fd; }
[data-theme="america"] :where(body.page-politician-details) .pd-news-toggle { color: #2d5b8a; }

/* ── Office Contact ── */
:where(body.page-politician-details) .pd-office-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
:where(body.page-politician-details) .pd-office-row:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-office-row { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-office-label {
  font-weight: 700;
  color: var(--card-text);
  font-size: 0.85rem;
}
:where(body.page-politician-details) .pd-office-addr {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
  line-height: 1.4;
}
:where(body.page-politician-details) .pd-office-phone {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
:where(body.page-politician-details) .pd-office-phone a {
  color: #357cc8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-office-phone a { color: #93c5fd; }
[data-theme="america"] :where(body.page-politician-details) .pd-office-phone a { color: #2d5b8a; }

/* ── Stock Trades ── */
:where(body.page-politician-details) .pd-trade-row {
  display: grid;
  grid-template-columns: 90px 70px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
:where(body.page-politician-details) .pd-trade-row:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-trade-row { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-trade-type {
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}
:where(body.page-politician-details) .pd-trade-ticker {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--card-text);
}
:where(body.page-politician-details) .pd-trade-amt {
  font-size: 0.75rem;
  color: var(--card-text);
}
:where(body.page-politician-details) .pd-trade-date {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
:where(body.page-politician-details) .pd-trade-owner {
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--border);
  padding: 1px 7px;
  border-radius: 6px;
}

/* ── Votes list ── */
:where(body.page-politician-details) .pd-vote {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
:where(body.page-politician-details) .pd-vote:last-child { border-bottom: none; }
[data-theme="dark"] :where(body.page-politician-details) .pd-vote { border-bottom-color: var(--surface-sunken); }
:where(body.page-politician-details) .pd-vote-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
:where(body.page-politician-details) .pd-vote-badge.yea { background: #d1fae5; color: #065f46; }
:where(body.page-politician-details) .pd-vote-badge.nay { background: #fee2e2; color: #991b1b; }
:where(body.page-politician-details) .pd-vote-badge.abs { background: var(--border); color: var(--muted); font-style: italic; }
[data-theme="dark"] :where(body.page-politician-details) .pd-vote-badge.yea { background: rgba(22,163,74,0.20); color: #6ee7b7; }
[data-theme="dark"] :where(body.page-politician-details) .pd-vote-badge.nay { background: rgba(220,38,38,0.20); color: #fca5a5; }
[data-theme="dark"] :where(body.page-politician-details) .pd-vote-badge.abs { background: rgba(255,255,255,0.08); color: var(--ink-muted); }
:where(body.page-politician-details) .pd-vote-body { flex: 1; min-width: 0; }
:where(body.page-politician-details) .pd-vote-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}
[data-theme="dark"] :where(body.page-politician-details) .pd-vote-title { color: var(--ink); }
:where(body.page-politician-details) .pd-vote-meta {
  font-size: 0.74rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
:where(body.page-politician-details) .pd-vote a { color: inherit; text-decoration: none; }

/* ── Empty / loading ── */
:where(body.page-politician-details) .pd-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.55;
}


/* ================================================================
   PAGE: politicians.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Cards ── */
:where(body.page-politicians) .cand-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
}
:where(body.page-politicians) .cand-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  border-left: 5px solid transparent;
  transition: box-shadow var(--dur-press-out) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), transform var(--dur-micro) var(--ease-stately);
}
:where(body.page-politicians) .cand-card:hover {
  box-shadow: var(--shadow);
  border-left-color: var(--accent);
  transform: translateY(-1px);
}
:where(body.page-politicians) .cand-card:active { transform: translateY(0); }
[data-theme="light"] :where(body.page-politicians) .cand-card:hover { border-left-color: #c0392b; }
[data-theme="america"] :where(body.page-politicians) .cand-card:hover { border-left-color: #c0392b; }

:where(body.page-politicians) .cand-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 3px solid transparent;
}
:where(body.page-politicians) .cand-photo.dem { border-color: var(--accent-blue); }
:where(body.page-politicians) .cand-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-politicians) .cand-photo.other { border-color: var(--muted); }
:where(body.page-politicians) .cand-photo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--muted);
  border: 3px solid transparent;
}
:where(body.page-politicians) .cand-photo-placeholder.dem { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-politicians) .cand-photo-placeholder.rep { border-color: rgb(180,30,30); color: rgb(180,30,30); }

:where(body.page-politicians) .cand-body { flex: 1; min-width: 0; }
:where(body.page-politicians) .cand-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
:where(body.page-politicians) .cand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
:where(body.page-politicians) .cand-party-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:where(body.page-politicians) .cand-party-chip.dem { background: rgba(53,124,200,0.12); color: var(--accent-blue); }
:where(body.page-politicians) .cand-party-chip.rep { background: rgba(180,30,30,0.12); color: rgb(180,30,30); }
:where(body.page-politicians) .cand-party-chip.lib   { background: rgba(217,119,6,0.14);  color: #b45309; }
:where(body.page-politicians) .cand-party-chip.green { background: rgba(22,163,74,0.13);  color: #15803d; }
:where(body.page-politicians) .cand-party-chip.ind   { background: rgba(107,114,128,0.16); color: #4b5563; }
:where(body.page-politicians) .cand-party-chip.other { background: var(--border); color: var(--muted); }
:where(body.page-politicians) .cand-office {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
:where(body.page-politicians) .cand-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 10px;
}
:where(body.page-politicians) .cand-stats span strong { color: var(--text); }
:where(body.page-politicians) .cand-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
:where(body.page-politicians) .btn-cand-profile {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-politicians) .btn-cand-profile:hover { background: var(--accent); color: var(--white); }
:where(body.page-politicians) .party-pct-bar {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
:where(body.page-politicians) .party-pct-fill { height: 100%; border-radius: 999px; }
:where(body.page-politicians) .party-pct-fill.dem { background: var(--accent-blue); }
:where(body.page-politicians) .party-pct-fill.rep { background: rgb(180,30,30); }

/* ── "Running for" line — shown on cards whose politician has an
   active candidacy for a different office than their current one.
   Visual treatment matches .cand-office: plain muted text, :where(body.page-politicians) no pill,
   :where(body.page-politicians) just one quiet additional line under the office. Sits tight to
   the office line above so the two read as a single block. */
:where(body.page-politicians) .cand-running-for {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: -6px;       /* offsets .cand-office's margin-bottom */
  margin-bottom: 8px;
}

/* ── Website button — opens the politician's official site in a new tab.
   Visually a small secondary pill matching the other action buttons. */
:where(body.page-politicians) .btn-cand-website {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: #357cc8;
  background: none;
  border: 1.5px solid #357cc8;
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
  display: inline-flex; align-items: center; gap: 5px;
}
:where(body.page-politicians) .btn-cand-website:hover { background: #357cc8; color: var(--white); }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-website { color: #93c5fd; border-color: #93c5fd; }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-website:hover { background: #93c5fd; color: var(--surface-raised); }
/* America cards are LIGHT (#e8ecf4) — pale dark-theme blues are
   invisible on them. Use the deep link blue that survives a light
   background; matches .btn-track on the bills page. */
[data-theme="america"] :where(body.page-politicians) .btn-cand-website { color: #2d5b8a; border-color: #2d5b8a; }
[data-theme="america"] :where(body.page-politicians) .btn-cand-website:hover { background: #2d5b8a; color: var(--white); }

/* ── Track pill (replaces the star icon button) ── */
:where(body.page-politicians) .btn-cand-follow {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
:where(body.page-politicians) .btn-cand-follow:hover { border-color: #d4a017; color: #d4a017; }
:where(body.page-politicians) .btn-cand-follow.followed {
  background: rgba(220,160,40,0.16);
  border-color: #d4a017;
  color: #d4a017;
}



/* ── Empty / loading ── */
:where(body.page-politicians) .cand-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 0.9rem;
}
/* ── Light mode "See Full Profile" — accent maroon is too dark on light card ── */
[data-theme="light"] :where(body.page-politicians) .btn-cand-profile { color: #c0392b; border-color: #c0392b; }
[data-theme="light"] :where(body.page-politicians) .btn-cand-profile:hover { background: #c0392b; color: var(--white); }

/* ── Dark mode ── */
[data-theme="dark"] :where(body.page-politicians) .cand-card { background: var(--surface-card); }
/* Party chips need more punch on the dark card — the 0.12 alpha that works
   in light mode disappears against #1c2840. Brighter background + lighter
   text reads cleanly against navy. */
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.dem { background: rgba(53,124,200,0.28); color: #93c5fd; }
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.rep { background: rgba(220,80,80,0.28);  color: #fca5a5; }
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.lib   { background: rgba(217,119,6,0.28);  color: #fbbf24; }
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.green { background: rgba(22,163,74,0.28);   color: #4ade80; }
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.ind   { background: rgba(148,163,184,0.20); color: #cbd5e1; }
[data-theme="dark"] :where(body.page-politicians) .cand-party-chip.other { background: var(--hairline-default); color: rgba(255,255,255,0.72); }
[data-theme="dark"] :where(body.page-politicians) .cand-issue-pill { background: rgba(53,124,200,0.14); border-color: rgba(53,124,200,0.28); color: rgba(255,255,255,0.88); }
[data-theme="dark"] :where(body.page-politicians) .cand-issue-pill strong { color: rgba(255,255,255,0.95); }
[data-theme="dark"] :where(body.page-politicians) .cand-issues { border-top-color: var(--hairline-default); }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-follow { border-color: var(--hairline-strong); color: var(--ink-muted); }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-follow:hover { border-color: #e6b651; color: #e6b651; }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-follow.followed { background: rgba(220,160,40,0.22); border-color: #e6b651; color: #e6b651; }
[data-theme="dark"] :where(body.page-politicians) .cand-name { color: var(--ink); }
[data-theme="dark"] :where(body.page-politicians) .cand-office,
[data-theme="dark"] :where(body.page-politicians) .cand-stats { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-politicians) .cand-stats span strong { color: rgba(255,255,255,0.85); }
[data-theme="dark"] :where(body.page-politicians) .cand-photo-placeholder { background: #243352; color: var(--ink-faint); }
[data-theme="dark"] :where(body.page-politicians) .filter-select { background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="dark"] :where(body.page-politicians) .bills-search { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="dark"] :where(body.page-politicians) .bills-search::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-profile { color: #5b9bd5; border-color: #5b9bd5; }
[data-theme="dark"] :where(body.page-politicians) .btn-cand-profile:hover { background: #5b9bd5; color: var(--white); }

/* ── America mode ── */
[data-theme="america"] :where(body.page-politicians) .cand-issue-pill { background: rgba(255,255,255,0.78); border-color: rgba(53,124,200,0.30); color: var(--ink); }
[data-theme="america"] :where(body.page-politicians) .cand-issue-pill strong { color: var(--ink); }
[data-theme="america"] :where(body.page-politicians) .cand-issues { border-top-color: rgba(0,0,0,0.10); }
/* Dark text on the light america card — the white-alpha dark-theme
   treatment disappears here. Gold accent darkened for contrast. */
[data-theme="america"] :where(body.page-politicians) .btn-cand-follow { border-color: rgba(26,32,53,0.25); color: var(--ink-muted); }
[data-theme="america"] :where(body.page-politicians) .btn-cand-follow:hover { border-color: #b8860b; color: #b8860b; }
[data-theme="america"] :where(body.page-politicians) .btn-cand-follow.followed { background: rgba(184,134,11,0.14); border-color: #b8860b; color: #b8860b; }
[data-theme="america"] :where(body.page-politicians) .filter-select { background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="america"] :where(body.page-politicians) .bills-search { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="america"] :where(body.page-politicians) .bills-search::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="america"] :where(body.page-politicians) .btn-cand-profile { color: #c0392b; border-color: #c0392b; }
[data-theme="america"] :where(body.page-politicians) .btn-cand-profile:hover { background: #c0392b; color: var(--white); }


/* ================================================================
   PAGE: premium.html   (moved from its inline <style> block)
   NOTE: selectors touching .stat-card are scoped
   :where(body.page-premium) — same class names are styled differently
   on another page; :where() adds no specificity.
   ================================================================ */

:where(body.page-premium) .premium-tab-panel { display: none; }
:where(body.page-premium) .premium-tab-panel.active { display: block; }

/* Flash ring when arriving via a ?poll=<id> deep-link from Explore. */
:where(body.page-premium) .poll-archive-card.poll-deeplink-flash { animation: pollDeeplinkFlash 2.4s ease-out; }
@keyframes pollDeeplinkFlash {
  0%, 65% { box-shadow: 0 0 0 3px var(--accent); }
  100%    { box-shadow: 0 0 0 3px rgba(0,0,0,0); }
}

:where(body.page-premium) .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { :where(body.page-premium) .stats-grid { grid-template-columns: 1fr; } }

:where(body.page-premium) .stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
:where(body.page-premium) .stat-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
:where(body.page-premium) .stat-card-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--card-text);
  line-height: 1.2;
}

:where(body.page-premium) .stats-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 12px;
}
:where(body.page-premium) .stats-section-title {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
}
:where(body.page-premium) .stats-section-title::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
/* Scope widened cycle 071 (the bill-meta precedent): account.html's civic-
   ledger fingerprint bars reuse this SAME family verbatim, not a clone. */
:where(body.page-premium, body.page-account) .stats-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
:where(body.page-premium, body.page-account) .stats-bar-row:last-child { margin-bottom: 0; }
:where(body.page-premium, body.page-account) .stats-bar-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--card-text);
}
:where(body.page-premium, body.page-account) .stats-bar-track {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
:where(body.page-premium, body.page-account) .stats-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent));
}
:where(body.page-premium, body.page-account) .stats-bar-pct {
  width: 38px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

:where(body.page-premium) .premium-chat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: calc(100vh - 180px);
}
:where(body.page-premium) .premium-chat-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
:where(body.page-premium) .premium-chat-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--card-text);
}
:where(body.page-premium) .premium-chat-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
:where(body.page-premium) .premium-chat-live {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
:where(body.page-premium) .premium-chat-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}
:where(body.page-premium) .premium-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
}
:where(body.page-premium) .premium-chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.45;
}
:where(body.page-premium) .premium-chat-msg.them {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--card-text);
}
:where(body.page-premium) .premium-chat-msg.you {
  align-self: flex-end;
  background: var(--accent);
  color: var(--white);
}
:where(body.page-premium) .premium-chat-msg-meta {
  font-size: 0.68rem;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.75;
}
:where(body.page-premium) .premium-chat-footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
:where(body.page-premium) .premium-chat-input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
}
:where(body.page-premium) .premium-chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(128,0,0,0.08);
}
:where(body.page-premium) .premium-chat-send {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  cursor: pointer;
}
:where(body.page-premium) .premium-chat-send:hover { background: var(--accent-dk); }

[data-theme="dark"] :where(body.page-premium) .stat-card,
[data-theme="dark"] :where(body.page-premium) .stats-section,
[data-theme="dark"] :where(body.page-premium) .premium-chat-card { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-premium) .premium-chat-messages { background: #131d30; }
[data-theme="dark"] :where(body.page-premium) .premium-chat-msg.them { background: #243352; border-color: var(--hairline-default); color: rgba(255,255,255,0.9); }

[data-theme="dark"] :where(body.page-premium) .stat-card-label      { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-premium) .stat-card-value      { color: var(--ink); }
[data-theme="dark"] :where(body.page-premium) .stats-section-title  { color: rgba(255,255,255,0.45); }
/* Scope widened cycle 071 (the bill-meta precedent): account.html's civic-
   ledger fingerprint bars reuse this SAME family verbatim, not a clone. */
[data-theme="dark"] :where(body.page-premium, body.page-account) .stats-bar-label      { color: rgba(255,255,255,0.85); }
[data-theme="dark"] :where(body.page-premium, body.page-account) .stats-bar-pct        { color: rgba(255,255,255,0.55); }
[data-theme="dark"] :where(body.page-premium, body.page-account) .stats-bar-track      { background: rgba(255,255,255,0.08); }
[data-theme="dark"] :where(body.page-premium) .premium-chat-title   { color: var(--ink); }
[data-theme="dark"] :where(body.page-premium) .premium-chat-sub     { color: rgba(255,255,255,0.45); }
[data-theme="dark"] :where(body.page-premium) .premium-chat-header  { border-color: rgba(255,255,255,0.08); }


/* ================================================================
   PAGE: races.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Date group heading ── */
:where(body.page-races) .elec-date-heading {
  /* cycle 109: restyled to the kicker treatment (already uppercase/800/
     muted -- widened tracking + the accent rule below). */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 2px 8px;
}
:where(body.page-races) .elec-date-heading::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-races) .elec-date-heading .elec-countdown {
  /* cycle 109: "race countdowns" -- the ceremony target named in the plan.
     Escapes the kicker parent's caps/tracking (font-weight/letter-spacing/
     text-transform below); no dedicated bigger display exists for this
     today, so this stays modest-scale, serif only. */
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 8px;
}

/* ── Election rows ── */
:where(body.page-races) .elec-list-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
:where(body.page-races) .elec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
:where(body.page-races) .elec-row:last-child { border-bottom: none; }
:where(body.page-races) .elec-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: var(--icon-tile-bg);
}
:where(body.page-races) .elec-body { flex: 1; min-width: 0; }
:where(body.page-races) .elec-name { font-size: 0.84rem; font-weight: 700; color: var(--card-text); }
:where(body.page-races) .elec-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
:where(body.page-races) .elec-meta-line { line-height: 1.5; }
:where(body.page-races) .elec-incumbent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:where(body.page-races) .elec-photo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-races) .elec-photo.dem { border-color: var(--accent-blue); }
:where(body.page-races) .elec-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-races) .elec-incumbent .dem { color: var(--accent-blue); font-weight: 700; }
:where(body.page-races) .elec-incumbent .rep { color: rgb(180,30,30); font-weight: 700; }
[data-theme="dark"] :where(body.page-races) .elec-incumbent .dem { color: #93c5fd; }
[data-theme="dark"] :where(body.page-races) .elec-incumbent .rep { color: #f4a7a7; }
:where(body.page-races) .btn-elec-track {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), background var(--dur-micro) var(--ease-stately);
}
:where(body.page-races) .btn-elec-track:hover { border-color: #d4a017; color: #d4a017; }
:where(body.page-races) .btn-elec-track.tracked {
  background: rgba(220,160,40,0.16);
  border-color: #d4a017;
  color: #d4a017;
}
:where(body.page-races) .sb-profile-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
}
/* The theme accent (#700000) is unreadable on dark cards; use the
   same soft red the rest of dark mode uses for accent text. */
[data-theme="dark"] :where(body.page-races) .sb-profile-link { color: #f4a7a7; border-color: #f4a7a7; }
/* America's sidebar is navy; follow its existing button treatment
   (white-translucent, :where(body.page-races) like .right-sidebar .btn-track). */
[data-theme="america"] :where(body.page-races) .sb-profile-link { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }

/* ── My Ballot Info: a full-bleed rule under the title, :where(body.page-races) a strong location
   header, :where(body.page-races) then one labeled field per district so the eye can scan
   type → value down the column. ── */
/* Indent the districts content to match the "Next race" card (no border). */
:where(body.page-races) #sb-districts { padding-left: 12px; margin-top: 12px; }
:where(body.page-races) .bi-divider { display: none; }
:where(body.page-races) .bi-loc {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 700; margin-bottom: 2px;
  color: var(--card-text);
}
:where(body.page-races) .bi-loc svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.9; }
:where(body.page-races) .bi-field {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--border);
}
:where(body.page-races) .bi-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
:where(body.page-races) .bi-value { font-weight: 600; text-align: right; color: var(--card-text); }
/* America's rail is navy but --card-text/--border stay light-theme values,
   :where(body.page-races) so flip text light and soften the hairlines there. */
[data-theme="america"] :where(body.page-races) .bi-loc,
[data-theme="america"] :where(body.page-races) .bi-value  { color: rgba(255,255,255,0.92); }
[data-theme="america"] :where(body.page-races) .bi-label  { color: rgba(255,255,255,0.6); }
[data-theme="america"] :where(body.page-races) .bi-divider { background: rgba(255,255,255,0.14); }
[data-theme="america"] :where(body.page-races) .bi-field  { border-top-color: rgba(255,255,255,0.12); }

:where(body.page-races) .elec-loading {
  padding: 32px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Candidates expansion ── */
:where(body.page-races) .btn-elec-expand,
:where(body.page-races) .btn-elec-discuss {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:where(body.page-races) .btn-elec-discuss { text-decoration: none; }
:where(body.page-races) .btn-elec-expand:hover,
:where(body.page-races) .btn-elec-discuss:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] :where(body.page-races) .btn-elec-expand:hover,
[data-theme="dark"] :where(body.page-races) .btn-elec-discuss:hover { border-color: #f4a7a7; color: #f4a7a7; }
/* Expanded state: filled accent so the open card's button reads
   as "on" - mirrors how the Tracking button fills when active. */
/* var(--accent) resolves to each theme's own red (light/america
   #800000, :where(body.page-races) dark #700000), :where(body.page-races) so the open state always matches the
   mode's standard accent. */
:where(body.page-races) .btn-elec-expand.open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
:where(body.page-races) .btn-elec-expand.open:hover { border-color: var(--accent); color: var(--white); }

:where(body.page-races) .elec-candidates {
  padding: 6px 16px 12px 66px;   /* aligns under the row body, past the photo */
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.015);
}
[data-theme="dark"] :where(body.page-races) .elec-candidates { background: rgba(255,255,255,0.025); }
:where(body.page-races) .elec-candidates:last-child { border-bottom: none; }
:where(body.page-races) .elec-cand-heading {
  /* cycle 109: restyled to the kicker treatment. */
  font-size: var(--type-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 8px;
}
:where(body.page-races) .elec-cand-heading::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}
:where(body.page-races) .elec-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur-press-in) var(--ease-stately);
}
:where(body.page-races) .elec-cand:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] :where(body.page-races) .elec-cand:hover { background: rgba(255,255,255,0.05); }
:where(body.page-races) .elec-cand-photo {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-races) .elec-cand-photo.dem { border-color: var(--accent-blue); }
:where(body.page-races) .elec-cand-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-races) .elec-cand-initial {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; color: var(--muted);
  background: var(--border);
  border: 2px solid transparent;
}
:where(body.page-races) .elec-cand-initial.dem { border-color: var(--accent-blue); color: var(--accent-blue); }
:where(body.page-races) .elec-cand-initial.rep { border-color: rgb(180,30,30); color: rgb(180,30,30); }
:where(body.page-races) .elec-cand-name { font-size: 0.8rem; font-weight: 700; color: var(--card-text); }
:where(body.page-races) .elec-cand-party {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:where(body.page-races) .elec-cand-party.dem { background: rgba(53,124,200,0.12); color: var(--accent-blue); }
:where(body.page-races) .elec-cand-party.rep { background: rgba(180,30,30,0.12); color: rgb(180,30,30); }
:where(body.page-races) .elec-cand-party.other { background: var(--border); color: var(--muted); }
[data-theme="dark"] :where(body.page-races) .elec-cand-party.dem { color: #93c5fd; }
[data-theme="dark"] :where(body.page-races) .elec-cand-party.rep { color: #f4a7a7; }
:where(body.page-races) .elec-cand-empty {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0 2px;
}


/* ================================================================
   PAGE: todays-vote.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Rich poll options: inline blanks + follow-up panels ── */
/* Labels with inline blanks wrap across lines — extra leading keeps
   the framed inputs from crowding the line above. */
:where(body.page-todays-vote) .option-name:has(.blank-input) { line-height: 1.8; }
:where(body.page-todays-vote) #related-news-feed .news-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
:where(body.page-todays-vote) .news-card-body { flex: 1; min-width: 0; }
:where(body.page-todays-vote) .news-card-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  overflow: hidden;
  position: relative;
}
[data-theme="dark"] :where(body.page-todays-vote) .news-card-logo, [data-theme="america"] :where(body.page-todays-vote) .news-card-logo {
  background: rgba(255,255,255,0.08);
}
:where(body.page-todays-vote) .news-card-logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}
:where(body.page-todays-vote) .news-card-logo-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--muted, #8a93a8);
}

/* Show-more under related news — themed, :where(body.page-todays-vote) the raw accent red is
   unreadable on dark backgrounds. */
:where(body.page-todays-vote) .news-more-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  margin: 6px auto 0;
  display: block;
}
[data-theme="dark"] :where(body.page-todays-vote) .news-more-btn { color: #f4a7a7; border-color: rgba(255,255,255,0.2); }
[data-theme="america"] :where(body.page-todays-vote) .news-more-btn { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.35); }

/* ── Rate-this-poll thumbs (footer, :where(body.page-todays-vote) card-body palette) ── */
:where(body.page-todays-vote) .poll-rate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), border-color var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-todays-vote) .poll-rate-btn svg { width: 13px; height: 13px; }
/* Up reads green, :where(body.page-todays-vote) down reads red — both in hover hint and active fill. */
:where(body.page-todays-vote) #poll-rate-up:hover { border-color: #1a7f37; color: #1a7f37; }
:where(body.page-todays-vote) #poll-rate-down:hover { border-color: var(--accent); color: var(--accent); }
:where(body.page-todays-vote) #poll-rate-up.active { background: #1a7f37; border-color: #1a7f37; color: var(--white); }
:where(body.page-todays-vote) #poll-rate-down.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
[data-theme="dark"] :where(body.page-todays-vote) #poll-rate-up:hover { border-color: #7ee2a0; color: #7ee2a0; }
[data-theme="dark"] :where(body.page-todays-vote) #poll-rate-down:hover { border-color: #f4a7a7; color: #f4a7a7; }
[data-theme="dark"] :where(body.page-todays-vote) #poll-rate-up.active { background: #2e8b57; border-color: #2e8b57; color: var(--white); }
[data-theme="dark"] :where(body.page-todays-vote) #poll-rate-down.active { background: #b03a3a; border-color: #b03a3a; color: var(--white); }
:where(body.page-todays-vote) .poll-rate-btn span:empty { display: none; }

:where(body.page-todays-vote) .blank-input {
  width: 44px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: inherit;
  background: transparent;
  /* Faint frame with a slight top radius; the strong 2px baseline
     stays so it still reads as a fill-in-the-blank. */
  border: 1px solid rgba(120, 134, 160, 0.25);
  border-bottom: 2px solid var(--border, #b6c0d4);
  border-radius: 4px 4px 0 0;
  padding: 3px 4px 0;
  height: 19px;
  line-height: 16px;
  box-sizing: border-box;
  margin: 0 5px;
  text-align: center;
  vertical-align: baseline;
  -moz-appearance: textfield;
}
:where(body.page-todays-vote) .blank-input::-webkit-outer-spin-button, :where(body.page-todays-vote) .blank-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(body.page-todays-vote) .blank-input:focus { outline: none; border-bottom-color: var(--accent); }
[data-theme="dark"] :where(body.page-todays-vote) .blank-input, [data-theme="america"] :where(body.page-todays-vote) .blank-input {
  border-color: rgba(255,255,255,0.16);
  border-bottom-color: rgba(255,255,255,0.45);
}
[data-theme="dark"] :where(body.page-todays-vote) .blank-input:focus, [data-theme="america"] :where(body.page-todays-vote) .blank-input:focus {
  border-bottom-color: #f4a7a7;
}

:where(body.page-todays-vote) .option-followups {
  display: none;
  margin: 10px 0 6px 26px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  font-size: 0.8rem;
  color: #1c2840;
}
[data-theme="dark"] :where(body.page-todays-vote) .option-followups,
[data-theme="america"] :where(body.page-todays-vote) .option-followups {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.05);
}
:where(body.page-todays-vote) .poll-option.selected .option-followups,
:where(body.page-todays-vote) .poll-option.chosen .option-followups { display: block; }
:where(body.page-todays-vote) .followup-label {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  margin: 14px 0 8px;
}
:where(body.page-todays-vote) .followup-label:first-child { margin-top: 0; }
/* Aligned columns instead of ragged inline wrapping. */
:where(body.page-todays-vote) .followup-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 7px 14px;
}
:where(body.page-todays-vote) .followup-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
}
/* Custom-drawn checkboxes — native ones paint a stark white square
   on dark cards. Transparent until checked, :where(body.page-todays-vote) then accent-filled. */
:where(body.page-todays-vote) .followup-check input {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(120,134,160,0.55);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
:where(body.page-todays-vote) .followup-check input::before {
  content: '';
  width: 8px; height: 8px;
  transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--white);
}
:where(body.page-todays-vote) .followup-check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
:where(body.page-todays-vote) .followup-check input:checked::before { transform: scale(1); }
[data-theme="dark"] :where(body.page-todays-vote) .followup-check input,
[data-theme="america"] :where(body.page-todays-vote) .followup-check input { border-color: rgba(255,255,255,0.4); }
[data-theme="dark"] :where(body.page-todays-vote) .followup-check input:checked,
[data-theme="america"] :where(body.page-todays-vote) .followup-check input:checked {
  background: #b03a3a;
  border-color: #b03a3a;
}
:where(body.page-todays-vote) .followup-select {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--card-text, inherit);
  background: rgba(0,0,0,0.04);
  border: 1.5px solid var(--border, #d6dbe8);
  border-radius: 8px;
  padding: 4px 8px;
}
[data-theme="dark"] :where(body.page-todays-vote) .followup-select, [data-theme="america"] :where(body.page-todays-vote) .followup-select {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: inherit;
}
:where(body.page-todays-vote) .followup-select option { color: #1c2840; background: var(--white); }
[data-theme="dark"] :where(body.page-todays-vote) .followup-select option { color: #e6ebf4; background: #0e1c30; }
:where(body.page-todays-vote) .poll-card.voted .blank-input,
:where(body.page-todays-vote) .poll-card.voted .followup-check input,
:where(body.page-todays-vote) .poll-card.voted .followup-select { pointer-events: none; opacity: 0.8; }

/* ── Opinion trend (Pnyx-only readings over time) ── */
:where(body.page-todays-vote) #opinion-trend { margin: 30px 0 4px; }
:where(body.page-todays-vote) .trend-section {
  border: 1.5px solid var(--border, #d6dbe8); border-radius: 14px;
  padding: 18px 20px 20px; background: var(--card, var(--white));
}
:where(body.page-todays-vote) .trend-head { font-size: 1.02rem; font-weight: 700; color: var(--card-text, var(--text)); margin: 0 0 2px; }
:where(body.page-todays-vote) .trend-sub  { font-size: 0.78rem; color: var(--card-muted, var(--muted)); margin: 0 0 14px; }
:where(body.page-todays-vote) .trend-caveat {
  font-size: 0.78rem; color: var(--card-muted, var(--muted));
  font-style: italic; margin: 12px 0 0; line-height: 1.5;
}
:where(body.page-todays-vote) .trend-chart { width: 100%; height: auto; display: block; overflow: visible; }
:where(body.page-todays-vote) .trend-grid-line { stroke: var(--border, #d6dbe8); stroke-width: 1; opacity: 0.5; }
:where(body.page-todays-vote) .trend-axis-label { fill: var(--card-muted, var(--muted)); font-size: 10px; }
:where(body.page-todays-vote) .trend-axis-sub { font-size: 9px; opacity: 0.8; }
:where(body.page-todays-vote) .trend-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
:where(body.page-todays-vote) .trend-dot { stroke: var(--card, var(--white)); stroke-width: 1.5; }
:where(body.page-todays-vote) .trend-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 14px 0 0; }
:where(body.page-todays-vote) .trend-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--card-text, var(--text)); }
:where(body.page-todays-vote) .trend-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
/* 1–2 reading cards (no line is honest at this point) */
:where(body.page-todays-vote) .trend-readings { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
:where(body.page-todays-vote) .trend-reading {
  flex: 1 1 150px; border: 1.5px solid var(--border, #d6dbe8); border-radius: 12px;
  padding: 12px 14px; background: rgba(0,0,0,0.015);
}
[data-theme="dark"] :where(body.page-todays-vote) .trend-reading, [data-theme="america"] :where(body.page-todays-vote) .trend-reading { background: rgba(255,255,255,0.04); }
:where(body.page-todays-vote) .trend-reading-date { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--card-muted, var(--muted)); }
:where(body.page-todays-vote) .trend-reading-lead { font-size: 1.05rem; font-weight: 700; color: var(--card-text, var(--text)); margin: 6px 0 2px; }
:where(body.page-todays-vote) .trend-reading-n { font-size: 0.74rem; color: var(--card-muted, var(--muted)); }
/* Neutral party split — describes where each party stood, :where(body.page-todays-vote) never "who won" */
:where(body.page-todays-vote) .trend-split { display: flex; gap: 16px; margin: 16px 0 0; flex-wrap: wrap; }
:where(body.page-todays-vote) .trend-split-item { font-size: 0.78rem; color: var(--card-muted, var(--muted)); }
:where(body.page-todays-vote) .trend-split-item b { color: var(--card-text, var(--text)); font-weight: 700; }

/* ── First-paint skeleton (cycle 014) ── shown in the poll card until
   fetchToday() resolves; the render (or the empty state) clears it. Opacity
   pulse is theme-agnostic (reads on light + dark card bodies). */
:where(body.page-todays-vote, body.page-landing) .skel { background: var(--border, #d6dbe8); border-radius: 6px; animation: skel-pulse 1.3s ease-in-out infinite; }
:where(body.page-todays-vote, body.page-landing) .skel-q   { display: block; height: 22px; width: 80%; margin: 4px 0 8px; }
:where(body.page-todays-vote, body.page-landing) .skel-opt { height: 46px; width: 100%; margin: 10px 0; border-radius: 10px; }
@keyframes skel-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { :where(body.page-todays-vote, body.page-landing) .skel { animation: none; opacity: 0.65; } }

/* ================================================================
   PAGE: voting-aid.html   (moved from its inline <style> block)
   ================================================================ */

/* ── Candidate picker ── */
:where(body.page-voting-aid) .decide-picker-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
:where(body.page-voting-aid) .decide-picker-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
:where(body.page-voting-aid) .decide-picker-select {
  flex: 1;
  min-width: 160px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: #f0f3fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  -webkit-appearance: none; appearance: none;
  outline: none;
  cursor: pointer;
}
:where(body.page-voting-aid) .decide-picker-select:focus { border-color: var(--accent); }
/* The open option list is OS-rendered on a light background by
   default; the dark themes' white control text disappears on it.
   Pin option colors per theme. */
:where(body.page-voting-aid) .decide-picker-select option, :where(body.page-voting-aid) .ballot-fill option { color: #1c2840; background: var(--white); }

/* ── Politician typeahead ── */
/* Flexible width so the search and the ballot-fill select share
   one row in the picker bar instead of wrapping. */
:where(body.page-voting-aid) .cand-search-wrap { position: relative; flex: 1 1 170px; max-width: 300px; }
:where(body.page-voting-aid) .cand-search {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: #f0f3fa;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  outline: none;
}
:where(body.page-voting-aid) .cand-search:focus { border-color: var(--accent); }
:where(body.page-voting-aid) .cand-search::placeholder { color: var(--muted); font-weight: 500; }
[data-theme="dark"] :where(body.page-voting-aid) .cand-search,
[data-theme="america"] :where(body.page-voting-aid) .cand-search {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}
:where(body.page-voting-aid) .cand-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
:where(body.page-voting-aid) .cand-search-results.open { display: block; }
:where(body.page-voting-aid) .cand-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--card-text);
}
:where(body.page-voting-aid) .cand-search-item:hover, :where(body.page-voting-aid) .cand-search-item.hl { background: rgba(0,0,0,0.05); }
[data-theme="dark"] :where(body.page-voting-aid) .cand-search-item:hover, [data-theme="dark"] :where(body.page-voting-aid) .cand-search-item.hl,
[data-theme="america"] :where(body.page-voting-aid) .cand-search-item:hover, [data-theme="america"] :where(body.page-voting-aid) .cand-search-item.hl { background: rgba(255,255,255,0.07); }
:where(body.page-voting-aid) .cand-search-photo {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--border);
}
:where(body.page-voting-aid) .cand-search-initial {
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; color: var(--muted); background: var(--border);
}
:where(body.page-voting-aid) .cand-search-name { font-weight: 700; }
:where(body.page-voting-aid) .cand-search-meta { margin-left: auto; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
:where(body.page-voting-aid) .cand-search-none { padding: 12px; font-size: 0.8rem; color: var(--muted); font-style: italic; }
[data-theme="dark"] :where(body.page-voting-aid) .decide-picker-select option, [data-theme="dark"] :where(body.page-voting-aid) .ballot-fill option { color: #e6ebf4; background: #0e1c30; }
[data-theme="america"] :where(body.page-voting-aid) .decide-picker-select option, [data-theme="america"] :where(body.page-voting-aid) .ballot-fill option { color: #e6ebf4; background: var(--surface-raised); }
:where(body.page-voting-aid) .decide-vs {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

/* ── Score header ── */
:where(body.page-voting-aid) .decide-score-bar {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
:where(body.page-voting-aid) .decide-score-card {
  flex: 1;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  text-align: center;
}
:where(body.page-voting-aid) .decide-score-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(body.page-voting-aid) .decide-score-pct {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
:where(body.page-voting-aid) .decide-score-pct.high  { color: #16a34a; }
:where(body.page-voting-aid) .decide-score-pct.mid   { color: #d97706; }
:where(body.page-voting-aid) .decide-score-pct.low   { color: #dc2626; }
:where(body.page-voting-aid) .decide-score-pct.none  { color: var(--muted); }
:where(body.page-voting-aid) .decide-score-sub {
  font-size: 0.72rem;
  color: var(--muted);
}
:where(body.page-voting-aid) .decide-score-add {
  flex: 1;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  text-align: center;
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-stately);
}
:where(body.page-voting-aid) .decide-score-add:hover { border-color: var(--accent); }
:where(body.page-voting-aid) .decide-score-add-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
:where(body.page-voting-aid) .decide-score-add-link  { font-size: 0.75rem; color: var(--accent); font-weight: 600; text-decoration: none; }

/* ── Section cards ── */
:where(body.page-voting-aid) .decide-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 12px;
}
    :where(body.page-voting-aid) .ballot-fill {
  font-family: inherit;
  /* Same vertical metrics as .cand-search so the two controls sit
     flush on the picker row. */
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--card-text);
  /* Custom chevron (matches .decide-picker-select), kept 14px off the edge
     with roomy text padding so the arrow isn't crowded against the pill. */
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 7px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0 34px 0 14px;
  height: 32px;
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  max-width: 260px;
  cursor: pointer;
}

/* ── Voter Match ── */
:where(body.page-voting-aid) .match-setup {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 16px;
}
:where(body.page-voting-aid) .match-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
:where(body.page-voting-aid) .match-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--card-text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
}
:where(body.page-voting-aid) .match-chip button {
  border: none; background: var(--border); color: var(--muted);
  border-radius: 50%; width: 18px; height: 18px; line-height: 1;
  font-size: 0.7rem; cursor: pointer;
}
:where(body.page-voting-aid) .btn-find-match {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--white);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  cursor: pointer;
}
:where(body.page-voting-aid) .btn-find-match:disabled { opacity: 0.5; cursor: default; }
:where(body.page-voting-aid) .match-result {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 2px solid transparent;
}
:where(body.page-voting-aid) .match-result.winner { border-color: #d4a017; }
:where(body.page-voting-aid) .match-result-head { display: flex; align-items: center; gap: 12px; }
:where(body.page-voting-aid) .match-result-pct { font-size: 1.5rem; font-weight: 800; margin-left: auto; }
:where(body.page-voting-aid) .match-result-pct.high { color: #1a7f37; }
:where(body.page-voting-aid) .match-result-pct.mid  { color: #b08800; }
:where(body.page-voting-aid) .match-result-pct.low  { color: #c0392b; }
[data-theme="dark"] :where(body.page-voting-aid) .match-result-pct.high { color: #7ee2a0; }
[data-theme="dark"] :where(body.page-voting-aid) .match-result-pct.mid  { color: #e8c45a; }
[data-theme="dark"] :where(body.page-voting-aid) .match-result-pct.low  { color: #f4a7a7; }
:where(body.page-voting-aid) .match-cat-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
:where(body.page-voting-aid) .match-cat-name { font-weight: 700; min-width: 130px; color: var(--card-text); }
:where(body.page-voting-aid) .match-cat-reason { color: var(--muted); }
:where(body.page-voting-aid) .match-verdict { font-weight: 700; min-width: 90px; }
:where(body.page-voting-aid) .v-agree { color: #1a7f37; } :where(body.page-voting-aid) .v-lean_agree { color: #4f9e54; }
:where(body.page-voting-aid) .v-mixed { color: #b08800; }
:where(body.page-voting-aid) .v-lean_disagree { color: #c46a3f; } :where(body.page-voting-aid) .v-disagree { color: #c0392b; }
:where(body.page-voting-aid) .v-no_data { color: var(--muted); }
[data-theme="dark"] :where(body.page-voting-aid) .v-agree { color: #7ee2a0; }
[data-theme="dark"] :where(body.page-voting-aid) .v-lean_agree { color: #a5d6a7; }
[data-theme="dark"] :where(body.page-voting-aid) .v-mixed { color: #e8c45a; }
[data-theme="dark"] :where(body.page-voting-aid) .v-lean_disagree { color: #f0b08a; }
[data-theme="dark"] :where(body.page-voting-aid) .v-disagree { color: #f4a7a7; }

:where(body.page-voting-aid) .decide-section-title {
  /* cycle 109 addendum: restyled to the kicker treatment. Plain block
     label, safe for ::after. */
  font-size: var(--type-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 16px;
}
:where(body.page-voting-aid) .decide-section-title::after {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--kicker-rule);
}

/* ── Comparison table ── */
:where(body.page-voting-aid) .decide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
:where(body.page-voting-aid) .decide-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 10px 10px 0;
  border-bottom: 1px solid var(--border);
}
:where(body.page-voting-aid) .decide-table th.cand-col { text-align: center; min-width: 110px; }
:where(body.page-voting-aid) .decide-table td {
  padding: 10px 10px 10px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.4;
}
:where(body.page-voting-aid) .decide-table tr:last-child td { border-bottom: none; }
:where(body.page-voting-aid) .decide-table td.cand-col {
  text-align: center;
  vertical-align: middle;
}
:where(body.page-voting-aid) .decide-table td.your-vote {
  font-weight: 600;
  color: var(--text);
}
:where(body.page-voting-aid) .match-icon { display: inline-flex; vertical-align: middle; line-height: 0; }
:where(body.page-voting-aid) .match-icon svg { width: 16px; height: 16px; display: block; }
:where(body.page-voting-aid) .match-icon.match   { color: #16a34a; }
:where(body.page-voting-aid) .match-icon.partial { color: #d97706; }
:where(body.page-voting-aid) .match-icon.nomatch { color: #dc2626; }
:where(body.page-voting-aid) .match-icon.nodata  { color: var(--muted); }

/* ── Sidebar: How This Works + Match Key ── */
:where(body.page-voting-aid) .how-works { font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
:where(body.page-voting-aid) .how-item  { margin-bottom: 13px; }
:where(body.page-voting-aid) .how-term  { font-weight: 700; color: var(--text); margin-bottom: 2px; }
:where(body.page-voting-aid) .how-tip   { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.78rem; }
:where(body.page-voting-aid) .match-key { display: flex; flex-direction: column; gap: 11px; font-size: 0.82rem; color: var(--text); }
:where(body.page-voting-aid) .match-key-row { display: flex; align-items: center; gap: 10px; }
:where(body.page-voting-aid) .match-key-row .match-icon svg { width: 17px; height: 17px; }
/* The right rail is navy in dark + America themes, :where(body.page-voting-aid) but --text/--muted stay
   light-theme (dark) values there — brighten this box's text for contrast. */
[data-theme="dark"] :where(body.page-voting-aid) .how-works, [data-theme="america"] :where(body.page-voting-aid) .how-works,
[data-theme="dark"] :where(body.page-voting-aid) .match-key, [data-theme="america"] :where(body.page-voting-aid) .match-key { color: rgba(255,255,255,0.82); }
[data-theme="dark"] :where(body.page-voting-aid) .how-term, [data-theme="america"] :where(body.page-voting-aid) .how-term { color: rgba(255,255,255,0.96); }

:where(body.page-voting-aid) .cand-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
:where(body.page-voting-aid) .cand-col-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
:where(body.page-voting-aid) .cand-col-photo.dem { border-color: var(--accent-blue); }
:where(body.page-voting-aid) .cand-col-photo.rep { border-color: rgb(180,30,30); }
:where(body.page-voting-aid) .cand-col-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}
:where(body.page-voting-aid) .cand-col-add {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}
:where(body.page-voting-aid) .cand-col-add a { color: var(--accent); font-weight: 600; text-decoration: none; }

:where(body.page-voting-aid) .decide-position-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text);
}

:where(body.page-voting-aid) .vote-icon-up   { color: #16a34a; font-size: 1rem; }
:where(body.page-voting-aid) .vote-icon-down { color: #dc2626; font-size: 1rem; }

/* ── Empty states ── */
:where(body.page-voting-aid) .decide-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.85rem;
  /* Centered in a sane well (cycle 040, N9) — same treatment as .bills-empty. */
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
}
:where(body.page-voting-aid) .decide-empty a { color: var(--accent); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-empty a,
[data-theme="america"] :where(body.page-voting-aid) .decide-empty a { color: #93c5fd; }

/* ── Score thresholds ── */
:where(body.page-voting-aid) .decide-score-thin {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* ── New-politician hint ── */
:where(body.page-voting-aid) .decide-new-politician {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 24px 16px;
}

/* ── Scope toggle ── */
:where(body.page-voting-aid) .decide-scope-toggle {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
:where(body.page-voting-aid) .decide-scope-toggle button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 4px 12px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
}
:where(body.page-voting-aid) .decide-scope-toggle button.active {
  background: var(--accent);
  color: var(--white);
}
[data-theme="dark"] :where(body.page-voting-aid) .decide-scope-toggle { border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-scope-toggle button { color: rgba(255,255,255,0.6); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-scope-toggle button.active { background: #5b9bd5; color: var(--white); }
[data-theme="america"] :where(body.page-voting-aid) .decide-scope-toggle button.active { background: #c0392b; }

/* ── Share match ── */
:where(body.page-voting-aid) .decide-share {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 12px;
}
:where(body.page-voting-aid) .decide-share button {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-stately), color var(--dur-micro) var(--ease-stately);
  display: inline-flex; align-items: center; gap: 6px;
}
:where(body.page-voting-aid) .decide-share button:hover { background: var(--accent); color: var(--white); }
[data-theme="light"] :where(body.page-voting-aid) .decide-share button { color: #c0392b; border-color: #c0392b; }
[data-theme="light"] :where(body.page-voting-aid) .decide-share button:hover { background: #c0392b; color: var(--white); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-share button { color: #5b9bd5; border-color: #5b9bd5; }
[data-theme="dark"] :where(body.page-voting-aid) .decide-share button:hover { background: #5b9bd5; color: var(--white); }
[data-theme="america"] :where(body.page-voting-aid) .decide-share button { color: #c0392b; border-color: #c0392b; }
[data-theme="america"] :where(body.page-voting-aid) .decide-share button:hover { background: #c0392b; color: var(--white); }

/* ── Absent-vote indicator ── */
:where(body.page-voting-aid) .vote-abs {
  color: var(--muted);
  font-style: italic;
  font-size: 0.72rem;
}

/* ── Bill row ── */
:where(body.page-voting-aid) .bill-row-title { font-size: 0.8rem; font-weight: 600; color: var(--text); }
:where(body.page-voting-aid) .bill-row-num   { font-size: 0.7rem; color: var(--muted); font-family: monospace; }
:where(body.page-voting-aid) .vote-yea { color: #16a34a; font-weight: 700; font-size: 0.78rem; }
:where(body.page-voting-aid) .vote-nay { color: #dc2626; font-weight: 700; font-size: 0.78rem; }
:where(body.page-voting-aid) .vote-abs { color: var(--muted); font-size: 0.78rem; }

/* ── Dark mode ── */
[data-theme="dark"] :where(body.page-voting-aid) .decide-picker-bar { background: var(--surface-raised); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-picker-select { background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-card,
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-card { background: var(--surface-card); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-add { background: var(--surface-card); border-color: var(--hairline-default); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-name,
[data-theme="dark"] :where(body.page-voting-aid) .decide-table td,
[data-theme="dark"] :where(body.page-voting-aid) .bill-row-title,
[data-theme="dark"] :where(body.page-voting-aid) .cand-col-name { color: rgba(255,255,255,0.85); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-section-title,
[data-theme="dark"] :where(body.page-voting-aid) .decide-table th,
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-sub,
[data-theme="dark"] :where(body.page-voting-aid) .bill-row-num,
[data-theme="dark"] :where(body.page-voting-aid) .decide-empty { color: var(--ink-faint); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-table td { border-color: var(--surface-sunken); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-table th { border-color: var(--hairline-default); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-position-label { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-add-link { color: #5b9bd5; }
[data-theme="dark"] :where(body.page-voting-aid) .decide-score-add-label { color: var(--ink-muted); }

/* ── America mode ── */
[data-theme="america"] :where(body.page-voting-aid) .decide-picker-bar { background: #071e48; border-color: rgba(255,255,255,0.10); }
[data-theme="america"] :where(body.page-voting-aid) .decide-picker-select { background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
[data-theme="america"] :where(body.page-voting-aid) .decide-score-add-link { color: #5b9bd5; }
/* Right sidebar sits on navy — inline var(--text) resolves to dark navy → invisible.
   Override to white-on-navy for both dark and america themes. */
[data-theme="dark"] :where(body.page-voting-aid) .right-sidebar strong,
[data-theme="america"] :where(body.page-voting-aid) .right-sidebar strong { color: rgba(255,255,255,0.88) !important; }
[data-theme="dark"] :where(body.page-voting-aid) .right-sidebar p,
[data-theme="america"] :where(body.page-voting-aid) .right-sidebar p { color: rgba(255,255,255,0.6) !important; }
[data-theme="dark"] :where(body.page-voting-aid) .right-sidebar .sidebar-box > div,
[data-theme="america"] :where(body.page-voting-aid) .right-sidebar .sidebar-box > div { color: rgba(255,255,255,0.6) !important; }