/* Native sun/moon switch using the same Metella controls and colours. */
.header-experience-tools{margin-left:auto}
.header-experience-tools #dayNight{position:relative;display:block;flex:none;width:88px;height:44px;padding:3px;background:var(--color-soft);border:1px solid var(--color-line);border-radius:24px;color:var(--color-muted)}
.sky-switch-track{position:relative;display:grid;grid-template-columns:1fr 1fr;place-items:center;width:100%;height:100%;border-radius:22px}
.sky-switch-track::before{content:'';position:absolute;inset:0 auto 0 0;width:50%;border-radius:50%;background:var(--color-paper);box-shadow:0 1px 5px var(--color-shadow);transition:transform .25s ease,background .25s}
.sky-switch-track svg{position:relative;width:21px;height:21px;z-index:1;transition:color .25s}
.switch-sun{color:var(--color-accent)}
#dayNight[aria-checked=true] .sky-switch-track::before{transform:translateX(100%);background:var(--color-accent)}
#dayNight[aria-checked=true] .switch-moon{color:var(--color-inverse)}
#dayNight[aria-checked=true] .switch-sun{color:var(--color-muted)}
#dayNight .sky-loading{display:none;position:absolute;inset:11px 11px auto auto;width:20px;height:20px;background:white;z-index:2}
#dayNight.is-loading .sky-loading{display:block}#dayNight.is-loading .switch-moon{visibility:hidden}#dayNight.is-loading::after{display:none}
#dayNight:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
#dayNight:disabled{opacity:.5}
body.catalog-open .header-experience-tools{display:none}
.config-secondary-actions .mobile-save{display:inline-flex}
@media(max-width:900px){body:not(.landing) .app-header{grid-template-columns:44px minmax(70px,1fr) 88px}.header-experience-tools{justify-self:end}}
@media(prefers-reduced-motion:reduce){.sky-switch-track::before,.sky-switch-track svg{transition:none}}
/* Ruler + Esplodi share a single row in the exterior. Other views keep the ruler. */
/* Layout must not override the catalog/entry visibility rules. */
:where(#viewport) .measurement-control{display:flex;gap:8px;align-items:center}
#viewport .measurement-control[hidden]{display:none}
#viewport .exterior-experience-tools{position:static;display:flex;gap:0}
#viewport .exterior-experience-tools button{height:44px;min-height:44px;padding:10px 14px}
body.exterior-tools-visible #viewport .measurement-control{left:64px;right:auto;top:12px}
body.exterior-tools-visible #measurementMenu{left:0;right:auto}
body.catalog-open .exterior-experience-tools,body.landing .exterior-experience-tools,body.entering .exterior-experience-tools{display:none!important}
body.exploded-open #viewport .measurement-control{display:flex!important;left:16px;right:auto;top:12px}
body.exploded-open #measurementToggle,body.exploded-open #measurementMenu{display:none!important}
@media(max-width:600px){
 #viewport .measurement-control{gap:6px}
 #viewport .exterior-experience-tools button{font-size:11px;padding:10px;gap:5px}
 #viewport .exterior-experience-tools svg{width:18px;height:18px}
}
@media(max-width:360px){
 body.exterior-tools-visible #viewport .measurement-control{left:58px}
 body.exterior-tools-visible #helpButton{left:8px}
 #viewport .exterior-experience-tools button{padding-inline:7px}
 body.exterior-tools-visible #viewport .landscape-control{right:58px}
 body.exterior-tools-visible #viewport .quality-control{right:8px}
}

#skyStatus{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Native grab/grabbing stays sharp and recognizable on every display. */
#hint .ui-icon{width:30px;height:30px;stroke-width:1.9;flex:none}

body.quote-open.exterior-tools-visible #viewport .measurement-control{left:12px}
@media(max-width:900px),(pointer:coarse){
 body.arranging #viewport .landscape-control{top:8px;right:64px}
 body.arranging #viewport .quality-control{right:8px}
}
body.exploded-open.exterior-tools-visible #viewport .measurement-control{left:12px;right:auto}
/* When the sidebar hides Help, release its empty slot beside the ruler. */
body.exterior-tools-visible:not(.panel-closed) #viewport .measurement-control{left:12px}