*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#10222f;color:#eef4fa;font:15px system-ui,sans-serif;--panel:#10222ff7;--border:#45616d;--accent:#c6adff}
#map{position:fixed;inset:0;background:#263b49}
header,aside,#drive,#pickHint{position:absolute;z-index:1;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 26px #0003}
header{inset:12px auto auto 12px;padding:8px 10px;display:flex;align-items:center;gap:9px}
header img{border-radius:9px}
header strong{font-size:23px;letter-spacing:-.6px;color:var(--accent)}
.country{font-size:13px;color:#c7d7e0}
aside{left:12px;top:75px;width:min(380px,calc(100vw - 24px));padding:12px;max-height:calc(100dvh - 110px);overflow:auto}
button,select,input:not([type=checkbox],[type=range],[type=file]){font:inherit;border-radius:8px;border:1px solid #6c8092;background:#1c3345;color:#fff;padding:9px 10px}
button{cursor:pointer;min-height:40px}
button:disabled{opacity:.58;cursor:default}
button[aria-pressed=true],button.accent{background:var(--accent);border-color:var(--accent);color:#211538;font-weight:650}
a{color:#dccaff}
input{min-width:0}
input:not([type=checkbox],[type=range],[type=file]),select{width:100%}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
details{padding:9px 0;border-top:1px solid var(--border)}
summary{cursor:pointer;font-weight:650;padding:2px 0}
p{margin:7px 0;color:#c5d9e1}
form,.row{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0}
form input,.row input:not([type=checkbox],[type=range],[type=file]){flex:1}
.row select{width:auto;max-width:100%}
#results button{display:block;margin:5px 0;text-align:left;width:100%}
#results{max-height:200px;overflow:auto}
.maplibregl-popup-content{color:#10222f;padding:15px}
#status,#mapSummary,#offlineReady,#batteryState,footer{font-size:13px}
.chip{display:inline-block;padding:4px 8px;background:#214348;color:#d2fbeb;border-radius:6px;font-size:12px}
.chip.offline{background:#514151;color:#ffe3b9}
progress{width:100%;margin-top:8px;accent-color:var(--accent)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.checks label,.volume{display:flex;align-items:center;gap:5px}
.file{display:block;margin-top:8px}
.file input{display:block;width:100%;margin:4px 0}
#drive{top:12px;right:12px;max-width:min(350px,calc(100vw - 24px));padding:5px 10px;font-variant-numeric:tabular-nums}
#drive p{margin:3px 0;font-size:14px}
.metrics{align-items:center;margin:2px 0}
#speed{font-weight:750;font-size:20px}
#limit{min-width:32px;text-align:center;font-weight:750;border:3px solid #e86264;background:#fff;color:#20252b;border-radius:999px;padding:3px}
#speed.over{color:#ffaca6}
#alert{color:#ffdab3}
#pickHint{left:50%;transform:translateX(-50%);bottom:36px;width:max-content;max-width:calc(100vw - 28px);padding:7px 10px;color:#fff}
footer{margin-top:3px;color:#b5ccd8}
@media(max-width:650px){
  header{top:8px;left:8px}.country{display:none}
  aside{left:8px;top:68px;width:min(365px,calc(100vw - 16px));max-height:calc(64dvh - 68px)}
  #drive{top:auto;right:8px;bottom:45px;max-width:calc(100vw - 90px)}
  #pickHint{bottom:125px}
}
.metric{display:grid;gap:2px;text-align:center;min-width:86px}
.metric small{font-size:11px;color:#c5d9e1}
#speed{font-size:25px;white-space:nowrap}
#limit{justify-self:center;min-width:43px;font-size:20px}
.traffic{display:flex;align-items:center;gap:8px;margin:0 0 8px}
#trafficStatus{font-size:12px;color:#c5d9e1}
#remaining{color:#c5d9e1}
#alternatives button[aria-pressed=true]{background:#7452b6;border-color:#bda7ec}
#settlementResults{max-height:360px;overflow:auto}
#settlementResults article{border-bottom:1px solid var(--border);padding:8px 0}
#settlementResults strong{font-size:14px}
#settlementResults p,.data-source{font-size:12px}

/* Main navigation stays on the map; settings are a separate sheet. */
body{--panel:#181b24;--border:#363b48;--accent:#bb9cff;background:#181b24}
header{padding:6px 9px;top:max(10px,env(safe-area-inset-top));border:0}
header img{width:28px;height:28px}header strong{font-size:18px}.country{display:none}
button{min-height:44px}input,select{font-size:16px!important}
#journey{position:fixed;z-index:3;bottom:0;left:12px;width:390px;max-height:65dvh;overflow:auto;background:var(--panel);border-radius:22px 22px 0 0;padding:8px 14px max(12px,env(safe-area-inset-bottom));box-shadow:0 -4px 28px #0004}
#sheetHandle{display:block;margin:0 auto;border:0;background:transparent;min-height:24px;height:24px;padding:0 30px;color:#b7beca}
#search{flex-wrap:nowrap}#search input{background:#292e3b;border:0;padding:14px}#search button{border:0}
#results{max-height:32dvh}#results button{background:transparent;border:0;border-bottom:1px solid var(--border);padding:13px 4px;line-height:1.5}
#placeCard{padding:12px 0}#placeName{font-size:21px}#placeInfo{font-size:13px}
#journey nav{display:flex;gap:4px;border-top:1px solid var(--border);padding-top:8px;margin-top:8px}#journey nav button{flex:1;background:transparent;border:0;font-size:12px;padding:6px 2px;color:#d9caff}
.route-fields{display:grid;gap:5px}.route-fields button{text-align:left;background:#292e3b;border:0}
#drive{top:max(66px,env(safe-area-inset-top));right:12px;bottom:auto;max-width:240px;border:0;padding:7px}#speed{font-size:24px}.metric{min-width:65px}.metric small{font-size:10px}
#locate{position:fixed;right:12px;bottom:210px;z-index:2;width:48px;height:48px;background:#181b24;color:#bb9cff;font-size:25px;border:0}
#tools{z-index:5;top:66px;max-height:calc(100dvh - 90px);background:#181b24}#pickHint{z-index:6;bottom:40px}
.maplibregl-ctrl-bottom-right{bottom:280px}.maplibregl-ctrl-bottom-left{bottom:180px}
.driving #routePane .route-fields,.driving #routePane>.row,.driving #alternatives,.driving #journey nav{display:none}.driving #journey{max-height:160px}
@media(max-width:650px){#journey{left:0;width:100%;max-height:60dvh}header strong{font-size:17px}header{left:10px}#tools{left:8px;width:calc(100% - 16px)}#drive{top:70px;right:10px}#results{max-height:28dvh}}