:root {
  --ink: #141610;
  --panel: #1c1e18;
  --panel-2: #252820;
  --paper: #f3ecdc;
  --dim: #b8b09a;
  --gold: #d9b475;
  --line: rgba(243, 236, 220, .12);
  --ui: 'Segoe UI', system-ui, sans-serif;
  --top-h: 52px;
  --rail-w: min(340px, 92vw);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Landscape is where the cut-out actually bites: the island sits on the LEFT
     or the RIGHT, and the top inset is 0. Handling only top/bottom is why this
     kept happening after the first fix. The canvas still runs edge to edge —
     only the controls are held clear, so no band of dead screen appears. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; height: 100dvh; overflow: hidden; background: var(--ink); color: var(--paper); font: 14px/1.45 var(--ui); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
label input, label select {
  text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--paper);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
/* The dropdown list is painted by the browser, not by this box. Without an
   explicit colour-scheme it opens with the light UA palette — the white flash
   before the options appear. Scoped to the select so scrollbars and checkboxes
   elsewhere are untouched. */
label select { color-scheme: dark; }
label select option, label select optgroup {
  background-color: var(--panel-2); color: var(--paper);
}

.top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  padding-top: var(--safe-t);
  height: calc(var(--top-h) + var(--safe-t));
  background: rgba(20, 22, 16, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);
}
.brand { min-width: 0; flex: 0 1 auto; }
.brand strong {
  display: block; font-size: 15px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand span {
  display: block; font-size: 11px; color: var(--dim); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modes {
  display: flex; gap: 3px; margin-left: auto; flex: none;
  background: var(--panel-2); padding: 3px; border-radius: 10px;
}
.modes button {
  padding: 7px 12px; border-radius: 8px; color: var(--dim);
  font-weight: 600; font-size: 12px; min-height: 34px;
}
.modes button.is-on { background: var(--gold); color: #1a1408; }
.settings-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--paper); font-size: 12px; font-weight: 600;
  flex: none; min-width: 40px; min-height: 40px;
}
.settings-btn svg { width: 18px; height: 18px; display: block; flex: none; stroke: currentColor; fill: none; }
.settings-btn:hover, .settings-btn.is-on { border-color: var(--gold); color: var(--gold); }
.back { color: var(--gold); text-decoration: none; font-size: 12px; font-weight: 600; }
.rail-handle, .rail-toggle { display: none; }

.rail {
  position: fixed; top: calc(var(--top-h) + var(--safe-t)); left: 0; bottom: 0;
  width: calc(var(--rail-w) + var(--safe-l)); z-index: 10;
  overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line);
  padding: 14px 14px 28px calc(14px + var(--safe-l));
  display: flex; flex-direction: column; gap: 4px;
  -webkit-overflow-scrolling: touch;
}
.rail section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rail section.grow { flex: 1; }
.rail h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.hint { font-size: 12px; color: var(--dim); text-transform: none; letter-spacing: 0; margin-bottom: 10px; line-height: 1.4; }
.meta { font-size: 12px; color: var(--paper); margin-top: 6px; }
.plan-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.mirror-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.mirror-btn:hover { border-color: var(--gold); color: var(--gold); }
.mirror-btn.is-on {
  border-color: var(--gold);
  color: #1a1408;
  background: var(--gold);
}
.mirror-state {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .04em;
}
.ai-render-block {
  margin: 10px 0 4px;
  display: grid;
  gap: 6px;
}
/* The AI render is the builder's headline feature, and it read as one more
   outlined control in the panel. It is now the one solid gold button on the
   page (the suite's own "btn-gold"), and a copy floats over the model. */
.ai-render-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, #ecd09a, #d9b475 55%, #c49a55);
  color: #1c1608 !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(217, 180, 117, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ai-render-btn svg { stroke: #1c1608; flex-shrink: 0; width: 18px; height: 18px; }
