/* The 3D experience: one full-bleed stage (building, floor plate, flat, room) with chrome floating over it.
   Shares tokens.css with the public site. It does not load site.css. Selectors here are used by app.js, pano.js and tools/qa_site.mjs: keep them. */
:root {
  color-scheme: dark;
  --night: var(--espresso-950);
  --deep: var(--espresso-900);
  --raise: var(--espresso-800);
  --line: rgba(247, 239, 226, .17);
  --line-strong: #94836F;
  --cream: var(--cream-100);
  --mute: var(--cream-300);
  --gold: var(--ochre-500);
  --gold-soft: rgba(226, 172, 74, .3);
  --brick: var(--brick-600);
  --ok: var(--ok-lamp);          /* app.js reads --ok, --hold, --sold, --gold by name */
  --hold: var(--hold-lamp);
  --sold: var(--sold-lamp);
  --display: var(--font-display);
  --ui: var(--font-text);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --top-h: 64px;
  --chrome-h: var(--top-h);   /* the bar, plus the sample band when it shows */
  --stitch: repeating-linear-gradient(90deg, var(--line-strong) 0 11px, transparent 11px 18px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--night); color: var(--cream); font-family: var(--ui); font-weight: 400; font-variant-numeric: lining-nums; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }

#app { position: relative; height: 100%; overflow: hidden; background: var(--night); }
.view { position: absolute; inset: 0; isolation: isolate; }
#v3d { z-index: 1; }
#vRoom { z-index: 2; }

/* ---------- top bar: the same bar as the public site ---------- */
.top { position: absolute; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; min-height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--deep); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: auto; }
.brand b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--cream); white-space: nowrap; }
.brand small { display: block; font-size: 13px; line-height: 1.15; color: var(--mute); }
.crumbs { display: flex; align-items: center; gap: 2px; font-size: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.crumbs button { min-height: 36px; padding: 6px 9px; color: var(--mute); transition: color .15s; }
.crumbs button:hover { color: var(--cream); }
.crumbs button[aria-current] { color: var(--cream); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.crumbs i { font-style: normal; color: var(--line-strong); }
.top-nav { margin-left: auto; display: flex; align-items: center; flex: none; }
.top-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; font-size: 15px; text-decoration: none; white-space: nowrap; color: var(--cream); }
.top-nav a:hover { color: var(--gold); }
.top-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: var(--r-1); border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn.ghost { border-color: var(--line-strong); color: var(--cream); background: var(--deep); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn.gold { background: var(--gold); color: var(--espresso-900); }
.btn.gold:hover { background: var(--ochre-300); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- world (live 3D behind everything) ---------- */
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; cursor: grab; }
#gl:active { cursor: grabbing; }
.view { pointer-events: none; }
.intro, .ruler, .tip-go, .panel, #labels > *, #vRoom { pointer-events: auto; }
#vTower { overflow: hidden; }
.tower-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(30, 19, 14, .62) 0%, rgba(30, 19, 14, .2) 28%, rgba(30, 19, 14, 0) 46%),
  linear-gradient(0deg, rgba(30, 19, 14, .5) 0%, rgba(30, 19, 14, 0) 22%); }
.orbit-hint { display: none; }
.boot { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--deep) url("../assets/hero.jpg?v=6") center / cover; transition: opacity 1.1s ease, filter 1.1s ease; }
.boot::before { content: ""; position: absolute; inset: 0; background: rgba(30, 19, 14, .78); }
.boot div { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 24px; }
.boot img { width: 64px; }
.boot b { font-family: var(--display); font-weight: 400; font-size: 30px; }
.boot small { font-size: 14px; color: var(--mute); max-width: 34ch; line-height: 1.5; }
.boot i { width: 180px; height: 2px; background: rgba(247, 239, 226, .18); overflow: hidden; position: relative; }
.boot i b { display: block; height: 100%; width: 6%; background: var(--gold); transition: width .3s; }
.boot.done { opacity: 0; filter: blur(8px); pointer-events: none; }

