/* ---------------------------------------------------------------------------
   Shed Builder UI
   White chrome around a neutral grey studio stage. One green accent. Geist.
   Palette sampled from the Sensei Sheds 3D Designer screenshots in
   inspiration-3d copy/: #52aa54 green, #eff8f1 green tint, #1a1c1e ink,
   #727a71 muted, #e6e7eb hairlines, stage #ebebeb → #dcdcdc.
   Effects budget: hairlines, one shadow token, blur only on the four small
   stage overlays, 150ms transitions. Nothing on the page animates on its own.
   --------------------------------------------------------------------------- */
:root {
  --bg-0: #ffffff;
  /* topbar */
  --bg-1: #ffffff;
  /* panel */
  --bg-2: #ffffff;
  /* cards, inputs */
  --bg-3: #f3f5f3;
  /* hover */
  --bg-4: #e7ebe7;
  /* pressed / selected surface */
  --line: #e6e7eb;
  --line-2: #d4dad3;
  --line-3: #c1c9bf;
  --fg: #1a1c1e;
  --fg-2: #424942;
  --fg-3: #727a71;
  --fg-4: #9ea3ae;
  --accent: #f7931a;
  /* darker orange: hover on filled buttons, and any small accent text.
     4.64:1 on white -- deliberately matched to the previous green's 4.64:1,
     because #f7931a itself is only 2.30:1 and must never carry small text. */
  --accent-2: #ad6200;
  --accent-dim: #fdf3e7;
  /* border for accent-tinted blocks */
  --accent-line: #f8d5aa;
  /* soft ring: completed steps, tinted grid lines */
  --accent-ring: #f6be79;
  --on-accent: #ffffff;
  --danger: #d9534f;
  --glass: rgba(255, 255, 255, 0.92);
  --glass-line: #d4dad3;
  --stage-0: #f5f5f5;
  --stage-1: #ebebeb;
  --stage-2: #dcdcdc;
  --stage-ink: #1a1c1e;
  --stage-ink-2: #727a71;
  --panel-w: 392px;
  --topbar-h: 56px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(26, 28, 30, 0.06), 0 8px 24px rgba(26, 28, 30, 0.10);
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 150ms var(--ease);
}

/* WALK-08 (D-04): blue and orange accent variants for Edwin to choose
   between, selectable only via ?theme=blue / ?theme=orange (index.html's
   inline reader sets data-theme before this stylesheet's first paint).
   Only the five accent tokens change; --on-accent and every other token
   stay shared, so contrast is unaffected. No other selector in this file
   needs editing -- every rule already reads color through these custom
   properties. The default accent is Bitcoin orange (#f7931a); ?theme=green
   restores the original green, ?theme=blue and ?theme=orange are unchanged. */
:root[data-theme="green"] {
  --accent: #52aa54;
  --accent-2: #35843a;
  --accent-dim: #eff8f1;
  --accent-line: #c8e7ce;
  --accent-ring: #a8d4a9;
}

:root[data-theme="blue"] {
  --accent: #3b6fd6;
  --accent-2: #28509e;
  --accent-dim: #eaf1fc;
  --accent-line: #c7dbf5;
  --accent-ring: #9cc0ee;
}

:root[data-theme="orange"] {
  --accent: #e0812f;
  --accent-2: #b8631c;
  --accent-dim: #fdf0e2;
  --accent-line: #f3d6ae;
  --accent-ring: #eab97a;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.45;
  color-scheme: light;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-dim);
  color: var(--fg);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 11px;
  margin: 26px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

h4 {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

h4 small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11px;
}

p {
  margin: 0 0 10px;
}

.muted {
  color: var(--fg-3);
}

.fine {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.5;
}

.num,
.price-value,
.style-from,
.chip,
.spec-mini dd,
.insp-val,
table.price td:last-child,
.fx-row em,
.add-card span,
.caption span,
.dim-label,
.quote-summary span {
  font-family: var(--mono);
  font-feature-settings: 'tnum', 'zero';
  font-variant-numeric: tabular-nums;
}

/* Thin, quiet scrollbars */
.panel-body {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.panel-body::-webkit-scrollbar {
  width: 8px;
}

.panel-body::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
  border: 2px solid var(--bg-1);
}

.panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand svg {
  width: 30px;
  height: 30px;
  fill: var(--accent);
  flex: none;
}

.brand svg .door {
  fill: var(--bg-0);
}

.brand-logo {
  height: 48px;
  width: auto;
  flex: none;
  display: block;
}

