/* Civic Notice — the public site.
 *
 * Design notes, so the next edit does not drift:
 *
 * v2 (2026-08-30) made this a marketing page rather than a document, without
 * giving up the app's whole claim of restraint. The rules that survived:
 * no gradient, no dark-pattern CTA, and the coverage story stays substance
 * (a map AND a table), never a vanity number.
 *
 * Layout is two-tier and the tiers must not mix: index.html composes
 * full-width structures (split hero, feature rows, the two-column coverage
 * section) inside `.wrap`; support/privacy put everything in `.wrap.narrow`
 * so text, callouts and lists share one width and one left edge. The v1 bug
 * was 40rem prose floating inside 68rem sections — do not reintroduce a
 * text column narrower than its neighbours.
 *
 * Colour comes from the app's own brand tokens (`src/constants/theme.ts`):
 * navy #1E3A5F and cream #F4EFE4. Light by default, inverting to the app's
 * real dark palette when the reader asks for it. The tile map is styled
 * entirely through these variables so it follows the theme.
 *
 * Type is Public Sans (the USWDS face, drawn for government content) with
 * Newsreader for display and for quoted record text (the digest card).
 */

:root {
  --paper: #FBF9F4;
  --surface: #FFFFFF;
  --ink: #12161C;
  --ink-soft: #4A5461;
  --navy: #1E3A5F;
  /* The middle coverage tier. An explicit colour per theme, never alpha over
     the page: --navy and --cream swap between themes, so a translucent tile
     changes meaning with the ground and its label contrast goes with it. */
  --navy-mid: #45688F;
  --navy-soft: #8FA8C4;
  --cream: #F4EFE4;
  --rule: #E2DCCC;
  --accent: #1F5FA8;
  --flag: #B85C1E;
  --good: #2C6E49;
  --bezel: #1A1D22;
  --shadow: 0 1px 2px rgba(18, 22, 28, .06), 0 8px 24px -12px rgba(18, 22, 28, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1115;
    --surface: #1B1E24;
    --ink: #F4F5F7;
    --ink-soft: #A8AEBA;
    --navy: #C8D8EC;
    --navy-mid: #7E97B8;
  --navy-soft: #52698A;
    --cream: #1B1E24;
    --rule: #2B303A;
    --accent: #5CA8FF;
    --flag: #FF9A5C;
    --good: #6FD09B;
    --bezel: #2B303A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --paper: #0F1115;
  --surface: #1B1E24;
  --ink: #F4F5F7;
  --ink-soft: #A8AEBA;
  --navy: #C8D8EC;
  --navy-mid: #7E97B8;
  --navy-soft: #52698A;
  --cream: #1B1E24;
  --rule: #2B303A;
  --accent: #5CA8FF;
  --flag: #FF9A5C;
  --good: #6FD09B;
  --bezel: #2B303A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap.narrow { max-width: 46rem; }
.prose { max-width: 52rem; }

/* ── masthead ────────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.brand img { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 7px; display: block; }
.nav { display: flex; gap: 1.35rem; font-size: .93rem; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { font-weight: 600; }

/* ── type ────────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 600; letter-spacing: -.015em; text-wrap: balance;
  line-height: 1.15; margin: 0 0 .6rem;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-top: 3.2rem; }
h3 { font-size: 1.16rem; margin-top: 2rem; font-family: inherit; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1.1rem; }
a { color: var(--accent); text-underline-offset: 2px; }
strong { font-weight: 700; }

.lede { font-size: 1.2rem; color: var(--ink-soft); }
.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .7rem;
}
.note { font-size: .9rem; color: var(--ink-soft); }

section { padding: 1px 0; }
footer {
  margin-top: 5rem; border-top: 1px solid var(--rule);
  padding: 2rem 0 3.5rem; font-size: .9rem; color: var(--ink-soft);
}
footer a { color: var(--ink-soft); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 4.5rem 0 1rem; }

.hero-split { padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--rule); }
.hero-split .wrap {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center;
}
.hero-copy p:last-child { margin-bottom: 0; }
.hero-media { display: flex; justify-content: center; }

.phone {
  width: min(300px, 78vw);
  border-radius: 46px;
  border: 10px solid var(--bezel);
  background: var(--bezel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.phone img { display: block; width: 100%; height: auto; border-radius: 36px; }

/* The App Store badge placeholder. When the store link exists: set the href,
   remove .soon, and change the small line to "Download on the". */
.store-badge {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .55rem 1.4rem .6rem; margin: 1.2rem 0 .4rem;
  border-radius: 10px; text-decoration: none;
  background: var(--ink); color: var(--paper);
  line-height: 1.15;
}
.store-badge .small { font-size: .68rem; letter-spacing: .04em; }
.store-badge .big { font-size: 1.25rem; font-weight: 700; }
.store-badge.soon { cursor: default; opacity: .85; }

/* ── the claim strip ─────────────────────────────────────────────────────── */
.claims {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2.5rem 0;
}
.claims div { background: var(--surface); padding: 1.25rem 1.35rem; }
.claims dt { font-weight: 700; margin-bottom: .3rem; }
.claims dd { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ── feature rows (screenshot beside copy, alternating) ─────────────────── */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 3rem; align-items: center; margin: 3.25rem 0;
}
.feature-media { display: flex; justify-content: center; }
.feature-media img {
  width: min(280px, 100%); height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--rule); box-shadow: var(--shadow);
  background: var(--surface);
}
.feature.flip .feature-media { order: 2; }
.feature h3 {
  margin-top: 0; font-family: Newsreader, Georgia, serif;
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em;
}
.feature p:last-child { margin-bottom: 0; }

/* ── the digest card ─────────────────────────────────────────────────────── */
.digest-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem; margin: 1.75rem 0;
  max-width: 44rem;
}
.digest-card blockquote {
  margin: 0 0 1rem;
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-size: 1.12rem; line-height: 1.55;
}
.digest-card figcaption { font-size: .88rem; color: var(--ink-soft); }

