/* GTA6Intel map styles (from app.css): the full map, the home preview and entry pages' small map. Loaded only where a
   map is (map.blade.php, home.blade.php, and js/app.js with an entry's small map), on tokens.css like app.css. */
/* ---------- Map (full screen) ---------- */
/* Wide screens: left panel, pin details top right, legend top right, toolbar centred in the space between.
 * Phones (narrow or short): a bottom sheet (a side sheet in landscape), tools in a column on the right that adds
 * columns when space runs short, pin details as a bottom card. JS keeps --bottom-inset/--toolbar-w current. */
.map-page { position: fixed; inset: 4rem 0 0 0; --panel-w: clamp(20rem, 26vw, 24rem); --legend-w: 18rem; --gap: var(--s-4); }
/* The map's own sea behind it (no flash while tiles load), and a soft vignette for depth; never blocks the map. */
[data-map] .map-canvas { background: var(--map-sea, #2c67a4); }
[data-map] .map-canvas::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 10, 20, .38) 100%); }
.has-admin-bar .map-page { top: calc(4rem + var(--touch)); }
.map-page .map-canvas { position: absolute; inset: 0; background: #0a1a26; }
.map-panel { position: absolute; top: var(--gap); bottom: var(--gap); width: var(--panel-w); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; z-index: 5; }
.map-panel.left { left: var(--gap); }
/* Desktop: the panel is flush and full height (no inset card, square edges), so the map gets the rest of the screen. */
@media (min-width: 861px) and (min-height: 501px) {
  .map-page { --panel-w: 20rem; }
  .map-page:not([data-panel="min"]) .map-panel.left { top: 0; left: 0; bottom: 0; border-radius: 0; border-width: 0 1px 0 0; box-shadow: none; }
  .map-page .map-footer { left: calc(var(--panel-w) + var(--gap)); }
}
.map-panel.right { right: var(--gap); bottom: auto; width: clamp(19rem, 24vw, 22rem); max-height: calc(100% - var(--gap) * 2); }
.map-panel .scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 var(--s-4) var(--s-4); flex: 1 1 auto; min-height: 0; }
.map-panel .scroll li, .lyr-sub, .lyr-row { min-width: 0; max-width: 100%; }
.map-panel.right .scroll { padding: var(--s-5); }
.map-panel.right .btn-sm { min-height: var(--touch); }
/* Pin card: picture edge to edge on top (or the category's colour and symbol), then what, where, checked, actions. */
.pin-card { position: relative; display: grid; gap: var(--s-3); }
.pin-card-media { position: relative; margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--cat) 55%, #fff 0%), color-mix(in srgb, var(--cat) 35%, var(--c-bg)) 70%); }
.pin-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.pin-card-media.has-picture img { opacity: 1; }
.pin-card-media::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(13,8,18,.55)); pointer-events: none; }
.pin-card-fallback { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(13,8,18,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); color: #fff; }
.pin-card-fallback .icon { width: 2.25rem; height: 2.25rem; }
.pin-card-media.has-picture .pin-card-fallback { display: none; }
.pin-card-close { position: absolute; top: calc(var(--s-5) * -1 + var(--s-3)); right: calc(var(--s-5) * -1 + var(--s-3)); z-index: 1; background: rgba(13,8,18,.72); border-color: rgba(255,255,255,.2); }
/* Zoom in (only while zoomed out from the place): beside the ×, so the buttons below stay put. */
.pin-card-zoomin { position: absolute; top: calc(var(--s-5) * -1 + var(--s-3)); right: calc(var(--s-5) * -1 + var(--s-3) + var(--touch) + var(--s-2)); z-index: 1; background: rgba(13,8,18,.72); border-color: rgba(255,255,255,.2); }
.pin-card-kicker { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: 600 var(--fs-12)/1.2 var(--f-eyebrow); letter-spacing: var(--ls-md); text-transform: uppercase; color: var(--c-secondary); }
.pin-card-kicker .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--cat); box-shadow: 0 0 8px var(--cat); }
.pin-card-title { margin: calc(var(--s-2) * -1) 0 0; }
.pin-card-title:focus { outline: none; } /* focused for screen readers when the card opens; no box for everyone else */
.pin-card-tags { gap: var(--s-2); flex-wrap: wrap; }
.pin-card-summary { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pin-card-facts { display: grid; gap: var(--s-2); margin: 0; padding: var(--s-3); list-style: none; border-radius: var(--r-md); background: var(--c-surface-1); border: 1px solid var(--c-border); }
.pin-card-facts li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--c-text); }
.pin-card-facts .icon { width: 1rem; height: 1rem; flex: none; color: var(--cat); }
.pin-card-actions { gap: var(--s-2); flex-wrap: wrap; } /* staff's Edit makes four: they wrap rather than spill out of the card */
.pin-card-actions .btn { flex: 1; }
.pin-card-foot { gap: var(--s-2); }
.pin-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: calc(var(--s-2) * -1); }
.pin-card-tools { display: flex; gap: 2px; margin-right: calc(var(--s-2) * -1); }
.pin-card-tools .icon-btn { border: 0; background: none; }
.pin-card-tools .icon-btn:hover { background: var(--c-surface-3); }
.pin-new { margin-left: var(--s-1); padding: 1px 6px; border-radius: var(--r-pill); background: var(--c-pink-fill); color: #fff; font-size: var(--fs-11); letter-spacing: .04em; }
/* Position quality: one word for how sure the spot is (never "confirmed" unless players checked it in the game). */
.pin-quality { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; background: var(--c-surface-3); color: var(--c-secondary); }
.pin-quality::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pin-quality.is-in_game { color: var(--c-rating-high); }
.pin-quality.is-official { color: var(--c-source-trailer); }
.pin-quality.is-community { color: var(--c-source-rumor); }
.pin-quality.is-approx { color: var(--c-muted); }
.pin-card-why span { color: var(--c-secondary); font-size: var(--fs-13); }
.pin-found { gap: var(--s-2); cursor: pointer; }
.pin-found input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--c-pink-fill); }
.pin-nearby { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
.pin-nearby h3 { margin: 0; font: 600 var(--fs-12)/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-secondary); }
.pin-nearby ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pin-nearby li button { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--touch); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; }
.pin-nearby li button:hover { background: var(--c-surface-3); }
.pin-nearby .dot { width: .6rem; height: .6rem; flex: none; border-radius: 50%; background: var(--cat); }
.pin-nearby .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-nearby .text-btn { justify-self: start; min-height: var(--touch); }
.pin-card-step { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
.pin-card-step .icon-btn { border: 0; background: var(--c-surface-2); }
/* The pin card, compact: the picture first, edge to edge, with what it is and its name over it (a tap opens the entry);
   then its yes/no facts in words, Open entry / Found it / More; the rest under More. No dots or chips. */
.pin-card.is-compact { gap: var(--s-3); }
.pin-card-hero { --bleed: var(--s-3); position: relative; height: 11rem; margin: calc(var(--bleed) * -1) calc(var(--bleed) * -1) 0; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--cat) 55%, #fff 0%), color-mix(in srgb, var(--cat) 35%, var(--c-bg)) 70%); }
.pin-card-hero .pin-card-fallback { margin-bottom: 2.5rem; width: 3.5rem; height: 3.5rem; }
.pin-card-hero .pin-card-fallback .icon { width: 1.75rem; height: 1.75rem; }
.pin-card-hero.has-picture .pin-card-fallback { display: none; }
/* A screenshot pin: the whole frame (16:9), never trimmed to the card's usual picture height. */
.pin-card-hero.is-shot, .map-panel.right .pin-card-hero.is-shot { height: auto; aspect-ratio: 16 / 9; }
.pin-card-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s, transform .35s ease; }
.pin-card-hero.has-picture .pin-card-pic { opacity: 1; }
.pin-card-hero:has(.pin-card-hero-link:hover) .pin-card-pic { transform: scale(1.04); }
/* Dark at the foot for the name, a little at the top for the close button: readable over any picture. */
.pin-card-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,8,18,.45) 0%, rgba(13,8,18,0) 28%, rgba(13,8,18,0) 42%, rgba(13,8,18,.9) 100%); }
.pin-card-hero-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.pin-card-over { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 2; display: grid; gap: 2px; pointer-events: none; }
/* A screenshot's own full screen toggle, bottom right of the picture (the title keeps clear of it). */
.pin-card-zoom { position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 3; background: rgba(13,8,18,.72); border-color: rgba(255,255,255,.2); color: #fff; }
.pin-card-zoom:hover { background: rgba(13,8,18,.9); }
.pin-card-hero:has(.pin-card-zoom) .pin-card-over { right: calc(var(--touch) + var(--s-3)); }
.pin-save[aria-pressed="true"] { color: var(--c-pink-text); border-color: var(--c-pink-text); }
.pin-save[aria-pressed="true"] .icon { fill: currentColor; }
/* A screenshot's moment, playing over the map: the official video, 16:9, as big as fits. */
dialog.map-video { width: min(64rem, calc(100% - 2rem)); padding: var(--s-4); display: grid; gap: var(--s-3); }
dialog.map-video:not([open]) { display: none; }
.map-video-head .card-title { margin: 0; }
.map-video-frame { aspect-ratio: 16 / 9; max-height: calc(100vh - 12rem); background: #000; border-radius: var(--r-md); overflow: hidden; }
.map-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pin-card-over .pin-card-kicker { color: rgba(244,238,245,.88); }
.pin-card.is-compact .pin-card-title { margin: 0; font: 700 var(--fs-18)/1.15 var(--f-body); color: #fff; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.pin-card-hero .pin-new { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 3; margin: 0; }
.pin-card.is-compact .pin-card-close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 3; background: rgba(13,8,18,.72); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pin-card.is-compact .pin-card-close:hover { background: rgba(13,8,18,.9); }
.pin-card.is-compact .pin-card-zoomin { top: var(--s-2); right: calc(var(--s-2) + var(--touch) + var(--s-2)); z-index: 3; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pin-card-flags { margin: 0; font-size: var(--fs-14); color: var(--c-secondary); }
.pin-card-flags strong { color: var(--c-text); font-weight: 600; }
.pin-card-why strong { color: var(--c-text); font-weight: 600; }
.pin-card.is-compact .pin-card-actions { display: flex; }
.pin-card.is-compact .pin-card-actions .btn { padding-inline: var(--s-3); }
.pin-more-btn { gap: var(--s-1); }
.pin-more-btn .icon { width: 1rem; height: 1rem; transition: transform .15s; }
.pin-more-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.pin-card-more { display: grid; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.pin-card-more[hidden] { display: none; }
.pin-card-more .pin-card-summary { display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--c-text); } /* the whole overview under More */
.pin-card.is-compact .pin-card-tools { gap: var(--s-2); margin: 0; }
.pin-card.is-compact .pin-card-tools .btn { flex: 1; }
.pin-card.is-compact .pin-card-foot { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
/* Right-click on the map: the spot's coordinates, Copy, Copy link. */
.spot-popup .maplibregl-popup-content { padding: var(--s-3) !important; }
.spot-pop p { margin: 0 0 var(--s-2); color: var(--c-text); }
.spot-pop .row { gap: var(--s-2); flex-wrap: nowrap; }
.spot-pop .btn-sm { min-height: var(--touch); }
/* Wide screens: the card floats just above its pin (over pin names and place names), at most this tall when More is open. */
/* "Enterable only" (a yes/no filter): a row like the others, a small switch in the box column, first in its category's list. */
/* Live, beside the map's title (and in the phone sheet's handle). */
.panel-title-row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.map-live { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-12)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-status-up); }
.map-live.is-off { color: var(--c-secondary); }
.map-live.is-off .live-dot { background: var(--c-secondary); animation: none; }
.sheet-handle-text .map-live { margin-top: 2px; }
.panel-version { display: inline-flex; align-items: center; gap: var(--s-2); }
.panel-version select { min-height: 1.75rem; border-color: transparent; font-size: var(--fs-13); }
.panel-version select:hover { border-color: var(--c-border-strong); }
@media (prefers-reduced-motion: reduce) { .map-live .live-dot { animation: none; } }
.lyr-row.is-dim .lyr-text { color: var(--c-secondary); text-decoration: line-through; text-decoration-color: var(--c-border-strong); }
.pin-pop { z-index: 3; }
.pin-pop .maplibregl-popup-content { width: 20rem; padding: var(--s-3) !important; border-radius: var(--r-lg) !important; box-shadow: 0 12px 32px rgba(0,0,0,.55) !important; }
.pin-pop .pin-card-more { max-height: min(45vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
.pin-pop .btn-sm { min-height: var(--touch); }
@media (prefers-reduced-motion: reduce) { .pin-more-btn .icon, .pin-card-pic { transition: none; } .pin-card-hero:has(.pin-card-hero-link:hover) .pin-card-pic { transform: none; } }
/* Layer rows: "New" dot and "→ Next". */
.pin-tip .maplibregl-popup-content { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-surface-1); border: 1px solid var(--c-border-strong); box-shadow: 0 8px 22px rgba(0,0,0,.5); color: var(--c-text); font-size: var(--fs-13); pointer-events: none; }
.pin-tip .maplibregl-popup-content span { color: var(--c-secondary); font-size: var(--fs-12); }
.pin-tip .maplibregl-popup-tip { display: none; }
/* A pin's name under it: the same as a place's name (businesses, "Rialto Islands"), so every name on the map reads alike. */
/* A long name wraps to a second line (centred, as the app's) instead of being cut off with "…" (owner: "Mount Kalaga
   National Par…"); more than two lines is clamped. */
.pin-name { pointer-events: none; width: max-content; max-width: 11rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; padding: .125rem .25rem; font: 600 var(--fs-14)/1.2 var(--f-body);
  color: #F2F2F2; text-shadow: 0 0 2px #333, 0 0 2px #333, 0 0 1px #222; }
.county-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.county-chips .chip { min-height: var(--touch); padding: 0 var(--s-3); font-size: var(--fs-13); }
.county-chips .chip .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--cat); }
.county-chips .chip[aria-pressed="false"] { opacity: .55; border-style: dashed; }
.county-chips .chip .n { font: 500 var(--fs-12) var(--f-mono); color: var(--c-muted); }
.map-options { display: grid; gap: var(--s-2); }
@media (min-width: 861px) and (min-height: 501px) { .map-options .compact-only { display: none; } } /* phones only (the legend grid's own display won over it) */
.hide-county-names .place-name.is-top, .hide-county-names .place-name.is-region { display: none !important; } /* Map options → Region names: counties and the regions */
.sr-row { display: flex !important; align-items: center; gap: var(--s-2); }
[data-map-search-results] .sr-head { padding: var(--s-2) var(--s-2) 0; list-style: none; }
.sr-name { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.sr-name small { color: var(--c-muted); font-size: var(--fs-12); }
.sr-type { flex: none; color: var(--c-muted); font-size: var(--fs-12); }
.map-count-pill { display: none; }
@media (max-width: 860px), (max-height: 500px) {
  .map-count-pill { display: inline-flex; align-items: center; gap: var(--s-2); position: absolute; z-index: 5; right: var(--gap); bottom: calc(var(--gap) * 2 + 3.25rem + env(safe-area-inset-bottom)); /* just above the floating search bar */
    min-height: var(--touch); padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--c-text); font: 600 var(--fs-14) var(--f-body); }
  .map-count-pill .icon { width: 1.1rem; height: 1.1rem; }
  .map-page:has(.map-panel.left[data-sheet="open"]) .map-count-pill, .map-page:has([data-detail]:not([hidden])) .map-count-pill { display: none; }
}
.lyr-name .pin-new { flex: none; margin: 0; }
.lyr-new { display: inline-block; width: .5rem; height: .5rem; margin-left: .4rem; border-radius: 50%; background: var(--c-pink-text); vertical-align: middle; }
.search-kbd { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--c-border-strong); color: var(--c-muted); font: 500 var(--fs-11) var(--f-mono); pointer-events: none; }
.panel-search:has(.search-kbd) .input { padding-right: 4.25rem; }
.panel-search input:focus ~ .search-kbd, .panel-search input:not(:placeholder-shown) ~ .search-kbd { display: none; }
@media (max-width: 860px), (pointer: coarse) { .search-kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { .pin-card-media img { transition: none; } }
.panel-top { flex: none; padding: var(--s-4) var(--s-4) var(--s-2); }
.panel-search { margin-top: var(--s-3); }
.panel-section { margin-top: var(--s-4); }
.sheet-handle, .compact-only, .map-coords { display: none; }
.map-tabs { display: flex; margin-top: var(--s-2); }
.map-tabs button { flex: 1; justify-content: center; }
.map-page .segmented button { min-height: var(--row, var(--touch)); }
.map-progress { margin-top: var(--s-4); border-color: rgba(236,74,123,.3); }
.layers-section { margin-top: var(--s-3); }
.map-progress .text-btn { margin-right: calc(-1 * var(--s-2)); }
/* Layers: tiles in as many columns as fit (two in the panel). The checkbox covers the whole tile. */
/* The map page's panels follow the map concept: solid dark plum (no glass over a busy map), a soft shadow, mono section
   headings, a big condensed title. */
.map-page .glass { background: var(--c-surface-1); border: 1px solid var(--c-border-strong); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 48px rgba(0,0,0,.55); }
.map-page .map-panel .eyebrow, .map-page .map-legend summary { font: 600 var(--fs-12)/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-secondary); }
.map-page .panel-head .panel-title { margin: 0; font: 600 1.375rem/1 var(--f-eyebrow); text-transform: uppercase; letter-spacing: .02em; }
/* Panel views: Layers | Places, one switch under the search. */
.panel-views { display: flex; width: 100%; margin-top: var(--s-3); }
.panel-views { padding: 3px; }
.panel-views button { flex: 1; justify-content: center; min-height: var(--row); padding-block: 0; font-size: var(--fs-14); }
@media (pointer: fine) { .panel-search .input { min-height: 2.5rem; height: 2.5rem; } }
.panel-views .n { margin-left: var(--s-2); }
.panel-view { margin-top: var(--s-3); }
.layers-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.layers-head .eyebrow { margin: 0; }
.layers-head [data-layers-all] { margin-left: auto; min-height: var(--touch); padding: 0 var(--s-2); font-weight: 600; color: var(--c-pink-text); }
.layers-head [data-hide-found][aria-pressed="true"] { background: var(--c-pink-fill); border-color: var(--c-pink-fill); color: #fff; }
.layers-head .text-btn { flex-basis: 100%; min-height: var(--row); text-align: left; }
/* Places: All / Saved / Found across the panel (counts never squeeze them), Show on map under it. */
.places-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-2); }
.places-filter { display: flex; width: 100%; flex-wrap: nowrap; }
.places-filter button { flex: 1; justify-content: center; min-height: var(--row); padding: 0 var(--s-2); font-size: var(--fs-13); white-space: nowrap; }
.places-actions { display: flex; align-items: center; gap: var(--s-2); }
.places-actions .text-btn { min-height: var(--touch); }
.places-actions [data-fit-shown] { margin-left: auto; }
/* A place in the list: its name (goes there) and its category (just that category). */
.map-list li.pl-item { display: flex; align-items: center; gap: var(--s-1); }
.map-list li.pl-item > a { flex: 1; min-width: 0; }
.pl-item .pin-dot { background: var(--cat); }
.pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cat { flex: none; min-height: var(--row); max-width: 45%; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-pill); background: none; color: var(--c-secondary); font: 500 var(--fs-12)/1 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pl-cat:hover, .pl-cat:focus-visible { border-color: var(--cat); color: var(--c-text); }
.map-options { margin-top: var(--s-3); border-top: 1px solid var(--c-border); }
.map-options summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--row); cursor: pointer; list-style: none; color: var(--c-secondary); font-weight: 600; font-size: var(--fs-14); }
.map-options summary::-webkit-details-marker { display: none; }
.map-options summary .icon { width: 1rem; height: 1rem; }
.map-options[open] summary { color: var(--c-text); }
.map-options .switch { margin: var(--s-2) 0; }
.map-options .switch strong { color: var(--c-text); }
.map-options .version-pick.is-wide { display: none; gap: var(--s-1); margin: var(--s-2) 0; }
@media (max-width: 860px), (max-height: 500px) { .map-options .version-pick.is-wide { display: grid; } }
/* Filters, compact like a checklist: category rows (open by default) with their places under them. Box = on/off
   (half-ticked when partly on); the name goes to the place (or folds a category / kind); "Only" shows on hover/focus.
   Rows are 32px for a mouse (WCAG 2.5.8 asks 24) and 44px on touch screens. */
