/* Exterior and technical view share one canvas and the configured product. */
.header-experience-tools{margin-left:auto;display:flex;align-items:center}
.header-experience-tools button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border-radius:50%;background:transparent;color:var(--color-accent)}
.header-experience-tools svg{width:24px;height:24px}
#dayNight .night-icon,#dayNight[aria-pressed=true] .day-icon{display:none}
#dayNight[aria-pressed=true] .night-icon{display:block}
#dayNight[aria-pressed=true]{background:#15384b;color:white}
.app-header #saveProject{margin-left:0}
.exterior-experience-tools{position:absolute;top:16px;left:76px;display:flex;align-items:center;gap:8px;z-index:28}
.exterior-experience-tools button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 17px;background:#fffffff0;color:var(--color-accent);border:1px solid var(--color-line);border-radius:26px;font-size:13px;font-weight:600;box-shadow:0 3px 15px #18384412;white-space:nowrap}
.exterior-experience-tools svg{width:21px;height:21px;flex:none}
#openMaterials[aria-expanded=true]{background:var(--color-accent);color:white;border-color:var(--color-accent)}
#exteriorLights[aria-pressed=false]{color:var(--color-muted);background:#f0f3f1}

/* Shared header layout on compact screens. */
@media(max-width:900px){
 body:not(.landing) .app-header{display:grid;grid-template-columns:44px minmax(70px,1fr) 44px 36px;grid-template-rows:44px;align-content:center;gap:6px;padding-inline:10px}
 .app-header .project-title{display:none}.app-header #homeLink{grid-area:1/2;min-width:0}.app-header #homeLink img{max-width:100%;height:auto}
 body:not(.landing) .app-header #allModules{grid-area:1/1}.app-header .header-experience-tools{grid-area:1/3;margin-left:0}
 body:not(.landing) .app-header #saveProject{grid-area:1/4;min-width:36px;padding:6px}.app-header #saveProject span{display:none}
 .exterior-experience-tools{left:68px;top:12px;gap:5px}.exterior-experience-tools button{min-height:42px;font-size:11px;padding:9px 12px;gap:6px}.exterior-experience-tools svg{width:18px;height:18px}#exteriorLights span{display:none}#exteriorLights{width:42px;padding:10px}
}

/* The scene and its detail occupy separate areas, on every screen. */
body.exploded-open #viewport{inset:16px!important;width:auto!important;height:auto!important;border-radius:20px;overflow:hidden;transition:none!important}
body.exploded-open.material-detail-open #viewport{bottom:260px!important}
body.exploded-open #sidePanel,body.exploded-open #reopenConfigPanel,body.exploded-open #hint,body.exploded-open #movementHint,body.exploded-open #sceneActionLabel,body.exploded-open .furniture-selection-bar,body.exploded-open #planDimensions,body.exploded-open #viewport .mode-tabs,body.exploded-open #helpButton,body.exploded-open #viewport .measurement-control,body.exploded-open #viewport .landscape-control{display:none!important}
body.exploded-open .exterior-experience-tools{left:12px}
#materialMuseum[hidden],.explosion-overlay[hidden],.exterior-experience-tools[hidden],.exterior-experience-tools [hidden]{display:none!important}

