/* Keep the existing desktop/tablet navigation; the compact dock is phone-only. */
.app-nav .phone-nav-icon{display:none}
@media(max-width:599px){
 body[data-mode=city]{--phone-dock-left:max(8px,env(safe-area-inset-left));--phone-dock-right:max(8px,env(safe-area-inset-right));--phone-dock-base:env(safe-area-inset-bottom)}
 body[data-mode=city] .app-header{padding-top:calc(env(safe-area-inset-top) + 15px);padding-bottom:8px}
 /* All six destinations stay visible, with real 44px targets and VoiceOver names. */
 body[data-mode=city]>.app-nav:has(#bike-trails){top:auto;bottom:calc(var(--phone-dock-base) + 56px);left:var(--phone-dock-left);right:var(--phone-dock-right);transform:none;width:auto;height:54px;display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:2px;padding:4px;border:1px solid #80aabc66;border-radius:17px;background:linear-gradient(145deg,#143548f5,#0a2233f5);box-shadow:0 6px 24px #00101855;backdrop-filter:blur(12px)}
 body[data-mode=city]>.app-nav:has(#bike-trails)>button{display:grid;place-items:center;position:relative;width:100%;height:44px;min-height:44px;min-width:44px;padding:9px;border-radius:11px;color:#c1d9e5;touch-action:manipulation}
 body[data-mode=city]>.app-nav>button[aria-pressed=true]{color:#e3fff5;background:#2b5465;box-shadow:inset 0 0 0 1px #a9e5d45c}
 body[data-mode=city]>.app-nav>button[aria-pressed=true]:after{content:'';position:absolute;bottom:3px;left:calc(50% - 8px);width:16px;height:2px;border-radius:2px;background:#b0f1d5}
 body[data-mode=city]>.app-nav .phone-nav-icon{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
 body[data-mode=city]>.app-nav .app-nav-label,
 body[data-mode=city]>.journey-launch>span,
 body[data-mode=city]>#city-full-mode>span,
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true]) .nav-heading{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
 /* A single utility row: Ping, full map, trip planner, and map locks/navigation. */
 body[data-mode=city]>#city-full-mode,
 body[data-mode=city]>.journey-launch,
 body[data-mode=city]:has(>.journey-launch:not([hidden]))>#city-full-mode{top:auto;bottom:calc(var(--phone-dock-base) + 119px);width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:8px;display:grid;place-items:center;gap:0;border-radius:13px;transform:none;right:auto;box-shadow:0 4px 14px #00101844}
 /* Keep Ping's familiar labeled card; align its lower edge with the map controls. */
 body[data-mode=city]>.stop-ping-launch{top:auto;left:var(--phone-dock-left);right:auto;bottom:calc(var(--phone-dock-base) + 115px);box-sizing:border-box;width:124px;min-width:124px;max-width:124px;height:88px;min-height:88px;display:grid;justify-items:center;gap:5px;padding:8px;text-align:center;font-size:13px;border-radius:19px;transform:none}
 body[data-mode=city]>.stop-ping-launch>span{display:grid;gap:4px}
 body[data-mode=city]>.stop-ping-launch small{display:block;font-size:9px}
 body[data-mode=city]>#city-full-mode,
 body[data-mode=city]:has(>.journey-launch:not([hidden]))>#city-full-mode{left:calc(var(--phone-dock-left) + 130px)}
 body[data-mode=city]>.journey-launch{left:calc(var(--phone-dock-left) + 130px)}
 body[data-mode=city]:has(>.journey-launch:not([hidden]))>#city-full-mode{bottom:calc(var(--phone-dock-base) + 169px)}
 body[data-mode=city]>.stop-ping-launch svg{width:32px;height:32px}
 body[data-mode=city]>#city-full-mode svg,body[data-mode=city]>.journey-launch svg{width:23px;height:23px}
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true]){top:auto;left:auto;right:var(--phone-dock-right);bottom:calc(var(--phone-dock-base) + 115px);width:148px;height:52px;min-height:52px;max-height:52px;padding:3px;border-radius:15px;overflow:hidden}
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true])>summary{display:grid;grid-template-columns:94px 44px;grid-template-rows:44px;gap:2px;min-height:44px;padding:0}
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true])>summary .nav-lock-tools{grid-column:1;gap:6px}
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true])>summary .nav-expand{grid-column:2}
 /* Fullscreen remains in the expanded Navigator; its compact twin is redundant. */
 body[data-mode=city] #phone-local-navigation #city-navigation-hud:not([data-expanded=true]):not([data-fullscreen=true])>summary .nav-fullscreen{display:none}
 body[data-mode=city]>.contact-launch,
 body[data-mode=city]:has(>.journey-launch:not([hidden]))>.contact-launch{left:var(--phone-dock-left);right:var(--phone-dock-right);bottom:calc(var(--phone-dock-base) + 5px);width:auto;height:44px;min-height:44px;padding:0 9px;display:flex;justify-content:space-between;gap:5px;box-sizing:border-box;border-radius:14px;font-size:10px}
 body[data-mode=city]>.contact-launch>a{min-height:44px;min-width:44px;justify-content:center;white-space:nowrap}
 body[data-mode=city] #phone-local-navigation #city-navigation-hud[data-expanded=true]:not([data-fullscreen=true]){top:calc(env(safe-area-inset-top) + 78px);bottom:calc(var(--phone-dock-base) + 175px);height:auto;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 253px);overflow-y:auto;overscroll-behavior:contain}
 /* Search is independent of the relocated navigation, and stays above the dock. */
 body[data-mode=city] .explore-tools.city-radar-console[data-radar-active=true]:not([data-radar-minimized=true]){top:calc(env(safe-area-inset-top) + 78px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 254px);border-radius:16px}
}

