/* LATVERA lux studio chrome (B16, lane D): #studio/<id>, function preserved (design-studio.js untouched).
 * Scoped to #designStudio.ds-dialog (GRAMMAR §0). Dark chrome in the Reserve-panel grammar around the configurator: the
 * ground, a framed scene card (its light stage stays, OD-11), the panel at --lux-panel, labels ≥ 13 px, no shadows, and the
 * footer as the black stadium bar with the pill (ref:journey/extra/desktop/04-reserve-header/02-settled.jpg; R3 §2.2). */

#designStudio.ds-dialog { background:var(--lux-ground); color-scheme:dark; }
#designStudio.ds-dialog::backdrop { background:var(--lux-ground); }
#designStudio.ds-dialog :is(button, a, input, summary):focus-visible {
  outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground);
}
#designStudio.ds-dialog :is(#ds-title, [data-ds-step-title]):focus-visible { outline:none; box-shadow:none; }
/* On the light stage the ring is ink, with a cream halo. */
#designStudio.ds-dialog .ds-scene :is(button, a, input, summary):focus-visible { outline-color:var(--ink); box-shadow:0 0 0 5px var(--cream); }

/* ── Header: the wordmark, the title and Close in the small role on the ground ───────────────────────────────────── */
#designStudio.ds-dialog .ds-header { height:64px; padding:0 var(--lux-edge); background:var(--lux-ground); color:var(--lux-cream); }
#designStudio.ds-dialog .ds-header h1 { font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-cream); }
#designStudio.ds-dialog .ds-header > button {
  gap:12px; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-cream);
}
#designStudio.ds-dialog .ds-header > button span { font-size:19px; font-weight:400; }

/* ── Workspace: the scene as a card in the 8 px frame, the panel beside it at the frame radius ───────────────────── */
#designStudio.ds-dialog .ds-workspace {
  grid-template-columns:minmax(0, 1fr) clamp(340px, 28vw, 440px); gap:8px; height:calc(100% - 64px); padding:0 8px 8px;
}
#designStudio.ds-dialog .ds-scene { border-radius:var(--radius); background:#e8e7e1; isolation:isolate; }
#designStudio.ds-dialog .ds-scene-heading { top:calc(50 * var(--lux-unit)); left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); }
#designStudio.ds-dialog .ds-scene-heading h2 {
  margin:0 0 14px; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400; color:var(--ink);
}
#designStudio.ds-dialog[data-scene-light="dusk"] .ds-scene-heading h2 { color:var(--cream); }
#designStudio.ds-dialog .ds-scene-heading p { margin:0; font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-scene-heading a {
  display:inline-flex; align-items:center; gap:.35em; min-height:44px; padding:0; border-bottom:0; margin-top:0;
  font-size:var(--lux-fs-small); letter-spacing:-.015em; position:relative;
}
#designStudio.ds-dialog .ds-scene-heading a::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
}
#designStudio.ds-dialog .ds-scene-heading a span { margin-left:0; }
#designStudio.ds-dialog .ds-loading { font-size:var(--lux-fs-small); color:#5f5a53; }
#designStudio.ds-dialog .ds-fallback p { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-scene-tools { left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); bottom:calc(50 * var(--lux-unit) + 20px); }
#designStudio.ds-dialog .ds-orbit-hint { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-tool-menus summary { min-width:140px; font-size:var(--lux-fs-small); letter-spacing:-.015em; }
/* The two stage menus float on the light stage without a shadow: a hairline frame and the nested radius. */
#designStudio.ds-dialog :is(.ds-camera-bar, .ds-scene-settings) {
  box-shadow:none; border:1px solid rgba(42,39,36,.18); border-radius:var(--lux-r-nested);
}
#designStudio.ds-dialog :is(.ds-camera-bar, .ds-scene-settings) button { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-scene-settings p { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-scene-caption {
  left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); bottom:calc(50 * var(--lux-unit) - 22px);
  font-size:var(--lux-fs-small); letter-spacing:-.015em; opacity:1; color:#5f5a53;
}
#designStudio.ds-dialog[data-scene-light="dusk"] .ds-scene-caption { color:var(--cream); }

