/* Hallmark component scope: existing Metella palette, modern minimal controls.
   One view dock; contextual rooms; live spotlight guidance. Inherits tokens. */
.modules-mobile { display:none; }
#saveProject { margin-left:auto; }
.hd-toggle, .hd-toggle[aria-pressed=true] { background:var(--color-glass); color:var(--color-muted); border:1px solid var(--color-line); box-shadow:0 2px 8px var(--color-shadow); font-size:13px; font-weight:600; }
.hd-toggle:hover { background:var(--color-paper); color:var(--color-ink); }
.hd-toggle { position:relative; }
.hd-toggle[aria-pressed=true] { color:var(--color-accent); border-color:var(--color-accent-soft); }
.hd-status { display:none; position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; padding:1px; border:2px solid var(--color-paper); border-radius:50%; background:var(--color-accent); color:var(--color-inverse); }
.hd-toggle[aria-pressed=true] .hd-status { display:block; }
.mode-tabs { width:520px; height:auto; display:grid; grid-template-columns:1fr 1fr 1fr 1.4fr; align-items:stretch; gap:4px; padding:6px; }
.mode-tabs button { min-width:0; min-height:54px; padding:8px 12px; border:0; border-radius:26px!important; display:flex; gap:7px; align-items:center; justify-content:center; font-size:12px; }
.mode-tabs button.selected { background:var(--color-accent-soft); color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); }
.mode-tabs button:not(.selected):hover { background:var(--color-soft); color:var(--color-ink); box-shadow:none; }
.mode-tabs #navConfigure { background:var(--color-accent); color:var(--color-inverse); }
.mode-tabs #navConfigure:hover { background:var(--color-ink); }
.mode-tabs #navConfigure.selected { box-shadow:inset 0 0 0 3px var(--color-paper),0 0 0 1px var(--color-accent); }
.mode-tabs button:disabled { opacity:.55; cursor:not-allowed; }
.mode-tabs .ui-icon, #interiorRooms .ui-icon { margin:0; }
.mode-tabs button { white-space:nowrap; }
.mode-tabs button:focus-visible, #interiorRooms:focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
#interiorRooms { position:absolute; top:12px; left:64px; z-index:4; display:flex; gap:7px; align-items:center; min-height:44px; padding:10px; border-radius:24px; border:1px solid var(--color-line); box-shadow:0 3px 14px var(--color-shadow); font-size:12px; font-weight:600; }
#interiorRooms .ui-icon { width:19px; height:19px; }
body.landing #interiorRooms, body.entering #interiorRooms, body.visit-help-open #interiorRooms { display:none!important; }
[data-section=explore] h1 { font-size:28px; }
[data-section=explore] .room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:18px; }
[data-section=explore] .room-grid button { justify-content:flex-start; }
[data-section=explore] .room-symbol { display:block; }
#startTour { justify-content:center; gap:8px; }
#startTour span { font-weight:400; font-size:11px; }
.catalog-product-soon { color:var(--color-muted); cursor:not-allowed; }
.catalog-product-soon .catalog-product-image { background:var(--color-soft); }
.catalog-product-soon img { filter:grayscale(.85); opacity:.65; }
.catalog-product-soon .catalog-product-link, .catalog-product-soon h3 { color:var(--color-muted); }
.catalog-product-soon .catalog-preview-label { color:var(--color-muted); background:var(--color-paper); }
#tour { top:68px; bottom:auto; left:12px; width:340px; max-width:calc(100% - 24px); padding:18px; border-radius:20px; max-height:calc(100% - 160px); overflow:hidden; display:flex; flex-direction:column; }
#tour > [aria-live] { min-height:0; overflow:auto; }
#tour > :not([aria-live]) { flex-shrink:0; }
.tour-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#tourCount { font-size:11px; font-weight:650; letter-spacing:.7px; color:var(--color-accent); }
#tourClose { padding:0; width:44px; height:44px; min-height:44px; margin:-10px -8px -5px 0; border-radius:50%; font-size:24px; }
#tourProgress { display:flex; gap:5px; margin:12px 0 16px; }
#tourProgress i { flex:1; height:4px; border-radius:4px; background:var(--color-line); overflow:hidden; }
#tourProgress i::after { content:''; display:block; height:100%; width:100%; transform:scaleX(var(--progress,0)); transform-origin:left; background:var(--color-accent); }
#tour h2 { font-size:21px; line-height:1.15; margin:10px 0; }
#tour p { margin:8px 0 14px; font-size:13px; line-height:1.5; }
#tour #tourAutoplay { font-size:11px; margin:14px 0 8px; color:var(--color-accent); }
#tour .tour-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; }
#tour .tour-controls button { border-radius:22px; }
#tourFinished .wide { font-size:12px; justify-content:center; }
#replayTutorial { justify-content:center; }
body.walking .bottom #hint { display:none!important; }
@media(min-width:901px) and (pointer:fine) {
 body[data-panel=configure]:not(.landing):not(.panel-closed) .mode-tabs { width:min(520px,calc(100vw - var(--config-panel-width) - 64px)); }
}
@media(max-width:900px), (max-width:1024px) and (max-height:500px), (pointer:coarse) {
 :root { --header-height:64px; }
 body:not(.landing) .app-header { height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) 44px; grid-template-rows:64px; padding:0 10px; gap:6px; }
 body:not(.landing) .all-modules { grid-area:1/1; padding:0 10px 0 5px; font-size:11px; }
 .modules-desktop { display:none; } .modules-mobile { display:inline; }
 body:not(.landing) #homeLink { grid-area:1/2; justify-self:center; padding:0; width:auto; height:auto; min-height:44px; }
 body:not(.landing) .app-header .brand-logo { width:clamp(142px,42vw,190px); max-width:100%; height:auto; aspect-ratio:400/93; object-fit:contain; }
 body:not(.landing) #saveProject { grid-area:1/3; margin:0; width:44px; height:44px; }
 body:not(.landing) .project-title { display:none; }
 .mode-tabs { width:calc(100% - 16px); max-width:520px; left:50%; right:auto; bottom:calc(8px + env(safe-area-inset-bottom)); height:auto; padding:5px; gap:2px; grid-template-columns:1fr 1fr 1fr 1.4fr; }
 body:not(.landing) .mode-tabs { left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 16px); max-width:520px; }
 .mode-tabs button { flex-direction:column; min-height:54px; gap:3px; padding:6px 3px; font-size:11px; }
 .mode-tabs .ui-icon { width:20px; height:20px; }
 #tour { top:64px; bottom:auto; width:320px; padding:14px; max-height:calc(100% - 180px); }
 #tour h2 { font-size:19px; } #tour p { font-size:12px; }
}
@media(max-width:600px) {
 #landscapeToggle { width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; }
 #landscapeToggle span, #landscapeToggle .landscape-chevron { display:none; }
}
@media(max-height:550px) {
 #tour { top:12px; left:auto; right:12px; max-height:calc(100% - 105px); width:300px; }
}
@media(prefers-reduced-motion:reduce) { .mode-tabs button { transition:none; } }

