/* Miami-Dade Commission Watch: shared stylesheet
   Palette is inspired by (but not copied from) Miami-Dade County's official
   site, which is blue-and-white with a small orange accent. This site leads
   with green instead (the county's own 1978 color resolution names blue,
   green, and white), uses a different blue shade, and a warmer neutral. */

:root {
  --green-900: #0e4a3c;
  --green-700: #146652;
  --green-600: #1a7d64;
  --green-100: #e3efe9;

  --navy-800: #1d3557;
  --navy-600: #2c4d7a;

  --gold-600: #c08a2e;
  --gold-100: #f7ecd8;

  --red-600: #b3452c;

  --ink-900: #1e2430;
  --ink-600: #4b5563;
  /* Darkened from the original #7a8391 -- that shade sat at ~3.5:1 on paper,
     failing WCAG AA (4.5:1) at the small mono sizes it's used at (labels,
     bylines, captions). This tone holds ~5.5:1 while staying visibly lighter
     than ink-600. */
  --ink-400: #5c6472;

  /* Gold-600 stays the brand accent for borders/backgrounds/focus rings,
     where the 3:1 non-text threshold applies. For gold text on gold-100
     (badges, "why it matters" labels) that pairing was ~2.6:1, so those
     spots use this darker variant instead. */
  --gold-700: #7a5419;

  --paper: #f7f4ec;
  --paper-raised: #ffffff;
  --line: #e2ddcd;

  /* Spacing scale (4px base) -- used at the primary layout rhythm points
     (sections, cards, grids). Existing one-off pixel values elsewhere are
     left alone rather than churned for no visual change. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Commission district colors, named so the get-involved/speak-out-september
     legends don't repeat raw hex. Some districts reuse the core palette. */
  --district-1: var(--green-700);
  --district-2: var(--navy-800);
  --district-3: var(--gold-600);
  --district-4: #7a2d5e;
  --district-5: var(--navy-600);
  --district-6: var(--red-600);
  --district-7: var(--green-600);
  --district-8: #8a5a1e;
  --district-9: var(--ink-600);
  --district-10: var(--green-900);
  --district-11: #a5673f;
  --district-12: #3d6b8a;
  --district-13: #6b4226;

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 4px;
  --max-width: 1080px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 20px 44px -20px rgba(14,74,60,.30), 0 4px 10px -6px rgba(14,74,60,.16);
  --shadow-sm: 0 8px 20px -10px rgba(14,74,60,.24), 0 2px 6px -2px rgba(14,74,60,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: pageIn .5s var(--ease);
}
@keyframes pageIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--green-700); }
a:hover { color: var(--navy-800); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-600);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink-900);
}

h1 { font-size: clamp(30px, 4.5vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }
.lede { font-size: 19px; color: var(--ink-600); max-width: 56ch; }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  margin-bottom: 12px;
  display: block;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  font-size: 15px;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s, box-shadow .3s;
}
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-900); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-900); color: #fff; transform: translateY(-2px); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-large { padding: 18px 34px; font-size: 18px; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Anchor-jump targets (#find-district, #commission, etc.) need clearance so
   they land below the sticky header instead of tucked behind it. */
