/* =============================================================
   A-Z Shades — the Shade Designer
   Studio-only styles. Reuses :root tokens from styles.css.
   ============================================================= */

:root {
  --header-h: 78px;        /* slim navbar (topbar hidden) on the design page */
  --panel-w: 360px;
}

.design-page { overflow-x: hidden; }
/* No pull-to-refresh on the studio page: an over-scrolled swipe (dismissing the
   mobile sheet, orbiting past the top) would RELOAD the page and destroy the
   visitor's whole in-progress design. */
html, body { overscroll-behavior-y: none; }
/* slim the header on the studio page so the app fits the viewport */
.design-page .topbar { display: none; }

/* ---------- Studio shell (full-bleed, fits the viewport) ---------- */
.studio {
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
  grid-template-rows: auto 1fr;
  height: calc(100svh - var(--header-h));
  margin: 0;
  background: var(--bg-soft);
  border: 0;
  overflow: hidden;
  position: relative;
}

/* ---------- Toolbar ---------- */
.studio__toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 6;
}
.toolbar__group { display: flex; align-items: center; gap: 6px; }
.toolbar__products { flex-wrap: wrap; }
.toolbar__tabs { background: var(--bg-tint); padding: 4px; border-radius: 999px; }
.toolbar__actions { gap: 8px; }

/* labelled toolbar sections */
.tool-sect { display: flex; align-items: center; gap: 10px; }
.toolbar__tabs-sect { margin-inline: auto; }
.tool-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tool-tag__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .72rem; letter-spacing: 0; }
.tool-tag--plain { color: var(--muted); }
@media (max-width: 1100px) { .tool-tag { display: none; } }

/* Steps 3 and 4 live ON their buttons, so the process still reads 1-2-3-4 below
   1100px where the .tool-tag labels are hidden. */
.btn--step { gap: 8px; }
.btn__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: inherit; font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; line-height: 1; flex: none; }

