/*
 * Civic: the one stylesheet for the prerendered static pages (state, race,
 * county, "How we research", the state list and the 404 page). Built by
 * src/civic/prerender/ into dist-civic/assets/civic-static-<hash>.css.
 *
 * Every color, gradient, radius, shadow and font size is a custom property.
 * The values below are PLACEHOLDERS matching the app's current palette; they
 * sit in :where(:root) (zero specificity), so a design token file wins
 * whatever its order. To use one, add at the very top of this file:
 *
 *     /*
 * Civic design tokens: the single source for Civic's colors, gradients,
 * type, shape and depth. Read by
 *   - src/civic/design/civicTheme.js (the app's MUI theme parses this file),
 *   - src/civic/static/civic-static.css (the prerendered pages @import it).
 * See src/civic/design/DESIGN.md for the reasoning and contrast table.
 *
 * Rules for this file: only custom properties, on :root or on a "chrome"
 * scope. Values are literal hex / rgba or var() references to other tokens
 * in this file, so the theme parser can resolve them.
 */

:root {
  /* ─── Navy: the frame ─────────────────────────────────────────────────── */
  --civic-navy-950: #0a1529;
  --civic-navy-900: #0f1f3d; /* midnight: chrome, hero */
  --civic-navy-800: #14284d; /* ink blue: hero mid, sidebar */
  --civic-navy-700: #1b3563;
  --civic-navy-600: #22457f; /* interactive blue on eggshell */
  --civic-navy-500: #3a5f9e;
  --civic-navy-300: #a9c0e6; /* interactive blue on navy */
  --civic-navy-100: #e3e9f4; /* tint for selected states */

  /* ─── Garnet: the accent edge ─────────────────────────────────────────── */
  --civic-red-900: #5c0f1a;
  --civic-red-800: #74151f;
  --civic-red-700: #8f1d2c; /* garnet: rules, emblem ring, errors */
  --civic-red-600: #a3202f;
  --civic-red-300: #eba3ab; /* garnet on navy */
  --civic-red-100: #f5e1e3;

  /* ─── Eggshell: the page ──────────────────────────────────────────────── */
  --civic-ivory: #fbf8f1; /* raised surfaces: cards, dialogs */
  --civic-eggshell-050: #fffdf8; /* card highlight, inputs */
  --civic-eggshell-100: #f5efe2; /* "eagle egg": the page */
  --civic-parchment: #ece3cf; /* deeper surface, section bands */
  --civic-parchment-deep: #e1d5b9;
  --civic-line: #d6c9ab; /* hairlines and card borders */
  --civic-line-strong: #8c8470; /* input borders (3:1 on the page) */

  /* ─── Ink ─────────────────────────────────────────────────────────────── */
  --civic-ink-900: #121725; /* body text */
  --civic-ink-700: #262c3c; /* secondary text, still AAA */
  --civic-ink-500: #4a5063; /* tertiary text, AA on every light surface */
  --civic-on-navy: #f5efe2; /* text on navy */
  --civic-on-navy-soft: #d6dbe5; /* secondary text on navy */
  --civic-on-navy-faint: #b7c0d0; /* small print on navy, AA */

  /* ─── Brass: hairlines only, never text ───────────────────────────────── */
  --civic-brass: #b08d43;

  /* ─── Status (light surfaces / navy surfaces) ─────────────────────────── */
  --civic-green: #2d6a3e;
  --civic-green-on-navy: #8fd3a0;
  --civic-amber: #8a5a00;
  --civic-amber-on-navy: #f0c674;
  --civic-error: var(--civic-red-600);

  /* ─── Party markers: never the brand red or blue (DESIGN.md §Neutrality) */
  --civic-party-d: #4a7fc1;
  --civic-party-r: #d0463f;
  --civic-party-i: #8a63b8;
  --civic-party-l: #d4a52c;
  --civic-party-g: #4c9a5b;
  --civic-party-other: #8b8f99;

  /* ─── Names the static pages use ──────────────────────────────────────── */
  --civic-navy: var(--civic-navy-900);
  --civic-navy-deep: var(--civic-navy-950);
  --civic-red: var(--civic-red-700);
  --civic-eggshell: var(--civic-eggshell-100);
  --civic-gold: var(--civic-brass);
  --civic-gold-soft: var(--civic-brass);
  --civic-sky: var(--civic-navy-300);

  --civic-bg: var(--civic-eggshell-100);
  /* --civic-surface* and --civic-chrome are `background` values (gradients
     included); use the raw palette above where a plain color is needed. */
  --civic-surface: var(--civic-grad-card);
  --civic-surface-raised: var(--civic-grad-card-raised);
  --civic-surface-sunk: var(--civic-parchment);
  --civic-chrome: var(--civic-grad-chrome);
  --civic-ink: var(--civic-ink-900);
  --civic-ink-muted: var(--civic-ink-700);
  --civic-ink-subtle: var(--civic-ink-500);
  --civic-accent: var(--civic-red-700);
  --civic-link: var(--civic-navy-600);
  --civic-link-hover: var(--civic-navy-800);
  --civic-info: var(--civic-navy-600);
  --civic-border: var(--civic-line);
  --civic-border-strong: var(--civic-line-strong);
  --civic-info-border: rgba(34, 69, 127, 0.28);
  --civic-info-bg: rgba(34, 69, 127, 0.06);
  --civic-warn-border: rgba(138, 90, 0, 0.35);
  --civic-warn-bg: rgba(138, 90, 0, 0.07);
  --civic-cta-bg: var(--civic-navy-800);
  --civic-cta-ink: var(--civic-on-navy);
  --civic-cta-bg-hover: var(--civic-navy-900);
  --civic-focus: var(--civic-red-700);
  --civic-focus-on-navy: var(--civic-on-navy);
  --civic-color-scheme: light;

  /* ─── Gradients: depth, not decoration ────────────────────────────────── */
  --civic-grad-chrome: linear-gradient(180deg, #13264a 0%, #0c1a35 100%);
  --civic-grad-hero:
    radial-gradient(120% 140% at 0% 0%, rgba(58, 95, 158, 0.38) 0%, rgba(58, 95, 158, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(143, 29, 44, 0.22) 0%, rgba(143, 29, 44, 0) 50%),
    linear-gradient(160deg, #1b3563 0%, #12244a 48%, #0a1529 100%);
  --civic-grad-page: linear-gradient(180deg, #efe7d5 0%, #f5efe2 360px);
  --civic-grad-card: linear-gradient(180deg, #fffdf8 0%, #f8f2e6 100%);
  --civic-grad-card-raised: linear-gradient(180deg, #ffffff 0%, #faf6ee 55%, #f3ecdd 100%);
  --civic-grad-band: linear-gradient(90deg, #e9dfc8 0%, rgba(233, 223, 200, 0.55) 55%, rgba(233, 223, 200, 0) 100%);
  --civic-grad-selected: linear-gradient(180deg, #f1f4fa 0%, #e3e9f4 100%);
  --civic-grad-cta: linear-gradient(180deg, #1f3c6f 0%, #14284d 100%);
  --civic-grad-emblem: radial-gradient(circle at 32% 26%, #2f5594 0%, #14284d 58%, #0a1529 100%);
  --civic-rule-edge: linear-gradient(90deg, var(--civic-red-700) 0%, var(--civic-red-600) 100%);

  /* ─── Shape and depth ─────────────────────────────────────────────────── */
  --civic-radius: 12px;
  --civic-radius-sm: 8px;
  --civic-radius-lg: 18px;
  --civic-radius-pill: 999px;
  --civic-border-width: 1px;
  --civic-shadow: 0 1px 2px rgba(15, 31, 61, 0.06), 0 6px 18px rgba(15, 31, 61, 0.07);
  --civic-shadow-raised: 0 1px 2px rgba(15, 31, 61, 0.08), 0 10px 28px rgba(15, 31, 61, 0.12);
  --civic-shadow-hero: 0 2px 6px rgba(10, 21, 41, 0.18), 0 22px 48px rgba(10, 21, 41, 0.22);

  /* ─── Type ────────────────────────────────────────────────────────────── */
  --civic-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --civic-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --civic-fs-body: 1.125rem; /* 18px */
  --civic-fs-small: 1rem; /* 16px */
  --civic-fs-caption: 0.9375rem; /* 15px: the smallest text Civic sets */
  --civic-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --civic-fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --civic-fs-h3: 1.25rem;
  --civic-fs-brand: 1.625rem;
  --civic-lh-body: 1.6;
  --civic-lh-heading: 1.2;
  --civic-tracking-label: 0.12em;

  /* ─── Layout ──────────────────────────────────────────────────────────── */
  --civic-max: 52rem;
  --civic-measure: 70ch;
  --civic-gutter: 16px;
}

/*
 * Chrome scopes: navy surfaces re-point the semantic tokens, so text,
 * links and borders inside them read on navy without new rules. Used by the
 * static pages' header, hero and footer, and by the app via
 * data-civic-surface="chrome".
 */
[data-civic-surface="chrome"],
.site-header,
.site-footer,
.hero {
  --civic-ink: var(--civic-on-navy);
  --civic-ink-muted: var(--civic-on-navy-soft);
  --civic-ink-subtle: var(--civic-on-navy-faint);
  --civic-accent: var(--civic-on-navy);
  --civic-link: var(--civic-navy-300);
  --civic-link-hover: var(--civic-on-navy);
  --civic-border: rgba(169, 192, 230, 0.22);
  --civic-border-strong: rgba(169, 192, 230, 0.45);
  --civic-surface: rgba(255, 255, 255, 0.04);
  --civic-surface-raised: rgba(255, 255, 255, 0.07);
  --civic-cta-bg: var(--civic-on-navy);
  --civic-cta-ink: var(--civic-navy-900);
  --civic-cta-bg-hover: #ffffff;
  --civic-focus: var(--civic-focus-on-navy);
  --civic-info-border: rgba(169, 192, 230, 0.35);
  --civic-info-bg: rgba(169, 192, 230, 0.08);
}

 *
 * The build inlines relative @imports, so the page still loads one CSS file.
 * Font files are referenced relative to this file and rewritten to their
 * hashed /assets/ names at build time. HTML templates set no colors.
 */


@font-face {
  font-family: "DM Sans";
  src: url("/assets/DMSans-VariableFont_opsz_wght-D_B5dL4R.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/dm-sans-latin-C1bDR5vi.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/PlayfairDisplay-VariableFont_wght-Cl-XvBsO.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/playfair-display-latin-Bxn9kp8D.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens (placeholders) ─────────────────────────────────────────────── */
:where(:root) {
  /* Raw palette */
  --civic-navy: #0f1729;
  --civic-navy-deep: #0d1321;
  --civic-red: #b3261e;
  --civic-eggshell: #f4f1e8;
  --civic-gold: #c9a961;
  --civic-gold-soft: #bea959;
  --civic-sky: #5a9bd4;

  /* Semantic */
  --civic-bg: var(--civic-navy);
  --civic-surface: #141d33;
  --civic-surface-raised: #1a2035;
  --civic-chrome: var(--civic-navy-deep);
  --civic-ink: #ffffff;
  --civic-ink-muted: #a0aec0;
  --civic-ink-subtle: #8a9bb4;
  --civic-accent: var(--civic-gold);
  --civic-link: var(--civic-gold-soft);
  --civic-link-hover: #d9c27a;
  --civic-info: var(--civic-sky);
  --civic-border: rgba(201, 169, 97, 0.25);
  --civic-border-strong: rgba(201, 169, 97, 0.5);
  --civic-info-border: rgba(90, 155, 212, 0.45);
  --civic-info-bg: rgba(90, 155, 212, 0.07);
  --civic-warn-border: rgba(217, 165, 32, 0.45);
  --civic-warn-bg: rgba(217, 165, 32, 0.07);
  --civic-cta-bg: var(--civic-gold);
  --civic-cta-ink: #0d1321;
  --civic-cta-bg-hover: #d9bd7c;
  --civic-focus: #ffd966;
  --civic-grad-hero: linear-gradient(180deg, rgba(201, 169, 97, 0.08) 0%, rgba(15, 23, 41, 0) 100%);

  /* Shape */
  --civic-radius: 10px;
  --civic-radius-sm: 6px;
  --civic-radius-pill: 999px;
  --civic-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --civic-border-width: 1px;

  /* Type */
  --civic-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --civic-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --civic-fs-body: 1rem;
  --civic-fs-small: 0.875rem;
  --civic-fs-caption: 0.8125rem;
  --civic-fs-h1: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --civic-fs-h2: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem);
  --civic-fs-h3: 1.125rem;
  --civic-fs-brand: 1.5rem;
  --civic-lh-body: 1.6;

  /* Layout */
  --civic-max: 52rem;
  --civic-gutter: 16px;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  color-scheme: var(--civic-color-scheme, dark);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--civic-bg);
  color: var(--civic-ink);
  font-family: var(--civic-font-body);
  font-size: var(--civic-fs-body);
  line-height: var(--civic-lh-body);
  overflow-wrap: break-word;
}
a {
  color: var(--civic-link);
  text-underline-offset: 0.15em;
}
a:hover {
  color: var(--civic-link-hover);
}
a:focus-visible,
.cta:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--civic-focus);
  outline-offset: 2px;
}
h1,
h2,
h3 {
  font-family: var(--civic-font-display);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
h1 {
  font-size: var(--civic-fs-h1);
  font-weight: 400;
}
h2 {
  font-size: var(--civic-fs-h2);
}
h3 {
  font-size: var(--civic-fs-h3);
  font-family: var(--civic-font-body);
  font-weight: 600;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding-left: 1.25rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 0.75rem;
  background: var(--civic-cta-bg);
  color: var(--civic-cta-ink);
  border-radius: var(--civic-radius-sm);
  z-index: 10;
}
.skip:focus {
  left: var(--civic-gutter);
  top: 0.5rem;
}
.wrap {
  width: 100%;
  max-width: var(--civic-max);
  margin: 0 auto;
  padding: 0 var(--civic-gutter);
}
.muted {
  color: var(--civic-ink-muted);
}
.small {
  font-size: var(--civic-fs-small);
}
.caption {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
.mt-sm {
  margin-top: 0.5rem;
}
.mt {
  margin-top: 0.75rem;
}
.mt-lg {
  margin-top: 1.25rem;
}
.stack {
  display: grid;
  gap: 0.5rem;
}
blockquote {
  margin: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Header / footer ───────────────────────────────────────────────────── */
.site-header {
  position: relative;
  color: var(--civic-ink);
  background: var(--civic-chrome);
  border-bottom: var(--civic-border-width) solid var(--civic-border);
}
/* Garnet edge under the navy header, matching the app header. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--civic-rule-edge);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--civic-ink);
  text-decoration: none;
  min-width: 0;
}
.brand:hover {
  color: var(--civic-ink);
}
.brand-mark {
  flex-shrink: 0;
  display: block;
}
.brand-mark rect {
  fill: var(--civic-surface-raised);
  stroke: var(--civic-accent);
}
.brand-mark path {
  stroke: var(--civic-accent);
}
.brand-name {
  font-family: var(--civic-font-display);
  font-size: var(--civic-fs-brand);
  line-height: 1;
}
.brand-tag {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
  line-height: 1.3;
}
.header-link {
  font-size: var(--civic-fs-caption);
  white-space: nowrap;
}
.site-footer {
  margin-top: auto;
  background: var(--civic-chrome);
  border-top: var(--civic-border-width) solid var(--civic-border);
  padding: 1.75rem 0;
  font-size: var(--civic-fs-small);
  color: var(--civic-ink-muted);
}
.site-footer .wrap {
  display: grid;
  gap: 0.6rem;
}
.footer-name {
  font-family: var(--civic-font-display);
  color: var(--civic-ink);
  font-size: var(--civic-fs-h3);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--civic-fs-caption);
}

/* ─── Page ──────────────────────────────────────────────────────────────── */
main {
  flex: 1;
  padding-bottom: 2.5rem;
}
.hero {
  /* Re-resolve the ink token: chrome scopes (tokens.css) re-point it. */
  color: var(--civic-ink);
  background: var(--civic-grad-hero);
  padding: 1.25rem 0 1.5rem;
}
.crumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.25rem;
  color: var(--civic-ink-subtle);
}
.eyebrow {
  margin-top: 0.75rem;
  font-size: var(--civic-fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--civic-accent);
}
.hero h1 {
  margin-top: 0.25rem;
}
.lede {
  margin-top: 0.6rem;
  color: var(--civic-ink-muted);
  max-width: 44rem;
}
.cta-row {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--civic-radius-pill);
  background: var(--civic-cta-bg);
  color: var(--civic-cta-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--civic-shadow);
}
.cta:hover {
  background: var(--civic-cta-bg-hover);
  color: var(--civic-cta-ink);
}
.section {
  margin-top: 2rem;
}
.section > h2 {
  padding-bottom: 0.4rem;
  border-bottom: var(--civic-border-width) solid var(--civic-border);
}
.section > h2 + * {
  margin-top: 0.9rem;
}
.note {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-info-border);
  background: var(--civic-info-bg);
  display: grid;
  gap: 0.5rem;
  font-size: var(--civic-fs-small);
}
.note--warn {
  border-color: var(--civic-warn-border);
  background: var(--civic-warn-bg);
}
.note strong {
  color: var(--civic-ink);
}

/* Race and measure lists */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.card {
  padding: 0.9rem 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface);
  box-shadow: var(--civic-shadow);
  display: grid;
  gap: 0.4rem;
}
.card h3 a {
  color: var(--civic-ink);
  text-decoration-color: var(--civic-border-strong);
}
.card h3 a:hover {
  color: var(--civic-link-hover);
}
.card .where {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
.names {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-size: var(--civic-fs-small);
}
.names .party,
.cand .party {
  color: var(--civic-ink-muted);
}
.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border-radius: var(--civic-radius-pill);
  border: var(--civic-border-width) solid var(--civic-border-strong);
  font-size: var(--civic-fs-caption);
  line-height: 1.5;
  color: var(--civic-ink);
  white-space: nowrap;
}
.grid-2 {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Candidates on a race page.
 *
 * One candidate is a card, and the card is a hierarchy, not a stack of
 * same-sized paragraphs: a header carrying the name and the emblem, a row of
 * labelled facts (what they do now), the summary in reading-size prose, then
 * labelled blocks. Every block is headed with the candidate's family name, so
 * a reader landing mid-page always knows who is being described. */
.cands {
  display: grid;
  gap: 1.25rem;
}
.cand {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--civic-radius-lg);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface-raised);
  box-shadow: var(--civic-shadow);
  display: grid;
  gap: 0.85rem;
}
/* A garnet edge along the top: the same rule the header carries, so a
 * candidate card reads as part of the same object as the page. */
.cand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--civic-rule-edge);
}
.cand-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cand-id {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.emblem {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--civic-grad-emblem);
  color: var(--civic-eggshell-100);
  font-family: var(--civic-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow:
    0 0 0 2px var(--civic-ivory),
    0 0 0 3px var(--civic-brass),
    0 1px 3px rgba(15, 31, 61, 0.25);
}
.cand h3 {
  font-size: var(--civic-fs-h3);
  line-height: 1.25;
}
.cand-party {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
/* Labelled facts: the answer to "what do they actually do?" without making
 * the reader find it inside a paragraph. */
.facts {
  margin: 0;
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--civic-radius-sm);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-grad-band);
}
/* A fixed label column, not max-content: each row is its own grid, so a
 * content-sized column would leave the labels ragged down the list. */
.facts > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
}
.facts dt {
  font-size: var(--civic-fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--civic-red-800);
}
.facts dd {
  margin: 0;
  font-size: var(--civic-fs-small);
  color: var(--civic-ink);
}
.facts-wide > div {
  grid-template-columns: 11.5rem 1fr;
}
@media (max-width: 520px) {
  .facts > div,
  .facts-wide > div {
    grid-template-columns: 1fr;
  }
}
/* Prose keeps a comfortable measure even when the card is wide: past about
 * 70 characters the eye loses the start of the next line. */
.cand-lede {
  font-size: var(--civic-fs-body);
  line-height: 1.6;
  color: var(--civic-ink);
  max-width: 68ch;
}
.cand-block li,
.topic li,
.duties li {
  max-width: 72ch;
}
.cand-prose {
  color: var(--civic-ink-muted);
}
/* Each block names its subject, and is separated by a rule rather than by
 * more white space between identical paragraphs. */
.cand-block {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: var(--civic-border-width) solid var(--civic-border);
}
.cand-block > h4 {
  font-family: var(--civic-font-body);
  font-size: var(--civic-fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--civic-navy-900);
}
.cand-block ul {
  display: grid;
  gap: 0.4rem;
  font-size: var(--civic-fs-small);
  line-height: 1.55;
}
.topics {
  display: grid;
  gap: 0.6rem;
}
.topic {
  padding: 0.6rem 0.75rem;
  border-radius: var(--civic-radius-sm);
  background: var(--civic-surface-sunk);
  border-left: 3px solid var(--civic-navy-600);
}
.topic-name {
  font-weight: 600;
  font-size: var(--civic-fs-small);
  color: var(--civic-navy-900);
  margin-bottom: 0.25rem;
}
.topic ul {
  display: grid;
  gap: 0.35rem;
  font-size: var(--civic-fs-small);
}
/* What we looked for and did not find. A blank space tells a reader nothing;
 * a list of where we looked tells them the silence is the record, not an
 * oversight — and tells them where to send a correction. */
.searched {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--civic-radius-sm);
  border: var(--civic-border-width) dashed var(--civic-border-strong);
  background: var(--civic-surface-sunk);
}
.searched ul {
  display: grid;
  gap: 0.2rem;
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
.cand .about {
  color: var(--civic-ink-muted);
}
.cand .links {
  font-size: var(--civic-fs-caption);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
/* The office section: a summary at reading size, then the statutory duties
 * folded away so the page opens short and the detail is one click deep. */
.lede-sm {
  font-size: var(--civic-fs-body);
  line-height: 1.6;
  color: var(--civic-ink);
  max-width: 68ch;
}
.section .facts {
  margin-top: 0.9rem;
}
.duties {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--civic-radius-sm);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface);
}
.duties > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--civic-fs-small);
  color: var(--civic-navy-900);
}
.duties ul {
  display: grid;
  gap: 0.45rem;
  font-size: var(--civic-fs-small);
  line-height: 1.55;
}
.sources {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
}
.sources ol,
.sources ul {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.3rem;
}
.sources a {
  overflow-wrap: anywhere;
}
sup.cite {
  font-size: 0.7em;
  line-height: 0;
}

