/* CivicPulse shared design system. Redesign, Nov 2026 (creator asked for the cleanest possible look for all ages,
   keeping the intro and the map and retiring the pixel theme). Design read: a trust-first civic education demo;
   dials DESIGN_VARIANCE 4, MOTION_INTENSITY 3, VISUAL_DENSITY 4. Rules:
   - A quiet neutral page with ONE accent, a deep green, for links, buttons, focus, and the places on the map.
     Green is neither red nor blue, which suits a nonpartisan site. No second color.
   - One shape scale: surfaces 14px, controls 10px, chips and tags fully round.
   - Hairline borders and soft, faint shadows. No hard offset shadows, no outlines in ink.
   - Inter for everything (self-hosted). No monospace.
   - Accessibility: 4.5:1 text contrast in both themes, 3:1 for field borders, 16px body text, 44px touch
     targets, visible focus, reduced motion respected.
   Colors are tokens: every page uses these variables, and dark mode only redefines them. */

:root{
  color-scheme: light;
  --paper:#f6f7f9;          /* page background */
  --card:#fdfdfe;           /* raised surfaces */
  --surface-2:#eef0f4;      /* quiet inset areas */
  --ink:#141a24;            /* main text */
  --slate:#525d6e;          /* secondary text (6.3:1 on paper) */
  --line:#dfe3ea;           /* hairlines */
  --field:#858fa0;          /* form field borders (3.2:1) */

  --accent:#0b6b50;         /* deep green: links, buttons, focus (6.4:1 on paper) */
  --on-accent:#ffffff;
  --accent-bright:#15a37b;  /* green for graphics and large shapes only */
  --accent-light:#e4f3ec;
  --danger:#b42318;         /* errors only */

  --shadow-sm:0 1px 2px rgba(20,26,36,.06);
  --shadow:0 1px 2px rgba(20,26,36,.05), 0 10px 28px rgba(20,26,36,.07);
  --shadow-card:var(--shadow);
  --shadow-hard:var(--shadow-sm);

  /* Map */
  --map-land:#e3e7ee; --map-edge:#f6f7f9; --map-covered:#bfe3d3;
  --map-hover:#d5dae3; --map-covered-hover:#a3d6c1; --map-selected:#86c8ae; --map-you-selected:#c9d0dc;
  --map-dot-ring:#fdfdfe; --overlay:rgba(20,26,36,.92);

  /* Names used by older page code, mapped onto this palette (there is no second color any more) */
  --moss:var(--accent); --on-moss:var(--on-accent); --moss-light:var(--accent-light);
  --depth:var(--line); --depth-lo:var(--line); --depth-deep:var(--line); --depth-light:var(--surface-2);
  --depth-text:#3a4555; --quote:var(--ink);
  --clay:var(--depth-text); --clay-light:var(--surface-2);
  --gold:#7a5200; --gold-light:#fbf1d9;
  --plum:var(--accent); --plum-light:var(--accent-light);

  --sans:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:var(--sans);       /* older name: small labels are Inter now */
  --serif:var(--sans);
  --ui:var(--sans);
  --radius:14px;
  --radius-sm:10px;
  --tap:44px;               /* minimum touch target */
}

/* Dark theme: used when the visitor picks dark with the toggle (light is the default for everyone). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0f1318; --card:#161b22; --surface-2:#1d232c; --ink:#e8ecf1; --slate:#a3adba; --line:#2a323d; --field:#75808f;
    --accent:#56d1a8; --on-accent:#06231a; --accent-bright:#34b98f; --accent-light:#12281f; --danger:#ff8f86;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    --map-land:#232a34; --map-edge:#0f1318; --map-covered:#1c4a3b;
    --map-hover:#2c3541; --map-covered-hover:#23604c; --map-selected:#2b755d; --map-you-selected:#3a4553;
    --map-dot-ring:#0f1318; --overlay:rgba(0,0,0,.9);
    --depth-text:#c2cad6; --gold:#f0c35a; --gold-light:#2a2413;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0f1318; --card:#161b22; --surface-2:#1d232c; --ink:#e8ecf1; --slate:#a3adba; --line:#2a323d; --field:#75808f;
  --accent:#56d1a8; --on-accent:#06231a; --accent-bright:#34b98f; --accent-light:#12281f; --danger:#ff8f86;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --map-land:#232a34; --map-edge:#0f1318; --map-covered:#1c4a3b;
  --map-hover:#2c3541; --map-covered-hover:#23604c; --map-selected:#2b755d; --map-you-selected:#3a4553;
  --map-dot-ring:#0f1318; --overlay:rgba(0,0,0,.9);
  --depth-text:#c2cad6; --gold:#f0c35a; --gold-light:#2a2413;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;}   /* links to a section land below the sticky top bar */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background-color .2s ease, color .2s ease;}
