/* beta8: responsive shell. Safe-area insets + dynamic viewport units (vh fallback first), nothing hidden under the
   pinned bottom nav or browser UI, every screen scrolls to its last action. */
:root{--nav-h:84px;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--end-pad:calc(var(--nav-h) + var(--sab) + 20px)}
html,body{width:100%!important;height:100%!important;margin:0}
body{min-height:100vh;min-height:100svh;min-height:100dvh}
#app{width:100%!important;max-width:520px;height:100vh!important;height:100svh!important;height:100dvh!important;margin:0 auto;padding-left:var(--sal);padding-right:var(--sar);box-sizing:border-box}
#app>.scr{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;padding-top:var(--sat);scroll-padding-bottom:var(--end-pad)}
#app>.scr::after{content:"";display:block;height:var(--end-pad)}
#app>.scr.s-map,#app>.scr.s-run{overflow:hidden;padding-top:0}
#app>.scr.s-map::after,#app>.scr.s-run::after{display:none}
#app>.tabs{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--sab));padding-bottom:var(--sab);box-sizing:border-box}
/* map: the sheet shrinks with the screen and scrolls; its last action clears the nav */
.s-map .mapw{height:calc(clamp(150px,46vh,372px) + 28px);height:calc(clamp(150px,46dvh,372px) + 28px);overflow:hidden}
.s-map .mapw svg{width:100%;height:100%}
.s-map .sheet{top:clamp(150px,46vh,372px);top:clamp(150px,46dvh,372px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:var(--end-pad);box-sizing:border-box}
@media (orientation:landscape) and (max-height:500px){:root{--nav-h:58px}#app>.tabs a{flex-direction:row;gap:6px}#app>.tabs{padding-top:6px}}
@media (max-width:380px){.s-res .eq{flex-wrap:wrap;row-gap:4px;justify-content:center}}
@media (max-height:500px){.s-map .fab{display:none}.s-map .fstrip{display:none}}
#road{width:100%;max-width:none}
/* landscape phones: map left, sheet right, so the current pin is never under the sheet */
@media (orientation:landscape) and (max-height:500px){
.s-map .mapw{right:46%;height:calc(100% - var(--nav-h) - var(--sab))}
.s-map .sheet{left:54%;top:0;border-radius:0 0 0 28px;padding-top:8px}
.s-map .ov{right:calc(46% + 10px)}
.s-map .fltr{max-width:52%}
}
.s-map .opt{height:auto;min-height:52px;padding-top:6px;padding-bottom:6px}
@media (orientation:landscape) and (max-height:500px){.s-map .opt .rb{display:none}.s-map .mapw{right:50%}.s-map .sheet{left:50%}.s-map .ov{right:calc(50% + 10px)}.s-map .ov .pill{font-size:13px}}
@media (orientation:landscape) and (max-height:500px){.s-map .sheet .chip.sf{display:none}.s-map .ov{gap:6px}.s-map .ov .hud{display:flex;gap:4px;flex-wrap:nowrap;min-width:0;overflow:hidden}}