/* Navigation controls share one measured dock above the destination sheet. */
html{height:100%;overflow:hidden}
body{position:fixed;top:var(--map-visible-top,0px);left:0;right:0;bottom:auto;padding:0;height:var(--map-visible-height,100dvh);max-height:none;overflow:hidden!important}
#sheet{max-height:calc(var(--map-visible-height,100dvh) - 90px - env(safe-area-inset-top));display:flex;flex-direction:column}
#sheetHandle{flex-shrink:0;min-width:0}.htxt{min-width:0}.hdest{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sheetBody{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#mapNavigationDock{position:absolute;right:24px;bottom:24px;z-index:180;width:360px;max-width:calc(100% - 440px);display:flex;flex-direction:column;gap:10px;pointer-events:none}
#mapNavActions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#mapNavStats{display:flex;align-items:stretch;gap:10px}
#mapNavigationDock #speedWidget{position:static;display:flex;flex-shrink:0;pointer-events:none}
#mapNavigationDock #tripHud{position:static;flex:1;min-width:0;max-width:none;padding:12px 15px;gap:12px;justify-content:space-between;align-items:center}
#mapNavigationDock #tripHud strong{font-size:24px;white-space:nowrap}
#mapNavigationDock #tripHud small{letter-spacing:.8px;font-size:9px}
#mapNavigationDock #driveControls{position:static;display:flex;flex-direction:row;gap:8px;pointer-events:auto}
#mapNavigationDock #driveControls button{min-height:44px;padding:10px 12px}
#mapNavigationDock #recenterBtn,#mapNavigationDock #turnsToggle{position:static;flex:0 0 44px;width:44px;height:44px;margin:0;pointer-events:auto}
#mapNavigationDock #turnsToggle:not(.show){display:none}
body:has(#sheet.open) #mapNavigationDock{visibility:hidden;pointer-events:none}
body:has(#sheet.open) #mapNavigationDock button{pointer-events:none!important}
#sheet.open #sheetBody{max-height:none}
@media(max-width:900px){
 #sheet{left:12px;right:12px;width:auto;bottom:max(10px,env(safe-area-inset-bottom));max-width:calc(100% - 24px)}
 #sheetHandle{padding:22px 14px 12px}.hdest{max-width:42%}
 #mapNavigationDock{left:12px;right:12px;width:auto;max-width:none;bottom:var(--map-sheet-clearance,96px)}
 #mapNavActions{justify-content:flex-end}
 #mapNavigationDock .speed-circle{width:64px;height:64px;border-radius:15px}
 #mapNavigationDock .speed-num{font-size:27px}
 #mapNavigationDock .speed-unit{font-size:9px}
 #mapNavigationDock #tripHud{padding:10px 13px}
 #mapNavigationDock #tripHud small{margin-bottom:4px}
 #mapNavigationDock #tripHud strong{font-size:22px}
 #mapNavigationDock #driveControls{flex:1;justify-content:flex-end}
 .leaflet-bottom.leaflet-right{bottom:0!important;right:0!important}.leaflet-control-zoom{bottom:var(--map-controls-clearance,280px)!important;right:12px}
 #roadView .maplibregl-ctrl-bottom-left{bottom:var(--map-controls-clearance,280px);right:12px}
 #turnsDrawer{bottom:var(--map-sheet-clearance,96px);max-height:calc(var(--map-visible-height,100dvh) - 180px)}
 #instBar{max-height:calc(var(--map-visible-height,100dvh) - 310px);overflow:auto}
 #mapHeader{top:max(10px,env(safe-area-inset-top))}
}
@media(max-width:370px){#mapNavigationDock #driveControls button{padding:8px;font-size:12px}#mapNavActions{gap:6px}#mapNavigationDock #tripHud{gap:6px;padding:10px}#mapNavigationDock #tripHud strong{font-size:20px}}
@media(max-height:500px) and (min-width:600px){
 #sheet{left:12px;right:auto;width:250px;bottom:max(10px,env(safe-area-inset-bottom));max-height:calc(var(--map-visible-height,100dvh) - 80px)}
 #sheetHandle{padding:22px 12px 12px}.htxt{font-size:13px}.hdest{max-width:40%;font-size:12px}
 #mapNavigationDock{left:auto;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 286px);max-width:480px;gap:6px}
 #mapNavigationDock #speedWidget{display:flex}
 #mapNavigationDock #tripHud.show{display:flex!important}
 #mapNavigationDock .speed-circle{width:56px;height:56px}
 #mapNavigationDock #tripHud strong{font-size:20px}
 #mapNavigationDock #driveControls button{padding:8px 10px;font-size:12px}
 #mapNavigationDock #recenterBtn,#mapNavigationDock #turnsToggle{flex-basis:40px;width:40px;height:40px}
 #instBar{top:70px;left:12px;right:12px;width:auto;max-height:calc(var(--map-visible-height,100dvh) - 220px)}
 .inst-inner,body.driving .inst-inner{padding:8px 12px}.inst-street,body.driving .inst-street{font-size:17px}.inst-arrow,body.driving .inst-arrow{font-size:25px}.dn{font-size:23px}
 #junctionGuidance,#nextGuidance{padding:4px 12px}
 .leaflet-control-zoom{bottom:var(--map-controls-clearance,150px)!important}
 #roadView .maplibregl-ctrl-bottom-left{bottom:var(--map-controls-clearance,150px)}
 #mapHeader .map-brand small{display:none}
 body.driving #pills,body.road-view #pills{top:200px}
}

body:has(#sheet.open) .leaflet-control-zoom{visibility:hidden}