.btn--sm { padding: 9px 14px; font-size: .88rem; }
.btn--teal { --btn-bg: var(--teal); --btn-fg: #fff; }
/* secondary actions are icon-only to keep the top bar slim */
.toolbar__actions #btn-reset, .toolbar__actions #btn-save { padding: 9px; }
.toolbar__actions #btn-reset .hide-sm, .toolbar__actions #btn-save .hide-sm { display: none; }

/* Segmented control (tabs + product) */
.seg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--body);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg .ico { width: 17px; height: 17px; }
.seg:hover { color: var(--teal-700); }
.seg.is-active { background: #fff; color: var(--teal-700); box-shadow: var(--shadow-sm); }

/* Product pills */
.prod {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--navy);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.prod .ico { width: 20px; height: 20px; color: var(--teal); }
.prod:hover { border-color: var(--teal); background: var(--bg-tint); }
.prod.is-active { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 8px 18px -10px rgba(31,150,201,.8); }
.prod.is-active .ico { color: #fff; }

.hide-sm { display: inline; }

/* ---------- Stage ---------- */
.studio__stage { position: relative; overflow: hidden; background: linear-gradient(180deg, #cfeafe, #eaf6ff 60%, #f2f8f4); }
.stage__canvas { position: absolute; inset: 0; z-index: 1; }

/* touch-action is owned by JS, not CSS: OrbitControls sets an INLINE
   touch-action:none in its constructor which beats any stylesheet rule, so the
   coarse-pointer pan-y override lives in design/main.js next to the touchstart
   drag guard it must stay in sync with. */
.stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* Loader */
.stage__loader {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: linear-gradient(180deg, #cfeafe, #eef6ef); z-index: 8; transition: opacity .4s ease;
  color: var(--teal-700); font-family: var(--font-head); font-weight: 600;
}
.stage__loader.is-hidden { opacity: 0; pointer-events: none; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(31,150,201,.2); border-top-color: var(--teal); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Camera presets */
.stage__cameras { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px; z-index: 5; }
.stage__cam-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }

/* north indicator — bottom-left is the one corner of the stage with nothing in
   it (chips top-right, hint bottom-centre). Never takes a pointer: it is a
   read-only cue, and the canvas underneath owns every drag. */
.compass { position: absolute; left: 14px; bottom: 14px; z-index: 5; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: var(--shadow);
  display: grid; place-items: center; pointer-events: none; backdrop-filter: blur(3px); }
.compass svg { width: 46px; height: 46px; display: block; }
.compass__rose { transform-origin: 32px 32px; transition: transform .12s linear; }
.compass__n { fill: var(--sun); }
.compass__s { fill: #9aa8b0; }
.compass__lab { font-family: var(--font-head); font-weight: 700; font-size: 11px; fill: var(--ink); }
@media (max-width: 880px) { .compass { width: 44px; height: 44px; left: 10px; bottom: 10px; } .compass svg { width: 38px; height: 38px; } }
.chip--help { min-width: 34px; padding: 0; color: var(--teal-700); }
.chip--help:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip--help .ico { width: 18px; height: 18px; }
.chip {
  min-width: 38px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color: var(--navy);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip .ico { width: 16px; height: 16px; }
.chip:hover { border-color: var(--teal); color: var(--teal-700); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Hint toast */
.stage__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; max-width: min(92%, 620px);
  padding: 9px 14px; border-radius: 999px; background: rgba(27,46,56,.8); color: #e7f3f8;
  font-size: .82rem; z-index: 5; box-shadow: var(--shadow); backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
.stage__hint .ico { width: 18px; height: 18px; color: var(--sun); flex: none; }
.stage__hint-close { background: none; border: 0; color: #9fc0d3; font-size: 1.2rem; line-height: 1; padding: 0 2px; }
.stage__hint-close:hover { color: #fff; }
.stage__hint.is-hidden { opacity: 0; pointer-events: none; }

/* Sun & shadow — now a panel section */
.sun-panel { display: grid; gap: 15px; }
.sun-select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-weight: 600; color: var(--ink); background: var(--bg-soft); }
.sun-select:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(31,150,201,.12); }
.sun-coverage { font-size: .85rem; color: var(--body); background: var(--bg-tint); border-radius: 10px; padding: 10px 12px; }
.sun-coverage b { color: var(--teal-700); }
/* suburb picker: input + "use my location" button on one row */
.sun-loc { display: flex; gap: 8px; align-items: stretch; }
.sun-loc .sun-select { flex: 1; min-width: 0; }
.sun-geo { flex: none; width: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft); color: var(--teal-700); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.sun-geo:hover, .sun-geo:focus-visible { background: #fff; border-color: var(--teal); outline: none; }

/* ---------- Location picker ---------- */
.loc-btn { gap: 8px; }
.loc-pop {
  position: absolute; left: 14px; top: 14px; z-index: 9; width: min(560px, calc(100% - 28px));
  max-height: calc(100% - 28px); overflow: auto; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.loc-pop[hidden] { display: none; }
/* author display rules beat the UA's [hidden] — restate it for hideable controls */
.ctrl[hidden] { display: none; }
.loc-pop__head { font-size: .88rem; font-weight: 600; color: var(--body); margin-bottom: 4px; }
.loc-cat { font-family: var(--font-head); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--teal-700); margin: 14px 0 8px; }
.loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.loc-card {
  display: grid; gap: 6px; padding: 6px 6px 8px; border-radius: 12px; text-align: left;
  border: 2px solid var(--line); background: #fff; font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.loc-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.loc-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,150,201,.16); }
.loc-card__pic { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #cfeafe, #eef6ef); }
.loc-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-card__lab { font-weight: 600; font-size: .82rem; color: var(--navy); padding: 0 2px; }
.linklike { background: none; border: 0; color: var(--teal-700); font: inherit; font-weight: 700; text-decoration: underline; padding: 0; }

/* ---------- AR "view in your space" modal ---------- */
.armodal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(12,22,28,.62); backdrop-filter: blur(4px); }
.armodal.is-open { display: flex; }
/* overflow:auto + a capped stage: on a landscape phone the 4:3 stage used to be
   taller than the screen inside an overflow:hidden card, cutting off the
   "View in your space" button and the hint below it. */
.armodal__card { position: relative; width: min(680px, 96vw); max-height: 88vh; max-height: 94svh; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: auto; box-shadow: var(--shadow-lg); }
.armodal__close { position: absolute; top: 10px; right: 12px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #1b2e38; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.armodal__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: min(54vh, 480px); max-height: min(58svh, 480px); min-height: 200px; flex: none; background: radial-gradient(120% 120% at 50% 30%, #f4f7f8, #e7edf0); }
.armodal__stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.armodal__poster { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; font-size: .95rem; }
.armodal__ar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--sun); color: #1b2e38; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-lg); }
.armodal__foot { padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.armodal__hint { margin: 12px 0 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.armodal__hint em { font-style: normal; color: var(--teal-700); font-weight: 700; }
.armodal__desk { color: var(--muted); }
/* AR how-to steps */
.armodal__steps { margin: 0; padding: 0; list-style: none; counter-reset: arstep; display: grid; gap: 9px; }
.armodal__steps li { position: relative; padding-left: 34px; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.armodal__steps li::before { counter-increment: arstep; content: counter(arstep); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .82rem; display: grid; place-items: center; }
.armodal__steps em { font-style: normal; color: var(--teal-700); font-weight: 700; }
/* photo + record buttons */
.armodal__actions { display: flex; gap: 10px; margin-top: 16px; }
.armodal__actions .btn { flex: 1 1 0; justify-content: center; gap: 8px; }

/* ---- "See it in your own space": the desktop hand-off lane ---- */
.armodal__card--hand { width: min(880px, 96vw); }
.arhand { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.arhand__pic { background: radial-gradient(120% 120% at 50% 30%, #f4f7f8, #e7edf0); display: grid; place-items: center; padding: 18px; }
.arhand__pic img { width: 100%; height: auto; border-radius: 12px; display: block; }
.arhand__body { padding: 26px 26px 24px; }
.arhand__body h2 { margin: 0 0 8px; font-size: 1.32rem; }
.arhand__lead { margin: 0 0 16px; font-size: .96rem; line-height: 1.5; color: var(--muted); }
.arqr { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.arqr canvas { display: block; image-rendering: pixelated; }
.arlink { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--teal-700); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }

/* ---- size it (both lanes) ---- */
.arsize { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.arsize__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .92rem; font-weight: 600; }
.arsize__head b { font-variant-numeric: tabular-nums; color: var(--teal-700); }
.arsize input[type="range"] { width: 100%; margin: 8px 0 4px; }
.arsize__note { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.arswatch { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.arswatch__dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; }
.arswatch__dot.is-on { border-color: var(--teal-700); box-shadow: 0 0 0 2px #fff inset; }
.arsize + .armodal__steps { margin-top: 18px; }

@media (max-width: 780px) {
  .armodal__card--hand { width: min(560px, 96vw); }
  .arhand { grid-template-columns: 1fr; }
  .arhand__body { padding: 18px; }
  /* Anyone seeing the hand-off lane on a phone is here because AR could not
     start — they do not need a picture of the design taking up half the screen,
     they need the controls. Dropping it removes ~250px of scroll. */
  .arhand__pic { display: none; }
}
/* The orange call-to-action wrapped to two lines across the model on a phone. */
@media (max-width: 520px) {
  .armodal__ar { left: 12px; right: 12px; transform: none; justify-content: center; }
}
/* Short viewports (an iPhone SE with Safari chrome) pushed the footer out of the
   card entirely — give the model less room rather than losing the controls. */
@media (max-height: 640px) {
  .armodal__stage { max-height: min(44svh, 300px); }
  .armodal__steps { display: none; }
}

/* ---------- Control panel ---------- */
.studio__panel { background: #fff; border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.studio__panel::-webkit-scrollbar { width: 10px; }
.studio__panel::-webkit-scrollbar-thumb { background: #d6dee4; border-radius: 8px; border: 3px solid #fff; }

/* sticky live-summary header */
.panel__summary { position: sticky; top: 0; z-index: 4; background: linear-gradient(180deg,#fff, #f7fafb); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.ps__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.ps__main { display: flex; align-items: center; gap: 11px; }
.ps__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--teal); color: #fff; }
.ps__icon .ico { width: 21px; height: 21px; }
.ps__text { flex: 1; min-width: 0; line-height: 1.25; }
.ps__text b { display: block; font-family: var(--font-head); color: var(--ink); font-size: 1rem; }
.ps__text span { font-size: .82rem; color: var(--muted); }
.ps__fabric { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink); max-width: 118px; }
.ps__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
/* long colour names ("Koonunga (Charcoal)") wrap to two compact lines instead of
   being chopped by a one-line ellipsis */
.ps__fabric span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; overflow-wrap: anywhere; }

.panel__groups { flex: 1; }

/* sticky CTA footer */
.panel__cta { position: sticky; bottom: 0; z-index: 4; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; display: grid; gap: 8px; box-shadow: 0 -6px 18px -14px rgba(27,46,56,.4); }
.btn--block { width: 100%; }
.panel__cta .btn--ghost { padding: 10px; font-size: .9rem; }

.pgroup { border-bottom: 1px solid var(--line); }
.pgroup__head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .96rem; color: var(--ink);
}
.pgroup__head .ico { width: 18px; height: 18px; color: var(--teal); flex: none; }
.pgroup__head .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.pgroup.is-collapsed .pgroup__head .chev { transform: rotate(-90deg); }
.pgroup__body { padding: 4px 18px 20px; display: grid; gap: 16px; }
.pgroup.is-collapsed .pgroup__body { display: none; }

/* Control rows */
.ctrl { display: grid; gap: 8px; }
.ctrl__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctrl__label span { font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--ink); }
.ctrl__val { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--teal-700); font-weight: 700; }
.ctrl__hint { font-size: .78rem; color: var(--muted); margin-top: -2px; }
.ctrl__hint.is-warn { color: var(--sun-700); background: #fff7ea; border: 1px solid #f3dcae; padding: 8px 10px; border-radius: 8px; }
.ctrl__hint.is-warn b { color: var(--ink); }

/* Range slider */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s ease; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; cursor: pointer; }
input[type=range]:focus-visible { box-shadow: var(--ring); }

/* Segmented (option) buttons */
.optset { display: flex; flex-wrap: wrap; gap: 6px; }
.optset button {
  flex: 1 1 auto; min-width: 56px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--body); font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.optset button .ico { width: 16px; height: 16px; }
.optset button:hover { border-color: var(--teal); color: var(--teal-700); }
.optset button.is-active { border-color: var(--teal); background: var(--bg-tint); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal); }

/* Swatch grid */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
.swatch {
  position: relative; aspect-ratio: 1; border-radius: 10px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); cursor: pointer; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--teal), 0 0 0 4px rgba(31,150,201,.25); }
.swatch.is-active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-size: .9rem; }
.swatch--light.is-active::after { color: #1a2630; text-shadow: 0 1px 2px rgba(255,255,255,.7); }
.swatch-name { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.swatch-name b { color: var(--ink); font-weight: 600; }
.range-meta { font-size: .76rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.range-meta b { color: var(--teal-700); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button { width: 38px; height: 38px; background: #fff; border: 0; color: var(--navy); font-size: 1.2rem; display: grid; place-items: center; }
.stepper button:hover { background: var(--bg-tint); color: var(--teal-700); }
.stepper span { min-width: 44px; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--ink); border-inline: 1px solid var(--line); padding: 0 6px; height: 38px; display: grid; place-items: center; }

/* Toggle */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle span { font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--ink); }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: #cbd6dd; transition: background .18s ease; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease; }
.switch input:checked + .switch__track { background: var(--teal); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

/* Corner editor list */
.corners { display: grid; gap: 9px; }
.corner-row { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
/* per-corner anchor toggle: post in the ground vs wall plate on the house */
.corner-row .mnt { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 9px; font-family: var(--font-head); font-weight: 600; font-size: .72rem; color: var(--teal-700); min-width: 44px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.corner-row .mnt:hover { border-color: var(--teal); }
.corner-row .mnt[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.corner-row .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; font-family: var(--font-head); }
.corner-row .corner-h { display: flex; align-items: center; gap: 8px; }
.corner-row .corner-h input[type=range] { width: 100%; }
.corner-row .hval { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--teal-700); font-weight: 700; min-width: 42px; text-align: right; }

/* ---------- Summary / quote drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(27,46,56,.55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; z-index: 80; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(540px, 100vw);
  background: #fff; box-shadow: var(--shadow-lg); z-index: 90; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.3rem; }
.drawer__close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--navy); }
.drawer__close:hover { background: var(--bg-tint); color: var(--teal-700); }
.drawer__close .ico { width: 20px; height: 20px; }
.drawer__body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 16px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

.summary-hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 20px; box-shadow: var(--shadow-sm); background: var(--bg-soft); }
.summary-hero img { width: 100%; display: block; }
.price-card { background: linear-gradient(135deg, var(--teal-700), var(--navy)); color: #eaf5fa; border-radius: 14px; padding: 20px 22px; margin-bottom: 22px; }
.price-card .price-label { font-size: .82rem; color: #bcd9e6; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-head); font-weight: 600; }
.price-card .price-val { font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; color: #fff; line-height: 1.1; margin-top: 4px; }
.price-card .price-note { font-size: .8rem; color: #aecdda; margin-top: 8px; }
/* live estimate controls (job type / access / custom shaping) */
.price-jobs { display: flex; gap: 6px; margin: 12px 0 10px; }
.price-job { flex: 1; min-height: 38px; padding: 4px 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #d7e9f2; font: 600 .78rem/1.2 var(--font-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.price-job.is-on { background: #fff; color: var(--navy); border-color: #fff; }
.price-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.price-row label { font-size: .78rem; color: #bcd9e6; }
.price-row .sun-select { width: 100%; }
.price-check { flex-direction: row; align-items: flex-start; gap: 8px; font-size: .8rem; color: #d7e9f2; cursor: pointer; }
.price-check input { margin-top: 2px; accent-color: var(--sun, #F7941E); }
.price-check input:disabled + span { opacity: .75; }
.price-figure { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: #fff; line-height: 1.1; margin-top: 4px; }
.price-lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
.price-lines td { font-size: .78rem; color: #bcd9e6; padding: 2px 0; border: 0; }
.price-lines td + td { text-align: right; color: #d7e9f2; white-space: nowrap; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 600; width: 42%; font-family: var(--font-head); }
.spec-table td { color: var(--ink); font-weight: 600; }
.spec-section-title { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 20px 0 6px; font-size: 1rem; }

.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Quote form (inside drawer) */
.quote-form { display: none; }
.quote-form.is-active { display: block; }
.summary-view.is-hidden { display: none; }

/* Save dialog (simple) */
.saved-list { display: grid; gap: 8px; margin-top: 8px; }
.saved-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.saved-item .si-thumb { width: 52px; height: 38px; border-radius: 6px; object-fit: cover; background: var(--bg-tint); flex: none; }
.saved-item .si-meta { flex: 1; min-width: 0; }
.saved-item .si-meta b { display: block; font-size: .9rem; color: var(--ink); }
.saved-item .si-meta span { font-size: .76rem; color: var(--muted); }
.saved-item button { border: 0; background: none; color: var(--teal-700); font-weight: 600; font-size: .82rem; cursor: pointer; }
.saved-item button.si-del { color: #c0392b; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 120; opacity: 0; transition: opacity .2s ease, transform .2s ease; font-weight: 600; font-size: .9rem; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Onboarding / walkthrough ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(27,46,56,.62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.intro.is-open { opacity: 1; visibility: visible; }
.intro__card { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 38px); transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.intro.is-open .intro__card { transform: none; }
.intro__skip { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: .85rem; }
.intro__skip:hover { color: var(--ink); }
.intro__badge { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); background: var(--bg-tint); padding: 6px 12px; border-radius: 999px; }
.intro__card h2 { margin: 14px 0 18px; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem); }
.intro__steps { display: grid; gap: 14px; margin-bottom: 20px; }
.intro__steps li { display: flex; gap: 14px; align-items: flex-start; }
.intro__num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(31,150,201,.8); }
.intro__steps b { font-family: var(--font-head); color: var(--ink); display: block; margin-bottom: 2px; }
.intro__steps p { font-size: .94rem; color: var(--body); }
.intro__hint { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-tint); color: var(--teal-700); font-weight: 600; font-size: .9rem; margin-bottom: 20px; }
.intro__hint svg { width: 20px; height: 20px; flex: none; }
.intro__go { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  :root { --panel-w: 330px; }
}
@media (max-width: 880px) {
  .studio {
    grid-template-columns: 1fr;
    /* Lock the app to the viewport (like desktop) instead of letting the page
       grow. The 3D stage stays FIXED and visible while the control panel scrolls
       on its own underneath — so you watch each edit happen as you make it,
       and a swipe on the controls scrolls the controls (not the whole page).
       (vh line first = fallback for browsers without svh.) */
    grid-template-rows: auto 40vh minmax(0, 1fr);
    grid-template-rows: auto 40svh minmax(0, 1fr);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
  }
  .studio__stage { min-height: 0; }
  /* min-height:0 lets the 1fr row shrink below its content so the panel becomes
     a real scroll container (summary pinned on top, quote CTA pinned at bottom,
     option groups scroll between). Without it the row grows to fit everything
     and the panel can't scroll — the old "can't scroll in the menu" trap. */
  .studio__panel { border-left: 0; border-top: 1px solid var(--line); min-height: 0; }

  /* Compact toolbar so it doesn't eat the panel's room:
     row 1 = the three product pills, equal width;
     row 2 = the location button (grows) + icon-only actions. */
  .studio__toolbar { row-gap: 8px; padding: 8px 10px; }
  .tool-sect:not(.toolbar__tabs-sect) { order: 1; width: 100%; }
  .toolbar__products { display: flex; width: 100%; gap: 8px; }
  .toolbar__products .prod { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 4px; gap: 5px; font-size: .8rem; }
  .toolbar__products .prod .ico { width: 16px; height: 16px; }
  .toolbar__products .prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar__tabs-sect { order: 2; flex: 1 1 130px; width: auto; margin-inline: 0; }
  .toolbar__tabs-sect .loc-btn { width: 100%; }
  .toolbar__actions { order: 3; margin-left: 0; gap: 6px; }
  .hide-sm { display: none; }                 /* Reset / Save / AR become icons */
  #btn-summary span { display: none; }         /* toolbar estimate → icon; the panel's "Get my estimate" is the main CTA */
  #btn-summary { padding: 9px 11px; }
  .stage__hint { font-size: .76rem; }
}

/* Landscape phones: a phone on its side is too SHORT to stack a 3D stage on top
   of a usable control panel — 40svh of stage + the toolbar would starve the
   panel to a sliver and clip the "Get my estimate" CTA. There's plenty of
   WIDTH though, so lay it out like the desktop: model on the left, the full-
   height scrollable controls on the right. (Tablets are >880px so they keep the
   desktop layout; this only catches phones held sideways.) */
@media (max-width: 880px) and (orientation: landscape) {
  .studio {
    grid-template-columns: 1fr minmax(250px, 42%);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .studio__toolbar { grid-column: 1 / -1; grid-row: 1; }
  .studio__stage { grid-column: 1; grid-row: 2; min-height: 0; }
  .studio__panel { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid var(--line); min-height: 0; }
  /* with the extra width the pills pack at natural size on one short row,
     leaving more height for the stage + panel */
  .tool-sect:not(.toolbar__tabs-sect) { width: auto; }
  .toolbar__products { width: auto; }
  .toolbar__products .prod { flex: 0 0 auto; font-size: .82rem; }
  .toolbar__tabs-sect { flex: 0 1 auto; }
  /* A sideways phone is very short: don't spend ~110px pinning the design
     summary at the top of an already-tiny panel — let it scroll away so the
     option groups get real room (the quote CTA stays pinned at the bottom). */
  .panel__summary { position: static; }
  /* the panel can bottom out at 250px here — keep the fabric chip at the old
     cap so the title/summary column doesn't get starved (names still wrap) */
  .ps__fabric { max-width: 96px; }
}

/* ---------- phone PORTRAIT: full-screen 3D + bottom-sheet controls ----------
   The model owns the whole screen. A slim tab bar (Shape · Fabric · Posts ·
   Space · Sun · Quote) sits along the bottom; tapping a tab slides the panel
   up as a half-height sheet showing just that section, model still visible
   above it. Built/wired by design/ui/mobilesheet.js — these rules only apply
   the geometry, so desktop and landscape never see any of it. */
.msheet-bar, .msheet-scrim, .msheet-grip { display: none; }
/* Bottom-sheet layout is gated by the .is-sheet class that design/ui/mobilesheet.js
   sets from the SAME matchMedia that builds the tab bar — NOT a bare CSS
   @media(orientation) query. That guarantees the panel positioning and the bar
   can never disagree (iOS Safari has been seen to evaluate the two paths out of
   step, leaving the old in-flow panel AND the new tab bar on screen at once). */
.studio.is-sheet {
  grid-template-rows: auto minmax(0, 1fr) auto; /* toolbar · stage · tab bar */
}
.is-sheet .studio__stage { grid-row: 2; }

.is-sheet .msheet-bar {
  grid-row: 3;
  display: flex;
  gap: 2px;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
}
.is-sheet .msheet-tab {
  flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; gap: 3px;
  background: none; border: 0; border-radius: 10px;
  padding: 5px 2px;
  font-family: var(--font-head); font-weight: 600; font-size: .68rem;
  color: var(--muted); cursor: pointer;
}
.is-sheet .msheet-tab svg { width: 20px; height: 20px; }
.is-sheet .msheet-tab.is-active { color: var(--teal-700); background: var(--bg-tint); }
.is-sheet .msheet-tab--quote { background: var(--sun); color: #1b2e38; font-weight: 700; }

.is-sheet .msheet-scrim {
  display: block; position: absolute; inset: 0; z-index: 25;
  background: rgba(12, 20, 26, .35);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  touch-action: none; /* a downward drag here must never chain into pull-to-refresh */
}
.is-sheet.sheet-open .msheet-scrim { opacity: 1; pointer-events: auto; }

/* the panel IS the sheet: absolute over the stage, slid away until summoned */
.is-sheet .studio__panel {
  position: absolute; left: 0; right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px)); /* rests on the tab bar */
  top: auto;
  height: min(46vh, 400px);   /* vh fallback first — some iOS builds drop svh */
  height: min(46svh, 400px);
  z-index: 30;
  border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 44px -26px rgba(20, 32, 42, .55);
  transform: translateY(115%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.is-sheet.sheet-open .studio__panel { transform: translateY(0); }
/* Watch every edit happen LIVE: the model normally sits in the middle of the
   full stage, which the open sheet covers. Slide the rendered view up by half
   the sheet height so the model re-centres in the strip that stays visible
   above the sheet. (Pointer math is unaffected — hit-testing follows the
   transformed rect.) */
.is-sheet .stage__canvas { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.is-sheet.sheet-open .stage__canvas {
  transform: translateY(calc(min(46vh, 400px) / -2));   /* vh fallback first */
  transform: translateY(calc(min(46svh, 400px) / -2));
}
/* the sheet shows ONE section at a time — the live summary and the big CTA
   are redundant in it (the header strip and the Quote tab carry those) */
.is-sheet .studio__panel .panel__summary, .is-sheet .studio__panel .panel__cta { display: none; }
/* the TAB BAR is the section selector — the groups' own accordion heads are
   redundant here, and tapping one would collapse the only open section into
   an empty sheet. Hide heads and collapsed groups entirely. */
.is-sheet .studio__panel .pgroup__head { display: none; }
.is-sheet .studio__panel .pgroup.is-collapsed { display: none; }

.is-sheet .msheet-grip {
  display: block; position: sticky; top: 0; z-index: 5;
  padding: 8px 0 6px; background: #fff; touch-action: none; cursor: grab;
}
.is-sheet .msheet-grip i { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: #d6dee4; }

@media (max-width: 520px) {
  .seg span { display: none; }
  .seg { padding: 9px 11px; }
  /* the Location button's label IS its state — keep it visible */
  .seg.loc-btn span { display: inline; }
  /* 8 chips no longer fit one row on a phone — wrap, keeping right alignment */
  .stage__cameras { left: 14px; flex-wrap: wrap; justify-content: flex-end; }
  /* keep the toolbar as short as possible — it competes with the 3D stage for
     the first screen */
  .studio__toolbar { gap: 8px 10px; padding: 8px 10px; }
  .prod { padding: 8px 11px; }
  .btn--sm { padding: 8px 11px; }
  .armodal { padding: 10px; }
}