.map-panel { --row: 2rem; }
@media (pointer: coarse) { .map-panel { --row: var(--touch); } }
.lyr-list, .lyr-sub { display: grid; gap: 0; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.lyr + .lyr { margin-top: var(--s-1); }
.lyr-sub { margin: 0 0 var(--s-1) .9rem; padding-left: var(--s-1); border-left: 1px solid color-mix(in srgb, var(--cat) 40%, transparent); }
.lyr-row { position: relative; display: flex; align-items: center; min-height: var(--row); border-radius: var(--r-sm); }
.lyr-row:hover { background: var(--c-surface-3); }
.lyr-row.is-current { background: color-mix(in srgb, var(--cat, var(--c-pink-fill)) 22%, transparent); box-shadow: inset 3px 0 0 var(--cat, var(--c-pink-fill)); } /* the open pin */
.lyr-row.is-current .lyr-text { color: var(--c-text); font-weight: 600; }
.lyr-box { display: grid; place-items: center; flex: none; width: var(--row); height: var(--row); cursor: pointer; }
.lyr-box input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--cat, var(--c-pink-fill)); cursor: pointer; }
.lyr-box:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -4px; border-radius: var(--r-sm); }
.lyr-name { display: flex; align-items: center; gap: var(--s-2); flex: 1; min-width: 0; min-height: var(--row); padding: 0 var(--s-2) 0 0; border: 0; background: none; color: var(--c-text); font: 400 var(--fs-14)/1.2 var(--f-body); text-align: left; cursor: pointer; }
.lyr-name:disabled { cursor: default; }
.lyr-name:hover:not(:disabled) .lyr-text, .lyr-name:focus-visible .lyr-text { color: var(--c-pink-text); }
.lyr-name:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; border-radius: var(--r-sm); }
.lyr > .lyr-row .lyr-name { font-weight: 600; }
.lyr-text { flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; padding-block: 2px; } /* long names wrap to two lines (owner: they pushed the panel sideways) */
.lyr-name .n { flex: none; font: 500 var(--fs-12) var(--f-mono); color: var(--c-muted); }
.lyr-name > .lyr-chev { flex: none; width: .875rem; height: .875rem; color: var(--c-muted); transition: transform .15s; }
.lyr-name[aria-expanded="true"] > .lyr-chev { transform: rotate(180deg); } /* the fold arrow only: a kind's own icon stays upright */
.lyr .swatch { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: none; border-radius: 50%; background: var(--cat); color: #120B14; }
.lyr .swatch .icon { width: .8rem; height: .8rem; }
.lyr-row:has(.lyr-box input:not(:checked):not(:indeterminate)) .lyr-text { color: var(--c-secondary); }
.lyr-row:has(.lyr-box input:not(:checked):not(:indeterminate)) .swatch { background: transparent; color: var(--c-secondary); box-shadow: inset 0 0 0 1.5px var(--c-border-strong); }
/* "Only": over the end of the row on hover/focus; not shown on touch screens (Hide all, then tick, does the same). */
.lyr-only { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); min-height: calc(var(--row) - 6px); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--c-surface-3); color: var(--c-pink-text); font: 600 var(--fs-12)/1 var(--f-body); cursor: pointer; opacity: 0; pointer-events: none; }
.lyr-row:has(.is-fold) .lyr-only { right: 1.5rem; }
.lyr-row:hover .lyr-only, .lyr-row:has(:focus-visible) .lyr-only { opacity: 1; pointer-events: auto; }
@media (hover: none) { .lyr-only { display: none; } }
.lyr-empty { margin-top: var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--c-border); }
.lyr-empty-head { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--row); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--c-secondary); font: 600 var(--fs-13) var(--f-body); text-align: left; cursor: pointer; }
.lyr-empty-head:hover { background: var(--c-surface-3); }
.lyr-empty-head span:first-of-type { flex: 1; }
.lyr-empty-head .icon { width: .875rem; height: .875rem; transition: transform .15s; }
.lyr-empty-head[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lyr-empty-head .n { font: 500 var(--fs-12) var(--f-mono); color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .lyr-name > .lyr-chev, .lyr-empty-head .icon { transition: none; } }

.layers-actions { display: flex; margin-right: calc(-1 * var(--s-2)); }
.layer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.layer-tile { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: var(--touch); padding: var(--s-1) var(--s-2); border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-surface-1); }
.layer-tile:hover { background: var(--c-surface-3); }
.layer-tile input { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; } /* covers the border too: the whole 44px tile is the target */
.layer-tile:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.layer-tile .swatch { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--cat); color: #fff; border: 2px solid var(--cat); flex: none; }
.layer-tile .swatch .icon { width: 1rem; height: 1rem; }
.layer-tile .layer-text { display: flex; align-items: baseline; gap: var(--s-2); flex: 1; min-width: 0; line-height: 1.2; }
.layer-tile .layer-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-14); color: var(--c-text); overflow-wrap: anywhere; }
.layer-tile .n { flex: none; font: 500 var(--fs-12) var(--f-mono); color: var(--c-secondary); }
/* Off: hollow swatch + dashed edge, so the state never relies on colour alone. */
.layer-tile:has(input:not(:checked)) { background: transparent; border-style: dashed; }
.layer-tile:has(input:not(:checked)) .swatch { background: transparent; color: var(--c-secondary); border-color: var(--c-border-strong); }
.layer-tile:has(input:not(:checked)) .layer-name { color: var(--c-secondary); font-weight: 500; }
.map-toolbar { position: absolute; z-index: 5; bottom: var(--gap); right: var(--gap); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); }
/* The controls never move: an open card sits beside them, not under them. */
@media (min-width: 861px) and (min-height: 501px) { .map-panel.right { right: calc(var(--gap) * 2 + 3.25rem); } }
.tb-sep { width: 60%; height: 1px; margin: 3px 0; background: var(--c-border-strong); }
/* Small print in the map's corner: pointer position and scale, no box. */
.map-footer { position: absolute; z-index: 4; left: calc(var(--panel-w) + var(--gap) * 2); bottom: var(--gap); display: flex; align-items: center; gap: var(--s-4); pointer-events: none;
  font-size: var(--fs-13); color: var(--c-text); text-shadow: 0 0 3px rgba(13,8,18,.9), 0 0 8px rgba(13,8,18,.7); } /* coordinates, scale, credits: read after measuring */
