/* Map chrome shared by every page with a Leaflet map: segmented controls and the portal's dark
   treatment of Leaflet's own controls, so a map looks the same wherever it appears. */
.wd-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--wd-border, #293241); border-radius: var(--wd-radius-pill, 22px); background: var(--wd-surface-raised, #171d27); }
.wd-seg-cap { padding: 0 .5rem 0 .45rem; color: var(--wd-muted, #96a0af); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-seg button { border: 1px solid transparent; border-radius: var(--wd-radius-pill, 22px); background: transparent; color: var(--wd-muted, #96a0af); padding: .38rem .7rem; font: 600 .75rem/1 Roboto, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.wd-seg button:hover:not(:disabled) { color: var(--wd-text, #f7f8fa); }
.wd-seg button[aria-pressed="true"] { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .15); color: var(--wd-text, #f7f8fa); }
.wd-seg button:disabled { opacity: .4; cursor: not-allowed; }
.wd-seg button[hidden] { display: none; }

.wd-basemap-control.wd-seg { margin: 10px; background: rgba(14, 19, 26, .92); }

.leaflet-container { background: #0a0f16; font-family: Roboto, ui-sans-serif, system-ui, sans-serif; }
.leaflet-bar { border: 1px solid var(--wd-border, #293241); box-shadow: none; }
.leaflet-control-zoom a { font-family: var(--wd-font-mono, monospace); }
.leaflet-bar a, .leaflet-bar a:hover { border-bottom-color: var(--wd-border, #293241); background-color: rgba(14, 19, 26, .94); color: var(--wd-text, #f7f8fa); }
.leaflet-bar a:hover { background-color: var(--wd-surface-raised, #171d27); }
.leaflet-bar a.leaflet-disabled { color: #566176; }
.leaflet-control-attribution { background: rgba(14, 19, 26, .82) !important; color: var(--wd-muted, #96a0af) !important; font-size: .62rem; }
.leaflet-control-attribution a { color: var(--wd-blue, #60a5fa) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--wd-surface-raised, #171d27); color: var(--wd-text, #f7f8fa); border: 1px solid var(--wd-border, #293241); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.leaflet-popup-close-button { color: var(--wd-muted, #96a0af) !important; }

/* Dark and Light basemaps are the standard OSM tiles restyled (see shared/basemaps.js). Inverting
   and rotating the hue back keeps water blue and parks green, only darker. */
.wd-tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.7); }
.wd-tiles-light { filter: grayscale(.8) brightness(1.06) contrast(.92); }

/* Leaflet panes and controls use z-index up to 1000. Without their own stacking context they
   paint over the sticky site header (z-index 900) when the page scrolls under it. */
.leaflet-container { isolation: isolate; }

/* Route pins (public/shared/route-pins.js): diamonds with a dark casing, the start an outline,
   the finish solid, the fastest point a smaller outline. A square turned 45° is 1.41x its side
   across, so a 12 px side gives a 17 px diamond. */
.wd-route-pin { overflow: visible; background: transparent; border: 0; }
.wd-route-pin__mark { position: absolute; left: -6px; top: -6px; box-sizing: border-box; width: 12px; height: 12px; rotate: 45deg; outline: 2px solid var(--wd-inset, #0a0e14); }
.wd-route-pin--start .wd-route-pin__mark { border: 2.5px solid var(--wd-steel, #9fb4cc); background: var(--wd-inset, #0a0e14); }
.wd-route-pin--finish .wd-route-pin__mark { background: var(--wd-red, #ef4444); }
.wd-route-pin--top .wd-route-pin__mark { left: -5px; top: -5px; width: 10px; height: 10px; border: 2px solid var(--wd-red, #ef4444); background: var(--wd-inset, #0a0e14); }
.wd-route-pin__label { position: absolute; left: 12px; top: -34px; padding: .18rem .55rem; border: 1px solid var(--wd-border, #2a3441); border-radius: 8px; background: rgba(14, 19, 26, .94); color: var(--wd-text, #f5f7fa); font: 700 .68rem/1.2 Roboto, ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
.wd-route-pin--top .wd-route-pin__label { top: 14px; }