section[id] { scroll-margin-top: 140px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--green-900);
  color: #fff;
  border-bottom: 4px solid var(--gold-600);
  transition: box-shadow .4s, background-color .4s;
  /* The newsletter bar inside this sticky header animates its height on
     scroll. Without this, the browser's scroll anchoring "corrects" the
     scroll position to compensate for that height change, which the scroll
     handler below reads as a direction change, hiding/showing the bar
     again and again in a feedback loop (visible as jitter). */
  overflow-anchor: none;
}
.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-toggle {
  display: flex;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-btn {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 11px 12px;
  min-width: 40px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  line-height: 1;
}
.lang-btn:first-child { border-left: none; }
.lang-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.lang-btn.active { background: var(--gold-600); color: var(--ink-900); font-weight: 700; }

/* Trim Google's default translate UI down to just what our buttons need.
   Google injects the banner iframe under obfuscated class names that change
   between widget releases, so match the stable `skiptranslate` marker on any
   iframe it drops into the page rather than one release's class name. */
body { top: 0 !important; position: static !important; }
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.skiptranslate { display: none !important; }
#google_translate_element {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: #fff;
}
.wordmark .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.wordmark .mark .accent { color: var(--gold-600); }
.wordmark .tagline {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (min-width: 640px) {
  .wordmark .tagline { display: inline; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 14px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
}
@media (min-width: 860px) {
  .nav-toggle { display: none; }
}

/* Header icon is redundant with the footer's Connect column and (on the
   homepage) the follow section, so drop it first when space is tight. */
.site-header .social-icons { display: none; }
@media (min-width: 480px) {
  .site-header .social-icons { display: flex; }
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  background: var(--green-900);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
  z-index: 50;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.site-nav.open { display: flex; }
.site-nav a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 13px 12px;
  min-height: 44px;
  border-radius: var(--radius);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
}
.site-nav a:last-child { border-bottom: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

@media (min-width: 860px) {
  .site-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    min-width: 0;
    gap: 4px;
  }
  .site-nav a {
    font-size: 15px;
    font-weight: 400;
    padding: 10px 8px;
    min-height: 0;
    border-bottom: none;
    position: relative;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 2px;
    background: var(--gold-600);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease);
  }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* ---------- header newsletter bar ---------- */
.header-newsletter {
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(255,255,255,0.14);
  opacity: 1;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), border-color .35s var(--ease);
}
.header-newsletter.header-newsletter-hidden {
  opacity: 0;
  border-top-color: transparent;
}
.header-newsletter .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 24px;
}
.newsletter-label {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
@media (min-width: 480px) {
  .newsletter-label { display: inline; }
}
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.newsletter-input-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}
.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  min-height: 40px;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-input:focus { outline: 2px solid var(--gold-600); outline-offset: 1px; background: rgba(255,255,255,0.14); }
.newsletter-form .btn-small { padding: 9px 16px; min-height: 40px; white-space: nowrap; }
.newsletter-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.newsletter-status.error { color: #ffb199; }
.newsletter-status.success { color: #a9e0c9; }

/* ---------- hero ---------- */
.hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px;
  align-items: start;
}

.next-meeting {
  margin-top: 28px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-600);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.next-meeting .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}
.next-meeting .date { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-top: 4px; }

/* ---------- section / cards ---------- */
.section { padding: 48px 0; }
.section-alt { background: var(--green-100); }
.section-head { margin-bottom: 32px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { border-color: var(--green-700); transform: translateY(-6px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-600); font-size: 15px; margin-bottom: 0; }

/* ---------- meeting cards ---------- */
.meeting-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.meeting-card:hover { border-color: var(--green-700); transform: translateY(-4px); box-shadow: var(--shadow); }
.meeting-card-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.meeting-card h3 { margin-bottom: 8px; }
.meeting-card-summary { color: var(--ink-600); margin-bottom: 14px; }

/* ---------- student editorial cards ----------
   Rendered by js/editorials-feed.js. Each card starts collapsed: byline stays
   visible, the body is clamped to two lines. Clicking the card (or the toggle)
   expands it in place. No JS: the .editorial-body clamp still applies, so the
   fallback is a tidy excerpt rather than a wall of text. */
.editorial-card { cursor: pointer; scroll-margin-top: 140px; }
.editorial-byline {
  color: var(--ink-600);
  font-size: 14px;
  margin-bottom: 12px;
}
.editorial-body {
  color: var(--ink-600);
  white-space: pre-wrap;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editorial-card.open { cursor: default; }
.editorial-card.open .editorial-body {
  display: block;
  overflow: visible;
  cursor: auto;
}
.editorial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
  cursor: pointer;
}
.editorial-toggle:hover { color: var(--navy-800); }
.editorial-chevron { transition: transform .25s var(--ease); }
.editorial-card.open .editorial-chevron { transform: rotate(180deg); }

.item-block {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.item-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--green-100);
  color: var(--green-900);
  padding: 2px 8px;
  border-radius: 3px;
}
.outcome {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
}
.outcome.passed { background: rgba(26,125,100,0.14); color: var(--green-700); }
.outcome.failed { background: rgba(179,69,44,0.12); color: var(--red-600); }
.outcome.deferred { background: var(--gold-100); color: var(--gold-700); }