.intro { position: absolute; z-index: 5; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(430px, 40vw); display: grid; gap: 12px; padding: 22px 24px 24px 30px; background: var(--deep); border-left: 6px solid var(--gold); }
.eyebrow { margin: 0; font-size: 14px; line-height: 1.35; color: var(--gold); font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.intro h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.14; text-wrap: balance; }
.intro h1 em { font-style: normal; white-space: nowrap; padding-bottom: .04em; background: repeating-linear-gradient(90deg, var(--gold) 0 .28em, transparent .28em .44em) 0 100% / 100% .05em no-repeat; }
.intro .price { margin: 0; font-size: 15px; color: var(--mute); } .intro .price b { font-size: 19px; font-weight: 600; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; }
.intro .btn { justify-content: center; }

/* the floor ruler is the ochre strip of the facade */
.ruler { position: absolute; z-index: 6; right: max(18px, env(safe-area-inset-right, 0px)); top: calc(50% + var(--chrome-h) / 2); transform: translateY(-50%); display: grid; gap: 6px; justify-items: center; padding: 8px 6px 6px; background: var(--gold); color: var(--espresso-900); }
.blocks { display: grid; gap: 2px; }
.blabel { font-size: 13px; font-weight: 600; text-align: center; }
.blocks button { width: 44px; min-height: 34px; font-size: 16px; font-weight: 600; color: var(--espresso-900); box-shadow: inset 0 0 0 1px rgba(30, 19, 14, .35); }
.blocks button[aria-pressed="true"] { background: var(--espresso-900); color: var(--gold); box-shadow: none; }
.ticks { display: grid; gap: 0; border-top: 1px solid rgba(30, 19, 14, .35); padding-top: 4px; }
.ticks button { width: 44px; height: 24px; font-size: 14px; font-weight: 600; color: var(--espresso-900); font-variant-numeric: lining-nums tabular-nums; position: relative; transition: color .12s, background .12s; }
.ticks button::after { content: ""; position: absolute; left: -13px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--c, transparent); transform: translateY(-50%); }
.ticks button:hover, .ticks button.on { color: var(--gold); background: var(--espresso-900); }
.ticks button.svc { color: rgba(30, 19, 14, .78); font-weight: 400; }

.tip { position: absolute; z-index: 8; width: 296px; padding: 14px 16px 16px; background: var(--deep); border-top: 3px solid var(--gold); box-shadow: 0 20px 50px rgba(20, 12, 8, .5); pointer-events: none; display: grid; gap: 10px; transition: left .18s var(--ease), top .18s var(--ease); }
.tip-h { display: flex; align-items: baseline; gap: 12px; }
.tip-n { font-family: var(--display); font-size: 44px; line-height: .95; color: var(--gold); font-variant-numeric: lining-nums; }
.tip-h div { display: grid; gap: 2px; }
.tip-h b { font-size: 16px; font-weight: 600; }
.tip-h small { font-size: 14px; color: var(--mute); line-height: 1.35; }
.tip-bar { display: flex; height: 6px; overflow: hidden; gap: 2px; }
.tip-bar i { display: block; background: var(--c); }
.tip-meta { display: flex; gap: 4px 12px; font-size: 13px; color: var(--mute); flex-wrap: wrap; }
.tip-bar:empty, .tip-meta:empty { display: none; }
.tip-meta span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.tip-go { display: none; pointer-events: auto; justify-content: center; }

