/*
 * 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 */
.cand {
  padding: 1rem;
  border-radius: var(--civic-radius);
  border: var(--civic-border-width) solid var(--civic-border);
  background: var(--civic-surface);
  display: grid;
  gap: 0.5rem;
}
.cand h3 {
  font-size: var(--civic-fs-h3);
}
.cand .about {
  color: var(--civic-ink-muted);
}
.cand .links {
  font-size: var(--civic-fs-caption);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.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);
}