.brand>div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand b {
  display: block;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--fg-2, var(--fg-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dealer-select {
  display: block;
  width: auto;
  max-width: 280px;
  margin: 1px 0 0 -6px;
  padding: 2px 22px 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23727a71' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center / 9px 6px;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--t), border-color var(--t);
}

.dealer-select:hover {
  background-color: var(--bg-3);
  border-color: var(--line);
}

.dealer-select option {
  color: var(--fg);
  background: var(--bg-2);
  font-weight: 500;
  font-size: 13px;
}

.topbar-title {
  display: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.topbar-right .sep {
  width: 1px;
  height: 22px;
  background: var(--line-2);
  margin: 0 6px;
}

.price-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 8px 0 2px;
  line-height: 1.05;
}

.price-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.price-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--accent-2);
  margin-top: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg);
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
  white-space: nowrap;
}

.btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover {
  background: var(--bg-3);
  border-color: var(--line-3);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}

.btn.ghost:hover {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line);
}

/* 04-UI-SPEC Surface 1: the summary step's "Review & sign your deposit
   agreement" action -- not .btn.primary (Save changes already claims the
   one accent-filled anchor on this step), reads as clearly actionable
   without competing. */
.btn.accent-outline {
  background: transparent;
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.btn.accent-outline:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.btn.danger {
  border-color: rgba(217, 83, 79, 0.4);
  color: var(--danger);
  background: transparent;
}

.btn.danger:hover {
  background: rgba(217, 83, 79, 0.08);
}

.btn.small {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 7px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--fg-2);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line);
}

.icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Layout -------------------------------------------------------------- */
.main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.panel {
  width: var(--panel-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  min-height: 0;
  position: relative;
  z-index: 2;
}

.steps {
  display: flex;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}

.step {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 9px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fg-3);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--t), background-color var(--t);
}

.step:hover {
  color: var(--fg-2);
  background: var(--bg-3);
}

.step-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--fg-2);
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.step:has(~ .step.active) .step-num {
  background: var(--accent-dim);
  border-color: var(--accent-ring);
  color: var(--accent-2);
}

.step.active {
  color: var(--fg);
  background: var(--accent-dim);
}

.step.active .step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px 32px;
}

.panel-body>* {
  animation: panel-in 220ms var(--ease);
}

.panel-body.same>* {
  animation: none;
}

@keyframes panel-in {
  from {
    transform: translateY(6px);
  }

  to {
    transform: none;
  }
}

.panel-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

.panel-foot .btn.primary {
  min-width: 120px;
}

.step-head {
  margin-bottom: 20px;
}

.step-head p {
  color: var(--fg-3);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.step-head b {
  color: var(--fg);
  font-weight: 600;
}

/* ---- Style cards ---------------------------------------------------------- */
.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.style-card {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 8px 8px 11px;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
  position: relative;
  overflow: hidden;
}

.style-card:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
}

.style-card.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-dim);
}

.style-card.selected::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.style-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  padding: 6px;
  background: radial-gradient(ellipse at 50% 60%, #f7f7f7 0%, #e9e9e9 62%, #dedede 100%);
}

.style-name {
  font-weight: 600;
  font-size: 13.5px;
  margin: 10px 2px 0;
  letter-spacing: -0.01em;
}

.style-blurb {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.4;
  margin: 3px 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.style-from {
  font-size: 11.5px;
  color: var(--accent-2);
  margin: 8px 2px 0;
}

/* ---- Fields & chips --------------------------------------------------------- */
.field {
  margin-bottom: 18px;
}

.field>label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  min-width: 50px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.chip:hover {
  border-color: var(--line-3);
  color: var(--fg);
  background: var(--bg-3);
}

.chip.selected {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* WR-02 (06.1-REVIEW.md): a resumed design pinned to an archived width still
   renders a "(no longer offered)" chip so the current selection stays
   visible -- muted/not-allowed instead of the plain hover-interactive look,
   since tapping it is a no-op (disabled), not a real re-pick. */
.chip.selected[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
.chip.selected[disabled]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.spec-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
}

.spec-mini div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.spec-mini div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.spec-mini div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.spec-mini dt {
  color: var(--fg-3);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.spec-mini dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg);
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-3);
  padding: 3px;
  gap: 2px;
}

.seg button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-2);
  border-radius: 6px;
  transition: background-color var(--t), color var(--t);
}

.seg button:hover {
  color: var(--fg);
}

.seg button.on {
  background: var(--accent);
  color: var(--on-accent);
}

.seg button small {
  font-weight: 500;
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 4px;
}