.map-footer .map-scale { width: auto; padding: 0; gap: var(--s-2); }
/* The map's credit: small print, but a real button (opens Map info → Credits). */
.map-footer .map-credit { pointer-events: auto; max-width: 28rem; min-height: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-shadow: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: .85; }
.map-footer .map-credit:hover, .map-footer .map-credit:focus-visible { opacity: 1; text-decoration: underline; }
.map-footer .map-scale-bar { height: 5px; border: 1.5px solid var(--c-text); border-top: 0; box-shadow: 0 1px 3px rgba(13,8,18,.8); }
/* Tucked-away panel (desktop): just a floating search bar and a button to bring the panel back. */
.panel-show { display: none; }
.panel-hide { border: 0; background: none; margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0; }
.map-page[data-panel="min"] .map-panel.left { bottom: auto; width: calc(var(--panel-w) + 9rem); background: none; border: 0; box-shadow: none; overflow: visible; } /* room for the search and "Show panel" */
.map-page[data-panel="min"] .map-panel.left .panel-head, .map-page[data-panel="min"] .map-panel.left .scroll { display: none; }
/* Tucked away: typing in the floating search still shows its results, in a card under the bar (nothing else). */
.map-page[data-panel="min"] .map-panel.left .scroll:has([data-map-search-results]:not(:empty)) { display: block; max-height: min(60vh, 28rem); margin-top: var(--s-2); padding: var(--s-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface-1); box-shadow: 0 18px 48px rgba(0,0,0,.55); }
.map-page[data-panel="min"] .map-panel.left .scroll > :not([data-map-search-results]) { display: none; }
.map-page[data-panel="min"] .panel-top { display: flex; align-items: center; gap: var(--s-2); padding: 0; }
.map-page[data-panel="min"] .panel-search { flex: 1; margin: 0; }
.map-page[data-panel="min"] .panel-search .input { background: var(--c-surface-1); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.map-page[data-panel="min"] .panel-show { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; min-height: 3rem; padding: 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--c-surface-1); color: var(--c-text); font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.5); } /* a labelled button: "Show panel" */
.map-page[data-panel="min"] .map-footer { left: var(--gap); }
/* Panel header: the eyebrow with the hide button in the corner; the counts line ends with the game version. */
.panel-head .panel-hide { margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) calc(var(--s-2) * -1) 0; border: 0; background: none; color: var(--c-secondary); }
.panel-head .panel-hide:hover { background: var(--c-surface-3); color: var(--c-text); }
.panel-head-tools { display: flex; align-items: center; gap: var(--s-1); }
.panel-head-tools .version-pick select { min-height: 1.75rem; border-color: transparent; background-color: var(--c-surface-2); font-size: var(--fs-11); }
.panel-head-tools .version-pick select:hover { border-color: var(--c-border-strong); }
/* Game version: a small dropdown in the panel's header. */
.version-pick select { appearance: none; -webkit-appearance: none; min-height: 2rem; padding: 0 1.75rem 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C9C2D4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color: var(--c-text); font: 600 var(--fs-12) var(--f-mono); cursor: pointer; }
.version-pick.is-wide select { width: 100%; min-height: var(--touch); font-size: var(--fs-14); }
.map-toolbar .icon-btn { border: 0; background: transparent; flex: none; }
.map-toolbar .icon-btn:hover { background: var(--c-surface-3); }
.map-toolbar .icon-btn[aria-pressed="true"] { background: var(--c-pink-fill); color: #fff; }
.map-tilt span { font: 700 var(--fs-13)/1 var(--f-body); letter-spacing: .02em; }
.is-turning .maplibregl-canvas { cursor: ew-resize; } /* Turn: dragging spins the map */
/* What each tool does, on hover and keyboard focus (the name is also its aria-label). Not on touch: no hover there. */
.map-toolbar [data-tip] { position: relative; }
.map-toolbar [data-tip]::after { content: attr(data-tip); position: absolute; right: calc(100% + var(--s-2)); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 16rem; padding: var(--s-1) var(--s-2); border-radius: var(--r-xs); background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  color: var(--c-text); font: 500 var(--fs-12)/1.3 var(--f-body); white-space: normal; text-align: center; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 10; }
@media (hover: hover) { .map-toolbar [data-tip]:hover::after { opacity: 1; transition-delay: .25s; } }
.map-toolbar [data-tip]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .map-toolbar [data-tip]::after { transition: none; } }
.tb-wide { display: flex; align-items: center; gap: var(--s-1); }
.tb-version-label { padding: 0 var(--s-2); letter-spacing: var(--ls-lg); }
/* Fixed widths: the toolbar is centred, so anything that changed width (coordinates as the pointer moves, the scale as you zoom) made it jump. */
.tb-coords { padding: 0 var(--s-3); white-space: nowrap; width: 30ch; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.map-scale { display: inline-flex; align-items: center; gap: var(--s-2); padding-right: var(--s-3); white-space: nowrap; pointer-events: none; width: 10.5rem; }
.map-scale-text { font-variant-numeric: tabular-nums; }
.map-scale[hidden], .map-scale-phone { display: none; }
.map-scale-bar { display: block; height: .5rem; border: 2px solid var(--c-text); border-top: 0; }
.map-toolbar .segmented { flex-wrap: nowrap; flex: none; }
.map-legend { position: absolute; right: calc(var(--gap) + 3.75rem); top: var(--gap); max-height: calc(100% - var(--gap) * 2); overflow-y: auto; z-index: 4; width: var(--legend-w); padding: 0 var(--s-4); border-radius: var(--r-lg); font-size: var(--fs-13); }
.map-page:not(.show-map-key) .map-legend { display: none; } /* Map options → Map key */
.map-page:has([data-detail]:not([hidden])) .map-legend { right: calc(var(--gap) * 2 + clamp(19rem, 24vw, 22rem)); } /* a card open: the key sits beside it */
.map-legend > summary, .map-legend-inline > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--touch); cursor: pointer; list-style: none; color: var(--c-secondary); }
.map-legend > summary::-webkit-details-marker, .map-legend-inline > summary::-webkit-details-marker { display: none; }
.map-legend > summary::after, .map-legend-inline > summary::after { content: ''; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.map-legend[open] > summary::after, .map-legend-inline[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.legend-grid { list-style: none; margin: 0; padding: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
/* The map key: each mark with what it means underneath. */
.key-row { display: grid; gap: 2px; }
.key-row small { color: var(--c-secondary); font-size: var(--fs-12); line-height: 1.35; padding-left: 1.1rem; }
.key-label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--c-text); }
.key-mark { width: .7rem; height: .7rem; flex: none; border-radius: 50%; box-sizing: border-box; }
.key-mark.is-dashed { border: 2px dashed var(--c-text); }
.key-mark.is-found { background: var(--c-pink-fill); opacity: .5; }
.key-mark.is-cluster { width: .9rem; height: .9rem; background: conic-gradient(var(--cat-businesses) 0 55%, var(--cat-locations) 55% 80%, var(--cat-characters) 80% 100%); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.detail-head > .row { gap: var(--s-2); min-width: 0; padding-top: var(--s-2); }
.detail-head > .icon-btn { flex: none; margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) 0 0; }
/* What the map is narrowed to, with one tap back to everything. */
.map-focus { position: absolute; z-index: 5; top: var(--gap); left: calc(var(--panel-w) + var(--gap) * 2); right: calc(var(--legend-w) + var(--gap) * 2); width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border-radius: var(--r-pill); }
.map-focus .btn { min-height: var(--touch); display: inline-flex; align-items: center; gap: var(--s-1); }
.map-focus .btn .icon { width: 1rem; height: 1rem; }
.map-page:has(.map-focus:not([hidden])) .map-notice { top: calc(var(--gap) * 2 + var(--touch) + var(--s-2) + var(--phone-row, 0px)); }
.map-search-all { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--touch); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; }
.map-search-all:hover { background: var(--c-surface-3); }
.map-notice { position: absolute; z-index: 4; top: var(--gap); left: calc(var(--panel-w) + var(--gap) * 2); right: calc(var(--legend-w) + var(--gap) * 2); width: fit-content; margin-inline: auto;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-lg); font-size: var(--fs-14); text-align: center; }
/* A notice is read, not used: clicks go through to the map (pins, measuring) except on its own link or button. */
.map-notice { pointer-events: none; }
.map-notice :is(a, button) { pointer-events: auto; }
/* Measuring: what to do next and the distance, centred above the corner's small print. */
.map-measure { position: absolute; z-index: 5; bottom: calc(var(--gap) * 2 + 1rem); left: calc(var(--panel-w) + var(--gap) * 2); right: calc(var(--gap) * 2 + 3.25rem); width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border-radius: var(--r-pill); }
.map-measure[hidden] { display: none; }
.map-measure .btn { min-height: var(--touch); }
.map-measure .icon-btn { border: 0; background: none; }
.map-measure [data-measure-text], .map-measure [data-mypin-text] { font-size: var(--fs-15); } /* what you're reading while you measure */
.map-measure [data-measure-text] strong { font-size: var(--fs-17); }
/* Dropping your own pin with the keyboard: a cross at the clear part's centre (left/top set by map.js), shown while
   "Drop in the middle" has focus or the pointer. */
