/* CivicMap — "Guide" direction. A readable page on the left, the map as context on the right.
   Theme: override the --cm-* variables on .civic-map. Map colors are read once at load. */
.civic-map{
  --cm-land:#eceae4;--cm-urban:#e4e1d9;--cm-park:#dfe3d6;--cm-water:#cdd8e2;--cm-road:#fff;--cm-road-casing:#d6d1c6;--cm-highway:#e9d6ae;
  --cm-county:rgba(7,25,47,.16);--cm-state:#07192f;--cm-label:#3a4350;--cm-label-soft:#7b8592;--cm-halo:#f4f2ed;--cm-outside:#e3e0d8;
  --cm-accent:#c8102e;--cm-republican:#c8102e;--cm-democrat:#2c66b0;--cm-other:#9aa1ab;--cm-republican-text:#9b0c24;--cm-democrat-text:#1f4d8a;--cm-select:#07192f;
  --cm-ink:var(--ink,#0b1626);--cm-muted:#5b6574;--cm-line:rgba(7,25,47,.12);--cm-paper:var(--paper,#f8f5ee);--cm-card:#fff;
  --cm-head:var(--head,"DM Serif Display",Georgia,serif);--cm-ui:var(--ui,"Manrope",system-ui,sans-serif);
  position:relative;color:var(--cm-ink);font-family:var(--cm-ui);min-width:0;isolation:isolate}
.civic-map [hidden]{display:none!important}
.civic-map button{font:inherit;color:inherit;cursor:pointer}
.civic-map :is(button,a,input):focus-visible{outline:3px solid var(--cm-accent);outline-offset:2px}

/* stage */
.cm-stage{position:relative;overflow:hidden;background:var(--cm-land)}
/* MapLibre styles .maplibregl-map as position:relative; keep the canvas pinned to the stage. */
.civic-map .cm-canvas{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.is-ready .cm-canvas{opacity:1}
.cm-canvas:focus-visible{outline:3px solid var(--cm-accent);outline-offset:-3px}
.civic-placeholder{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .45s;background:var(--cm-land)}
.civic-placeholder svg{width:78%;height:78%;fill:#e6e2d8;stroke:var(--cm-state);stroke-width:1.5}
.is-ready .civic-placeholder{opacity:0}
.is-fallback .cm-zoom,.is-fallback .cm-layers,.is-fallback .cm-legend{display:none}
.maplibregl-ctrl-attrib{font:500 10px var(--cm-ui)}

/* map controls */
.cm-zoom{position:absolute;z-index:4;right:16px;bottom:52px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--cm-line);box-shadow:0 2px 10px rgba(7,25,47,.1)}
.cm-zoom button{width:40px;height:40px;border:0;background:transparent;font-size:20px;line-height:1;color:var(--cm-state);display:grid;place-items:center}
.cm-zoom button+button{border-top:1px solid var(--cm-line)}
.cm-zoom button:hover{background:#f2eee6}
.cm-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.cm-status{position:absolute;z-index:9;left:50%;bottom:20px;transform:translateX(-50%);margin:0;background:var(--cm-ink);color:#fff;padding:8px 14px;font-size:13px;max-width:calc(100% - 32px)}
.cm-status:empty{display:none}
.cm-layers{position:absolute;z-index:5;top:16px;left:16px;right:16px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cm-layers::-webkit-scrollbar{display:none}
.cm-layers button{flex:none;height:36px;padding:0 14px;border:1px solid rgba(7,25,47,.16);background:#fff;color:var(--cm-ink);font:700 12.5px var(--cm-ui);white-space:nowrap;box-shadow:0 2px 8px rgba(7,25,47,.08);transition:background .15s,color .15s,border-color .15s}
.cm-layers button:hover{border-color:var(--cm-ink)}
.cm-layers button[aria-pressed=true]{background:var(--cm-accent);border-color:var(--cm-accent);color:#fff}
.cm-legend{position:absolute;z-index:4;right:68px;bottom:16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;max-width:calc(100% - 100px);background:#fff;border:1px solid var(--cm-line);padding:9px 14px;font:600 12px var(--cm-ui);box-shadow:0 2px 10px rgba(7,25,47,.1)}
.cm-legend i{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px}
.cm-muted{color:var(--cm-muted);font-weight:500}

/* markers */
.cm-chapter{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none}
.cm-chapter img{width:var(--cm-chap,30px);height:var(--cm-chap,30px);border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 3px 10px rgba(0,0,0,.28);transition:transform .2s}
.cm-chapter span{display:none;font:700 12px var(--cm-ui);color:var(--cm-state);white-space:nowrap;text-shadow:0 0 3px var(--cm-halo),0 0 3px var(--cm-halo),0 0 3px var(--cm-halo)}
.civic-full.cm-names .cm-chapter span{display:inline}
.civic-compact .cm-chapter:is(:hover,:focus-visible) span{display:inline}
.cm-chapter:hover img,.cm-chapter:focus-visible img{transform:scale(1.15)}
.cm-pin{width:26px;height:34px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M13 33s11-10.3 11-19A11 11 0 0 0 2 14c0 8.7 11 19 11 19z' fill='%23c8102e' stroke='white' stroke-width='2'/%3E%3Ccircle cx='13' cy='13' r='4.2' fill='white'/%3E%3C/svg%3E");filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));pointer-events:none}

/* shared type */
.civic-map h1{font:400 clamp(40px,4.2vw,58px)/1 var(--cm-head);letter-spacing:-.025em;margin:8px 0 16px}
.civic-map h2{font:400 32px/1.08 var(--cm-head);letter-spacing:-.02em;margin:2px 0 4px}
.civic-map h3{font:400 23px/1.15 var(--cm-head);letter-spacing:-.01em;margin:4px 0 6px}
.cm-eyebrow{margin:0;font:800 11px/1.3 var(--cm-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cm-accent)}
.cm-lede{margin:0;font-size:17px;line-height:1.55;color:var(--cm-muted);max-width:44ch}
.cm-sub{margin:0;font-size:14px;color:var(--cm-muted)}
.cm-hint{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--cm-muted)}
.cm-hint a,.cm-alt a,.cm-fine a{color:var(--cm-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cm-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--cm-muted)}
.cm-link{font:700 13px var(--cm-ui);color:var(--cm-ink);text-decoration:underline;text-underline-offset:3px}
.cm-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px}
.civic-map .cm-actions .btn,.civic-map .cm-precinct .btn{min-height:46px;padding:0 18px;font-size:11.5px}
/* chapter block */
.cm-club{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:14px}
.cm-club img{border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px var(--cm-line),0 6px 16px -8px rgba(7,25,47,.35)}
.cm-club h3{margin:0 0 4px;font-size:25px}
.cm-club-meta{margin:0;font-size:13.5px;color:var(--cm-muted)}
.cm-club+.cm-actions{margin-top:16px}
.civic-map .cm-site{min-height:46px;padding:0 16px;gap:8px;font-size:11.5px;color:var(--cm-ink);border-color:rgba(7,25,47,.28);background:#fff;text-transform:none;letter-spacing:.02em;font-weight:800}
.civic-map .cm-site:hover{border-color:var(--cm-ink);background:#fff}
.cm-site span[aria-hidden]{color:var(--cm-accent);font-size:14px}
.cm-club-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--cm-line)}
.cm-socials{display:flex;gap:6px}
.cm-socials a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--cm-line);background:#fff;color:var(--cm-ink);transition:border-color .15s,color .15s}
.cm-socials a:hover{border-color:var(--cm-accent);color:var(--cm-accent)}
.cm-socials svg{width:18px;height:18px}

/* full mode: page on the left, map on the right */
.civic-full{display:grid;grid-template-columns:minmax(400px,42%) minmax(0,1fr);height:calc(100dvh - var(--cm-top,78px));min-height:560px;background:var(--cm-paper);border-top:1px solid var(--cm-line)}
.civic-full .cm-page{grid-column:1;grid-row:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-right:1px solid var(--cm-line);background:var(--cm-paper)}
.civic-full .cm-stage{grid-column:2;grid-row:1}
.cm-top{position:sticky;top:0;z-index:3;padding:22px clamp(24px,3vw,44px) 18px;background:var(--cm-paper);border-bottom:1px solid rgba(7,25,47,.08)}
.cm-search{display:flex;align-items:center;height:54px;background:#fff;border:1px solid rgba(7,25,47,.22)}
.cm-search:focus-within{border-color:var(--cm-ink)}
.cm-search svg{flex:none;width:20px;height:20px;margin:0 4px 0 16px;fill:none;stroke:var(--cm-muted);stroke-width:1.8}
.cm-search input{flex:1;min-width:0;height:100%;padding:0 12px;border:0;background:transparent;font:500 16px var(--cm-ui);color:var(--cm-ink);outline:none}
.cm-search input::placeholder{color:#7b8592}
.cm-search button{height:100%;padding:0 22px;border:0;background:var(--cm-accent);color:#fff;font:800 12px var(--cm-ui);letter-spacing:.14em;text-transform:uppercase}
.cm-search button:hover{background:#a00d25}
.cm-panel{padding:28px clamp(24px,3vw,44px) 56px;counter-reset:cm-step}
.cm-stats{display:grid;margin-top:28px;border-bottom:1px solid rgba(7,25,47,.14)}
.cm-stats button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;padding:18px 0;border:0;border-top:1px solid rgba(7,25,47,.14);background:transparent;text-align:left}
.cm-stats b{grid-row:span 2;align-self:center;min-width:2.6ch;font:400 42px/1 var(--cm-head);color:var(--cm-accent)}
.cm-stats span{align-self:end;font-size:15px;line-height:1.35}
.cm-stats em{align-self:start;margin-top:4px;font:700 12px var(--cm-ui);font-style:normal;color:var(--cm-muted)}
.cm-stats button:hover em{color:var(--cm-accent)}
.cm-alt{margin:20px 0 0;font-size:14px}
.cm-place{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.cm-back{flex:none;width:44px;height:44px;border:1px solid var(--cm-line);background:#fff;font-size:18px}
.cm-back:hover{border-color:var(--cm-ink)}
.cm-step{position:relative;padding:20px 0 22px;border-top:2px solid var(--cm-ink)}
.cm-step>.cm-eyebrow{color:var(--cm-ink)}
.cm-step>.cm-eyebrow:before{counter-increment:cm-step;content:counter(cm-step);display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;background:var(--cm-accent);color:#fff;font-size:11px;letter-spacing:0}
.cm-precinct.is-open{background:linear-gradient(90deg,rgba(200,16,46,.07),transparent 80%)}
.cm-precinct.is-open .btn{margin-top:14px}
.cm-race{padding:14px 0;border-top:1px solid var(--cm-line)}
.cm-step>.cm-eyebrow+.cm-race{border-top:0;padding-top:12px}
.cm-race-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font:700 12.5px var(--cm-ui);color:var(--cm-muted)}
.cm-tag{flex:none;padding:4px 7px;border:1px solid var(--cm-line);font:800 10px var(--cm-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cm-muted)}
.cm-tag.is-new{background:var(--cm-ink);border-color:var(--cm-ink);color:#fff}
.cm-tag.is-close{border-color:var(--cm-accent);color:var(--cm-accent)}
.cm-who{display:flex;align-items:center;gap:8px;margin:6px 0 8px;font:700 17px/1.3 var(--cm-ui)}
.cm-who small{font:500 13px var(--cm-ui);color:var(--cm-muted)}
.cm-dot{flex:none;width:10px;height:10px;border-radius:50%}
.cm-bar{display:flex;height:6px;overflow:hidden;background:var(--cm-line)}
.cm-bar i{display:block;height:100%}
.cm-p-R{background:var(--cm-republican)}.cm-p-D{background:var(--cm-democrat)}.cm-p-L,.cm-p-G,.cm-p-I,.cm-p-{background:var(--cm-other)}
.cm-split{display:flex;justify-content:space-between;gap:10px;margin:6px 0 0;font-size:12.5px;color:var(--cm-muted)}
.cm-note{margin:6px 0 0;font-size:12.5px;color:var(--cm-muted)}
.cm-statewide{border-top:2px solid var(--cm-ink)}
.cm-statewide summary{display:flex;align-items:center;gap:12px;min-height:56px;list-style:none;cursor:pointer}
.cm-statewide summary::-webkit-details-marker{display:none}
.cm-statewide summary .cm-eyebrow{color:var(--cm-ink)}
.cm-statewide summary b{font:700 15px var(--cm-ui)}
.cm-chev{margin-left:auto;font-size:22px;color:var(--cm-accent);transition:transform .2s}
.cm-statewide[open] .cm-chev{transform:rotate(45deg)}
body:has(.civic-full) footer,body:has(.civic-full) .dock{display:none}

/* compact mode: the map sits beside page copy (home, chapter pages) */
.civic-compact{height:560px;border:1px solid rgba(7,25,47,.14);box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
.civic-compact .cm-stage{position:absolute;inset:0}
.civic-compact .cm-zoom{bottom:16px}
.cm-card{position:absolute;z-index:6;left:16px;bottom:16px;width:min(360px,calc(100% - 88px));padding:18px 18px 16px;background:#fff;color:var(--cm-ink);border:1px solid var(--cm-line);box-shadow:0 18px 40px -16px rgba(7,25,47,.45)}
.cm-card .cm-club{margin:0;padding-right:28px}
.cm-card .cm-club h3{font-size:21px}
.cm-card .cm-socials a{width:36px;height:36px}
.cm-card h3{font-size:21px}
.cm-card-x{position:absolute;top:0;right:0;width:44px;height:44px;border:0;background:transparent;font-size:24px;color:var(--cm-muted)}
.cm-near{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--cm-line);font:700 11px var(--cm-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cm-muted)}
.cm-near span{margin-right:4px}
.cm-near button{min-height:34px;padding:0 10px;border:1px solid var(--cm-line);background:#fff;font:700 12.5px var(--cm-ui);letter-spacing:0;text-transform:none;color:var(--cm-ink)}
.cm-near button:hover{border-color:var(--cm-ink)}
.cm-near em{font-style:normal;font-weight:500;color:var(--cm-muted)}

/* precinct-chair roster */
.cm-filter input{width:100%;height:46px;padding:0 14px;border:1px solid rgba(7,25,47,.22);background:#fff;font:500 15px var(--cm-ui);color:var(--cm-ink)}
.cm-filter input:focus{outline:none;border-color:var(--cm-ink)}
.cm-county-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--cm-line)}
.cm-county-list button{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:10px;width:100%;min-height:48px;padding:10px 2px;border:0;border-bottom:1px solid var(--cm-line);background:transparent;text-align:left}
.cm-county-list button:hover span{color:var(--cm-accent);text-decoration:underline;text-underline-offset:3px}
.cm-county-list span{font:700 15px var(--cm-ui)}
.cm-county-list b{font:400 22px/1 var(--cm-head);color:var(--cm-accent)}
.cm-county-list small{min-width:6.5em;font-size:12px;color:var(--cm-muted)}
.cm-empty{padding:14px 2px;color:var(--cm-muted)}
.cm-meter{height:8px;margin:2px 0 18px;background:rgba(7,25,47,.1)}
.cm-meter i{display:block;height:100%;background:var(--cm-accent)}
.cm-roster{margin-top:24px;padding-top:16px;border-top:2px solid var(--cm-ink)}
.cm-roster h3{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.cm-roster h3 small{font:700 13px var(--cm-ui);color:var(--cm-muted)}
.cm-pills{display:flex;flex-wrap:wrap;gap:6px}
.cm-pills button{min-width:52px;min-height:38px;padding:0 10px;border:1px solid rgba(200,16,46,.35);background:rgba(200,16,46,.06);color:var(--cm-accent);font:700 13px var(--cm-ui);font-variant-numeric:tabular-nums}
.cm-pills button:hover{background:var(--cm-accent);border-color:var(--cm-accent);color:#fff}
.cm-filled summary{display:flex;align-items:center;list-style:none;cursor:pointer;min-height:44px}
.cm-filled summary::-webkit-details-marker{display:none}
.cm-filled summary h3{margin:0}
.cm-filled[open] .cm-chev{transform:rotate(45deg)}
.cm-filled ul{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:18px}
.cm-filled li{break-inside:avoid}
.cm-filled li button{display:flex;gap:10px;width:100%;min-height:36px;align-items:center;padding:4px 0;border:0;background:transparent;text-align:left;font-size:13.5px}
.cm-filled li button span{min-width:3.2em;font-weight:700;color:var(--cm-muted);font-variant-numeric:tabular-nums}
.cm-filled li button:hover{color:var(--cm-accent)}
.cm-roster-link{margin:12px 0 0}
.cm-roster-link .cm-link{padding:0;border:0;background:none;cursor:pointer;font:700 13.5px var(--cm-ui);text-align:left}

@media (max-width:900px){
  .civic-full{display:flex;flex-direction:column;height:auto;min-height:0;border-top:0}
  .civic-full .cm-stage{order:-1}
  .civic-full .cm-stage{position:sticky;top:var(--cm-top,68px);z-index:1;height:44vh;min-height:280px;border-bottom:1px solid var(--cm-line)}
  .civic-full .cm-page{position:relative;z-index:2;overflow:visible;border:0;box-shadow:0 -10px 24px -16px rgba(7,25,47,.35)}
  .cm-top{position:relative;padding:14px 16px}
  .cm-panel{padding:20px 16px 40px}
  .civic-map h1{font-size:38px}
  .cm-layers{top:10px;left:10px;right:10px}
  .cm-layers button{height:34px;padding:0 12px}
  .cm-zoom{display:none}
  .cm-legend{left:10px;right:auto;bottom:30px;max-width:calc(100% - 20px);padding:6px 10px;font-size:11px}
  .civic-compact{height:500px}
  .cm-card{left:10px;right:10px;bottom:10px;width:auto}
  .civic-compact .cm-zoom{display:flex;top:12px;right:12px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.civic-map *{transition:none!important}}