.ai-render-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(217, 180, 117, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ai-render-btn:active:not(:disabled) { transform: translateY(0); }
.ai-render-btn:focus-visible, .ai-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ai-render-btn:disabled,
.ai-render-btn.is-busy {
  opacity: .8;
  cursor: wait;
}
.ai-render-btn.is-busy svg { animation: aiSpin 1.1s linear infinite; }

/* Floating copy over the model — top right of the stage, clear of the hint
   and the phone's Tools button at the bottom. */
.ai-fab {
  position: absolute;
  top: 14px;
  right: calc(14px + var(--safe-r));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 18px 11px 15px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ecd09a, #d9b475 55%, #c49a55);
  color: #1c1608;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(28, 22, 8, .18);
  transition: transform .15s ease, filter .2s ease, opacity .25s ease;
}
.ai-fab svg { stroke: #1c1608; flex-shrink: 0; }
.ai-fab:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.ai-fab:disabled, .ai-fab.is-busy { opacity: .85; cursor: wait; }
.ai-fab.is-busy svg { animation: aiSpin 1.1s linear infinite; }
/* Before a floorplan is chosen there is nothing to render. */
body:not(.has-plan) .ai-fab { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
/* A slow halo draws the eye once a plan is loaded, then gets out of the way. */
body.has-plan .ai-fab:not(.is-busy)::after,
body.has-plan .ai-render-btn:not(.is-busy)::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(217, 180, 117, .55);
  animation: aiHalo 2.4s ease-out 3; pointer-events: none;
}
.ai-render-btn { position: relative; }
@keyframes aiHalo {
  0% { box-shadow: 0 0 0 0 rgba(217, 180, 117, .55); }
  100% { box-shadow: 0 0 0 14px rgba(217, 180, 117, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.has-plan .ai-fab::after, body.has-plan .ai-render-btn::after { animation: none; }
}
.ai-render-hint { margin: 0 !important; }
/* Daily AI render allowance (client, 29 Sep 2026): "3 of 5 AI renders left
   today" under the button; at the limit a calm note, and the button goes quiet. */
.ai-render-quota {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ai-render-quota[hidden] { display: none; }
.ai-render-quota.is-capped {
  color: var(--paper);
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(217, 180, 117, .10);
  border: 1px solid rgba(217, 180, 117, .32);
}
.ai-render-btn.is-capped,
body.look-plan .ai-render-btn.is-capped {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.45);
  box-shadow: none;
  transform: none;
}
.ai-render-btn.is-capped::after { animation: none !important; }
body.ai-capped .ai-render-hint { display: none; }   /* one short note is enough on a phone */
.ai-render-error.is-notice { color: var(--paper); font-size: 14px; }
.ai-render-lightbox .ai-render-frame {
  width: min(960px, calc(100vw - 40px));
  min-height: 280px;
  padding: 28px 24px 20px;
  border-radius: 16px;
  background: rgba(18, 18, 14, .92);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ai-render-status {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  color: #f3efe4;
  padding: 48px 16px;
}
.ai-render-status[hidden],
.ai-render-figure[hidden],
.ai-render-error[hidden] {
  display: none !important;
}
.ai-render-status small { color: rgba(243, 239, 228, .55); }
.ai-render-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, .25);
  border-top-color: var(--gold, #c9a84c);
  animation: aiSpin .8s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-render-figure img {
  max-width: min(900px, calc(100vw - 80px));
  max-height: calc(100vh - 200px);
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  background: #111;
}
.ai-render-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ai-render-link {
  color: var(--gold, #c9a84c);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .03em;
}
.ai-render-link:hover { text-decoration: underline; }
.ai-render-error {
  color: #f0b4a8;
  text-align: center;
  padding: 32px 16px;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.45;
  font-size: 13px;
}
/* Keep plan image handedness locked to the 3D model (entrance left ↔ right) */
.plan-overlay-figure img.is-mirrored,
.plan-preview img.is-mirrored {
  transform: scaleX(-1);
}
.plot-grid-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
}
.plot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.plot-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.plot-card:hover,
.plot-card:focus-visible {
  border-color: var(--gold);
  outline: none;
}
.plot-card.is-on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.plot-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: #fff;
  pointer-events: none;
}
.plot-card-meta {
  padding: 7px 8px 8px;
  line-height: 1.25;
}
.plot-card-plot {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.plot-card-type {
  display: block;
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.floor-label { margin-top: 2px; }

.plan-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  cursor: zoom-in;
  position: relative;
}
/* Empty state — no plan chosen yet. Without this the <img> has no src and
   the browser paints its broken-image glyph in the middle of the panel. */
.plan-preview.is-empty {
  cursor: default;
  background: var(--panel-2);
  border-style: dashed;
}
.plan-preview.is-empty img,
.plan-preview.is-empty .plan-zoom-hint { display: none; }
.plan-preview.is-empty::before {
  content: 'Select a floorplan to preview';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 16px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--dim);
  text-align: center;
}
.plan-preview.is-empty:hover { border-color: var(--line); }

.plan-preview:hover,
.plan-preview:focus-visible {
  border-color: var(--gold);
  outline: none;
}
.plan-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  object-position: center top;
  background: #fff;
  pointer-events: none;
}
.plan-preview .plan-caption {
  display: block;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 10px;
  background: var(--panel-2);
}
.plan-zoom-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 22, 16, .72);
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;
}

/* Full-screen floor plan viewer */
.plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 48px 64px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 36, 28, .55), rgba(10, 11, 8, .9)),
    rgba(8, 9, 6, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.plan-overlay[hidden] {
  display: none !important;
}
.plan-overlay .cgi-lb-close {
  top: 16px;
  right: 16px;
}
.plan-overlay .cgi-lb-prev { left: 16px; }
.plan-overlay .cgi-lb-next { right: 16px; }
.plan-overlay-figure {
  margin: 0;
  width: min(1400px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(217, 180, 117, .28);
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
.plan-overlay-figure img {
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 168px);
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
}
.plan-overlay-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, #1c1e18, #161812);
  border-top: 1px solid var(--line);
  color: var(--paper);
}
.plan-overlay .cgi-lb-close,
.plan-overlay .cgi-lb-nav {
  z-index: 2;
}

.finish-row { margin-bottom: 8px; }
.finish-row label { grid-template-columns: 1fr auto; align-items: center; }
.finish-row input[type=color] { width: 42px; height: 32px; padding: 2px; border-radius: 8px; cursor: pointer; }
.swatches { display: flex; gap: 6px; margin: -4px 0 10px; flex-wrap: wrap; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); }
.mat-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 2px 0 6px;
}
.mat-swatches { margin-top: 0; }
.mat-swatches .mat-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  flex: none;
}
.mat-swatches .mat-swatch:hover,
.mat-swatches .mat-swatch.is-on {
  border-color: var(--gold);
  outline: 1px solid var(--gold);
}
.rail a { color: var(--gold); }

