/* ==========================================================================
   Lux Domus Core: Design Your Project configurator.
   Built from the theme's tokens (style.css token bridge) and the approved Design Your
   Project mockup: surface panels with the inset brass keyline, the serif for titles,
   tracked capitals for labels, hairlines, the quarter-round corner on the stage.
   Layout: parts | stage | panel on desktop; a bottom sheet with two tabs under 1024 px.
   ========================================================================== */

.ld-cfg { --ld-r: clamp(64px, 7vw, 112px); --ld-gap: clamp(10px, 1.2vw, 16px); position: relative; font: 400 1rem/1.6 var(--sans); color: var(--text); }
.ld-cfg *, .ld-cfg *::before, .ld-cfg *::after { box-sizing: border-box; }
.ld-cfg .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(.ld-cfg button) { font: inherit; color: inherit; }
.ld-cfg [hidden] { display: none !important; }

.ld-cfg__app {
	display: grid;
	grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(330px, 410px);
	grid-template-areas: "parts stage panel";
	gap: var(--ld-gap);
	height: clamp(620px, calc(100vh - 110px), 980px);
}

/* ---------- Panels (parts, panel) ---------- */
.ld-cfg__parts, .ld-cfg__panel {
	position: relative; min-height: 0; min-width: 0;
	background: var(--surface); border: 1px solid var(--line);
}
.ld-cfg__parts, .ld-cfg__panel { box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--brass) 32%, var(--surface)); }
.ld-cfg__parts { grid-area: parts; display: flex; flex-direction: column; }
.ld-cfg__panel { grid-area: panel; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-radius: 0 0 var(--ld-r) 0; }
.ld-cfg__panel:focus { outline: none; }

/* ---------- Parts list ---------- */
.ld-cfg__parts-head { padding: 22px 22px 14px; border-bottom: 1px solid var(--line); }
.ld-cfg__h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 .66rem/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.ld-cfg__h::before { content: ""; width: 26px; height: 1px; background: var(--brushed); }
.ld-cfg__search input {
	display: block; width: 100%; margin: 0 0 12px; padding: .55rem 0 .6rem;
	border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; background: transparent;
	font: 400 1rem/1.4 var(--sans); color: var(--text);
}
.ld-cfg__search input:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.ld-cfg__search input::placeholder { color: var(--muted); opacity: 1; }
.ld-cfg__layers { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-cfg__layer, .ld-stage__seg button {
	min-height: 32px; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 1px;
	background: transparent; cursor: pointer;
	font: 500 .6rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
	transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.ld-cfg__layer:hover, .ld-cfg__layer:focus-visible { border-color: var(--brass); color: var(--brass-text); }
.ld-cfg__layer[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.ld-cfg__partlist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 18px; }
.ld-cfg__group-title { margin: 16px 10px 6px; font: 500 .6rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-text); }
.ld-cfg__group-list { list-style: none; margin: 0; padding: 0; }
.ld-cfg__part {
	position: relative; display: grid; gap: 1px; padding: .55rem 10px .55rem 14px;
	color: var(--ink); text-decoration: none; border-radius: 1px;
	transition: background-color .35s var(--ease);
}
.ld-cfg__part::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--brass); transform: scaleY(0); transition: transform .4s var(--ease); }
.ld-cfg__part-name { font: 400 1.12rem/1.25 var(--serif); }
.ld-cfg__part-meta { font-size: .76rem; color: var(--muted); }
.ld-cfg__part:hover, .ld-cfg__part.is-hover, .ld-cfg__part:focus-visible { background: color-mix(in srgb, var(--brass) 8%, transparent); }
.ld-cfg__part:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ld-cfg__part[aria-current="true"] { background: color-mix(in srgb, var(--brass) 13%, transparent); }
.ld-cfg__part[aria-current="true"]::before, .ld-cfg__part.is-hover::before { transform: scaleY(1); }
.ld-cfg__part[aria-current="true"] .ld-cfg__part-name { color: var(--brass-text); }
.ld-cfg__noresults { margin: 18px 10px; font-size: .9rem; color: var(--muted); }

