/* Apartment Builder — suite look + brochure plan view (rework of 28 Sep 2026).
   Every rule is scoped to body.look-plan (set by js/main.js from js/config.js), so
   ?builder=classic, or CFG.look = 'classic', shows the old panels untouched.
   Fonts are the suite's own files (/assets/fonts), already cached for a visitor
   who arrives from the suite; if they are missing the system face stands in. */
/* Karla-400/500/700 and Fraunces-400/600 are byte-identical variable fonts in
   the suite: one file per family covers every weight used here (the review
   found the suite downloading the same Karla three times). Karla is preloaded
   by index.html; laying the panel out before it arrived measured ~0.1 s slower
   on a 4x-slowed phone CPU. */
@font-face { font-family: 'Karla'; src: url('../../assets/fonts/Karla-400.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../../assets/fonts/Fraunces-400.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

body.look-plan {
  --ui: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --disp: 'Fraunces', Georgia, serif;
  --ink: #12120e;
  --panel: #191b15;
  --panel-2: #23261e;
  --paper: #f6efdf;
  --dim: #c3b99f;
  --gold: #e0bc78;
  --line: rgba(246, 239, 223, .14);
  --line-strong: rgba(246, 239, 223, .28);
  --plan-paper: #f4efe4;
  --plan-ink: #2d3428;
  font-family: var(--ui);
}

/* ---------- header ---------- */
body.look-plan .top { background: rgba(18, 18, 14, .96); border-bottom-color: var(--line); }
body.look-plan .brand strong { font: 600 17px/1.1 var(--disp); letter-spacing: .01em; color: var(--paper); }
body.look-plan .brand span { font: 700 10px/1.3 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
body.look-plan .modes { background: rgba(246, 239, 223, .06); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
body.look-plan .modes button { border-radius: 999px; padding: 7px 16px; font: 700 11.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
body.look-plan .modes button.is-on { color: #1a1408; background: linear-gradient(105deg, #b58d4e, #e0bc78 45%, #f3dcaa 55%, #e0bc78 70%); box-shadow: 0 6px 18px -8px rgba(224, 188, 120, .7); }
body.look-plan .settings-btn { border-radius: 999px; font: 700 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; background: rgba(246, 239, 223, .06); }

/* ---------- side panel ---------- */
body.look-plan .rail { background: var(--panel); padding-top: 16px; }
body.look-plan .rail section { padding: 16px 0 18px; }
body.look-plan .rail h3 { font: 700 11px/1.2 var(--ui); letter-spacing: .2em; color: var(--gold); margin-bottom: 10px; }
body.look-plan .hint { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
body.look-plan label { font: 700 10.5px/1.3 var(--ui); letter-spacing: .14em; color: var(--dim); }
body.look-plan label select { min-width: 0; width: 100%; }
body.look-plan label input, body.look-plan label select {
  font: 500 13px var(--ui); border-radius: 10px; border-color: rgba(246, 239, 223, .28);   /* contrast: was .12 */
  background-color: var(--panel-2);
}
body.look-plan label select:focus-visible, body.look-plan label input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
body.look-plan .meta { font: 500 12.5px/1.45 var(--ui); color: var(--paper); font-variant-numeric: tabular-nums; }
body.look-plan .plan-preview { border-radius: 14px; border-color: var(--line-strong); }
body.look-plan .plan-preview .plan-caption { font: 500 11.5px/1.4 var(--ui); letter-spacing: .02em; text-transform: none; color: var(--dim); }
body.look-plan .ai-render-btn {
  border-radius: 999px; min-height: 46px;
  font: 700 12px var(--ui); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(105deg, #8a6a38, #e0bc78 42%, #f6e2b0 52%, #e0bc78 62%, #8a6a38);
  background-size: 220% 100%; background-position: 15% 0;
  transition: transform .25s ease, background-position .5s ease, box-shadow .25s ease;
}
body.look-plan .ai-render-btn:hover:not(:disabled) { background-position: 85% 0; filter: none; }
body.look-plan .cat-item { border-radius: 12px; font: 500 12.5px var(--ui); }
body.look-plan .catalog h4 { font: 700 10.5px var(--ui); letter-spacing: .16em; color: var(--dim); }
body.look-plan .tools button { border-radius: 999px; font: 700 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
body.look-plan .furn-callout { border-radius: 12px; font: 700 13.5px/1.4 var(--ui); background: linear-gradient(105deg, #c9a15f, #e0bc78 60%, #f0d59f); }
body.look-plan .cgi-thumb { font: 700 10px var(--ui); letter-spacing: .12em; }
body.look-plan .cgi-thumb img { border-radius: 10px; }
body.look-plan .swatches button { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
body.look-plan .mat-label { font: 700 10px var(--ui); letter-spacing: .14em; }

/* status chips: the old ones failed contrast (Coming soon 2.8:1, Sold 3.9:1) */
body.look-plan .status-chip { border-radius: 10px; font: 700 12.5px/1.4 var(--ui); }
body.look-plan .status-chip[data-status="sold"] { background: #b3402b; }
body.look-plan .status-chip[data-status="soon"] { background: #5f5f58; }
body.look-plan .status-chip[data-status="showhome"] { background: #2f6aa8; }

/* settings panel */
body.look-plan .settings { background: var(--panel); }
body.look-plan .settings-head strong, body.look-plan .settings-card h4 { font: 700 11px var(--ui); letter-spacing: .2em; }
body.look-plan .settings-tabs button { border-radius: 999px; font: 700 11px var(--ui); letter-spacing: .1em; text-transform: uppercase; }
body.look-plan .toggle-row, body.look-plan .slider-row { font: 500 13px/1.4 var(--ui); letter-spacing: 0; text-transform: none; }
body.look-plan .toggle-row b, body.look-plan .slider-row b { font: 700 13px/1.3 var(--ui); letter-spacing: .01em; }
body.look-plan .toggle-row small, body.look-plan .slider-row small { font: 400 12px/1.4 var(--ui); letter-spacing: 0; }

/* ---------- stage ---------- */
body.look-plan .stage { background: var(--plan-paper); }
body.look-plan.mode-3d .stage { background: #2b2c27; }
body.look-plan .stage-hint {
  font: 700 10.5px var(--ui); letter-spacing: .12em; color: #3b3a32;
  background: rgba(250, 247, 240, .9); border: 1px solid rgba(43, 45, 38, .12);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35);
}
body.look-plan.mode-3d .stage-hint { color: var(--paper); background: rgba(18, 18, 14, .78); border-color: var(--line); }
body.look-plan .stage-hint.is-live { color: #1c1608; background: var(--gold); }
body.look-plan #toast { font: 500 13px var(--ui); background: rgba(18, 18, 14, .94); border-color: var(--line-strong); }
body.look-plan .rail-toggle { font-family: var(--ui); }
body.look-plan .furn-banner { font-family: var(--ui); border-radius: 16px; }
body.look-plan .site-foot { font-family: var(--ui); }

/* ---------- plan overlay (js/plan-view.js) ---------- */
.pv-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
.pv-layer[hidden] { display: none; }
.pv-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.pv-leaf { fill: none; stroke: var(--plan-ink, #2b2d26); stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pv-arc { fill: none; stroke: var(--plan-ink, #2b2d26); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.pv-labels { position: absolute; inset: 0; }
.pv-layer.no-names .pv-label b { display: none !important; }
.pv-label {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 8px 3px; border-radius: 7px;
  background: rgba(250, 247, 240, .8);
  box-shadow: 0 1px 0 rgba(43, 45, 38, .06);
  color: #243021; white-space: nowrap; text-align: center;
  will-change: transform;
}
.pv-label b { font: 700 10.5px/1.2 var(--ui, 'Karla', system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.pv-label span { font: 500 10.5px/1.15 var(--ui, 'Karla', system-ui, sans-serif); letter-spacing: .02em; color: #6a624c; font-variant-numeric: tabular-nums; }
.pv-label.is-small { padding: 1px 5px; border-radius: 5px; background: rgba(250, 247, 240, .7); }
.pv-label.is-small b { font-size: 8.5px; letter-spacing: .1em; }
/* in 3D the labels float over the model: dark chips, like the suite's HUD */
.pv-layer.is-3d .pv-label { background: rgba(18, 18, 14, .74); color: #f6efdf; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }
.pv-layer.is-3d .pv-label span { color: #d8cdb2; }
@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  /* phones: smaller and see-through, so a label never hides the furniture under it */
  .pv-label b { font-size: 8.5px; letter-spacing: .07em; }
  .pv-label span { font-size: 8.5px; }
  .pv-label { padding: 1px 5px; border-radius: 5px; background: rgba(250, 247, 240, .66); }
  .pv-label.is-small b { font-size: 7.5px; }
}

/* single-storey homes: the storey box is information, not a chooser — it drew
   near-black text (--ink) on the dark panel */
body.look-plan #plotSelect.is-single { color: var(--paper); }

/* CEO review r10 (29 Sep 2026): at 360 px the header's "CHIME HOUSING" was cut to
   "CHIME HOUSIN…" (the brand box is 28vw there). Tighter tracking on small phones. */
@media (max-width: 400px) {
  body.look-plan .brand { max-width: 31vw; }
  body.look-plan .brand span { font-size: 9.5px; letter-spacing: .07em; }
}