/* ---------- 3D (floor + apartment) ---------- */
#labels { position: absolute; inset: 0; pointer-events: none; }
.ulabel { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; display: grid; justify-items: center; gap: 4px; transition: opacity .25s; }
.ulabel .pin { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: var(--r-1); background: var(--deep); border: 1px solid var(--line-strong); font-size: 13px; white-space: nowrap; transition: border-color .15s, transform .2s; }
.ulabel .pin i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ulabel .pin b { font-weight: 600; font-size: 15px; color: var(--gold); }
.ulabel .stem { width: 1px; height: 18px; background: var(--line-strong); }
.ulabel.on .pin, .ulabel:hover .pin { border-color: var(--gold); transform: translateY(-3px); }
.ulabel.dim { opacity: .28; }
.ulabel.tight .pin .t { display: none; }
.hot { position: absolute; transform: translate(-11px, -50%); pointer-events: auto; display: flex; align-items: center; gap: 9px; }   /* the dot (not the dot+label box) sits on the room centre */
.hot i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--cream-100); box-shadow: 0 0 0 0 rgba(226, 172, 74, .6); animation: pulse 2.2s infinite; flex: none; }
.hot span { font-size: 13px; font-weight: 600; background: var(--deep); padding: 5px 10px; border: 1px solid var(--line-strong); opacity: 0; transform: translateX(-6px); transition: .2s; white-space: nowrap; }
.hot:hover span, .hot.on span, .hot:focus-visible span { opacity: 1; transform: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(226, 172, 74, .55); } 70% { box-shadow: 0 0 0 14px rgba(226, 172, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 172, 74, 0); } }
.hint { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--cream); padding: 7px 14px; background: var(--deep); white-space: nowrap; }

