/* Let the installed app reserve its status bar. Older installations can still
   report a top safe area, which also keeps their controls clear of the clock. */
:root{--app-safe-top:env(safe-area-inset-top,0px)}
#labels{touch-action:none}
.status-bar-surface{display:none}
/* Keep labels and the vignette below interactive header controls. */
.topbar{z-index:10;isolation:isolate}
/* WebKit may retain a full-screen vh even when the status area is reserved.
   web-app-entry measures the layout viewport on launch/resize/resume.
   https://bugs.webkit.org/show_bug.cgi?id=316008 */
@media(display-mode:standalone){
 html,body{height:var(--app-viewport-height,100%)}
 #loading,#labels,.vignette{bottom:auto;height:var(--app-viewport-height,100%)}
 dialog.display-settings,.search-dialog{height:var(--app-viewport-height,100%)}
}
@media(display-mode:standalone) and (max-width:720px){
 .island-section{height:calc(var(--app-viewport-height,100dvh) - var(--home-header-height,76px))}
 #member-dialog{height:var(--app-viewport-height,100%)}
}
.home-header{padding-top:calc(18px + var(--app-safe-top))}
.home-header::before{content:"";position:absolute;inset:0 0 auto;height:var(--app-safe-top);background:var(--bg);pointer-events:none}
.topbar,.scene-status{top:calc(22px + var(--app-safe-top))}
.scene-tools,.layer-panel,.camera-panel,.environment-panel,.metro-panel{top:calc(111px + var(--app-safe-top))}
@media(min-width:1200px){
 .home-header{flex-basis:calc(76px + var(--app-safe-top));padding-top:calc(15px + var(--app-safe-top))}
}
@media(min-width:1200px) and (max-height:700px){
 .home-header{flex-basis:calc(64px + var(--app-safe-top))}
}
@media(max-width:720px),(display-mode:standalone){
 /* The real empty box supplies a colour to WebKit's fixed-edge sampler.
    Its border box must exceed 10px; text clipping paints no extra header bar.
    Only the safe area of older translucent installs gets a visible backing. */
 .status-bar-surface{display:block;position:fixed;top:0;left:0;width:100%;height:max(11px,var(--app-safe-top));z-index:21;background:var(--app-status-colour,var(--bg));-webkit-background-clip:text;background-clip:text;pointer-events:none;transition:background-color .6s ease}
 .status-bar-surface::before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--app-safe-top);background:inherit;-webkit-background-clip:border-box;background-clip:border-box;pointer-events:none}
 body[data-airport]{--app-status-colour:var(--panel-solid,var(--bg))}
 body:has(#loading:not([hidden]):not(.done)) .status-bar-surface{background:#172333}
}
@media(max-width:720px){
 .home-header{height:calc(56px + var(--app-safe-top));padding-top:calc(5px + var(--app-safe-top))}
 .topbar{top:calc(14px + var(--app-safe-top));left:14px;right:14px;padding:0;background:transparent}
 .topbar>.glass,.topbar>.settings-trigger{background:var(--panel-solid,var(--bg));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
 .scene-status,.scene-tools{top:calc(88px + var(--app-safe-top))}
 .scene-tools{max-height:max(36px,calc(var(--app-viewport-height,100dvh) - 100px - var(--app-safe-top) - var(--small-tools-obstacle)))}
 .camera-panel,.metro-panel{top:calc(123px + var(--app-safe-top))}
 .layer-panel,.environment-panel{top:calc(132px + var(--app-safe-top))}
}
@media(prefers-reduced-motion:reduce){.status-bar-surface{transition:none}}