/* Inter (SIL Open Font License, fonts/OFL.txt), served from this site so no visitor request goes to Google. */
/* Font URLs carry ?v=<md5 of the file, 8 hex> so vercel.json can cache them for a year (immutable); the preload
   <link> in every page's <head> must use the identical URL, or the font downloads twice. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/inter-latin.woff2?v=65850a37) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2?v=01ba6c2a) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --navy: #0b1f4d;
  --blue: #1a4fd6;
  --blue-soft: #e8eefc;
  --ink: #111827;
  --muted: #4b5563;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-alt: #f6f8fc;
  --card: #ffffff;
  --btn: #1a4fd6;
  --nav-bg: rgba(255,255,255,0.92);
  --title: #0b1f4d;
  --radius: 14px;
  /* Text colours that sit on the page/card surface (not on their own tinted badge): red, amber, green, grey, burnt orange.
     Each has a dark-theme twin below that clears 4.5:1 on #19212f, #151c29 and #0e131c (F-0123). */
  --c-bad: #a61b1b; --c-warn: #8a4b00; --c-good: #17653a; --c-weak: #5b6472; --c-nov: #9a3412; --c-err: #b42318; --c-ok: #127a3a;
  color-scheme: light;
}
/* Dark mode: off until the reader turns it on with the footer button (app.js sets data-theme) */
:root[data-theme="dark"] {
  --blue: #8db0ff; --blue-soft: #1c2a47; --ink: #e5e8ee; --muted: #a7b0be; --line: #2c3547;
  --bg: #0e131c; --bg-alt: #151c29; --card: #19212f; --nav-bg: rgba(14,19,28,0.92); --title: #dbe4ff; color-scheme: dark;
  --c-bad: #ff9b94; --c-warn: #f0b45c; --c-good: #6fd49a; --c-weak: #a7b0be; --c-nov: #ffa070; --c-err: #ff9b94; --c-ok: #6fd49a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The header is sticky, so anything scrolled into view (a Tab stop, a #link) stops below it, never under it
   (WCAG 2.2, 2.4.11 Focus Not Obscured). 68px bar + border + a margin; without JavaScript the phone nav wraps to two
   rows, so it needs more. */
html { scroll-padding-top: 84px; }
@media (max-width: 800px) { html { scroll-padding-top: 76px; } }
@media (max-width: 800px) and (scripting: none) { html { scroll-padding-top: 124px; } }
body {
  margin: 0;
  overflow-wrap: break-word;   /* a long URL or ID breaks instead of widening the page on a phone */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--title); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: var(--btn); color: #fff; font-size: 0.85rem; letter-spacing: 0.02em;
}
.nav nav { display: flex; align-items: center; gap: 24px; }
.nav nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav nav a:hover { color: var(--blue); }
.nav nav a.btn { color: #fff; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  background: var(--btn); color: #fff; font-weight: 600; text-decoration: none;
  border: 2px solid var(--blue); transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); background: #1541b3; border-color: #1541b3; }
