/* Election-night maps. Scoped to .nm. Load after vendor/leaflet.css.
 * Every colour, font and radius comes from the site's tokens (the Bootstrap variables Quarto sets, which follow the
 * light/dark stylesheet swap: the page is dark through body.quarto-dark, not prefers-color-scheme). Party colours are
 * the only fixed colours, and they live in night-maps.js. The controls reuse the site's .shot-filter-row / -lbl / -chip. */
.nm { color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: 0.9rem; line-height: 1.45; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.nm * { box-sizing: border-box; }

/* controls: one row above the map, wrapping on a phone */
.nm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.nm-seg { display: inline-flex; gap: 0.3rem; }
.nm-lab { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.nm-sel { font-family: var(--bs-font-monospace); font-size: 0.8rem; padding: 0.25rem 0.5rem; border: 1px solid var(--bs-border-color); border-radius: 4px; background: var(--bs-body-bg); color: var(--bs-body-color); min-height: 32px; max-width: 12rem; }
@media (max-width: 640px) { .nm-ctl .shot-filter-chip { min-height: 34px; padding: 0.35rem 0.65rem; } .nm-sel { min-height: 34px; } }

/* the map takes the full width; height leaves room to scroll past it on a phone */
.nm-mapwrap { position: relative; width: 100%; }
.nm-map { width: 100%; height: clamp(380px, 66vh, 560px); border: 1px solid var(--bs-border-color); border-radius: 4px; background: var(--bs-secondary-bg); overflow: hidden; font: inherit; }
@media (min-width: 900px) { .nm-map { height: clamp(520px, 72vh, 720px); } }
.nm .leaflet-container { font: inherit; background: var(--bs-secondary-bg); }
.nm[data-base="satellite"] .leaflet-container { background: var(--bs-tertiary-bg); }
.nm[data-base="street"] .leaflet-tile-pane { filter: saturate(.6) brightness(1.04); }
body.quarto-dark .nm[data-base="street"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.85); }
.nm .leaflet-interactive { cursor: pointer; }
/* a clicked district or dot is an SVG path: the browser's focus ring would draw its bounding box (the purple rectangle over the map) */
.nm .leaflet-interactive:focus, .nm .leaflet-container:focus, .nm svg:focus { outline: none; }
.nm .leaflet-control-attribution { font-size: 10px; max-width: 70%; line-height: 1.3; background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent); color: var(--bs-secondary-color); }
.nm .leaflet-control-attribution a { color: var(--bs-link-color); }
.nm .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.nm .leaflet-bar { border: 1px solid var(--bs-border-color); box-shadow: none; }

.nm-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 1000; background: var(--bs-body-color); color: var(--bs-body-bg); font-size: 0.8rem; padding: 0.4rem 0.8rem; border-radius: 999px; pointer-events: none; }

/* seat line, key: compact, under the map */
.nm-seat { font-size: 0.85rem; min-height: 2.7em; color: var(--bs-body-color); }
.nm-chips { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.78rem; color: var(--bs-secondary-color); }
.nm-chips i, .nm-pop i, .nm-booth i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.nm-faint { font-style: italic; }
.nm-key { font-size: 0.85rem; border-top: 1px solid var(--bs-border-color); padding-top: 0.4rem; color: var(--bs-body-color); }
.nm-key summary { cursor: pointer; color: var(--bs-link-color); font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.nm-keybody p { margin: 6px 0; }
.nm-ak { display: inline-flex; align-items: center; gap: 2px; margin: 2px 10px 2px 0; white-space: nowrap; }
.nm-ak svg { display: inline-block; overflow: visible; }
.nm-src { color: var(--bs-secondary-color); font-size: 0.78rem; }
.nm :focus-visible { outline: 2px solid var(--bs-link-color); outline-offset: 2px; }
.nm .leaflet-interactive:focus-visible { outline: none; }

/* arrows are markers: never intercept taps */
.nm-arrow { pointer-events: none; background: transparent; border: 0; }
.nm-arrow svg { display: block; overflow: visible; }

/* tooltips and the booth popup follow the site theme */
.nm .nm-tip { font-family: var(--bs-font-monospace); font-size: 0.72rem; font-weight: 600; padding: 3px 7px; background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); box-shadow: none; }
.nm .nm-tip::before { display: none; }
.nm .nm-pop .leaflet-popup-content-wrapper { border-radius: 4px; padding: 0; box-shadow: 0 4px 20px rgba(var(--site-shadow-rgb), 0.35); }
.nm .nm-pop .leaflet-popup-content { margin: 10px 12px; font-size: 0.82rem; line-height: 1.4; min-width: 200px; }
.nm .leaflet-popup-content-wrapper, .nm .leaflet-popup-tip { background: var(--bs-body-bg); color: var(--bs-body-color); }
.nm .leaflet-popup-close-button { color: var(--bs-secondary-color); }
.nm-pt { font-size: 0.9rem; }
.nm-ps { color: var(--bs-secondary-color); font-size: 0.75rem; margin: 2px 0; }
.nm-pop table, .nm-booth table { border-collapse: collapse; width: 100%; margin: 4px 0; background: transparent; --bs-table-bg: transparent; color: inherit; }
.nm-pop table td, .nm-pop table tr, .nm-booth table td, .nm-booth table tr { background: transparent; color: inherit; border: 0; }
.nm-pop td, .nm-booth td { padding: 1px 0; } .nm-pop td + td, .nm-booth td + td { text-align: right; padding-left: 10px; font-variant-numeric: tabular-nums; }
.nm-sw { font-size: 0.75rem; margin-top: 3px; font-weight: 600; }
.nm .nm-map.nm-wheel { box-shadow: 0 0 0 2px var(--bs-link-color); }

/* touch screens: the booth detail sits under the map at page text size (night-maps.js showBooth) */
.nm-booth { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-body-color); border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.nm-booth .nm-pt { font-size: 1rem; }
.nm-booth .nm-ps, .nm-booth .nm-sw { font-size: 0.8rem; }
.nm-booth .nm-bx { float: right; margin-left: 0.5rem; }
.nm-booth td { padding: 3px 0; }
/* iOS zooms the page when a control under 16px gets focus */
@media (pointer: coarse) { .nm-sel { font-size: 16px; } }
.nm-pop .nm-f2, .nm-booth .nm-f2 { margin-top: 0.55rem; font-weight: 600; }