.mypin-cross { display: none; position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
.mypin-cross::before, .mypin-cross::after { content: ''; position: absolute; background: #F4F1F7; box-shadow: 0 0 0 1px #0D0812, 0 0 4px rgba(0,0,0,.6); }
.mypin-cross::before { left: 21px; top: 0; width: 2px; height: 44px; }
.mypin-cross::after { top: 21px; left: 0; height: 2px; width: 44px; }
/* Your own pin's card (a popup): what it is, plainly private. */
.mypin-pop { z-index: 6; } /* above place names and the map's notices: it's what you're doing */
.mypin-pop .maplibregl-popup-content { box-sizing: border-box; width: min(20rem, calc(100vw - 2rem)); padding: var(--s-4) !important; border-radius: var(--r-lg) !important; font: 400 var(--fs-15)/1.45 var(--f-body); color: var(--c-body); }
/* Everything inside stays inside the card (owner, 27 Oct: Suggest a fix's switch and boxes ran off its edge) and uses the site's font. */
.mypin-card, .mypin-card * { box-sizing: border-box; min-width: 0; }
.mypin-card :is(input, select, textarea, button) { font-family: var(--f-body); }
.mypin-card :is(.input, .select, textarea) { width: 100%; max-width: 100%; font-size: var(--fs-15); }
.mypin-card label { font-size: var(--fs-14); font-weight: 600; color: var(--c-secondary); }
.mypin-card { display: grid; gap: var(--s-2); }
.mypin-card .pin-card-kicker { display: flex; align-items: center; gap: var(--s-1); margin: 0; }
.mypin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.mypin-card h2 { margin: 0; font: 700 var(--fs-17)/1.2 var(--f-body); color: var(--c-text); overflow-wrap: anywhere; }
.mypin-card p { margin: 0; }
.mypin-card .input { width: 100%; }
.mypin-card .row { gap: var(--s-2); flex-wrap: wrap; }
.mypin-card .btn { min-height: var(--touch); }
.map-measure .icon-btn:hover { background: var(--c-surface-3); }
.map-page[data-panel="min"] .map-measure { left: var(--gap); }
.is-measuring .maplibregl-canvas { cursor: crosshair !important; }
.is-measuring .place-name { pointer-events: none; } /* names let clicks through: a point lands there, no card opens */
/* "Add my pin" and "Suggest a fix": labelled buttons in the top-right corner (25 / 26 Oct); the map key (and on phones
   the tools and notices) start a row lower to make room (--top-row). Out of the way while measuring, placing or a card
   is open. Placing: a crosshair, and names and popups let the click through to the map. */
.map-pills { position: absolute; z-index: 5; top: var(--gap); right: var(--gap); display: flex; flex-direction: row-reverse; gap: var(--s-2); }
.map-pill { min-height: var(--touch); padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); color: var(--c-text); font-weight: 600; white-space: nowrap; }
.map-page { --top-row: 0px; }
.map-page:not(.is-measuring):not(.is-placing):not(:has([data-detail]:not([hidden]))) { --top-row: calc(var(--touch) + var(--gap)); }
.map-page:has([data-detail]:not([hidden])) .map-pills { display: none; }
.map-legend { top: calc(var(--gap) + var(--top-row)); max-height: calc(100% - var(--gap) * 2 - var(--top-row)); }
.map-pill .icon { width: 1.1rem; height: 1.1rem; color: var(--c-pink-text); }
.map-pill:hover { border-color: var(--c-pink-text); }
.map-pill-rep { font: 600 var(--fs-12) var(--f-mono); color: var(--c-pink-text); }
.is-measuring .map-pills, .is-placing .map-pills, .hide-mypin-pill .map-mypin-pill, .hide-fix-pill .map-fix-pill { display: none; } /* Map options: off → the toolbar's pin / spanner */
@media (max-width: 360px) { .map-pill-rep { display: none; } .map-pill { padding: 0 var(--s-3); } } /* two buttons fit a small phone's width */
/* Suggest a fix's card: what's wrong (a missing place, or something else), then its details. */
.fix-card [data-fix-new] { display: grid; gap: var(--s-1); }
.fix-card [data-fix-new][hidden] { display: none; }
/* 3D: "Drag to  Rotate | Move", bottom centre (above the search bar on phones); out of the way while measuring or placing. */
.map-drag-mode { position: absolute; z-index: 5; bottom: calc(var(--gap) * 2 + 1rem); left: calc(var(--panel-w) + var(--gap) * 2); right: calc(var(--gap) * 2 + 3.25rem); width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); }
.map-drag-mode[hidden], .is-measuring .map-drag-mode, .is-placing .map-drag-mode { display: none; }
.map-drag-mode .segmented { flex-wrap: nowrap; }
.map-drag-mode .segmented button { min-height: var(--touch); gap: var(--s-1); font-size: var(--fs-15); }
.map-drag-mode .segmented .icon { width: 1.1rem; height: 1.1rem; }
.map-page[data-panel="min"] .map-drag-mode { left: var(--gap); }
.is-placing .maplibregl-canvas { cursor: crosshair !important; }
.is-placing .maplibregl-marker, .is-placing .maplibregl-popup { pointer-events: none; }
.map-page:has([data-mypin-drop]:is(:hover, :focus-visible)) .mypin-cross:not([hidden]) { display: block; }
.fog-card { position: absolute; z-index: 4; padding: var(--s-4); border-radius: var(--r-lg); max-width: min(20rem, 70vw); }
.fog-card .btn-sm { min-height: var(--touch); }
.map-list { list-style: none; margin: 0; padding: 0; }
.map-list li a { display: flex; gap: var(--s-3); align-items: center; min-height: var(--touch); padding: var(--s-2); border-radius: var(--r-sm); }
.map-list li a:hover { background: var(--c-surface-3); }
/* Places list: a folded group per region (js/map.js renderList), its places with their own icons. */
.map-list-group { list-style: none; border-bottom: 1px solid var(--c-border); }
.map-list-group summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--touch); padding: 0 var(--s-2); cursor: pointer; list-style: none; border-radius: var(--r-md);
  font: 700 var(--fs-14)/1.2 var(--f-body); color: var(--c-text); }