/* ── Panel (the Reserve panel: --lux-panel, frame radius, 40su padding) ──────────────────────────────────────────── */
#designStudio.ds-dialog .ds-panel {
  --ds-paper:var(--lux-panel);
  border-radius:var(--radius); background:var(--lux-panel); padding-top:calc(24 * var(--lux-unit));
}
#designStudio.ds-dialog .ds-panel-top { align-items:center; padding:0 calc(40 * var(--lux-unit)); min-height:44px; }
#designStudio.ds-dialog .ds-panel-top p,
#designStudio.ds-dialog .ds-panel-top button { display:flex; align-items:center; font-size:var(--lux-fs-small); letter-spacing:-.015em; min-height:44px; }
#designStudio.ds-dialog .ds-step-menu { margin:0 calc(40 * var(--lux-unit)); }
#designStudio.ds-dialog .ds-step-menu > summary { min-height:48px; font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-step-menu > summary [data-ds-progress] { font-size:var(--lux-fs-small); color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-steps {
  box-shadow:none; border:1px solid var(--lux-hair); border-radius:var(--lux-r-nested); background:var(--lux-panel);
}
#designStudio.ds-dialog .ds-steps button { min-height:44px; padding-left:44px; font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-steps button::before { top:50%; translate:0 -50%; font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-steps [aria-current="step"]::after { top:50%; translate:0 -50%; }
#designStudio.ds-dialog .ds-panel-scroll { padding:calc(40 * var(--lux-unit)) calc(40 * var(--lux-unit)) calc(20 * var(--lux-unit)); }
#designStudio.ds-dialog .ds-panel-title { margin:0 0 calc(24 * var(--lux-unit)); }
#designStudio.ds-dialog .ds-panel-title h2 {
  max-width:14ch; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-cream);
}
#designStudio.ds-dialog .ds-lead,
#designStudio.ds-dialog .ds-note,
#designStudio.ds-dialog .ds-disclosure,
#designStudio.ds-dialog .ds-status,
#designStudio.ds-dialog .ds-subheading { font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-subheading { color:var(--lux-taupe); }
/* Systems list: names at the sub role, taupe at rest, cream when chosen; the numbers and the dot at the small role. */
#designStudio.ds-dialog .ds-products button { min-height:56px; padding:10px 0 10px 40px; }
#designStudio.ds-dialog .ds-products button::before { top:50%; translate:0 -50%; font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-products button:has(small)::before { top:22px; translate:0 0; }
#designStudio.ds-dialog .ds-products strong { font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; transform:none; }
#designStudio.ds-dialog .ds-products [aria-pressed="false"] strong { color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-products small { font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-products i { font-size:var(--lux-fs-small); color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-products [aria-pressed="true"] i { font-size:var(--lux-fs-small); color:var(--lux-cream); }
/* Choices: nested radius, taupe → cream when selected; no uppercase anywhere. */
#designStudio.ds-dialog .ds-option { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-option[aria-pressed="false"] { color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-option[aria-pressed="true"] { color:var(--lux-cream); }
#designStudio.ds-dialog .ds-option strong { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-option small { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-option i { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-option > svg { border-radius:var(--lux-r-nested); }
#designStudio.ds-dialog .ds-swatches .ds-option strong { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-surface { border-radius:var(--lux-r-nested); }
#designStudio.ds-dialog .ds-swatch { box-shadow:none; border:1px solid var(--lux-hair); }
#designStudio.ds-dialog .ds-dimensions label { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-dimensions label > div > span { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-dimensions input { font-size:var(--lux-fs-sub); letter-spacing:-.006em; border-bottom-color:var(--lux-taupe); }
#designStudio.ds-dialog .ds-check { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-check small { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-roof-control { font-size:var(--lux-fs-small); }
#designStudio.ds-dialog .ds-roof-control output { font-size:var(--lux-fs-sub); letter-spacing:-.006em; }
#designStudio.ds-dialog .ds-roof-presets button,
#designStudio.ds-dialog .ds-inline-action,
#designStudio.ds-dialog .ds-light-scenes button { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-side-grid button { font-size:var(--lux-fs-small); letter-spacing:-.015em; text-transform:none; }
#designStudio.ds-dialog .ds-review dt,
#designStudio.ds-dialog .ds-review dd { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
#designStudio.ds-dialog :is(.ds-downloads button, .ds-catalog-source) { font-size:var(--lux-fs-small) !important; letter-spacing:-.015em; }
#designStudio.ds-dialog .ds-roof-diagram.is-fabric { border-radius:var(--lux-r-nested); overflow:hidden; }

/* ── Footer: the black stadium bar — the selection at the left, back and the pill "Continue" at the right ───────── */
#designStudio.ds-dialog .ds-panel-footer {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:0 12px;
  margin:0 calc(20 * var(--lux-unit)) calc(20 * var(--lux-unit)); padding:0; background:none; position:relative;
}
#designStudio.ds-dialog .ds-panel-footer::before {
  content:""; grid-area:1 / 1 / 2 / 3; align-self:stretch; border-radius:999px; background:var(--lux-ground);
}
#designStudio.ds-dialog .ds-panel-footer > p:first-child {
  grid-area:1 / 1; position:relative; min-width:0; margin:0; padding:0 0 0 calc(30 * var(--lux-unit));
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#designStudio.ds-dialog .ds-panel-footer > div {
  grid-area:1 / 2; position:relative; display:flex; align-items:center; gap:8px; min-height:72px; padding:12px; border:0;
}
#designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-back] {
  --lux-focus-r:50%;
  display:grid; place-items:center; width:44px; height:44px; min-height:0; border:1px solid var(--lux-chip-dim); border-radius:50%;
  color:var(--lux-cream); font-size:19px; text-align:center;
}
#designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-back]:focus-visible { border-radius:50%; }
#designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-next] {
  flex:none; display:inline-flex; align-items:center; gap:12px; height:48px; min-height:0; padding:12px 18px; border-radius:999px;
  background:var(--lux-cream); color:var(--ink); font-size:var(--lux-fs-pill); line-height:1.25; letter-spacing:0; white-space:nowrap;
  transition:background-color .2s var(--ease);
}
#designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-next]:focus-visible { border-radius:999px; }
#designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-next] > span:last-child { font-size:19px; line-height:1; }
#designStudio.ds-dialog .ds-review-shortcut {
  grid-column:1 / -1; justify-self:start; min-height:44px; margin:8px 0 0 calc(30 * var(--lux-unit)); padding:0;
  font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#designStudio.ds-dialog .ds-status { grid-column:1 / -1; margin:4px 0 0 calc(30 * var(--lux-unit)); color:var(--lux-taupe); }

