/* Hallmark · component: unified configuration workspace · theme: Metella
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 * The scene and configuration remain mounted. Controls use the same dock.
 */
/* Extend the current scene colour beneath floating sheets and rounded corners. */
body:not(.landing),body:not(.landing) #experienceMain {background:var(--scene-background,var(--color-studio))}
body:not(.landing) dialog::backdrop {background:transparent!important;backdrop-filter:none!important}
.config-secondary-actions {display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.config-secondary-actions .config-reset {min-height:44px;min-width:0;margin:0;padding:8px 6px;gap:6px;font-size:11px}
.config-secondary-actions .ui-icon {flex:none;width:16px;height:16px}
body:not(.landing) #viewport .mode-tabs {
 display:grid!important;visibility:visible;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);
 width:min(550px,calc(100% - 24px));gap:4px;padding:6px;
}
body:not(.landing) #viewport .mode-tabs #navConfigure {grid-area:auto;visibility:visible;min-width:0;padding:10px 8px;font-size:12px}
#viewport .mode-tabs #navConfigure[aria-expanded=true] {background:var(--color-accent);color:var(--color-inverse)}
#viewport .mode-tabs #navConfigure[aria-expanded=false] {background:var(--color-accent-soft);color:var(--color-accent)}
#viewport .mode-tabs button:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px}
body[data-panel=configure]:not(.quote-open) #toggleConfigPanel {display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:44px;padding:8px 12px;border-radius:24px;color:var(--color-accent);background:var(--color-paper);white-space:nowrap}
#toggleConfigPanel svg {width:20px;height:20px;flex:none}
#toggleConfigPanel:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px}
body[data-panel=configure] #sidePanel .panel-top {gap:8px}
body[data-panel=configure] #panelTitle {min-width:0;margin-right:auto}
body.configuration-collapsed #configurationSection {display:none}
.arranging #viewport .mode-tabs {z-index:36}
.arranging .configure-launch {visibility:visible}
.furniture-editor-top {left:12px;right:12px;top:12px;justify-content:flex-start;align-items:flex-start;gap:8px;pointer-events:none}
.furniture-editor-top>.furniture-project-summary {width:min(340px,calc(100% - 52px));max-width:none;padding:0;pointer-events:auto}
.furniture-editor .furniture-undo {position:static;flex:none;width:44px;height:44px;min-height:44px;margin-top:4px;padding:10px;border:1px solid var(--color-line);border-radius:50%;background:var(--color-paper);pointer-events:auto;box-shadow:0 4px 20px var(--color-shadow)}
.furniture-editor .furniture-undo:disabled {opacity:.45;background:var(--color-paper)}
.furniture-editor-top .project-summary>summary {min-height:52px;font-size:11px}
.furniture-editor-top .project-summary strong {font-size:14px}
.furniture-editor-top .project-additions {max-height:min(36dvh,250px)}
.furniture-editor-top:has(.project-summary[open])>.furniture-project-summary {max-width:calc(100% - 52px);width:340px}
.furniture-feedback {bottom:90px;padding:6px 10px;max-width:calc(100% - 24px);pointer-events:none}
.furniture-feedback small {display:none}
.furniture-editor:not([data-state=error]) .furniture-feedback {display:none}
.furniture-context {background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-line);border-radius:18px;width:280px;box-shadow:0 8px 24px var(--color-shadow)}
.furniture-item-name {align-items:center;margin:0 10px 0 14px;padding:0;min-height:40px;border-bottom:1px solid var(--color-line);gap:8px}
.furniture-item-name strong {font-size:12px;flex:1}
.furniture-item-name [data-deselect] {width:44px;min-height:44px;flex:none;padding:0;font-size:22px;border-radius:50%;color:var(--color-muted)}
.furniture-context-actions {padding:4px;gap:4px}
.furniture-context-actions button {min-height:48px;flex-direction:row;padding:8px;font-size:11px;gap:6px}
.furniture-context-actions button svg {width:18px;height:18px}
.furniture-context-actions button:hover,.furniture-context-actions button.is-hover {background:var(--color-accent-soft)}
.furniture-context-actions button:focus-visible {outline-color:var(--color-focus)}
.furniture-context-actions [data-remove]:hover {background:var(--color-soft);color:var(--color-ink)}
.furniture-item-name:has(+.socket-position-options:not([hidden])) {flex-direction:row;gap:8px}
.socket-position-options {display:block;padding:10px 12px 12px}
.socket-position-options label {display:block;font-size:11px;color:var(--color-muted);margin-bottom:6px}
.socket-position-options select {display:block;width:100%;min-width:0;min-height:44px;border:1px solid var(--color-line);border-radius:10px;padding:8px;background:var(--color-soft);color:var(--color-ink);font:12px var(--font-body)}
@media(min-width:901px) and (min-height:501px) and (pointer:fine) {
 #toggleConfigPanel svg {transform:rotate(-90deg)}
 body.configuration-collapsed[data-panel=configure]:not(.quote-open) #sidePanel {display:none}
 body.configuration-collapsed[data-panel=configure]:not(.landing):not(.panel-closed) #viewport {right:var(--space-md)}
}
@container scene (max-width:620px) {
 #viewport .mode-tabs #navConfigure {font-size:10px;padding:8px 3px}
 .furniture-editor-top .project-summary>summary {grid-template-columns:minmax(0,1fr) 16px;gap:0 6px;padding:6px 10px;min-height:44px}
 .furniture-editor-top summary>span:first-child {display:none}
 .furniture-editor-top summary>strong {grid-area:1/1;font-size:13px}
 .furniture-editor-top summary>.project-summary-chevron {grid-area:1/2}
 .furniture-editor-top>.furniture-project-summary {width:min(200px,calc(100% - 52px))}
 .furniture-editor .furniture-undo {margin-top:0}
 .furniture-context {width:min(280px,calc(100% - 24px));display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;animation:none;border-radius:16px;padding:2px}
 .furniture-item-name {display:contents}
 .furniture-item-name strong {display:none}
 .furniture-item-name [data-deselect] {grid-column:2;grid-row:1}
 .furniture-context-actions {grid-column:1;grid-row:1;min-width:0;gap:0;padding:0}
 .furniture-context-actions button {font-size:10px;min-width:0;min-height:44px;padding:4px;gap:3px;flex-direction:column}
 .furniture-context-actions button svg {width:16px;height:16px}
 .socket-position-options {grid-column:1;grid-row:1;min-width:0;padding:2px 0 2px 4px}
 .socket-position-options label {display:none}
 .furniture-feedback {bottom:182px;font-size:11px}
 .furniture-feedback p {font-size:11px}
}
@media(max-width:900px),(max-width:1024px) and (max-height:500px),(pointer:coarse) {
 body:not(.landing) .app-header {grid-template-columns:44px minmax(0,1fr) 44px}
 body:not(.landing) #saveProject {display:flex;grid-area:1/3}
 body:not(.landing) #saveProject span {display:none}
 body:not(.landing) #viewport .mode-tabs {bottom:8px;padding:4px;gap:2px;width:calc(100% - 16px)}
 #viewport .mode-tabs button,#viewport .mode-tabs #navConfigure {min-height:48px;font-size:10px;padding:6px 2px;gap:3px}
 #viewport .mode-tabs button svg {width:18px;height:18px}
 body[data-panel=configure]:not(.panel-closed):not(.landing) #sidePanel {max-height:min(55dvh,calc(100% - 260px));bottom:max(8px,env(safe-area-inset-bottom))}
 body[data-panel=configure]:not(.panel-closed):not(.landing) #viewport {height:calc(100% - var(--active-panel-height,0px) - 16px)!important;min-height:200px}
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #sidePanel {height:60px;max-height:60px}
 body[data-panel=configure] #sidePanel .panel-top {padding:8px 12px;gap:8px}
 .furniture-editor-top {top:8px;left:8px;right:8px}
 .furniture-context-actions button {min-height:44px}
 .furniture-item-name {min-height:36px}
 .furniture-item-name [data-deselect] {min-height:44px}
 .socket-position-options label {display:none}
 .furniture-feedback {bottom:166px}
 body[data-panel=configure]:not(.quote-open) #toggleConfigPanel {padding:8px 10px}
 .furniture-editor-top:has(.project-summary[open]) .furniture-undo {visibility:visible}
}
@media(prefers-reduced-motion:reduce) {.furniture-context {animation:none}.furniture-editor button {transition:none}}