.cgi-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cgi-thumb {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  text-align: left;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: 0;
}
.cgi-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111;
  transition: border-color .2s, transform .2s;
}
.cgi-thumb:hover img,
.cgi-thumb:focus-visible img {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.bath-gallery .cgi-thumb span {
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: none;
  white-space: normal;
}
.bath-thumb.is-on img {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.bath-thumb.is-on span { color: var(--gold); }

/* ---------- CGI lightbox ---------- */
.cgi-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 80;
}
/* Closed dialog must never block the builder stage */
.cgi-lightbox:not([open]) {
  display: none !important;
  pointer-events: none !important;
}
.cgi-lightbox::backdrop {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 36, 28, .55), rgba(10, 11, 8, .88)),
    rgba(8, 9, 6, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cgi-lightbox[open] { display: grid; place-items: center; pointer-events: auto; }
.cgi-lb-frame {
  position: relative;
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  place-items: center;
  animation: cgiLbIn .28s ease;
}
@keyframes cgiLbIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.cgi-lb-figure {
  margin: 0;
  width: 100%;
  display: grid;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(217, 180, 117, .28);
  background: #12140f;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    0 28px 80px rgba(0, 0, 0, .55),
    0 0 60px rgba(217, 180, 117, .08);
}
.cgi-lb-figure img {
  display: block;
  width: 100%;
  max-height: min(72vh, 720px);
  object-fit: contain;
  background:
    linear-gradient(145deg, #1a1c16 0%, #0e100c 100%);
}
.cgi-lb-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, #1c1e18, #161812);
  border-top: 1px solid var(--line);
}
.cgi-lb-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cgi-lb-meta strong {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.cgi-lb-meta span {
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* The plot / type line under the title. It had no colour of its own, so it
   inherited the near-black page ink onto this dark caption panel and was
   effectively invisible. */
.cgi-lb-figure figcaption > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper);
  opacity: .82;
}
#cgiLbLabel {
  font-size: 14px;
  color: var(--paper);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
}
/* 29 Sep 2026, round b: the client's line on every CGI (strip hint + viewer) */
.cgi-lb-figure figcaption > p.cgi-lb-disc { font-size: 11.5px; font-style: italic; opacity: .6; }
.cgi-disc { display: block; margin-top: 4px; font-style: italic; opacity: .8; }
.cgi-lb-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(217, 180, 117, .35);
  background: rgba(28, 30, 24, .92);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.cgi-lb-close:hover { border-color: var(--gold); color: var(--gold); }
.cgi-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 180, 117, .35);
  background: rgba(28, 30, 24, .9);
  color: var(--paper);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.cgi-lb-nav:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(36, 38, 30, .96);
}
.cgi-lb-prev { left: -20px; }
.cgi-lb-next { right: -20px; }
.cgi-lb-nav:active { transform: translateY(-60%) scale(.96); }