.map-list-group summary::-webkit-details-marker { display: none; }
.map-list-group summary:hover, .map-list-group summary:focus-visible { background: var(--c-surface-2); }
.map-list-group .mlg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-list-group summary .n { color: var(--c-secondary); font: 500 var(--fs-12)/1 var(--f-mono); }
.map-list-group .mlg-chev { width: 1rem; height: 1rem; color: var(--c-secondary); transition: transform .15s; }
.map-list-group details[open] .mlg-chev { transform: rotate(180deg); }
.map-list-group details > .map-list { margin: 0 0 var(--s-2); padding-left: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .map-list-group .mlg-chev { transition: none; } }
.pl-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; background: var(--cat); color: #120B14; }
.pl-icon .icon { width: .85rem; height: .85rem; }
.map-list:not(:empty) { margin-top: var(--s-2); }

/* Phones and short windows */
@media (max-width: 860px), (max-height: 500px) {
  .map-page { --gap: var(--s-2); }
  .compact-only { display: block; }
  .map-legend, .tb-wide, .map-toolbar .tb-select, .wide-only { display: none !important; }
  /* Phones keep the map clear: pinch zooms (no +/−), measuring stays on desktop, no scale or coordinates floating over it,
     and the tools step aside while the sheet or a card is open. */
  .map-toolbar [data-zoom], .map-toolbar [data-tool="measure"], .map-toolbar [data-grid], .map-toolbar .tb-sep, .map-footer { display: none !important; }
  .panel-hide, .panel-show { display: none !important; } /* phones have the sheet */
  .map-page:has(.map-panel.left[data-sheet="open"]) .map-toolbar, .map-page:has([data-detail]:not([hidden])) .map-toolbar { display: none; }
  .panel-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the h1 stays for screen readers; the handle names the sheet */
  .panel-top { padding: 0 0 var(--s-3); }
  .panel-search { margin: 0 var(--s-4); }
  .map-panel .scroll { padding: 0 var(--s-4) var(--s-4); }
  .sheet-handle { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 3.5rem; padding: var(--s-4) var(--s-4) var(--s-2); background: none; border: 0; color: var(--c-text); text-align: left; touch-action: none; }
  .sheet-grabber { position: absolute; top: var(--s-2); left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: var(--r-pill); background: var(--c-border-strong); }
  .sheet-handle-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
  .sheet-chevron { flex: none; transform: rotate(180deg); }
  .map-panel.left[data-sheet="open"] .sheet-chevron { transform: none; }
  .map-panel.left[data-sheet="closed"] .scroll { display: none; }
  /* Portrait: bottom sheet. Pin details replace it while open. */
  .map-panel.left { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75%; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .map-page:has([data-detail]:not([hidden])) .map-panel.left { display: none; }
  .map-panel.right { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .map-panel.right .scroll { padding: var(--s-4); }
  /* The card on a phone: a short picture strip, not a big 16:9 block. */
  .map-panel.right .pin-card-media { aspect-ratio: auto; height: 6.5rem; margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0; }
  .map-panel.right .county-card .pin-card-more .pin-card-media { margin: 0; }
  .map-panel.right .pin-card-fallback { width: 3rem; height: 3rem; }
  .map-panel.right .pin-card-fallback .icon { width: 1.5rem; height: 1.5rem; }
  .map-panel.right .pin-card { gap: var(--s-2); }
  .map-panel.right .pin-card-hero { --bleed: var(--s-4); height: 8.5rem; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  /* Closed sheet: just a floating search bar and a round Layers button (opens the sheet), like a phone maps app. */
  .sheet-layers-icon { display: none; }
  .map-panel.left[data-sheet="closed"] { background: none; border: 0; box-shadow: none; left: var(--gap); right: var(--gap); bottom: var(--gap); overflow: visible; }
  .map-panel.left[data-sheet="closed"] .panel-top { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--s-2); padding: 0; }
  .map-panel.left[data-sheet="closed"] .sheet-handle { flex: none; justify-content: center; width: 3.25rem; height: 3.25rem; min-height: 0; padding: 0; border-radius: 50%;
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
  .map-panel.left[data-sheet="closed"] .sheet-grabber, .map-panel.left[data-sheet="closed"] .sheet-chevron { display: none; }
  .map-panel.left[data-sheet="closed"] .sheet-handle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map-panel.left[data-sheet="closed"] .sheet-layers-icon { display: block; width: 1.25rem; height: 1.25rem; }
  .map-panel.left[data-sheet="closed"] .panel-search { flex: 1; margin: 0; }
  .map-panel.left[data-sheet="closed"] .panel-search .input { min-height: 3.25rem; background: var(--c-surface-1); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
  /* Tools: a column on the right; extra columns appear when the sheet leaves less height. */
  .map-toolbar { top: var(--gap); right: var(--gap); bottom: auto; left: auto; width: auto; margin: 0; display: flex; flex-direction: column;
    gap: 0; padding: 2px; border-radius: var(--r-pill); }
  .map-coords { display: block; position: absolute; z-index: 4; left: var(--gap); bottom: calc(var(--bottom-inset, 0px) + var(--gap)); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); pointer-events: none; white-space: nowrap; }
  .map-notice { top: var(--gap); left: var(--gap); right: calc(var(--toolbar-w, 3.5rem) + var(--gap) * 2); margin: 0; text-align: left; font-size: var(--fs-13); }
  .map-focus { left: var(--gap); right: calc(var(--toolbar-w, 3.5rem) + var(--gap) * 2); margin: 0; max-width: max-content; }
  /* Measuring / dropping your own pin: across the bottom, above the search bar and the places count (no side panel to clear). */
  .map-measure { left: var(--gap); right: var(--gap); bottom: calc(var(--bottom-inset, 0px) + var(--gap) + 3.5rem); flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); }
  .map-measure [role="status"], .map-measure [data-measure-text] { flex: 1 1 10rem; }
  /* "Add my pin" in the top-right corner; the tools, notices and the Showing line start a row lower (--phone-row). */
  .map-page { --phone-row: var(--top-row); }
  .map-toolbar { top: calc(var(--gap) + var(--phone-row)); }
  .map-notice, .map-focus { top: calc(var(--gap) + var(--phone-row)); }
  .map-page:has(.map-panel.left[data-sheet="open"]) .map-pills, .map-page:has([data-detail]:not([hidden])) .map-pills { display: none; }
  /* Get the app: a slim bar across the top; the buttons, tools and notices move down a row under it. */
  .map-app-bar { position: absolute; z-index: 6; top: var(--gap); left: var(--gap); right: var(--gap); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border-radius: var(--r-lg); border: 1px solid var(--c-border-strong); }
  .map-app-bar[hidden] { display: none; }
  .map-app-bar > .icon { flex: none; color: var(--c-pink-text); }
  .map-app-bar > span { flex: 1; line-height: 1.3; }
  .map-app-bar .btn, .map-app-bar .icon-btn { flex: none; min-height: var(--touch); }
  .map-app-bar .icon-btn { border: 0; background: none; }
  .map-page.has-app-bar { --phone-row: calc(var(--top-row) + var(--touch) + var(--s-2) + var(--gap)); }
  .map-page.has-app-bar .map-pills { top: calc(var(--gap) * 2 + var(--touch) + var(--s-2)); }
  .map-page:has(.map-panel.left[data-sheet="open"]) .map-app-bar, .map-page:has([data-detail]:not([hidden])) .map-app-bar { display: none; }
  .map-drag-mode { left: var(--gap); right: auto; margin: 0; bottom: calc(var(--bottom-inset, 0px) + var(--gap) * 3 + 3.25rem + var(--touch)); } /* a row above the places count */
  .map-page:has(.map-panel.left[data-sheet="open"]) .map-drag-mode, .map-page:has([data-detail]:not([hidden])) .map-drag-mode { display: none; }
  .map-scale-phone:not([hidden]) { display: inline-flex; position: absolute; z-index: 4; left: var(--gap); bottom: calc(var(--bottom-inset, 0px) + var(--gap) + 2.25rem); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); }
}
/* Phone landscape: side sheet on the left, details in the same place while open. */
@media (max-height: 500px) and (orientation: landscape) {
  .map-panel.left, .map-panel.right { top: var(--gap); left: var(--gap); right: auto; bottom: auto; width: min(22rem, 48%); max-height: calc(100% - var(--gap) * 2); border-radius: var(--r-lg); border-bottom: 1px solid var(--glass-border); padding-bottom: 0; }
  .map-panel.left[data-sheet="open"] { bottom: var(--gap); }
  .map-coords { left: auto; right: calc(var(--toolbar-w, 3.5rem) + var(--gap) * 2); bottom: var(--gap); }
  .map-scale-phone:not([hidden]) { left: auto; right: calc(var(--toolbar-w, 3.5rem) + var(--gap) * 2); bottom: calc(var(--gap) + 2.25rem); }
  .map-notice { left: calc(min(22rem, 48%) + var(--gap) * 2); }
  .map-panel.left[data-sheet="closed"] { right: auto; bottom: auto; } /* landscape: the search bar sits top left */
}
/* MapLibre markers + popups */
.marker { --cat: var(--c-pink-fill); position: relative; width: 2.25rem; height: 2.25rem; border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 85%, #fff), var(--cat) 60%, color-mix(in srgb, var(--cat) 80%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(255,255,255,.35), 0 4px 10px color-mix(in srgb, var(--cat) 55%, transparent); border: 0; padding: 0; }
.marker::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: color-mix(in srgb, var(--cat) 80%, #000); z-index: -1; }
.marker .icon { width: 1.1rem; height: 1.1rem; }
.marker.is-unverified { background: rgba(21,13,28,.75); color: var(--cat); outline: 2px dashed var(--cat); outline-offset: -2px; }
.marker.is-selected { background: #fff; color: var(--cat); box-shadow: 0 0 0 3px var(--cat), 0 6px 14px rgba(0,0,0,.4); }
.marker.is-live { animation: marker-pulse 2s ease-in-out infinite; }
.marker.is-ghost { opacity: .45; filter: grayscale(.4); }
@keyframes marker-pulse { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 .5rem color-mix(in srgb, var(--cat) 25%, transparent); } }
.marker-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--cat); box-shadow: 0 0 0 2px rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer; }
.cluster { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-bg); color: var(--c-text); font: 700 var(--fs-18) var(--f-body); box-shadow: 0 0 0 3px var(--c-pink-fill), 0 0 0 6px rgba(13,8,18,.6); border: 0; cursor: pointer; }
/* Place names (map.js; Admin → Map → Place names picks each level's style). Pills (counties, cities): a dark pill that
   zooms in, pink on hover/focus (white on #D23867 passes AA). Text levels: light names with a dark halo, readable on any
   part of the painted map. Names that would overlap fade out (.is-off) but stay laid out, so they can be measured. */