.seg button.on small {
  color: rgba(255, 255, 255, 0.85);
}

.seg.small button {
  padding: 5px 10px;
  font-size: 12px;
}

/* ---- Swatches ------------------------------------------------------------- */
.color-group {
  padding: 18px 0 8px;
  border-top: 1px solid var(--line);
}

.color-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.color-group h3 {
  margin-top: 0;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px 4px;
}

.swatch {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.swatch i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--bg-1), 0 0 0 3px transparent;
  transition: transform var(--t), box-shadow var(--t);
}

.swatch i em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.85;
}

.swatch:hover i {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--bg-1), 0 0 0 3px var(--line-3);
}

.swatch span {
  font-size: 10px;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.15;
  max-width: 60px;
  transition: color var(--t);
}

.swatch.selected i {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--bg-1), 0 0 0 3.5px var(--accent);
}

.swatch.selected span {
  color: var(--fg);
  font-weight: 500;
}

/* ---- Openings ---------------------------------------------------------------- */
.plan {
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 10px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 14px 14px;
}

.plan-svg {
  width: 100%;
  height: 190px;
  display: block;
}

.plan-body {
  fill: rgba(0, 0, 0, 0.03);
  stroke: var(--fg);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.plan-porch {
  fill: rgba(82, 170, 84, 0.18);
  stroke: none;
}

.plan-wall {
  stroke: transparent;
  stroke-width: 18;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--t);
}

.plan-wall.active {
  stroke: rgba(82, 170, 84, 0.3);
}

.plan-wall:hover {
  stroke: rgba(0, 0, 0, 0.08);
}

.plan-label {
  font-size: 10px;
  font-family: var(--font);
  fill: var(--fg-3);
  pointer-events: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-fx {
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  cursor: pointer;
}

.plan-fx.door {
  stroke: var(--fg);
}

.plan-fx.window {
  stroke: #3b8fe0;
}

.plan-fx.selected {
  stroke: var(--accent);
}

.plan-loft {
  fill: rgba(82, 170, 84, 0.10);
  stroke: rgba(82, 170, 84, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.plan-item {
  fill: rgba(0, 0, 0, 0.06);
  stroke: var(--fg-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill var(--t);
}

.plan-item.bench {
  fill: rgba(181, 142, 83, 0.55);
}

.plan-item.shelf {
  fill: rgba(111, 182, 255, 0.28);
}

.plan-item.wall {
  fill: var(--fg-2);
}

.plan-item:hover {
  fill: rgba(0, 0, 0, 0.14);
}

.plan-item.selected {
  stroke: var(--accent);
  stroke-width: 2;
  fill: rgba(82, 170, 84, 0.35);
}

.fx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fx-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}

.fx-row:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
}

.fx-row.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.fx-row img {
  width: 54px;
  height: 42px;
  object-fit: contain;
  background: radial-gradient(ellipse at 50% 60%, #f7f7f7, #e2e2e2);
  border-radius: 6px;
}

.fx-row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.fx-row span {
  font-size: 11.5px;
  color: var(--fg-3);
}

.fx-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--fg-2);
}

.fx-list .empty {
  color: var(--fg-3);
  font-size: 13px;
  padding: 10px 2px;
}

.add-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.add-card {
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 10px;
  padding: 6px 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color var(--t), background-color var(--t);
}

.add-card:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
}

.add-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: radial-gradient(ellipse at 50% 60%, #f7f7f7, #e2e2e2);
  border-radius: 6px;
}

.add-card b {
  font-size: 11.5px;
  text-align: center;
  line-height: 1.25;
  font-weight: 500;
}

.add-card span {
  font-size: 11px;
  color: var(--accent-2);
}

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

.loft-grid label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

select,
input[type=text],
input[type=email],
input[type=tel],
input:not([type]),
textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg);
  width: 100%;
  transition: border-color var(--t), background-color var(--t);
}

select:hover,
input:hover,
textarea:hover {
  border-color: var(--line-3);
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23727a71' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 9px 6px;
}

.loft-grid select {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
}

input[type=checkbox] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

/* ---- Interior ---------------------------------------------------------------- */
.int-group {
  padding: 18px 0 8px;
  border-top: 1px solid var(--line);
}

.int-group h3 {
  margin-top: 0;
}

.int-group h4 {
  margin: 16px 0 8px;
}

.muted.small {
  font-size: 12px;
  line-height: 1.5;
  margin: -6px 0 12px;
}

.muted.small b {
  color: var(--fg);
  font-weight: 600;
}