/* A reduced panel leaves a visible handle; exiting remains a separate action. */
#reopenConfigPanel {position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;padding:14px 10px;border:1px solid var(--color-line);border-radius:16px 0 0 16px;background:var(--color-paper);color:var(--color-accent);box-shadow:0 4px 20px var(--color-shadow)}
#reopenConfigPanel[hidden] {display:none}
#reopenConfigPanel span {writing-mode:vertical-rl;font-size:12px;font-weight:600}
#reopenConfigPanel svg {width:20px;height:20px;flex:none}
#reopenConfigPanel:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px}
.close-panel-label {display:none}
#closePanel svg {display:block;width:20px;height:20px;flex:none}
body[data-panel=configure]:not(.quote-open) #closePanel {display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:44px;min-height:44px;padding:8px 12px;background:transparent;border:0;box-shadow:none;font-size:12px}
body[data-panel=configure]:not(.quote-open) .close-panel-label {display:inline}
body.configuration-collapsed[data-panel=configure]:not(.quote-open) #sidePanel {display:none}
@media(max-width:900px),(max-width:1024px) and (max-height:500px),(pointer:coarse) {
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #viewport {height:calc(100% - 16px)!important}
 #reopenConfigPanel {left:50%;right:auto;top:auto;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px}
 #reopenConfigPanel span {writing-mode:horizontal-tb}
 #reopenConfigPanel svg {transform:rotate(90deg)}
 body[data-panel=configure]:not(.quote-open) #closePanel {padding:8px;gap:4px}
}