.place-name { color: var(--c-text); white-space: nowrap; text-decoration: none; transition: opacity .2s, visibility 0s; }
.place-name.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s linear .2s; }
.place-name.is-crowded { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s linear .2s; } /* would overlap a more important name (declutter) */
.place-name.style-pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--touch); padding: 0 12px 0 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-bg) 80%, transparent); border: 1px solid color-mix(in srgb, var(--c-text) 35%, transparent);
  font: 600 var(--fs-17)/1 var(--f-eyebrow); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: opacity .2s, visibility 0s, background-color .15s, border-color .15s; }
.place-name.style-pill:hover, .place-name.style-pill:focus-visible, .place-name.style-pill.is-hover { background: color-mix(in srgb, var(--c-pink-fill) 92%, transparent); border-color: var(--c-pink-text); color: var(--c-on-pink); }
/* Faint: as if printed on the map (county names on a paper map): wide, spaced capitals, half see-through, no box. A dark
   halo keeps it readable (large text, 3:1) over land and sea; full strength under the pointer or focus. */
.place-name.style-faint { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s-2) 0 calc(var(--s-2) + .32em); background: none; border: 0;
  font: 600 var(--fs-22)/1 var(--f-eyebrow); text-transform: uppercase; letter-spacing: .32em; color: color-mix(in srgb, var(--c-text) 66%, transparent);
  text-shadow: 0 0 3px #0D0812, 0 0 8px rgba(13,8,18,.85); cursor: pointer; transition: opacity .2s, visibility 0s, color .15s; }