/* Facts (voting info, yes/no) */
.facts {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.facts dt {
  font-size: var(--civic-fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--civic-ink-muted);
}
.facts dd {
  margin: 0.15rem 0 0;
}
.panel {
  padding: 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface);
}

/* State and county indexes */
.index {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 1rem;
}
.index a {
  display: inline-block;
  padding: 0.3rem 0;
}

details {
  margin-top: 0.75rem;
}
summary {
  cursor: pointer;
  color: var(--civic-link);
}

/* Election results (src/civic/prerender/results.mjs). One neutral bar color
   for every candidate; no party hue, no winner marker (DESIGN.md). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.results {
  padding: 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface);
}
.results > h2 {
  border-bottom: 0;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.results .status {
  display: inline-block;
  margin: 0.4rem 0 0;
  padding: 0.1rem 0.6rem;
  border-radius: var(--civic-radius-pill);
  border: var(--civic-border-width) solid var(--civic-border-strong);
  font-size: var(--civic-fs-caption);
  font-weight: 600;
  color: var(--civic-ink-muted);
}
.results .status--certified {
  color: var(--civic-green);
  border-color: var(--civic-green);
}
.results-table {
  width: 100%;
  margin-top: 0.75rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.results-table th,
.results-table td {
  text-align: left;
  padding: 0.45rem 0;
  border-bottom: var(--civic-border-width) solid var(--civic-border);
  vertical-align: top;
}
.results-table thead th {
  font-size: var(--civic-fs-caption);
  color: var(--civic-ink-muted);
  font-weight: 600;
}
.results-table tbody th {
  font-weight: 600;
  width: 100%;
}
.results-table .num {
  text-align: right;
  white-space: nowrap;
  padding-left: 1rem;
}
.results-table .bar {
  display: block;
  margin-top: 0.3rem;
  height: 6px;
  border-radius: 3px;
  background: rgba(34, 69, 127, 0.12);
  overflow: hidden;
}
.results-table .bar > span {
  display: block;
  height: 100%;
  background: rgba(34, 69, 127, 0.55);
}
.results .caption {
  margin-top: 0.6rem;
}
.note--results {
  border-left: 5px solid var(--civic-info);
}
.test-label {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 2px dashed var(--civic-red-600);
  border-radius: var(--civic-radius-sm);
  color: var(--civic-red-600);
  font-family: var(--civic-font-body);
  font-size: var(--civic-fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* "Right now" voting line (filled in the browser from the state's key dates) */