.why-matters {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}
.why-matters .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-700);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.sample-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ink-900);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 12px;
}

/* ---------- commissioner roster ---------- */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.roster-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.roster-card:hover { border-color: var(--green-700); transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.roster-card .district {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roster-card .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 6px 0 4px; }
.roster-card .role {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  background: var(--gold-100);
  color: var(--gold-700);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.roster-card a { font-size: 14px; }

/* ---------- article ---------- */
.article-body {
  max-width: 700px;
}
.byline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-400);
  margin-bottom: 20px;
}
.article-body h2 {
  margin-top: 2em;
  font-size: 23px;
}
.article-body p {
  font-size: 17px;
}
.sources-list {
  margin: 0;
  padding-left: 20px;
}
.sources-list li { margin-bottom: 8px; font-size: 15px; }

/* ---------- district finder ---------- */
.district-search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.district-search-form input {
  flex: 1 1 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  background: var(--paper-raised);
}
.district-search-form input:focus { border-color: var(--green-700); }

.district-status {
  min-height: 24px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--ink-600);
}
.district-status.success {
  padding: 12px 16px;
  background: var(--green-100);
  border-left: 4px solid var(--green-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-900);
}
.district-status.error {
  padding: 12px 16px;
  background: var(--gold-100);
  border-left: 4px solid var(--red-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-900);
}

#district-map {
  position: relative;
  z-index: 1;
  height: 480px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--green-100);
}

.district-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
}
.district-legend-item { display: flex; align-items: center; gap: 8px; }
.district-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- founders ---------- */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.founder-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.founder-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: var(--shadow); }
.founder-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--green-100);
}
.founder-photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  color: var(--green-700);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 20px;
}
.founder-body { padding: 22px; }
.founder-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.founder-role {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-700);
  margin: 4px 0 14px;
  display: block;
}
.founder-body p { font-size: 15px; color: var(--ink-600); margin-bottom: 12px; }
.founder-connect {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.founder-connect .founder-connect-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--green-700);
  text-decoration: none;
  background: var(--paper);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.founder-link svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.founder-link:hover,
.founder-link:focus-visible {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  text-decoration: none;
}
.disclosure-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gold-100);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--ink-900);
}

/* ---------- stat strip ---------- */
.stat-strip { padding: 8px 0 40px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--green-700);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}

/* ---------- pull quote ---------- */
.pull-quote {
  border-left: 4px solid var(--gold-600);
  padding: 4px 0 4px 28px;
  margin: 28px 0;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: 12px;
  max-width: 42ch;
}
.pull-quote cite {
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

/* ---------- social icons ---------- */
.social-icons { display: flex; align-items: center; gap: 8px; }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  flex-shrink: 0;
}
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.social-icon:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.site-footer .social-icon { border-color: rgba(255,255,255,0.3); }
.site-footer .social-icon:hover { background: rgba(255,255,255,0.12); border-color: var(--gold-600); color: var(--gold-600); }

/* ---------- follow section ---------- */
.follow-section { padding: 40px 0; text-align: center; }
.follow-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.follow-section .social-icon {
  border-color: var(--green-700);
  color: var(--green-700);
  width: 44px;
  height: 44px;
}
.follow-section .social-icon svg { width: 20px; height: 20px; }
.follow-section .social-icon:hover { background: var(--green-700); color: #fff; }

/* ---------- partner card ---------- */
.partner-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.partner-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow); }
.partner-card img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}
.partner-card h3 { margin-bottom: 6px; }
.partner-card p { color: var(--ink-600); font-size: 15px; }
.partner-card p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .partner-card { grid-template-columns: 1fr; text-align: center; }
  .partner-card img { max-width: 180px; margin: 0 auto; }
}