.panel { position: absolute; z-index: 7; top: calc(var(--chrome-h) + 14px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 372px;
  border-radius: var(--r-2); background: var(--deep); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.panel-scroll { overflow-y: auto; padding: 22px 24px 18px; display: grid; gap: 16px; align-content: start; flex: 1; scrollbar-width: thin; scrollbar-color: var(--espresso-700) transparent; }
.panel-foot { padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.08; }
.panel h2 small { display: block; font-family: var(--ui); font-size: 14px; color: var(--mute); margin-top: 8px; line-height: 1.4; }
.counts { display: flex; gap: 6px; flex-wrap: wrap; }
.counts:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border-radius: var(--r-1); border: 1px solid var(--line-strong); font-size: 14px; color: var(--cream); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--gold)); }
.chip.plain::before { display: none; }
button.chip:hover { border-color: var(--gold); }
button.chip[aria-pressed="true"] { background: var(--gold); color: var(--espresso-900); border-color: var(--gold); font-weight: 600; }
button.chip[aria-pressed="true"]::before { background: var(--espresso-900); }
.ulist { list-style: none; margin: 0; padding: 0; display: grid; background: var(--stitch) 0 0 / 100% 1px no-repeat; }
.ulist li { background: var(--stitch) 0 100% / 100% 1px no-repeat; }
.ulist button { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 6px; text-align: left; transition: background .15s, box-shadow .15s; }
.ulist button:hover, .ulist button.on { background: var(--raise); box-shadow: inset 3px 0 0 var(--gold); }
.ulist .letter { font-family: var(--display); font-size: 28px; color: var(--gold); text-align: center; line-height: 1; }
.ulist .info { display: grid; gap: 1px; min-width: 0; }
.ulist .info b { font-size: 15px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.ulist .info small { font-size: 13px; color: var(--mute); }
.ulist .st { font-size: 13px; font-weight: 600; color: var(--c); text-align: right; display: grid; gap: 1px; max-width: 118px; line-height: 1.25; }
.ulist .st em { font-style: normal; color: var(--cream); font-weight: 400; font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
.ulist button.dim { opacity: .38; }

.ubig { display: flex; align-items: flex-end; gap: 16px; }
.ubig .L { font-family: var(--display); font-size: 88px; line-height: .8; color: var(--gold); }
.ubig div { display: grid; gap: 4px; padding-bottom: 4px; }
.ubig b { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; font-variant-numeric: lining-nums; }
.ubig small { color: var(--mute); font-size: 14px; }
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
.rtable td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.rtable td:last-child { text-align: right; color: var(--cream); font-weight: 600; white-space: nowrap; }
.rtable tr.go { cursor: pointer; }
.rtable tr.go td:first-child { color: var(--cream); }
.rtable tr.go td:first-child::after { content: " ›"; color: var(--gold); }
.rtable tr.go:hover td { color: var(--gold); }
.rtable tfoot td { border: 0; padding-top: 12px; color: var(--cream); font-weight: 600; font-size: 15px; }
.sec-t { margin: 0; font-size: 14px; color: var(--mute); font-weight: 600; }
.opts { display: grid; gap: 4px; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: var(--r-1); border: 1px solid var(--line); text-align: left; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--line-strong); }
.opt span { font-size: 14px; color: var(--mute); }
.opt b { font-size: 15px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.opt small { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--mute); }
.opt[aria-pressed="true"] { border-color: var(--gold); background: var(--raise); box-shadow: inset 3px 0 0 var(--gold); }
.opt[aria-pressed="true"] span { color: var(--gold); }
.note { font-size: 13px; line-height: 1.5; color: var(--mute); margin: 0; }

/* what a buyer can do with this flat (app.js flatActions) */
.flat-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-save, .fa-ask, .fa-view { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.fa-save:hover, .fa-ask:hover, .fa-view:hover { color: var(--gold); border-color: var(--gold); }
.fa-save[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--espresso-900); }
.fa-sun { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--cream); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.fa-sun::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--gold); }
.fa-sun:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.window-bar { position: absolute; z-index: 7; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 18px; width: min(620px, calc(100% - 24px)); padding: 12px 16px; background: var(--deep); border-top: 3px solid var(--gold); pointer-events: auto; }
.window-bar p { margin: 0; display: grid; gap: 2px; flex: 1; min-width: 0; }
.window-bar b { font-size: 15px; font-weight: 600; }
.window-bar small { font-size: 13px; line-height: 1.4; color: var(--mute); }
.window-bar button { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: 15px; font-weight: 600; }
.window-bar button:hover { color: var(--gold); border-color: var(--gold); }
.sample-flag { position: absolute; z-index: 39; left: 0; right: 0; top: var(--top-h); margin: 0; padding: 5px 16px; text-align: center; font-size: 13px; line-height: 20px; color: #fff; background-color: var(--ask-ink); background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 10px, transparent 10px 20px); }
#app:has(> .sample-flag) { --chrome-h: calc(var(--top-h) + 30px); }
.budget-flag { position: absolute; z-index: 6; left: max(24px, env(safe-area-inset-left, 0px)); top: calc(var(--chrome-h) + 12px); display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; background: var(--deep); border-left: 4px solid var(--gold); font-size: 14px; text-decoration: none; }
.budget-flag:hover { color: var(--gold); }

/* ---------- room ---------- */
#vRoom { overflow: hidden; background: var(--night); }
#panoHost { position: absolute; inset: 0; background: var(--night); }
.pano-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.pano-canvas:active { cursor: grabbing; }
.tour-plan { position: absolute; z-index: 3; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: 240px; padding: 12px; background: var(--deep); border-top: 3px solid var(--gold); display: grid; gap: 6px; }
.tour-plan svg { width: 100%; height: 150px; display: block; }
.tour-plan small { font-size: 13px; line-height: 1.35; color: var(--mute); }
.pr { fill: var(--espresso-700); stroke: #7D6A58; stroke-width: .05; cursor: pointer; transition: fill .2s; }
.pr:hover { fill: #52392A; } .pr.on { fill: #7A5A2A; }
.pn { fill: var(--cream); stroke: var(--deep); stroke-width: .04; cursor: pointer; }
.cone { fill: #E2AC4A77; } .me { fill: var(--gold); stroke: var(--deep); stroke-width: .05; }
.tour-name { display: grid; gap: 1px; flex: none; }
.tour-name small { font-size: 13px; color: var(--mute); } .tour-name b { font-weight: 600; font-size: 15px; } .tour-name em { font-style: normal; color: var(--gold); font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#hero { position: absolute; inset: 0; z-index: 0; }
#hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) saturate(1.16) contrast(1.05) brightness(1.02); }
#hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 196, 128, .85) 0%, rgba(255, 206, 150, .72) 16%, rgba(255, 206, 150, 0) 40%); mix-blend-mode: screen; opacity: .55; }
#heroFloors { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
#heroFloors polygon { fill: transparent; cursor: pointer; pointer-events: all; transition: fill .15s; }
#heroFloors polygon.on { fill: rgba(226, 172, 74, .42); stroke: var(--ochre-300); stroke-width: 2; }
.room-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--deep); border-top: 1px solid var(--line); }
.rchips { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.rchips button { min-height: 44px; padding: 8px 13px; font-size: 14px; white-space: nowrap; color: var(--mute); transition: color .15s; }
.rchips button:hover { color: var(--cream); }
.rchips button[aria-current] { color: var(--cream); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.arrows { margin-left: auto; display: flex; gap: 4px; flex: none; }
.arrows button { width: 44px; height: 44px; border-radius: var(--r-1); border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 18px; transition: color .15s, border-color .15s; }
.arrows button:hover { border-color: var(--gold); color: var(--gold); }
.arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- calculator ---------- */
.sheet { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(20, 12, 8, .68); padding: 16px; }
.sheet-card { width: min(560px, 100%); max-height: calc(100% - 32px); overflow-y: auto; background: var(--deep); border-top: 4px solid var(--gold); border-radius: var(--r-2); padding: 24px 26px 26px; display: grid; gap: 18px; box-shadow: 0 30px 80px rgba(20, 12, 8, .55); }
.sheet-card header { display: flex; align-items: start; gap: 12px; }
.sheet-card h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.x { margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-1); border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 20px; flex: none; }
.x:hover { color: var(--gold); border-color: var(--gold); }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 4px; }
.ugrid button { padding: 7px 12px; min-height: 44px; border-radius: var(--r-1); border: 1px solid var(--line); font-size: 14px; line-height: 1.3; display: grid; justify-items: start; gap: 1px; text-align: left; font-variant-numeric: lining-nums tabular-nums; }
.ugrid button:hover { border-color: var(--line-strong); }
.ugrid button b { font-weight: 600; font-size: 17px; color: var(--gold); }
.ugrid button[aria-pressed="true"] { border-color: var(--gold); background: var(--raise); box-shadow: inset 3px 0 0 var(--gold); }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.result div { padding: 12px 0; display: grid; gap: 2px; }
.result div + div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.result span { font-size: 14px; color: var(--mute); }
.result b { font-size: 19px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.result div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.result div:first-child b { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.1; color: var(--gold); }
.contact { display: grid; gap: 4px; font-size: 14px; color: var(--mute); }
.contact .nums { display: flex; gap: 14px; flex-wrap: wrap; }
.contact .nums a { font-size: 19px; font-weight: 600; color: var(--cream); text-decoration: none; user-select: all; min-height: 36px; display: inline-flex; align-items: center; font-variant-numeric: lining-nums tabular-nums; }
.contact .nums a:hover { color: var(--gold); }

#veil { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), rgba(255, 200, 120, .55), var(--espresso-950) 60%); }

/* ---------- top bar narrows ---------- */
@media (max-width: 1319.98px) { .top-nav a:not(:first-child) { display: none; } }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  :root { --top-h: 60px; }
  .top { gap: 8px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .brand { gap: 8px; } .brand img { width: 32px; } .brand small { display: none; } .brand b { font-size: 17px; }
  .top-actions { gap: 4px; }
  .top-actions .btn { font-size: 0; gap: 0; padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; }
  .top-nav a { padding-inline: 8px; }
  .crumbs { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); top: calc(var(--chrome-h) + 8px + env(safe-area-inset-top, 0px)); right: auto; max-width: calc(100% - 28px); padding: 2px 6px; background: var(--deep); }
  .crumbs:empty { display: none; }
  .crumbs button { color: var(--cream); }
  .tower-shade { background: linear-gradient(0deg, rgba(30, 19, 14, .8) 0%, rgba(30, 19, 14, .12) 40%, rgba(30, 19, 14, 0) 56%); }
  .intro { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; right: 84px; left: max(12px, env(safe-area-inset-left, 0px)); gap: 8px; padding: 14px 14px 14px 18px; border-left-width: 5px; }
  .intro h1 { font-size: 26px; }
  .tour-plan { width: 128px; padding: 8px; left: 10px; bottom: calc(144px + env(safe-area-inset-bottom, 0px)); } .tour-plan svg { height: 84px; } .tour-plan small { display: none; }
  .tour-name { flex: 1 1 0; min-width: 0; } .tour-name small { display: none; }
  .ruler { right: max(12px, env(safe-area-inset-right, 0px)); top: calc(var(--chrome-h) + 10px + env(safe-area-inset-top, 0px)); transform: none; padding: 6px 4px 4px; gap: 4px; }
  .ticks button { height: 20px; width: 40px; font-size: 13px; }
  .blocks button { width: 40px; }
  .tip { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)) !important; right: 72px; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none; }
  .tip-go { display: flex; }
  #vTower.picking .intro { display: none; }
  .panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 46%; border-radius: var(--r-2) var(--r-2) 0 0; border-width: 3px 0 0; border-color: var(--gold); }
  .panel-scroll { padding: 16px max(16px, env(safe-area-inset-left, 0px)) 12px; gap: 12px; }
  .panel-foot { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .panel h2 { font-size: 28px; } .ubig .L { font-size: 60px; } .ubig b { font-size: 26px; }
  .hint { display: none; }
  .budget-flag { left: 14px; top: calc(var(--chrome-h) + 56px); }
  .window-bar { gap: 10px; padding: 10px 12px; }
  .ulabel .pin .t { display: none; }
  .ulabel .pin { padding: 5px 9px 5px 7px; }
  .room-bar { flex-wrap: wrap; gap: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .rchips { order: 3; flex-basis: 100%; }
  .result b { font-size: 17px; } .result div:first-child b { font-size: 32px; }
  .sheet-card { padding: 18px 18px 20px; }
}
.lite * { backdrop-filter: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (hover: none) { .hot span { opacity: 1; transform: none; pointer-events: none; } .hot i { width: 22px; height: 22px; } .hot::before { content: ""; position: absolute; left: -11px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); } }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ochre-300); outline-offset: 2px; box-shadow: 0 0 0 4px var(--espresso-950); }
.ruler :focus-visible { outline-color: var(--espresso-900); box-shadow: none; outline-offset: 1px; }
@media (max-height: 500px) { .ruler { display: none; } }
@media (pointer: coarse) {
  .btn, .rchips button, .chip.plain { min-height: 44px; }
  .blocks button { width: 44px; min-height: 44px; }
  .ticks { gap: 0; } .ticks button { width: 44px; height: 26px; }
  .tip-go { display: flex; }
}
@media (pointer: coarse) and (max-height: 760px) { .ticks button { height: 21px; } }
@media (pointer: coarse) { #tourIn, #tourOut { display: none; } }   /* pinch does this */
@media (max-height: 500px) {
  :root { --top-h: 52px; }
  .top { padding-block: calc(4px + env(safe-area-inset-top, 0px)) 4px; }
  .intro { width: 300px; left: max(12px, env(safe-area-inset-left, 0px)); bottom: 10px; padding: 12px 14px 12px 18px; gap: 8px; }
  .intro .eyebrow, .intro .price { display: none; } .intro h1 { font-size: 24px; }
  .panel { width: 430px; top: calc(var(--chrome-h) + 8px + env(safe-area-inset-top, 0px)); bottom: 8px; } .panel-scroll { padding: 14px 18px 10px; gap: 10px; } .panel-foot { padding: 8px 18px; }
  #upCall, .hint { display: none; }
  .tour-plan { width: 128px; padding: 8px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } .tour-plan svg { height: 84px; } .tour-plan small { display: none; }
  .room-bar { padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
}