/* Configuration owns the options; the dock only offers alternative views. */
body[data-panel=configure]:not(.panel-closed):not(.landing) #viewport .mode-tabs {grid-template-columns:repeat(3,minmax(0,1fr));width:min(410px,calc(100% - 24px))}
.wall-height-options {padding:10px 12px 2px;border-bottom:1px solid var(--color-line)}
.wall-height-options label {display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--color-muted)}
.wall-height-options output {font-variant-numeric:tabular-nums;color:var(--color-ink);font-weight:600}
.wall-height-options>div {display:flex;align-items:center;gap:8px}
.wall-height-options input {min-width:0;width:100%;height:44px;margin:0;accent-color:var(--color-accent);cursor:ns-resize;touch-action:pan-x}
.wall-height-options button {width:44px;min-height:44px;padding:0;flex:none;font-size:20px}
@container scene (max-width:620px) {
 .wall-height-options {grid-row:2;grid-column:1/-1;min-width:0;border-top:1px solid var(--color-line);border-bottom:0;padding:6px 8px 0}
}
@media(max-width:900px),(max-width:1024px) and (max-height:500px),(pointer:coarse) {
 body[data-panel=configure]:not(.panel-closed):not(.configuration-collapsed):not(.landing) #viewport .mode-tabs {display:none!important}
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #viewport .mode-tabs {width:min(410px,calc(100% - 24px))}
 body[data-panel=configure]:not(.panel-closed):not(.configuration-collapsed) .furniture-feedback {bottom:8px}
}

/* Zoom replaces the quality switch. HD is always the default. */
.scene-zoom{pointer-events:auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-line);border-radius:24px;background:var(--color-paper);box-shadow:0 3px 16px var(--color-shadow)}
.scene-zoom button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border-radius:0;color:var(--color-ink);background:transparent}
.scene-zoom button+button{border-top:1px solid var(--color-line)}
.scene-zoom button:hover{background:var(--color-soft)}
.scene-zoom button:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px;border-radius:18px}
.scene-zoom svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body:not(.arranging) .measurement-control{top:112px}
body.arranging .quality-control{top:66px;z-index:38}
body.walking .landscape-control{right:12px}
@container scene (max-width:620px){body.arranging .quality-control{top:60px;right:8px}}

.quote-summary #quoteModuleName{display:block;font-size:20px;line-height:1.25;margin-bottom:6px}.quote-summary #quoteModuleDimensions{display:block;font-size:13px;color:var(--color-muted);margin:0}#quoteCompactSummary{display:none}.quote-total-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}.quote-total-line>span{font-size:14px}.quote-total-line>strong{font-size:26px;color:var(--color-accent);letter-spacing:-.5px}#quotePriceSummary{gap:4px;margin-top:20px}#quotePriceSummary>small{font-size:11px}#quotePriceSummary details{border-top:0;padding:10px 0 0}#quotePriceSummary summary{display:flex;gap:8px;align-items:center;list-style:none;min-height:38px;font-size:13px}#quotePriceSummary summary::after{content:'';flex:none;width:8px;height:8px;margin:0 4px 4px auto;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s}#quotePriceSummary details[open]>summary::after{transform:rotate(225deg)}#quotePriceSummary summary::-webkit-details-marker{display:none}

.sofa-color-options {padding:10px 8px;border-bottom:1px solid var(--color-line)}
.sofa-color-options>span {display:block;font-size:11px;margin:0 4px 6px;color:var(--color-muted)}
.sofa-color-options>div {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.sofa-color-options button {display:flex;flex-direction:column;gap:5px;min-height:52px;padding:6px 2px;font-size:10px;border-radius:10px}
.sofa-color-options button i {display:block;width:22px;height:22px;border-radius:50%;border:1px solid var(--color-line)}
.sofa-color-options button[aria-pressed=true] {background:var(--color-accent-soft);color:var(--color-accent)}
.sofa-color-options button[aria-pressed=true] i {outline:2px solid var(--color-accent);outline-offset:2px}
@container scene (max-width:620px) {
 .sofa-color-options {grid-column:1/-1;grid-row:2;border-top:1px solid var(--color-line);border-bottom:0;padding:8px 4px 4px}
}

#moduleDocument{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;margin-inline:auto}

/* Shared 44 px targets and one vertical axis for scene tools. */
.scene-zoom{width:44px;border:0;box-shadow:inset 0 0 0 1px var(--color-line),0 3px 16px var(--color-shadow)}
.scene-zoom button{width:44px;height:44px;min-height:44px}
body.quote-open #closePanel,#closeQuote{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0}
#closeQuote .ui-icon,#closeDocument .ui-icon,#closeMuseum .ui-icon{display:block;flex:none;width:20px;height:20px;margin:0}
#closeDocument{display:grid;place-items:center;padding:0}

/* Short landscape screens use a full-height side sheet, never a squeezed drawer. */
@media(max-height:500px) and (orientation:landscape){
 body[data-panel=configure]:not(.panel-closed):not(.landing) #sidePanel{inset:8px 8px 8px auto;width:min(360px,42%);height:auto;max-height:none}
 body[data-panel=configure]:not(.panel-closed):not(.landing) #viewport{inset:0 calc(min(360px,42%) + 16px) 0 0!important;width:auto!important;height:100%!important;min-height:0}
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #viewport{inset:0!important}
}