:root {
  --radius: 10px;
  --max-width: 960px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--f-body-weight);
  font-size: var(--f-size);
  line-height: 1.5;
}
strong, b { font-weight: var(--f-strong-weight); }

h1, h2, h3, .wordmark {
  font-family: var(--f-head);
  font-weight: 400;
  letter-spacing: var(--f-head-spacing);
  text-transform: var(--f-head-transform);
}

a { color: var(--c-link); }

button, .btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  padding: 0.7em 1.3em;
  cursor: pointer;
  background: var(--c-accent);
  color: var(--c-on-accent);
  transition: background 0.15s ease;
}
button:hover, .btn:hover { background: var(--c-accent-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  background: transparent;
  color: var(--c-text);
  border: 2px solid var(--c-accent);
}
.btn-outline:hover { background: var(--c-surface-2); }

.report-issue { margin: 1.5rem 0; }
.link-btn {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}
.link-btn:hover { background: none; color: var(--c-text); }
.report-issue-form {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--c-surface);
  border-radius: var(--radius);
}
.report-issue-form textarea, .report-issue-form input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  background: var(--c-bg);
  color: var(--c-text);
}
.report-issue-actions { display: flex; align-items: center; gap: 0.8rem; }

/* ---------- layout ---------- */

.site-header {
  border-bottom: 3px solid var(--c-header-rule);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: sticky;
  top: 0;
  background: var(--c-header-bg);
  z-index: 10;
}
.site-header { color: var(--c-header-text); }
.site-header img, .site-header svg { display: block; }
.site-header .wordmark {
  color: var(--c-header-text);
  font-size: 1.1rem;
  cursor: pointer;
}
.site-header .tagline {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--c-header-muted);
  display: none;
}
@media (min-width: 640px) {
  .site-header .tagline { display: block; }
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ---------- landing ---------- */

.pitch {
  text-align: center;
  padding: 1.5rem 0 2rem;
}
.pitch h1 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.pitch p { font-size: 1.05rem; max-width: 640px; margin: 0 auto; color: var(--c-text-muted); }

.lookup-menu {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .lookup-menu { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; max-width: 960px; }
}
.lookup-card {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.lookup-card h3 { margin-top: 0; font-size: 1rem; }
.lookup-card form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lookup-card input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6em 0.8em;
  border-radius: var(--radius);
  border: 1px solid var(--c-line-strong);
  font-size: 1rem;
  font-family: inherit;
}
.or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--c-text-muted);
}
.state-select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  margin-bottom: 0.6rem;
}
#state-go { width: 100%; }

.form-status { font-size: 0.9rem; margin-top: 0.6rem; min-height: 1.2em; }
.form-status.error { color: #8a2f2f; }

/* ---------- race table ---------- */

.section-title {
  font-size: 1.2rem;
  margin: 1.8rem 0 0.6rem;
}
.section-note {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin-bottom: 0.8rem;
}
.race-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-bg);
}
.race-row {
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
}
.race-row:nth-child(even) { background: var(--c-row-alt); }
.race-row:hover { background: var(--c-row-hover); }
.race-row td { padding: 0.9rem 0.6rem; vertical-align: top; }
.race-row .race-name { font-weight: 700; width: 34%; }
.race-row .district-tag {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--c-text-muted);
}
.candidate-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.4rem 0.15rem 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--c-surface-2);
  font-size: 0.85rem;
}
.candidate-chip .party-dot {
  width: 0.55em; height: 0.55em; border-radius: 50%;
  display: inline-block;
}
.candidate-chip:hover { background: var(--c-surface-3); }
.race-row:nth-child(even) .candidate-chip { background: var(--c-bg); }
.candidate-chip:focus-visible, .race-open:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.candidate-chip.pending { opacity: 0.7; }
.write-in-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-text);
  opacity: 0.75;
}