/* ── coverage: map + table ───────────────────────────────────────────────── */
.coverage { margin-top: 1rem; }
.coverage-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 3rem; align-items: start; margin: 1.5rem 0 1rem;
}
.tilemap { width: 100%; height: auto; display: block; }
.tile-roster { fill: var(--cream); stroke: var(--rule); }
.tile-full { fill: var(--navy); }
/* The middle tier the fifty-state load created: bills and roll calls in the
   store, has_outcomes still declared false pending a human (D2's gate). Two
   colours could only overstate these states or understate them. */
.tile-votes { fill: var(--navy-mid); }
/* Outcomes without votes by name. A fourth tier, because "outcomes" was being
   read as "outcomes, and therefore votes" and two states (Alaska, Missouri)
   serve the first without the second. Lighter than votes-by-name on purpose:
   the map's darkness order is how much of the record we hold. */
.tile-outcomes { fill: var(--navy-soft); }
.tile-label {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
}
.tile-label-roster { fill: var(--ink-soft); }
.tile-label-outcomes { fill: var(--ink); }
.tile-label-full, .tile-label-votes { fill: var(--cream); }
:root[data-theme="dark"] .tile-label-full, :root[data-theme="dark"] .tile-label-votes { fill: #0F1115; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile-label-full, :root:not([data-theme="light"]) .tile-label-votes { fill: #0F1115; }
}
.tile-local { fill: var(--flag); }

.legend { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .9rem; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.legend .swatch {
  width: .95rem; height: .95rem; border-radius: 4px; flex: none;
}
.legend .swatch.full { background: var(--navy); }
.legend .swatch.votes { background: var(--navy-mid); }
.legend .swatch.outcomes { background: var(--navy-soft); }
.legend .swatch.roster { background: var(--cream); border: 1px solid var(--rule); }
.legend .swatch.dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--flag);
  margin: 0 .2rem;
}

.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
caption { text-align: left; color: var(--ink-soft); font-size: .9rem; padding-bottom: .75rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); }
thead th {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 2px solid var(--rule); white-space: nowrap;
}
tr.group th {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy); padding-top: 1.3rem; border-bottom: 1px solid var(--rule);
}
tbody tr:hover { background: var(--surface); }
tbody tr.group:hover { background: none; }
td.num { font-variant-numeric: tabular-nums; }
.yes { color: var(--good); font-weight: 700; }
.no { color: var(--ink-soft); }
.tier {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 4px; white-space: nowrap;
  background: var(--cream); color: var(--navy); border: 1px solid var(--rule);
}

/* ── the three steps ─────────────────────────────────────────────────────── */
.steps {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 2rem 0;
}
.step {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.3rem 1.4rem;
}
.step .k {
  font-family: Newsreader, Georgia, serif; font-size: 1.6rem; font-weight: 600;
  color: var(--navy); display: block; margin-bottom: .35rem;
}
.step h3 { margin-top: 0; }
.step p { margin-bottom: 0; font-size: .95rem; color: var(--ink-soft); }

/* ── callout ─────────────────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--navy); background: var(--surface);
  padding: 1.1rem 1.3rem; border-radius: 0 8px 8px 0; margin: 1.75rem 0;
  box-shadow: var(--shadow);
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--flag); }

/* ── the closing band ────────────────────────────────────────────────────── */
.band {
  background: var(--cream); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 3rem 0; margin-top: 4rem;
}
.band h2 { margin-top: 0; }
.band p:last-child { margin-bottom: 0; }

/* ── faq ─────────────────────────────────────────────────────────────────── */
details {
  border-bottom: 1px solid var(--rule); padding: .95rem 0;
}
summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-soft); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { margin-top: .85rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 47rem) {
  .hero-split .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-media { order: 2; }
  .feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature.flip .feature-media { order: 0; }
  .coverage-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 30rem) {
  .brand { font-size: 1.05rem; white-space: nowrap; }
  .nav { gap: .9rem; }
}