a{color:var(--accent);text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;}
button{font:inherit;}
h1, h2, h3, h4{font-family:var(--sans);letter-spacing:-0.02em;}

/* One shape scale for the whole site: controls 10px, surfaces 14px, chips fully round. */
button, input, select, textarea, summary{border-radius:var(--radius-sm);}

/* Skip link: first thing keyboard users reach */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:10px 16px;font-weight:600;text-decoration:none;border-radius:var(--radius-sm);}
.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) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1120px;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);color:var(--ink);text-decoration:none;margin-right:auto;}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
  background:var(--accent);color:var(--on-accent);border-radius:9px;}
.brand-mark svg{width:20px;height:20px;display:block;}
.brand-word{font-weight:700;font-size:18px;letter-spacing:-0.02em;color:var(--ink);}
.topnav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.topnav a{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(--surface-2);}
.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);background:transparent;color:var(--slate);cursor:pointer;
  transition:background-color .15s ease, color .15s ease;}
.theme-toggle:hover{color:var(--ink);background:var(--surface-2);}
.theme-toggle svg{width:19px;height:19px;}
.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;}

/* Buttons: a solid green primary and a quiet outlined secondary. They press in slightly when clicked. */
.btn, .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 20px;
  border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);
  font:600 16px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .15s ease, transform .1s ease;}
.btn:hover, .btn-primary:hover{filter:brightness(1.08);}
.btn:active, .btn-primary:active{transform:scale(.98);}
.btn-secondary, .btn-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 18px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);
  font:500 15px var(--sans);text-decoration:none;cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .1s ease;}
.btn-secondary:hover, .btn-quiet:hover{border-color:var(--field);color:var(--accent);}
.btn-secondary:active, .btn-quiet:active{transform:scale(.98);}

/* Small labels */
.kicker{margin:0 0 14px;color:var(--accent);font-weight:600;font-size:15px;}
.meta{font:500 13.5px/1.5 var(--sans);color:var(--slate);}

/* Concept tags: round chips */
.concept{display:inline-flex;align-items:center;min-height:26px;font:600 13px var(--sans);
  color:var(--accent);background:var(--accent-light);border-radius:999px;padding:2px 10px;white-space:nowrap;text-decoration:none;}
a.concept:hover{text-decoration:underline;}

/* 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 */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0;}

/* Flat map of Virginia (drawn by visuals.js from the Census outlines): every county and city, with a dot on each
   place that has local decisions. */
.va-flat{display:block;width:100%;height:auto;overflow:visible;}
.va-flat .c{fill:var(--map-land);stroke:var(--map-edge);stroke-width:.8;stroke-linejoin:round;}
.va-flat .c.covered{fill:var(--map-covered);}
.va-flat .dot{fill:var(--accent);stroke:var(--map-dot-ring);stroke-width:2;transition:r .18s ease;}
.va-flat .hit{fill:transparent;cursor:pointer;}
.va-flat .ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;}
.va-flat g.hot .dot{r:8.5px;}
.va-flat g.hot .ring{opacity:.35;}
.va-flat.building .c{opacity:0;animation:cp-fade .5s ease-out forwards;}
.va-flat.building .place{opacity:0;animation:cp-fade .35s ease-out forwards;}

@media (max-width:640px){
  .topbar-inner{padding:6px 12px;flex-wrap:wrap;gap:4px 8px;}
  .topnav{order:3;width:100%;justify-content:space-between;}
  .topnav a{padding:0 8px;font-size:14px;}
}
.topnav .ns{display:none;}
@media (max-width:520px){ .topnav .nl{display:none;} .topnav .ns{display:inline;} }
@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;--accent:#1f3a44;
    --accent-light:#fff;--gold-light:#fff;--quote:#000;--shadow:none;--shadow-sm: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, canvas{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;}
}