/* On smaller phones the two utility icons sit above the right-hand controls.
   Ping keeps its full size and the same lower-left anchor. */
@media(max-width:359px){
 body[data-mode=city]>#city-full-mode,
 body[data-mode=city]:has(>.journey-launch:not([hidden]))>#city-full-mode{left:auto;right:calc(var(--phone-dock-right) + 50px);bottom:calc(var(--phone-dock-base) + 173px)}
 body[data-mode=city]>.journey-launch{left:auto;right:var(--phone-dock-right);bottom:calc(var(--phone-dock-base) + 173px)}
}

/* In full-map view, the three lock/exit actions sit along the left edge.
   Keep the route, recovery and street tools in their own existing lower panel.
   Removing the parent's transform makes the side rail viewport-fixed, even
   when the same controls move into the lock dialog's top layer. */
@media(max-width:599px), (orientation:landscape) and (max-height:500px) and (any-pointer:coarse){
 body.city-full-mode .city-full-controls{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;min-width:0;max-width:none;transform:none}
 body.city-full-mode .city-full-controls>.city-full-buttons{position:fixed;left:max(8px,env(safe-area-inset-left));top:50%;bottom:auto;right:auto;transform:translateY(-50%);display:grid;grid-template-columns:68px;gap:6px;width:82px;box-sizing:border-box;padding:6px;border:1px solid #a8d6cf66;border-radius:17px;background:#0c2937f2;box-shadow:0 6px 24px #00121f55;isolation:isolate}
 body.city-full-mode .city-full-buttons>button{width:68px;min-width:68px;min-height:48px;margin:0;padding:7px 5px;white-space:normal;text-wrap:balance;font:650 11px/1.3 system-ui;border-radius:11px;touch-action:manipulation}
 body.city-full-mode .city-full-buttons>[data-full-exit]>span{display:none}
 body.city-full-mode .city-full-controls>.city-full-bottom{margin-top:0}
 body.city-full-mode .city-full-controls>p{margin-top:0}
}

@media(max-width:599px){
 body[data-mode=city]>#city-air-mode{left:calc(var(--phone-dock-left) + 180px);right:auto;bottom:calc(var(--phone-dock-base) + 119px);width:44px;height:44px;padding:6px;border-radius:13px}
}
@media(max-width:380px){
 body[data-mode=city]>#city-air-mode{left:calc(var(--phone-dock-left) + 130px);bottom:calc(var(--phone-dock-base) + 173px)}
}
@media(max-width:599px), (orientation:landscape) and (max-height:500px) and (any-pointer:coarse){
 body.city-full-mode .city-full-controls>.city-full-buttons:has([data-full-air]:not([hidden])){grid-template-columns:68px}
}