.field>label small {
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-2);
  font-weight: 500;
  margin-left: 6px;
}

.floor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.floor-card {
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 10px;
  padding: 6px 6px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  transition: border-color var(--t), background-color var(--t);
}

.floor-card:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
}

.floor-card.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.floor-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 3px;
}

.floor-card b {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}

.floor-card span {
  font-size: 10.5px;
  color: var(--fg-3);
  line-height: 1.3;
}

.floor-card em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--accent-2);
  font-family: var(--mono);
  margin-top: 2px;
}

.opt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opt-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}

.opt-row:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
}

.opt-row.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.opt-row input[type=radio] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  margin: 0;
}

.opt-row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.opt-row small {
  display: block;
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.35;
  margin-top: 2px;
}

.opt-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--accent-2);
  font-family: var(--mono);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 0;
  font-size: 12.5px;
}

.stepper small {
  color: var(--fg-3);
  margin-left: 6px;
  font-size: 11px;
}

.stepper>div {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  overflow: hidden;
}

.stepper button {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  width: 30px;
  height: 28px;
  font-size: 15px;
}

.stepper button:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--fg);
}

.stepper button:disabled {
  opacity: 0.3;
}

.stepper b {
  min-width: 26px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
}

.inside-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stage-ink-2);
  background: rgba(255, 255, 255, 0.55);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  transition: opacity 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.outdoor .inside-label {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
}

.inspector .chips {
  gap: 4px;
}

.inspector .chip {
  height: 28px;
  min-width: 40px;
  padding: 0 8px;
  font-size: 12px;
}

/* ---- Summary ---------------------------------------------------------------- */
table.spec,
table.price {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.spec th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-3);
  padding: 9px 8px 9px 0;
  width: 36%;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

table.spec td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

table.price td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

table.price td:last-child {
  text-align: right;
  font-size: 12.5px;
}

table.price tr.sub td:first-child {
  padding-left: 14px;
  color: var(--fg-3);
}

table.price tr.total td {
  font-weight: 600;
  border-bottom: 0;
  border-top: 1px solid var(--line-3);
  padding-top: 12px;
  font-size: 15px;
}

table.price tr.total td:last-child {
  color: var(--accent-2);
  font-size: 17px;
}

/* quick-261020-pcg: the estimated sales tax and the total with tax sit under
   the Estimated total row (only when the store has a rate). */
table.price tr.tax td {
  border-bottom: 0;
  padding-top: 6px;
  padding-bottom: 4px;
}

table.price tr.total.with-tax td {
  border-top: 0;
  padding-top: 4px;
  font-size: 14px;
}

table.price tr.total.with-tax td:last-child {
  font-size: 15px;
}

/* Promotion discount lines (phase 12, 12-UI-SPEC Surface 5): a sub-line whose
   amount reads in the accent color. */
table.price tr.discount td:last-child {
  color: var(--accent-2);
}

/* Promo block (12-UI-SPEC Surface 5): automatic rows, then the code UI. */
.promo {
  margin-top: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Reads as a question ("Have a promo code?"), so sentence case, not the
   uppercase field-label style. */
.promo-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: 8px;
}

.promo-row {
  display: flex;
  gap: 8px;
}

.promo-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  font-size: 13px;
  color: var(--fg-2);
}

.promo-applied .promo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.promo-applied b {
  font-weight: 600;
  color: var(--fg);
}

.promo-applied code {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

.promo-applied .btn {
  flex-shrink: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

/* ---- Stage ------------------------------------------------------------------- */
.stage {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, var(--stage-0) 0%, transparent 70%),
    linear-gradient(180deg, var(--stage-0) 0%, var(--stage-1) 38%, var(--stage-1) 58%, var(--stage-2) 100%);
}

.stage::before {
  /* one soft vignette so the edges recede and the building reads as the subject */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.06) 100%);
}

body.outdoor .stage::before {
  display: none;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.caption {
  position: absolute;
  left: 22px;
  top: 18px;
  pointer-events: none;
  color: var(--stage-ink);
}

.caption b {
  display: block;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.caption span {
  display: block;
  font-size: 11.5px;
  color: var(--stage-ink-2);
  margin-top: 4px;
}

body.outdoor .caption b,
body.outdoor .caption span {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.stage-tools {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  transition: color var(--t), background-color var(--t), border-color var(--t);
  box-shadow: var(--shadow);
}

/* .tool's inline-flex would otherwise override the hidden attribute (#btn-center). */
.tool[hidden] {
  display: none;
}

.tool:hover {
  color: var(--fg);
  border-color: var(--line-3);
}

.tool svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool.on {
  color: var(--accent-2);
  border-color: var(--accent-ring);
  background: var(--accent-dim);
}

.tool#btn-full {
  width: 34px;
  padding: 0;
  justify-content: center;
}

.viewbar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 11px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}

.viewbar button {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color var(--t), color var(--t);
}

.viewbar button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--fg);
}

