:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172b38;background:#e8eee9;font-size:16px;line-height:1.45;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,input{font:inherit}
button{min-height:46px;cursor:pointer;border-radius:12px;padding:10px 14px;font-weight:650;border:1px solid #dce3ea;background:white;color:inherit;touch-action:manipulation}
button:disabled{opacity:.48;cursor:default}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #2459e0;outline-offset:2px}
.phone{height:100vh;height:100dvh;position:relative;overflow:hidden}
#navigation-map{position:absolute;inset:0;z-index:0;background:#e8eee9}
.route-panel,.bottom-dock,.reroute-alert{position:absolute;left:12px;right:12px;z-index:600;max-width:520px;margin:auto;background:#fffffffa;border:1px solid #e1e6ec;box-shadow:0 8px 30px #182b3820;border-radius:20px}
.route-panel{top:max(12px,env(safe-area-inset-top));padding:12px 16px}
.brand-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;margin-bottom:12px}
.wordmark{font-size:20px;letter-spacing:-.8px;font-weight:800;color:inherit;text-decoration:none;flex:1}
.wordmark span{color:#2459e0}
.brand-row>span{grid-column:1;grid-row:2;font-size:12px;color:#546a62}
#sound-toggle{grid-column:2;grid-row:1 / span 2;font-size:12px;padding:8px 12px;min-height:44px;background:#f4f7fb;border:0;border-radius:8px}
.route-fields{display:grid;grid-template-columns:83px 1fr;gap:7px;align-items:center}
.route-fields label{font-size:12px;font-weight:650;color:#617281}
.place-field{position:relative;min-width:0}
.place-field:focus-within{z-index:2}
.place-suggestions{position:absolute;top:100%;left:0;right:0;z-index:700;margin:4px 0 0;padding:4px;list-style:none;background:white;border:1px solid #dce3ea;border-radius:12px;box-shadow:0 8px 24px #182b3830;max-height:min(260px,35dvh);overflow:auto;overscroll-behavior:contain}
.place-suggestions [role=option]{padding:12px;min-height:48px;border-radius:8px;font-size:14px;cursor:pointer}
.place-suggestions [aria-selected=true],.place-suggestions [role=option]:hover{background:#eef3ff;color:#2459e0}
.search-empty{padding:12px;font-size:12px;color:#607383}
.pin-actions{display:flex;gap:8px;margin-top:8px}
.pin-actions button{flex:1;min-height:44px;padding:8px;font-size:12px}
.edit-route{position:absolute;z-index:600;top:max(12px,env(safe-area-inset-top));left:12px;min-height:48px;box-shadow:0 4px 20px #182b3820}
#return-to-map{width:100%;margin-top:8px;min-height:44px;font-size:13px}
input{padding:10px 12px;min-height:44px;width:100%;min-width:0;border:1px solid #dce3ea;border-radius:10px;background:#f8fafc;color:#172b38;font-size:16px}
.planner-actions{display:flex;gap:8px;margin-top:9px}
.planner-actions button{flex:1;font-size:13px;min-height:48px}
.primary{background:#2459e0;color:white;border-color:#2459e0}
.secondary{background:#f4f7fb}
.small{font-size:12px;color:#607383;line-height:1.5;margin:8px 0}
#route-help{font-size:12px;margin:8px 0 0}
#route-status{margin:4px 0 0}
.bottom-dock{bottom:max(14px,env(safe-area-inset-bottom));padding:8px 14px 10px;max-height:48dvh;overflow:auto}
.dock-handle{width:32px;height:4px;background:#d9e0e7;border-radius:5px;margin:0 auto 8px}
.dock-actions{display:flex;gap:9px}
.dock-actions>button{flex:1;font-size:13px;min-height:48px}
.report-button{background:#172b38;color:white;border-color:#172b38}
.active-route{font-size:13px;font-weight:650;margin:2px 0 8px;color:#2459e0}
.route-options{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;margin-bottom:8px}
.route-options:empty{display:none}
.route-card{flex:1;min-width:145px;text-align:left;min-height:66px;padding:9px 11px;border-radius:12px;border-left:4px solid #8b96a7}
.route-card[aria-pressed=true]{border-color:#2459e0;background:#eef3ff}
.route-card strong{display:block;font-size:13px;white-space:nowrap}
.route-card span{display:block;font-size:12px;margin-top:5px;line-height:1.4;color:#607383}
.bottom-dock summary{font-size:12px;color:#607383;cursor:pointer;min-height:44px;padding-top:10px;list-style:none;display:flex;justify-content:space-between;gap:8px}
.bottom-dock summary::after{content:'⌃';font-size:14px}
.bottom-dock details[open]>summary::after{content:'⌄'}
.dock-content{padding-top:4px;border-top:1px solid #eef1f4;margin-top:4px}
.dock-content label{font-size:11px;display:block;margin:8px 0}
.dock-content button{width:100%;margin-top:8px;font-size:12px}
.leaflet-bottom.leaflet-right{bottom:200px;right:12px}
.leaflet-control-attribution{font-size:8px!important}
.leaflet-bottom.leaflet-left{bottom:0}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}
.reroute-alert{z-index:800;top:max(12px,env(safe-area-inset-top));padding:18px;box-shadow:0 12px 48px #152b3b40;border-top:4px solid #e3832b}
.reroute-alert p{font-size:14px;font-weight:600;line-height:1.55;margin:10px 0 14px}
.eyebrow{font-size:10px;letter-spacing:1.3px;font-weight:750;color:#607383;display:block}
.alert-actions{display:flex;gap:8px}
.alert-actions button{flex:1}
.enter{animation:slide-down .28s ease-out}
@keyframes slide-down{from{transform:translateY(-24px);opacity:0}
to{transform:translateY(0);opacity:1}
}
.message{position:absolute;z-index:900;left:20px;right:20px;max-width:500px;margin:auto;top:50%;transform:translateY(-50%);padding:14px 12px 14px 18px;background:#172b38;color:white;border-radius:14px;box-shadow:0 8px 30px #152b3b30;display:flex;align-items:center;gap:10px;font-size:13px}
.message span{flex:1}
.message button{background:transparent;border:0;color:white;font-size:22px;min-width:44px;min-height:44px;padding:0}
dialog{border:0;border-radius:22px;padding:24px 20px;max-width:calc(100vw - 24px);width:460px;max-height:90vh;max-height:90dvh;overflow:auto;color:#172b38;box-shadow:0 24px 80px #152b3b30}
dialog::backdrop{background:#142c2480}
h2{font-size:25px;letter-spacing:-.7px;margin:9px 0 14px}
.close{float:right;padding:0;width:44px;min-height:44px;border:0;font-size:28px;margin:-8px -6px 0 0}
#phone-map{height:180px;border-radius:14px;overflow:hidden;background:#e8eee9;margin-top:12px;transition:height .2s ease}
dialog.expanded #phone-map{height:min(46dvh,390px)}
.map-toggle{font-size:12px;min-height:44px;width:100%;margin-top:8px;background:#f4f7fb}
.coordinate{font-variant-numeric:tabular-nums;font-size:11px}
.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.categories button{font-size:11px;padding:12px 4px;min-height:76px;background:#f8fafc;border:1px solid #dce3ea}
.categories button span{display:block;font-size:23px;line-height:1;margin-bottom:8px}
.categories button[aria-pressed=true]{background:#eef3ff;color:#2459e0;border:2px solid #2459e0}
#confirm-report{width:100%;min-height:50px}
.noscript{position:fixed;z-index:1000;top:0;background:white;padding:24px}
[hidden]{display:none!important}
@media(max-width:360px){.route-panel{padding:10px 12px}
.route-fields{grid-template-columns:75px 1fr}
.brand-row{gap:7px}
.wordmark{font-size:18px}
.route-card{min-width:133px}
.bottom-dock{padding-left:10px;padding-right:10px}
}
@media(max-height:560px) and (orientation:landscape){.route-panel{left:12px;right:auto;width:34vw;min-width:250px;max-width:300px;max-height:calc(100dvh - 24px);overflow:auto}
.bottom-dock{left:auto;right:12px;width:34vw;min-width:250px;max-width:300px;max-height:calc(100dvh - 24px)}
.reroute-alert{max-width:460px}
.leaflet-bottom.leaflet-right{bottom:0;right:0}
.planner-actions{margin-top:5px}
.brand-row{margin-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.enter{animation:none}
#phone-map{transition:none}
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.route-update-warning{padding:10px 12px;margin-bottom:8px;border:1px solid #dce3ea;border-radius:12px;background:#f8fafc}
.route-update-warning p{font-size:13px;margin:0 0 8px}
#retry-route{min-height:48px;width:100%;font-size:13px}

.pin-help{position:absolute;z-index:600;top:calc(max(12px,env(safe-area-inset-top)) + 56px);left:12px;max-width:min(330px,calc(100vw - 24px));padding:10px 12px;margin:0;border-radius:12px;background:#fffffffa;color:#172b38;box-shadow:0 4px 20px #182b3820;font-size:13px}

.pin-reticle{position:absolute;z-index:500;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;box-shadow:0 0 0 2px #172b38;pointer-events:none}
.pin-reticle::before,.pin-reticle::after{content:"";position:absolute;background:#172b38;left:50%;top:50%;transform:translate(-50%,-50%)}
.pin-reticle::before{width:38px;height:2px}
.pin-reticle::after{width:2px;height:38px}

#navigation-map:focus-visible{outline:3px solid #2459e0;outline-offset:-3px}

.location-control { display:flex; min-width:0; gap:4px; }
.location-control input { min-width:0; width:100%; }
#start-toggle, #destination-toggle { min-width:44px; touch-action:manipulation; }
.location-suggestions { position:fixed; z-index:1200; background:white; border:1px solid #d5dce5; border-radius:12px; box-shadow:0 8px 30px #172c3b30; max-height:240px; overflow:auto; overscroll-behavior:contain; }
.location-suggestions button { display:block; width:100%; min-height:48px; text-align:left; border:0; border-radius:0; background:white; color:#192c3b; padding:12px; touch-action:manipulation; }
.location-suggestions button:hover,.location-suggestions button:focus { background:#eaf0ff; }

.hazard-check{position:absolute;z-index:850;top:max(76px,calc(env(safe-area-inset-top) + 64px));left:12px;right:12px;max-width:340px;margin:auto;padding:12px 14px;background:white;border:1px solid #dce3ea;border-radius:16px;box-shadow:0 8px 24px #182b3820}
.hazard-check p{margin:0 0 8px;font-size:14px;font-weight:650}
.hazard-check>div{display:flex;gap:8px}
.hazard-check button{flex:1;min-height:44px;font-size:13px}