/* One viewport, one navigation row. Safe areas are counted only once. */
:root{--app-height:100vh;--topbar-height:54px;--nav-height:62px;--header-clearance:16px}
@supports(height:100dvh){:root{--app-height:100dvh}}
@media(display-mode:standalone){:root{--app-height:100%}}
html{height:100%!important;min-height:100%!important;background:var(--bg2);overflow:hidden}
body{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;overflow:hidden!important;background:linear-gradient(155deg,var(--bg1),var(--bg2));-webkit-text-size-adjust:100%}
body::before{content:none!important;display:none!important}
#app.app-shell{display:grid;grid-template-rows:var(--topbar-height) minmax(0,1fr) var(--nav-height);gap:8px;height:var(--app-height)!important;min-height:0!important;max-height:none;padding:calc(env(safe-area-inset-top,0px) + var(--header-clearance)) max(11px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(11px,env(safe-area-inset-left,0px))!important;overflow:hidden!important}
#app .topbar{height:100%;min-height:0;position:relative;z-index:2;isolation:isolate;align-items:center;padding:0 3px 5px;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;opacity:1}
#app .topbar .eyebrow{font-size:12px;line-height:1.3;letter-spacing:.085em;font-weight:750;color:var(--ink);opacity:1;filter:none!important;text-shadow:none}
#app .topbar .location{font-size:15px;line-height:1.3;margin-top:3px;font-weight:650;color:var(--muted);filter:none!important}
#app main{height:auto!important;min-height:0!important;padding:0!important;scroll-padding:8px!important;overflow-x:hidden!important;overflow-y:auto!important;display:block}
#app.now-mode main,#app.compare-mode main,#app.map-mode main,#app.models-mode main{overflow:hidden!important}
#app .tabbar{position:relative;left:auto;bottom:auto!important;transform:none;width:100%;height:100%;margin:0;grid-template-columns:repeat(5,minmax(0,1fr));align-self:stretch}
#app .tab-liquid-indicator{width:calc((100% - 10px)/5)}
#app .tabbar[data-active="models"] .tab-liquid-indicator{transform:translate3d(400%,0,0)}
#app .tab{min-width:0;padding:3px 1px;font-size:10px;letter-spacing:0}
#app .tab-icon{font-size:19px;line-height:1.15}
#app .tab[aria-current="page"]{color:var(--ink)}
#app.now-mode #view-now.active,#app.compare-mode #view-compare.active{height:100%!important;min-height:0!important}
#app #view-history.active{min-height:100%!important;gap:0}
#app #view-history .chart-card{flex:1 0 264px!important;min-height:264px!important;max-height:none!important;margin:8px 0 0!important}
#app #view-history .chart{min-height:238px!important}
#app.map-mode #view-map.active{height:100%}
#app.models-mode .status-pill{visibility:hidden}
.map-source span{white-space:normal}
@media(max-height:740px){:root{--topbar-height:50px;--nav-height:56px;--header-clearance:12px}#app.app-shell{gap:6px}}
@media(max-width:360px){#app .tab{font-size:9px}.map-source{font-size:10px}}
@media(orientation:landscape) and (max-height:550px){:root{--topbar-height:40px;--nav-height:50px;--header-clearance:6px}#app.app-shell{gap:5px}#app .topbar .eyebrow{font-size:11px}#app .topbar .location{font-size:12px}}
.keyboard-open #app.app-shell{padding-bottom:6px!important}