/* Model-anchored measurements stay sharp without adding 3D geometry or lights. */
#planDimensions { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:hidden; color:var(--color-accent); }
.dimension-extension { stroke:var(--color-accent); stroke-width:1; opacity:.65; fill:none; }
.dimension-rule { stroke:var(--color-accent); stroke-width:1.5; fill:none; }
.dimension-label rect { fill:var(--color-paper); stroke:var(--color-line); stroke-width:1; }
.dimension-label text { fill:var(--color-accent); font:600 12px var(--font-body); }
.plan-dimension-note { position:absolute; bottom:108px; left:50%; transform:translateX(-50%); z-index:2; max-width:calc(100% - 24px); padding:8px 12px; border-radius:16px; background:var(--color-glass); color:var(--color-muted); text-align:center; font-size:11px; line-height:1.4; pointer-events:none; }
@media(max-width:900px) { .plan-dimension-note { bottom:calc(var(--dock-clearance) + 12px); width:max-content; font-size:10px; } }
body:has(#navPlan[aria-pressed="true"]) .bottom #hint { display:none; }

@media(min-width:500px) and (max-width:900px) { body.touring.walking #touchpad { left:auto; right:16px; } }

body.touring #touchpad,body.touring #reticle,body.touring .bottom,body.touring #interaction { display:none!important; }
@media(max-width:900px), (pointer:coarse) {
 #tour { top:64px; padding:12px 14px; }
 #tour h2 { font-size:17px; margin:9px 0 6px; }
 #tour #tourText { font-size:12px; line-height:1.5; margin:0; }
 #tour #tourAutoplay { margin:8px 0; }
 #tourProgress { margin:8px 0 6px; }
 .tour-controls button { min-height:44px; }
}

@media(max-width:900px), (pointer:coarse) {
 #tourCount { font-size:10px; letter-spacing:.35px; }
 #tour #tourAutoplay { display:none; }
 #tour .tour-controls { margin-top:12px; }
}

/* Direct scale reference, with a visible selected state. */
.person-control { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; margin-top:16px; padding:12px 14px; border:1px solid var(--color-line); border-radius:18px; background:var(--color-paper); color:var(--color-ink); font-size:13px; text-align:left; }
.person-control .ui-icon { width:24px; height:24px; flex:none; }
.person-check { width:20px; height:20px; margin-left:auto; flex:none; visibility:hidden; }
.person-control[aria-pressed=true] { background:var(--color-accent-soft); border-color:var(--color-accent); color:var(--color-accent); }
.person-control[aria-pressed=true] .person-check { visibility:visible; }

/* Section views keep the same scene alive. Preview cards sit over the viewport. */
.side-view-picker{position:absolute;left:50%;bottom:106px;transform:translateX(-50%);z-index:24;display:flex;gap:10px;width:min(690px,calc(100% - 32px));padding:12px;background:var(--color-glass);border:1px solid var(--color-line);border-radius:24px;box-shadow:0 8px 34px var(--color-shadow)}
.side-view-picker[hidden]{display:none}.side-view-picker button{flex:1;min-width:0;border:2px solid transparent;border-radius:14px;padding:3px;position:relative;background:var(--color-soft);overflow:hidden;cursor:pointer}.side-view-picker button[aria-pressed=true]{border-color:var(--color-accent)}.side-view-picker button:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.side-view-picker img{display:block;width:100%;height:82px;object-fit:cover;border-radius:10px}.side-view-picker span{display:block;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--color-paper);color:var(--color-ink);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600}.side-view-picker button:hover{background:var(--color-accent-soft)}
#navSides>svg{width:22px;height:22px;flex:none}.arranging #sideViews,.quote-open #sideViews{display:none!important}
@media(max-width:900px){.mode-tabs button{padding-inline:8px}.mode-tabs button span{font-size:11px}#navSides>svg{width:21px;height:21px}.side-view-picker{bottom:88px;gap:5px;padding:8px;border-radius:20px}.side-view-picker img{height:66px}.side-view-picker span{font-size:10px;padding:4px 6px;bottom:6px}}
/* The dock belongs to the scene, so panel width never enters its coordinates. */
body:not(.landing) #viewport .mode-tabs{position:absolute;left:50%;right:auto;bottom:16px;top:auto;transform:translateX(-50%);width:min(660px,calc(100% - 32px));max-width:none;box-sizing:border-box;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr);gap:4px;padding:6px;margin:0;z-index:25}
#viewport .mode-tabs button{min-width:0;min-height:48px;padding:10px 6px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px}
#viewport .mode-tabs button span{font-size:inherit;min-width:0}
#viewport .mode-tabs button svg{flex:none;width:21px;height:21px}
#viewport{container-type:inline-size;container-name:scene}
@container scene (max-width:620px){#viewport .mode-tabs button{flex-direction:column;gap:4px;font-size:10px;padding:8px 2px;min-height:56px}#viewport .mode-tabs button svg{width:20px;height:20px}}
@media(max-width:900px){body:not(.landing) #viewport .mode-tabs{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);gap:2px;padding:5px}#viewport .mode-tabs button{flex-direction:column;gap:4px;font-size:10px;padding:7px 1px;min-height:56px}}