.place-name.style-faint:hover, .place-name.style-faint:focus-visible, .place-name.style-faint.is-hover { color: var(--c-text); }
.place-name.style-faint:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); }
@media (prefers-reduced-transparency: reduce) { .place-name.style-faint { color: var(--c-text); } }
/* A region's name (it has a drawn shape): its name in its colour over "75 PLACES", a dark card that takes the region's
   colour as its border under the pointer, as its shape lights up. */
/* A region's card: small at first (what it is, how many, Show / More); its picture sits under More, inside the card. */
.county-card > .pin-card-close { top: calc(var(--s-2) * -1); right: calc(var(--s-2) * -1); }
.county-card .pin-card-kicker, .county-card .pin-card-title { padding-right: var(--touch); }
.county-card .pin-card-actions { display: flex; }
.county-card .pin-card-more .pin-card-media { margin: 0; border-radius: var(--r-md); }
.place-name.style-pill.is-region { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.place-name.style-pill.is-region .place-title { color: var(--region); font-size: var(--fs-20); font-weight: 800; }
.place-name.style-pill.is-region .place-count { padding: 0; background: none; font: 600 var(--fs-12)/1.1 var(--f-body); letter-spacing: .12em; color: var(--c-text); }
/* Crowded (declutter): a slimmer pill without the count, so every region still shows; the tap area stays 44 px. */
.place-name.style-pill.is-region.is-tight { min-height: 0; padding: 3px 10px; }
.place-name.style-pill.is-region.is-tight .place-title { font-size: var(--fs-16); }
.place-name.style-pill.is-region.is-tight .place-count { display: none; }
.place-name.style-pill.is-region.is-tight::after { content: ''; position: absolute; inset: min(-.5rem, calc((100% - var(--touch)) / 2)) 0; }
.place-name.style-pill.is-region:hover, .place-name.style-pill.is-region:focus-visible, .place-name.style-pill.is-region.is-hover { background: color-mix(in srgb, var(--c-bg) 95%, transparent); border-color: var(--region); color: var(--c-text); }
.place-name.style-pill { z-index: 1; } /* above cluster counts: the way in at county zoom */
/* Map lettering: the region's name printed on the map like a classic atlas: spaced capitals in its colour with a dark
   edge (readable over land and sea), no box, no count. A 44 px tap area round it. */
.place-name.style-lettering { z-index: 1; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s-1) 0 calc(var(--s-1) + .18em);
  background: none; border: 0; font: 700 var(--fs-22)/1 var(--f-title); text-transform: uppercase; letter-spacing: .18em; color: var(--region, var(--c-text));
  text-shadow: 0 0 2px #0D0812, 0 0 2px #0D0812, 0 0 4px #0D0812, 0 1px 8px rgba(13,8,18,.85); cursor: pointer; transition: opacity .2s, visibility 0s, filter .15s; }
.place-name.style-lettering:hover, .place-name.style-lettering.is-hover { filter: brightness(1.25); z-index: 2; }
.place-name.style-lettering:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); z-index: 2; }
.place-name.style-lettering.is-tight { font-size: var(--fs-17); letter-spacing: .14em; }
@media (max-width: 640px) { .place-name.style-lettering { font-size: var(--fs-18); } }
@media (prefers-reduced-motion: reduce) { .place-name.style-lettering { transition: none; } }
.place-name.style-pill.is-hover, .place-name.style-pill:hover, .place-name.style-pill:focus-visible { z-index: 2; }
.place-name.style-pill:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.place-count { padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-text) 14%, transparent); font: 600 var(--fs-12)/1.2 var(--f-mono); letter-spacing: 0; }
/* Towns, landmarks, buildings, like the game's land labels (Dalton Island, Gloriana Key): semibold, title case, no tracking,
   off-white, with a thin soft charcoal halo (no drop shadow) that reads on sand, land and water alike. */