/* ---------- scroll reveal ----------
   Only engages once js/main.js adds .animate-on to <body> (IntersectionObserver
   supported). No JS, or JS fails: everything just stays visible, nothing hides
   by default. */
.animate-on .card,
.animate-on .meeting-card,
.animate-on .roster-card,
.animate-on .founder-card,
.animate-on .partner-card,
.animate-on .stat-item,
.animate-on .faq-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.animate-on .card.in,
.animate-on .meeting-card.in,
.animate-on .roster-card.in,
.animate-on .founder-card.in,
.animate-on .partner-card.in,
.animate-on .stat-item.in,
.animate-on .faq-item.in {
  opacity: 1;
  transform: none;
}
.card-grid .card:nth-child(2), .roster-grid .roster-card:nth-child(2), .founders-grid .founder-card:nth-child(2), .stat-grid .stat-item:nth-child(2) { transition-delay: .08s; }
.card-grid .card:nth-child(3), .roster-grid .roster-card:nth-child(3), .founders-grid .founder-card:nth-child(3), .stat-grid .stat-item:nth-child(3) { transition-delay: .16s; }
.card-grid .card:nth-child(4), .roster-grid .roster-card:nth-child(4), .stat-grid .stat-item:nth-child(4) { transition-delay: .24s; }
.card-grid .card:nth-child(5), .roster-grid .roster-card:nth-child(5) { transition-delay: .32s; }
.card-grid .card:nth-child(6), .roster-grid .roster-card:nth-child(6) { transition-delay: .4s; }

/* ---------- seal ---------- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
}
.seal {
  position: relative;
  width: min(240px, 60vw);
}
.seal-ring {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow: var(--shadow);
  animation: seal-spin 50s linear infinite;
}
.seal-gator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
@keyframes seal-spin { 100% { transform: rotate(360deg); } }
.seal-float {
  position: absolute;
  z-index: 6;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  text-align: center;
  animation: seal-float 6s ease-in-out infinite;
}
.seal-float .n { font-weight: 700; color: var(--green-700); font-size: 16px; line-height: 1; }
.seal-float .l { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); margin-top: 2px; }
.sf-1 { top: -10px; left: -28px; animation-delay: 0s; }
.sf-2 { bottom: -10px; right: -28px; animation-delay: .8s; animation-duration: 7s; }
@keyframes seal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 480px) {
  .seal-float { display: none; }
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item h3 { margin-bottom: 8px; }
.faq-item p { color: var(--ink-600); margin-bottom: 0; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  background: var(--paper-raised);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-700); }

.notice {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy-600);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 15px;
  color: var(--ink-600);
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,0.75);
  padding: 40px 0 32px;
  margin-top: 40px;
  font-size: 14px;
}
.site-footer a { color: rgba(255,255,255,0.9); }
.site-footer a:hover { color: var(--gold-600); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.footer-grid h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-disclaimer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ---------- utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- cities ---------- */
/* Status badges follow the .outcome idiom above: mono, uppercase, tinted by
   meaning. 'active' borrows the passed-green, 'team-needed' the deferred-gold
   (an invitation, not an error), 'forming' the navy of in-progress notices. */
.city-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  margin-bottom: 10px;
}
.city-status-active { background: rgba(26,125,100,0.14); color: var(--green-700); }
.city-status-forming { background: rgba(44,77,122,0.12); color: var(--navy-600); }
.city-status-needed { background: var(--gold-100); color: var(--gold-700); }

/* City cards reuse .card wholesale; these rules only handle the parts .card
   doesn't have: keeping link-cards readable and pinning the CTA line to the
   bottom so a short blurb doesn't leave it floating mid-card. */
.city-card {
  display: flex;
  flex-direction: column;
}
.city-card .city-card-cta {
  margin-top: auto;
  padding-top: 12px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 15px;
}
a.city-card .city-card-cta { color: var(--green-700); }