.btn-small { padding: 8px 18px; font-size: 0.9rem; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-outline { background: var(--card); color: var(--blue); }
.btn-outline:hover { background: var(--blue-soft); color: var(--blue); }
.btn-light { background: var(--card); color: var(--title); border-color: #fff; }
.btn-light:hover { background: var(--blue-soft); border-color: var(--blue-soft); }

/* Hero */
.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(26,79,214,0.55), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, #0f2a6b 100%);
  color: #fff;
  padding: clamp(80px, 14vw, 150px) 0 clamp(80px, 12vw, 130px);
}
.hero-slim { padding: clamp(56px, 9vw, 96px) 0; }
.hero .eyebrow { color: #9db8ff; }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 640px; color: #d6e0ff; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  font-weight: 700; color: var(--blue); margin: 0 0 12px;
}

/* Sections */
.section { padding: clamp(64px, 10vw, 110px) 0; }
main > .section:first-child:not(.section-alt):not(.section-dark) { padding-top: clamp(28px, 4vw, 48px); }   /* inner pages: no tall empty band under the nav */
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--navy); color: #fff; }
.section-dark .eyebrow { color: #9db8ff; }
.section-dark p:not(.run-rules p) { color: #d6e0ff; }   /* not inside the white .run-rules box (F-0102) */

.two-col > * { min-width: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.prose p { font-size: 1.1rem; color: var(--muted); margin: 0 0 1em; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.card p { color: var(--muted); margin: 0; }
.card-num { display: block; font-weight: 800; color: var(--blue); margin-bottom: 14px; }

.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative;
  border-top: 3px solid var(--blue); padding-top: 24px;
}
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue); font-weight: 800; margin-bottom: 14px;
}
.steps p { color: var(--muted); margin: 0 0 10px; }
.steps a { font-weight: 600; text-decoration: none; }

.contact-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* Placeholders: remove these once real content is in */
.placeholder {
  background: #fff7d6; border: 1px dashed #d4a300; color: #6b5200 !important;
  padding: 8px 12px; border-radius: 8px; font-size: 0.95rem;
}
.placeholder-dark { background: rgba(255, 215, 0, 0.12); border-color: #e0b400; color: #ffe27a !important; }

/* Footer */
.footer { background: #07163a; color: #b8c6ea; padding: 36px 0; font-size: 0.9rem; }
.footer a { color: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer p { margin: 0; }
.paid-for { border: 1px solid rgba(255,255,255,0.4); padding: 8px 12px; border-radius: 6px; }

/* Hero stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 820px; margin-top: 8px; }
.stat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 18px 20px; }
.stat-num { display: block; font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.stat-label { font-size: 0.9rem; color: #c3d2ff; }
.stats-note { margin-top: 14px; font-size: 0.85rem; color: #c3d2ff; }
.stats-note a { color: inherit; text-decoration: underline; }

/* List */
.list-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.updated { color: var(--muted); margin: 0 0 0.6em; font-size: 0.95rem; }
.controls { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 8px; }
.tabs { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px; align-self: flex-start; flex-wrap: wrap; }
.tabs button { font: inherit; font-weight: 600; font-size: 0.95rem; border: 0; background: transparent; color: var(--muted); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field input, .field select { font: inherit; font-size: 0.95rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); min-width: 180px; }
.field input:focus, .field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--blue); }
.result-count { color: var(--muted); font-size: 0.95rem; margin: 12px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.person {
  display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1.4fr) auto; gap: 18px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; position: relative;
}
.person[data-rank]:not([data-rank=""])::before {
  content: attr(data-rank); position: absolute; left: -10px; top: -10px; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.75rem; font-weight: 700; display: grid; place-items: center;
}
.photo { width: 56px; height: 68px; border-radius: 10px; background: var(--blue-soft); overflow: hidden; position: relative; display: grid; place-items: center; }
.photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.initials { font-weight: 800; color: var(--blue); }
.name { font-size: 1.1rem; font-weight: 700; margin: 0 0 2px; }
.seat { margin: 0 0 6px; color: var(--muted); font-size: 0.92rem; }
.badges { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.badge-hot { background: #fde8e8; color: #a61b1b; border-color: #f5c2c2; }
.total { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--title); }
.breakdown { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 2px 0 10px; font-size: 0.84rem; }
.breakdown dt { color: var(--ink); font-weight: 600; }
.breakdown dd { margin: 0; color: var(--muted); }
.breakdown .muted { font-weight: 500; color: var(--muted); }
.badge-warn { background: #fff4e0; color: #8a4b00; border-color: #f3d19c; }
.links { display: flex; flex-direction: column; gap: 6px; }
.links a { font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 2px 0; }   /* >= 24 px tall (WCAG 2.5.8) */
.links a:hover { text-decoration: underline; }
.targeted { color: var(--c-warn); }
.cycles { display: grid; gap: 3px; max-width: 320px; }
.cycle { display: grid; grid-template-columns: 38px 1fr 54px; gap: 8px; align-items: center; font-size: 0.78rem; color: var(--muted); }
.bar { height: 7px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--btn); border-radius: 99px; }
.cv { text-align: right; font-variant-numeric: tabular-nums; }
.fec { font-size: 0.88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fec:hover { text-decoration: underline; }

.clean { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; background: var(--bg-alt); }
.clean summary { cursor: pointer; font-weight: 700; }
.clean-note { color: var(--muted); font-size: 0.92rem; }
.clean ul { columns: 3 240px; padding-left: 18px; margin: 12px 0 0; font-size: 0.92rem; color: var(--muted); }
.prose ul { color: var(--muted); font-size: 1.05rem; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* Scorecard + challengers inside each card */
.extra { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
/* minmax(0, ...) tracks, min-width: 0 and overflow-wrap let long vote titles and score text wrap instead of widening the
   card past a 320 px screen (WCAG 1.4.10; tests/a11y.mjs sweeps every page at 320 px). */
.record { min-width: 0; }
.record summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.9rem; list-style: none; }
.record summary::-webkit-details-marker { display: none; }
/* The arrows are decorative: '/ ""' gives them empty alternative text so screen readers don't read them (the first
   content line is the fallback for browsers without that syntax). The toggle's open state comes from <details>. */
.record summary::after { content: '▸'; content: '▸' / ''; color: var(--muted); margin-left: auto; }
.record[open] summary::after { content: '▾'; content: '▾' / ''; }
.score-pill { font-weight: 800; font-size: 0.95rem; padding: 4px 10px; border-radius: 8px; min-width: 52px; text-align: center; }
.score-bad { background: #fde8e8; color: #a61b1b; }
.score-mid { background: #fff4e0; color: #8a4b00; }
.score-good { background: #e3f6ea; color: #17653a; }
.score-na { background: var(--bg-alt); color: var(--muted); }
.score-text { color: var(--muted); flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.vote-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 0.82rem; }
.vote-list li.vote-cat { display: block; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 12px; }
.vote-pref { color: var(--muted); font-size: 0.85em; }
.vote-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: start; overflow-wrap: anywhere; }
.vote-list a { color: var(--ink); text-decoration: none; }
.vote-list a:hover { text-decoration: underline; }
.vtag { font-weight: 700; text-align: center; border-radius: 6px; padding: 1px 0; font-size: 0.75rem; }
.vtag.good { background: #e3f6ea; color: #17653a; }
.vtag.bad { background: #fde8e8; color: #a61b1b; }
.vtag.na { background: var(--bg-alt); color: var(--muted); }
.challengers h3 { margin: 0 0 6px; font-size: 0.9rem; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.85rem; }
.ch-list li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ch-list .ch-name { font-weight: 700; }
.ch-list .ch-desc { color: var(--muted); margin: 2px 0 4px; }
.ch-list .ch-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-list .ch-links a { font-weight: 600; text-decoration: none; }
.ch-none { color: var(--muted); }
.race26 { margin: 0 0 14px; font-size: 0.85rem; }
.race26 h3, .race26 h4 { margin: 0 0 6px; font-size: 0.9rem; }
.race26 p { margin: 4px 0; }
.r26-sum { font-weight: 600; }
.r26-src, .r26-nov { color: var(--muted); }
.r26-src a, .r26-nov a, .r26-links a { font-weight: 600; text-decoration: none; }
.r26-links a { margin-left: 8px; font-size: 0.78rem; }
.r26-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.r26-table caption { text-align: left; color: var(--muted); font-size: 0.8rem; padding-bottom: 2px; }
.r26-table th, .r26-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.r26-table td:nth-child(3), .r26-table td:nth-child(4), .r26-table thead th:nth-child(3), .r26-table thead th:nth-child(4) { text-align: right; white-space: nowrap; }
.r26-table tbody th { font-weight: 400; }
.r26-member .r26-name { font-weight: 700; }
/* Narrow phones: long names and party labels wrap and cells tighten, so a crowded primary's table fits 320 px. */
.r26-table tbody th, .r26-table td:nth-child(2) { overflow-wrap: anywhere; }
@media (max-width: 400px) { .r26-table th, .r26-table td { padding: 4px 3px; } }
.tag-adv { background: #e8eefc; color: #1e3a8a; }
.tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.tag-against { background: #e3f6ea; color: #17653a; }
.tag-maybe { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.tag-same { background: #fde8e8; color: #a61b1b; }
.section-lede { color: var(--muted); max-width: 820px; font-size: 1.02rem; }
.vote-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 20px; }
.vote-table .vt-h { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.vote-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vote-table th, .vote-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vote-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vote-table td.desc, .vote-table div.desc, .dim { color: var(--muted); }
.table-wrap { overflow-x: auto; position: relative; } /* relative: visually hidden (.sr-only) text in a cell is clipped here, not left sticking out of the page */
/* The scorecard's long tables are laid out only when near the screen: their ~550 rows were most of the page's
   main-thread work on a phone (CI Lighthouse, Oct 2026). The sizes are rough phone heights; "auto" keeps the real size
   once a table has been shown, so the scroll height settles after the first pass. */
.vote-table .table-wrap { content-visibility: auto; contain-intrinsic-size: auto 6000px; }
.score-table-wrap { content-visibility: auto; contain-intrinsic-size: auto 18000px; }

/* Run in 2028 */
.section-lede.light { color: #d6e0ff; }
.run-pick select { min-width: 260px; margin: 8px 0 24px; }
.run-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.run-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 22px; }
.run-card h3, .run-card h2 { color: #fff; margin: 0 0 8px; }
h2.st-h { font-size: 1.15rem; font-weight: 700; }
.run-card h2.step-h { font-size: 1.15rem; font-weight: 700; }
.run-card p { color: #d6e0ff; margin: 0 0 14px; font-size: 0.95rem; }
.run-dsa { border-color: #e11d2e; background: rgba(225,29,46,0.12); }
.run-card p a, .run-card li a { color: #fff; text-decoration: underline; }   /* links in running text on the dark card (the no-JavaScript notes) */
.run-card ul { margin: 0 0 14px; padding-left: 1.2em; font-size: 0.95rem; color: #d6e0ff; }
.run-card li { margin: 0 0 6px; }
.run-links { display: flex; flex-direction: column; gap: 8px; }
.run-links a { color: #fff; font-weight: 600; text-decoration: none; }
.run-links a:hover { text-decoration: underline; }
.run-note { color: #9db8ff; font-size: 0.88rem; margin-top: 18px; }

/* 2026 */
.sub-h { margin-top: 56px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.sb-record { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 20px; }
.sb-pill { padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.sb-pill strong { font-size: 1.5rem; margin-right: 6px; }
.sb-lost { background: #e3f6ea; color: #17653a; }
.sb-won { background: #fde8e8; color: #a61b1b; }
.sb-mixed { background: #fff4e0; color: #8a4b00; }
.sb-list { display: grid; gap: 10px; }
.sb-funded-list { font-size: 0.9rem; padding-left: 20px; }
.sb-funded-list li { margin: 4px 0; }
.sb-funded-list a { margin-left: 4px; }
.sb-race { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 16px; align-items: start; }
.sb-race h3 { margin: 0 0 2px; font-size: 1rem; }
.sb-race .meta { color: var(--muted); font-size: 0.85rem; margin: 0; }
.sb-cands { font-size: 0.88rem; display: grid; gap: 3px; }
.sb-cands .sup { color: var(--c-bad); font-weight: 600; }
.sb-cands .opp { color: var(--c-warn); font-weight: 600; }
.sb-note-row { grid-column: 1 / -1; font-size: 0.82rem; color: var(--muted); margin: 0; }
.sb-out { font-size: 0.78rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.sb-out.lost { background: #e3f6ea; color: #17653a; }
.sb-out.won { background: #fde8e8; color: #a61b1b; }
.sb-out.mixed { background: #fff4e0; color: #8a4b00; }
.sb-note { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }
.nom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 16px; }
.nom { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.nom h3 { margin: 0; font-size: 1.05rem; }
.nom .race { color: var(--muted); font-size: 0.85rem; margin: 0; }
.nom .why { font-size: 0.9rem; margin: 4px 0; }
.nom .gen { font-size: 0.8rem; color: var(--muted); margin: 0; }
.nov-result { font-size: 0.85rem; font-weight: 700; margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; display: inline-block; }
.nov-won { background: #e3f6ea; color: #17653a; }
.nov-lost { background: #fde8e8; color: #a61b1b; }
.nov-too-close { background: #f3f4f6; color: #374151; }
.nom .acts { display: flex; gap: 8px; margin-top: 6px; }
.nom .acts a { flex: 1; text-align: center; }
.nom .soc { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; }
.nom .soc a { text-decoration: none; font-weight: 600; }
.inc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 12px; background: var(--card); }
.inc-table th, .inc-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.inc-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* Long free-text cells in the otherwise one-line state tables (2028 page) wrap, so the table fits its column */
.state-table td.wrap-cell { white-space: normal; min-width: 9em; }
.badge-pres { background: #efe9ff; color: #4b2aa8; border-color: #d9ccff; }
.breakdown dd.good-row, .breakdown dt.good-row { color: var(--c-good); }
.breakdown dd.bad-row, .breakdown dt.bad-row { color: var(--c-bad); }
.breakdown .weap { color: var(--c-weak); font-weight: 500; font-style: italic; }
.badge-ind { background: #eaf6f6; color: #0f5e5e; border-color: #bfe3e3; }
.badge-leave { background: #eef1f6; color: #3b4a66; border-color: #d5dbe7; }

/* Multi-page + compact cards */
.nav nav a[aria-current="page"] { color: var(--blue); font-weight: 700; }
.person { grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr); }
.summary { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.card-more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.card-more > summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--blue); list-style: none; }
.card-more > summary::-webkit-details-marker { display: none; }
.card-more > summary::before { content: '▸ '; content: '▸ ' / ''; }
.card-more[open] > summary::before { content: '▾ '; content: '▾ ' / ''; }
.card-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; margin-top: 12px; align-items: start; }
.card-body .extra { grid-column: 1 / -1; }
.more-wrap { text-align: center; margin: 22px 0 8px; }
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.teaser { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.teaser:hover { border-color: var(--blue); transform: translateY(-2px); }
.teaser strong { font-size: 1.02rem; line-height: 1.3; }
.teaser span:last-child { font-size: 0.86rem; }
.teaser span:last-child { color: var(--blue); font-weight: 600; font-size: 0.92rem; }
.teaser .eyebrow { margin: 0; }
.credit { font-size: 0.8rem; flex-basis: 100%; }

/* Finder + share */
.finder-sec { padding: 40px 0; }
.finder { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px 32px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; }
.finder-h { margin: 0; font-size: 1.6rem; }
.finder-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.finder-help { font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.finder-out { grid-column: 1 / -1; display: grid; gap: 6px; }
.finder-out:empty { display: none; }
.finder-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.finder-label { color: var(--muted); font-size: 0.85rem; min-width: 150px; }
.finder-row a { font-weight: 700; text-decoration: none; }
.finder-vacant { font-weight: 700; color: var(--muted); }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.share-label { font-weight: 700; margin-right: 4px; }
.people.single .person { border-color: var(--blue); }
.name a { color: inherit; text-decoration: none; }
.name a:hover { color: var(--blue); text-decoration: underline; }

/* Contact form */
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.92rem; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.contact-form textarea { resize: vertical; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-width: 0; }
.contact-form button { justify-self: start; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; color: var(--muted); font-size: 0.92rem; }
.field-error { margin: -8px 0 0; color: var(--c-err); font-size: 0.9rem; font-weight: 600; }
.contact-form [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
/* Errors from a no-JavaScript post: /api/contact redirects to #contact-error-<code>, and :target shows that one.
   app.js sets [hidden] on them and shows the same wording its own way (aria-invalid, aria-describedby, focus). */
.nojs-err { display: none; scroll-margin-top: 14rem; }
.nojs-err:target:not([hidden]) { display: block; }
.form-status.nojs-err, .field-error.nojs-err { color: var(--c-err); font-weight: 600; }
.contact-form:has(#contact-error-short:target:not([hidden])) textarea { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
.report-link { font-size: 0.8rem !important; color: var(--muted) !important; font-weight: 500 !important; }

/* Profile page (/r/<name>.html) */
.people.single .person { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px 28px; padding: 32px; align-items: start; }
.people.single .person[data-rank]::before { display: none; }
.people.single .photo { width: 112px; height: 136px; border-radius: 14px; grid-row: span 2; }
.people.single .photo .initials { font-size: 2rem; }
.people.single .name { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.people.single .seat { font-size: 1rem; }
.people.single .money { text-align: right; }
.people.single .total { font-size: clamp(2rem, 4.5vw, 3rem); }
.people.single .summary { display: none; }
.people.single .card-more { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.people.single .card-more > summary { display: none; }
.people.single .card-body { display: block; margin-top: 8px; }
.people.single .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 28px; }
.people.single .stat-tile { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.people.single .stat-tile strong { display: block; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--title); }
.people.single .stat-tile span { font-size: 0.82rem; color: var(--muted); }
h2.sec-h, h3.sec-h { font-size: 1.05rem; font-weight: 700; letter-spacing: normal; }
.people.single .sec-h { font-size: 1.05rem; margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.people.single .breakdown { grid-template-columns: minmax(180px, 240px) 1fr; gap: 8px 18px; font-size: 0.95rem; }
.people.single .cycles { max-width: 560px; gap: 6px; }
.people.single .cycle { font-size: 0.88rem; grid-template-columns: 48px 1fr 70px; }
.people.single .bar { height: 10px; }
.people.single .links { flex-direction: row; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.people.single .extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; border-top: 0; padding-top: 0; }
.people.single .record > summary { font-size: 1rem; }
.people.single .vote-list { font-size: 0.88rem; }

@media (max-width: 800px) {
  .people.single .person { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; }
  .people.single .photo { width: 72px; height: 88px; grid-row: auto; }
  .people.single .money { grid-column: 1 / -1; text-align: left; }
  .people.single .breakdown { grid-template-columns: 1fr; }
  .people.single .breakdown dd { margin-bottom: 8px; }
  .people.single .extra { grid-template-columns: minmax(0, 1fr); }
  .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 20px 0; gap: 6px; }
  .nav nav { width: 100%; overflow-x: auto; gap: 18px; padding: 6px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { white-space: nowrap; font-size: 0.92rem; }
  .finder-label { min-width: 110px; }
  .inc-table { font-size: 0.85rem; }
  .finder { grid-template-columns: 1fr; }
  .teasers, .card-body { grid-template-columns: 1fr; }
  .person { grid-template-columns: 56px minmax(0, 1fr); }
  .money { grid-column: 1 / -1; }
  .sb-race { grid-template-columns: 1fr; }
  .run-grid { grid-template-columns: 1fr; }
  .extra { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr; }
  .person { grid-template-columns: 56px minmax(0, 1fr); }
  .money, .links { grid-column: 1 / -1; }
  .links { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .links a { white-space: normal; overflow-wrap: anywhere; } /* long link text wraps at 320px with WCAG text spacing */
  .field, .field input, .field select { width: 100%; }
  .two-col, .cards, .steps { grid-template-columns: minmax(0, 1fr); }
  .two-col { gap: 20px; }
}

/* Accessibility and small-screen fixes */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--btn); color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 12px; }
h1.as-h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.vote-table .why { margin-top: 4px; font-style: italic; }
.load-error { list-style: none; padding: 24px; color: var(--muted); }
.person-static { margin: 0 0 12px; }
/* Content written into the HTML at build time (readable without JavaScript; app.js replaces or hides it) */
.page-head { padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 0.35em; }
.page-head .section-lede { margin-bottom: 0; }
.static-facts { grid-column: 1 / -1; font-size: 0.95rem; }
.static-facts ul { margin: 4px 0 10px; padding-left: 1.2em; }
.static-facts li { margin: 2px 0; }
.static-facts p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.static-rest { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 800px) {
  .nav nav { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; column-gap: 16px; }
}
.finder-controls input { width: 7.5em; min-width: 0; }
.finder-or { color: var(--muted); font-size: 0.85rem; }
.finder-note { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; color: var(--muted); }
.finder-note:empty { display: none; }
.finder-row { flex-wrap: wrap; }
.finder-facts { color: var(--muted); font-size: 0.85rem; }
.score-table th button { all: unset; cursor: pointer; font-weight: 700; display: inline-block; min-height: 24px; line-height: 24px; }
.score-table th button:focus-visible { outline: 2px solid var(--blue); }
.score-table th button[data-sort="ascending"]::after { content: " ▲"; font-size: 0.7em; }
.score-table th button[data-sort="descending"]::after { content: " ▼"; font-size: 0.7em; }
.score-table .score-pill { min-width: 3.2em; }
.table-note { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
.total-label { margin: -2px 0 6px; font-size: 0.75rem; color: var(--muted); }
.static-top { list-style: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.score-means { font-size: 0.82rem; color: var(--muted); margin: -4px 0 14px; }
.sb-rules { margin: 12px 0 4px; font-size: 0.9rem; }
.sb-rules summary { cursor: pointer; font-weight: 600; }
.sb-rules p { margin: 8px 0; color: var(--muted); }
.total.total-none { font-size: 1.15rem; color: var(--muted); }
.contact-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 16px; background: var(--bg-alt); }
.contact-box .sec-h { margin-top: 0; }
/* Headings inside a boxed panel on a profile: the panel's own border separates it, so no section rule or gap above */
.people.single .contact-box .sec-h, .people.single .response-box .sec-h { margin-top: 0; padding-top: 0; border-top: 0; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contact-list li { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-label { min-width: 110px; color: var(--muted); font-size: 0.85rem; }
.contact-list a { font-weight: 600; }
.contact-note { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }
.response-box { border-left: 4px solid var(--blue); padding: 8px 16px; margin: 0 0 16px; background: var(--blue-soft); }
.history-box { margin: 12px 0; font-size: 0.88rem; }
.history-box summary { cursor: pointer; font-weight: 600; }
.history-box ul { margin: 8px 0; padding-left: 18px; }
.run-rules { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 0 22px; margin-top: 18px; }
.run-rules:not(:empty) { padding: 18px 22px; }
.run-rules h3 { margin-top: 0; }
.run-key { font-size: 1.05rem; }
.run-dl { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: 0.9rem; }
.run-dl dt { font-weight: 700; color: var(--muted); }
.run-dl dd { margin: 0; }
.run-src { font-size: 0.8rem; color: var(--muted); }
.run-unknown-h { font-size: 0.9rem; font-weight: 700; margin: 14px 0 4px; }
.run-unknowns { font-size: 0.9rem; margin: 0 0 12px; padding-left: 20px; }
@media (max-width: 640px) { .run-dl { grid-template-columns: 1fr; } .run-dl dd { margin-bottom: 6px; } }
.cat-off { color: var(--muted); font-size: 0.8rem; }
.money-split { font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; max-width: 320px; margin-left: auto; text-align: right; }
@media (max-width: 640px) { .money-split { text-align: left; margin-left: 0; } }

/* Grouped nav menus (no JavaScript needed) */
.nav-group { position: relative; }
.nav-group summary { list-style: none; cursor: pointer; font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: " \25BE"; content: " \25BE" / ""; font-size: 0.75em; }
.nav-group:has(a[aria-current="page"]) summary { color: var(--blue); font-weight: 700; }
.nav-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); padding: 6px; display: flex; flex-direction: column; min-width: 190px; z-index: 60; }
.nav .nav-menu a { padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.nav .nav-menu a:hover { background: var(--bg-alt); }
@media (max-width: 800px) { .nav-menu { right: auto; left: 0; } }

/* Homepage hero: compact so the numbers and the ZIP finder are on the first screen */
.hero-home { padding: clamp(28px, 4.5vw, 52px) 0 clamp(24px, 3.5vw, 40px); }
.hero-home h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 0.35em; }
.hero-home .lede { font-size: clamp(1rem, 1.6vw, 1.12rem); margin-bottom: 20px; }
.hero-home .stats { margin-top: 0; }
.hero-home + .finder-sec { padding-top: 24px; }
.money-split { font-size: 0.95rem; color: var(--ink); font-weight: 500; max-width: 360px; line-height: 1.4; }
.people.single .total { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }

/* Change log */
.cl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.cl-filter { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.cl-filter span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.cl-filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-filter[aria-pressed="true"] span { color: #c9d6ff; }
.cl-month { font-size: 1.25rem; margin: 36px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.cl-count { font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cl-entry { border-bottom: 1px solid var(--line); }
.cl-entry summary { cursor: pointer; padding: 12px 0; list-style-position: outside; display: list-item; }
.cl-entry summary time { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; margin-right: 6px; }
.cl-title { font-weight: 600; }
.cl-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.cl-tag.cl-correction { background: #fff4e5; color: #8a4b00; border-color: #f5d9b0; }
.cl-body { padding: 0 0 14px; color: var(--ink); max-width: 820px; }
.cl-body p { margin: 0; }
.cl-empty { color: var(--muted); }

/* Map */
.map-sec { padding-top: 40px; }
.map-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 12px 0 16px; }
.map-views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg-alt); }
.map-view { font: inherit; font-size: 0.92rem; font-weight: 600; border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.map-view[aria-pressed="true"] { background: var(--card); color: var(--title); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.map-pick { font-weight: 600; font-size: 0.92rem; }
.map-pick select { font: inherit; font-weight: 500; margin-left: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.map-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.map-box { position: relative; }
#map-svg { width: 100%; height: auto; aspect-ratio: 975 / 610; display: block; }
/* The loading line sits over the empty map instead of above it, so the map doesn't move up when it goes away */
.map-loading { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding-top: 18%; text-align: center; z-index: 1; pointer-events: none; }
/* Room for the default ("In office now") legend, so the note below doesn't jump when the legend fills in */
#map-legend { min-height: 48px; }
@media (max-width: 480px) { #map-legend { min-height: 75px; } }
@media (max-width: 350px) { #map-legend { min-height: 129px; } }
.m-cd { stroke: #fff; stroke-width: 0.4; cursor: pointer; }
.m-hl { fill: none; stroke: var(--navy); stroke-width: 1.6; pointer-events: none; }
.m-cd.on { stroke: var(--navy); stroke-width: 2; }
.m-st { fill: none; stroke: #4b5563; stroke-width: 0.9; pointer-events: none; }
.map-sec svg .m-states .m-st { pointer-events: none; }
.m-lab { font-size: 11px; font-weight: 700; fill: #374151; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.map-tip { position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); max-width: 220px; z-index: 2; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.m-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.12); }
.map-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--card); max-height: 78vh; overflow: auto; position: sticky; top: 84px; }
.map-panel h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.map-panel h3 { font-size: 0.95rem; margin: 0 0 6px; }
/* Cook rating badges (map.js), same colours as the map */
.m-rating { background: #e5e7eb; color: #111827; }
.m-rating.m-r0 { background: #1a4fd6; color: #fff; } .m-rating.m-r1 { background: #5b84e8; } .m-rating.m-r2 { background: #a9c1f7; }
.m-rating.m-r3 { background: #b48ce6; } .m-rating.m-r4 { background: #f3b0ac; } .m-rating.m-r5 { background: #e1736b; } .m-rating.m-r6 { background: #b42318; color: #fff; }
.m-sub { margin-top: 16px !important; padding-top: 10px; border-top: 1px solid var(--line); }
.m-seat { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.m-role { display: inline-block; min-width: 64px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.m-facts { color: var(--muted); font-size: 0.84rem; margin-left: 68px; }
.m-party { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; color: #fff; vertical-align: 1px; }
.m-D { background: #1a4fd6; } .m-R { background: #b42318; } .m-I, .m-L, .m-G, .m-W { background: #6b7280; }
/* Independent the Democrats back (map.js partyCode: "I (D-backed)"): outlined in the Democratic blue, text visible on touch */
.m-party.m-DI { background: var(--card); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.m-race { padding: 10px 0; border-bottom: 1px solid var(--line); }
.m-race p { margin: 4px 0; font-size: 0.92rem; }
.m-rating { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.m-links .btn { margin: 4px 4px 0 0; }
.m-muted { color: var(--muted); font-size: 0.86rem; }
.m-note { background: #fff8e6; border: 1px solid #f5dfa8; border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; }
.m-party-link { margin-top: 14px; font-size: 0.9rem; }
.m-back { font-size: 0.88rem; margin: 0 0 6px; }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; text-decoration: underline; }
.map-terr { min-height: 24px; padding: 2px 0; }   /* WCAG 2.5.8 target size (24px), though they sit in a sentence */
@media (max-width: 900px) {
  .map-grid { grid-template-columns: 1fr; }
  .map-panel { position: static; max-height: none; }
  .map-views { width: 100%; justify-content: space-between; }
  .map-view { padding: 7px 10px; font-size: 0.85rem; }
}

/* November 2026 general election */
.g-h { font-size: 1.5rem; margin: 44px 0 6px; }
.g-h .m-muted { font-size: 1rem; font-weight: 500; }
.g-formats { margin: 8px 0 0; padding-left: 1.2em; max-width: 860px; font-size: 0.95rem; }
.g-formats li { margin-bottom: 6px; }
.g-table td { vertical-align: top; }
.g-rate { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.g-sd { background: #1a4fd6; color: #fff; } .g-ld { background: #5b84e8; color: #111827; } .g-nd { background: #a9c1f7; color: #0b1f4d; }
.g-tu { background: #b48ce6; color: #111827; } .g-nr { background: #f3b0ac; color: #5c1410; } .g-lr { background: #e1736b; color: #111827; }
.g-sr { background: #b42318; color: #fff; } .g-none { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.g-fc { font-size: 0.82rem; margin-top: 4px; } .g-fc summary { cursor: pointer; color: var(--blue); padding: 4px 0; min-height: 24px; }
.g-fc ul { margin: 4px 0; padding-left: 1.1em; } .g-fc li { margin: 0; }
.g-backed { font-size: 0.75rem; font-weight: 600; color: #8a4b00; background: #fff4e5; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.g-links { font-size: 0.85rem; margin-top: 2px; }
/* WCAG 2.5.8: each link is at least 24 px tall even where the row wraps on a phone */
.g-links a { display: inline-block; padding: 2px 3px; min-height: 24px; line-height: 20px; }
.g-notes { font-size: 0.85rem; color: var(--muted); }
/* November results and 24/48-hour notices (ADR-0046) */
.g-result { margin-top: 4px; font-size: 0.85rem; }
.g-result b { display: inline-block; padding: 1px 8px; border-radius: 999px; }
.g-res-d b { background: #1a4fd6; color: #fff; } .g-res-r b { background: #b42318; color: #fff; }
.g-res-o b, .g-res-open b { background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line); }
.g-result a { display: inline-block; min-height: 24px; line-height: 20px; padding: 2px 0; }
.g-results-sum { background: var(--blue-soft); padding: 10px 14px; border-radius: 8px; max-width: 860px; }
.g-notices td.num { text-align: right; white-space: nowrap; }
.g-state { border-bottom: 1px solid var(--line); }
.g-state summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.g-state[open] summary { padding-bottom: 4px; }
.g-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; max-width: 860px; }
.g-pick a { display: inline-block; min-width: 2.6em; text-align: center; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.g-pick a:hover, .g-pick a:focus-visible { background: var(--bg-alt); }
/* Phones: one swipeable row of states instead of eight rows above the races (the finder's state menu does the same job);
   relative so each link's absolutely placed .sr-only name stays inside the row's scroll box, not the page's width */
@media (max-width: 640px) { .g-pick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; position: relative; } .g-pick a { flex: 0 0 auto; min-height: 24px; } }
.g-key { margin: 14px 0 0; max-width: 860px; font-size: 0.92rem; }
.g-more { margin: 10px 0 0; }
.g-more > summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--blue); }
.g-about { margin-top: 40px; border-top: 1px solid var(--line); }
.g-about h3 { font-size: 1.1rem; margin: 18px 0 4px; }
.g-ask { margin: 10px 0; padding: 10px 16px; border-left: 4px solid var(--line); background: var(--bg-alt); max-width: 760px; font-size: 1rem; }

/* Homepage stance + single call to action */
.stance { max-width: 760px; margin: 14px 0 0; font-size: 1.02rem; }
.hero-cta { margin: 18px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hero-alt { font-weight: 600; }
.hero .stance { color: #fff; }
.hero .hero-alt { color: #c9d6ff; }
.hero-home .lede { margin-bottom: 0; }
.hero-home .hero-cta { margin-bottom: 22px; }

/* Phone menu button (added by app.js; without JavaScript the nav simply wraps).
   With JavaScript on, the bar already has its collapsed 60px height before app.js runs, so the page doesn't jump when
   the button appears. Until then the links sit hidden in that bar; if app.js never runs (blocked or failed), they
   appear there after 4 seconds as a scrolling row, so the nav is never lost. */
@media (max-width: 800px) and (scripting: enabled) {
  .nav:not(.has-toggle) .nav-inner { flex-wrap: nowrap; height: 60px; padding: 0 20px; }
  .nav:not(.has-toggle) .brand { flex-shrink: 0; }
  .nav:not(.has-toggle) nav { flex: 1 1 0; min-width: 0; width: auto; flex-wrap: nowrap; overflow-x: auto; padding: 0; visibility: hidden; animation: nav-failsafe 0s 4s forwards; }
}
@keyframes nav-failsafe { to { visibility: visible; } }
.nav-toggle { display: none; font: inherit; font-weight: 600; font-size: 0.92rem; background: var(--card); color: var(--title); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.nav-toggle::before { content: "\2630"; content: "\2630" / ""; margin-right: 6px; }
.nav.open .nav-toggle::before { content: "\2715"; content: "\2715" / ""; }
@media (max-width: 800px) {
  .nav.has-toggle .nav-inner { flex-wrap: nowrap; height: 60px; padding: 0 20px; }
  .nav.has-toggle .nav-toggle { display: inline-block; }
  .nav.has-toggle nav { display: none; }
  .nav.has-toggle.open .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 20px; }
  .nav.has-toggle.open nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 6px 0 4px; overflow: visible; }
  .nav.has-toggle.open nav > a, .nav.has-toggle.open .nav-group summary { display: block; padding: 11px 2px; border-top: 1px solid var(--line); font-size: 1rem; }
  .nav.has-toggle.open .nav-menu { position: static; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; }
  .nav.has-toggle.open .nav-menu a { padding: 9px 2px; }
}
.m-dc { cursor: pointer; }
.m-dc circle { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.m-dc text { font-size: 7px; font-weight: 800; fill: var(--navy); text-anchor: middle; pointer-events: none; }
.m-dc:hover circle, .m-dc:focus circle { fill: var(--blue-soft); }
.m-NP, .m-G { background: #6b7280; }
@media (max-width: 480px) { .map-view { white-space: normal; line-height: 1.2; flex: 1 1 0; padding: 7px 6px; } }

/* November races tables (2026-general.html): one card per race on phones, so the page never scrolls sideways */
@media (max-width: 640px) {
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g-table, .g-table tbody, .g-table tr, .g-table td { display: block; width: 100%; }
  .g-table tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
  .g-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; overflow-wrap: anywhere; }
  .g-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; text-align: left; flex: none; }
  .g-table td[data-label="Race"] { font-weight: 700; font-size: 1rem; }
  .g-table td[data-label="Race"]::before { content: none; }
  .g-table td > div { min-width: 0; } .g-fc { text-align: left; }
  /* Cards are laid out only near the screen (the page's ~180 open race cards were most of its main-thread work on a
     phone, CI Lighthouse Oct 2026); 280px is about a typical card's height, "auto" keeps the real one once shown */
  .g-table tr { content-visibility: auto; contain-intrinsic-size: auto 280px; }
}
/* Long email addresses and URLs in contact boxes wrap instead of widening the page */
.contact-list a, .contact-list span { overflow-wrap: anywhere; }
/* Reduced motion: no smooth scrolling and no hover lifts (the nav failsafe animation above has no motion, so it stays) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .teaser:hover { transform: none; }
}

/* State pages, /2028 and the "does my rep" page (body class "pg"; was pages.css, merged so each page has one
   render-blocking stylesheet: F-0062). */
.pg .state-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.pg .state-summary { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 820px; color: var(--ink); margin: 0 0 12px; }
.pg .state-table td, .pg .state-table th { white-space: nowrap; }
.pg .state-table td.wrap-cell { white-space: normal; }   /* as in the main rules above (the .pg prefix outranks them) */
.pg .inc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pg .table-note { color: var(--muted); font-size: 0.9rem; margin: 12px 0 0; }
.pg .muted-txt { color: var(--muted); font-size: 0.9rem; }
.pg .clean-names { columns: 2 260px; padding-left: 1.2em; margin: 16px 0 0; }
.pg .clean-names li { margin-bottom: 6px; break-inside: avoid; }
.pg .challenger-list { padding-left: 1.2em; margin: 16px 0 0; }
.pg .challenger-list li { margin-bottom: 12px; color: var(--muted); }
.pg .challenger-list strong { color: var(--ink); }
.pg .out { font-weight: 600; white-space: nowrap; }
.pg .out-lost { color: var(--c-ok); }
.pg .out-won { color: var(--c-bad); }
.pg .state-links { display: flex; flex-wrap: wrap; gap: 12px; }
.pg .state-grid { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; }
.pg .state-grid a { font-weight: 600; }
.pg .az-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.pg .az-list li { line-height: 1.7; }
.pg .az-letter { display: inline-block; width: 1.8em; font-weight: 800; color: var(--title); }

/* State tables become one card per person on phones */
@media (max-width: 640px) {
  .pg .state-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg .state-table, .pg .state-table tbody, .pg .state-table tr, .pg .state-table td { display: block; width: 100%; }
  .pg .state-table tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
  .pg .state-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .pg .state-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; text-align: left; }
  .pg .state-table td[data-label="#"] { display: none; }
  .pg .state-table td[data-label="Name"] { font-weight: 700; font-size: 1rem; }
  .pg .state-table td[data-label="Name"]::before { content: none; }
}
.pg .not-official { color: var(--c-nov); font-weight: 700; }
.pg .warn-box { background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px; padding: 12px 16px; color: #7c2d12; }

/* Share-graphics gallery (graphics.html; was graphics.css, F-0062). */
.gx-sets { display: grid; gap: 28px; }
.gx-set { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.gx-thumb { display: block; border-radius: 10px; overflow: hidden; background: var(--navy); line-height: 0; }
.gx-thumb img { width: 100%; height: auto; display: block; }
.gx-thumb:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gx-set h2 { font-weight: 700; }
.gx-set h3, .gx-set h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 0.4em; }
.gx-blurb { color: var(--muted); margin: 0 0 16px; }
.gx-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gx-dl a { font-weight: 700; }
.gx-kb { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.gx-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 28px; }
.gx-jump a { font-size: 0.85rem; font-weight: 700; text-decoration: none; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.gx-jump a:hover { border-color: var(--blue); }
.gx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.gx-state { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; scroll-margin-top: 8px; }  /* plus html scroll-padding-top (styles.css) */
.gx-state:target { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.gx-st-name { font-weight: 700; margin: 10px 0 2px; line-height: 1.3; }
.gx-st-dl { margin: 0; font-size: 0.9rem; }
@media (max-width: 700px) {
  .gx-set { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* /embed.html, the widget instructions page (was embed/picker.css, F-0062). */
.embed-h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.embed-h2 { font-size: 1.15rem; margin: 28px 0 12px; }
.embed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.embed-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.embed-fields .field { display: flex; flex-direction: column; gap: 4px; }
.embed-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.embed-preview { background: var(--bg-alt); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; }
.embed-preview.is-dark { background: #0b1222; }
.embed-preview iframe { display: block; width: 100%; max-width: 600px; height: 240px; border: 0; background: transparent; }
/* The preview frames take keyboard focus: show where it is */
.embed-preview iframe:focus, .embed-preview iframe:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }   /* two-tone: visible on the light and the dark preview */
.embed-preview.iframe-focus { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.embed-preview.is-dark.iframe-focus { outline-color: #9db8ff; box-shadow: none; }
.embed-preview.is-dark iframe:focus, .embed-preview.is-dark iframe:focus-visible { outline-color: #9db8ff; box-shadow: none; }
.table-cap { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--muted); padding-bottom: 6px; }
.embed-note { margin: 0 0 6px; color: var(--muted); font-size: 0.95rem; }
.embed-snippet { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.embed-snippet textarea {
  flex: 1 1 auto; min-width: 0; resize: vertical;
  font: 0.82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); color: var(--ink);
}
.embed-snippet textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.embed-snippet .btn { flex: 0 0 auto; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9rem; }
.embed-status { min-height: 1.4em; margin: -8px 0 12px; color: var(--c-good); font-weight: 600; font-size: 0.9rem; }
.embed-prose p { font-size: 1rem; }
@media (max-width: 860px) {
  .embed-grid { grid-template-columns: 1fr; gap: 8px; }
  .embed-fields .field, .embed-fields select { width: 100%; }
}
@media (max-width: 480px) {
  .embed-snippet { flex-direction: column; align-items: stretch; }
  .embed-snippet textarea { width: 100%; flex: none; }
  .embed-snippet .btn { align-self: flex-end; }
}
.embed-nojs { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 0.95rem; }
.embed-nojs code { overflow-wrap: anywhere; font-size: 0.85rem; }

/* Profile chart: who backs the campaign, PAC money by source (reppages.py chart_html, app.js srcChart) */
.src-chart { margin: 4px 0 18px; max-width: 760px; }
.src-chart figcaption { font-weight: 700; margin-bottom: 8px; }
.src-chart ol { list-style: none; margin: 0; padding: 0; }
.src-chart li { display: grid; grid-template-columns: minmax(130px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
.src-l { font-size: 0.9rem; }
.src-v { font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 6.5em; }
.src-b { display: block; height: 14px; background: var(--bg-alt); border-radius: 4px; }
.src-f { display: block; height: 100%; background: var(--btn); border-radius: 4px; }
.src-note { font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 560px) { .src-chart li { grid-template-columns: 1fr auto; } .src-b { grid-column: 1 / -1; order: 3; } }
.src-w2 { width: 2%; } .src-w4 { width: 4%; } .src-w6 { width: 6%; } .src-w8 { width: 8%; } .src-w10 { width: 10%; } .src-w12 { width: 12%; } .src-w14 { width: 14%; } .src-w16 { width: 16%; } .src-w18 { width: 18%; } .src-w20 { width: 20%; } .src-w22 { width: 22%; } .src-w24 { width: 24%; } .src-w26 { width: 26%; } .src-w28 { width: 28%; } .src-w30 { width: 30%; } .src-w32 { width: 32%; } .src-w34 { width: 34%; } .src-w36 { width: 36%; } .src-w38 { width: 38%; } .src-w40 { width: 40%; } .src-w42 { width: 42%; } .src-w44 { width: 44%; } .src-w46 { width: 46%; } .src-w48 { width: 48%; } .src-w50 { width: 50%; } .src-w52 { width: 52%; } .src-w54 { width: 54%; } .src-w56 { width: 56%; } .src-w58 { width: 58%; } .src-w60 { width: 60%; } .src-w62 { width: 62%; } .src-w64 { width: 64%; } .src-w66 { width: 66%; } .src-w68 { width: 68%; } .src-w70 { width: 70%; } .src-w72 { width: 72%; } .src-w74 { width: 74%; } .src-w76 { width: 76%; } .src-w78 { width: 78%; } .src-w80 { width: 80%; } .src-w82 { width: 82%; } .src-w84 { width: 84%; } .src-w86 { width: 86%; } .src-w88 { width: 88%; } .src-w90 { width: 90%; } .src-w92 { width: 92%; } .src-w94 { width: 94%; } .src-w96 { width: 96%; } .src-w98 { width: 98%; } .src-w100 { width: 100%; } 
.money-more { margin: 4px 0 20px; max-width: 760px; }
.money-more > summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--blue); }
/* Industry money page (industrypage.py) */
.ind-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 18px 0; }
.ind-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.ind-tile b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.ind-table th, .ind-table td { white-space: nowrap; }
.ind-table td { text-align: right; font-variant-numeric: tabular-nums; }
.ind-table tbody th { text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--ink); white-space: normal; min-width: 150px; }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.sort-btn::after { content: ' \2195'; opacity: 0.5; }
[aria-sort="descending"] .sort-btn::after { content: ' \2193'; opacity: 1; }
[aria-sort="ascending"] .sort-btn::after { content: ' \2191'; opacity: 1; }
.theme-row { margin-top: 6px; }
.theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.85rem; color: inherit; cursor: pointer; }
/* November page: Find your ballot (general.js) */
.g-finder { margin: 22px 0 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); max-width: 860px; }
.g-finder .finder-h { margin: 0 0 8px; font-size: 1.15rem; }
.bf-hit td { background: var(--blue-soft); }
.bf-hit td:first-child { box-shadow: inset 4px 0 0 var(--btn); }
/* billionaires.html charts (billionairespage.py): party-side colours, validated for colour-blind contrast in both themes */
:root { --bz-d: #2f5fd0; --bz-b: #c29a12; --bz-r: #c8312f; --bz-n: #8a8f98; }
:root[data-theme="dark"] { --bz-d: #5d88ee; --bz-b: #d3ad38; --bz-r: #d9534c; --bz-n: #868d98; }
.bz-d { fill: var(--bz-d); } .bz-b { fill: var(--bz-b); } .bz-r { fill: var(--bz-r); } .bz-n { fill: var(--bz-n); } .bz-one { fill: var(--btn); }
.bz-spot { border: 1px solid var(--line); border-left: 4px solid var(--bz-r); border-radius: 10px; background: var(--card); padding: 14px 16px; margin: 18px 0; max-width: 760px; }
.bz-spot .eyebrow { margin: 0; }
.bz-big { font-size: 1.5rem; font-weight: 800; margin: 2px 0 6px; color: var(--title); }
.bz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.bz-fig { margin: 10px 0 26px; max-width: 760px; }
.bz-fig figcaption { font-weight: 700; margin-bottom: 8px; }
.bz-bar { display: block; width: 100%; height: 14px; }
.bz-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; font-size: 0.85rem; color: var(--muted); }
.bz-legend svg { width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.bz-split { font-size: 0.9rem; color: var(--muted); margin: 8px 0 0; }
.bz-people, .bz-hbars { list-style: none; margin: 0; padding: 0; }
.bz-people li, .bz-hbars li { display: grid; grid-template-columns: minmax(120px, 30%) 1fr 4.5em; align-items: center; gap: 10px; padding: 3px 0; }
.bz-l { font-size: 0.9rem; } .bz-v { font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: right; }
.bz-cols { display: block; width: 100%; max-width: 560px; height: auto; }
.bz-t { font-size: 13px; fill: var(--ink); font-variant-numeric: tabular-nums; } .bz-mut { fill: var(--muted); }
.bz-axis { stroke: var(--line); stroke-width: 1; }
.bz-recips { margin: 6px 0; padding-left: 20px; font-size: 0.85rem; } .bz-recips li { margin: 2px 0; }
.bz-table td details summary { cursor: pointer; color: var(--blue); }
.bz-method li { margin: 6px 0; max-width: 760px; }
@media (max-width: 560px) { .bz-people li, .bz-hbars li { grid-template-columns: 38% 1fr 4em; gap: 6px; } }
.bz-h { margin: 30px 0 8px; }
.bz-table tbody th { text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--ink); min-width: 150px; }
.bz-table { min-width: 760px; }
.bz-table td { font-variant-numeric: tabular-nums; }
.bz-table td:last-child { min-width: 240px; }

/* The rose DSA badge (pipeline/dsa.py, app.js addDsa(), map.js dsaBadge()): a sourced fact beside a name, never an
   endorsement by this site. Red text on the card colour: 6.9:1 light, 8.3:1 dark (axe checks both). */
:root { --dsa: #b3122a; --dsa-bg: #fdecef; }
:root[data-theme="dark"] { --dsa: #ff8d9c; --dsa-bg: #3a1620; }
.dsa-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; box-sizing: border-box; padding: 1px 8px 1px 6px; margin-left: 8px; border: 1px solid var(--dsa); border-radius: 999px; background: var(--dsa-bg); color: var(--dsa); font-size: 0.72rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-decoration: none; vertical-align: middle; white-space: nowrap; }
a.dsa-badge:hover, a.dsa-badge:focus-visible { background: var(--dsa); color: var(--card); }
.dsa-rose { width: 14px; height: 14px; fill: currentColor; stroke: none; flex: none; }
.dsa-rose .dsa-swirl { fill: none; stroke: var(--dsa-bg); stroke-width: 1.2; stroke-linecap: round; }
.dsa-rose .dsa-stem { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
a.dsa-badge:hover .dsa-swirl, a.dsa-badge:focus-visible .dsa-swirl { stroke: var(--dsa); }
@media (pointer: coarse) { .dsa-badge { min-height: 28px; } }
.score-table td > a:not(.dsa-badge) { display: inline-block; padding: 4px 0; } /* 24 px target beside a badge (WCAG 2.5.8) */
/* A card for an endorsed person: red-rose accent stripe (the nominee cards have had one since /2026 began) */
.person.dsa-card { box-shadow: inset 4px 0 0 var(--dsa); }
.g-dsa-box { border: 1px solid var(--dsa); border-radius: 12px; padding: 4px 16px 12px; margin: 20px 0; }
.g-dsa-box .g-h { color: var(--dsa); margin-top: 12px; } .g-dsa-box .dsa-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .g-dsa-box .dsa-rose { width: 18px; height: 18px; vertical-align: -2px; }
.g-table tr.g-dsa > td:first-child { box-shadow: inset 3px 0 0 var(--dsa); }
.only-dsa .g-table tbody tr:not(.g-dsa), .only-dsa details.g-state:not(.g-dsa-st), .only-dsa .g-table:not(:has(tr.g-dsa)), .only-dsa details.g-more:not(:has(tr.g-dsa)) { display: none; }
.dsa-list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dsa-list > li { border: 1px solid var(--line); border-left: 4px solid var(--dsa); padding: 12px 14px; background: var(--card); }
.dsa-list .dsa-name { font-weight: 700; } .dsa-list p { margin: 4px 0; }
h1 > .dsa-rose { width: 26px; height: 26px; color: var(--dsa); vertical-align: -3px; }
.nom.dsa { border-color: var(--dsa); box-shadow: inset 4px 0 0 var(--dsa); }
.m-cand .dsa-badge, .r26-name + .dsa-badge { margin-left: 6px; }

/* Next steps after a lookup, the exit band at the foot of list pages, and the 2026 page's top line (F-0080, PROP-0006) */
.next-steps { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.next-steps h3 { font-size: 1rem; margin: 0 0 6px; }
.next-steps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.next-steps li { max-width: 100%; }
.next-steps a { display: inline-block; font-weight: 600; padding: 4px 0; min-height: 24px; }
.exit-band { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.exit-band h2 { font-size: 1.25rem; }
.exit-band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.exit-band a { display: block; padding: 12px 14px; min-height: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-weight: 700; text-decoration: none; }
.g-clean { font-size: 0.75rem; font-weight: 600; color: var(--c-good); white-space: nowrap; }
.g-top-links { margin: 8px 0 0; font-weight: 600; }
.g-state-link { margin: 4px 0 12px; font-weight: 600; }
.g-state-link a, .g-vote a { display: inline-block; padding: 4px 0; min-height: 24px; }
.g-top-links a { display: inline-block; padding: 4px 0; min-height: 24px; }
/* Profile: big number, rank line, sorted bars (reppages.viz_html), round portrait; November seat bars */
.people.single .total{font-size:clamp(2.6rem,9vw,4rem);line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}.people.single .photo{width:120px;height:120px;border-radius:50%;background:var(--blue-soft);box-shadow:0 0 0 4px var(--blue-soft)}.pd-viz{grid-column:1 / -1;margin:6px 0 4px}.pd-rank{font-weight:600;margin:0 0 10px}@media(max-width:800px){.people.single .photo{width:76px;height:76px}}.seat-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin:14px 0 4px;font-size:.9rem}.seat-n{font-size:1.8rem;color:var(--title);font-variant-numeric:tabular-nums}#map-offices{margin:0 0 10px}.g-ph{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top;vertical-align:middle;margin-right:6px}.seat-bar>svg{width:100%;height:22px;display:block}[data-theme=dark] .nu-d{fill:#7d9bf0}[data-theme=dark] .nu-r{fill:#d9534c}