/* St. Croix Studio — one responsive design system. */
:root {
  color-scheme:light;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.45;
  --ink:#1d2129; --muted:#6c737e; --line:#e4e7ec; --paper:#f6f7f9;
  --blue:#0866f0; --blue-soft:#edf4ff; --orange:#0866f0; --orange-bright:#0866f0;
  --orange-soft:#edf4ff; --green:#1b7e52; --red:#bc3441; --radius:14px;
  --app-height:100dvh;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
body { background:var(--paper);color:var(--ink); }
#app { width:100%;min-width:0;height:var(--app-height); }
button,input,select,textarea { font:inherit;color:inherit; }
button { cursor:pointer;border:0;background:none; }
button:disabled { opacity:.4;cursor:not-allowed; }
button,input,select,textarea,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #80b3ff;outline-offset:3px; }
button { touch-action:manipulation; }
button svg { width:18px;height:18px;flex:none; }
svg { fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
[hidden],.is-hidden { display:none !important; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { letter-spacing:-.035em;line-height:1.18; }
h1 { font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:650; }
h2 { font-size:1.7rem;font-weight:650; }
h3 { font-size:1.06rem;font-weight:650; }
p { line-height:1.55; }
strong,b { font-weight:600; }
.eyebrow,.step-kicker { margin:0 0 10px;color:var(--muted);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600; }
.button,.tool-button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:10px;background:white;font-size:.875rem;font-weight:550;line-height:1.2;transition:background .15s,border-color .15s; }
.button:hover,.tool-button:hover { border-color:#a9b7ca;background:#f6f8fc; }
.button.primary { background:var(--blue);border-color:var(--blue);color:white; }
.button.primary:hover { background:#075aca; }
.button.ghost { background:transparent; }
.button.danger { color:var(--red); }
.wide-button { width:100%;margin-top:12px; }
.brand { display:flex;align-items:center;gap:11px; }
.brand-mark { position:relative;width:32px;height:32px;border-radius:9px;background:#222832;flex:none; }
.brand-mark::before,.brand-mark::after { position:absolute;left:8px;top:9px;width:17px;height:4px;background:#fff;border-radius:2px;content:"";transform:skew(-15deg); }
.brand-mark::after { top:19px;width:12px; }
.brand-copy strong { display:block;font-size:.8125rem;letter-spacing:.045em; }
.brand-copy span { display:block;font-size:.75rem;color:var(--muted);margin-top:2px; }
.family-screen { height:100%;overflow:auto;background:#fafbfc; }
.family-header { max-width:1200px;margin:auto;height:88px;padding:0 36px;display:flex;align-items:center;justify-content:space-between; }
.family-header-note { font-size:.875rem;color:var(--muted); }
.family-hero { max-width:1200px;margin:24px auto 32px;padding:0 36px; }
.family-hero h1 { margin:0 0 14px;max-width:800px; }
.family-hero>p:last-child { max-width:620px;font-size:1rem;color:var(--muted); }
.family-hero>p:not(.eyebrow) { max-width:620px;font-size:1rem;color:var(--muted); }
.resume-build { display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:660px;width:100%;margin-top:24px;padding:18px 20px;border:1px solid #a9c9f4;border-radius:12px;background:var(--blue-soft);text-align:left; }
.resume-build span { min-width:0; }
.resume-build small,.resume-build strong { display:block; }
.resume-build small { color:#496a96;font-size:.6875rem;letter-spacing:.07em;margin-bottom:5px; }
.resume-build strong { font-size:1rem; }
.resume-build b { flex:none;font-size:.875rem;color:var(--blue); }
.family-grid { max-width:1200px;margin:auto;padding:0 36px 36px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.family-card { position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;min-height:238px;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:left;transition:transform .18s,border-color .18s; }
.family-card:hover { transform:translateY(-3px);border-color:#9cbaf0; }
.family-card.featured { background:#202b3e;color:#fff;border-color:#202b3e; }
.family-icon { display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f0f3f8;color:#3b5f90;font-weight:650; }
.featured .family-icon { background:#ffffff15;color:#a9c9ff; }
.family-number { position:absolute;right:22px;top:28px;color:#99a1ad;font-size:.8125rem; }
.family-card>strong { font-size:1.2rem;letter-spacing:-.02em; }
.family-card>span:not(.family-icon):not(.family-number) { color:var(--muted);font-size:.9375rem; }
.family-card.featured>span:not(.family-icon):not(.family-number) { color:#c1cbd9; }
.family-card>b { display:flex;width:100%;justify-content:space-between;margin-top:auto;font-size:.875rem; }
.family-card i { font-style:normal; }
.family-card.muted-card { min-height:152px;padding:22px;background:#f2f4f7; }
.family-card.muted-card .family-icon,.family-card.muted-card .family-number { display:none; }
.family-card.muted-card>b { color:var(--muted);font-size:.75rem; }
.family-footer { display:flex;justify-content:center;gap:28px;padding:15px 24px 36px;color:var(--muted);font-size:.8125rem; }
.builder-shell { display:grid;height:100%;grid-template-rows:68px minmax(0,1fr) 30px;overflow:hidden; }
.topbar { z-index:40;display:flex;align-items:center;gap:24px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line);min-width:0; }
.brand-button { padding:0;flex:none; }
.family-chip { display:none; }
.project-name { margin:auto;max-width:240px;min-width:0; }
.project-name input { border:0;background:none;width:100%;font-size:.875rem;text-align:center;color:var(--muted); }
.top-actions { margin-left:auto;display:flex;gap:6px; }
.top-actions .button { min-width:44px; }
.builder-workspace { display:grid;grid-template-columns:minmax(340px,400px) minmax(0,1fr);position:relative;overflow:hidden;min-height:0; }
.builder-workspace.no-preview { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:#fff; }
.builder-workspace.no-preview .wizard-panel { grid-column:1;grid-row:1;width:100%;max-width:760px;margin:0 auto;border-inline:1px solid var(--line); }
.builder-workspace.no-preview .step-content { max-width:640px;margin:0 auto; }
.viewport { grid-column:2;grid-row:1;min-width:0;min-height:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#fff 0,#f4f6f9 68%,#e9edf3 100%);isolation:isolate; }
.viewport canvas { position:absolute;inset:0;z-index:1;width:100%;height:100%;touch-action:none; }
.viewport-toolbar { position:absolute;top:22px;left:20px;right:20px;z-index:12;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;pointer-events:none; }
.tool-group { display:flex;gap:3px;background:#ffffffed;border:1px solid #e2e6ed;box-shadow:0 3px 12px #20283805;padding:4px;border-radius:12px;pointer-events:auto; }
.tool-group .tool-button { min-height:40px;padding:9px 12px;border:0;background:none;white-space:nowrap; }
.tool-group .tool-button.active { background:#eaf2ff;color:var(--blue); }
.viewport-toolbar .tool-group:last-child .protected-control { display:none; }
.view-menu { position:relative;pointer-events:auto; }
.view-menu summary { min-width:44px;min-height:44px;display:grid;place-items:center;cursor:pointer;color:#67778d;list-style:none; }
.view-menu summary::-webkit-details-marker { display:none; }
.view-menu>div { position:absolute;right:0;top:48px;min-width:175px;display:grid;gap:4px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #182c4720; }
.view-menu .tool-button { justify-content:flex-start; }
.fallback-mode .view-menu { display:none; }
.placement-toolbar { position:absolute;left:20px;top:90px;right:20px;z-index:12;display:flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:none; }
.placement-toolbar .tool-button { pointer-events:auto;min-width:44px;box-shadow:0 2px 8px #26334504; }
.placement-toolbar .active { background:#27354a;border-color:#27354a;color:white; }
#placementHint { flex-basis:100%;font-size:.75rem;color:var(--muted);margin-top:1px; }
#planFit,#planZoomIn,#planZoomOut { display:none; }
.plan-mode #planFit,.plan-mode #planZoomIn,.plan-mode #planZoomOut,.fallback-mode #planFit,.fallback-mode #planZoomIn,.fallback-mode #planZoomOut { display:inline-flex; }

.fallback-mode #roofToggle { display:none; }
.fallback-mode #fitView,.plan-mode #fitView { display:none; }
.stage-callout,.orientation { display:none; }
.trailer-summary { position:absolute;z-index:9;left:24px;right:24px;bottom:22px;display:flex;align-items:center;gap:22px;padding:18px 20px;background:#ffffffdf;backdrop-filter:blur(16px);border:1px solid #ffffff;border-radius:16px;box-shadow:0 6px 25px #28394b06; }
.summary-stat { display:grid;gap:3px;min-width:0; }
.summary-stat span { color:var(--muted);font-size:.75rem; }
.summary-stat strong { font-size:.9375rem;white-space:nowrap; }
.summary-divider { display:none; }
.summary-view { margin-left:auto;color:var(--blue);font-size:.875rem;white-space:nowrap; }
.summary-view i { font-style:normal; }
.mobile-stage-toggle { display:none; }
.wizard-panel { grid-column:1;grid-row:1;z-index:15;min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr) 78px;background:#fff;border-right:1px solid var(--line);overflow:hidden; }
.step-rail-wrap { display:flex;align-items:center;min-width:0;padding:0 18px;border-bottom:1px solid var(--line);gap:6px; }
.rail-arrow { flex:none;width:32px;height:44px;font-size:22px;color:#777f8b; }
.step-rail { display:flex;overflow:auto;gap:4px;min-width:0;scrollbar-width:none; }
.step-rail::-webkit-scrollbar { display:none; }
.step-pill { flex:none;display:flex;gap:8px;align-items:center;min-height:42px;padding:8px 12px;border-radius:9px;font-size:.875rem;white-space:nowrap;color:var(--muted); }
.step-pill>span { display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#f0f2f5;font-size:.75rem; }
.step-pill.active { background:var(--blue-soft);color:var(--blue); }
.step-pill.active>span { color:#fff;background:var(--blue); }
.step-pill.complete>span { background:#e9f3ee;color:#287555; }
.wizard-scroll { min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dce1e8 transparent; }
.step-content,.catalog-panel { padding:26px 24px 32px; }
.step-heading { margin-bottom:24px; }
.step-heading h2,.layout-intro h2 { margin:0 0 10px; }
.step-heading>p:last-child,.layout-intro>p:last-child { color:var(--muted);font-size:1rem;margin-bottom:0; }
.wizard-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:#fff; }
.wizard-footer .primary { flex:1;max-width:220px; }
.summary-button { display:none; }
.group-title { margin:27px 0 12px;font-size:.9375rem;letter-spacing:-.01em; }
.form-stack { display:grid;grid-template-columns:minmax(0,1fr);gap:18px; }
.form-stack label,.field label,.trailer-control label { display:flex;flex-direction:column;gap:8px;min-width:0;font-size:.875rem;font-weight:550;color:#404957; }
.form-stack label>b { display:none; }
.form-stack input,.form-stack select,.form-stack textarea,.field input,.field select,.trailer-control select,.lead-fields input { display:block;width:100%;min-width:0;min-height:48px;border:1px solid #dce1e8;border-radius:10px;padding:12px;background:#fff;color:var(--ink);font-size:1rem;line-height:1.4;appearance:auto; }
.form-stack textarea { min-height:100px;resize:vertical; }
.form-stack input::placeholder,.form-stack textarea::placeholder { color:#979eaa; }
.customer-form { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px 12px; }
.wide-field { grid-column:1/-1; }
.form-stack:has(#menuInput) { margin-top:22px; }
.choice-grid,.kitchen-choice-grid,.trailer-type-grid { display:grid;gap:10px; }
.choice-card,.kitchen-choice,.trailer-type-card { position:relative;display:flex;flex-direction:column;gap:5px;width:100%;min-width:0;border:1px solid #dfe4eb;border-radius:12px;padding:16px 44px 16px 16px;text-align:left;background:#fff;box-shadow:0 2px 3px #1d293905;transition:border-color .15s,background .15s; }
.choice-card:hover,.kitchen-choice:hover,.trailer-type-card:hover { border-color:#b4c6df; }
.choice-card.selected,.kitchen-choice.selected,.trailer-type-card.selected { border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#fafdff; }
.choice-card strong,.kitchen-choice strong,.trailer-type-card strong { font-size:1rem;line-height:1.3; }
.choice-card>span:last-child,.kitchen-choice p,.trailer-type-card small { color:var(--muted);font-size:.875rem;line-height:1.5; }
.choice-check,.kitchen-choice>b,.trailer-type-card>b { display:none;position:absolute;top:18px;right:16px;width:19px;height:19px;line-height:19px;text-align:center;border-radius:50%;font-size:12px;background:var(--blue);color:#fff; }
.selected>.choice-check,.kitchen-choice.selected>b,.trailer-type-card.selected>b { display:block; }
.kitchen-choice,.trailer-type-card { flex-direction:row;gap:14px;padding:18px 38px 18px 16px;align-items:flex-start; }
.kitchen-choice>span,.trailer-type-card>span { flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#f1f4f8;color:#697c98;font-size:.6875rem;font-weight:650;letter-spacing:.02em; }
.kitchen-choice p { margin:5px 0 0; }
.kitchen-choice small,.trailer-type-card ul { display:none; }
.trailer-type-card .step-kicker { font-size:.6875rem;margin-bottom:6px; }
.trailer-type-card small { display:block;margin-top:6px; }
.segment-control { display:flex;gap:4px;padding:4px;border-radius:11px;background:#f0f2f5;border:1px solid #e9ecf0; }
.segment-control button { min-height:44px;flex:1;padding:9px;font-size:.875rem;border-radius:8px; }
.segment-control .active { background:#fff;color:var(--blue);box-shadow:0 1px 5px #26354b12; }
.size-selector { margin:20px 0;border-bottom:1px solid var(--line);padding-bottom:24px; }
.size-selector-head { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px; }
.size-selector-head span { font-size:.875rem;color:var(--muted); }
.size-selector-head strong { font-size:2rem;letter-spacing:-.045em; }
.length-adjuster { display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:14px;align-items:center; }
.length-adjuster button { height:44px;border:1px solid var(--line);border-radius:10px;font-size:22px; }
input[type="range"] { width:100%;accent-color:var(--blue);height:32px;padding:0;cursor:pointer; }
.length-scale { display:flex;justify-content:space-between;margin:8px 58px 0;color:var(--muted);font-size:.75rem; }
.model-feature { margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#f9fafc; }
.model-feature h3 { margin:0 0 6px; }
.model-feature span { display:block;font-size:.875rem;color:var(--muted);line-height:1.5; }
.model-feature .button { margin-top:12px;width:100%; }
.model-feature .step-kicker { margin-bottom:8px; }
.template-details { margin:12px 0 20px;border-bottom:1px solid var(--line); }
.template-details summary { padding:14px 0;cursor:pointer;font-size:.8125rem;color:#4d607a; }
.template-details summary>span { display:block;margin-top:5px;color:#8b95a3;font-size:.75rem; }
.template-details>div { padding:4px 0 18px; }
.template-details p,.template-details .compatibility-label { font-size:.8125rem;color:var(--muted);line-height:1.55; }
.template-details strong { display:block;font-size:.875rem;margin-bottom:8px; }
.factory-package-card { margin-top:16px;border:1px solid #e4e9f0;border-radius:12px;padding:16px;background:#f7faff; }
.factory-package-card h3 { margin:0 0 6px; }
.factory-package-card p { font-size:.875rem;color:var(--muted);margin:0; }
.factory-package-card .step-kicker { color:#53749e;font-size:.6875rem;margin-bottom:8px; }
.factory-lock,.factory-package-card dl { display:none; }
.factory-package-compact { padding:12px 14px;border-radius:10px;background:#f4f7fb;margin:16px 0;font-size:.8125rem; }
.factory-package-compact>span { color:#627696;font-size:.6875rem;letter-spacing:.08em; }
.factory-package-compact strong { display:block;margin-top:3px; }
.factory-package-compact small { color:var(--muted); }
.catalog-panel .layout-intro>p:last-child { display:none; }
.catalog-panel .factory-package-compact { margin:12px 0;padding:10px 12px; }
.catalog-panel .factory-package-compact>span { margin-right:6px; }
.catalog-panel .factory-package-compact strong { display:inline;font-size:.8125rem; }
.catalog-panel .factory-package-compact small { display:none; }
.catalog-tools { position:sticky;top:-1px;z-index:5;background:#fff;padding-bottom:4px; }
.design-rule-strip,.editor-side-tabs,.quick-picks { display:none; }
.compliance-card,.included-note,.fit-note { display:flex;gap:10px;padding:15px;background:#f5f7fa;border-radius:10px;margin-top:20px;font-size:.8125rem; }
.compliance-card>span { color:#8393aa;font-size:1rem; }
.compliance-card strong,.included-note strong,.fit-note strong { display:block;font-size:.875rem; }
.compliance-card p,.included-note span,.fit-note span { display:block;color:var(--muted);margin:5px 0 0;line-height:1.5; }
.fit-note { flex-direction:column;gap:0; }
.capacity-warning { background:#fff8ed; }
.swatch-row { display:flex;gap:12px; }
.swatch { flex:1;min-height:76px;padding:8px 4px;border:1px solid transparent;border-radius:10px; }
.swatch span { display:block;width:32px;height:32px;margin:0 auto 7px;border-radius:50%;border:1px solid #0002;background:var(--swatch);box-shadow:inset 0 0 0 3px #fff; }
.swatch small { font-size:.75rem; }
.swatch.selected { border-color:#a9caff;background:var(--blue-soft); }
.swatch.selected span { box-shadow:0 0 0 2px var(--blue),inset 0 0 0 3px white; }
.fixed-specs,.standard-materials { display:flex;gap:16px;flex-wrap:wrap;margin:20px 0;font-size:.8125rem; }
.fixed-specs span,.standard-materials span { display:block;color:var(--muted);font-size:.75rem; }
.fixed-specs strong,.standard-materials strong { display:block;margin-top:4px; }
.length-row { display:flex;gap:7px;flex-wrap:wrap;margin:14px 0; }
.length-row button { min-width:48px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:9px;font-size:.875rem; }
.length-row button.selected { color:var(--blue);background:var(--blue-soft);border-color:#7caeff; }
.range-field { display:block;margin:22px 0; }
.range-field>span { display:flex;justify-content:space-between;font-size:.875rem;gap:8px; }
.range-field strong { color:var(--blue); }
.range-field small { display:block;color:var(--muted);font-size:.8125rem; }
.window-dimensions { display:grid;gap:4px;margin:18px 0;color:var(--blue); }
.window-dimensions strong { font-size:1.125rem; }
.window-dimensions span { color:var(--muted);font-size:.875rem; }
.window-size-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0; }
.window-size-fields label,.sink-options label { display:grid;gap:8px;font-size:.875rem; }
.window-size-fields input,.window-size-fields select,.sink-options select { width:100%;min-width:0;font-size:1rem;min-height:44px; }
.sink-options label { margin:16px 0; }
.toggle-row { display:flex;width:100%;gap:20px;align-items:center;justify-content:space-between;text-align:left;margin:20px 0;padding:16px 0;border-block:1px solid var(--line); }
.toggle-row strong,.toggle-row small { display:block; }
.toggle-row strong { font-size:.9375rem; }
.toggle-row small { margin-top:4px;color:var(--muted);font-size:.8125rem; }
.toggle-row i { flex:none;width:42px;height:25px;padding:3px;background:#dce1e7;border-radius:20px; }
.toggle-row i::after { content:"";display:block;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .15s; }
.toggle-row i.on { background:var(--blue); }
.toggle-row i.on::after { transform:translateX(17px); }
.exterior-preview-card { display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:left;background:#f7f9fc; }
.exterior-preview-card>span { color:var(--blue); }
.exterior-preview-card strong { display:block;font-size:.9375rem; }
.exterior-preview-card small { display:block;color:var(--muted);font-size:.8125rem;line-height:1.5;margin-top:5px; }
.exterior-preview-card>i { display:none; }
.power-planning,.power-recommendation { padding:16px;border-radius:12px;background:#f2f6fc;margin:16px 0; }
.recommendation-banner { padding:16px;margin:20px 0;border:1px solid #dce6f5;border-radius:12px;background:#f5f8fd; }
.recommendation-banner>span { display:block;margin-bottom:8px;color:#687e9e;font-size:.6875rem;letter-spacing:.09em; }
.recommendation-banner strong { display:block;font-size:1rem;line-height:1.4; }
.recommendation-banner small { display:block;margin-top:8px;color:var(--muted);font-size:.8125rem;line-height:1.5; }
.hood-card { display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f5f7fa;padding:16px;border-radius:12px; }
.hood-card span { display:block;font-size:.8125rem;color:var(--muted); }
.hood-card strong { display:block;margin-top:6px;font-size:1.5rem; }
.validation-card { display:grid;gap:8px;padding:16px;border:1px solid #dce9e2;background:#f5faf7;border-radius:12px;margin:20px 0; }
.validation-card strong { font-size:.9375rem;color:#387756; }
.validation-card span { font-size:.875rem;color:var(--muted);line-height:1.5; }
.validation-card.warning { background:#fff7ee;border-color:#f0dfc5; }
.validation-card.warning strong { color:#8b651e; }
label:has(>#customGenerator) { display:grid;gap:8px;margin:18px 0;font-size:.875rem; }
#customGenerator { width:100%;min-width:0;min-height:48px;padding:12px;border:1px solid #dce1e8;border-radius:10px;font-size:1rem; }
.quantity-card { padding:16px;border:1px solid #dce7f7;border-radius:12px;background:#f5f9ff;margin-top:12px; }
.quantity-card strong,.quantity-card span { display:block; }
.quantity-card span { font-size:.875rem;color:var(--muted);margin-top:5px; }
.quantity-options { display:flex;gap:10px;margin-top:16px; }
.quantity-options button { width:50px;min-height:46px;background:#fff;border:1px solid #d4dfeF;border-radius:9px;font-size:1.125rem; }
.quantity-options .selected { border-color:var(--blue);background:var(--blue);color:#fff; }
#systemStatus { display:block;margin-top:12px;font-size:.8125rem;color:#476c97; }
.metric-row,.review-metrics { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0; }
.metric-row>div,.review-metrics>div { padding:14px 10px;border-radius:10px;background:#f3f5f8; }
.metric-row span,.review-metrics span,.review-metrics small { display:block;color:var(--muted);font-size:.75rem; }
.metric-row strong,.review-metrics strong { display:block;font-size:1.3rem;margin:5px 0; }
.warn { color:var(--red); }
.workflow-map { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0; }
.workflow-map>div { border:1px solid var(--line);border-radius:10px;padding:12px; }
.workflow-map span { display:block;font-size:.6875rem;color:var(--muted);letter-spacing:.04em; }
.workflow-map strong { display:block;font-size:.875rem;margin-top:5px; }
.equipment-schedule { display:grid;gap:8px; }
.schedule-row { display:flex;width:100%;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px; }
.schedule-row img { width:52px;height:52px;object-fit:contain;border-radius:8px;background:#f5f6f8; }
.schedule-row>span { flex:1;min-width:0; }
.schedule-row strong,.schedule-row small { display:block; }
.schedule-row strong { font-size:.875rem; }
.schedule-row small { color:var(--muted);font-size:.75rem;margin-top:4px; }
.schedule-row>b { color:var(--blue);font-size:.8125rem; }
.empty-schedule { display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:12px; }
.empty-schedule span { font-size:.875rem;color:var(--muted); }
.review-section { margin:28px 0; }
.review-section h3 { padding-bottom:12px;border-bottom:1px solid var(--line); }
.review-row { display:grid;grid-template-columns:38% minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid #f0f2f5;font-size:.8125rem;line-height:1.5; }
.review-row>span { color:var(--muted); }
.review-row strong { overflow-wrap:anywhere; }
.checklist p { font-size:.875rem;color:var(--muted);display:flex;gap:9px; }
.checklist p>span { color:var(--green); }
.review-actions { display:grid;gap:10px; }
.review-group { border-bottom:1px solid var(--line); }
.review-group>summary { display:flex;flex-direction:column;gap:6px;position:relative;padding:18px 30px 18px 0;min-height:60px;cursor:pointer;list-style:none; }
.review-group>summary::-webkit-details-marker { display:none; }
.review-group>summary::after { content:'+';position:absolute;right:4px;top:20px;font-size:20px;color:var(--blue); }
.review-group[open]>summary::after { content:'−'; }
.review-group>summary>strong { font-size:1rem; }
.review-group>summary>span { color:var(--muted);font-size:.875rem;overflow-wrap:anywhere; }
.review-group .review-row:last-child { border-bottom:0; }
.more-window-widths { margin:10px 0 16px; }
.more-window-widths>summary { min-height:44px;align-content:center;font-size:.875rem;cursor:pointer;color:var(--blue); }
.wizard-footer #returnToReview { flex:1;max-width:240px;background:var(--blue);color:#fff;min-height:44px; }
.pricing-disclosure,.lead-card { margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:14px; }
.pricing-disclosure span { display:block;margin-top:8px;font-size:.875rem;color:var(--muted);line-height:1.55; }
.lead-card { background:#f6f8fc; }
.lead-card p,.lead-card small { color:var(--muted);font-size:.875rem;line-height:1.55; }
.lead-card small { display:block;margin-top:12px; }
.search-box { position:relative;display:flex;align-items:center;gap:10px;border:1px solid #dce2e9;border-radius:10px;padding:0 12px; }
.search-box svg { width:18px;height:18px;color:#8490a1; }
.search-box input { width:100%;min-width:0;min-height:48px;border:0;outline:0;background:none;font-size:1rem; }
.category-tabs { display:flex;gap:6px;overflow:auto;padding:12px 0 6px;scrollbar-width:thin; }
.chip { flex:none;padding:8px 12px;min-height:40px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.8125rem; }
.chip.active { color:var(--blue);background:var(--blue-soft);border-color:#bad3f7; }
.catalog-heading { display:flex;align-items:center;justify-content:space-between;margin:18px 0 14px;font-size:.9375rem; }
.panel-count { color:var(--muted);font-size:.75rem; }
.catalog-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.equipment-card { min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff; }
.equipment-image { position:relative;height:125px;background:#f6f7f9;padding:12px; }
.equipment-image>img { height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply; }
.equipment-badge { position:absolute;top:8px;left:8px;max-width:calc(100% - 48px);padding:4px 6px;border-radius:5px;background:#ffffffcf;color:#6d7787;font-size:.625rem; }
.add-card-button { position:absolute;bottom:8px;right:8px;width:44px;height:44px;border-radius:10px;background:white;box-shadow:0 2px 9px #26375418;border:1px solid #d9e1ed;color:var(--blue);font-size:25px; }
.equipment-copy { padding:12px; }
.equipment-copy strong { display:block;font-size:.875rem;line-height:1.3;overflow-wrap:anywhere; }
.equipment-copy span { display:block;color:var(--muted);font-size:.75rem;line-height:1.5;margin-top:6px; }
.catalog-drag-handle { width:100%;min-height:44px;border-top:1px solid var(--line);font-size:.75rem;color:#506a90;background:#f8faff;touch-action:none;cursor:grab; }
.layout-automation { display:flex;gap:8px;margin-top:12px; }
.layout-automation .button { flex:1;font-size:.75rem;padding:9px; }
.empty-list { padding:30px 10px;color:var(--muted);font-size:.9375rem; }
.inspector-panel { display:none;position:absolute;z-index:60;right:16px;top:16px;bottom:16px;width:min(360px,calc(100% - 32px));border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 20px 70px #1c2f4933;overflow:hidden; }
.inspector-panel.open { display:flex;flex-direction:column; }
.panel-header { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line); }
.panel-header small { font-size:.6875rem;color:var(--muted);letter-spacing:.1em; }
.panel-header h2 { font-size:1.25rem;margin:5px 0 0; }
.sheet-close { display:flex;align-items:center;gap:6px;height:44px;color:var(--blue);font-size:.875rem; }
.inspector-scroll { flex:1;min-height:0;overflow:auto;padding:20px; }
.trailer-settings { display:none; }
.selected-preview { height:160px;background:#f5f7fa;border-radius:12px; }
.selected-preview img { width:100%;height:100%;object-fit:contain; }
.selected-name { font-size:1.25rem;margin:20px 0 6px; }
.selected-type,.dimension-pill { font-size:.8125rem;color:var(--muted); }
.dimension-pill { margin:10px 0; }
.section { margin:24px 0; }
.section-title { font-size:.9375rem;margin:0 0 12px; }
.field-grid,.button-grid,.trailer-controls { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.field input,.field select { margin-top:8px; }
.warning-box { display:none;margin-top:12px;padding:12px;background:#fff0f1;color:var(--red);border-radius:8px;font-size:.8125rem; }
.warning-box.show { display:block; }
.inspector-empty { text-align:center;padding:40px 12px;color:var(--muted);font-size:.875rem; }
.inspector-empty svg { width:36px;height:36px;margin-bottom:16px; }
.selection-dock { position:absolute;z-index:18;left:24px;right:24px;bottom:110px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dce4ef;border-radius:12px;padding:10px 12px;box-shadow:0 7px 24px #253d5414; }
.selection-dock strong { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem; }
.selection-dock .tool-button { font-size:.8125rem; }
#quickRemove { color:var(--red); }
.status-strip { display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fff;border-top:1px solid var(--line);padding:0 18px;color:#8190a3;font-size:.6875rem; }
.status-left,.status-right { display:flex;align-items:center;gap:12px; }
.status-warning { color:var(--red); }
.status-dot,.status-right { display:none; }
.mobile-dock { display:none; }
.floating-new { position:fixed;bottom:4px;right:8px;width:26px;height:23px;display:grid;place-items:center;color:#78869a; }
.floating-new svg { width:16px;height:16px; }
.loading-cover { position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#f5f7fa; }
.loading-cover.hidden { display:none; }
.loading-card { display:grid;justify-items:center;gap:16px;padding:30px;text-align:center; }
.loading-card p { color:var(--muted);font-size:.875rem; }
.progress-track { height:3px;width:140px;background:#e1e6ee;border-radius:5px;overflow:hidden; }
.progress-bar { height:100%;width:65%;background:var(--blue);animation:load 1.2s ease-in-out infinite; }
@keyframes load { from { transform:translateX(-100%); } to { transform:translateX(200%); } }
.toast-stack { position:fixed;z-index:100;left:50%;bottom:40px;transform:translateX(-50%);width:min(420px,calc(100% - 32px));display:grid;gap:8px;pointer-events:none; }
.toast { padding:14px 18px;border-radius:12px;background:#263447;color:white;font-size:.875rem;box-shadow:0 8px 30px #1a2b4922;line-height:1.5; }
.toast.error { background:#9d303b; }
.toast.warning { background:#65512b; }
.boot-message { display:grid;place-items:center;height:100%;color:var(--muted); }
/* Plan geometry follows model dimensions, independently of the interface. */
.fallback-plan { position:absolute;inset:152px 22px 106px;z-index:3;overflow:hidden;touch-action:none; }
.fallback-shell-wrap { position:relative;width:100%;height:100%; }
.fallback-shell { position:absolute;left:50%;top:50%;border:4px solid #68758a;background:#f0f3f7;box-shadow:0 0 0 1px white,0 10px 25px #31466418;transform-origin:50% 50%; }
.fallback-shell { flex-shrink:0;max-width:none;max-height:none; }
.fallback-view-badge { display:none; }
.fallback-axis { position:absolute;top:0;left:0;color:#8a96a7;font-size:.6875rem;letter-spacing:.08em;z-index:4; }
.fallback-axis span:last-child { display:none; }
.plan-rotated .fallback-axis { top:36%;left:0;writing-mode:vertical-rl;transform:rotate(180deg); }
.fallback-dimensions { position:absolute;bottom:0;left:0;right:0;text-align:center;pointer-events:none;color:#7c899b;font-size:.6875rem; }
.fallback-dimensions>span { display:none; }
.fallback-dimensions strong { font-weight:500; }
.fallback-dimensions small { display:block;margin-top:3px;font-size:.625rem; }
.plan-fixture,.plan-entry,.plan-wheelwell,.plan-system,.fallback-equipment { position:absolute; }
.plan-fixture { background:#bacbd8;border:1px solid #829aad;overflow:hidden; }
.plan-fixture.closet { background:#52677f;color:#fff;border-color:#43576d; }
.plan-fixture span,.fallback-equipment span { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;font-weight:650;text-align:center;line-height:1;white-space:nowrap; }
.plan-rotated .plan-fixture span,.plan-rotated .fallback-equipment span { transform:translate(-50%,-50%) rotate(90deg); }
.plan-entry { left:0;border:1px dashed #d7b3b7;background:#fff5f555;display:grid;place-items:center; }
.plan-entry span { font-size:.625rem;color:#aa7b81;text-align:center; }
.plan-wheelwell { background:#626f82;overflow:hidden;color:#fff;text-align:center;font-size:.625rem; }
.plan-wheelwell { background:transparent;border:1px dashed #b3bdc9;color:#7a899a;pointer-events:none;opacity:.55; }
.plan-wash-access { position:absolute;left:0;width:100%;background:#eaf3f780;border:1px dashed #90adb9;display:grid;place-items:center;pointer-events:none; }
.plan-wash-access span { color:#537889;font-size:.625rem;text-align:center;max-width:100px; }
.plan-rear-equipment { display:none;position:absolute;bottom:0;left:0;width:100%;border-top:2px dashed #527995;background:#d9e6ef33;pointer-events:none; }
.show-guides .plan-rear-equipment { display:grid;place-items:center; }
.plan-rear-equipment span { font-size:.875rem;color:#46657c;white-space:nowrap; }
.plan-rotated .plan-rear-equipment span { transform:rotate(90deg); }
.plan-rotated .plan-wash-access span { transform:rotate(90deg); }
.plan-hood { position:absolute;transform:translate(-50%,-50%);border:2px dashed #617d95;background:#8aacce0a;z-index:9;pointer-events:none; }
.plan-hood span { position:absolute;bottom:2px;left:3px;font-size:.625rem;color:#416482;background:#ffffffd9;padding:2px 4px;white-space:nowrap; }
.plan-rotated .plan-hood span { transform:rotate(90deg);transform-origin:top left;top:3px;bottom:auto;left:12px; }
.starter-layouts { border-bottom:1px solid var(--line);padding:4px 0 18px;margin:8px 0 16px; }
.starter-layouts summary { cursor:pointer;min-height:44px;align-content:center;font-weight:650;font-size:.9375rem; }
.starter-layouts>p,.material-note { font-size:.8125rem;line-height:1.5;color:var(--muted); }
.starter-layout-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.starter-layout-grid button { display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fafbfc; }
.starter-layout-grid button:hover { border-color:var(--blue);background:var(--blue-soft); }
.starter-layout-grid span { font-size:.75rem;line-height:1.45;color:var(--muted); }
.starter-layout-grid b { color:var(--blue);font-size:.75rem;margin-top:auto; }
.fixed-specs small { display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:5px; }
.custom-paint input[type=color] { width:100%;padding:4px;min-height:44px; }
.swatch-row:has([data-color-key=interiorColor]),.swatch-row:has([data-color-key=cabinetColor]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.viewport.has-selection .fallback-plan { bottom:184px; }
.plan-system { transform:translate(-50%,-50%);border:1px dashed #a2b4d1;background:#ebf1fe77;display:grid;place-items:center; }
.plan-system span { color:#6981a7;font-size:.625rem; }
.plan-rotated .plan-entry span,.plan-rotated .plan-system span { transform:rotate(90deg); }
.fallback-equipment { transform:translate(-50%,-50%);border:1px solid #8195ae;background:#dce5ef;border-radius:4px;touch-action:none;cursor:grab;overflow:hidden; }
.fallback-equipment.selected { border:2px solid var(--blue);background:#d2e5ff;box-shadow:0 0 0 2px #ffffffc0;z-index:8; }
.fallback-equipment.collision { border-color:var(--red);background:#fce1e4; }
.fallback-equipment.support-outline { background:transparent;border-style:dashed;z-index:1; }
.fallback-equipment.supported-appliance { z-index:2; }
.fallback-equipment.supported-appliance.selected { z-index:8; }
.fallback-equipment small { display:block;font-size:.5rem;color:#506b7c; }
.fallback-shell { background:linear-gradient(#ffffffc9,#ffffffc9),var(--floor-tint,#f0f3f7); }
.finish-swatches { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); }
.metal-swatch span { background:linear-gradient(115deg,#9da4a7,#eef0ef 36%,#b2b9bb 62%,#e1e5e6); }
.floor-swatches { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px; }
.floor-swatch { padding:7px;border:1px solid var(--line,#dce1e6);border-radius:10px;background:#fff;text-align:left; }
.floor-swatch img { display:block;width:100%;height:52px;object-fit:cover;border-radius:6px;margin-bottom:7px; }
.floor-swatch strong,.floor-swatch small { display:block;font-size:.75rem; }
.floor-swatch small { margin-top:2px;color:#6d7580;font-size:.65rem; }
.floor-swatch.selected { border:2px solid var(--blue);padding:6px;background:#edf4ff; }
.mobile-ui .floor-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mobile-ui .finish-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
.finish-note { font-size:.75rem;line-height:1.5;color:#687582; }
.finish-note a { color:var(--blue); }
@media(max-width:600px) { .floor-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); } .finish-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fallback-door { position:absolute;left:-7px;width:8px;background:#fff1f2; }
.fallback-window { position:absolute;right:-8px;width:12px;transform:translateY(-50%);background:var(--blue);border-radius:4px;touch-action:none;cursor:grab;z-index:9; }
.fallback-window span { display:none; }
.viewport.drag-active::after { content:"Release inside the trailer";position:absolute;inset:12px;z-index:20;border:2px dashed #6a9fe9;border-radius:12px;background:#edf5ff66;display:grid;place-items:center;color:#315d99;font-size:.9375rem;pointer-events:none; }
.preview-notice { position:absolute;z-index:14;top:174px;left:24px;right:24px;padding:10px 14px;border:1px solid #dce4ef;border-radius:10px;background:#fff;font-size:.8125rem;color:#647289; }
/* One phone/tablet layout. No competing media-query overrides. */
.mobile-ui .builder-shell { grid-template-rows:60px minmax(0,1fr) calc(64px + env(safe-area-inset-bottom)); }
.mobile-ui .topbar { padding:0 16px;gap:12px; }
.mobile-ui .brand-button,.mobile-ui .brand-copy { min-width:0; }
.mobile-ui .brand-button { flex:1; }
.mobile-ui .brand-copy strong { font-size:.6875rem;letter-spacing:.035em; }
.mobile-ui .brand-copy span { font-size:.6875rem; }
.mobile-ui .brand-mark { width:29px;height:29px; }
.mobile-ui .brand-mark::after { top:18px; }
.mobile-ui .project-name { display:none; }
.mobile-ui .top-actions { gap:2px; }
.mobile-ui .top-actions .button { width:44px;min-width:44px;padding:8px;border:0;background:none;color:#62728a; }
.mobile-ui .top-actions .primary { background:var(--blue-soft);color:var(--blue); }
.mobile-ui .top-actions span { display:none; }
.mobile-ui .builder-workspace,.mobile-ui .builder-workspace.stage-collapsed { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(165px,28%) minmax(0,1fr); }
.mobile-ui .builder-workspace.no-preview { grid-template-rows:minmax(0,1fr); }
.mobile-ui .builder-workspace.no-preview .wizard-panel { grid-row:1;max-width:none;border:0; }
.mobile-ui .builder-workspace.no-preview .step-content { max-width:none; }
.mobile-ui .viewport { display:block;grid-column:1;grid-row:1;border-bottom:1px solid var(--line); }
.mobile-ui .wizard-panel { grid-column:1;grid-row:2;grid-template-rows:46px minmax(0,1fr) 70px;border-right:0; }
.mobile-ui .viewport-toolbar { top:10px;left:12px;right:12px;gap:6px; }
.mobile-ui .viewport-toolbar .tool-group { background:#ffffffce;padding:3px;border-radius:10px; }
.mobile-ui .viewport-toolbar .tool-button { font-size:.75rem;min-height:44px;padding:8px 10px; }
.mobile-ui .viewport-toolbar .tool-group:last-child { display:none; }
.mobile-ui .placement-toolbar { top:64px;left:12px;right:12px;gap:5px; }
.mobile-ui .placement-toolbar .tool-button { font-size:.8125rem;padding:10px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .placement-toolbar,.mobile-ui .builder-workspace:not(.mobile-focus-stage) .trailer-summary,.mobile-ui .builder-workspace:not(.mobile-focus-stage) .selection-dock { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-plan { inset:54px 20px 32px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-dimensions,.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-axis { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-shell span { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .plan-wheelwell { font-size:0; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .plan-fixture.sink { background:#b6cbd8;box-shadow:inset 0 0 0 3px #e7eef3,inset 0 0 0 4px #9bb4c5; }
.mobile-ui .mobile-stage-toggle { display:block;position:absolute;bottom:6px;right:12px;z-index:13;min-height:44px;padding:8px 12px;border:1px solid #dce3ec;border-radius:9px;background:#ffffffed;color:#426898;font-size:.75rem; }
.mobile-ui .step-rail-wrap { padding:0 16px; }
.mobile-ui .rail-arrow { display:none; }
.mobile-ui .step-rail { width:100%; }
.mobile-ui .step-pill { min-height:34px;font-size:.8125rem;padding:6px 10px; }
.mobile-ui .step-content,.mobile-ui .catalog-panel { max-width:660px;margin:auto;padding:20px 20px 28px; }
.mobile-ui .step-heading { margin-bottom:20px; }
.mobile-ui .step-heading h2,.mobile-ui .layout-intro h2 { font-size:1.5rem; }
.mobile-ui .step-heading>p:last-child,.mobile-ui .layout-intro>p:last-child { font-size:.9375rem; }
.mobile-ui .wizard-footer { padding:11px 20px; }
.mobile-ui .wizard-footer .primary { max-width:240px; }
.mobile-ui .mobile-dock { z-index:45;display:flex;align-items:stretch;justify-content:space-around;background:#fff;border-top:1px solid var(--line);padding:4px 20px calc(4px + env(safe-area-inset-bottom)); }
.mobile-dock button { flex:1;min-height:54px;border-radius:10px;font-size:.75rem;color:#8792a3;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center; }
.mobile-dock button>span { font-size:.8125rem;font-weight:650; }
.mobile-dock .active { color:var(--blue);background:#f5f8fd; }
.mobile-ui .status-strip,.mobile-ui .floating-new { display:none; }
.mobile-ui .builder-workspace.mobile-focus-stage { grid-template-rows:minmax(0,1fr); }
.mobile-ui .builder-workspace.mobile-focus-stage .wizard-panel { display:none; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport { grid-row:1;height:100%; }
.mobile-ui .builder-workspace.mobile-focus-stage .fallback-plan { inset:130px 16px 142px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport.has-selection .fallback-plan { bottom:198px; }
.mobile-ui .viewport.has-selection .fallback-dimensions { display:none; }
.mobile-ui .builder-workspace.mobile-focus-stage .mobile-stage-toggle { bottom:96px; }
.mobile-ui .trailer-summary { bottom:12px;left:12px;right:12px;padding:14px;gap:20px; }
.mobile-ui .summary-stat:first-child,.mobile-ui .summary-view { display:none; }
.mobile-ui .summary-stat strong { font-size:.8125rem; }
.mobile-ui .selection-dock { left:12px;right:12px;bottom:140px;flex-wrap:wrap; }
.mobile-ui .selection-dock strong { flex-basis:100%; }
.mobile-ui .selection-dock .tool-button { flex:1; }
.mobile-ui .selection-dock { width:calc(100% - 24px);max-width:540px;left:50%;right:auto;transform:translateX(-50%);bottom:134px;padding:8px 10px;gap:6px; }
.mobile-ui .selection-dock .tool-button { min-height:44px; }
.mobile-ui .starter-layout-grid { grid-template-columns:1fr; }
.mobile-ui .starter-layout-grid button { display:grid;grid-template-columns:1fr auto;gap:5px 12px; }
.mobile-ui .starter-layout-grid strong,.mobile-ui .starter-layout-grid span { grid-column:1; }
.mobile-ui .starter-layout-grid b { grid-column:2;grid-row:1/3;align-self:center; }
.mobile-ui .inspector-panel { inset:auto 10px 10px;width:auto;max-height:85%; }
.mobile-ui .toast-stack { bottom:84px; }
.mobile-ui .preview-notice { top:138px;left:12px;right:12px;font-size:.75rem; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .preview-notice { top:auto;bottom:10px;right:150px;padding:0;border:0;background:none;font-size:.6875rem;line-height:1.4; }
.mobile-ui .family-header { height:74px;padding:0 22px; }
.mobile-ui .family-header-note { display:none; }
.mobile-ui .family-hero { margin:22px auto 24px;padding:0 22px; }
.mobile-ui .family-hero h1 { font-size:2rem; }
.mobile-ui .family-grid { grid-template-columns:1fr;padding:0 22px 24px;gap:12px;max-width:660px; }
.mobile-ui .family-card { min-height:190px;padding:22px;gap:12px; }
.mobile-ui .family-card.muted-card { min-height:125px; }
.mobile-ui .family-footer { display:none; }
.mobile-test #app { max-width:430px;margin:0 auto;box-shadow:0 0 60px #1c2c3c12; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }
@media (max-height:660px) { .mobile-ui .builder-workspace:not(.mobile-focus-stage):not(.no-preview) { grid-template-rows:180px minmax(0,1fr); } .mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport-toolbar { top:6px; } }
.mobile-ui.keyboard-open .builder-shell { grid-template-rows:52px minmax(0,1fr); }
.mobile-ui.keyboard-open .builder-workspace:not(.mobile-focus-stage) { grid-template-rows:minmax(0,1fr); }
.mobile-ui.keyboard-open .builder-workspace:not(.mobile-focus-stage) .viewport,.mobile-ui.keyboard-open .mobile-dock { display:none; }
.mobile-ui.keyboard-open .builder-workspace:not(.mobile-focus-stage) .wizard-panel { grid-row:1;grid-template-rows:40px minmax(0,1fr) 62px; }
.mobile-ui.keyboard-open .wizard-scroll { scroll-padding-block:30px; }

/* Configurator controls keep the product visible while choices are changed. */
.exterior-controls { position:absolute;left:20px;right:20px;bottom:116px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none; }
.exterior-angle-list,.exterior-zoom { display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fffffff2;box-shadow:0 6px 24px #16335308;pointer-events:auto; }
.exterior-controls .tool-button { border:0;background:transparent;min-height:44px;padding:10px 12px;white-space:nowrap; }
.exterior-controls .tool-button.active { background:var(--ink);color:#fff; }
.exterior-zoom .tool-button { min-width:44px; }
.all-steps-button { flex:none;min-height:44px;padding:8px 10px;border-left:1px solid var(--line);color:var(--blue);font-size:.875rem; }
.config-section { border-bottom:1px solid var(--line); }
.config-section>summary { list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:82px;padding:18px 0; }
.config-section>summary::-webkit-details-marker { display:none; }
.config-section>summary strong { display:block;font-size:1rem; }
.config-section>summary small { display:block;font-size:.875rem;color:var(--muted);margin-top:4px;line-height:1.45; }
.config-section>summary b { display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:20px;font-weight:400; }
.config-section[open]>summary b { transform:rotate(45deg); }
.config-section-content { padding:0 0 20px; }
.config-section-content>.group-title:first-child { margin-top:0; }
.step-pill[aria-current="step"] { font-weight:650; }
.review-row { position:relative;display:grid;grid-template-columns:minmax(95px,.7fr) minmax(0,1.3fr) auto;gap:12px;align-items:start; }
.review-row strong { overflow-wrap:anywhere; }
.review-edit { align-self:center;min-width:44px;min-height:44px;color:var(--blue);font-size:.875rem; }
.review-actions { flex-wrap:wrap; }
.review-actions>.button { flex:1 1 145px; }
.build-dialog { margin:auto 0 auto auto;padding:0;width:min(620px,calc(100vw - 24px));max-width:none;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:18px 0 0 18px;background:#fff;color:var(--ink);box-shadow:-12px 0 70px #14243c20;overflow:hidden; }
.build-dialog[open] { display:flex;flex-direction:column; }
.build-dialog::backdrop { background:#15283c65;backdrop-filter:blur(3px); }
.dialog-header { display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:24px;border-bottom:1px solid var(--line); }
.dialog-header h2 { margin:0;font-size:1.4rem; }
.dialog-header .step-kicker { margin-bottom:6px; }
.dialog-content { overflow:auto;overscroll-behavior:contain;padding:24px; }
.dialog-intro { color:var(--muted);font-size:1rem; }
.dialog-fit { padding:14px 16px;background:var(--blue-soft);border-radius:10px;margin:16px 0;font-size:.875rem; }
.dialog-fit.has-issues { color:#942823;background:#fff0ee; }
.dialog-actions { display:flex;gap:10px;margin:24px 0 12px;flex-wrap:wrap; }
.dialog-actions .button { flex:1; }
.step-overview { display:grid;gap:8px; }
.step-overview button { display:flex;align-items:center;gap:14px;min-height:80px;padding:14px;border:1px solid var(--line);border-radius:12px;text-align:left; }
.step-overview button>span { min-width:0;flex:1; }
.step-overview strong,.step-overview small { display:block; }
.step-overview strong { font-size:1rem; }
.step-overview small { color:var(--muted);font-size:.875rem;margin-top:4px; }
.step-overview b { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#edf0f5; }
.step-overview em { font-style:normal;font-size:.75rem;color:var(--muted); }
.step-overview [aria-current="step"] { background:var(--blue-soft);border-color:#94bfff; }
.step-overview [aria-current="step"] b { background:var(--blue);color:white; }
.print-sheet { display:none; }
@media (max-width:1250px) { .exterior-controls { flex-direction:column;align-items:center; } .exterior-controls .tool-button { padding:10px;font-size:.875rem; } }
.mobile-ui .exterior-controls { left:12px;right:12px;bottom:104px;gap:8px; }
.mobile-ui .builder-workspace.mobile-focus-stage:has([data-view="exterior"]) .mobile-stage-toggle { top:10px;bottom:auto; }
.mobile-ui .exterior-angle-list { max-width:100%;overflow:auto;scrollbar-width:none; }
.mobile-ui .exterior-angle-list .tool-button { font-size:.875rem;padding:10px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .exterior-controls { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:minmax(200px,34%) minmax(0,1fr); }
.mobile-ui .step-rail-wrap { gap:0;padding-inline:12px; }
.mobile-ui .step-pill { min-height:44px;font-size:.875rem; }
.mobile-ui .mobile-stage-toggle { font-size:.875rem; }
.mobile-ui .build-dialog { width:100%;height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);margin:auto 0 0;border-radius:18px 18px 0 0; }
.mobile-ui .dialog-header,.mobile-ui .dialog-content { padding:20px; }
.mobile-ui .review-row { grid-template-columns:minmax(85px,.7fr) minmax(0,1.3fr) 44px;gap:8px; }
.mobile-ui .dialog-actions .button { flex-basis:180px; }
@media (max-height:690px) { .mobile-ui .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:180px minmax(0,1fr); } }
.mobile-ui.keyboard-open .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:minmax(0,1fr); }
/* Keep the model and option navigation in separate, usable areas. */
.preview-canvas-frame { position:absolute;inset:0;min-width:0;min-height:0; }
.viewport[data-view="exterior"] .preview-canvas-frame { bottom:176px; }
.current-step-label,.step-menu-chevron { display:none; }
.exterior-zoom { flex-wrap:wrap;justify-content:center; }
.config-section { margin:10px 0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden; }
.config-section>summary { padding:16px;min-height:76px; }
.config-section>summary b { border:0;font-size:23px; }
.config-section[open]>summary { background:#233246;color:white; }
.config-section[open]>summary small { color:#d1ddec; }
.config-section[open]>summary b { transform:rotate(180deg); }
.config-section-content { padding:18px 16px; }
.config-section-content .choice-card { padding-block:13px; }
.field-caption,.finish-picker-heading { font-size:.875rem;margin:0 0 12px;font-weight:600; }
.mobile-ui .step-rail { display:none; }
.mobile-ui .step-rail-wrap { padding:0 16px; }
.mobile-ui .all-steps-button { display:flex;align-items:center;gap:12px;width:100%;min-height:54px;border:0;padding:5px 0;text-align:left; }
.mobile-ui .current-step-label { display:flex;flex-direction:column;flex:1;min-width:0;gap:1px;color:var(--ink); }
.mobile-ui .current-step-label small { font-size:.625rem;letter-spacing:.07em;color:var(--muted); }
.mobile-ui .current-step-label strong { font-size:.9375rem; }
.mobile-ui .all-steps-label { font-size:.8125rem; }
.mobile-ui .step-menu-chevron { display:block;font-size:20px; }
.mobile-ui .wizard-panel { grid-template-rows:54px minmax(0,1fr) 70px; }
.mobile-ui .step-heading .step-kicker { display:none; }
.mobile-ui .step-heading { margin-bottom:16px; }
.mobile-ui .step-heading h2 { font-size:1.3rem; }
.mobile-ui .step-heading>p:last-child { font-size:.875rem; }
.mobile-ui #stepContent:is([data-step="4"],[data-step="5"],[data-step="8"]) { padding-top:4px; }
.mobile-ui #stepContent:is([data-step="4"],[data-step="5"],[data-step="8"])>.step-heading { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:clamp(270px,42dvh,380px) minmax(0,1fr); }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport[data-view="exterior"] .preview-canvas-frame { bottom:58px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport[data-view="exterior"] .viewport-toolbar { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .exterior-controls { display:flex;inset:auto 0 0;gap:0; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .exterior-controls .exterior-zoom { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .exterior-angle-list { width:100%;max-width:none;justify-content:center;padding:5px 8px;border:0;border-top:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .exterior-angle-list .tool-button { padding:8px;font-size:.75rem;min-height:46px;flex:1; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport[data-view="exterior"] .mobile-stage-toggle { top:10px;right:12px;bottom:auto;min-width:44px;height:44px;padding:8px;font-size:0; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport[data-view="exterior"] .mobile-stage-toggle::after { content:"⤢";font-size:26px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport[data-view="exterior"] .preview-canvas-frame { bottom:220px;top:45px; }
.mobile-ui .builder-workspace.mobile-focus-stage .exterior-controls { bottom:100px; }
.mobile-ui .builder-workspace.mobile-focus-stage .exterior-zoom { max-width:100%; }
.mobile-ui #previewServiceWindow,.mobile-ui #previewEntryDoor { display:none; }
.mobile-ui .config-section>summary { padding:14px;min-height:72px; }
.mobile-ui .config-section>summary strong { font-size:.9375rem; }
.mobile-ui .config-section>summary small { font-size:.8125rem; }
.mobile-ui .config-section-content { padding:16px 14px; }
.mobile-ui.keyboard-open .all-steps-button { min-height:40px; }
.mobile-ui.keyboard-open .current-step-label small { display:none; }
@media (max-height:700px) {
  .mobile-ui .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:minmax(210px,38%) minmax(0,1fr); }
}
@media (max-width:1250px) {
  html:not(.mobile-ui) .viewport[data-view="exterior"] .preview-canvas-frame { bottom:232px; }
}
.mobile-ui.keyboard-open .builder-workspace:not(.mobile-focus-stage):has([data-view="exterior"]) { grid-template-rows:minmax(0,1fr); }
@media (min-width:700px) and (max-height:560px) {
  .mobile-ui .builder-workspace:not(.mobile-focus-stage):not(.no-preview) { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr); }
  .mobile-ui .builder-workspace:not(.mobile-focus-stage):not(.no-preview) .viewport { grid-column:1;grid-row:1;border-right:1px solid var(--line);border-bottom:0; }
  .mobile-ui .builder-workspace:not(.mobile-focus-stage):not(.no-preview) .wizard-panel { grid-column:2;grid-row:1; }
}
@media (max-width:699px) and (max-height:560px) {
  .mobile-ui .builder-workspace:not(.mobile-focus-stage):not(.no-preview) { grid-template-rows:minmax(0,1fr); }
  .mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport { display:none; }
  .mobile-ui .builder-workspace:not(.mobile-focus-stage) .wizard-panel { grid-row:1; }
}
@media (max-height:560px) {
  .mobile-ui .builder-workspace.mobile-focus-stage .viewport[data-view="exterior"] .preview-canvas-frame { top:48px;bottom:66px; }
  .mobile-ui .builder-workspace.mobile-focus-stage .exterior-controls { bottom:6px; }
  .mobile-ui .builder-workspace.mobile-focus-stage .exterior-zoom,.mobile-ui .builder-workspace.mobile-focus-stage .trailer-summary { display:none; }
}
@media print {
  @page { size:letter; margin:.5in; }
  html,body { width:auto;height:auto;overflow:visible;background:white; }
  #app { width:100%;height:auto;zoom:1; }
  #app>:not(.print-sheet) { display:none!important; }
  .print-sheet { display:block!important;color:#182b42;font:10pt/1.4 Arial,sans-serif; }
  .build-sheet header { display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #182b42;padding-bottom:14px; }
  .build-sheet header p { font-size:9pt;letter-spacing:.06em;margin:0 0 8px; }
  .build-sheet h1 { font-size:21pt;letter-spacing:-.03em;margin:0;overflow-wrap:anywhere; }
  .build-sheet header>div:last-child { text-align:right;flex:none; }
  .build-sheet header span { display:block; }
  .build-sheet h2 { font-size:15pt;margin:20px 0 10px;break-after:avoid; }
  .sheet-note,.build-sheet footer { font-size:9pt;color:#4c5869;padding:10px 0; }
  .sheet-selections { margin:0; }
  .sheet-selections>div { display:grid;grid-template-columns:145px 1fr;gap:12px;border-bottom:1px solid #d6dee6;padding:7px 0;break-inside:avoid; }
  .sheet-selections dt { color:#46556a; }
  .sheet-selections dd { margin:0;overflow-wrap:anywhere; }
  .sheet-layout { break-before:page; }
  .sheet-plan { display:block;width:100%;height:6.6in;fill:none;stroke:none; }
  .sheet-plan text { stroke:none;fill:#182b42; }
  .build-sheet table { border-collapse:collapse;width:100%;font-size:10pt; }
  .build-sheet thead { display:table-header-group; }
  .build-sheet tr { break-inside:avoid; }
  .build-sheet td,.build-sheet th { text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid #d6dee6; }
  .build-sheet th { background:#edf2f7; }
  .build-sheet footer { margin-top:18px;border-top:1px solid #d6dee6; }
}

/* Floor-plan sheet: short keys in the drawing, full names in the schedule. */
.fallback-plan { background:#fff;border:1px solid #e2e7ec;border-radius:12px; }
.fallback-shell { box-shadow:none;border-width:3px;top:calc(50% - 12px); }
.fallback-axis span:first-child { display:block; }
.fallback-axis { top:10px;left:50%;transform:translateX(-50%);font-size:.75rem;white-space:nowrap;color:#516071;letter-spacing:.03em; }
.plan-rotated .fallback-axis { top:50%;left:8px;transform:translateY(-50%) rotate(180deg); }
.fallback-rear { position:absolute;bottom:48px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#516071; }
.plan-rotated .fallback-rear { top:50%;bottom:auto;left:auto;right:8px;writing-mode:vertical-rl;transform:translateY(-50%); }
.fallback-dimensions { bottom:32px;font-size:.75rem;color:#516071; }
.plan-key { position:absolute;bottom:9px;left:12px;right:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:.75rem;color:#526174;pointer-events:none; }
.plan-key b { color:#1f3446; }
.plan-key-window { color:#0966ec; }
.plan-key-window::before { content:'';display:inline-block;width:12px;height:3px;background:#0966ec;vertical-align:middle;margin-right:4px; }
.plan-entry { border-color:#699c85;background:#e2f0e850; }
.plan-entry span,.plan-wash-access span,.plan-hood span,.plan-system span { display:none; }
.plan-wheelwell,.plan-hood,.plan-system { display:none; }
.show-guides .plan-wheelwell,.show-guides .plan-hood,.show-guides .plan-system { display:block;font-size:0; }
.show-guides .plan-wash-access,.show-guides .plan-entry { background:#dcece855; }
.plan-hood { border-color:#7d5c31;background:#f3e5c914; }
.fallback-equipment.support-outline { border-style:dashed; }
.fallback-equipment.selected { z-index:10; }
.plan-number { color:#233747; }
.plan-mode #planGuides,.fallback-mode #planGuides { display:inline-flex; }
#planGuides { display:none; }
#planGuides[aria-pressed=true] { background:#eaf2ff;color:#0966ec;border-color:#aac6f0; }
.plan-size-note { font-size:.875rem;color:#4f6072;line-height:1.5; }
.plan-size-note strong,.plan-size-note span { display:block; }
.planning-notes { margin:16px 0;padding:14px;border:1px solid #e5d6ad;border-radius:10px;background:#fffcf3;font-size:.875rem; }
.planning-notes summary { min-height:32px;cursor:pointer;font-weight:650; }
.planning-notes ul { padding-left:20px;margin:10px 0 0; }
.planning-notes li { line-height:1.5;margin:8px 0; }
.schedule-row { display:grid;grid-template-columns:34px minmax(0,1fr) auto; }
.schedule-number { display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#e9f0f8;color:#234b7b;font-size:.875rem; }
.preview-retry { color:#075ed9; }
.viewport:has(.preview-retry:not([hidden])) [data-camera]:not([data-camera="top"]),.viewport:has(.preview-retry:not([hidden])) .view-menu { display:none; }
.preview-notice { top:154px;left:24px;right:24px;font-size:.875rem; }
.viewport:has(.preview-notice:not([hidden])) .fallback-plan { top:230px; }
.viewport.has-selection .fallback-plan { bottom:178px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .plan-key,.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-rear { display:none; }
.mobile-ui .builder-workspace.mobile-focus-stage .fallback-plan { inset:140px 12px 132px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport.has-selection .fallback-plan { bottom:126px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport.has-selection .selection-dock { bottom:12px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport.has-selection :is(.trailer-summary,.mobile-stage-toggle) { display:none; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport:has(.preview-notice:not([hidden])) .fallback-plan { top:216px; }
.mobile-ui .preview-retry { min-height:44px;padding:8px 10px; }
.mobile-ui .preview-notice { top:130px;left:12px;right:12px;font-size:.8125rem; }
.mobile-ui .plan-key { gap:4px 8px;font-size:.75rem; }
.mobile-ui .fallback-dimensions { font-size:.75rem; }
@media (max-height:600px) {
  .fallback-plan { top:134px;bottom:82px; }
  .viewport.has-selection .fallback-plan { bottom:152px; }
  .viewport:has(.preview-notice:not([hidden])) .fallback-plan { top:195px; }
  .preview-notice { top:134px; }
}

.starter-layout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-shell .plan-number { display:block;font-size:.75rem; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .preview-notice { display:none; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport:has(.preview-notice:not([hidden])) .fallback-plan { top:54px; }

.counter-depth-options { margin:18px 0;padding:16px;background:#f4f7fb;border-radius:12px; }
.counter-depth-options p,.countertop-extras p { color:#65707d;font-size:.875rem;line-height:1.5;margin:8px 0 12px; }
.counter-depth-dialog { max-width:500px; }
.dialog-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:24px; }
.dialog-actions .button { flex:1;min-width:160px; }
.countertop-extras { padding:16px;margin-bottom:20px;border:1px solid #d9e4f1;border-radius:12px;background:#f4f8fd; }
.countertop-extras>div { display:flex;align-items:center;gap:8px;margin-top:10px; }
.countertop-extras>div>span { flex:1;min-width:0;font-size:.875rem;line-height:1.4; }
.countertop-extras .button { min-height:44px;padding:8px 12px; }
.automatic-fit-note { color:#536575;font-size:.875rem;line-height:1.5;margin:16px 0; }
.fallback-equipment { user-select:none;-webkit-user-select:none;touch-action:none; }
.fallback-equipment.collision { border-color:#cc394b;background:#ffe1e4; }
/* Keep the drawing stable when selection reveals its action dock. */
.viewport[data-view="top"] .fallback-plan { bottom:178px; }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport[data-view="top"] .fallback-plan { bottom:126px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .viewport[data-view="top"] .fallback-plan { bottom:32px; }
.plan-key,.fallback-dimensions { background:#fffffff0; }

.mobile-ui .placement-toolbar .tool-button { font-size:.75rem;padding:8px; }
.mobile-ui .builder-workspace:not(.mobile-focus-stage) .fallback-shell { top:50%; }

/* Equipment navigation and explicit customer layout choices. */
.category-tabs {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;overflow:visible;padding:12px 0;}
.category-tabs label {display:flex;min-width:0;flex-direction:column;gap:7px;font-size:.875rem;font-weight:650;color:var(--muted);}
.category-tabs select {min-width:0;width:100%;min-height:48px;font:inherit;font-size:1rem;font-weight:500;color:var(--ink);padding:10px 28px 10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.catalog-more {width:100%;margin-top:16px;min-height:48px;}
.aisle-options {margin:12px 0 16px;padding:0 12px;border:1px solid var(--line);border-radius:10px;}
.aisle-options summary {display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:48px;font-size:.875rem;cursor:pointer;}
.aisle-options summary strong {color:var(--blue);}
.aisle-options p {font-size:.875rem;line-height:1.5;margin:0 0 12px;color:var(--muted);}
.aisle-options .segment-control {margin-bottom:12px;}
.acknowledgment {display:flex;gap:12px;padding:16px;border:1px solid #bacce3;border-radius:10px;background:#f4f8fd;font-size:1rem;line-height:1.55;}
.acknowledgment input {width:22px;height:22px;flex:none;align-self:flex-start;margin-top:3px;}
.saved-builds {text-align:left;}
.saved-builds summary {min-height:48px;align-content:center;cursor:pointer;font-size:1rem;font-weight:650;}
.saved-build-row {display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;text-align:left;border:1px solid var(--line);border-radius:12px;background:white;margin:10px 0;padding:16px;}
.saved-build-row strong,.saved-build-row small {display:block;overflow-wrap:anywhere;}
.saved-build-row small {font-size:.875rem;color:var(--muted);margin-top:5px;}
.saved-build-row b {white-space:nowrap;color:var(--blue);}
.family-hero .start-new-note {font-size:1rem;margin-top:20px;}
.plan-porch-entry {position:absolute;bottom:0;z-index:1;pointer-events:none;border:1px dashed #5b8e79;background:#eaf4ed88;color:#446c59;font-size:.7rem;display:grid;place-items:center;text-align:center;}
.plan-additions {position:absolute;top:100%;left:0;right:0;text-align:center;margin:70px 0 0;font-size:.75rem;color:var(--muted);}
.plan-rotated .plan-porch-entry {font-size:0;}
.plan-kitchen {position:absolute;left:0;top:0;width:100%;}
.plan-porch {position:absolute;left:0;width:100%;border-top:3px solid #68758a;background:repeating-linear-gradient(90deg,#e2e8eb 0,#e2e8eb 12px,#dce3e7 12px,#dce3e7 13px);}
.plan-porch-door {position:absolute;height:4px;background:#258160;top:-3px;}
.porch-add-button {margin-top:12px;width:100%;min-height:44px;color:var(--blue);border-color:#c9d9ed;background:#f4f8fe;font-size:.875rem;}
@media (max-width:380px){.category-tabs{grid-template-columns:1fr;gap:8px;}}
.mobile-ui .category-tabs {position:static;}
.mobile-ui .builder-workspace.stage-collapsed .plan-additions {display:none;}

/* Put names and results first; package contents and layout tools stay one tap away. */
.included-package,.selected-package,.equipment-layout-tools {border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:0 14px;background:#fff;}
.included-package>summary,.selected-package>summary,.equipment-layout-tools>summary {min-height:48px;align-content:center;cursor:pointer;font-size:.9375rem;font-weight:650;padding:10px 0;}
.included-package p,.selected-package p {font-size:.875rem;line-height:1.5;color:var(--muted);}
.included-package ul {padding-left:20px;font-size:.9375rem;line-height:1.7;}
.selected-package {background:#f6f9ff;border-color:#c8d8ef;}
.selected-package[hidden] {display:none;}
#selectedPackageCount {float:right;font-size:.875rem;font-weight:500;color:#506785;margin-left:8px;}
.selected-package h3 {font-size:1rem;margin:18px 0 4px;}
.package-items {list-style:none;padding:0;margin:12px 0;}
.package-items li {display:flex;gap:10px;padding:12px 0;border-top:1px solid #dce5f0;}
.package-items strong {display:block;font-size:.9375rem;line-height:1.45;font-weight:600;}
.package-items small {display:block;font-size:.8125rem;line-height:1.5;color:var(--muted);margin-top:4px;}
.package-item-number {flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:#e0eaf7;color:#294c77;font-size:.875rem;}
.package-note {border-top:1px solid #dce5f0;padding-top:12px;}
.starter-layouts {padding:0 0 12px;margin:0 0 12px;}
.starter-kit.is-selected {border-color:#97b9e7;background:#f6f9ff;}
.package-selected-label {display:block;color:#175ea8;font-size:.875rem;font-weight:650;margin-top:14px;}
.equipment-layout-tools {margin-top:20px;}
.category-tabs {grid-template-columns:1fr;gap:8px;padding:10px 0 4px;}
.category-tabs label {display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:8px;}
.category-tabs select {font-size:.9375rem;}
.catalog-heading {margin-top:14px;font-size:1rem;}
.panel-count {font-size:.875rem;}
.equipment-image {overflow:hidden;height:140px;}
.equipment-badge {display:none;}
.equipment-copy strong {font-size:1rem;line-height:1.4;overflow-wrap:normal;}
.equipment-copy span {font-size:.8125rem;}
.equipment-copy .equipment-model {color:#526174;font-size:.8125rem;margin-top:6px;overflow-wrap:anywhere;}
.equipment-model:empty {display:none;}
.catalog-photo {position:relative;overflow:hidden;height:96px;width:100%;background:#f6f7f9;}
.equipment-image .catalog-photo {position:absolute;inset:8px;width:auto;height:auto;}
.catalog-photo-square {position:absolute;height:100%;aspect-ratio:1;left:50%;top:0;transform:translateX(-50%);}
.catalog-photo img.framed-catalog-photo {position:absolute;max-width:none;object-fit:initial;mix-blend-mode:multiply;}
.empty-list .button {display:block;margin:18px auto 0;}
@media(min-width:1500px){.category-tabs label{grid-template-columns:110px minmax(0,1fr);}}
@media(max-width:380px){.category-tabs label{grid-template-columns:1fr;gap:4px;}.equipment-copy{padding:10px;}}

/* Equipment families open to model choices, with room for touch targets. */
.catalog-type-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.catalog-type-card {display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;}
.catalog-type-card:hover,.catalog-type-card:focus-visible {border-color:var(--blue);background:var(--blue-soft);}
.catalog-type-card img {width:100%;height:90px;object-fit:contain;}
.catalog-type-card strong {font-size:.9375rem;line-height:1.35;}
.catalog-type-card span {font-size:.8125rem;color:var(--blue);margin-top:auto;}
.catalog-types-back {margin-bottom:12px;}
.starter-layout-grid button:disabled {opacity:.65;cursor:default;}
.altro-range-label {display:flex;flex-direction:column;gap:8px;margin:14px 0;font-weight:650;}
.altro-range-label select {width:100%;min-width:0;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;}

/* Keep primary equipment actions within reach on narrow previews. */
.selection-dock { flex-wrap:wrap; }
.selection-dock strong { flex-basis:100%; }
.selection-dock .tool-button { flex:1 0 auto; min-height:44px; font-size:.875rem; }
.selection-dock .tool-button[hidden] { display:none; }
.mobile-ui .selection-dock .tool-button { flex:1 0 calc(33.333% - 8px); }
.viewport.has-selection .fallback-plan { bottom:calc(122px + var(--selection-dock-height, 90px)); }
.mobile-ui .builder-workspace.mobile-focus-stage .viewport.has-selection .fallback-plan { bottom:calc(24px + var(--selection-dock-height, 140px)); }

/* View direction and editing are deliberate choices, independent of zoom. */
.plan-orientation {display:none;align-items:center;gap:4px;pointer-events:auto;font-size:.75rem;color:#526174;margin-left:auto;}
.plan-orientation select {font:inherit;max-width:110px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:6px;}
.plan-mode .plan-orientation,.fallback-mode .plan-orientation {display:inline-flex;}
.placement-toolbar #moveMode,.placement-toolbar #orbitMode,.placement-toolbar .plan-orientation {order:0;}
.placement-toolbar .tool-button {order:1;}
.placement-toolbar::after {content:'';flex-basis:100%;height:0;order:0;}
#placementHint {order:2;line-height:1.35;}
.fallback-plan {top:242px;}
.preview-notice {top:234px;}
.viewport:has(.preview-notice:not([hidden])) .fallback-plan {top:306px;}
.mobile-ui .builder-workspace.mobile-focus-stage .fallback-plan {top:212px;}
.mobile-ui .builder-workspace.mobile-focus-stage .preview-notice {top:208px;}
.mobile-ui .builder-workspace.mobile-focus-stage .viewport:has(.preview-notice:not([hidden])) .fallback-plan {top:282px;}
.fallback-equipment {cursor:pointer;}
.move-equipment-mode .fallback-equipment {cursor:grab;}
.equipment-front {position:absolute;background:#517994;pointer-events:none;border-radius:2px;}
.equipment-front[data-facing="0"] {bottom:1px;left:35%;width:30%;height:3px;}
.equipment-front[data-facing="1"] {right:1px;top:35%;height:30%;width:3px;}
.equipment-front[data-facing="2"] {top:1px;left:35%;width:30%;height:3px;}
.equipment-front[data-facing="3"] {left:1px;top:35%;height:30%;width:3px;}
.build-quality {border:1px solid var(--line);border-radius:12px;margin:0 0 16px;padding:0 16px;background:#f8fafc;}
.build-quality summary {min-height:48px;align-content:center;font-weight:650;font-size:.9375rem;cursor:pointer;padding:12px 0;}
.build-quality h4,.inclusion-heading {font-size:.9375rem;margin:20px 0 6px;}
.build-quality p {font-size:.875rem;line-height:1.55;color:#526174;margin:6px 0 16px;}
.build-quality .build-guide-intro {color:var(--ink);font-weight:600;}
.build-quality a {color:#075ed9;text-underline-offset:3px;}
.family-build-guide {max-width:900px;margin:28px auto 0;padding:0 20px;}
.included-package .inclusion-list {list-style:none;padding:0;}
.inclusion-list li {margin:12px 0;line-height:1.5;}
.inclusion-list strong,.inclusion-list span {display:block;}
.inclusion-list span {font-size:.875rem;color:#526174;}
.inclusion-selections {margin:0;}
.inclusion-selections>div {padding:12px 0;border-bottom:1px solid var(--line);font-size:.875rem;}
.inclusion-selections dt {display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:650;}
.inclusion-selections small {font-size:.6875rem;font-weight:500;background:#edf2f8;border-radius:4px;padding:3px 6px;white-space:nowrap;}
.inclusion-selections dd {margin:5px 0 0;color:#526174;line-height:1.5;}
.branding-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.branding-heading h3{margin:0}
.branding-heading>span{font-size:.875rem;padding:.35rem .7rem;border-radius:1rem;background:#edf3ff;color:#345476}
.branding-packet>p{font-size:1rem;line-height:1.5;color:#66717d}
.branding-upload{display:grid;gap:.6rem;position:relative;border:2px dashed #b7c8df;background:#f7faff;border-radius:1rem;padding:1.25rem;cursor:pointer;margin:1.25rem 0;min-width:0}
.branding-upload strong{font-size:1rem;color:#1b416c}
.branding-upload span{font-size:.875rem;line-height:1.5;color:#66717d}
.branding-upload input{font-size:.875rem;max-width:100%;cursor:pointer}
.branding-upload:focus-within,.branding-upload.drag-over{outline:2px solid #0866ef;outline-offset:2px;background:#edf5ff}
.branding-file-list{display:grid;gap:.75rem;margin-bottom:1.25rem}
.branding-file{display:flex;align-items:center;gap:.5rem;padding:.875rem;border:1px solid #e0e5ec;border-radius:.75rem;flex-wrap:wrap}
.branding-file>div{flex:1 1 100%;min-width:0}
.branding-file strong{display:block;font-size:.9375rem;overflow-wrap:anywhere}
.branding-file small{display:block;font-size:.875rem;margin-top:.25rem;color:#66717d}
.branding-file .button{min-height:44px;flex:1;font-size:.875rem;justify-content:center;text-decoration:none}
.branding-packet textarea{width:100%;resize:vertical;min-height:8rem;font:inherit;padding:.875rem;border:1px solid #d5dde6;border-radius:.75rem;box-sizing:border-box}
.branding-controls{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem}
.branding-controls .button{min-height:44px;flex:1 1 140px}
.branding-packet .branding-error{color:#a83132}
.branding-packet .material-note{font-size:.875rem;line-height:1.5}

.plan-key-front::before {content:"";display:inline-block;width:10px;height:3px;background:#517994;vertical-align:middle;margin-right:4px;}
.storage-shortcuts {display:flex;gap:8px;margin:12px 0;}
.storage-shortcuts .button {flex:1;min-height:44px;}
.storage-shortcuts [aria-pressed="true"] {background:#eaf2ff;border-color:#0966ec;color:#075ed9;}
.storage-size-filters {margin:0 0 16px;padding:14px;background:#f5f8fc;border:1px solid var(--line);border-radius:12px;}
.storage-size-filters[hidden] {display:none;}
.storage-size-filters p {margin:0 0 12px;font-size:.875rem;line-height:1.5;color:#526174;}
.storage-size-filters>div {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.storage-size-filters label {display:grid;gap:6px;font-size:.875rem;font-weight:600;}
.storage-size-filters select {min-width:0;width:100%;min-height:44px;font:inherit;background:white;border:1px solid var(--line);border-radius:8px;padding:8px;}
.equipment-copy .equipment-price {color:#075ed9;font-weight:650;font-size:.9375rem;margin-top:8px;}
.cabinet-estimate {margin:20px 0;padding:16px;background:#f5f8fc;border:1px solid var(--line);border-radius:12px;}
.cabinet-estimate h3 {font-size:1rem;margin:0 0 12px;}
.cabinet-estimate p {font-size:.875rem;line-height:1.5;color:#526174;}
.cabinet-estimate dl {margin:0;}
.cabinet-estimate dl>div {display:flex;justify-content:space-between;gap:16px;margin:12px 0;font-size:.875rem;line-height:1.5;}
.cabinet-estimate dd {margin:0;white-space:nowrap;font-weight:600;}
.cabinet-estimate .cabinet-subtotal {display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:12px;font-weight:650;}

.cabinet-estimate dt small {display:block;color:#526174;font-weight:400;}