/* ---------- Stage ---------- */
.ld-cfg__stage {
	grid-area: stage; position: relative; overflow: hidden; isolation: isolate; min-height: 0;
	container: ldstage / inline-size;
	border: 1px solid var(--line);
	background: radial-gradient(120% 90% at 50% 10%, var(--surface) 0%, var(--bg) 62%, var(--surface-2) 100%);
}
.ld-cfg__stage::after { /* the quiet ground plane of the mockup, behind the drawing */
	content: ""; position: absolute; left: -20%; right: -20%; bottom: -8%; height: 46%; z-index: -1;
	background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px);
	transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 92%); mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 92%);
}
.ld-cfg__stage.is-3d::after { display: none; }
.ld-cfg__canvas { position: absolute; inset: 0; }
.ld-cfg__canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ld-cfg__drawing { position: absolute; left: 50%; top: 46%; width: min(74%, 620px); display: block; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; transition: opacity .8s var(--ease); }
/* the light and dark line drawings; the colour mode (--wf-light / --wf-dark) shows one */
.ld-cfg__wf { display: block; width: 100%; height: auto; }
.ld-cfg__wf--light { opacity: var(--wf-light, 1); }
.ld-cfg__wf--dark { position: absolute; inset: 0; opacity: var(--wf-dark, 0); }
.ld-cfg__stage.is-3d .ld-cfg__drawing { opacity: 0; }
.ld-cfg__stage.is-loading .ld-cfg__drawing { animation: ld-breathe 2.4s var(--ease-io) infinite; }
@keyframes ld-breathe { 50% { opacity: .55; } }
.ld-cfg__stage-status { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; font: 500 .62rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.ld-stage__ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ld-stage__ui > * { pointer-events: auto; }
.ld-stage__bar { position: absolute; left: 14px; top: 14px; right: 150px; display: flex; flex-wrap: wrap; gap: 6px; }
.ld-stage__seg { display: inline-flex; }
.ld-stage__seg button { background: color-mix(in srgb, var(--surface) 88%, transparent); border-right-width: 0; }
.ld-stage__seg button:last-child { border-right-width: 1px; }
.ld-stage__seg button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ld-stage__btn, .ld-stage__toggle, .ld-stage__nav button {
	min-height: 32px; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 1px;
	background: color-mix(in srgb, var(--surface) 88%, transparent); cursor: pointer;
	font: 500 .6rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ld-stage__btn[aria-pressed="true"] { border-color: var(--brass); color: var(--brass-text); background: color-mix(in srgb, var(--brass) 14%, var(--surface)); }
.ld-stage__btn:hover, .ld-stage__toggle:hover, .ld-stage__nav button:hover, .ld-stage__seg button:hover { border-color: var(--brass); }
.ld-stage__toggle { position: absolute; right: 14px; top: 14px; z-index: 3; }
.ld-stage__nav { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ld-cfg__stage.is-walk .ld-stage__nav :is([data-dir="in"], [data-dir="out"]) { visibility: hidden; }
.ld-stage__nav button:active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ld-stage__nav button { width: 36px; height: 36px; padding: 0; font-size: 1rem; letter-spacing: 0; }
.ld-stage__hint { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 270px); margin: 0; padding: .3rem .6rem; font-size: .78rem; line-height: 1.4; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* a solid plate: readable over the light lawn and the dark floors alike */
.ld-stage__goto { min-height: 32px; max-width: 12rem; padding: .3rem 1.6rem .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 1px; background: color-mix(in srgb, var(--surface) 88%, transparent); font: 500 .6rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.ld-stage__goto:hover, .ld-stage__goto:focus-visible { border-color: var(--brass); }
.ld-stage__keys { position: absolute; left: 50%; bottom: 60px; width: min(560px, calc(100% - 28px)); margin: 0; padding: 10px 14px; transform: translateX(-50%); background: color-mix(in srgb, var(--primary) 92%, transparent); color: var(--on-primary); font-size: .8rem; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.ld-cfg__stage:has(canvas:focus-visible) .ld-stage__keys { opacity: 1; }
.ld-cfg__canvas canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.ld-stage__label {
	position: absolute; left: 0; top: 0; padding: .3rem .6rem; pointer-events: none; white-space: nowrap;
	background: var(--primary); color: var(--on-primary); font: 500 .6rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase;
	transform-origin: 0 0; margin: -36px 0 0 -10px;
}
.ld-cfg__stage.is-list-only .ld-stage__ui { display: none; }

/* Phone controls (shown by the container rules at the end), full screen and the part callout */
.ld-stage__compact, .ld-stage__close { display: none; }
.ld-stage__more { display: contents; }
.ld-stage__icon { width: 40px; padding: 0; justify-content: center; align-items: center; }
.ld-stage__icon svg { display: block; }
.ld-stage__dot { fill: var(--surface); }
.ld-stage__btn--go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ld-stage__btn--go:hover, .ld-stage__btn--go:focus-visible { border-color: var(--primary); }
.ld-stage__pick {
	position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0; padding: 10px 10px 10px 16px;
	background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 16px 32px -20px var(--shadow);
}
.ld-stage__pick[hidden] { display: none; }
.ld-stage__pick-t { min-width: 0; margin: 0; font: 400 1.2rem/1.2 var(--serif); color: var(--ink); }
.ld-stage__pick .ld-stage__btn { flex: none; min-height: 40px; }
.ld-cfg__stage.is-expanded {
	position: fixed; inset: 0; z-index: 100000; min-height: 0; border: 0;
}
.ld-cfg__stage.is-expanded .ld-stage__close { display: inline-flex; align-items: center; }
.ld-cfg__stage.is-expanded .ld-stage__expand { display: none; }
.ld-cfg__stage.is-expanded .ld-stage__bar { top: calc(10px + env(safe-area-inset-top, 0px)); }
.ld-cfg__stage.is-expanded :is(.ld-stage__nav, .ld-stage__toggle) { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.ld-cfg__stage.is-expanded.has-pick .ld-stage__nav { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.ld-stage-lock, html.ld-stage-lock body { overflow: hidden; }

/* ---------- Panel content ---------- */
.ld-cfg__panel-body { position: relative; padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px) 28px; }
.ld-cfg__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ld-cfg__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--brushed); }
.ld-cfg__title { margin: 0 0 12px; font: 300 clamp(1.9rem, 1.5rem + 1vw, 2.5rem)/1.05 var(--serif); letter-spacing: -.008em; color: var(--ink); }
.ld-cfg__title:focus { outline: none; }
.ld-cfg__title em { font-style: italic; font-weight: 400; color: var(--brass-text); }
.ld-cfg__lede { margin: 0 0 22px; font-size: .95rem; line-height: 1.65; color: var(--muted); }
.ld-cfg__subhead { margin: 0 0 10px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.ld-cfg__how { margin: 18px 0; padding: 0; list-style: none; counter-reset: ld-how; }
.ld-cfg__how li { position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.55; counter-increment: ld-how; }
.ld-cfg__how li::before { content: counter(ld-how, decimal-leading-zero); position: absolute; left: 0; top: 12px; font: italic 300 1.4rem/1 var(--serif); color: var(--brass-text); }
.ld-cfg__note, .ld-cfg__noscript { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.ld-cfg__back, .ld-cfg__cancel { margin: 18px 0 0; }

.ld-cfg__services { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ld-cfg__service > button, .ld-cfg__service > a {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; width: 100%;
	padding: 12px; border: 1px solid var(--line); border-radius: 1px; background: var(--bg);
	text-align: left; text-decoration: none; cursor: pointer; color: var(--ink);
	transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.ld-cfg__service > a { grid-template-columns: minmax(0, 1fr); }
.ld-cfg__service > button:hover, .ld-cfg__service > button:focus-visible, .ld-cfg__service > a:hover { border-color: var(--brass); background: var(--surface); }
.ld-cfg__service-img { width: 76px; height: 60px; object-fit: cover; filter: var(--img-filter); }
.ld-cfg__service-text { display: grid; gap: 2px; min-width: 0; }
.ld-cfg__service-name { font: 400 1.22rem/1.2 var(--serif); color: var(--ink); }
.ld-cfg__service-sum { font-size: .84rem; line-height: 1.45; color: var(--muted); }
.ld-cfg__service-from { margin-top: 2px; font: 500 .6rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); }

.ld-cfg__crumb { margin: 0 0 6px; }
.ld-cfg__crumb-btn { padding: .3rem 0; border: 0; background: none; cursor: pointer; font: 500 .62rem/1.4 var(--sans) !important; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text) !important; }
.ld-cfg__crumb-btn:hover, .ld-cfg__crumb-btn:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.ld-cfg__editing { margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 9%, transparent); font-size: .86rem; }

/* Steps */
.ld-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 0; }
.ld-steps button {
	display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: .3rem .55rem;
	border: 1px solid var(--line); border-radius: 1px; background: transparent; cursor: pointer;
	font: 500 .58rem/1.3 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.ld-steps__n { font: italic 300 .95rem/1 var(--serif); letter-spacing: 0; color: var(--brass-text); }
.ld-steps button:disabled { cursor: default; color: var(--muted); opacity: .7; }
.ld-steps button:not(:disabled):hover, .ld-steps button:not(:disabled):focus-visible { border-color: var(--brass); }
.ld-steps__item.is-done button { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); }
.ld-steps__item.is-current button { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ld-steps__item.is-current .ld-steps__n { color: var(--band-brass); }
.ld-progress { height: 1px; margin: 14px 0 20px; background: var(--line); }
.ld-progress span { display: block; height: 1px; background: var(--brushed); transition: width .6s var(--ease); }
.ld-step__count { margin: 0 0 2px; font: 500 .58rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.ld-step__title { margin: 0 0 16px; font: 400 1.6rem/1.15 var(--serif); color: var(--ink); }
.ld-step__title:focus { outline: none; }
.ld-step__errors { margin: 0 0 16px; padding: 12px 14px; border-left: 2px solid var(--error); background: color-mix(in srgb, var(--error) 6%, transparent); font-size: .9rem; }
.ld-step__errors ul { margin: 6px 0 0; padding-left: 18px; }
.ld-step__errors a { color: var(--error); }
.ld-step__fields { display: grid; gap: 22px; }
.ld-step__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.ld-step__nav .btn { margin-left: auto; }

/* Fields */
.ld-f__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.ld-f__legend { display: block; margin: 0 0 10px; padding: 0; font: 500 .64rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.ld-f__opt { margin-left: .4em; letter-spacing: .14em; color: var(--muted); }
.ld-f__help { margin: 4px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.ld-f__error { margin: 6px 0 0; font-size: .84rem; color: var(--error); }
.ld-f__error b { font-weight: 500; }
.ld-f.is-error .ld-f__legend { color: var(--error); }
.ld-f__row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 6px 0; }
.ld-f__label { font-size: .84rem; color: var(--text); }
.ld-f__num-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
.ld-f__num { width: 5.2rem; padding: .3rem 0; border: 0; border-bottom: 1px solid var(--muted); background: transparent; font: 400 1rem/1.3 var(--sans); color: var(--text); text-align: right; -moz-appearance: textfield; }
.ld-f__num::-webkit-outer-spin-button, .ld-f__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ld-f__num:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.ld-f__unit { font-size: .8rem; color: var(--muted); }
.ld-f__area { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.ld-f__area output { font: 400 1.35rem/1 var(--serif); color: var(--ink); }
.ld-f__range-ends { display: flex; justify-content: space-between; margin: 0 0 0 calc(4.6rem + 10px); width: calc(100% - 4.6rem - 10px - 6.5rem); font-size: .72rem; color: var(--muted); }

.ld-f__range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.ld-f__range:focus { outline: none; }
.ld-f__range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--brass) 0%, var(--brass) var(--p, 50%), var(--line-strong) var(--p, 50%)); }
.ld-f__range::-moz-range-track { height: 2px; background: var(--line-strong); }
.ld-f__range::-moz-range-progress { height: 2px; background: var(--brass); }
.ld-f__range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border: 1px solid var(--brass-text); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px var(--shadow); }
.ld-f__range::-moz-range-thumb { width: 20px; height: 20px; border: 1px solid var(--brass-text); border-radius: 50%; background: var(--surface); }
.ld-f__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.ld-f__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }

.ld-stepper { display: inline-flex; align-items: center; gap: 0; }
.ld-stepper__b { width: 40px; height: 40px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 1.1rem !important; line-height: 1; color: var(--ink); }
.ld-stepper__b:hover, .ld-stepper__b:focus-visible { border-color: var(--brass); color: var(--brass-text); }
.ld-stepper__v { width: 64px; height: 40px; border: 1px solid var(--line-strong); border-left: 0; border-right: 0; border-radius: 0; background: var(--surface); text-align: center; font: 400 1.05rem/1 var(--sans); color: var(--ink); -moz-appearance: textfield; }
.ld-stepper__v::-webkit-outer-spin-button, .ld-stepper__v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ld-stepper__v:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.ld-stepper__unit { margin-left: 10px; font-size: .84rem; color: var(--muted); }
.ld-stepper--sm .ld-stepper__b, .ld-stepper--sm .ld-stepper__v { height: 34px; }
.ld-stepper--sm .ld-stepper__b { width: 34px; }

/* Option cards */
.ld-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ld-opts--tier, .ld-opts--timeline, .ld-opts--choice { grid-template-columns: minmax(0, 1fr); }
.ld-opt {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 44px;
	padding: 12px 14px; border: 1px solid var(--line); border-radius: 1px; background: var(--bg); cursor: pointer;
	transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.ld-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ld-opt:hover { border-color: var(--line-strong); }
.ld-opt:has(input:checked) { border-color: var(--brass-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--brass-text); }
.ld-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ld-opt--swatch { grid-template-columns: minmax(0, 1fr); padding: 8px; }
.ld-opt__swatch { display: block; aspect-ratio: 1.6; overflow: hidden; border: 1px solid var(--line); }
.ld-opt__swatch img { width: 100%; height: 100%; object-fit: cover; }
.ld-opt__text { display: grid; gap: 2px; }
.ld-opt__name { font: 400 1.05rem/1.2 var(--serif); color: var(--ink); }
.ld-opt__desc { font-size: .8rem; line-height: 1.45; color: var(--muted); }
.ld-opt__hint { font: 500 .58rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-text); }
.ld-opt:has(input:checked) .ld-opt__hint { color: var(--ink); }
.ld-opt:has(input:checked)::after { content: ""; position: absolute; right: 10px; top: 10px; width: 9px; height: 5px; border-left: 2px solid var(--brass-text); border-bottom: 2px solid var(--brass-text); transform: rotate(-45deg); }

/* Add-ons */
.ld-addons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ld-addon { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ld-addon__label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; cursor: pointer; }
.ld-addon__label input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.ld-addon__text { display: grid; gap: 1px; }
.ld-addon__name { font-size: .95rem; color: var(--ink); }
.ld-addon__desc { font-size: .78rem; color: var(--muted); }
.ld-addon__price { font-size: .86rem; color: var(--brass-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-addon .ld-stepper { margin: 8px 0 0 32px; }
.ld-f__text { display: block; width: 100%; min-height: 6.5rem; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--muted); background: transparent; font: 400 1rem/1.6 var(--sans); color: var(--text); resize: vertical; }
.ld-f__text:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }

/* Review */
.ld-review { display: grid; gap: 14px; margin-bottom: 18px; }
.ld-review__group { border-top: 1px solid var(--line); padding-top: 10px; }
.ld-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ld-review__head h4 { margin: 0; font: 500 .62rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.ld-review__head .textlink { padding: .3rem 0; font-size: .6rem; }
.ld-review dl { margin: 6px 0 0; }
.ld-review dl > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; padding: 4px 0; font-size: .88rem; }
.ld-review dt { color: var(--muted); }
.ld-review dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ld-review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; }
.ld-review__actions .btn { width: 100%; justify-content: space-between; }

/* Summary (the estimate) */
.ld-cfg__sumwrap { position: sticky; bottom: -28px; z-index: 2; margin: 24px -30px -28px; padding: 0 30px 28px; background: linear-gradient(to bottom, transparent, var(--surface) 18px); }
.ld-cfg__panel-body--wizard .ld-cfg__sumwrap + .ld-cfg__cancel { position: relative; z-index: 3; }
.ld-sum { padding-top: 18px; border-top: 1px solid var(--line); background: var(--surface); }
.ld-sum__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ld-sum__label { margin: 0; font: 500 .62rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ld-sum__total { margin: 0; font: 300 clamp(1.8rem, 1.4rem + .9vw, 2.3rem)/1 var(--serif); color: var(--brass-text); font-variant-numeric: tabular-nums; }
.ld-sum__due, .ld-sum__confirmed { margin: 6px 0 0; font-size: .84rem; color: var(--text); }
.ld-sum__confirmed { color: var(--brass-text); }
.ld-sum__consult { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 9%, transparent); font-size: .86rem; }
.ld-sum__consult a { color: var(--brass-text); }
.ld-sum__details { margin-top: 10px; }
.ld-sum__details > summary { display: inline-flex; align-items: center; gap: 8px; padding: .4rem 0; cursor: pointer; list-style: none; font: 500 .6rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.ld-sum__details > summary::-webkit-details-marker { display: none; }
.ld-sum__details > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
.ld-sum__details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.ld-sum__table { width: 100%; margin: 6px 0 0; border-collapse: collapse; font-size: .82rem; }
.ld-sum__table th { padding: 5px 10px 5px 0; text-align: left; font-weight: 400; color: var(--muted); }
.ld-sum__table td { padding: 5px 0; text-align: right; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.ld-sum__table tr.is-minimum th, .ld-sum__table tr.is-cap th { color: var(--brass-text); }
.ld-sum__table tfoot th, .ld-sum__table tfoot td { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.ld-sum__fine { margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
.ld-sum__note { margin: 10px 0 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }

/* Done */
.ld-cfg__done .sky { margin-bottom: 18px; }
.ld-done__actions { display: grid; justify-items: start; gap: 8px; margin-top: 18px; }
.ld-done__actions .btn { width: 100%; justify-content: space-between; margin-bottom: 6px; }

/* ---------- Mobile: the bottom sheet (under 1024 px) ---------- */
.ld-sheet { display: none; }
@media (max-width: 1279px) {
	.ld-cfg__app { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(310px, 360px); }
	.ld-stage__bar { right: 14px; top: 56px; }
	.ld-stage__hint { display: none; }
}
@media (max-width: 1023px) {
	.ld-cfg__app.is-sheet {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "sheet" "content";
		grid-template-rows: minmax(240px, 44%) auto minmax(0, 1fr);
		gap: 0;
		height: calc(100dvh - 70px); min-height: 560px; max-height: 1100px;
		border: 1px solid var(--line);
		transition: grid-template-rows .45s var(--ease);
	}
	.ld-cfg__app.is-sheet.is-sheet-full { grid-template-rows: minmax(120px, 20%) auto minmax(0, 1fr); }
	/* With the sheet raised the stage is a glimpse: its controls return when the sheet is lowered. */
	.ld-cfg__app.is-sheet.is-sheet-full :is(.ld-stage__bar, .ld-stage__nav, .ld-stage__hint, .ld-stage__toggle, .ld-stage__keys) { display: none; }
	.ld-cfg__app.is-sheet .ld-cfg__stage { border: 0; }
	.ld-cfg__app.is-sheet .ld-sheet { grid-area: sheet; display: grid; justify-items: center; gap: 6px; padding: 6px 12px 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px var(--shadow); position: relative; z-index: 3; }
	.ld-sheet__grip { width: 64px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
	.ld-sheet__grip-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
	.ld-sheet__tabs { display: flex; width: 100%; border-bottom: 1px solid var(--line); }
	.ld-sheet__tabs [role="tab"] { flex: 1; min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: 500 .66rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
	.ld-sheet__tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }
	.ld-cfg__app.is-sheet .ld-cfg__parts, .ld-cfg__app.is-sheet .ld-cfg__panel { grid-area: content; border: 0; border-radius: 0; }
	.ld-cfg__app.is-sheet .ld-cfg__parts, .ld-cfg__app.is-sheet .ld-cfg__panel { box-shadow: none; }
	.ld-cfg__app.is-sheet .ld-cfg__parts { overflow: hidden; }
	.ld-cfg__app.is-sheet .ld-cfg__parts-head { padding: 14px 16px 10px; }
	.ld-cfg__app.is-sheet .ld-cfg__h { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the tab names it; kept for the heading outline */
	.ld-cfg__app.is-sheet .ld-cfg__panel-body { padding: 18px 16px 24px; }
	.ld-cfg__app.is-sheet .ld-cfg__sumwrap { margin: 20px -16px -24px; padding: 0 16px 16px; bottom: -24px; }
	.ld-stage__bar { left: 10px; right: 10px; top: 10px; }
	.ld-stage__toggle { top: auto; bottom: 10px; left: 10px; right: auto; }
	.ld-stage__nav { right: 10px; bottom: 10px; grid-template-columns: repeat(3, 36px); }
	.ld-stage__keys { bottom: 96px; }
	.ld-cfg__stage.is-list-only { min-height: 0; }
	.ld-cfg__app.is-sheet:has(.ld-cfg__stage.is-list-only) { grid-template-rows: minmax(140px, 24%) auto minmax(0, 1fr); }
}
@media (max-width: 600px) {
	/* Steps on one scrolling line, so the step's own fields stay in view in the sheet. */
	.ld-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-right: -16px; padding-right: 16px; }
	.ld-steps::-webkit-scrollbar { display: none; }
	.ld-steps__item { flex: none; scroll-snap-align: start; }
	/* A smaller stage to start with, and a compact estimate bar. */
	.ld-cfg__app.is-sheet, .ld-cfg__app.is-sheet.is-sheet-full, .ld-cfg__app.is-sheet:has(.ld-cfg__stage.is-list-only) {
		height: auto; min-height: 0; max-height: none;
		grid-template-rows: auto auto auto;
	}
	.ld-cfg__app.is-sheet .ld-cfg__stage { height: min(96vw, 440px); }
	.ld-cfg__app.is-sheet .ld-cfg__stage.is-expanded { height: auto; }
	.ld-cfg__app.is-sheet .ld-cfg__stage.is-list-only { height: 220px; }
	.ld-cfg__app.is-sheet .ld-sheet { position: sticky; top: 0; padding-top: 0; }
	.ld-cfg__app.is-sheet .ld-sheet__grip { display: none; }
	.ld-cfg__app.is-sheet .ld-cfg__parts, .ld-cfg__app.is-sheet .ld-cfg__panel { overflow: visible; }
	.ld-cfg__app.is-sheet .ld-cfg__partlist { overflow: visible; flex: none; }
	.ld-cfg__app.is-sheet .ld-cfg__sumwrap { bottom: 0; margin-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.ld-cfg__app.is-sheet .ld-sum__note { margin-top: 4px; font-size: .74rem; line-height: 1.4; }
	.ld-cfg__app.is-sheet .ld-cfg__sumwrap { margin-top: 14px; }
}
@media (max-width: 480px) {
	.ld-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ld-f__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ld-f__row .ld-f__label { grid-column: 1 / -1; }
	.ld-f__range-ends { display: none; }
	.ld-stage__seg button, .ld-stage__btn { padding: .3rem .5rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
	.ld-cfg *, .ld-cfg__app { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- Narrow stage (phones): three controls on the house, the rest under View options ---------- */
@container ldstage (max-width: 520px) {
	.ld-stage__compact { display: inline-flex; align-items: center; }
	.ld-stage__bar { top: 10px; left: 10px; right: 10px; flex-wrap: nowrap; align-items: center; }
	.ld-stage__bar > [data-more] { margin-left: auto; }
	.ld-stage__bar .ld-stage__btn { min-height: 40px; }
	.ld-stage__more {
		display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
		flex-wrap: wrap; gap: 6px; max-height: 70vh; overflow: auto; padding: 10px;
		background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--line-strong);
		box-shadow: 0 16px 32px -20px var(--shadow);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}
	.ld-stage__more.is-open { display: flex; }
	.ld-stage__more .ld-stage__seg { display: flex; flex: 1 0 100%; }
	.ld-stage__more .ld-stage__seg button { flex: 1; min-height: 40px; }
	.ld-stage__more .ld-stage__goto-wrap { display: flex; flex: 1 0 100%; }
	.ld-stage__more .ld-stage__goto { flex: 1; max-width: none; min-height: 40px; }
	.ld-stage__more .ld-stage__btn { flex: 1 1 auto; min-height: 40px; }
	/* Touch turns and zooms the house; the buttons come back from View options. */
	.ld-cfg__stage.is-nav-off .ld-stage__nav { display: none; }
	.ld-stage__nav { grid-template-columns: repeat(3, 46px); gap: 6px; }
	.ld-stage__nav button { width: 46px; height: 46px; font-size: 1.1rem; }
	.ld-cfg__stage.is-3d .ld-stage__toggle { display: none; }
	.ld-stage__keys { display: none; }
}