.viewbar button.on {
  background: var(--accent);
  color: var(--on-accent);
}

.viewbar button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.viewbar button.spin {
  margin-left: 4px;
  border-left: 1px solid var(--glass-line);
  border-radius: 0 7px 7px 0;
  padding: 0 11px 0 14px;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  font-size: 11.5px;
  color: var(--stage-ink-2);
  transition: opacity 0.6s ease;
  pointer-events: none;
  white-space: nowrap;
}

.hint.fade {
  opacity: 0;
}

body.outdoor .hint {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.dims-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dim-label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--accent-2);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  transition: opacity 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.inspector {
  position: absolute;
  left: 18px;
  bottom: 74px;
  width: 300px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  border: 1px solid var(--glass-line);
  animation: rise 0.2s var(--ease);
}

@keyframes rise {
  from {
    transform: translateY(8px);
  }

  to {
    transform: none;
  }
}

.insp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.insp-head b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.insp-head .icon-btn {
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1;
}

.insp-field {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 12px 0;
}

.insp-field select {
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
}

.insp-val {
  float: right;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  font-weight: 500;
  font-size: 11.5px;
}

.insp-field input[type=range] {
  width: 100%;
  margin: 10px 0 0;
  accent-color: var(--accent);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin: 8px 0;
}

.check small {
  color: var(--fg-3);
  margin-left: auto;
  font-size: 11px;
}

.insp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 11px;
}

/* Remove + "Center on wall" wrapped as ONE flex child, so .insp-actions still has two
   and its muted hint stays right-aligned. */
.insp-btns {
  display: flex;
  gap: 8px;
}

.toast {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  color: var(--fg);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: opacity 0.2s ease, transform 0.25s var(--ease);
  max-width: 80%;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- Loader -------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader p {
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.loader code {
  font-family: var(--mono);
  color: var(--fg);
}

.loader-mark {
  width: 132px;
}

.loader-mark path {
  fill: none;
  stroke: var(--fg-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: draw 1.4s var(--ease) forwards;
}

.loader-mark .l2 {
  animation-delay: 0.2s;
}

.loader-mark .l3 {
  animation-delay: 0.45s;
  stroke: var(--accent);
}

.loader-mark .l4 {
  animation-delay: 0.6s;
  stroke: var(--accent);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---- Modal ------------------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(26, 28, 30, 0.45);
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 26px 26px 20px;
  width: min(560px, 100%);
  box-shadow: var(--shadow);
  animation: rise 0.2s var(--ease);
}

.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 18px;
}

.modal h2 {
  margin-bottom: 6px;
}

.modal p {
  color: var(--fg-2);
}

.quote-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  margin: 14px 0 18px;
  font-size: 14px;
  font-weight: 600;
}

.quote-summary span {
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 500;
}

/* quick-261020-pcg: the save dialog's tax lines, under the quote summary. */
.quote-tax {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -12px 0 18px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--fg-3);
  overflow-wrap: anywhere;
}

.quote-tax b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-2);
}

#quote-form,
#intake-form,
#address-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#quote-form label,
#intake-form label,
#address-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#quote-form input,
#intake-form input,
#address-form input,
#address-form select,
#quote-form textarea,
#intake-form textarea {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

#quote-form label.wide,
#intake-form label.wide,
#address-form label.wide,
#quote-form .actions,
#intake-form .actions,
#address-form .actions,
#quote-form .fine,
#intake-form .fine,
#address-form .fine {
  grid-column: 1 / -1;
}

#quote-form .actions,
#intake-form .actions,
#address-form .actions {
  margin: 6px 0 0;
}

/* quick-261020-mr2: the Delivery address form's state select sits beside the
   ZIP input at full width of its column, like the inputs. */
#address-form select {
  width: 100%;
  min-width: 0;
}

#address-form input {
  min-width: 0;
}

/* ---- Save modal: validation, price mismatch, saved panel, banner (Phase 2) ------ */
.field-error {
  display: block;
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 4px;
}

input.invalid,
select.invalid {
  border-color: var(--danger);
}