@media (hover:hover) and (pointer:fine) {
  #designStudio.ds-dialog .ds-panel-footer > div > button[data-ds-next]:hover { background:var(--lux-pill-hover); }
  #designStudio.ds-dialog .ds-products button:hover strong { color:var(--lux-cream); transform:none; }
  #designStudio.ds-dialog .ds-option:hover { color:var(--lux-cream); }
}

/* ── Phone (≤ 700): the stage over the panel, both framed; the bar keeps its buttons ─────────────────────────────── */
@media (max-width:700px) {
  #designStudio.ds-dialog .ds-header { height:56px; padding:0 var(--lux-edge); }
  #designStudio.ds-dialog .ds-header h1 { font-size:var(--lux-fs-small); }
  #designStudio.ds-dialog .ds-header > button { width:auto; gap:10px; font-size:var(--lux-fs-small); }
  #designStudio.ds-dialog .ds-header > button span { font-size:19px; }
  #designStudio.ds-dialog .ds-workspace { height:calc(100% - 56px); grid-template-columns:minmax(0, 1fr); grid-template-rows:44% 56%; }
  #designStudio.ds-dialog .ds-scene-heading { top:16px; left:16px; right:16px; }
  #designStudio.ds-dialog .ds-scene-heading h2 { font-size:var(--lux-fs-name); margin-bottom:8px; }
  #designStudio.ds-dialog .ds-scene-heading p,
  #designStudio.ds-dialog .ds-scene-heading a { font-size:var(--lux-fs-small); }
  #designStudio.ds-dialog .ds-scene-tools { left:16px; right:16px; bottom:10px; }
  #designStudio.ds-dialog .ds-orbit-hint,
  #designStudio.ds-dialog .ds-tool-menus summary { font-size:var(--lux-fs-small); }
  #designStudio.ds-dialog .ds-tool-menus summary { min-width:104px; min-height:44px; }
  #designStudio.ds-dialog .ds-panel { padding-top:6px; }
  #designStudio.ds-dialog .ds-panel-top { padding:0 20px; }
  #designStudio.ds-dialog .ds-panel-top p,
  #designStudio.ds-dialog .ds-panel-top button,
  #designStudio.ds-dialog .ds-step-menu > summary,
  #designStudio.ds-dialog .ds-step-menu > summary [data-ds-progress],
  #designStudio.ds-dialog .ds-steps button,
  #designStudio.ds-dialog .ds-lead,
  #designStudio.ds-dialog .ds-products small,
  #designStudio.ds-dialog .ds-option,
  #designStudio.ds-dialog .ds-option strong,
  #designStudio.ds-dialog .ds-option small,
  #designStudio.ds-dialog .ds-note,
  #designStudio.ds-dialog .ds-subheading,
  #designStudio.ds-dialog .ds-swatches .ds-option strong,
  #designStudio.ds-dialog .ds-review-shortcut { font-size:var(--lux-fs-small); }
  #designStudio.ds-dialog .ds-step-menu { margin:0 20px; }
  #designStudio.ds-dialog .ds-panel-scroll { padding:20px 20px 12px; }
  #designStudio.ds-dialog .ds-panel-title { margin-bottom:16px; }
  #designStudio.ds-dialog .ds-panel-title h2 { font-size:var(--lux-fs-lead); }
  #designStudio.ds-dialog .ds-products strong { font-size:var(--lux-fs-sub); }
  #designStudio.ds-dialog .ds-panel-footer { margin:0 8px 8px; }
  #designStudio.ds-dialog .ds-panel-footer > div { min-height:60px; padding:8px; }
  #designStudio.ds-dialog .ds-review-shortcut { margin:4px 0 0 20px; }
}
@media (max-width:370px) {
  #designStudio.ds-dialog .ds-header, #designStudio.ds-dialog .ds-panel-top, #designStudio.ds-dialog .ds-panel-scroll { padding-left:16px; padding-right:16px; }
  #designStudio.ds-dialog .ds-scene-heading h2 { font-size:var(--lux-fs-name); }
}