.party-D { background: #4d6fa8; }
.party-R { background: #a84d4d; }
.party-G { background: #4da85e; }
.party-L { background: #b8912f; }
.party-other { background: var(--c-text-muted); }

.coming-soon-banner {
  background: var(--c-surface-2);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

/* ---------- badges ---------- */
/* Score/ideology badges (score-row, score-badge, policy-spectrum,
   spectrum-*, placeholder-note) removed 2026-09-29 -- MWEG overhaul,
   scoring is gone. status-badge (reviewed/pending) stays. */

.status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
}
.status-badge.reviewed { background: var(--c-surface); color: var(--c-text); }
.status-badge.pending {
  background: transparent;
  border: 1.5px solid var(--c-line-strong);
  color: var(--c-text-muted);
}
.incumbent-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  margin-left: 0.4rem;
}
.incumbent-star {
  color: var(--c-text);
  font-weight: 900;
  margin-left: 0.15rem;
}

/* ---------- race detail (side by side) ---------- */

.race-detail-intro {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}
.candidate-columns {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.candidate-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1rem;
}
.candidate-card h3 { font-size: 1.05rem; margin: 0.2rem 0 0.1rem; }
.candidate-card .party-line { font-size: 0.82rem; color: var(--c-text-muted); margin-bottom: 0.5rem; }
.card-bio { font-size: 0.88rem; margin: 0.4rem 0; }
.card-section { margin: 0.7rem 0; }
.card-section h4 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  margin: 0 0 0.2rem;
}
.card-full-btn { display: inline-block; margin-top: 0.6rem; font-size: 0.88rem; }
.write-in-title { margin-top: 2rem; }

/* ---------- bullets: icons + parenthetical citations ---------- */

.profile-section { margin: 1.6rem 0; }
.bio-text { font-size: 1rem; line-height: 1.6; }
.bullet-list { list-style: none; margin: 0; padding: 0; }
.bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.95rem;
  line-height: 1.5;
}
.bullet-list li:last-child { border-bottom: none; }
.bullet-icon {
  flex: 0 0 auto;
  font-size: 0.8rem;
  line-height: 1.6;
  cursor: help;
}
.bullet-icon.icon-good { color: #2f9e44; }
.bullet-icon.icon-bad { color: #c92a2a; }
.bullet-icon.icon-neutral { color: #868e96; }
.bullet-icon.icon-developing, .bullet-icon.icon-investigate { font-size: 0.95rem; }

/* Grouped bullets (2026-10-01): headline + nested evidence. The headline
   row keeps the flex icon+text layout; the evidence list sits under it,
   indented, smaller, same icon vocabulary. */
.bullet-list.group-list > li.group { display: block; }
.group-headline { display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 600; }
.group-list.headlines-only li.group { padding: 0.35rem 0; font-size: 0.9rem; }
.group-list.headlines-only .group-headline { font-weight: 500; }
.group.no-findings .group-headline { font-weight: 400; color: var(--c-text-muted); }
.evidence-list { list-style: none; margin: 0.35rem 0 0.1rem 1.5rem; padding: 0; }
.evidence-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.print-evidence { margin-left: 1.4rem; font-size: 0.9rem; }
.print-only { display: none; }
@media print { .print-only { display: inline !important; font-weight: 700; } }
.cite { font-size: 0.85rem; color: var(--c-text-muted); }
.cite a { color: var(--c-text-muted); text-decoration: underline; }
.cite-count { font-size: 0.78rem; opacity: 0.8; }
.bullet-list.unverifiable li { border-bottom-style: dashed; }
.policy-link-list { list-style: none; margin: 0; padding: 0; }
.policy-link-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--c-line); font-size: 0.92rem; }
.policy-link-list li:last-child { border-bottom: none; }
.policy-link-list .cite { display: block; margin-top: 0.1rem; }
.source-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.source-list li { padding: 0.3rem 0; font-size: 0.88rem; break-inside: avoid; }
@media (max-width: 640px) { .source-list { columns: 1; } }

/* ---------- methodology page ---------- */

.method-steps {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  counter-reset: method-step;
}
.method-steps li {
  counter-increment: method-step;
  position: relative;
  padding: 0 0 1.3rem 2.6rem;
}
.method-steps li::before {
  content: counter(method-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.method-steps h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.method-steps p { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; }

/* ---------- candidate page ---------- */

.candidate-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}
.candidate-header h1 { font-size: 1.5rem; margin: 0; }

.tabs { display: flex; gap: 0.4rem; border-bottom: 2px solid var(--c-line); margin: 1.2rem 0 1rem; flex-wrap: wrap; }
.tab-btn {
  background: transparent;
  color: var(--c-text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.5em 0.2em;
  font-weight: 700;
}
.tab-btn.active { color: var(--c-text); border-bottom-color: var(--c-accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.dimension-block { margin-bottom: 1.3rem; }
.dimension-block h3 { margin-bottom: 0.3rem; }

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.ledger-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--c-accent);
  font-size: 0.8rem;
  color: var(--c-text-muted);
}
.ledger-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.ledger-table td:first-child { width: 32%; }
.ledger-table td:nth-child(2) { width: 48%; font-style: italic; }
.ledger-table td:nth-child(3) { width: 20%; word-break: break-word; }
.ledger-table td:nth-child(3) a { font-size: 0.85rem; }
@media (max-width: 640px) {
  .ledger-table, .ledger-table thead, .ledger-table tbody, .ledger-table th, .ledger-table td, .ledger-table tr {
    display: block;
  }
  .ledger-table thead { display: none; }
  .ledger-table tr { border-bottom: 2px solid var(--c-line); padding: 0.5rem 0; }
  .ledger-table td { border-bottom: none; padding: 0.2rem 0; }
  .ledger-table td:first-child::before { content: "Summary: "; font-weight: 700; }
  .ledger-table td:nth-child(2)::before { content: "Quote: "; font-weight: 700; font-style: normal; }
  .ledger-table td:nth-child(3)::before { content: "Source: "; font-weight: 700; }
}

.links-row a { margin-right: 1rem; font-size: 0.9rem; }

/* ---------- email banner ---------- */

.email-banner {
  margin-top: 2.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--c-banner-bg);
  color: var(--c-banner-text);
  border-radius: var(--radius);
  text-align: center;
}
.email-banner h3 { margin: 0 0 0.3rem; color: var(--c-banner-text); }
.email-banner p { margin: 0 0 0.9rem; color: var(--c-banner-muted); font-size: 0.9rem; }
.email-banner form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.email-banner input[type=email] {
  padding: 0.6em 0.8em;
  border-radius: var(--radius);
  border: none;
  min-width: 220px;
  font-family: inherit;
  font-size: 1rem;
}
.email-banner .btn { background: var(--c-banner-btn-bg); color: var(--c-banner-btn-text); }
.email-banner .btn:hover { background: var(--c-banner-btn-hover); }
.email-thanks { font-weight: 700; }

.site-footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--c-text-muted);
  padding: 1.5rem 1.25rem 2.5rem;
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.demo-flag {
  background: var(--c-flag-bg);
  color: var(--c-flag-text);
  font-size: 0.72rem;
  text-align: center;
  padding: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  position: relative;
}
.modal-box h3 { margin-top: 0; }
.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  color: var(--c-text);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
}

/* ---------- print ---------- */

.print-link-row { margin: 0.3rem 0 0.8rem; font-size: 0.88rem; }
.print-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--c-line);
}
.print-header { margin-bottom: 1.2rem; }
.print-candidate { margin-bottom: 1.4rem; }
.print-candidate h3 { margin-bottom: 0.15rem; }
.print-party { font-weight: 400; color: var(--c-text-muted); }
.print-meta { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.6rem; }
.print-dimension { margin-bottom: 0.9rem; }
.print-dimension h4 { margin-bottom: 0.2rem; }
.print-source-link { font-size: 0.8rem; color: var(--c-text-muted); word-break: break-all; }
.print-candidate-divider { border: none; border-top: 1px solid var(--c-line); margin: 1.4rem 0; }
.print-race-block { margin-bottom: 2rem; }
.print-cite-row { font-size: 0.85rem; margin: 0.4rem 0; }
.print-cite-row sup { font-weight: 600; }
.print-footnotes {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin: 0.3rem 0 0.8rem;
  padding-left: 1.4rem;
  word-break: break-all;
}
.print-footnotes li { margin-bottom: 0.15rem; }
.print-qr-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; }
.print-qr { border: 1px solid var(--c-line); }
.print-footer {
  margin-top: 2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.78rem;
  color: var(--c-text-muted);
}