/* D-87 honeypot field (Surface 7): clip-based hide, deliberately NOT
   display:none or opacity:0 -- a bot inspecting computed style cannot
   trivially detect and route around this the way it could a display-none
   field, and no JS ever un-hides it (CLAUDE.md Hidden Text Rule: this is a
   non-content form input, not body copy that starts hidden and is
   JS-revealed -- the inverse of the flagged pattern). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.price-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  margin: 14px 0 0;
}

.price-alert b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
}

.price-alert span {
  font-size: 11.5px;
  color: var(--fg-2);
}

.old-total {
  text-decoration: line-through;
  color: var(--fg-3);
  margin-right: 6px;
  font-weight: 400;
}

.saved-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  margin: 14px 0;
}

.saved-link code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap;
}

.saved-indicator svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.saved-indicator time {
  color: var(--fg-2);
  font-weight: 500;
}

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--fg-2);
}

.notice .icon-btn {
  width: 22px;
  height: 22px;
}

/* ---- Sign page (Phase 4, 04-08): review and e-sign a contract -------------------- */
/* The builder shell's base body rule (overflow: hidden, near the top of this file) also
   loads on standalone pages. Because html stays overflow: visible, that value carries
   over to the viewport, so wheel and touch scrolling of the page is impossible. Script
   scrolling still works, which is why programmatic tests missed it. Document-style
   pages (sign.html) opt in with this class. index.html, the 3D builder, must never get
   it: the builder needs its fixed full-viewport shell. */
body.scroll-page {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.sign-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 20px 24px;
}

.sign-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.sign-header img,
.sign-header svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.sign-header b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.sign-doc-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
}

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-3);
  background: repeating-linear-gradient(45deg, var(--bg-3), var(--bg-3) 10px, var(--bg-4) 10px, var(--bg-4) 20px);
  margin: 0 0 16px;
}

.demo-banner svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--fg-2);
  fill: none;
  stroke-width: 1.8;
}

.demo-banner b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
}

.demo-banner span {
  display: block;
  font-size: 11.5px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.5;
}

.sign-section {
  margin: 26px 0;
}

.sign-doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The contract is the last section on the page (quick 261010-kp4) and
     keeps its own 62vh scroll box, so the page ends after one screen of
     contract instead of after every PDF page. Scrolling past its last page,
     or up from its first page, must chain to the page: scroll containment
     here trapped every signer from 2026-10-01 (3d-builder 4c54f0f) to
     2026-10-09 and must not come back. */
  max-height: 62vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-3);
}

.sign-doc-hint {
  text-align: center;
}

.sign-doc canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  display: block;
}

.consent-box {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.consent-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent);
}

.consent-check label {
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.4;
}

.sig-pad {
  position: relative;
  width: 100%;
  height: 140px;
  border: 1px dashed var(--line-3);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  margin-top: 10px;
  touch-action: none;
  overflow: hidden;
}

.sig-pad.disabled {
  background: var(--bg-3);
  border-color: var(--line);
}

.sig-pad canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sig-pad .sig-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 11.5px;
  color: var(--fg-4);
  pointer-events: none;
}

.sig-instruction {
  margin: 12px 0 8px;
}

.sig-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

@font-face {
  font-family: 'Signature Cursive';
  src: url('../assets/vendor/fonts/caveat-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* The bar is in normal flow on purpose. Pinned to the viewport bottom it covered the
   signature pad on a 390x664 phone, and could cover the consent checkbox, unless the
   page was scrolled fully to the end. Deliberate deviation from 04-UI-SPEC Surface 7's
   sticky bar (quick 261009-7e0). */
.sign-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

.sign-bar .btn.primary {
  width: 100%;
  height: 44px;
}

.sign-status {
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
}

.sign-confirm {
  text-align: center;
  padding: 40px 0 20px;
}

.sign-confirm .icon-ok {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: grid;
  place-items: center;
}

.sign-confirm .icon-ok svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  margin: 0 0 16px;
}

.doc-alert b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
}

.doc-alert span {
  font-size: 11.5px;
  color: var(--fg-2);
}

.sign-blocked {
  max-width: 420px;
  margin: 60px auto;
  text-align: center;
}

.sign-blocked p {
  color: var(--fg-2);
  margin-top: 8px;
}

/* ---- Print --------------------------------------------------------------------- */
#print-sheet {
  display: none;
}