@media (max-width: 720px) {
  .cgi-lb-frame { width: calc(100vw - 20px); }
  .cgi-lb-prev { left: 8px; }
  .cgi-lb-next { right: 8px; }
  .cgi-lb-nav {
    width: 40px; height: 40px;
    top: auto; bottom: 72px; transform: none;
  }
  .cgi-lb-nav:active { transform: scale(.96); }
  .cgi-lb-close { top: 8px; right: 8px; }
}

.catalog h4 { font-size: 11px; color: var(--dim); margin: 10px 0 6px; letter-spacing: .1em; text-transform: uppercase; }
.cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cat-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2);
  font-size: 12px; transition: border-color .2s;
}
.cat-item:hover, .cat-item.is-on { border-color: var(--gold); }
.cat-item .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.tools { display: flex; gap: 8px; margin: 12px 0; }
.tools button { flex: 1; padding: 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; font-weight: 600; }
.tools button:hover { border-color: var(--gold); }
.tools .danger:hover { border-color: #c47b5a; color: #e8a888; }
.placed { list-style: none; max-height: 120px; overflow: auto; }
.placed li { padding: 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; display: grid; gap: 2px; }
.placed li:hover { background: var(--panel-2); }
.placed li b { font-size: 13px; }
.placed li span { font-size: 11px; color: var(--dim); }
.placed .empty { color: var(--dim); cursor: default; }

.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.file {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 12px; border-radius: 10px;
  border: 1px dashed var(--gold); color: var(--gold); font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0;
  transition: opacity .18s ease, border-color .18s ease;
}
.file input { display: none; }
/* Busy state — matches the AI render button: dimmed, wait cursor, spinner */
.file.is-busy {
  opacity: .7;
  cursor: wait;
  border-style: solid;
  border-color: rgba(217, 180, 117, .55);
}
.file-spinner { display: none; }
.file.is-busy .file-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(217, 180, 117, .3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: aiSpin 1.1s linear infinite;
}

.stage {
  position: fixed;
  top: calc(var(--top-h) + var(--safe-t));
  left: calc(var(--rail-w) + var(--safe-l)); right: 0; bottom: 0;
  background: #fff;
  overflow: hidden; /* clip one-frame canvas lag — never letterbox-stretch */
  transition: right .22s ease, background .25s ease, bottom .22s ease;
}
body.mode-3d .stage { background: #2c3036; }
body.mode-walk .stage { background: #1a1c16; }
body.settings-open .stage { right: var(--rail-w); }
/* Canvas always fills the stage; WebGL buffer is synced in JS (setSize).
   Suspended mid Hide/Tools so we don’t stretch a stale buffer. */
#view {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: top;
  /* touch-action alone stops the browser stealing the gesture for scroll and
     zoom — it does NOT stop iOS deciding a long press means "select text" and
     raising the Copy / Paste callout. Dragging furniture, and the 450ms
     long-press that arms rotate, both sit right on top of that gesture, which
     is why moving anything on a phone fought a selection bubble. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* The callout can be raised from the container as well as the canvas. */
.stage {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.rail-animating .stage { pointer-events: none; }
.stage-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #3a3830; background: rgba(255,255,255,.82); padding: 6px 12px; border-radius: 99px;
  pointer-events: none; max-width: calc(100% - 24px); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.mode-3d .stage-hint, body.mode-walk .stage-hint {
  color: var(--paper); background: rgba(20, 22, 16, .72);
}
.stage-hint[hidden] { display: none !important; }
/* One instruction at a time: a toast is the more urgent message, so the
   standing hint fades under it instead of showing through. */
body.toasting .stage-hint { opacity: 0; transition: opacity .2s ease; }
.stage-hint { transition: opacity .2s ease; }
/* Live gesture feedback outranks the standing hint — gold so it reads as
   "this is happening now" rather than "here is what you could do". */
.stage-hint.is-live { color: #1c1608; background: var(--gold, #d9b475); font-weight: 700; }

/* ---------- Settings (right rail — matches left panel) ---------- */
.settings {
  position: fixed; top: calc(var(--top-h) + var(--safe-t)); right: 0; bottom: 0;
  width: calc(var(--rail-w) + var(--safe-r)); padding-right: var(--safe-r); z-index: 15;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--paper);
  border-left: 1px solid var(--line);
}
.settings[hidden] { display: none !important; }
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px; flex: none;
  border-bottom: 1px solid var(--line);
}
.settings-head strong {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.settings-head button {
  width: 32px; height: 32px; border-radius: 8px; color: var(--dim); font-size: 16px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.settings-head button:hover { border-color: var(--gold); color: var(--gold); }
.settings-tabs {
  display: flex; gap: 4px; flex: none; padding: 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.settings-tabs button {
  flex: 1; padding: 7px 8px; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: var(--dim); background: var(--panel-2); border: 1px solid transparent;
}
.settings-tabs button.is-on {
  background: var(--gold); color: #1a1408; border-color: var(--gold);
}
.settings-body {
  flex: 1; overflow-y: auto; padding: 8px 14px 28px;
  display: flex; flex-direction: column; gap: 4px;
}
.settings-body[hidden] { display: none !important; }
.settings-card {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  background: transparent; border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
}
.settings-card:last-child { border-bottom: 0; }
.settings-card h4 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px; font-weight: 600;
}
.toggle-row, .slider-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: 0; margin: 0; font-size: 13px; color: var(--paper);
}
.toggle-row:last-child, .slider-row:last-child { border-bottom: 0; }
.toggle-row span, .slider-row span { display: grid; gap: 2px; min-width: 0; }
.toggle-row b, .slider-row b { font-size: 13px; font-weight: 600; color: var(--paper); }
.toggle-row small, .slider-row small { font-size: 12px; color: var(--dim); font-weight: 400; line-height: 1.35; }

.toggle-row input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 24px; border-radius: 99px; flex: none;
  background: var(--panel-2); border: 1px solid var(--line);
  position: relative; cursor: pointer; transition: background .2s, border-color .2s; padding: 0;
}
.toggle-row input[type=checkbox]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--dim);
  transition: transform .2s, background .2s;
}
.toggle-row input[type=checkbox]:checked {
  background: rgba(217, 180, 117, .22); border-color: var(--gold);
}
.toggle-row input[type=checkbox]:checked::after {
  transform: translateX(18px); background: var(--gold);
}

.slider-row input[type=range] {
  width: 110px; accent-color: var(--gold); flex: none;
}

.plan-preview[hidden] { display: none !important; }

@media (max-width: 900px) {
  body.settings-open .stage { right: 0; }
  .settings { width: min(100vw, 340px); max-width: 100%; }
}

.wall-sel-hint {
  font-size: 12px;
  color: #9ec8ff;
  margin: -2px 0 8px;
  letter-spacing: 0;
  text-transform: none;
}

.wall-paint {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(30, 40, 60, .12);
  box-shadow: 0 10px 28px rgba(20, 30, 50, .18);
  color: #1a2230;
  transform: translate(-50%, 12px);
  pointer-events: auto;
}
.wall-paint[hidden] { display: none !important; }
.wall-paint-label {
  font-size: 12px;
  font-weight: 600;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-paint-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef3fb;
  color: #2b6de5;
  border: 1px solid rgba(43, 109, 229, .25);
}
.wall-paint-btn:hover { background: #e0ebff; }
.wall-paint-btn.ghost {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #445066;
  background: #f4f6f9;
  border-color: rgba(30, 40, 60, .1);
}
#wallPaintColor {
  width: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid rgba(30, 40, 60, .15);
  background: #fff;
  cursor: pointer;
}

#toast {
  /* Clear of the stage hint. Both were bottom-centred — the hint at 14px and
     this at 28px — so every toast landed straight on top of the instructions
     and you could not tell which line you were meant to read. */
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(20px);
  background: #1c1e18; color: var(--paper); border: 1px solid var(--line); border-radius: 99px;
  padding: 10px 18px; font-size: 13px; opacity: 0; pointer-events: none; z-index: 50;
  transition: .3s ease; max-width: min(90vw, 420px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Phone / tablet portrait — compact chrome, tools as bottom sheet */
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  :root {
    --top-h: 48px;
    --rail-h: min(38dvh, 320px);
  }

  .top {
    gap: 8px;
    padding: 0 calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));
    padding-top: var(--safe-t);
    height: calc(var(--top-h) + var(--safe-t));
  }
  .brand { flex: 1 1 0; max-width: 28vw; }
  .brand strong { font-size: 13px; }
  .brand span { font-size: 10px; }
  .modes { margin-left: 0; }
  .modes button {
    padding: 8px 11px;
    min-height: 40px;
    min-width: 44px;
    font-size: 12px;
  }
  .settings-btn {
    padding: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
  }
  .settings-label { display: none; }

  .rail {
    top: auto;
    left: 0; right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--rail-h) + var(--safe-b));
    max-height: 50dvh;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    padding: 0 calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
    z-index: 18;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
    transition: transform .28s ease, height .28s ease;
  }
  .rail-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0 6px;
    flex: none;
    touch-action: manipulation;
  }
  .rail-handle span {
    width: 36px; height: 4px; border-radius: 99px;
    background: rgba(243, 236, 220, .28);
  }

  .stage {
    left: 0;
    right: 0;
    bottom: calc(var(--rail-h) + var(--safe-b));
    background: #fff;
  }
  body.mode-3d .stage { background: #2c3036; }
  body.settings-open .stage { right: 0; bottom: 0; }

  /* Collapsed tools → full-bleed canvas */
  body.rail-collapsed .rail {
    transform: translateY(calc(100% - 52px - var(--safe-b)));
  }
  body.rail-collapsed .stage {
    bottom: calc(52px + var(--safe-b));
  }

  .rail-toggle {
    display: inline-flex;
    position: absolute;
    right: calc(10px + var(--safe-r));
    bottom: 12px;
    z-index: 5;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 99px;
    border: 1px solid rgba(30, 40, 60, .14);
    background: rgba(255, 255, 255, .92);
    color: #2a2e28;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  }
  body.mode-3d .rail-toggle,
  body.mode-walk .rail-toggle {
    background: rgba(20, 22, 16, .88);
    color: var(--paper);
    border-color: var(--line);
  }
  body.rail-collapsed .rail-toggle { bottom: calc(12px + 52px + var(--safe-b)); }
  body.settings-open .rail-toggle { display: none; }
  body.settings-open .rail { visibility: hidden; pointer-events: none; }

  .ai-fab {
    top: 10px;
    right: calc(10px + var(--safe-r));
    min-height: 42px;
    padding: 9px 14px 9px 12px;
    font-size: 13px;
  }

  .stage-hint {
    left: calc(10px + var(--safe-l));
    right: calc(96px + var(--safe-r));
    width: auto;
    max-width: none;
    transform: none;
    bottom: 12px;
    font-size: 10px;
    letter-spacing: .04em;
    padding: 7px 10px;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
  }

  .settings {
    top: var(--safe-t);
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    z-index: 40;
    border-left: 0;
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    padding-bottom: var(--safe-b);
  }
  .settings-head { padding-top: 14px; }
  .settings-tabs button { min-height: 40px; }

  .back { display: none; }
  .plan-preview img { max-height: 140px; }
  .cat-row { grid-template-columns: 1fr 1fr; }
  .tools button { min-height: 44px; }
  /* Clear of the stage hint here too — the hint sits at bottom 12px and runs
     about 46px tall once it wraps onto two lines, so the toast starts above it
     rather than sitting on the same band. */
  #toast { bottom: calc(var(--rail-h) + var(--safe-b) + 68px); }
  body.rail-collapsed #toast { bottom: calc(64px + var(--safe-b) + 56px); }
}

/* Offered only when the 3D model could not be sent — see generateAiRender().
   Deliberately plain: this is the second-best answer, not the headline. */
.ai-render-fallback {
  margin-top: .6rem;
  padding: .45rem .8rem;
  font: inherit;
  font-size: .85rem;
  color: var(--ink, #222);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
  opacity: .8;
}
.ai-render-fallback:hover { opacity: 1; }

/* "What to upload" — collapsed by default so the panel stays short, but the
   rules are one click away instead of learned by failed upload. */
.upload-help { margin-top: .5rem; }
.upload-help > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  opacity: .85;
  padding: .2rem 0;
}
.upload-help > summary::-webkit-details-marker { display: none; }
.upload-help > summary::before { content: '＋ '; opacity: .7; }
.upload-help[open] > summary::before { content: '－ '; }
.upload-help p { margin: .35rem 0; }
.upload-help ul { margin: .35rem 0 .35rem 1rem; padding: 0; }
.upload-help li { margin: .18rem 0; }

/* Single-storey homes have one drawing, so the storey control is informational
   rather than a chooser. Disabled, but must not look faulty — the previous
   plain `disabled` styling read as "this is broken". */
#plotSelect.is-single {
  opacity: 1;
  color: var(--ink, #1c1608);
  background-image: none;      /* no dropdown chevron: there is nothing to open */
  cursor: default;
}

/* ---------- Furniture annotation (client, 24 Sep) ---------- */
.furn-callout {
  margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--gold); color: #1c1608;
  font-size: 14px; font-weight: 700; line-height: 1.35;
}
/* Over the 3D view (RAG item 8): large, centred at the top of the stage,
   dismissible, and with a one-tap way back to 2D. */
