/* VOTE360 design system — serious/official civic-trust palette.
   Deep forest green (trust, continuity) + restrained gold (attention) +
   red reserved strictly for disputes/alerts. Public Sans is the US
   government web design system typeface; Newsreader is a text serif used
   sparingly for large figures/headlines to read as a credible report
   rather than a startup demo. */

:root {
  --ink: #16231d;
  --ink-soft: #4c5b53;
  --ink-faint: #7c8a82;
  --paper: #f6f5f0;
  --surface: #ffffff;
  --border: #e3e0d3;
  --border-strong: #cfcbb8;

  --brand: #1a4d3c;
  --brand-dark: #0e3226;
  --brand-light: #e8f1ec;
  --brand-tint: #f0f6f2;

  --gold: #92620f;
  --gold-dark: #6f4a0b;
  --gold-light: #f7ecd7;

  --red: #9b2c28;
  --red-light: #fbeae8;

  --shadow-sm: 0 1px 2px rgba(22, 35, 29, 0.05);
  --shadow: 0 1px 3px rgba(22, 35, 29, 0.06), 0 4px 10px rgba(22, 35, 29, 0.05);
  --shadow-lg: 0 10px 24px rgba(22, 35, 29, 0.10), 0 2px 6px rgba(22, 35, 29, 0.06);
  --radius: 0.7rem;
  --radius-sm: 0.45rem;
}

html, body {
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.font-display {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
}

::selection { background: var(--gold-light); color: var(--ink); }

a { color: inherit; }

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

.site-header {
  background: var(--brand-dark);
  background-image: linear-gradient(180deg, #0e3226 0%, #123a2c 100%);
  color: #eef4f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  flex: none;
}

.nav-link {
  padding: 0.4rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(238, 244, 240, 0.82);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, 0.14); color: #fff; }

.notice-strip {
  background: var(--gold-light);
  border-bottom: 1px solid #ecdcb8;
  color: var(--gold-dark);
}

.site-footer {
  background: var(--brand-dark);
  color: rgba(238, 244, 240, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer a { color: rgba(238, 244, 240, 0.85); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
a.card:hover, .card.is-interactive:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

.card-flush { border-radius: var(--radius); overflow: hidden; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.divider { border-color: var(--border); }

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; flex: none; }

.badge-real { background: var(--brand-light); color: var(--brand-dark); }
.badge-real .badge-dot { background: var(--brand); }

.badge-demo { background: var(--gold-light); color: var(--gold-dark); }
.badge-demo .badge-dot { background: var(--gold); }

.badge-verified { background: var(--brand-light); color: var(--brand-dark); }
.badge-unverified { background: #eef0ec; color: var(--ink-soft); }
.badge-disputed { background: var(--red-light); color: var(--red); }

.badge-high { background: var(--red-light); color: var(--red); }
.badge-medium { background: var(--gold-light); color: var(--gold-dark); }
.badge-low { background: #eef0ec; color: var(--ink-soft); }

/* ---------- buttons & inputs ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border-radius: 0.55rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-quiet:hover { background: var(--brand-tint); border-color: var(--brand); }

.field {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 0.55rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.92rem;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }

a:focus-visible, button:focus-visible, .field:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- data viz bits ---------- */

.bar-track {
  background: #ece9dc;
  border-radius: 9999px;
  overflow: hidden;
  height: 0.55rem;
}
.bar-fill { height: 100%; border-radius: 9999px; }

.stat-figure {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score-ring {
  --pct: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color, var(--brand)) calc(var(--pct) * 1%), #ece9dc 0);
  flex: none;
}
.score-ring-inner {
  width: 3.55rem;
  height: 3.55rem;
  border-radius: 9999px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.icon { width: 1.15rem; height: 1.15rem; flex: none; display: inline-block; vertical-align: -0.2em; }
.icon-lg { width: 1.6rem; height: 1.6rem; }

.timeline-rail { border-left: 2px solid var(--border); }
.timeline-dot { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--brand); margin-left: -0.32rem; flex: none; }

.source-tile {
  background: var(--brand-tint);
  border: 1px solid var(--border);
  border-radius: 0.55rem;
}
.source-tile.is-empty { background: var(--paper); color: var(--ink-faint); }

.hero-panel {
  background: radial-gradient(circle at 15% 20%, rgba(26, 77, 60, 0.08), transparent 55%),
              radial-gradient(circle at 85% 0%, rgba(146, 98, 15, 0.08), transparent 45%);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
}