/* Same rules apply whether someone uses the dedicated print routes above or
   just hits Ctrl/Cmd+P on any regular page -- nonpartisan on paper means no
   scores/grades/checkmarks either way, and every candidate gets the same
   treatment regardless of party. Letter size, 0.75in margins, black text, no
   background colors, and a page break before each race, per the MWEG spec
   this was built from (frontend/CLAUDE.md, "Print option"). */
@media print {
  @page { size: letter; margin: 0.75in; }
  body { background: #fff; color: #000; }
  .demo-flag, .site-header, .email-banner, .no-print,
  form, .tab-btn, .dimension-toggle, .btn, .modal-overlay,
  .status-badge {
    display: none !important;
  }
  a { color: #000; text-decoration: underline; }
  /* Printing a regular candidate page directly (Ctrl/Cmd+P, not via the
     dedicated /print/ routes, which use numbered footnotes instead) still
     has live <a> citation links -- a clickable-looking link is useless on
     paper, so make the actual URL show up as visible text next to it. */
  .ledger-table a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
  .party-dot { display: none; }
  /* A regular page's tabs/expand-on-click sections only ever show one panel
     at a time on screen; for print, force everything open so nothing that
     exists gets silently left off the page. */
  .tab-panel, .dimension-body { display: block !important; }
  .candidate-columns { display: block; }
  .candidate-card, .print-candidate { page-break-inside: avoid; }
  .print-race-block { page-break-before: always; }
  .print-race-block:first-of-type { page-break-before: avoid; }
  .ledger-table { font-size: 0.82rem; }
}
.modal-close:hover { background: var(--c-surface-2); }