.place-name:not(.style-pill):not(.style-faint):not(.style-lettering) { display: inline-block; padding: .125rem .25rem; font-family: var(--f-body); font-weight: 600; text-transform: none; letter-spacing: 0;
  color: #F2F2F2; text-shadow: 0 0 2px #333, 0 0 2px #333, 0 0 1px #222; }
/* (no position here: MapLibre positions markers absolutely; "relative" pushed each name along by the ones before it) */
.place-name:not(.style-pill):not(.style-faint):not(.style-lettering)::after { content: ''; position: absolute; inset: 0 -.25rem min(-1.5rem, calc(100% - var(--touch))); } /* a 44 px tap area that doesn't push other names away; downward only, so it never covers the pin above it */
.place-name:not(.style-pill):not(.style-faint):not(.style-lettering):hover, .place-name:not(.style-pill):not(.style-faint):not(.style-lettering):focus-visible { /* white over any map colour (pink text couldn't be read on every one): an underline and a firmer dark edge say it's a link */
  color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-shadow: 0 0 2px #111, 0 0 3px #111, 0 0 1px #000; }
.place-name:not(.style-pill):not(.style-faint):not(.style-lettering):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-radius: var(--r-xs); }
.place-name.style-large { font-size: var(--fs-20); } /* towns: clearly bigger than landmarks (medium, 14) */
.place-name.style-medium { font-size: var(--fs-14); }
.place-name.style-small { font-size: var(--fs-12); }
@media (prefers-reduced-motion: reduce) { .place-name, .place-name.is-off, .place-name.style-pill { transition: none; } }
/* A dark chip so the square's name reads on any part of the map picture. */
.grid-name { font: 600 var(--fs-12)/1 var(--f-mono); color: #F4F1F7; background: rgba(13,8,18,.82); padding: 3px 5px; border-radius: var(--r-xs); pointer-events: none; }
.maplibregl-popup-content { background: var(--c-surface-2) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong); border-radius: var(--r-md) !important; padding: var(--s-3) var(--s-4) !important; box-shadow: var(--sh-card) !important; }
.maplibregl-popup-tip { border-top-color: var(--c-surface-2) !important; border-bottom-color: var(--c-surface-2) !important; }
.maplibregl-popup-content { padding-right: 3rem !important; }
.maplibregl-popup-close-button { width: var(--touch); height: var(--touch); font-size: var(--fs-22); line-height: 1; color: var(--c-secondary); border-radius: var(--r-md); }
.maplibregl-popup-close-button:hover { background: var(--c-surface-3) !important; color: var(--c-text); }
.maplibregl-popup .btn-sm { min-height: var(--touch); }
.maplibregl-ctrl-attrib { background: rgba(13,8,18,.6) !important; color: var(--c-muted) !important; }
.maplibregl-ctrl-attrib a { color: var(--c-secondary) !important; }


/* Kept after the rules above, as in app.css before the split (they refine them). */
/* Map options: a clear button near the top of the Pins tab (it was a faint line under the whole category list) */
.map-options { margin-top: var(--s-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-1); padding: 0 var(--s-3); }
.map-options summary { color: var(--c-text); }
.map-options summary > span { display: grid; line-height: 1.2; flex: 1; }
.map-options summary .xsmall { font-weight: 400; }
.map-options-chev { margin-left: auto; transition: transform .15s ease; }
.map-options[open] .map-options-chev { transform: rotate(180deg); }
.map-options[open] { padding-bottom: var(--s-3); }
@media (prefers-reduced-motion: reduce) { .map-options-chev { transition: none; } }
/* Map options header: even space above and below, icon, text and arrow centred on one line */
.map-options summary { align-items: center; min-height: 3.5rem; padding: var(--s-2) 0; gap: var(--s-3); }
.map-options summary > span { gap: 2px; }
.map-options summary > .icon { flex: none; }

@media (pointer: coarse) { .panel-version select { min-height: var(--touch); } } /* touch screens: 44 px (as app.css's touch rule) */

/* The place whose card is open: its name stays, on a dark backing with an underline, readable over any part of the map. */
/* The open name below the open pin's round blip (--open-drop, js/map.js openDrop): a place name's marker is 4px under its
   spot, an open pin name's 18px. */
.place-name.is-open.maplibregl-marker-anchor-top:not(.style-pill) { margin-top: max(0px, calc(var(--open-drop, 26px) - 4px)); }
.pin-name.is-open { margin-top: max(0px, calc(var(--open-drop, 26px) - 18px)); }
.place-name.is-open:not(.style-pill) { z-index: 3; color: #FFFFFF; background: rgba(13, 8, 18, .78); border-radius: var(--r-sm); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-shadow: none; }
.place-name.style-pill.is-open { z-index: 3; border-color: var(--c-pink-text); }
/* An open pin's name (businesses, vehicles…): the same as an open place's. */
.pin-name.is-open { z-index: 3; color: #FFFFFF; background: rgba(13, 8, 18, .78); border-radius: var(--r-sm); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-shadow: none; }

/* Suggest an edit on a pin's card: one link that opens the three kinds (details, spot, not there). */
.pin-suggest-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.pin-suggest-pick > span { flex-basis: 100%; color: var(--c-secondary); }

/* Suggest a fix (js/map.js fixForm): a switch, the boxes that choice needs, Send. Kept calm: no legend, no long lines. */
.fix-card { gap: var(--s-3); width: 100%; }
.fix-card .fix-kind { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.fix-card .fix-kind button { justify-content: center; min-height: var(--touch); padding: var(--s-1) var(--s-2); font-size: var(--fs-14); line-height: 1.2; white-space: normal; text-align: center; }
.fix-card .fix-actions > span { flex-basis: 100%; }
.fix-fields { display: grid; gap: var(--s-1); }
.fix-fields[hidden] { display: none; }
.fix-fields label { color: var(--c-secondary); }
.fix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fix-actions .btn { min-height: var(--touch); }