.navigation-card,.navigation-tools{display:none}
body.navigating .app-panel,body.navigating .mobile-dock,body.navigating .desktop-tabs,body.navigating .map-overlay,body.navigating .map-toolbar,body.navigating .map-companion{display:none!important}
body.navigating .app-main{display:block;height:calc(var(--app-height,100dvh) - 64px)}
body.navigating .map-panel{height:100%;width:100%;transition:none}
.navigating .navigation-tools{display:flex;position:absolute;z-index:650;top:16px;left:70px;right:16px;justify-content:flex-end;gap:8px;pointer-events:none}
.navigation-tools button{pointer-events:auto;box-shadow:0 4px 20px #0a18234d;background:#122432f5;padding:10px 14px;font-size:12px;border-color:#557286}
.navigation-tools button[aria-pressed=true]{color:#f8d778;border-color:#d8b960}
.navigating .navigation-card{display:block;position:absolute;z-index:650;bottom:28px;left:50%;transform:translateX(-50%);width:min(480px,calc(100% - 32px));padding:20px;background:#101e2bf7;border:1px solid #64717b;border-radius:24px;box-shadow:0 10px 50px #0b1d4166;backdrop-filter:blur(16px)}
.nav-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;font-size:11px;color:#9bb5cd}.nav-live{display:flex;align-items:center;gap:6px;color:#e2c877}.nav-live:before{content:'';width:6px;height:6px;background:#edc96c;border-radius:50%}
.nav-maneuver{display:flex;align-items:center;gap:18px}.nav-icon{width:70px;height:76px;flex:0 0 70px;background:#f6d473;border-radius:18px;display:grid;place-items:center;color:#132a3c;font-size:52px;font-weight:700;line-height:1}.nav-copy{min-width:0;flex:1}.nav-distance{font-size:15px;color:#f6d473;font-weight:650;line-height:1.5}.nav-copy h2{font-size:28px;letter-spacing:-1px;line-height:1.3;margin:3px 0 7px;color:#f0f4f8;overflow-wrap:anywhere}.nav-copy p{font-size:12px;color:#acbfd0;line-height:1.6;margin:0;overflow-wrap:anywhere}
.nav-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;border-top:1px solid #3a4c5e;padding-top:12px}.nav-footer strong{font-size:14px;font-weight:600;color:#d9e4ed}.nav-footer button{font-size:12px;padding:8px 12px;white-space:nowrap;background:#263a4c}.nav-progress{display:block;width:100%;height:3px;border:0;background:#3b4d5c;border-radius:5px;overflow:hidden;margin-top:14px;accent-color:#f6d473}.nav-progress::-webkit-progress-bar{background:#3b4d5c}.nav-progress::-webkit-progress-value{background:#f6d473}.nav-progress::-moz-progress-bar{background:#f6d473}
.nav-notice{margin:10px 0 0;font-size:10px;color:#8da6bb;line-height:1.5}.nav-recovery{display:flex;gap:8px}.nav-recovery:has(button:not([hidden])){margin-top:12px}.nav-recovery button{flex:1;font-size:13px;padding:12px;background:#344333;border-color:#89995e;color:#eff0c6}
.navigation-card[data-state=off-route] .nav-icon,.navigation-card[data-state=inaccurate] .nav-icon,.navigation-card[data-state=denied] .nav-icon{background:#ebbc82}.navigation-card[data-state=arrived] .nav-icon{background:#a9dcbe}.navigating .network-notice{bottom:auto;top:125px}.route-submit #startNavigation{justify-content:center}.route-submit #showRouteMap{font-size:12px;padding:9px 12px;white-space:nowrap}
@media(max-width:760px){body.navigating .app-main{height:calc(var(--app-height,100dvh) - 54px)}body.navigating .map-panel{flex:none;height:100%}.navigating .navigation-card{width:calc(100% - 24px);padding:16px;border-radius:22px;bottom:calc(25px + env(safe-area-inset-bottom,0px))}.navigating .navigation-tools{top:12px;left:66px;right:12px;gap:6px}.navigation-tools button{font-size:11px;padding:8px 10px}.nav-maneuver{gap:13px}.nav-icon{width:62px;height:70px;flex-basis:62px;font-size:47px;border-radius:16px}.nav-copy h2{font-size:26px}.nav-status-row{margin-bottom:12px;font-size:10px}.nav-footer strong{font-size:13px}.nav-distance{font-size:14px}.nav-footer{gap:8px}.nav-notice{font-size:10px}.navigating .leaflet-control-attribution{margin-bottom:0!important}}
@media(max-height:560px){.navigating .navigation-card{left:auto;right:12px;transform:none;width:min(400px,58%);bottom:22px;padding:12px}.nav-status-row{margin-bottom:8px}.nav-icon{height:55px;width:50px;flex-basis:50px;font-size:38px}.nav-copy h2{font-size:22px}.nav-footer{margin-top:8px;padding-top:8px}.nav-notice{display:none}.nav-progress{margin-top:8px}}
@media(min-width:761px) and (max-height:600px){body.navigating .app-main{height:calc(100dvh - 54px)}}

.heading-marker{pointer-events:none!important;background:transparent;border:0}.heading-rotor{width:100px;height:100px;transform-origin:50px 50px;transition:transform .12s linear}.heading-cone{position:absolute;left:12px;top:-25px;width:76px;height:75px;clip-path:polygon(50% 100%,0 0,100% 0);background:linear-gradient(to top,#248aff88,#4aaaff44 55%,#6cbbff00);border-radius:50% 50% 0 0}.heading-pointer{position:absolute;left:41px;top:22px;width:18px;height:21px;background:#147ce8;clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);filter:drop-shadow(0 0 2px white)}.navigation-tools{flex-wrap:wrap}.navigation-tools #navCompass{color:#bedaff;max-width:180px;white-space:nowrap}.navigation-tools #navCompass[aria-pressed=true]{border-color:#6cacf3;color:#badcff}.navigation-tools #navCompass:disabled{opacity:.7}
@media(prefers-reduced-motion:reduce){.heading-rotor{transition:none}}.motion-off .heading-rotor{transition:none}