@media print {
  .app {
    display: none !important;
  }

  body {
    overflow: visible;
    background: #fff;
    color: #000;
    color-scheme: light;
  }

  #print-sheet {
    display: block;
    padding: 24px;
    font-size: 12px;
  }

  #print-sheet header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }

  #print-sheet h1 {
    font-size: 22px;
  }

  #print-sheet .print-total {
    text-align: right;
    font-family: var(--mono);
    font-size: 22px;
  }

  #print-sheet .print-total small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #print-sheet img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border: 1px solid #ddd;
    margin-bottom: 14px;
  }

  #print-sheet table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
  }

  #print-sheet th,
  #print-sheet td {
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
    color: #000;
  }

  #print-sheet table.price td:last-child {
    text-align: right;
    font-family: var(--mono);
  }

  /* Print uses black text, discount lines included. */
  table.price tr.discount td:last-child {
    color: inherit;
  }

  #print-sheet tr.total td {
    font-weight: 700;
    border-top: 2px solid #000;
  }

  #print-sheet .fine {
    color: #444;
  }
}

/* ---- Responsive --------------------------------------------------------------------- */
/* ---- Furnish (demo, ?furnish=1 only, quick 261028-ix1) ----------------------------------- */
.furnish .furnish-note {
  margin: -4px 0 12px;
}

.furnish-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.furnish-tools .btn {
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
}

.furnish-tools .btn.on {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.furnish details {
  border-top: 1px solid var(--line);
}

.furnish details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.furnish summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.furnish summary::-webkit-details-marker {
  display: none;
}

.furnish summary::before {
  content: '';
  width: 7px;
  height: 7px;
  margin: 0 6px 0 3px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: rotate(-45deg);
  transition: transform var(--t);
}

.furnish details[open] > summary::before {
  transform: rotate(45deg);
}

.furnish-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 600;
}

.furnish-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.furnish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 4px 21px;
}

.furnish-row > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.furnish-row b {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
}

.furnish-row b em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-2);
}

.furnish-row small {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.furnish-row .btn {
  flex: none;
  height: 44px;
  min-width: 64px;
  font-size: 13px;
}

.furnish-insp-dims {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.furnish-insp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.furnish-insp-btns .btn {
  flex: 1 1 auto;
  height: 40px;
  font-size: 13px;
}

/* The stage hint sits under the inspector's corner; let the inspector speak while it is open. */
.stage:has(.furnish-insp:not([hidden])) .hint {
  opacity: 0;
}

.furnish-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--fg-3);
}

@media (max-width: 860px) {
  /* A phone's stage is short: the Furnish inspector keeps to its name, size and buttons. */
  .furnish-insp {
    padding: 10px 12px;
  }

  .furnish-insp .insp-head {
    margin-bottom: 0;
  }

  .furnish-insp-dims {
    margin: 0 0 8px;
  }

  .furnish-hint {
    display: none;
  }
}

@media (max-width: 1180px) {
  :root {
    --panel-w: 360px;
  }

  .swatches {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --topbar-h: 52px;
  }

  .topbar {
    padding: 0 10px 0 12px;
    gap: 6px;
  }

  .brand b,
  #btn-snapshot,
  #btn-share,
  .saved-indicator,
  .topbar-right .sep {
    display: none;
  }

  .dealer-select {
    max-width: 190px;
    margin: 0 0 0 -6px;
    font-size: 13px;
  }

  .brand {
    gap: 8px;
  }

  .brand-logo {
    height: 44px;
  }

  .brand svg {
    width: 26px;
    height: 26px;
  }

  .price-tag {
    margin: 0 4px;
  }

  .price-value {
    font-size: 16px;
  }

  .main {
    flex-direction: column-reverse;
  }

  .panel {
    width: 100%;
    height: 46vh;
    border-right: 0;
    border-top: 1px solid var(--line-2);
    border-radius: 14px 14px 0 0;
    margin-top: -14px;
  }

  .steps {
    overflow-x: auto;
    padding: 6px 8px;
    scrollbar-width: none;
  }

  .steps::-webkit-scrollbar {
    display: none;
  }

  .step {
    min-width: 70px;
    padding: 7px 4px 6px;
  }

  .floor-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .panel-body {
    padding: 16px 14px 22px;
  }

  .panel-foot {
    padding: 10px 12px;
  }

  .style-grid {
    grid-template-columns: 1fr 1fr;
  }

  .inspector {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 64px;
  }

  .caption {
    left: 14px;
    top: 12px;
  }

  .caption b {
    font-size: 16px;
  }

  .stage-tools {
    right: 10px;
    top: 10px;
  }

  .tool span {
    display: none;
  }

  .tool {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .viewbar {
    bottom: 12px;
  }

  .viewbar button {
    padding: 0 9px;
    font-size: 11.5px;
  }

  .hint {
    display: none;
  }
}

/* Phones: the top bar keeps both actions by showing their short names (data-short).
   The full name stays the button's text for screen readers; while "Reserve" is
   preparing the contract it says so. */
@media (max-width: 520px) {
  #btn-quote,
  #btn-reserve {
    font-size: 0;
    padding: 0 12px;
  }

  #btn-quote::after,
  #btn-reserve::after {
    content: attr(data-short);
    font-size: 13px;
  }

  #btn-reserve[aria-busy="true"]::after {
    content: "Preparing…";
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Pay page (Phase 5, PAY-01) */
.paypage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#pay-root {
  width: min(560px, 100%);
}

