/* Built by pipeline/leadershippage.py from styles.css and leadership/leadership.css: edit those, not this file. */
/* 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; --paper: #faf8f3;
  /* 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; --paper: #1b1916; 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: 20px; }
.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 { max-height: 75vh; overflow: auto; }
.score-table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
#members:not(:has(#sc-areas:checked)) .score-table :is(th, td):nth-child(n+4):nth-child(-n+7) { display: none; }
.sc-areas { display: block; margin: 8px 0; font-size: 0.9rem; }
@media (max-width: 640px) { .score-table :is(th, td):nth-child(9) { display: none; } }

/* 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; min-height: 24px; }
.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; }
.finder-row .finder-call { font-weight: 600; white-space: nowrap; }
.finder-elect { border-top-style: dashed; padding-left: 16px; }
.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 in a boxed profile panel: no 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); }
/* Homepage editorial hero: serif from the system (no font download), warm band in both themes */
.ed{background:var(--paper);border-bottom:3px double var(--ink);padding:clamp(28px,5vw,52px) 0 clamp(24px,4vw,40px)}
.ed h1,.ed h2,.ed~section h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em}
.ed h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.1;max-width:900px;margin:0 0 16px}.ed h1 em{font-style:normal;border-bottom:3px solid #c9a227}
.ed-k{margin:0 0 10px;font-size:.85rem;font-weight:600;color:var(--c-bad)}.ed-d{max-width:720px;margin:0 0 18px;font-size:clamp(1.05rem,1.8vw,1.2rem);line-height:1.5}
.ed-m{margin:0;font-size:.9rem;color:var(--muted)}.ed-m a{color:var(--ink)}.ed-b{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.ed .ed-s{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.15;max-width:900px;margin:32px 0 12px;padding-top:24px;border-top:1px solid var(--line)}.ed .ed-s em{font-style:normal;border-bottom:3px solid #c9a227}
.g-lead{margin:0 0 28px;padding:0 0 22px;border-bottom:3px double var(--ink)}.g-lead .lead-h{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.12;margin:0 0 14px}
.lead-grid{display:grid;gap:12px;margin:0 0 18px}@media(min-width:701px){.lead-grid{grid-template-columns:1fr 1fr}}.lead-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--c-bad);color:var(--ink);text-decoration:none}.lead-card strong{font-size:1.25rem}.lead-go{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.lead-go a:not(.btn){color:var(--ink)}
.ed-b h2{font-size:clamp(1.4rem,3vw,1.75rem);margin:0 0 4px}.ed-b p{margin:0 0 12px;color:var(--muted)}@media(min-width:801px){.stats-2{grid-template-columns:1fr 1fr}}
.hero-home .lede { font-size: clamp(1rem, 1.6vw, 1.12rem); margin-bottom: 20px; }
.hero-home .stats { margin-top: 0; }
.ed + .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 */
/* names: 24px tap targets (WCAG 2.5.8) */
.g-table b a{display:inline-block;min-height:24px;line-height:24px}
@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 or hover lifts */
@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; }
/* Wide screens: the finder is the page's first action (desktop readers used it far less than phone readers): a blue frame,
   bigger fields and their labels shown (they are visually hidden on phones, where the heading sits right above them) */
@media (min-width: 801px) {
  .g-finder { border: 2px solid var(--btn); background: var(--blue-soft); padding: 22px 28px; box-shadow: 0 6px 20px rgb(26 79 214 / 12%); }
  .g-finder .finder-h { font-size: 1.6rem; }
  .g-finder .field { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; }
  .g-finder .field .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .g-finder .finder-controls { align-items: end; }
  .g-finder .field input, .g-finder .field select { font-size: 1.2rem; padding: 0 16px; height: 56px; }
  .g-finder .field input { width: 6.5em; font-weight: 600; letter-spacing: 0.05em; }
  .g-finder .finder-or { padding-bottom: 16px; }
}
.bf-hit td { background: var(--blue-soft); }
.bf-hit td:first-child { box-shadow: inset 4px 0 0 var(--btn); }
.bf-vote { grid-column: 1 / -1; border-left: 4px solid var(--btn); background: var(--card); padding: 10px 14px; border-radius: var(--radius); }
.bf-vote h3 { font-size: 1rem; margin: 0 0 4px; }
.bf-vote p { margin: 4px 0 0; font-size: 0.95rem; }
.bf-vote .g-vote a, .bf-vote a { display: inline; padding: 0; } /* links in a sentence: no line break per link (WCAG 2.5.8 inline exception) */
.bf-pick { grid-column: 1 / -1; }
.bf-pick [role=group] { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-pick .btn { max-width: 100%; white-space: normal; text-align: left; }
.bf-pick p { margin: 8px 0 0; font-size: 0.9rem; }
/* 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; }
/* "See who's on your ballot" near the top of the list and the profiles (exitband.BALLOT_CTA) */
.ballot-cta { margin: 4px 0 14px; }
.ballot-cta a { display: inline-block; padding: 8px 14px; min-height: 24px; border-radius: 999px; background: var(--blue-soft); font-weight: 700; text-decoration: none; }
.ballot-cta a:hover { text-decoration: underline; }
.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;flex-wrap:wrap;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}.people.single .ph-sm{width:72px;height:72px}.brand{margin-right:auto}.nav-search{position:relative;width:7.5rem;height:36px}.nav-search input{position:absolute;width:100%;height:36px;font:inherit;padding-left:32px;border:1px solid var(--line);border-radius:8px;appearance:none;color:var(--ink);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 10px/15px no-repeat}.nav-search :focus,.nav-search .nav-menu{width:min(24rem,calc(100vw - 40px));z-index:61;right:0;left:auto}.nav-search a{color:var(--ink);text-decoration:none}.nav-search [aria-selected=true]{background:var(--bg-alt)}@media(max-width:1120px){.nav-search{width:40px}}@media(max-width:800px){.nav nav{order:2}}.nf-r{position:absolute;opacity:0}.nf-c{display:inline-block;margin:0 6px 8px 0;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:.875rem;cursor:pointer}.nf-r:checked+.nf-c{background:var(--ink);color:var(--bg);border-color:var(--ink)}.nf-r:focus-visible+.nf-c{outline:2px solid var(--blue)}
.nc-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));margin-top:8px}.nc{border:1px solid var(--line);border-radius:12px;padding:14px 16px}.nc-k{margin:0 0 6px;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.nc-list{list-style:none;margin:0;padding:0}.nc-list li{padding:8px 0;border-top:1px solid var(--line)}.nc-list li:first-child{border-top:0;padding-top:0}.nc-src{display:block;color:var(--muted)}.nc-lead>a{font-size:1.1rem;font-weight:600}
.nc-play{display:block;width:100%;margin-top:8px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg-alt);cursor:pointer;font:inherit;color:inherit;text-align:center}.nc-play img{display:block;width:100%;height:auto;border-radius:8px 8px 0 0}.nc-play span{display:block;padding:8px;font-size:.875rem}.nc-frame{display:block;width:100%;margin-top:8px;border:0;border-radius:8px}.nc-video{aspect-ratio:16/9}.nc-post{height:420px}
#nf-pacs:checked~.nc-grid .nc:not([data-topic~=pacs]),#nf-people:checked~.nc-grid .nc:not([data-topic~=people]),#nf-money:checked~.nc-grid .nc:not([data-topic~=money]),#nf-israel:checked~.nc-grid .nc:not([data-topic~=israel]),#nf-videos:checked~.nc-grid .nc:not([data-topic~=videos]),#nf-posts:checked~.nc-grid .nc:not([data-topic~=posts]){display:none}
.nc-list li{position:relative}.nc-bar{position:absolute;left:-16px;top:0;bottom:8px;width:4px;background:var(--src)}.nc-lead{background:color-mix(in srgb,var(--src,#0000) 9%,#0000)}
.np-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;flex-wrap:wrap}.np-av{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--src,var(--muted));color:#fff;font-weight:700;font-size:.8rem}.np-who{color:var(--muted)}.np-t{margin:0 0 6px;white-space:pre-line;font-size:.95rem;line-height:1.45}.np-f{color:var(--muted)}.np{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
img.np-av{object-fit:cover;background:var(--bg-alt)}
@media (min-width: 1000px) { .nav nav > a, .nav-group summary { white-space: nowrap; } }
/* leadership.html only (pipeline/leadershippage.py builds leadership/page.css = styles.css + this file). Seat colours: the same as the share graphics. */
:root { --ld-wont_back: #b42318; --ld-wants_new: #e8590c; --ld-undecided: #f2a65a; --ld-none: #c9cfd9; --ld-will_back: #1f8a4c; --ld-leader: #0b1f4d; --ld-ring: #1a4fd6; }
:root[data-theme="dark"] { --ld-wont_back: #ff8a80; --ld-wants_new: #ffa94d; --ld-undecided: #f6c48f; --ld-none: #4a5466; --ld-will_back: #5fd394; --ld-leader: #dbe4ff; --ld-ring: #8db0ff; }
.ld-jump { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; font-weight: 600; }
.ld-ch { border-top: 3px solid var(--ink); padding-top: 20px; margin-top: 32px; }
.ld-sum { font-size: 1.1rem; color: var(--muted); max-width: 760px; }
.ld-chart { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 12px 0 20px; }
.ld-svg { width: 100%; height: auto; display: block; }
.ld-dot { fill: var(--ld-none); }
.ld-dot.ld-wont_back { fill: var(--ld-wont_back); }
.ld-dot.ld-wants_new { fill: var(--ld-wants_new); }
.ld-dot.ld-undecided { fill: var(--ld-undecided); }
.ld-dot.ld-will_back { fill: var(--ld-will_back); }
.ld-dot.ld-leader { fill: var(--ld-leader); }
.ld-dot.ld-unc { stroke: var(--ld-ring); stroke-width: 2.5; stroke-dasharray: 3 2; }
.ld-big { font-size: 64px; font-weight: 800; fill: var(--title); }
.ld-sub { font-size: 15px; fill: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ld-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ld-legend li { display: flex; align-items: center; gap: 10px; }
.ld-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ld-key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ld-none); }
.ld-key.ld-wont_back { background: var(--ld-wont_back); }
.ld-key.ld-wants_new { background: var(--ld-wants_new); }
.ld-key.ld-undecided { background: var(--ld-undecided); }
.ld-key.ld-will_back { background: var(--ld-will_back); }
.ld-key.ld-leader { background: var(--ld-leader); }
.ld-key.ld-ring { background: transparent; border: 2px dashed var(--ld-ring); }
.ld-share { display: flex; gap: 20px; align-items: center; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 8px 0 24px; }
.ld-share img { width: 160px; height: 160px; border-radius: 8px; flex: none; }
.ld-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.ld-dl { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 600; font-size: .92rem; }
.ld-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.ld-col h4 { display: flex; align-items: center; gap: 8px; border-top: 2px solid var(--ink); padding-top: 10px; margin: 0 0 6px; font-size: 1.05rem; }
.ld-cnt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ld-list { list-style: none; padding: 0; margin: 0; }
.ld-p { border-bottom: 1px solid var(--line); padding: 10px 0; }
.ld-p p { margin: 0; }
.ld-n strong { font-size: 1.02rem; }
.ld-st { color: var(--muted); font-size: .85rem; margin-left: 4px; }
.ld-q { color: var(--ink); margin-top: 2px !important; }
.ld-src { font-size: .85rem; margin-top: 2px !important; }
.ld-src a { color: var(--muted); }
.ld-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--ld-ring); border: 1px dashed var(--ld-ring); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.ld-calls { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.ld-calls summary { cursor: pointer; font-weight: 700; }
.ld-nl { columns: 3 220px; padding-left: 18px; margin: 12px 0; }
.ld-nl li { break-inside: avoid; margin-bottom: 4px; }
.ld-tel { font-variant-numeric: tabular-nums; font-size: .88rem; margin-left: 4px; white-space: nowrap; }
.ld-how { border-top: 3px solid var(--ink); padding-top: 20px; margin-top: 40px; }
.ld-how li { margin-bottom: 8px; }
@media (max-width: 720px) {
  .ld-chart { grid-template-columns: 1fr; }
  .ld-share { flex-direction: column; align-items: flex-start; }
}