/* ==========================================================================
   Sycamore Strong (CLASS — Community Leadership for a Strong Sycamore)
   Palette/type ported from the SycamoreSchoolsVoterCampaign design export
   (issue #3) — see that zip's Home.dc.html / SiteNav.dc.html for source.
   ========================================================================== */

:root {
  --ink: oklch(20% 0.02 30);
  --ink-2: oklch(38% 0.02 30);
  --ink-3: oklch(50% 0.02 30);

  --bg: oklch(98% 0.008 75);
  --paper: #FFFFFF;
  --rule: oklch(88% 0.015 75);
  --rule-soft: oklch(93% 0.01 75);

  --accent: #0b7a3b;                   /* Sycamore Aviators kelly green */
  --accent-2: #075c2c;                 /* darker green, hover/pressed */
  --accent-tint: #e7f3ec;              /* pale green wash */

  --gold: #F0B323;                     /* Sycamore gold -- logo yellow */
  --gold-tint: #fbf1da;
  --green: var(--accent);
  --green-tint: var(--accent-tint);
  --red: #B23434;

  --radius: 10px;
  --radius-lg: 16px;
  --tap: 44px;
  --maxw: 1200px;

  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.01em; }

.app { max-width: var(--maxw); margin: 0 auto; background: var(--paper); min-height: 100vh; }

/* === Header / nav ======================================================= */
header.site {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 24px; background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
}
/* Masthead band -- green/yellow/white/white/green/yellow, lifted from the
   Yes for Sycamore logo background (colors only, not the seal/leaf artwork).
   Thick bands are 12x the thin ones, stacked top-to-bottom same as the
   source image. Anchored to header.site (its positioning context) with
   left/right/top:0 so it bleeds edge-to-edge through header's own padding
   instead of being inset by it -- that's what makes it run "side to side."
   site-title-row is forced onto its own full-width line below so the logo
   sits on top of the band, while site-nav wraps to the next line and stays
   on the plain header background (green/gold behind small nav text would be
   a contrast problem the source artwork doesn't have to deal with). */
header.site::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 76px;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--accent) 0%, var(--accent) 42.857%,
    var(--gold) 42.857%, var(--gold) 46.429%,
    #ffffff 46.429%, #ffffff 53.571%,
    var(--accent) 53.571%, var(--accent) 57.143%,
    var(--gold) 57.143%, var(--gold) 100%);
}
.site-title-row { display: flex; align-items: center; flex-basis: 100%; padding: 14px 0; }
.site-title { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.site-title a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.site-title-text { text-shadow: 0 1px 3px rgba(0,0,0,.55); position: relative; top: 9px; }
.site-logo { width: 40px; height: 40px; border-radius: 50%; display: block; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 14px; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
.nav-sep { color: var(--rule); }
.nav-user { font-weight: 600; color: var(--ink) !important; }

.nav-toggle {
  display: none; margin-left: auto; background: rgba(255,255,255,.3); border: none; cursor: pointer;
  border-radius: 8px;
  width: var(--tap); height: var(--tap); padding: 8px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease; }

/* === Hero ============================================================== */
.hero { padding: 30px 24px 24px; border-bottom: 1px solid var(--rule); }
.hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-2); background: var(--accent-tint);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; }
.hero h1 { font-size: 34px; line-height: 1.12; margin-bottom: 10px; max-width: 26ch; }
.hero .deck { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hero .cta-row { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }

/* === Layout helpers ==================================================== */
main { padding: 20px 24px 36px; }
h2 { font-size: 22px; margin-bottom: 14px; }
h3 { font-size: 17px; margin-bottom: 8px; }
.meta { color: var(--ink-3); font-size: 13px; }
.section { margin-bottom: 22px; }
.section + .section { padding-top: 14px; border-top: 1px solid var(--rule-soft); }

/* === Inline no-chrome button (e.g. an "x" to remove one item from a list) */
.link-btn { background: none; border: none; padding: 0 0 0 4px; margin: 0; color: inherit;
  font: inherit; cursor: pointer; opacity: 0.6; }
.link-btn:hover { opacity: 1; color: var(--red); }

/* === Text-link CTAs (replaces marketing "pill" buttons) ================= */
.link-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid color-mix(in oklab, var(--accent) 35%, transparent);
  padding-bottom: 1px; font-size: 16px;
}
.link-cta:hover { border-bottom-color: var(--accent); }
.link-cta::after { content: "\2192"; font-weight: 400; }
.cta-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }

/* === Buttons (form actions only — squared, not pills) =================== */
.btn-primary, .btn-secondary, .btn-sm, .btn-danger, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; text-decoration: none;
  min-height: var(--tap); padding: 0 20px; font-size: 15px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-secondary { background: var(--paper); color: var(--ink); border: 1.5px solid var(--rule); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-danger { background: var(--paper); color: var(--red); border: 1.5px solid var(--red); }
.btn-danger:hover { background: #FBEAEA; }
.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: #fff; }

/* === Forms ============================================================== */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-weight: 400; color: var(--ink-3); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  min-height: var(--tap); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 8px 12px; font-size: 15px; font-family: var(--sans); background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 90px; padding-top: 10px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.field-row .field { flex: 1; min-width: 180px; }

.address-typeahead-wrap { position: relative; }
.address-typeahead-hint { margin-top: 4px; }
.address-suggestions { position: relative; }
.address-suggestions-list {
  list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto;
}
.address-suggestion {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none;
  border-radius: var(--radius-sm, 6px); font-size: 14px; font-family: var(--sans); color: var(--ink); cursor: pointer;
}
.address-suggestion:hover, .address-suggestion:focus { background: var(--accent-tint); outline: none; }
/* Checkbox/radio options: the ~44px tap target should be the whole label (native
   click-through-to-input behavior already makes it so), not the tiny glyph itself —
   giving the input its own min-height:44px instead produced a tall box disconnected
   from its label text on narrow screens. */
.checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.checkbox-row label { display: flex; align-items: center; gap: 6px; font-size: 14px;
  min-height: var(--tap); padding: 4px 0; }
.field input[type="checkbox"], .field input[type="radio"] { width: 18px; height: 18px; flex: none; vertical-align: middle; margin-right: 4px; }

.auth-card, .card {
  max-width: 420px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 26px;
}
.card-wide { max-width: none; }

/* === Notices ============================================================ */
.notice { border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.notice.success { background: var(--green-tint); color: var(--accent-2); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
.notice.error { background: #FBEAEA; color: var(--red); border: 1px solid #EFC2C2; }

/* === Tables ============================================================= */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); }
.data-table th { color: var(--ink-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr:hover td { background: var(--accent-tint); }
.table-scroll { overflow-x: auto; }
.notes-cell { display: block; width: 100%; min-width: 360px; resize: vertical; font: inherit; font-size: 13px; }
.edit-input { width: 100%; min-width: 130px; font: inherit; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 6px; }

/* === Tabs (CSS-only, radio-driven) ====================================== */
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.tab-label {
  cursor: pointer; padding: 8px 16px; font-weight: 600; font-size: 14px;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-label:hover { color: var(--ink); }
.tab-panel { display: none; }
#tab-internal:checked ~ .tab-nav label[for="tab-internal"],
#tab-public:checked ~ .tab-nav label[for="tab-public"] { color: var(--accent); border-bottom-color: var(--accent); }
#tab-internal:checked ~ #panel-internal,
#tab-public:checked ~ #panel-public { display: block; }

/* === Badges / status pills ============================================= */
.badge { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; }
.badge-new { background: var(--gold-tint); color: #8A6A1F; }
.badge-contacted { background: var(--green-tint); color: var(--accent-2); }
.badge-active { background: var(--accent-tint); color: var(--accent-2); }
.badge-inactive { background: var(--rule-soft); color: var(--ink-3); }
.badge-todo { background: var(--rule-soft); color: var(--ink-2); }
.badge-in_progress { background: var(--gold-tint); color: #8A6A1F; }
.badge-done { background: var(--green-tint); color: var(--accent-2); }
.badge-requested { background: var(--gold-tint); color: #8A6A1F; }
.badge-approved { background: var(--accent-tint); color: var(--accent-2); }
.badge-delivered { background: var(--green-tint); color: var(--accent-2); }
.badge-overdue { background: #FBEAEA; color: var(--red); }

.map-accuracy-badge { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 999px;
  background: var(--rule-soft); color: var(--ink-3); vertical-align: middle; }
.map-accuracy-badge.house-level { background: var(--green-tint); color: var(--accent-2); }

/* === Cards: events / dashboard stats =================================== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px; background: var(--paper); }
.stat-card .num { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--accent); }
.stat-card .label { font-size: 13px; color: var(--ink-3); }

.event-list { display: flex; flex-direction: column; gap: 12px; }
.event-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; }
.event-card a { text-decoration: none; color: var(--ink); }
.event-card h3 { margin-bottom: 4px; }
.event-card .event-type { text-transform: capitalize; color: var(--accent); font-weight: 600; font-size: 13px; }

/* === Kanban (tasks) ===================================================== */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kanban-col { background: var(--rule-soft); border-radius: var(--radius-lg); padding: 12px; }
.kanban-col h3 { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.kanban-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; margin-top: 10px; font-size: 14px; }
.kanban-card .meta { display: block; margin-top: 6px; }

/* === Collapsible ========================================================= */
details.collapsible { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 20px; }
details.collapsible summary { cursor: pointer; font-weight: 600; color: var(--accent); }
details.collapsible[open] summary { margin-bottom: 14px; }

/* === Nav dropdown (CSS-only, no JS) ===================================== */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-label {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown-label:hover { color: var(--accent); }
.nav-caret { font-size: 10px; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; z-index: 60; min-width: 220px;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu-inner {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(32, 20, 23, 0.14); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 500; }
.nav-dropdown-menu a:hover { background: var(--accent-tint); }

/* === Footer ============================================================= */
footer.site { padding: 28px 24px; text-align: center; border-top: 1px solid var(--rule); margin-top: 24px; }
footer.site p { color: var(--ink-3); font-size: 13px; margin-top: 8px; }

@media (max-width: 640px) {
  .kanban { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  header.site { padding: 12px 16px; }
  main { padding: 16px 16px 32px; }
}

.paid-for-by {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  margin-bottom: 6px;
}

blockquote.ballot-language {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 8px 0;
}

/* === Cost calculator: info (left) + slider tool (right) ================= */
.cost-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cost-info h2 { margin-top: 0; }
.cost-info p { color: var(--ink-2); margin-bottom: 14px; }
.cost-tool {
  background: var(--accent-tint); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 88px;
}
.cost-tool .slider-value { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--ink); }
.cost-tool input[type="range"] { width: 100%; margin: 14px 0 6px; accent-color: var(--accent); height: 28px; }
.cost-tool .range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.cost-headline { font-family: var(--display); font-size: 40px; font-weight: 700; color: var(--accent); margin: 18px 0 2px; }
.cost-sub { display: flex; gap: 20px; margin-top: 10px; }
.cost-sub .num { font-family: var(--display); font-size: 20px; font-weight: 700; }
.cost-sub .label { font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) { .cost-layout { grid-template-columns: 1fr; } .cost-tool { position: static; } }

/* === FAQ: search + collapsible ========================================== */
.faq-search {
  width: 100%; max-width: 460px; min-height: var(--tap);
  border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 8px 14px; font-size: 15px; font-family: var(--sans); margin-bottom: 20px;
}
.faq-search:focus { outline: none; border-color: var(--accent); }
details.faq-item { border-bottom: 1px solid var(--rule); padding: 4px 0; }
details.faq-item > summary {
  cursor: pointer; list-style: none; padding: 14px 28px 14px 2px; position: relative;
  font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink);
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after {
  content: "+"; position: absolute; right: 6px; top: 12px; font-size: 20px; color: var(--accent); font-weight: 400;
}
details.faq-item[open] > summary::after { content: "\2212"; }
details.faq-item > div { padding: 0 2px 16px; color: var(--ink-2); line-height: 1.6; }
.faq-noresults { color: var(--ink-3); font-style: italic; padding: 12px 2px; display: none; }

/* === Yard-sign address reveal (CSS-only) =============================== */
.yard-sign-block { margin-top: 4px; }
.reveal-field { display: none; }
.reveal-toggle:checked ~ .reveal-field { display: flex; }

/* === Levy composition bar (visual for "the ask") ======================= */
.mill-bar-fig { margin: 8px 0 4px; }
.mill-bar { display: flex; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
.mill-seg { display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; padding: 4px 6px; text-align: center; min-width: 0; }
.mill-seg .mill-n { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.05; }
.mill-seg .mill-l { font-size: 11px; opacity: 0.95; }
.mill-op { background: var(--accent); }
.mill-pi { background: var(--gold); color: #3a2c07; }

/* === Generic stacked "split" bar (funding sources / where money goes) === */
.finance-fig { margin: 14px 0 6px; }
.split-bar { display: flex; height: 46px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule); }
.split-seg { display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 14px; min-width: 0;
  padding: 2px 4px; text-align: center; }
.split-seg span { text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.split-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex;
  flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.split-legend li { display: flex; align-items: center; gap: 7px; }
.split-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.split-legend b { color: var(--ink); font-weight: 600; }

/* Big single-number callouts for the funding/summary sections */
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 6px 0 4px; }
.fact { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px;
  background: var(--paper); }
.fact .n { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--accent);
  line-height: 1.05; }
.fact .l { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* "Short version" Q blocks on the levy-in-a-minute page */
.minute-q { border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; margin: 22px 0; }
.minute-q h2 { font-size: 20px; margin-bottom: 8px; }
.minute-q p { color: var(--ink-2); }

/* === Forecast reserve chart (real data from the district's forecast) === */
.forecast-chart { display: block; width: 100%; height: auto; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper); }

/* === Forecast milestone timeline (legacy; kept for any reuse) =========== */
.forecast-fig { margin: 10px 0 4px; }
.forecast-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; position: relative; padding: 6px 0 0; }
.forecast-steps::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%;
  height: 2px; background: var(--rule); }
.fstep { text-align: center; position: relative; padding-top: 34px; }
.fstep::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.fstep-warn::before { background: var(--gold); }
.fstep-bad::before { background: var(--red); }
.fstep-year { font-family: var(--display); font-weight: 700; font-size: 15px; }
.fstep-label { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 640px) {
  .forecast-steps { grid-template-columns: 1fr; gap: 6px; }
  .forecast-steps::before { display: none; }
  .fstep { padding: 4px 0 4px 28px; text-align: left; }
  .fstep::before { top: 6px; left: 6px; transform: none; }
}

/* === Cost calculator: homestead toggle ================================= */
.homestead-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font-size: 14px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.homestead-check input { margin-top: 2px; flex: none; }
.homestead-result { margin-top: 8px; }

/* === Fair School Funding Plan flow diagram ============================== */
.flow-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 4px; text-align: center; }
.flow-box {
  border: 1.5px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper);
  padding: 14px 18px; font-family: var(--display); font-weight: 700; font-size: 15px;
  display: flex; flex-direction: column; gap: 4px; max-width: 320px;
}
.flow-box .meta { font-family: var(--sans); font-weight: 400; font-size: 12px; }
.flow-arrow { font-size: 20px; color: var(--ink-3); line-height: 1; }
.flow-split { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.flow-state { border-color: color-mix(in oklab, var(--gold) 55%, var(--rule)); background: var(--gold-tint); }
.flow-local { border-color: color-mix(in oklab, var(--accent) 45%, var(--rule)); background: var(--accent-tint); }
.flow-note { font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: var(--ink-2); max-width: 460px; }

/* === "Why vote yes" persona cards ======================================= */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 8px; }
.card.persona { max-width: none; margin: 0; }
.card.persona h3 { margin-bottom: 10px; color: var(--accent); }
.card.persona ul { margin: 0; padding-left: 18px; }
.card.persona li { margin-bottom: 8px; line-height: 1.5; font-size: 15px; color: var(--ink-2); }
.card.persona li:last-child { margin-bottom: 0; }

/* === Home page: hero photo, logo+CTA block, bullet lists =============== */
.hero-photo { display: block; max-width: 100%; width: auto; height: auto; max-height: 320px;
  border-radius: var(--radius-lg); margin: 16px auto 0; border: 1px solid var(--rule); }

.yard-sign-banner { display: flex; align-items: center; justify-content: center;
  background: var(--gold-tint); padding: 9px 16px; overflow-x: auto; }
.yard-sign-banner p { margin: 0; font-size: 14px; white-space: nowrap; }

/* Time-boxed campaign-kickoff promo -- bolder/higher-contrast than the
   yard-sign banner above it so the two don't blur together; disappears on
   its own (see _KICKOFF_BANNER_CUTOFF in main.py), delete alongside that
   once the event has passed. */
.kickoff-banner { display: flex; align-items: center; justify-content: center;
  background: var(--accent); padding: 9px 16px; overflow-x: auto; }
.kickoff-banner p { margin: 0; font-size: 14px; white-space: nowrap; color: #fff; font-weight: 600; }
.kickoff-banner a { color: var(--gold); text-decoration: underline; font-weight: 700; }
.kickoff-banner a:hover { color: #fff; }
/* Longer than the yard-sign banner's text -- nowrap ran off-screen on
   narrow phones (reported on mobile Chrome) instead of just wrapping.
   Let it break onto ~2 lines there instead. */
@media (max-width: 480px) {
  .kickoff-banner p { white-space: normal; text-align: center; line-height: 1.4; }
}

.cta-block { display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--accent-tint);
  border-radius: var(--radius-lg); margin-bottom: 22px; }
.cta-block-logo { width: 64px; height: 64px; border-radius: 50%; flex: none; display: block; }
.cta-block-body { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; flex: 1; }
.cta-block h2 { margin-bottom: 0; }
.cta-block-buttons { display: flex; gap: 24px; flex-wrap: wrap; }
.cta-block-buttons .btn-primary, .cta-block-buttons .btn-secondary { padding: 0 28px; font-size: 16px; }
/* Sycamore Aviators-themed CTAs -- a little paper-plane lift on hover, icon
   banked like it's climbing out. Scoped to this block, not the shared
   .btn-primary/.btn-secondary (those stay squared per the note above). */
.cta-block-buttons a { gap: 8px; border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease; }
.cta-block-buttons a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.cta-block-buttons .btn-icon { flex: none; transform: rotate(-8deg); }

/* "Vote YES on <election_date>" wrapped to 3 lines on narrow phones (the
   logo squeezed it into a narrow column) and the buttons wrapped below
   that, pushing them well down the page -- feedback said Donate/Volunteer
   need to be closer to the top. Shrinking the logo instead of moving it
   keeps the heading+logo on one row (no extra row added, unlike stacking
   the logo above would), while giving the heading enough width to
   actually center in and fit on one line. Tighter padding/margins/gaps
   throughout the block so what's left is as compact as the buttons
   themselves allow. */
@media (max-width: 640px) {
  .cta-block { gap: 14px; padding: 10px 16px; margin-bottom: 16px; }
  .cta-block-logo { width: 40px; height: 40px; }
  .cta-block-body { gap: 8px; }
  .cta-block-body h2 { flex: 1; text-align: center; font-size: 16px; margin-bottom: 0; }
  .cta-block-buttons { width: 100%; justify-content: center; gap: 8px; }
  .cta-block-buttons .btn-primary, .cta-block-buttons .btn-secondary { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .cta-block-buttons .btn-icon { width: 15px; height: 15px; }
}

.bullet-list { list-style: none; margin: 4px 0; display: flex; flex-direction: column; gap: 14px; }
.bullet-list li { padding-left: 30px; position: relative; line-height: 1.5; color: var(--ink-2); }
.bullet-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.bullet-list li strong { color: var(--ink); }

.mid-photo { display: block; max-width: 100%; width: auto; height: auto; max-height: 220px;
  border-radius: var(--radius-lg); margin: 8px auto 20px; border: 1px solid var(--rule); }

/* === Photo carousels (admin-managed section photos, #118) =============== */
.photo-carousel { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.photo-carousel-slide { display: none; }
.photo-carousel-slide.active { display: block; }
.photo-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.photo-carousel-arrow:hover { background: rgba(0, 0, 0, 0.65); }
.photo-carousel-prev { left: 12px; }
.photo-carousel-next { right: 12px; }

/* === Admin: Site Images (#118) =========================================== */
.photo-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-top: 14px; }
.photo-admin-card { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); }
.photo-admin-card.inactive { opacity: 0.55; }
.photo-admin-card img { display: block; width: 100%; height: 130px; object-fit: cover; }
.photo-admin-meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }
.photo-admin-meta .meta { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-admin-actions { display: flex; gap: 6px; padding: 10px; flex-wrap: wrap; }

/* === How-to-vote key dates ============================================== */
.vote-dates { list-style: none; margin: 4px 0 12px; }
.vote-dates li { padding: 10px 0 10px 18px; border-left: 3px solid var(--accent);
  margin-bottom: 10px; line-height: 1.55; }
.vote-dates li strong { font-family: var(--display); }

/* === Mobile nav ========================================================= */
@media (max-width: 760px) {
  /* flex-wrap:nowrap overrides the desktop header.site rule's flex-wrap:wrap
     (never reset at this breakpoint before). With header.site.nav-open below
     capping the header's height, a wrapping column-direction flex container
     pushes any child that doesn't fit into a second *line* -- rendered as a
     second column shoved off to the right of the viewport -- instead of
     just letting that child overflow vertically. Same reasoning applies to
     .site-nav's own flex-wrap below, in case it ever gets a height cap too. */
  header.site { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .site-title-row { width: 100%; flex-basis: auto; flex-shrink: 0; }
  .nav-toggle { display: flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; font-size: 15px; }
  /* header.site is position:sticky, pinned to the top of the viewport -- so
     once the open nav (title-row + full item list, including staff/admin
     links) grows taller than the screen, the overflow at the bottom has no
     way to become reachable: the page's own scroll can't move a sticky
     element past its stuck position, and the header itself was never given
     an internal scroll mechanism. Cap the open header to the viewport and
     let it scroll internally instead, pinning the title row (with the close
     button) to the top of that internal scroll so it's always reachable and
     masks the nav list scrolling underneath it. */
  header.site.nav-open {
    max-height: 100vh; max-height: 100dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  header.site.nav-open .site-nav { display: flex; }
  header.site.nav-open .site-title-row {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg);
  }
  .site-nav a { padding: 12px 0; min-height: var(--tap); display: flex; align-items: center; }
  .nav-sep { display: none; }
  .cta-row { gap: 18px; }
  /* Bump link-style CTAs (in-page quick-nav rows, bottom-of-page next-step links)
     closer to the ~44px tap-target guideline — at the default font size their
     hit area was only ~27px tall. */
  .link-cta { padding: 10px 0; }

  header.site.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.site.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  header.site.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dropdowns rely on :hover, which touch screens don't have reliably — so on
     mobile, render the group as an always-expanded label + indented links
     instead of a hidden hover menu. */
  .nav-dropdown { display: contents; }
  .nav-dropdown-label { width: 100%; padding: 8px 0 0; pointer-events: none; font-weight: 700; color: var(--ink); }
  .nav-caret { display: none; }
  .nav-dropdown-menu {
    display: block; position: static; transform: none; padding-top: 0; min-width: 0;
  }
  .nav-dropdown-menu-inner {
    background: none; border: none; box-shadow: none; padding: 0 0 0 12px; gap: 0;
  }
  .nav-dropdown-menu a { padding: 10px 0; min-height: var(--tap); display: flex; align-items: center; }
}