.furn-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: max-content; max-width: min(760px, calc(100% - 28px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 20px; border-radius: 14px;
  background: rgba(20, 22, 16, .9); color: var(--paper);
  border: 2px solid var(--gold);
  font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: .01em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  animation: furnBannerIn .25s ease-out;
}
.furn-banner[hidden] { display: none !important; }
.furn-banner-text { flex: 1 1 auto; }
.furn-banner button {
  flex: none;
  min-height: 44px; min-width: 44px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
}
.furn-banner-2d { padding: 0 16px; background: var(--gold); color: #1c1608; border: 0; }
.furn-banner-2d:hover { filter: brightness(1.08); }
.furn-banner-close { padding: 0; background: transparent; color: var(--paper); border: 1px solid rgba(243, 236, 220, .35); }
.furn-banner-close:hover { border-color: var(--gold); color: var(--gold); }
.furn-banner button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes furnBannerIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .furn-banner { animation: none; } }
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .furn-banner {
    top: 10px; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r));
    transform: none; width: auto; max-width: none;
    flex-wrap: wrap; gap: 10px; padding: 12px 12px 12px 14px;
    font-size: 16px; text-align: left;
  }
  .furn-banner-text { flex: 1 1 calc(100% - 64px); }
  .furn-banner .furn-banner-close { order: 2; }
  .furn-banner .furn-banner-2d { order: 3; flex: 1 1 100%; }
  @keyframes furnBannerIn { from { opacity: 0; } to { opacity: 1; } }
}