.now {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--civic-radius);
  border-left: 4px solid var(--civic-navy, #1b2f5c);
  background: linear-gradient(90deg, rgba(27, 47, 92, 0.1), rgba(27, 47, 92, 0.02));
}
.now[data-tone="closed"] {
  border-left-color: var(--civic-red, #7a1f2b);
  background: linear-gradient(90deg, rgba(122, 31, 43, 0.08), rgba(122, 31, 43, 0.02));
}
.now-head {
  margin: 0;
  font-family: var(--civic-font-display);
  font-size: var(--civic-fs-h3);
  font-weight: 700;
  color: var(--civic-ink);
}
.now-detail {
  margin: 0.25rem 0 0;
  color: var(--civic-ink);
}
.now-detail:empty {
  display: none;
}
.now-hero {
  margin: 1rem 0 0;
  border-left-color: var(--civic-red, #b3243a);
  background: rgba(255, 255, 255, 0.08);
}
.now-hero a {
  color: inherit;
  text-decoration: none;
}
.now-hero .now-head {
  display: block;
  color: #fff;
}
.now-hero .now-detail {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Forums and debates */
.events {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.event {
  padding: 0.85rem 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-border);
  border-left: 4px solid var(--civic-navy, #1b2f5c);
  background: var(--civic-surface);
}
.event.past {
  border-left-color: var(--civic-border);
  opacity: 0.85;
}
.event p {
  margin: 0.15rem 0;
}
.event-title {
  font-weight: 600;
}
.event-title .muted {
  font-weight: 400;
}
.event-title,
.event-title a {
  overflow-wrap: anywhere;
}
.header-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}