/* Canvas Scout — the county map's look (assets/js/county-map.js), shared by the website's start page and the phone app's
   territory page (mobile/build.js copies it). The site's variables have fallbacks so the app needs none of site.css. */
/* ---------- County map (assets/js/county-map.js) ---------- */
/* Real county shapes on the start page. Counties are drawn once; the map pans/zooms by animating the svg viewBox,
   so every stroke is non-scaling and labels are scaled to stay a constant screen size. */
.cm-root { transition: opacity .6s var(--ease, cubic-bezier(.22, 1, .36, 1)); }
.cm-root path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cm-root.cm-empty .cm-counties, .cm-root.cm-empty .cm-states, .cm-root.cm-empty .cm-nation { opacity: .5; }
.cm-counties, .cm-states, .cm-nation { transition: opacity .6s var(--ease, cubic-bezier(.22, 1, .36, 1)); }
.cm-c { fill: rgba(255,255,255,.03); stroke: rgba(201,206,214,.22); stroke-width: .75px; fill-rule: evenodd; cursor: pointer; outline: none; transition: fill .25s, stroke .25s; }
.cm-c.is-nofit { fill: rgba(255,255,255,0); stroke: rgba(201,206,214,.13); }
.cm-c.is-cand { fill: rgba(253,182,133,.07); stroke: rgba(253,182,133,.32); }
.cm-c.is-cand.is-nofit { fill: var(--cm-hatch, rgba(255,255,255,0)); stroke: rgba(201,206,214,.28); }
.cm-states { fill: none; stroke: rgba(201,206,214,.55); stroke-width: 1.25px; pointer-events: none; }
.cm-nation { fill: none; stroke: rgba(201,206,214,.42); stroke-width: 1px; pointer-events: none; }
/* selected counties: copies drawn above the borders — a soft two-step glow, then the orange fill */
.cm-glow path { fill: none; stroke: #FF8A3D; pointer-events: none; }
.cm-glow .cm-glow-w { stroke-width: 16px; stroke-opacity: .10; }
.cm-glow .cm-glow-n { stroke-width: 7px; stroke-opacity: .22; }
.cm-sel path { fill: #FF8A3D; fill-opacity: .9; fill-rule: evenodd; stroke: #FDB685; stroke-width: 2px; cursor: pointer; outline: none; }
.cm-sel path.cm-pop, .cm-glow path.cm-pop { transform-box: fill-box; transform-origin: 50% 50%; }
.cm-sel path.cm-pop { animation: cm-pop .75s cubic-bezier(.2,.9,.3,1.25) both; }
.cm-glow path.cm-pop { animation: cm-glow-pop 1s ease-out both; }
@keyframes cm-pop { 0% { transform: scale(.86); fill-opacity: 0; stroke-opacity: 0; } 55% { transform: scale(1.06); fill-opacity: 1; stroke-opacity: 1; } 100% { transform: scale(1); } }
@keyframes cm-glow-pop { 0% { transform: scale(.86); stroke-opacity: 0; } 40% { transform: scale(1.06); stroke-opacity: .5; } 100% { transform: scale(1); } }
/* hover / keyboard focus outline (one path, drawn on top) */
.cm-hover { display: none; pointer-events: none; fill: rgba(253,182,133,.22); stroke: #FDB685; stroke-width: 2px; fill-rule: evenodd; }
.cm-hover.on { display: inline; }
.cm-hover.is-sel { fill: rgba(255,255,255,.1); stroke: #FFFFFF; }
.cm-hover.is-nofit { fill: rgba(201,206,214,.07); stroke: rgba(201,206,214,.6); }
.cm-hover.is-focus { stroke-width: 3px; }
/* labels: sized in screen px (each label group is scaled by units-per-pixel) */
.cm-lab { pointer-events: none; transition: opacity .25s; font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace); letter-spacing: .04em; }
.cm-lab.cm-hide, .cm-lab.cm-wait { opacity: 0; visibility: hidden; }
.cm-flying .cm-lab-cand { opacity: 0; }
.cm-lab.cm-in { animation: cm-lab-in .45s var(--ease, cubic-bezier(.22, 1, .36, 1)) backwards; }
@keyframes cm-lab-in { from { opacity: 0; } to { opacity: 1; } }
.cm-lab-sel rect { fill: rgba(11,26,46,.88); stroke: rgba(253,182,133,.6); stroke-width: 1px; }
.cm-lab-sel text { font-size: 11.5px; font-weight: 500; }
.cm-lab-sel .n { fill: #FFFFFF; }
.cm-lab-sel .v { fill: #FDB685; }
.cm-lab-sel.cm-compact .v { display: none; }
.cm-lab-cand text { font-size: 10.5px; text-anchor: middle; fill: rgba(255,255,255,.66); paint-order: stroke; stroke: #081424; stroke-width: 3px; stroke-linejoin: round; }
.cm-lab-cand .v { font-size: 10px; fill: rgba(253,182,133,.8); }
.cm-lab-cand.cm-nofit .v { fill: rgba(255,255,255,.42); }
/* tooltip: lives next to the svg (inside .split-art), never inside it */
.cm-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; max-width: min(320px, calc(100% - 16px)); padding: 8px 12px; border-radius: 10px; background: rgba(11,26,46,.94); border: 1px solid var(--ink-3); color: var(--white, #fff); font-size: 13.5px; line-height: 1.4; box-shadow: 0 16px 32px -14px rgba(0,0,0,.7); opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
.cm-tip.on { opacity: 1; visibility: visible; transition: opacity .15s; }
.cm-tip b { display: block; font-weight: 600; }
.cm-tip span { font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 12px; color: var(--muted-light, rgba(255,255,255,.7)); }
.cm-tip i { font-style: normal; color: var(--peach, #FDB685); }
.cm-tip.is-sel i { color: var(--white, #fff); }
.cm-tip.is-nofit i { color: #F7A07B; }
@media (prefers-reduced-motion: reduce) {
  .cm-sel path.cm-pop, .cm-glow path.cm-pop, .cm-lab.cm-in { animation: none; }
}