/* Interactive map. Loaded only by pages that list it under "styles:", after style.css and the
   vendored leaflet.css, so it can use the site tokens and override Leaflet's light defaults.
   Everything is scoped to .map so nothing here leaks into other pages. */

.map{margin:28px 0}
.map-view{position:relative;background:var(--bg);border:10px solid #030205;border-radius:0;overflow:hidden;box-shadow:0 30px 70px -35px rgba(255,61,139,.4)}
.map-view>img{display:block;width:100%;height:auto}
.map-view.is-live{height:clamp(380px,62vw,540px)}
.map figcaption,.map-help{margin:10px 0 0;font-size:.875rem;color:var(--muted);max-width:75ch}

/* Filters, generated by map.js above the map */
.map-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:0 0 12px}
.map-tools fieldset{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:0;border:0}
.map-tools legend{float:left;margin:0 4px 0 0;padding:0;font:600 .75rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.map-tools label,.map-found{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.95rem}
.map-tools input,.map-found input{width:18px;height:18px;flex:0 0 auto;margin:0;padding:0;border:0;background:none;accent-color:var(--pink)}
.map-count{margin:0 0 0 auto;font-size:.875rem;color:var(--muted)}

/* Leaflet, restyled to the site palette */
.map .leaflet-container{background:var(--bg);font:inherit;font-size:.9rem;line-height:1.5}
.map .leaflet-container a{color:var(--pink)}
.map .leaflet-bar{border:1px solid var(--line);box-shadow:none}
.map .leaflet-bar a,.map .leaflet-bar a:hover{background:var(--surface);color:var(--text);border-bottom-color:var(--line)}
.map .leaflet-bar a:hover,.map .leaflet-bar a:focus-visible{background:#221f3b}
.map .leaflet-bar a.leaflet-disabled{background:var(--surface);color:#5d5670}
.map .leaflet-control-attribution{background:rgba(11,10,24,.82);color:var(--muted);font-size:.7rem}
.map-caption{max-width:min(320px,60vw);padding:6px 10px;background:rgba(11,10,24,.88);border:0;border-radius:0;color:var(--muted);font-size:.78rem;line-height:1.4}
.map-view.has-popup .map-caption{visibility:hidden}  /* controls sit above popups; the figcaption still says it */

/* Pins: L.divIcon markers, drawn in CSS, no image files */
.map-pin{display:grid;place-items:center;box-sizing:border-box;border:3px solid var(--pink);border-radius:50%;background:var(--bg);box-shadow:0 0 0 4px rgba(249,118,176,.28);cursor:pointer}
.map-pin::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink)}
.map-pin--verified{border-color:var(--text);box-shadow:0 0 0 4px rgba(245,241,255,.22)}
.map-pin--verified::before{background:var(--text)}
.map-pin.is-found{border-color:var(--muted);box-shadow:none;opacity:.8}
.map-pin.is-found::before{width:11px;height:6px;margin-top:-3px;border-radius:0;background:none;border:solid var(--text);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.map-pin:focus-visible{outline:3px solid var(--text);outline-offset:3px}

/* Popups */
.map .leaflet-popup-content-wrapper,.map .leaflet-popup-tip{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.map .leaflet-popup-content-wrapper{border-radius:10px}
.map .leaflet-popup-content{margin:14px 18px 16px;font-size:.95rem;line-height:1.5}
.map .leaflet-popup-content p{margin:0 0 8px}
.map .leaflet-container a.leaflet-popup-close-button{color:var(--muted);width:28px;height:28px;font:20px/28px Archivo,system-ui,sans-serif}
.map .leaflet-container a.leaflet-popup-close-button:hover{color:var(--text)}
.map-pop-status{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.map-pop-title{font:800 1.35rem/1.15 Display,sans-serif;color:var(--text)}
.map-pop-title:focus{outline:none}
.map-pop-title:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.map-pop-meta{font-size:.85rem;color:var(--muted)}
.map-found{margin-top:4px}

/* "Show on the map" buttons, added by map.js to the static list */
.map-show{margin-top:4px;padding:8px 16px;font-size:.9rem}