.city-section-empty {
  font-size: 14px;
  color: var(--ink-400);
  font-style: italic;
  margin-bottom: 0;
}
/* .city-card is a column flex container, which would stretch the inline-block
   badge to full card width; pin it to its content size instead. */
.city-card .city-status { align-self: flex-start; }

/* =========================================================================
   Last-verified badge
   -------------------------------------------------------------------------
   Every data-heavy page already recorded when its facts were last checked,
   but buried in a paragraph of prose at the bottom. Surfacing it as a badge
   near the heading is the cheapest credibility win on the site: the reader
   sees the freshness of the data before they read the data.
   ========================================================================= */
.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--green-900);
  background: var(--green-100);
  border: 1px solid rgba(20, 102, 82, 0.28);
  padding: 5px 12px;
  border-radius: 999px;
}
.verified-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
  flex: 0 0 auto;
}
.verified-badge .vb-date { font-weight: 400; letter-spacing: 0.03em; }
/* For a page whose data has a known review cadence that has lapsed. Set by
   hand in the markup -- nothing here computes staleness. */
.verified-badge.stale {
  background: var(--gold-100);
  color: var(--gold-700);
  border-color: rgba(192, 138, 46, 0.4);
}
.verified-badge.stale::before { background: var(--gold-600); }
/* On a dark hero the paper-toned badge needs its own treatment. */
.hero .verified-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.92);
}
.hero .verified-badge::before { background: var(--gold-600); }

/* =========================================================================
   Structured agenda-item record
   -------------------------------------------------------------------------
   The one-line fingerprint above every item:
     8A1 · Ordinance · $31M · Sponsored by Higgins · Passed 12-1 · Transit
   Fields are individually optional -- an item with none of them renders the
   same prose card it always did.
   ========================================================================= */
.item-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-600);
  margin-bottom: 10px;
}
.item-record .sep {
  opacity: 0.4;
  user-select: none;
}
.item-record .rec-amount {
  color: var(--gold-700);
  font-weight: 700;
}
.item-record .rec-leg {
  color: var(--ink-900);
  font-weight: 700;
}
.rec-topic {
  display: inline-block;
  background: var(--navy-800);
  color: #fff;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.rec-district {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-600);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
}

/* =========================================================================
   Sourcing: official record above, additional reporting below
   -------------------------------------------------------------------------
   The policy is that every item is anchored to the county's own record.
   Journalism sits underneath it, attributed to its outlet, never in place of
   it -- and an item missing its official record says so out loud rather than
   quietly showing a news link as though it were the primary source.
   ========================================================================= */
.sources {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  font-size: 14px;
}
.source-group + .source-group { margin-top: 10px; }
.source-group > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
}
.source-group.official > .label { color: var(--green-700); }
.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.source-list li { margin: 0; }
.source-list .outlet {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 5px;
}
.source-missing {
  color: var(--red-600);
  font-style: italic;
  font-size: 13px;
}

/* =========================================================================
   Meeting Tracker filters
   -------------------------------------------------------------------------
   Not sticky on purpose: .site-header is sticky and animates its own height
   as the newsletter bar collapses, so any fixed top offset here would drift.
   ========================================================================= */
.filter-bar {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.filter-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-search input[type="search"] {
  flex: 1 1 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  background: var(--paper);
}
.filter-search input[type="search"]:focus { border-color: var(--green-700); }
.filter-group { margin-top: 16px; }
.filter-group > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--green-700); color: var(--green-900); }
.chip[aria-pressed="true"] {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.filter-selects label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
}
.filter-selects select,
.filter-selects input[type="date"] {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink-900);
}
.filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-600);
}
.filter-count strong { color: var(--ink-900); }
.filter-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--green-700);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.filter-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-600);
  background: var(--paper-raised);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* =========================================================================
   Roll call
   -------------------------------------------------------------------------
   Collapsed by default: thirteen names is a lot of vertical space to spend
   on every item, and most readers want the tally, not the names.
   ========================================================================= */
