/* CivicPulse shared design system (Oct 2026).
   Built with the ui-ux-pro-max "Accessible & Ethical" guidance: 4.5:1 text contrast in both themes,
   16px body text, 44px touch targets on touch screens, visible 3px focus rings, reduced motion.
   Colors are tokens: every page uses these variables, and dark mode only redefines them. */

:root{
  color-scheme: light;
  --paper:#f6f3ea;          /* page background */
  --card:#ffffff;           /* raised surfaces */
  --surface-2:#fbf9f3;      /* quiet inset areas */
  --ink:#1c2b23;            /* main text */
  --slate:#4f5e57;          /* secondary text (6.3:1 on paper) */
  --line:#d8d2bf;           /* borders */
  --moss:#2f5233;           /* brand: links, buttons, accents */
  --on-moss:#ffffff;        /* text on moss buttons */
  --moss-light:#e5ede2;
  --clay:#9a4a25;           /* "you are here", failed votes */
  --clay-light:#f6e4d8;
  --gold:#7a5f14;
  --gold-light:#f4ecd4;
  --plum:#5b3a5c;           /* concept tags */
  --plum-light:#efe4ef;
  --quote:#3d3216;          /* discussion questions */
  --shadow:0 1px 2px rgba(28,43,35,.06), 0 4px 16px rgba(28,43,35,.06);
  --map-hover:#efe9da;
  --map-covered-hover:#c9dcc4;
  --map-selected:#b9d1b3;
  --map-you-selected:#ebc7b0;
  --map-dot-ring:#ffffff;
  --overlay:rgba(28,43,35,.88);

  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui:var(--sans);         /* older name used by the home page */
  --radius:12px;
  --radius-sm:8px;
  --tap:44px;               /* minimum touch target */
}

/* Dark theme: used when the visitor's device prefers dark (unless they chose light),
   or when they pick dark with the toggle. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#101613; --card:#18201c; --surface-2:#1d2622;
    --ink:#e7ece8; --slate:#a7b4ad; --line:#33403a;
    --moss:#8cc79a; --on-moss:#0f1512; --moss-light:#1f3425;
    --clay:#e39a72; --clay-light:#3a2419;
    --gold:#d8b65e; --gold-light:#332a14;
    --plum:#d3abd4; --plum-light:#33243a;
    --quote:#e8d9b0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --map-hover:#222c27; --map-covered-hover:#2b4a33; --map-selected:#35603f; --map-you-selected:#5a3624;
    --map-dot-ring:#101613; --overlay:rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#101613; --card:#18201c; --surface-2:#1d2622;
  --ink:#e7ece8; --slate:#a7b4ad; --line:#33403a;
  --moss:#8cc79a; --on-moss:#0f1512; --moss-light:#1f3425;
  --clay:#e39a72; --clay-light:#3a2419;
  --gold:#d8b65e; --gold-light:#332a14;
  --plum:#d3abd4; --plum-light:#33243a;
  --quote:#e8d9b0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --map-hover:#222c27; --map-covered-hover:#2b4a33; --map-selected:#35603f; --map-you-selected:#5a3624;
  --map-dot-ring:#101613; --overlay:rgba(0,0,0,.85);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  transition:background-color .2s ease, color .2s ease;}
a{color:var(--moss);text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px;border-radius:4px;}
button{font:inherit;}

/* Skip link: first thing keyboard users reach */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--moss);color:var(--on-moss);
  padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;}
.skip-link:focus{top:12px;}

/* Top bar shared by all pages */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1040px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:12px;}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-family:var(--serif);font-weight:600;
  font-size:20px;color:var(--ink);text-decoration:none;margin-right:auto;}
.brand .accent{color:var(--moss);}
.brand svg{flex-shrink:0;}
.topnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.topnav a{font-family:var(--sans);display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--radius-sm);
  color:var(--slate);text-decoration:none;font-size:15px;font-weight:500;}
.topnav a:hover{color:var(--ink);background:var(--card);}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600;}

/* Light/dark toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);flex-shrink:0;
  border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;
  transition:border-color .15s ease, color .15s ease;}
.theme-toggle:hover{border-color:var(--moss);color:var(--moss);}
.theme-toggle svg{width:20px;height:20px;}
.theme-toggle .i-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}

/* Visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Inline SVG icons (replace emoji/symbol icons) */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0;}

@media (max-width:640px){
  .topbar-inner{padding:6px 12px;flex-wrap:wrap;gap:4px;}
  .brand{font-size:18px;}
  .topnav{order:3;width:100%;justify-content:space-between;}
  .topnav a{padding:0 8px;font-size:14px;}
}
@media (max-width:400px){ .topnav a{padding:0 6px;font-size:13.5px;} }
@media (prefers-reduced-motion: reduce){ body{transition:none;} }

/* Print: black on white, no navigation or interactive extras; the open tab prints in full. */
@media print{
  :root, :root[data-theme="dark"]{--paper:#fff;--card:#fff;--surface-2:#fff;--ink:#000;--slate:#333;--line:#bbb;--moss:#1f3a23;
    --moss-light:#fff;--gold-light:#fff;--plum-light:#fff;--clay-light:#fff;--quote:#000;--shadow:none;color-scheme:light;}
  body{font-size:12pt;background:#fff;color:#000;}
  .topbar, .skip-link, .theme-toggle, .search-card, .tabs, .print-row, .community-board, .nearby, .map-wrap,
  .official-select-row, details > summary, .delete-btn, .approve-btn, form{display:none !important;}
  .panel{border:none;box-shadow:none;padding:0;}
  .panel:not(.active){display:none !important;}
  a{color:#000;}
  .record-source a::after, .source-link::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all;}
  .local-item, .record, .class-box{break-inside:avoid;}
}