/* OPSZ brand: black and white, Chakra Petch labels, IBM Plex Sans text, JetBrains Mono numbers.
   Fonts are vendored (vendor/fonts) so the map stays usable offline. */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/chakra-petch-600-latin.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/chakra-petch-700-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(vendor/fonts/ibm-plex-sans-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/jetbrains-mono-latin.woff2) format("woff2")}
:root{color-scheme:dark;--surface:rgba(10,10,10,.8);--panel:rgba(10,10,10,.9);--field:rgba(22,22,22,.8);--border:rgba(255,255,255,.17);--border-strong:rgba(255,255,255,.42);--text:#f4f4f4;--muted:#a3a3a3;--accent:#f4f4f4;--ink:#0a0a0a;--display:"Chakra Petch",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:#0a0a0a;color:var(--text);font:12px/1.45 "IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#map{position:absolute;inset:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.panel{position:absolute;z-index:3;left:12px;top:12px;width:282px;display:grid;gap:6px;pointer-events:none}
.panel>*{pointer-events:auto}
button,select,input,summary{font:inherit;cursor:pointer}
button,select{color:var(--text)}
button,select,.toggle,.map-info>summary,.readout,.brand{background:var(--surface);border:1px solid var(--border);border-radius:2px;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 2px 10px #0006}
/* labels on controls read like the OPSZ console: uppercase display face */
button,select,.toggle{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
button,select,.toggle{min-height:32px}
button{padding:5px 8px}
select{min-width:0;padding:5px 6px}
select option{background:#141414;color:var(--text)}
button:hover,select:hover,.toggle:hover,.map-info>summary:hover{border-color:var(--border-strong);background:rgba(30,30,30,.9)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled,select:disabled,input:disabled{cursor:wait;opacity:.55}
.toolbar{display:flex;gap:6px;align-items:stretch}
#mapSelect{flex:1;width:0;font-weight:650}
.mode{display:flex;gap:0}
.mode button{padding:5px 7px;font-size:11px;min-width:31px;border-radius:0}
.mode button:first-child{border-radius:2px 0 0 2px}
.mode button:last-child{border-radius:0 2px 2px 0;border-left:0}
.mode .selected,.mode .selected:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.places{display:flex;gap:6px}
.places button{flex:1;white-space:nowrap;font-size:10px;padding:4px 6px;min-height:28px}
.layer-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.toggle{display:flex;align-items:center;gap:5px;padding:5px 6px;font-size:10px;white-space:nowrap;color:var(--muted)}
.toggle input{margin:0;width:13px;height:13px;accent-color:var(--accent);flex:none}
.toggle:has(input:checked){border-color:rgba(255,255,255,.34);color:var(--text)}
.trail-toggle{grid-column:1/3}
.trail-key{display:flex;align-items:center;gap:4px;margin-left:auto}
#hikingMarkerKey{display:flex;align-items:center;gap:4px}
.trail-key .trail-line{width:18px;height:4px;border:1px solid #ffd9a0;background:#f4b45dcc;border-radius:1px}
.trail-key .marker-red,.trail-key .marker-blue,.trail-key .marker-yellow,.trail-key .marker-green{width:6px;height:6px;border:1px solid #fff8e8;border-radius:50%}
.marker-red{background:#e34c45}.marker-blue{background:#438de2}.marker-yellow{background:#f4cf45}.marker-green{background:#59b96b}
#exaggeration{font-size:10px;padding-left:7px;letter-spacing:.02em}
.map-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px}
.map-actions button{font-size:11px;padding-inline:4px}
.map-info>summary{display:flex;align-items:center;justify-content:center;width:30px;height:32px;list-style:none;font-weight:700;font-family:var(--display);font-size:15px}
.map-info>summary::-webkit-details-marker{display:none}
.map-info[open]>summary{color:var(--ink);background:var(--accent);border-color:var(--accent)}
.info-content{position:absolute;z-index:5;left:0;top:38px;right:0;max-height:calc(100dvh - 104px);overflow:auto;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:2px;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);padding:14px;box-shadow:0 6px 24px #0004;color:var(--muted)}
.info-content h1{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:var(--text)}
.info-content p{margin:7px 0;font-size:11px}
.info-content dl{margin:10px 0;padding:8px 0;border-block:1px solid var(--border)}
.info-content dl>div{display:flex;justify-content:space-between;gap:10px}
.info-content dd{margin:0;color:var(--text);font-family:var(--mono);font-size:11px;text-align:right}
.info-content .scope{padding-top:8px;border-top:1px solid var(--border)}
/* brand mark bottom-left, the way map apps place their logos; the readout sits beside it */
.brand{position:absolute;z-index:2;left:12px;bottom:12px;display:flex;align-items:center;height:31px;padding:0 9px;pointer-events:none}
.brand img{display:block;height:18px;width:auto}
.readout{position:absolute;left:89px;bottom:12px;display:flex;align-items:center;gap:12px;padding:6px 9px;max-width:calc(100% - 189px);font-family:var(--mono);font-variant-numeric:tabular-nums;pointer-events:none}
.readout span{font-size:10px;color:var(--muted)}
.readout strong{font-size:12px;font-weight:500;white-space:nowrap}
#status{position:absolute;left:12px;top:205px;max-width:min(460px,calc(100% - 72px));padding:7px 10px;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:2px;font-family:var(--mono);font-size:11px}
#status.ready{display:none}
#status.error{color:#ffb3a5;border-color:#df7e6370;border-left-color:#ffb3a5}
.maplibregl-ctrl-top-right{top:2px;right:2px}
.maplibregl-ctrl-group{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:2px!important;overflow:hidden;backdrop-filter:blur(9px)}
.maplibregl-ctrl-group button{border-radius:0;background:transparent;box-shadow:none;min-height:32px;width:32px}
.maplibregl-ctrl-group button+button{border-top-color:var(--border)!important}
.maplibregl-ctrl-group button span{filter:invert(1)}
.maplibregl-ctrl-group button:hover{background:#ffffff1f!important}
.maplibregl-ctrl-scale{color:var(--text)!important;background:var(--surface)!important;border-color:var(--muted)!important;font-family:var(--mono)!important;font-size:10px!important}
.maplibregl-ctrl-attrib{color:var(--muted)!important;background:var(--surface)!important;font-size:9px!important;border-radius:2px!important}
.maplibregl-ctrl-attrib a{color:var(--muted)!important}
.maplibregl-ctrl-attrib-button{filter:invert(1)}
.maplibregl-popup-content{color:var(--text)!important;background:rgba(10,10,10,.95)!important;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:2px!important;backdrop-filter:blur(9px)}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#0a0a0af2!important}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#f4f4f4!important}
.maplibregl-popup-close-button{color:var(--text);min-height:26px;box-shadow:none;backdrop-filter:none;background:transparent;border-color:transparent;font-family:inherit}
.building-popup{font:11px/1.6 "IBM Plex Sans",system-ui;color:var(--muted)}
.building-popup strong{display:block;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;color:var(--text)}
.building-popup div:last-child{margin-top:6px}
.directions{padding:10px;border:1px solid var(--border);border-radius:2px;background:var(--panel);backdrop-filter:blur(12px);max-height:calc(100dvh - 254px);overflow:auto;box-shadow:0 6px 24px #0004}
[hidden]{display:none!important}
.directions-heading{position:sticky;top:-10px;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:-10px -10px 9px;padding:2px 2px 2px 10px;background:var(--accent);color:var(--ink)}
.directions-heading strong{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.directions-heading button{font-size:20px;line-height:1;padding:0 7px;min-height:28px;color:var(--ink);background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.directions-heading button:hover{background:#0000001a;border-color:transparent}
.route-modes{display:flex;gap:5px;margin-bottom:9px}
.route-modes button{flex:1}
.route-modes #routeSwap{flex:0 0 32px;font-size:18px;padding:0}
.route-modes .selected,.route-field button.selected,.route-modes .selected:hover,.route-field button.selected:hover{border-color:var(--accent);color:var(--ink);background:var(--accent)}
.route-field{display:flex;gap:5px;align-items:center;margin-top:6px}
.route-field label{font-weight:800;width:13px;flex:none;color:var(--accent)}
.route-field input{min-width:0;width:0;flex:1;border:1px solid var(--border);border-radius:2px;background:var(--field);color:var(--text);padding:7px 6px;cursor:text;font-size:11px;min-height:34px}
.route-field input::placeholder{color:#8f8f8f}
.route-field button{width:32px;flex:none;padding:0;font-size:18px}
.route-results{display:grid;gap:2px;margin:5px 0 6px 18px;max-height:210px;overflow:auto}
/* place names stay in sentence case for scanning */
.route-results button,.route-options button,.popup-directions button{font-family:inherit;font-weight:600;text-transform:none;letter-spacing:0}
.route-results button{text-align:left;font-size:11px;padding:6px 8px}
.route-results small{display:block;color:var(--muted);font-size:10px}
#routeStatus{font-size:11px;margin:10px 0;color:var(--text)}
#routeStatus.error{color:#ffb3a5}
#routeSteps{padding-left:23px;margin:8px 0;font-size:11px}
#routeSteps li{padding:5px 0;border-top:1px solid #ffffff12}
.route-note{color:var(--muted);font-size:10px;line-height:1.4;margin:9px 0}
#routeClear{width:100%;font-size:11px}
#directionsToggle[aria-expanded="true"],#resourcesToggle[aria-expanded="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
#routeAddStop{margin-top:7px;width:100%;font-size:11px}
.stop-actions{display:flex;gap:4px;justify-content:flex-end;margin:3px 0}
.stop-actions button{font-size:10px;min-height:25px;padding:2px 7px}
.route-options{display:grid;gap:5px;margin:8px 0}
.route-options button{text-align:left;font-size:11px;display:flex;justify-content:space-between;gap:6px}
.route-options button small{color:var(--muted);font-size:10px}
.route-options button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--ink)}
.route-options button[aria-pressed="true"] small{color:#3d3d3d}
.route-estimate-settings{font-size:10px;color:var(--muted);margin:8px 0}
.route-estimate-settings summary{padding:4px 0}
.route-estimate-settings p{margin:5px 0;line-height:1.4}
.route-speed-fields{display:flex;gap:7px;margin-top:5px}
.route-speed-fields label{flex:1;min-width:0}
.route-speed-fields input{width:100%;min-width:0;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:2px;padding:5px;margin-top:3px;cursor:text}
.route-marker{border:2px solid #f4f4f4;border-radius:50%;background:#5c5c5c;color:#f4f4f4;width:28px;height:28px;display:grid;place-items:center;font-family:var(--display);font-weight:700;box-shadow:0 2px 7px #0009;cursor:grab}
.route-marker[data-endpoint="from"]{background:#f4f4f4;color:#0a0a0a;border-color:#0a0a0a}
.route-marker[data-endpoint="to"]{background:#0a0a0a;color:#f4f4f4;border-color:#f4f4f4}
.popup-directions{display:flex;gap:5px}
.popup-directions button{flex:1;font-size:11px}
@media(max-width:480px){.panel{left:10px;top:10px;width:calc(100% - 64px);max-width:282px}.brand{left:10px;bottom:10px}.readout{left:87px;bottom:10px;gap:8px;padding:5px 7px;max-width:calc(100% - 184px)}.places button{padding-inline:4px}#status{left:10px;top:203px}.info-content{max-height:calc(100dvh - 94px)}}
@media(pointer:coarse){button,select,.toggle{min-height:40px}.places button{min-height:40px}.mode button{min-width:35px}.map-info>summary{width:34px;height:40px}.info-content{top:46px}#status{top:247px}}
@media(pointer:coarse){.directions{max-height:calc(100dvh - 280px)}.route-field input{min-height:40px}.route-modes #routeSwap,.route-field button{min-width:40px}.directions-heading button{min-width:40px;min-height:40px}}
@media(max-width:699px){.directions{max-height:min(42dvh,calc(100dvh - 236px))}}
@media(pointer:coarse){.stop-actions button{min-height:40px;min-width:40px}.route-speed-fields input{min-height:40px}}

#resourcesToggle{font-size:10px;padding-inline:3px}
.resources-panel{position:absolute;z-index:4;top:12px;left:306px;width:290px;max-height:calc(100dvh - 70px);overflow:auto;border:1px solid var(--border);border-radius:2px;background:var(--panel);backdrop-filter:blur(12px);padding:10px;box-shadow:0 6px 24px #0004}
.resource-note,#resourcesStatus{font-size:10px;color:var(--muted);margin:6px 0}
#resourcesStatus.error{color:#ffb3a5}
.resource-color-control{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin:9px 0}
.resource-color-control select{max-width:185px;font-size:11px}
.resource-search-row{display:flex;gap:6px;margin:8px 0}
.resource-search-row input{min-width:0;flex:1;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:2px;padding:6px;cursor:text;font:inherit}
.resource-search-row button{font-size:10px;white-space:nowrap}
#resourceFilters fieldset{border:0;border-top:1px solid var(--border);padding:6px 0;margin:10px 0 0;min-width:0}
#resourceFilters legend{padding:0 5px 0 0;color:var(--muted);font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.resource-filter{display:flex;gap:7px;align-items:center;min-height:30px;cursor:pointer;font-size:11px;padding:3px;border-radius:4px}
.resource-filter:hover{background:#ffffff0c}
.resource-filter input{margin:0;accent-color:var(--accent);width:14px;height:14px}
.resource-filter i,.resource-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;flex:none}
.resource-filter span{flex:1;min-width:0}.resource-filter small{color:var(--muted);font-size:9px;font-variant-numeric:tabular-nums}
.resource-legend{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:9px;color:var(--muted)}
.resource-legend span{display:flex;gap:4px;align-items:center}.resource-legend p{width:100%;margin:4px 0}
.resource-popup{max-height:45dvh;overflow:auto;overflow-wrap:anywhere;padding-right:4px}
@media(max-width:699px){.resources-panel{left:10px;top:204px;max-width:282px;width:calc(100% - 64px);max-height:calc(100dvh - 263px)}}
@media(pointer:coarse){.resource-filter{min-height:40px}.resource-search-row input{min-height:40px}.resource-filter input{width:17px;height:17px}}
@media(max-width:699px) and (pointer:coarse){.resources-panel{top:240px;max-height:calc(100dvh - 298px)}}

.resource-inactive{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted);min-height:32px;margin-top:8px}.resource-inactive input{accent-color:var(--accent)}
@media(pointer:coarse){.resource-inactive{min-height:40px}}