.rollcall-toggle {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  cursor: pointer;
}
.rollcall-toggle:hover { border-color: var(--green-700); color: var(--green-900); }
.rollcall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 5px;
  margin-top: 12px;
}
.rollcall[hidden] { display: none; }
.rollcall-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.rollcall-row .rc-name { color: var(--ink-900); }
.rollcall-row .rc-name .rc-district {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-right: 6px;
}
.rc-vote {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.rc-vote.yes { background: rgba(26,125,100,0.14); color: var(--green-700); }
.rc-vote.no { background: rgba(179,69,44,0.12); color: var(--red-600); }
.rc-vote.abstain,
.rc-vote.recused { background: var(--gold-100); color: var(--gold-700); }
.rc-vote.absent { background: var(--paper); color: var(--ink-400); border: 1px solid var(--line); }

/* =========================================================================
   Homepage briefing
   -------------------------------------------------------------------------
   Replaces the "what this project is" block above the fold. The mission
   statement moves further down the page; what a returning visitor wants at
   the top is what changed since they last looked.
   ========================================================================= */
.briefing {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-600);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.briefing .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-700);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.briefing-line {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  color: var(--ink-900);
  margin: 0;
}
.briefing-line .sep { color: var(--gold-600); margin: 0 6px; }
.briefing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-600);
}
.briefing-next {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--green-100);
  color: var(--green-900);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.briefing-empty { color: var(--ink-600); font-size: 15px; margin: 0; }

/* =========================================================================
   Homepage district finder
   -------------------------------------------------------------------------
   Same geocode + point-in-polygon core as the Get Involved map, without
   Leaflet: an address in, a personal briefing out.
   ========================================================================= */
.hero-finder {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.hero-finder h2 {
  font-size: 21px;
  margin: 0 0 6px;
}
.hero-finder .finder-sub {
  color: var(--ink-600);
  font-size: 15px;
  margin: 0 0 16px;
}
.district-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.district-panel[hidden] { display: none; }
.district-panel-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.district-panel-head .dp-district {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: var(--green-700);
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
}
.district-panel-head .dp-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
}
.district-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .district-panel-grid { grid-template-columns: 1fr 1fr; }
}
.dp-block > .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.dp-block p { margin: 0; font-size: 15px; color: var(--ink-600); }
.dp-votes { list-style: none; margin: 0; padding: 0; }
.dp-votes li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.dp-votes li:last-child { border-bottom: none; }
.dp-votes .dp-vote-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  display: block;
  margin-top: 2px;
}
.dp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* =========================================================================
   Subscription preferences
   ========================================================================= */
.pref-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.pref-fieldset legend {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}
.pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.pref-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-900);
}
.pref-check:hover { border-color: var(--green-700); }
.pref-check input { accent-color: var(--green-700); margin: 0; }
.pref-check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
}
.pref-check:has(input:focus-visible) { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.pref-note {
  font-size: 14px;
  color: var(--ink-600);
  margin: 12px 0 0;
}

/* =========================================================================
   Commissioner profile
   ========================================================================= */
.profile-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 720px) {
  .profile-head { grid-template-columns: 180px 1fr; }
}
.profile-photo {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--green-100);
}
.profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.profile-facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
  margin-bottom: 3px;
}
.profile-facts dd {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink-900);
}
.vote-history { list-style: none; margin: 0; padding: 0; }
.vote-history li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.vote-history li:last-child { border-bottom: none; }
.vote-history .vh-item { flex: 1 1 auto; }
.vote-history .vh-title { color: var(--ink-900); font-size: 15px; display: block; }
.vote-history .vh-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  display: block;
  margin-top: 3px;
}
.vote-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.vote-summary .vs-stat {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 96px;
}
.vote-summary .vs-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--green-900);
  display: block;
  line-height: 1.1;
}
.vote-summary .vs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  font-weight: 700;
}

/* A data section that has nothing in it yet says so plainly, rather than
   rendering an empty container that reads as a broken page. */
.data-pending {
  padding: 20px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-600);
  font-size: 15px;
}