.explosion-overlay{position:absolute;inset:0;z-index:22;pointer-events:none}
.museum-leaders,.museum-pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.museum-leaders{fill:none;stroke:#567c91;stroke-width:1}
.museum-pins button{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer}
.museum-pins button[hidden]{display:none}
.museum-pins button span{display:block;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#175474;box-shadow:0 2px 6px #153e4f70;transition:transform 150ms ease-out}
.museum-pins button.selected span{transform:scale(1.3);background:#0875b6}
.museum-pins button:active span{transform:scale(.9)}
.museum-pins button:focus-visible{outline:2px solid #175474;outline-offset:0}
.explosion-footer{position:absolute;bottom:8px;left:16px;right:16px;display:flex;align-items:center;justify-content:center;gap:24px;min-height:44px}
.explosion-caption{margin:0;font-size:13px;line-height:1.4;color:#405b51}
.museum-utilities{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid #ccd7d2;border-radius:10px;background:#fff;color:#175474;pointer-events:auto;font:inherit;font-size:13px;cursor:pointer;flex:none}
.museum-utilities svg{width:17px;height:17px}.museum-utilities svg+svg{margin-left:-3px}
.museum-utilities:focus-visible,#materialMuseum button:focus-visible{outline:2px solid #175474;outline-offset:3px}
.night-scene .explosion-caption{color:#dce9e4}
@media(hover:hover) and (pointer:fine){.museum-pins button:hover span{transform:scale(1.3)}.museum-utilities:hover{background:#eaf2f7}}

#materialMuseum{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(980px,calc(100% - 32px));height:228px;display:flex;flex-direction:column;min-height:0;margin:0;padding:0;border:1px solid #d7e0da;border-radius:16px;background:#fff;color:#202925;overflow:hidden;z-index:34}
.museum-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:10px 18px 0}
.museum-header h2{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0}
#closeMuseum{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;color:#175474;cursor:pointer}
#closeMuseum svg{width:21px;height:21px}
#museumDetails{padding:6px 22px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8b8ae transparent;min-height:0;flex:1}
.museum-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,370px);gap:28px;align-items:center;margin:0;font-size:14px;line-height:1.5}
.museum-summary{font-size:16px;line-height:1.45;margin:0 0 14px;color:#40554b}
.museum-detail dl{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0}
.museum-detail dt{font-size:12px;color:#617269;margin:0 0 3px}.museum-detail dd{font-size:14px;font-weight:600;line-height:1.3;margin:0}
.material-diagram{margin:0;padding:0}.material-diagram figcaption{display:none}
.material-strata{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:142px;gap:12px;align-items:stretch}
.material-strata svg{display:block;width:100%;height:100%}
.material-layers{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,1fr)}
.material-layers li{display:flex;align-items:center;font-size:13px;line-height:1.35}
.museum-detail-utilities{grid-template-columns:1fr 1fr;gap:12px 32px}
.museum-connection{display:flex;align-items:flex-start;gap:14px}
.museum-connection-icon{color:#175474;flex:none;padding-top:3px}.museum-connection-icon svg{width:28px;height:28px}
.museum-connection h3{font-size:16px;line-height:1.3;margin:0 0 6px;font-weight:600}.museum-connection p{font-size:14px;color:#40554b;line-height:1.5;margin:0}
.museum-connection-note{grid-column:1/-1;margin:0;color:#617269;font-size:12px;line-height:1.4}
@media(max-width:900px){
 body.exploded-open #viewport{inset:0!important;border-radius:0}
 body.exploded-open.material-detail-open #viewport{inset:0 0 calc(min(39%,300px) + 20px) 0!important}
 #materialMuseum{bottom:8px;width:calc(100% - 16px);height:min(39%,300px);border-radius:16px}
 .museum-header{padding:8px 12px 0;gap:8px}.museum-header h2{font-size:19px}
 #museumDetails{padding:8px 16px 16px}
 .museum-detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
 .museum-summary{font-size:14px;margin-bottom:12px}.museum-detail dl{gap:10px}.museum-detail dt{font-size:11px}.museum-detail dd{font-size:13px}
 .material-strata{grid-template-columns:42% 58%;gap:6px;height:182px}.material-layers li{font-size:12px}
 .explosion-footer{left:12px;right:12px;gap:12px;justify-content:space-between}.explosion-caption{font-size:12px;max-width:190px}
 .museum-utilities{font-size:12px;padding:8px;gap:4px}.museum-utilities svg{width:16px;height:16px}
 .museum-detail-utilities{grid-template-columns:1fr;gap:14px}.museum-connection{gap:12px}.museum-connection-icon svg{width:23px;height:23px}.museum-connection h3{font-size:15px;margin-bottom:3px}.museum-connection p{font-size:13px}.museum-connection-note{font-size:11px}
}
@media(max-height:500px) and (orientation:landscape){
 #materialMuseum{inset:8px 8px 8px auto;transform:none;width:42%;height:auto}
 body.exploded-open.material-detail-open #viewport{inset:0 calc(42% + 16px) 0 0!important}
 .museum-detail{grid-template-columns:1fr}.museum-detail dl{display:flex}.material-strata{height:142px}
 .explosion-caption{display:none}.explosion-footer{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.museum-pins button span{transition:none}}