/* A filled capsule, shared by dimensions and discrete storage counts. */
body[data-planner-mode="custom"] .custom-field{container-type:inline-size}
body[data-planner-mode="custom"] .capsule-slider{--capsule-fill:0%;--capsule-end:44px;position:relative;isolation:isolate;min-width:0;height:54px;border:1px solid #c8bcac;border-radius:999px;background:#e3dcd2;color:#44392e;box-shadow:inset 0 1px 3px #5946310c;overflow:hidden}
body[data-planner-mode="custom"] .capsule-slider::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--capsule-fill);border-radius:inherit;background:#c4b29a;pointer-events:none;transition:width 100ms var(--motion-ease,ease)}
body[data-planner-mode="custom"] .capsule-slider:has(.is-motion-dragging)::before{transition:none}
body[data-planner-mode="custom"] .capsule-slider .capsule-range{position:absolute;inset:0 var(--capsule-end);width:calc(100% - 2 * var(--capsule-end));height:100%;min-height:0;display:block;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:2}
body[data-planner-mode="custom"] .capsule-slider input[hidden]{display:none!important}
body[data-planner-mode="custom"] .capsule-readout{position:absolute;inset:0 var(--capsule-end);display:flex;align-items:center;justify-content:center;gap:7px;margin:0;color:inherit;font-size:15px;font-weight:500;line-height:1.25;white-space:nowrap;pointer-events:none;z-index:1}
body[data-planner-mode="custom"] .capsule-readout output{font-family:Inter,'Noto Sans TC',sans-serif;font-variant-numeric:tabular-nums;font-size:17px;min-width:1ch}
body[data-planner-mode="custom"] .capsule-unit{font-size:13px;font-weight:400}
body[data-planner-mode="custom"] .capsule-slider>button{position:absolute;top:0;bottom:0;width:var(--capsule-end);height:100%;min-height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;font:400 22px/1 var(--sans,sans-serif);cursor:pointer;touch-action:manipulation;z-index:3}
body[data-planner-mode="custom"] .capsule-minus{left:0}
body[data-planner-mode="custom"] .capsule-plus{right:0}
body[data-planner-mode="custom"] .capsule-slider>button:disabled{opacity:.28;cursor:default}
body[data-planner-mode="custom"] .capsule-slider>button:focus-visible{outline-offset:-6px}
body[data-planner-mode="custom"] .capsule-slider:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
body[data-planner-mode="custom"] .capsule-slider.is-disabled{background:#e9e3db;color:#796f64;box-shadow:none}
body[data-planner-mode="custom"] .capsule-slider.is-disabled::before{background:#e1d8cd}
body[data-planner-mode="custom"] .capsule-slider.is-disabled input{cursor:default}
body[data-planner-mode="custom"] .custom-dimensions{gap:16px}
body[data-planner-mode="custom"] .custom-counts{gap:16px}
body[data-planner-mode="custom"] .custom-dimension-hint{font-size:13px;line-height:1.6;margin:7px 14px 0;color:#796b5b}
body[data-planner-mode="custom"] .custom-depth-warning{margin:5px 14px 0;font-size:13px;line-height:1.6}
body[data-planner-mode="custom"] :is(.custom-purpose-buttons,.low-choice-row,.capsule-segmented){display:flex;gap:4px;padding:4px;border:1px solid #d3c7b8;border-radius:26px;background:#e3dcd2;flex-wrap:wrap}
body[data-planner-mode="custom"] :is(.custom-purpose-button,.low-choice-row>button,.capsule-segmented>button){flex:1;min-width:0;min-height:44px;border:0;border-radius:22px;padding:10px 13px;background:transparent;color:#706150;box-shadow:none;font-size:14px;line-height:1.5;white-space:normal;translate:none}
body[data-planner-mode="custom"] :is(.custom-purpose-button,.low-choice-row>button,.capsule-segmented>button)[aria-pressed="true"]{background:#f8f4ee;color:#483b2c;box-shadow:0 2px 6px #4e3c2520}
body[data-planner-mode="custom"] .custom-form-card{border-radius:22px}
body[data-planner-mode="custom"] .low-bay-panel .custom-field{margin-bottom:14px}
body[data-planner-mode="custom"] .material-swatch-button{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;min-height:60px;margin:10px 0 0;padding:4px;border:1px solid #c8bcac;border-radius:12px;background:#f8f4ee;overflow:hidden}
body[data-planner-mode="custom"] .material-swatch-button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}
body[data-planner-mode="custom"] .low-summary-material.is-swatch{display:block}
body[data-planner-mode="custom"] .low-summary-material.is-swatch img{width:40px;height:40px;border-radius:8px}
@media(hover:hover) and (pointer:fine){
 body[data-planner-mode="custom"] .capsule-slider>button:not(:disabled):hover{background:#ffffff40}
 body[data-planner-mode="custom"] :is(.custom-purpose-button,.low-choice-row>button,.capsule-segmented>button):not(:disabled,[aria-pressed="true"]):hover{background:#f8f4ee66;translate:none}
}
@media(max-width:720px){
 body[data-planner-mode="custom"] .capsule-slider{height:52px}
 body[data-planner-mode="custom"] .capsule-readout{font-size:14px;gap:5px}
 body[data-planner-mode="custom"] .capsule-readout output{font-size:16px}
 body[data-planner-mode="custom"] :is(.custom-purpose-button,.low-choice-row>button,.capsule-segmented>button){padding:10px 8px}
}
@media(prefers-reduced-motion:reduce){body[data-planner-mode="custom"] .capsule-slider::before{transition:none}}
@container(max-width:220px){
 body[data-planner-mode="custom"] .capsule-slider{--capsule-end:32px;height:64px}
 body[data-planner-mode="custom"] .capsule-readout{display:grid;grid-template-columns:auto auto;align-content:center;gap:3px 4px}
 body[data-planner-mode="custom"] .capsule-readout [data-capsule-title]{grid-column:1/-1;text-align:center}
 body[data-planner-mode="custom"] .capsule-readout output{text-align:right}
 body[data-planner-mode="custom"] .capsule-unit{align-self:end;padding-bottom:1px}
}
@container(max-width:140px){body[data-planner-mode="custom"] .capsule-slider{--capsule-end:26px}}

body[data-planner-mode="custom"] .custom-type-selector{margin-bottom:22px;container-type:inline-size}
body[data-planner-mode="custom"] .custom-type-selector .custom-purpose-buttons{flex-wrap:nowrap}
body[data-planner-mode="custom"] .capsule-option strong{font:inherit;font-weight:500;margin:0}
body[data-planner-mode="custom"] .capsule-option small[hidden]{display:none}
body[data-planner-mode="custom"] #doorToggle{width:100%;margin:18px 0}
body[data-planner-mode="custom"] .capsule-segmented>button{flex:1 1 90px}
@container(max-width:240px){body[data-planner-mode="custom"] .custom-type-selector .custom-purpose-buttons{flex-direction:column}}

/* The mobile 60/40 workspace uses the same slim controls in 2D and 3D. */
@media(max-width:720px){
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas>.composer-stage.is-active{padding-inline:calc(4px * var(--controls-compensation,1))}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .capsule-slider{--capsule-end:clamp(22px,14cqw,32px);width:100%;height:clamp(28px,19cqw,42px)}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .capsule-slider>button{min-height:0;font-size:18px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .capsule-readout{display:flex;gap:3px;font-size:clamp(9px,6.5cqw,13px);white-space:nowrap}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .capsule-readout output{font-size:clamp(10px,7cqw,14px);text-align:center}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .capsule-unit{font-size:clamp(9px,6cqw,11px);align-self:auto;padding:0}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas :is(.custom-dimensions,.custom-counts){gap:10px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .custom-dimension-hint{margin:6px 6px 0;font-size:10px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .custom-type-selector{margin-bottom:12px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .custom-purpose-buttons{flex-direction:row;flex-wrap:nowrap;gap:2px;padding:2px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .custom-purpose-button{min-height:24px;padding:4px 2px;font-size:clamp(9px,6.5cqw,12px);line-height:1.3;white-space:nowrap}
}

/* Compact bay accordions share the dimensions' capsule shape in both views. */
body[data-planner-mode="custom"] .low-workspace{--low-control-height:40px;--low-control-font:14px;--low-control-end:30px;--low-control-inset:12px;--low-swatch-size:24px;container-type:inline-size}
body[data-planner-mode="custom"] .low-workspace .low-section-accordion{margin:0 0 10px;border:0;border-radius:0;background:transparent}
body[data-planner-mode="custom"] .low-workspace .low-bay-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--low-control-height);width:100%;padding:6px var(--low-control-inset);border:1px solid #c8bcac;border-radius:999px;background:#e3dcd2;color:#44392e;box-shadow:none;font-size:var(--low-control-font);line-height:1.25;white-space:nowrap}
body[data-planner-mode="custom"] .low-workspace .low-bay-summary>span:first-child{font-weight:500}
body[data-planner-mode="custom"] .low-workspace .low-bay-summary[aria-expanded="true"]{background:#c4b29a}
body[data-planner-mode="custom"] .low-workspace .low-bay-chevron{flex:none;width:6px;height:6px;margin:0 4px}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel{padding:10px 0 0;border:0;container-type:inline-size}
body[data-planner-mode="custom"] .low-workspace .low-bay-meta{margin:0 8px 10px;font-size:12px;line-height:1.4;color:var(--muted)}
body[data-planner-mode="custom"] .low-workspace .low-choice-row{flex-direction:row;flex-wrap:nowrap;gap:2px;margin-bottom:10px;padding:2px;border-radius:999px}
body[data-planner-mode="custom"] .low-workspace .low-choice-row>button{flex:1 1 0;min-width:0;min-height:calc(var(--low-control-height) - 6px);padding:3px 2px;border-radius:999px;font-size:var(--low-control-font);line-height:1.25;white-space:nowrap}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel fieldset{margin:0 0 10px}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel legend{font-size:var(--low-control-font);line-height:1.4;margin:0 8px 6px}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel fieldset .low-choice-row{margin-bottom:0}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .custom-field{margin-bottom:10px}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .capsule-slider{--capsule-end:var(--low-control-end);height:var(--low-control-height)}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .capsule-slider>button{min-height:0;font-size:18px}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .capsule-readout{display:flex;gap:3px;font-size:var(--low-control-font)}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .capsule-readout output{font-size:inherit;text-align:center}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .capsule-unit{font-size:inherit;align-self:auto;padding:0}
body[data-planner-mode="custom"] .low-workspace .low-bay-panel .low-total{margin:-3px 8px 10px;font-size:12px;line-height:1.4}
body[data-planner-mode="custom"] .low-workspace .low-material-card{display:flex;align-items:center;gap:6px;width:100%;min-height:var(--low-control-height);padding:4px 8px;border:1px solid #c8bcac;border-radius:999px;background:#e3dcd2;color:#44392e;font-size:var(--low-control-font);line-height:1.25;white-space:nowrap}
body[data-planner-mode="custom"] .low-workspace .low-material-card img{width:var(--low-swatch-size);height:var(--low-swatch-size);border-radius:50%;flex:none}
body[data-planner-mode="custom"] .low-workspace .low-material-copy{display:block;min-width:0;flex:1;font-size:inherit;white-space:nowrap}
body[data-planner-mode="custom"] .low-workspace .low-bay-footer{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0 0;padding:0;border:0}
body[data-planner-mode="custom"] .low-workspace .low-bay-footer>button{width:100%;min-height:var(--low-control-height);padding:6px 8px;border:1px solid #c8bcac;border-radius:999px;background:#e3dcd2;color:#44392e;font-size:var(--low-control-font);line-height:1.25;white-space:nowrap}
@media(max-width:720px){
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .low-workspace{--low-control-height:clamp(28px,20cqw,40px);--low-control-font:clamp(10px,7cqw,14px);--low-control-end:clamp(22px,14cqw,30px);--low-control-inset:10px;--low-swatch-size:18px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .low-workspace .custom-step-title{font-size:16px;margin-bottom:12px}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .low-workspace .low-bay-summary{font-size:clamp(12px,8cqw,14px)}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .low-workspace :is(.low-bay-meta,.low-total){font-size:10px}
}

body[data-planner-mode="custom"] :is(.low-material-card,.custom-drawer-material,.material-choice-grid).material-required-invalid{border-color:#b5443b;background:#fff0ec;outline:1px solid #b5443b;outline-offset:1px}
body[data-planner-mode="custom"] .material-required-message{margin:6px 8px 10px;color:#a5322b;font-size:12px;line-height:1.5}
body[data-planner-mode="custom"] .material-required-message[hidden]{display:none!important}

/* Reviewed, valid sections stay compact and visibly complete. */
body[data-planner-mode="custom"] .low-workspace .low-bay-summary.is-complete{border:2px solid #478268;background:#edf3ed;color:#315b45}
body[data-planner-mode="custom"] .low-complete-mark{margin-left:auto;font-size:14px;font-weight:600}
body[data-planner-mode="custom"] .planner-material-button{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:5px 12px;border:1px solid #c8bcac;border-radius:999px;background:#e3dcd2;color:#44392e;font-size:14px;line-height:1.3;white-space:nowrap;box-shadow:none}
body[data-planner-mode="custom"] .planner-material-button img{width:24px;height:24px;object-fit:contain;border-radius:50%;flex:none}
body[data-planner-mode="custom"] .planner-material-copy{flex:1;min-width:0;text-align:left}
body[data-planner-mode="custom"] :is(.planner-material-button,.low-material-card){margin-block:8px 10px}
body[data-planner-mode="custom"] .planner-material-button.material-required-invalid{border-color:#b5443b;background:#fff0ec;outline:1px solid #b5443b;outline-offset:1px}
body[data-planner-mode="custom"] [data-composer-stage="2"]{container-type:inline-size;--door-control-height:40px;--door-control-font:14px}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(#doorToggle,.door-direction-options,.handle-options){display:flex;flex-flow:row nowrap;gap:2px;padding:2px;margin-block:8px 10px;border:1px solid #d3c7b8;border-radius:999px;background:#e3dcd2;min-width:0}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(#doorToggle,.door-direction-options,.handle-options)>button{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:calc(var(--door-control-height) - 6px);padding:4px 3px;border:0;border-radius:999px;background:transparent;color:#706150;box-shadow:none;font-size:var(--door-control-font);line-height:1.25;white-space:nowrap;translate:none;transform:none}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(#doorToggle,.door-direction-options,.handle-options)>button[aria-pressed="true"]{background:#f8f4ee;color:#483b2c;box-shadow:0 2px 6px #4e3c2520}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(.handle-diagram,.handle-choice-copy small,.door-direction-card small){display:none}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(.handle-choice-copy,.handle-choice-copy strong,.door-direction-card strong,.capsule-option strong){font:inherit;margin:0;white-space:nowrap}
body[data-planner-mode="custom"] [data-composer-stage="2"] .handle-choice-lock{position:static;width:12px;height:12px;margin-left:3px;padding:0;background:transparent}
body[data-planner-mode="custom"] [data-composer-stage="2"] :is(.handle-section,.door-direction-section){margin-block:12px;padding:0;border:0}
body[data-planner-mode="custom"] [data-composer-stage="2"] .choice-group-title{font-size:var(--door-control-font);margin:6px 8px}
body[data-planner-mode="custom"] [data-composer-stage="2"] .handle-lock-bar{flex-wrap:wrap;gap:6px;font-size:12px;padding:6px 8px}
body[data-planner-mode="custom"] [data-composer-stage="2"] .handle-lock-bar button{min-height:28px;padding:4px 10px;border-radius:999px;font-size:12px}
@media(max-width:720px){
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas [data-composer-stage="2"]{--door-control-height:clamp(28px,20cqw,40px);--door-control-font:clamp(10px,7cqw,14px)}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .planner-material-button{min-height:clamp(28px,20cqw,40px);padding:4px 8px;font-size:clamp(10px,7cqw,14px)}
 body[data-planner-mode="custom"] .has-live-preview .composer-canvas .planner-material-button img{width:18px;height:18px}
}

/* A local detail camera leaves the settings panel in place. */
#composerCanvasViewport #livePreviewCabinet .custom-drawing-sheet{transform:translate(var(--detail-x,0px),var(--detail-y,0px)) scale(var(--detail-zoom,1))!important;transform-origin:center;will-change:transform}
#livePreviewCabinet.is-detail-focused{overflow:visible!important}
@media(min-width:721px){
 #composerCanvasViewport #livePreviewCabinet .custom-drawing-sheet{transform:translate(var(--drawing-pan-x,0px),var(--drawing-pan-y,0px)) scale(var(--drawing-zoom,1)) translate(var(--detail-x,0px),var(--detail-y,0px)) scale(var(--detail-zoom,1))!important}
}
body[data-planner-mode="custom"] .handle-type-preview{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 14px;padding:10px;border:1px solid #d3c7b8;border-radius:14px;background:#f8f4ee;pointer-events:none}
body[data-planner-mode="custom"] .handle-type-preview svg{display:block!important;width:76px;max-width:65%;height:88px}
body[data-planner-mode="custom"] .handle-type-preview.is-drawer-handle svg{width:150px;max-width:90%;height:88px}
body[data-planner-mode="custom"] .handle-type-preview figcaption{font-size:12px;line-height:1.3;color:#706150}
body[data-planner-mode="custom"] .handle-type-preview[hidden]{display:none!important}