.paypage .modal-card {
  animation: none;
  /* Effects budget (app.css:7-8): this page gets no entrance motion at all --
     every word of the summary, the amount and the trust line must already be
     on screen the instant this markup is inserted. */
}

.pay-card {
  text-align: center;
}

.pay-card h2 {
  margin-bottom: 6px;
}

.pay-card p {
  color: var(--fg-2);
}

.pay-summary {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 4px;
}

.pay-amount {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 14px;
}

/* D-24 (12-07): promotion saving under the amount, read from the pinned snapshot.
   Scoped under .pay-card so it outranks `.pay-card p { color: var(--fg-2) }`. */
.pay-card .pay-saved {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
  margin: 0 0 12px;
}

.pay-icon-ok {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: grid;
  place-items: center;
}

.pay-icon-ok svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pay-status-error {
  color: var(--danger);
}

.pay-card .btn.primary {
  width: 100%;
  height: 44px;
  font-size: 14px;
  margin: 4px 0 16px;
}
/* ---- Admin preview embed (?embed=1): stage only, no chrome ---------------- */
body.embed .topbar,
body.embed:not(.edit) .panel,
body.embed:not(.edit) .stage-tools,
body.embed:not(.edit) .viewbar,
body.embed .hint,
body.embed .caption,
body.embed:not(.edit) .inspector {
  display: none !important;
}
body.embed .stage {
  width: 100%;
}
/* The edit frame (14.1-08): the panel, stage tools, view bar and inspector are
   back (the rule above skips them); the summary step's save/contract/share
   buttons and the promo code box are the customer's and stay hidden; the panel
   stays beside the stage at the admin dialog's width. Below 600px (the admin
   on a phone) the frame keeps the builder's own phone layout, the stage above
   the panel, so the Save changes bar stays on screen (14.1-09). */
body.embed.edit .panel-body .actions,
body.embed.edit .promo {
  display: none;
}
body.embed.edit .stage {
  width: auto;
}
/* Up to the 1180px panel width the stage beside the panel is narrow: the stage
   tools keep to their icons (their names stay as labels) so they never sit
   under the Save changes bar. */
@media (max-width: 1180px) {
  body.embed.edit .tool span {
    display: none;
  }

  body.embed.edit .tool {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
}
@media (min-width: 600px) and (max-width: 860px) {
  body.embed.edit .main {
    flex-direction: row;
  }

  body.embed.edit .panel {
    width: 300px;
    height: auto;
    border-top: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    margin-top: 0;
  }
}

/* ---- Edit frame (?embed=1&edit=1&cv=, 14.1-08): the Save changes bar -------- */
.edit-bar {
  display: none;
}
body.embed.edit .edit-bar {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: 11px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}
body.embed.edit .edit-status {
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}
/* A phone-width frame: the stage is too narrow for the bar and the stage tools
   side by side, so the tools drop below the bar. */
@media (max-width: 599px) {
  body.embed.edit .edit-bar {
    left: 10px;
    top: 10px;
  }

  body.embed.edit .stage-tools {
    top: 58px;
  }
}
/* 14.1 review R2-C-WR-04: the frame's toasts (a refusal, a removed fixture)
   show below the Save changes bar (its bottom is at 60px) and paint over it,
   never under it; on a phone-width frame they also clear the stage tools row
   (top 58px, 34px tall). */
body.embed.edit .toast {
  top: 68px;
  z-index: 4;
}
@media (max-width: 599px) {
  body.embed.edit .toast {
    top: 102px;
  }
}

/* SEYS paint box: the current pick after a section label ("Trim Color | Primed"). */
.color-group h3 .pick {
  font-weight: 400;
  color: var(--fg-3);
  text-transform: none;
  letter-spacing: normal;
}