/* Plot status chip (reserved / sold / show home / coming soon) — rows 117/118 */
.status-chip { display: block; padding: 7px 10px; border-radius: 9px; font-weight: 600; color: #1c1b17; background: #f0a53c; }
.status-chip[data-status="sold"] { background: #d9573f; color: #fff; }
.status-chip[data-status="showhome"] { background: #3f7cc0; color: #fff; }
.status-chip[data-status="soon"] { background: #9a9a94; color: #fff; }

/* CGI strip with no plot chosen yet (RAG item 5) */
.cgi-gallery .cgi-empty { grid-column: 1 / -1; flex: 1 1 100%; margin: 0; }
/* Wide phones / landscape: the furniture note fits on one row — the stage is
   short in landscape, so it must not take two. */
@media (min-width: 600px) and (max-width: 820px), (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1100px) {
  .furn-banner { flex-wrap: nowrap; padding: 8px 8px 8px 16px; font-size: 16px; }
  .furn-banner-text { flex: 1 1 auto; }
  .furn-banner .furn-banner-2d { order: 0; flex: none; }
  .furn-banner .furn-banner-close { order: 1; }
}

/* ---------- Disclaimer footer (RAG row 94, 27 Sep 2026) ----------
   A thin line at the very bottom of the page. Its height (plus the iPhone
   home-indicator inset) is RESERVED: the tools panel, the model and the
   settings panel all stop above it, so it never sits over a control. */
:root {
  --foot-h: 24px;
  --foot: calc(var(--foot-h) + var(--safe-b));
}
.site-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--foot);
  padding: 0 calc(12px + var(--safe-r)) var(--safe-b) calc(12px + var(--safe-l));
  display: flex; align-items: center; justify-content: center; gap: .6em;
  background: #0e0f0b; border-top: 1px solid var(--line);
  color: #cfc6b0; font-size: 11px; line-height: 1.3;
}
.site-foot p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-foot a { flex: none; color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.site-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.site-foot .foot-short { display: none; }
@media (max-width: 1180px) {
  .site-foot .foot-long { display: none; }
  .site-foot .foot-short { display: inline; }
}
.rail, .stage, .settings { bottom: var(--foot); }
#toast { bottom: calc(64px + var(--foot)); }

@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  :root { --foot-h: 30px; }
  .site-foot { font-size: 10.5px; line-height: 1.25; }
  .site-foot p {
    white-space: normal; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* the sheet now ends on the footer, which takes the home-indicator inset */
  .rail { bottom: var(--foot); height: var(--rail-h); padding-bottom: 14px; }
  .stage { bottom: calc(var(--rail-h) + var(--foot)); }
  body.settings-open .stage { bottom: var(--foot); }
  body.rail-collapsed .rail { transform: translateY(calc(100% - 52px)); }
  body.rail-collapsed .stage { bottom: calc(52px + var(--foot)); }
  .settings { bottom: var(--foot); padding-bottom: 0; }
  #toast { bottom: calc(var(--rail-h) + var(--foot) + 68px); }
  body.rail-collapsed #toast { bottom: calc(64px + var(--foot) + 56px); }
}
/* wide phones / landscape: one line is enough */
@media (min-width: 600px) and (max-width: 820px), (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1100px) {
  :root { --foot-h: 24px; }
  .site-foot p { display: block; white-space: nowrap; }
}

/* ---------- Touch targets ≥ 40 px on phones (perf / mobile pass, 27 Sep) ----------
   Measured on a 390 px phone: colour dots 22 px, catalogue buttons 35 px,
   selects 37 px, the sheet handle 20 px, the settings ✕ 32 px. */
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .rail-handle { min-height: 40px; padding: 18px 0 18px; }
  .rail select, #homeSelect, #plotSelect { min-height: 44px; }
  .finish-row input[type=color] { min-height: 40px; min-width: 44px; }
  .swatches { gap: 8px; }
  .swatches button { width: 40px; height: 40px; min-width: 40px; }
  .mat-swatches .mat-swatch { width: 44px; height: 44px; }
  .cat-item { min-height: 44px; }
  .rail-toggle { min-height: 44px; min-width: 56px; }
  #settingsClose { width: 44px; height: 44px; }
  .site-foot a { position: relative; padding: 6px 4px; }
  .site-foot a::before { content: ''; position: absolute; inset: -8px -8px -4px; }
}

/* ---------- Phones in landscape: tools beside the model, not under it ----------
   As a bottom sheet the tools took 38% of a 390 px-high screen and the footer
   another 24 px, which left the model a ~190 px strip. Sideways, the tools sit
   in a left column (as on desktop) and the model gets the full height. The
   Hide / Tools button slides the column away. (Mobile pass, 27 Sep.) */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-height: 500px) and (max-width: 820px) {
  :root { --side-w: min(300px, 40vw); }
  .rail {
    top: calc(var(--top-h) + var(--safe-t)); bottom: var(--foot); left: 0; right: auto;
    width: calc(var(--side-w) + var(--safe-l)); height: auto; max-height: none;
    border-radius: 0; border-top: 0; border-right: 1px solid var(--line);
    padding: 0 12px 14px calc(12px + var(--safe-l));
    box-shadow: none;
  }
  .rail-handle { display: none; }
  .stage { left: calc(var(--side-w) + var(--safe-l)); bottom: var(--foot); }
  body.rail-collapsed .rail { transform: translateX(-100%); }
  body.rail-collapsed .stage { left: 0; bottom: var(--foot); }
  body.settings-open .stage { bottom: var(--foot); }
  #toast, body.rail-collapsed #toast { bottom: calc(var(--foot) + 64px); }
  #toast { left: calc(50% + var(--side-w) / 2); max-width: min(60vw, 420px); }
  body.rail-collapsed #toast { left: 50%; }
  body.rail-collapsed .rail-toggle { bottom: 12px; }
  .rail select { max-width: 100%; }
}

/* ---- Round b, 29 Sep 2026 (client): "This builder is for visualisation and layout
   only; your original home specifications and options still apply." (index.html
   #abStatement; STATEMENT_ON / ?statement=0). Wide screens: in the bar, between the
   name and the 2D/3D switch, no extra height. Narrower screens and phones: a strip
   under the bar — --top-h grows by --stmt-h, so the rail, stage and panels (all
   placed from --top-h) move down with it and nothing is covered. ---- */
.ab-stmt { display: none; }
body.has-stmt .ab-stmt {
  display: block; flex: 1 1 auto; min-width: 0; margin: 0 10px; text-align: center;
  font-size: 12.5px; line-height: 1.3; font-weight: 600; letter-spacing: .01em; color: var(--gold);
}
@media (max-width: 1180px) {
  body.has-stmt { --stmt-h: 26px; --top-h: calc(52px + var(--stmt-h)); }
}
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  body.has-stmt { --stmt-h: 36px; --top-h: calc(48px + var(--stmt-h)); }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body.has-stmt { --stmt-h: 22px; --top-h: calc(48px + var(--stmt-h)); }
}
@media (max-width: 1180px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  body.has-stmt .top { padding-bottom: var(--stmt-h); }
  body.has-stmt .ab-stmt {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--stmt-h); margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
    border-top: 1px solid var(--line); background: rgba(12, 13, 10, .6);
    font-size: 11.5px; font-weight: 600; line-height: 1.25;
  }
}
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  body.has-stmt .ab-stmt { font-size: 11px; }
}