/* Portrait-first riding HUD: map information, small surfaces, generous touch areas. */
@media(orientation:landscape) and (max-height:600px){.has-junction #map{left:45%}}
:root{--bottom:calc(env(safe-area-inset-bottom,0px) + 20px);--panel:#1c1728e8}
.map-shade{background:linear-gradient(#120f1c6b,transparent 12%,transparent 82%,#120f1c6b)}
.topbar{height:58px;left:10px;right:10px;padding:0;pointer-events:none}
.topbar>*{pointer-events:auto}.brand{display:grid;place-items:center;width:52px;height:52px;min-height:52px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:0}
.brand>svg{width:24px;height:24px;stroke:#f0e8f7}.brand>svg path:first-child{stroke:#f0e8f7;fill:none}.brand>svg path:last-child{stroke:#f0e8f7}.brand circle{fill:#1c1728}
.top-status{background:#1c1726c9;padding:6px 10px;border-radius:12px;grid-template-columns:auto;gap:1px;position:relative}
.top-status time{font-size:18px;letter-spacing:0}.top-status #date{grid-column:1;font-size:9px;letter-spacing:0}.connection{display:none}.connection.offline{display:block;position:absolute;left:-10px;top:15px}
.maneuver.ready{display:none}.maneuver{top:calc(env(safe-area-inset-top,0px) + 64px);left:10px;right:10px;max-width:none;min-height:76px;padding:10px 14px;gap:10px;border-radius:16px;box-shadow:0 5px 16px #0002}
.turn-symbol{font-size:40px;min-width:44px}.maneuver:not(.ready) .eyebrow{font-size:24px;letter-spacing:-.5px}.maneuver:not(.ready) h1{font-size:17px;margin:1px 0;line-height:1.2}.turn-copy p{font-size:11px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-source{display:none!important}
.right-tools,.has-junction .right-tools{top:auto;bottom:calc(var(--bottom) + 97px);right:10px;gap:5px;flex-direction:column}
.right-tools .circle{width:52px;height:52px;border-radius:14px;background:#1c1726dc}.right-tools svg{width:23px;height:23px}
.weather-chip,.has-junction .weather-chip{top:calc(env(safe-area-inset-top,0px) + 6px);left:69px;right:auto;min-height:46px;padding:0 11px;font-size:12px;gap:6px;border-radius:13px;display:flex;background:#1c1726c9}.weather-chip #weather-icon{font-size:17px}
.location-note,.has-junction .location-note{display:block;left:12px;bottom:calc(var(--bottom) + 71px);font-size:9px;letter-spacing:.02em;color:#e1d5ec;text-shadow:0 1px 3px #000}
.instruments{left:10px;right:73px;bottom:calc(var(--bottom) + 94px);gap:8px;max-width:none;width:auto}
#app:not(.locating):not(.navigating) .instruments{display:none}
.speed-card{width:66px;height:67px;border-radius:16px;background:#1c1726dc}.speed-card>span{font-size:32px;letter-spacing:-1px}.speed-card small{font-size:8px;margin-top:4px}.limit{width:45px;height:45px;border-width:4px;font-size:20px;flex-shrink:0}
.trip{padding:8px 10px;border-radius:13px;gap:3px;margin-left:auto;max-width:132px}.trip b{font-size:17px}.trip span{font-size:10px}
.dock{left:10px;right:10px;bottom:var(--bottom);width:auto;gap:6px;transform:none;max-width:none}
.dock>button{min-height:60px;height:60px;border-radius:16px}.dock-button{width:58px;gap:0}.dock-button>span{display:none}.destination{font-size:16px;gap:10px;padding:10px 14px}.dock-button svg{width:23px;height:23px}.parking-p{font-size:25px}
.junction{top:calc(env(safe-area-inset-top,0px) + 154px);left:10px;right:10px;width:auto;height:min(29dvh,250px);min-height:145px;border-radius:16px}
.junction-heading{padding:10px 12px;font-size:9px}.lane-strip{bottom:18px;padding:3px 8px;border-radius:11px}.lane{font-size:26px;padding:0 9px}.junction-note{font-size:8px;bottom:4px;right:10px}
.ride-status,.has-junction .ride-status{top:auto;left:10px;right:73px;bottom:calc(var(--bottom) + 170px);max-width:none;padding:8px 10px;font-size:11px;border-radius:11px;z-index:2}
.has-junction .ride-status{top:calc(env(safe-area-inset-top,0px) + 143px);bottom:auto;font-size:10px;left:20px;right:20px}
.attribution{bottom:calc(env(safe-area-inset-bottom,0px) + 4px);left:12px;right:12px;font-size:8px;gap:6px;color:#c8bdcf}.attribution>span{font-size:8px}
.rider{width:30px;height:38px;filter:drop-shadow(0 0 5px #fff8) drop-shadow(0 3px 5px #000)}.rider.uncertain{opacity:.6}
.toggle{min-height:54px}.sheet-head .eyebrow{display:none}.sheet-head{margin-bottom:15px}.sheet-head h2{font-size:24px;margin:0}.sheet-head .close{width:54px;height:54px}.result{min-height:65px;padding:14px 16px}.result b{font-size:16px}.result small{font-size:12px}
.map-popup-detail{font-size:14px;line-height:1.5}.parking-key{display:flex;gap:14px;font-size:12px;color:var(--muted);align-items:center}.parking-key i{display:inline-block;width:11px;height:11px;border-radius:3px;background:#bca1e2;margin-right:5px}.parking-key i.restricted{background:#f17d78}
.ride-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}.ride-modes button{min-height:60px;background:#2b2038;border:1px solid #ffffff24;border-radius:13px;padding:8px 5px}.ride-modes b{display:block;font-size:15px}.ride-modes small{display:block;font-size:10px;margin-top:4px;color:#bfb2cd}.ride-modes button[aria-pressed=true]{border-color:#c4a0ff;color:#c4a0ff;background:#40304e}.mode-note{font-size:11px;margin:8px 0 13px}
.test-launch{position:absolute;left:10px;bottom:calc(var(--bottom) + 96px);min-height:52px;padding:0 18px;background:#261b35ed;color:#c4a0ff;border:1px solid #9773bd;border-radius:14px;font-size:14px}.locating .test-launch,.navigating .test-launch{display:none}.test-controls{position:absolute;top:calc(env(safe-area-inset-top,0px) + 6px);left:69px;display:flex;gap:3px;z-index:5}.test-controls[hidden]{display:none}.test-controls button{width:50px;height:48px;border-radius:11px;border:1px solid #9773bd;background:#291d37;color:#f0e5ff;font-size:12px}.simulating .weather-chip{display:none}
.map-peek{position:absolute;left:10px;right:10px;bottom:calc(var(--bottom) + 72px);min-height:56px;display:flex;align-items:center;gap:9px;padding:4px 6px 4px 12px;border:1px solid #b298c955;border-radius:14px;background:#21182cf5;z-index:8}.map-peek>span:first-child{font-size:24px;color:#efb46a}.map-peek>span:nth-child(2){font-size:13px;line-height:1.2;flex:1}.map-peek button{height:48px;min-width:48px;border-radius:10px;background:#3a2b4c;padding:0 10px;font-size:12px}.map-peek #peek-close{font-size:24px;padding:0;min-width:44px;background:transparent}
/* The preview owns a separate viewport; it never floats over the road ahead. */
.riding .dock,.riding .right-tools,.riding .weather-chip,.riding .brand,.riding #date,.riding .location-note,.riding .test-launch{display:none!important}
.riding .instruments{bottom:calc(env(safe-area-inset-bottom,0px) + 20px);right:12px}.riding .ride-status{bottom:calc(env(safe-area-inset-bottom,0px) + 102px);padding:6px 9px;font-size:12px}
.riding:not(.simulating) .maneuver{top:calc(env(safe-area-inset-top,0px) + 8px);right:86px;min-height:68px;padding:8px 12px}.riding:not(.simulating) .maneuver:not(.ready) h1{font-size:16px}.riding:not(.simulating) .turn-copy p{display:none}
.riding .map-peek{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}.riding .map-peek #peek-action{display:none}.riding #map-data-note{display:none}.riding.simulating .location-note{display:block!important}.simulating .ride-status.normal{display:none!important}
@media(orientation:portrait){
  :root{--junction-height:clamp(155px,23dvh,200px);--junction-bottom:calc(var(--bottom) + 76px)}
  .has-junction #map{bottom:calc(var(--junction-bottom) + var(--junction-height) + 8px)}
  .has-junction .junction{top:auto;bottom:var(--junction-bottom);height:var(--junction-height);min-height:0;left:10px;right:10px;width:auto;border-radius:14px;box-shadow:none}
  .has-junction .instruments{bottom:calc(var(--junction-bottom) + var(--junction-height) + 16px)}
  .has-junction .right-tools{bottom:calc(var(--junction-bottom) + var(--junction-height) + 16px)}
  .has-junction .ride-status{top:calc(env(safe-area-inset-top,0px) + 153px);bottom:auto;left:10px;right:73px;padding:5px 8px}
  .has-junction .location-note{bottom:calc(var(--junction-bottom) + var(--junction-height) + 88px);left:12px}
  .has-junction .map-peek{bottom:var(--junction-bottom)}
  .junction-rider{width:25px;height:32px}.junction-heading{font-size:9px}.lane-strip{bottom:16px;padding:2px 8px}.lane{font-size:25px}
  .riding.has-junction{--junction-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
  .riding.has-junction .instruments{bottom:calc(var(--junction-bottom) + var(--junction-height) + 16px)}
  .riding.has-junction .map-peek{bottom:var(--junction-bottom)}
}
@media(orientation:landscape) and (max-height:600px){.topbar{height:52px}.brand{width:48px;height:48px;min-height:48px}.top-status{padding:5px 9px;display:flex;gap:8px}.top-status #date{font-size:9px}.weather-chip,.has-junction .weather-chip{left:65px;top:4px;min-height:44px}.maneuver{width:43%;left:10px;right:auto;top:58px;min-height:68px;padding:8px 12px}.maneuver:not(.ready) h1{font-size:15px}.maneuver:not(.ready) .eyebrow{font-size:22px}.turn-symbol{font-size:34px;min-width:35px}.turn-copy p{display:none}.junction{left:10px;width:43%;right:auto;top:136px;height:calc(100dvh - 154px);min-height:100px}.right-tools,.has-junction .right-tools{right:10px;top:63px;bottom:auto;gap:4px}.right-tools .circle{width:46px;height:46px}.dock{left:auto;width:50%;right:10px;bottom:var(--bottom)}.dock>button{height:56px;min-height:56px}.dock-button{width:53px}.destination{font-size:15px;padding:10px}.instruments{left:auto;right:65px;width:calc(50% - 55px);bottom:calc(var(--bottom) + 65px);gap:7px}.speed-card{width:58px;height:58px}.speed-card>span{font-size:29px}.limit{width:40px;height:40px;font-size:18px}.trip{padding:7px}.trip b{font-size:15px}.trip span{font-size:9px}.location-note,.has-junction .location-note{bottom:calc(var(--bottom) + 68px);left:47%;font-size:8px}.ride-status,.has-junction .ride-status{top:60px;bottom:auto;left:47%;right:65px;font-size:10px}.lane{font-size:23px}.lane-strip{bottom:15px}.attribution{font-size:8px}}
/* GP Replica accents and riding controls. */
.riding .topbar{justify-content:flex-end}.rain-locked .right-tools{opacity:.25}.rain-unlock{width:74px!important;min-height:100px!important;display:flex!important;flex-direction:column;justify-content:center;gap:4px!important;padding:7px!important;bottom:auto!important}.rain-unlock b{font-size:10px!important}.rain-unlock span{font-size:11px!important;line-height:1.2}
:root{--accent:#c4a0ff;--race-red:#ed334d}
.destination,.primary{background:var(--race-red);color:#fff}.turn-symbol{color:#d6baff}.maneuver{border-left:3px solid #ed334d}.ride-modes button[aria-pressed=true]{border-color:#ed334d;background:#422235;color:#f4e5ff}
.riding .right-tools{display:flex!important;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);z-index:4}.riding .right-tools .circle{width:56px;height:56px;background:#1c1728eb}.riding #fullscreen,.riding #recenter.active{display:none!important}
.rain-lock-control{position:absolute;right:10px;bottom:calc(var(--bottom) + 274px);width:56px;height:56px;display:grid;place-items:center;background:#291d37eb;border:1px solid #bd9de457;border-radius:14px;z-index:4}.rain-lock-control svg{width:26px;height:26px;color:#e6d1ff}
.riding .rain-lock-control{bottom:calc(env(safe-area-inset-bottom,0px) + 238px)}
.rain-overlay{position:fixed;inset:0;z-index:100;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;cursor:default}.rain-unlock{position:absolute;right:10px;top:calc(env(safe-area-inset-top,0px) + 8px);width:132px;min-height:86px;padding:9px;background:#281a37f5;border:2px solid #c4a0ff;border-radius:16px;display:grid;grid-template-columns:27px 1fr;gap:5px;align-items:center;touch-action:none}.rain-unlock b{font-size:12px}.rain-unlock span{grid-column:1/3;font-size:12px;color:#eee3fa}.rain-locked .rain-lock-control{visibility:hidden}
@media(orientation:portrait){.riding.has-junction .right-tools{bottom:calc(var(--junction-bottom) + var(--junction-height) + 96px)}.riding.has-junction .rain-lock-control{bottom:calc(var(--junction-bottom) + var(--junction-height) + 224px)}}
@media(orientation:landscape) and (max-height:600px){.riding .right-tools{top:66px;bottom:auto}.rain-lock-control,.riding .rain-lock-control{top:calc(env(safe-area-inset-top,0px) + 6px);right:calc(50% + 10px);bottom:auto}.riding .instruments{right:78px}.rain-unlock{top:auto;bottom:12px;right:12px}}