/* Walk-through page. Every colour, font and corner comes from these tokens; a listing's
   `theme` (listing.js) overrides them for the agency's brand (engine/extras.js applyTheme). */
:root {
  --bg: #f1eee8;
  --ink: #1c1c1e;
  --muted: #6d6a66;
  --line: rgba(28, 28, 30, 0.12);
  --soft: rgba(28, 28, 30, 0.05);
  --accent: #d4683a;
  --accent-ink: #ffffff;
  --dark: #141416;
  --stage-bg: radial-gradient(ellipse at 50% 45%, #fbfaf7 0%, #ece8e1 75%);
  --radius: 99px;   /* buttons */
  --pill: 99px;     /* chips, labels, the share bar */
  --box: 14px;      /* photo frame, dialogs, fields */
  --font: Inter, system-ui, -apple-system, sans-serif;
  --display: 'Instrument Serif', Georgia, serif;
  --display-weight: 400;
  --display-scale: 1;
  --wordmark-spacing: 0.08em;
  --err: #b42318;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.wt-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wt-modal, .wt-modal body { overflow: hidden; }

/* ---------- buttons ---------- */
.wt-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
}
.wt-cta--ghost { background: transparent; color: inherit; border-color: currentColor; }
.wt-cta:disabled { opacity: 0.6; cursor: wait; }
.wt-cta svg { width: 20px; height: 20px; }
:is(.wt-cta, .wt-tool, .wt-herobtn, .wt-x, .wt-rail button, .wt-sugg button, .wt-linkbtn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- phone first: model on top, photo below ---------- */
.wt-stage { position: fixed; left: 0; top: 0; width: 100%; height: 58svh; overflow: hidden; background: var(--stage-bg); }
.wt-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.wt-labels { position: absolute; inset: 0; pointer-events: none; }
.wt-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.9); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); transition: background 0.2s, color 0.2s;
}
.wt-label.on { background: var(--ink); color: #fff; }
.wt-chip {
  position: absolute; left: 16px; top: calc(env(safe-area-inset-top) + 26px);
  font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.wt-panel { position: fixed; left: 0; right: 0; bottom: 0; height: 42svh; background: var(--dark); overflow: hidden; }
.wt-photo, .wt-frame { position: absolute; inset: 0; background: var(--dark); }
.wt-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.wt-frame img { object-fit: cover; }
.wt-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; color: #fff;
  padding: 56px 16px calc(env(safe-area-inset-bottom) + 76px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 45%);
}
.wt-count { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; opacity: 0.8; }
.wt-title { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(32px * var(--display-scale)); line-height: 1.05; margin: 4px 0 0; }
.wt-size { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, 0.55); }
.wt-size[hidden] { display: none; }
.wt-note { margin: 8px 0 0; font-size: 14px; line-height: 1.4; opacity: 0.92; max-width: 44ch; }

/* "Around the corner" and other cards shown in the photo frame */
.wt-card { background: #1d1d20; color: #fff; }
.wt-card-in { padding: 54px 16px 64px; height: 100%; overflow: hidden; }
.wt-card-title { margin: 0 0 6px; font-family: var(--display); font-weight: var(--display-weight); font-size: calc(26px * var(--display-scale)); }
.wt-card ul { list-style: none; margin: 0; padding: 0; }
.wt-card li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; }
.wt-card li b { font-weight: 500; }
.wt-card li span { opacity: 0.75; text-align: right; }
.wt-card-src { margin: 10px 0 0; font-size: 11px; opacity: 0.6; }

/* views / people / like / share / video, over the photo like a listing gallery */
.wt-tools {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 2px; padding: 3px;
  border-radius: var(--pill); background: rgba(0, 0, 0, 0.42); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wt-tool { display: inline-flex; align-items: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--pill); background: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-tool[hidden] { display: none; }
button.wt-tool { cursor: pointer; }
button.wt-tool:hover { background: rgba(255, 255, 255, 0.16); }
.wt-tool svg { width: 18px; height: 18px; flex: none; }
.wt-tool.on svg { fill: currentColor; }
.wt-tool b:empty { display: none; }

/* phone: ask / book bar along the bottom */
.wt-actions {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 8px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px); background: var(--bg); color: var(--ink); border-top: 1px solid var(--line);
}
.wt-actions .wt-cta { flex: 1; min-height: 44px; padding: 0 12px; font-size: 14px; }
.wt-end .wt-actions { display: none; }

/* phone: the room list is a thin progress bar across the top */
.wt-rail { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 10px); display: flex; gap: 3px; z-index: 4; }
.wt-rail button { flex: 1; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.wt-rail button::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 3px; border-radius: 2px; background: var(--line); }
.wt-rail button.past::before { background: var(--muted); }
.wt-rail button.on::before { background: var(--accent); }
.wt-rail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- the end ---------- */
.wt-outro {
  position: absolute; inset: 0; z-index: 6; visibility: hidden; opacity: 0; overflow-y: auto;
  background: var(--bg); padding: 18px 18px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column;
}
/* centred when it fits, scrollable from the top when it does not (plain justify-content:center clips the top) */
.wt-outro > :first-child { margin-top: auto; }
.wt-outro > :last-child { margin-bottom: auto; }
.wt-wordmark { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 12px; letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
.wt-outro .wt-wordmark { color: var(--muted); }
.wt-outro h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(34px * var(--display-scale)); line-height: 1.05; margin: 6px 0 4px; }
.wt-agents { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.wt-insp { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.wt-insp a { color: inherit; margin-left: 6px; }
.wt-outro-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-outro-btns .wt-cta { min-height: 44px; font-size: 14px; }
.wt-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: 13px; }
.wt-links a { color: var(--ink); }
.wt-extra { margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.wt-fine { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.wt-fine a { color: inherit; }

/* ---------- opening screen ---------- */
.wt-hero { position: fixed; inset: 0; z-index: 10; color: #fff; display: flex; align-items: flex-end; background: var(--dark); }
.wt-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.wt-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.74) 100%); }
.wt-agency { position: absolute; z-index: 1; left: 20px; top: calc(env(safe-area-inset-top) + 20px); font-size: 14px; }
.wt-hero-text { position: relative; z-index: 1; padding: 24px 20px calc(env(safe-area-inset-bottom) + 30px); }
.wt-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.wt-kicker:empty { display: none; }
.wt-hero h1 { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(46px, 12vw, 104px) * var(--display-scale)); line-height: 0.98; margin: 0; }
.wt-sub { margin: 6px 0 0; font-size: 20px; }
.wt-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.wt-facts span { font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wt-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.wt-hint { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; opacity: 0.9; }
.wt-arrow { width: 22px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 12px; position: relative; }
.wt-arrow::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wt-wheel 1.6s ease-in-out infinite; }
@keyframes wt-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.wt-herobtn { /* no frame, phones and computers alike (owner, 20 Oct): the play mark and the words */
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--radius); background: none; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.wt-herobtn:hover { opacity: 0.85; }
.wt-herobtn span { font-size: 11px; }
.wt-scroll { width: 1px; }

/* ---------- dialogs: enquiry, chat, video ---------- */
.wt-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.45); animation: wt-fade 0.18s ease-out; }
.wt-sheet-in {
  width: 100%; max-height: 90svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  border-radius: var(--box) var(--box) 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25); animation: wt-up 0.22s ease-out;
}
.wt-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 6px 18px; }
.wt-sheet h2 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: calc(26px * var(--display-scale)); }
.wt-sheet-body { overflow-y: auto; padding: 0 18px calc(env(safe-area-inset-bottom) + 18px); }
.wt-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--pill); background: none; color: inherit; cursor: pointer; }
.wt-x svg { width: 20px; height: 20px; }
@keyframes wt-fade { from { opacity: 0; } }
@keyframes wt-up { from { transform: translateY(24px); opacity: 0.6; } }

.wt-sheet--video .wt-sheet-in { background: #000; color: #fff; }
.wt-sheet--video .wt-x { color: #fff; }
.wt-videobox video { display: block; width: auto; max-width: 100%; height: min(74svh, 960px); aspect-ratio: 9 / 16; margin: 0 auto; background: #000; }
/* two cuts (listing.js videoDesktop): a Desktop | Vertical switch, smaller so it all fits; the agent's download link */
.wt-videobox--two[data-v="vertical"] video { height: min(66svh, calc(90svh - 160px), 900px); }
.wt-videobox[data-v="desktop"] video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wt-vswitch { display: flex; justify-content: center; margin: 0 0 12px; }
.wt-vswitch button { min-height: 36px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: #fff; font: inherit; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; }
.wt-vswitch button + button { border-left: 0; }
.wt-vswitch button:first-child { border-radius: var(--pill) 0 0 var(--pill); }
.wt-vswitch button:last-child { border-radius: 0 var(--pill) var(--pill) 0; }
.wt-vswitch button[aria-pressed="true"] { background: #fff; color: #000; }
.wt-vswitch button:focus-visible, .wt-vdl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wt-vdl { display: block; width: fit-content; margin: 10px auto 0; color: #fff; font-size: 13px; }

.wt-lead { margin: 4px 0 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.wt-intents { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0 0 12px; padding: 0; }
.wt-intents input, .wt-consent input { accent-color: var(--accent); }
.wt-intents input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wt-intents span { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; }
.wt-intents input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wt-intents input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* fields are a line to write on, the placeholder on it naming the field (owner, 20 Oct: no boxes); the label stays for
   screen readers */
.wt-field { display: block; margin-bottom: 14px; }
.wt-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wt-field input, .wt-field textarea, .wt-askform input {
  width: 100%; padding: 10px 0 7px; border: 0; border-bottom: 1px solid var(--line); border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; /* 16px stops iPhone zooming in */
}
:is(.wt-field input, .wt-field textarea, .wt-askform input)::placeholder { color: var(--muted); opacity: 1; }
.wt-field textarea { display: block; resize: none; min-height: 39px; max-height: 40svh; overflow-y: auto; line-height: 1.4; }
:is(.wt-field input, .wt-field textarea, .wt-askform input):focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.wt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 380px) { .wt-pair { grid-template-columns: 1fr; gap: 0; } }
.wt-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wt-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.wt-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.wt-err { margin: 0 0 10px; color: var(--err); font-size: 13px; }
.wt-form .wt-cta { width: 100%; }
.wt-soi { margin: 12px 0 0; font-size: 13px; }
.wt-soi a, .wt-thanks a { color: var(--ink); }
.wt-thanks h3 { margin: 8px 0 6px; font-family: var(--display); font-weight: var(--display-weight); font-size: calc(28px * var(--display-scale)); }
.wt-thanks p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }

.wt-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 44svh; overflow-y: auto; padding: 4px 0 10px; }
.wt-msg { margin: 0; padding: 10px 12px; max-width: 86%; border-radius: min(var(--box), 14px); font-size: 15px; line-height: 1.42; white-space: pre-wrap; }
.wt-msg--bot { align-self: flex-start; background: var(--soft); }
.wt-msg--me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.wt-msg--wait { opacity: 0.55; }
.wt-linkbtn { align-self: flex-start; margin: -4px 0 2px 4px; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.wt-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wt-sugg[hidden] { display: none; }
.wt-sugg button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.wt-askform { display: flex; align-items: flex-end; gap: 6px; }
.wt-askform input { flex: 1; }
.wt-askform .wt-cta { width: 42px; min-height: 42px; padding: 0; flex: none; border: 0; background: none; color: var(--ink); } /* just the arrow */
.wt-askform .wt-cta svg { width: 22px; height: 22px; }

.wt-toast {
  position: fixed; left: 50%; bottom: calc(42svh + 12px); z-index: 60; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 8px 14px; border-radius: var(--pill); background: var(--ink); color: var(--bg); font-size: 13px; transition: opacity 0.2s, transform 0.2s;
}
.wt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop: model left; photo, actions and rooms right ---------- */
@media (min-width: 900px) {
  .wt-stage { width: 62vw; height: 100vh; }
  .wt-chip { left: 28px; top: 26px; font-size: 13px; }
  .wt-label { font-size: 11px; }
  .wt-panel {
    left: auto; right: 0; top: 0; width: 38vw; height: 100vh; background: var(--bg);
    border-left: 1px solid var(--line); padding: 28px 32px; display: flex; flex-direction: column; overflow-y: auto;
  }
  .wt-photo { position: relative; inset: auto; flex: none; background: none; }
  .wt-frame { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--box); overflow: hidden; background: #ddd8cf; }
  .wt-cap { position: relative; background: none; color: var(--ink); padding: 18px 2px 0; }
  .wt-card-in { padding: 56px 22px 18px; }
  .wt-card-title { display: none; }
  .wt-card li { font-size: 14px; padding: 8px 0; }
  .wt-count { color: var(--muted); opacity: 1; }
  .wt-title { font-size: calc(40px * var(--display-scale)); }
  .wt-size { border-color: var(--line); }
  .wt-note { color: var(--ink); opacity: 0.85; font-size: 15px; }
  .wt-actions { position: static; padding: 0; margin-top: 18px; background: none; border: 0; }
  .wt-actions .wt-cta { flex: none; padding: 0 20px; }
  .wt-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: auto; padding-top: 20px; }
  .wt-rail button { height: auto; flex: none; text-align: left; padding: 6px 0 6px 18px; font-size: 13px; color: var(--muted); }
  .wt-rail button::before { left: 0; right: auto; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; }
  .wt-rail button.on { color: var(--ink); font-weight: 600; }
  .wt-rail span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .wt-outro { padding: 40px 36px; }
  .wt-outro h2 { font-size: calc(52px * var(--display-scale)); }
  .wt-outro .wt-wordmark { font-size: 14px; }
  .wt-hero-text { padding: 40px 56px 56px; }
  .wt-agency { left: 56px; top: 36px; font-size: 16px; }
  .wt-sheet { align-items: center; }
  .wt-sheet-in { width: min(540px, 92vw); max-height: 86vh; border-radius: var(--box); }
  .wt-sheet--video .wt-sheet-in { width: auto; }
  .wt-videobox video { height: min(76vh, 900px); }
  /* the dialog is at most 86vh: the switch, title and download link take about 160px of it */
  .wt-videobox--two[data-v="vertical"] video { height: min(66vh, calc(86vh - 160px), 900px); }
  .wt-videobox[data-v="desktop"] video { width: min(86vw, 1280px, calc(min(66vh, 86vh - 160px) * 16 / 9)); height: auto; }
  .wt-toast { bottom: 28px; }
  /* one scrollbar only (the page's): the photo shrinks to make room on shorter laptop screens */
  .wt-panel { overflow: hidden; }
  .wt-photo { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .wt-frame { flex: 0 1 auto; aspect-ratio: auto; height: calc((38vw - 64px) * 0.75); min-height: 150px; }
  .wt-cap, .wt-actions, .wt-rail { flex-shrink: 0; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .wt-panel { padding: 20px 28px; }
  .wt-cap { padding-top: 12px; }
  .wt-actions { margin-top: 12px; }
  .wt-rail { padding-top: 12px; }
  .wt-rail button { padding: 3px 0 3px 18px; }
}

/* video capture: no scrollbar, no buttons, no animated hint */
.rec, .rec body { overflow: hidden; }
.rec .wt-arrow::after { animation: none; }
.rec .wt-label { transition: none; }
.rec :is(.wt-tools, .wt-actions, .wt-herobtn) { display: none; }
.rec .wt-cap { padding-bottom: 16px; }
.rec .wt-outro :is(.wt-links, .wt-extra, .wt-fine, .wt-outro-btns .wt-cta--ghost) { display: none; }

/* ---------- multi-level listings (levels: [...] in listing.js) ---------- */
/* floor buttons on the model: top floor first, the floor being toured highlighted */
.wt-levels { position: absolute; right: 12px; top: 50%; z-index: 3; display: flex; flex-direction: column; gap: 6px; transform: translateY(-50%); }
.wt-levels button {
  min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: background 0.2s, color 0.2s;
}
.wt-levels button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wt-levels button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .wt-levels button { min-width: 40px; height: 40px; } }
.wt-level-label { background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 10.5px; letter-spacing: 0.12em; padding: 3px 8px; }
.wt-fix-label { background: rgba(255, 255, 255, 0.75); color: var(--muted); font-size: 9.5px; }
.wt-multi .wt-card { background: var(--dark); }
.wt-multi .wt-rail button::before { border-radius: var(--pill); }
.wt-rail-h { display: none; }
/* a floor's plan, shown for rooms without a photo */
.wt-frame img.wt-plan { object-fit: contain; background: #f6f6f6; padding: 10px 10px 74px; }
.rec .wt-levels { display: none; }
@media (min-width: 900px) {
  .wt-levels { right: 22px; }
  .wt-levels button { min-width: 40px; height: 40px; font-size: 13px; }
  .wt-frame img.wt-plan { padding: 12px; }
  .wt-multi .wt-rail { row-gap: 0; }
  .wt-multi .wt-rail-h { display: block; grid-column: 1 / -1; margin: 8px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .wt-multi .wt-rail-h:first-child { margin-top: 0; }
  .wt-multi .wt-card-in { display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- Explore: free orbit round a multi-level model ---------- */
.wt-explore-btn {
  position: absolute; left: 16px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.wt-explore-btn svg { width: 18px; height: 18px; }
.wt-explore-btn:focus-visible, .wt-explore-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt-explore-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 28px 16px calc(env(safe-area-inset-bottom) + 14px); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 45%);
}
.wt-explore-bar[hidden] { display: none; }
/* computers: the arrow keys over the bar as Walk around starts, until a walking key is pressed or 9 s pass (walkthrough.js) */
.wt-keys {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 92px); z-index: 5; display: grid; justify-items: center; gap: 6px;
  padding: 14px 20px 12px; border-radius: min(var(--box), 14px); background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16);
  transform: translateX(-50%); pointer-events: none; transition: opacity 0.4s, transform 0.4s;
}
.wt-keys[hidden] { display: none; }
.wt-keys.gone { opacity: 0; transform: translate(-50%, 10px); }
.wt-keys-row { display: flex; gap: 6px; }
.wt-keys kbd {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-bottom-width: 3.5px; border-radius: 7px;
  background: #fff; color: var(--ink); font: inherit; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.wt-keys kbd svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.wt-keys kbd[data-k="ArrowUp"] { animation: wt-key 1.8s ease-in-out infinite; } /* "press me" */
.wt-keys kbd.down { background: var(--ink); color: #fff; transform: translateY(2px); animation: none; }
@keyframes wt-key { 0%, 50%, 100% { background: #fff; color: var(--ink); transform: none; } 18%, 32% { background: var(--ink); color: #fff; transform: translateY(2px); } }
.wt-keys p { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; }
.wt-keys p span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wt-keys kbd[data-k="ArrowUp"] { animation: none; } }
.wt-explore-hint { font-size: 12px; line-height: 1.35; color: var(--muted); }
.wt-explore-exit { flex: none; min-height: 42px; font-size: 13.5px; }
.wt-exploring .wt-stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; }
.wt-exploring .wt-stage canvas { touch-action: none; cursor: grab; }
.wt-exploring .wt-explore-btn, .wt-exploring .wt-rail { visibility: hidden; }
.wt-3dtools .wt-explore-btn { position: static; } /* beside Drone view, in its row */
.wt-exploring .wt-3dtools { visibility: hidden; }
@media (max-width: 899px) { /* phones: the row as icons, clear of the tour's marker */
  .wt-multi .wt-3dtools button > span { display: none; }
  .wt-multi .wt-3dtools button { width: 40px; height: 40px; padding: 0; justify-content: center; }
}
.rec .wt-explore-btn { display: none; }

/* ---------- Gallery: every photo, full size ---------- */
.wt-gallery .wt-frame { cursor: zoom-in; }
.wt-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 14, 0.96); }
.wt-lightbox[hidden] { display: none; }
.wt-lightbox img { max-width: 100vw; max-height: 100svh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.wt-lb-count { position: absolute; left: 16px; top: calc(env(safe-area-inset-top) + 16px); margin: 0; color: #fff; font-size: 12px; letter-spacing: 0.14em; }
.wt-lb-x { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 8px); width: 44px; height: 44px; border: 0; border-radius: var(--pill); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.wt-lb-nav { position: absolute; top: 50%; width: 46px; height: 64px; border: 0; border-radius: var(--pill); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.wt-lb-prev { left: 8px; }
.wt-lb-next { right: 8px; }

/* ---------- full photos on computers (photoFit: 'contain') ---------- */
@media (min-width: 900px) {
  .wt-fit .wt-frame { height: calc((38vw - 64px) / 1.5); }
  .wt-fit .wt-frame img:not(.wt-plan) { object-fit: contain; background: var(--bg); }
}

/* ---------- Walk around: the 3D person (multi-level listings) ---------- */
.wt-explore-btn.busy { opacity: 0.6; cursor: progress; }
.wt-walk-room { position: absolute; left: 16px; top: calc(env(safe-area-inset-top) + 64px); z-index: 4; margin: 0; padding: 6px 11px; display: none;
  border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.wt-walking .wt-walk-room:not(:empty) { display: block; }
.wt-joy { position: absolute; left: 22px; bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 5; display: none; width: 124px; height: 124px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); touch-action: none; }
.wt-joy i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--ink); opacity: 0.85; }
@media (pointer: coarse) { .wt-walking .wt-joy { display: block; } }
@media (min-width: 900px) { .wt-walk-room { left: 28px; top: 70px; } }
/* who walks: two round faces, the one walking ringed */
.wt-who { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 12px); z-index: 4; display: none; gap: 8px; }
.wt-walking .wt-who { display: flex; }
.wt-who button { width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%; overflow: hidden; background: #e7e2da; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); opacity: 0.6; transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s; }
.wt-who button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wt-who button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.2); }
.wt-who button.busy { animation: wt-who-wait 0.9s ease-in-out infinite; }
@keyframes wt-who-wait { 50% { transform: scale(0.9); } }
.wt-who button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .wt-who button:hover { opacity: 1; } }
@media (min-width: 900px) { .wt-who { right: 22px; top: 18px; gap: 10px; } .wt-who button { width: 48px; height: 48px; } }

/* ---------- QA round 3 (18 Oct): phones, the gallery, recordings, whole photos on computers ---------- */
/* a tap anywhere on the photo opens the gallery: the caption over it takes no taps */
.wt-gallery .wt-cap { pointer-events: none; }
/* the gallery: horizontal swipes reach the page; nothing of the page shows through */
.wt-lightbox { touch-action: pan-y pinch-zoom; background: #08090d; }
/* the closing screen in recordings sits in the middle, as on the page (its last child is hidden there) */
.rec .wt-outro .wt-outro-btns { margin-bottom: auto; }
@media (max-width: 899px) {
  /* the model reaches down to the photo panel whatever the browser's toolbar does */
  .wt-multi:not(.wt-exploring) .wt-stage { height: auto; bottom: 42svh; }
  /* Nearby: the list and its source line clear the Ask/Book bar */
  .wt-multi .wt-card-in { padding-top: 14px; }
  .wt-multi .wt-card li { padding: 4px 0; font-size: 12.5px; }
}
@media (max-width: 899px) and (max-height: 720px) { .wt-multi .wt-card-src { display: none; } }
@media (min-width: 900px) {
  /* whole photos: one frame size for every stop, on the panel's own background; the room list scrolls on short screens instead */
  .wt-fit .wt-photo { flex: none; }
  .wt-fit .wt-frame { flex: none; height: min(calc((38vw - 64px) / 1.5), 42vh); background: var(--bg); }
  .wt-fit .wt-cap { min-height: 172px; }
  .wt-fit .wt-rail { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 900px) and (max-height: 820px) { .wt-fit .wt-cap { min-height: 150px; } }
/* a room list with more below fades out at the bottom */
@media (min-width: 900px) { .wt-fit .wt-rail.wt-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); } }
/* eye level: a round eye beside the faces, filled while on */
.wt-pov { position: absolute; right: 116px; top: calc(env(safe-area-inset-top) + 12px); z-index: 4; display: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
  border: 2px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); cursor: pointer; }
.wt-pov svg { width: 22px; height: 22px; }
.wt-pov[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.2); }
.wt-pov:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wt-walking .wt-pov { display: inline-flex; }
@media (min-width: 900px) { .wt-pov { right: 138px; top: 18px; width: 48px; height: 48px; } }

/* ---------- Walk around, 20 Oct: the Day/Night switch (lightmap.js moves it here; the view counts went, owner 20 Oct) ---------- */
/* phones: low on the right, across from the joystick; computers: under the faces */
.wt-walk-tools { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 96px); z-index: 4; display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.wt-walking .wt-walk-tools { display: flex; }
@media (min-width: 900px) { .wt-walk-tools { bottom: auto; top: 78px; right: 22px; flex-direction: row-reverse; } }

/* ---------- the play mark (all sizes): a rounded triangle on a small light tile, like a video player's ---------- */
.wt-play { display: inline-grid; place-items: center; flex: none; width: 34px; height: 24px; border-radius: 7px; background: #fff; color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); }
.wt-play svg { width: 15px; height: 15px; fill: currentColor; }
.wt-floor-short { display: none; } /* the drone view's floor switch: short names on phones only */
.wt-sheet h2:focus { outline: none; } /* a touch screen's sheet starts on its heading, not in a box (no keyboard) */

/* ---------- phones, 20 Oct (owner): more of the photo and the model, smaller buttons; recordings keep their look ---------- */
@media (max-width: 899px) {
  /* the hero: Watch the video without a frame */
  html:not(.rec) .wt-herobtn { height: 36px; padding: 0; gap: 10px; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
  /* the words over each photo: smaller, at most two lines of note */
  html:not(.rec) .wt-cap { padding: 34px 14px calc(env(safe-area-inset-bottom) + 64px); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.64) 55%); }
  html:not(.rec) .wt-count { font-size: 10px; }
  html:not(.rec) .wt-title { font-size: calc(23px * var(--display-scale)); margin-top: 2px; }
  html:not(.rec) .wt-size { margin-top: 5px; padding: 2px 8px; font-size: 10.5px; }
  html:not(.rec) .wt-note { margin-top: 5px; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html:not(.rec) .wt-actions { padding: 7px 12px calc(env(safe-area-inset-bottom) + 7px); }
  html:not(.rec) .wt-actions .wt-cta { min-height: 38px; font-size: 13px; }
  /* views / like / share / video on the photo */
  html:not(.rec) .wt-tools { top: 8px; right: 8px; padding: 2px; }
  html:not(.rec) .wt-tool { min-width: 30px; height: 30px; padding: 0 6px; font-size: 11px; }
  html:not(.rec) .wt-tool svg { width: 16px; height: 16px; }
  /* Walk around, Drone view, Day/Night on the model: icons only, smaller */
  html:not(.rec) .wt-3dtools { left: 12px; bottom: 10px; gap: 6px; }
  html:not(.rec) .wt-3dtools > button { width: 34px; height: 34px; padding: 0; justify-content: center; }
  html:not(.rec) .wt-3dtools > button > span { display: none; }
  html:not(.rec) .wt-3dtools > button svg { width: 17px; height: 17px; }
  html:not(.rec) .wt-lm { height: 34px; padding: 2px; }
  html:not(.rec) .wt-lm button { width: 32px; }
  html:not(.rec) .wt-lm svg { width: 15px; height: 15px; }
  html:not(.rec) .wt-levels button { min-width: 32px; height: 32px; font-size: 12px; }
  /* Walk around */
  html:not(.rec) .wt-who { gap: 6px; }
  html:not(.rec) .wt-who button { width: 38px; height: 38px; }
  html:not(.rec) .wt-pov { right: 100px; width: 38px; height: 38px; }
  html:not(.rec) .wt-pov svg { width: 19px; height: 19px; }
  html:not(.rec) .wt-walk-room { top: calc(env(safe-area-inset-top) + 58px); padding: 5px 10px; font-size: 11px; }
  html:not(.rec) .wt-joy { width: 108px; height: 108px; }
  html:not(.rec) .wt-joy i { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  html:not(.rec) .wt-explore-exit { min-height: 36px; font-size: 12.5px; }
  /* the drone view (owner, 20 Oct): the switches as icons in one row with the address, and the hint in one row with
     G / 1 and Back to the tour (the buttons drop below it only when a picked room adds Rotate and Whole house) */
  html:not(.rec) .wt-droning .wt-chip { left: 12px; max-width: var(--wt-chip-max, calc(100% - 230px)); padding: 5px 10px; font-size: 11px; line-height: 1.3; } /* drone.js measures the switches */
  html:not(.rec) .wt-furn { top: calc(env(safe-area-inset-top) + 23px); right: 12px; flex-wrap: nowrap; gap: 5px; }
  html:not(.rec) .wt-furn-btn { min-height: 30px; padding: 0 10px; font-size: 11.5px; }
  html:not(.rec) .wt-furn-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; padding: 0; }
  html:not(.rec) .wt-furn-ico[hidden] { display: none; }
  html:not(.rec) .wt-furn-ico svg { display: block; width: 17px; height: 17px; }
  html:not(.rec) .wt-furn-ico span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not(.rec) .wt-furn-ico.wt-off svg { opacity: 0.35; }
  html:not(.rec) .wt-furn .wt-lm { height: 30px; }
  html:not(.rec) .wt-furn .wt-lm button { width: 26px; }
  html:not(.rec) .wt-drone-room { top: calc(env(safe-area-inset-top) + 70px); }
  html:not(.rec) .wt-drone-bar { padding: 22px 12px calc(env(safe-area-inset-bottom) + 10px); gap: 6px 10px; }
  html:not(.rec) .wt-drone-hint { flex: 1 1 120px; min-width: 0; font-size: 11px; }
  html:not(.rec) .wt-drone-btns { flex: none; flex-wrap: nowrap; gap: 6px; }
  html:not(.rec) .wt-drone-floors { flex: none; margin-right: auto; }
  html:not(.rec) .wt-drone-floors button { flex: none; min-height: 30px; min-width: 34px; padding: 0 10px; font-size: 12.5px; font-weight: 600; }
  html:not(.rec) .wt-floor-name { display: none; }
  html:not(.rec) .wt-floor-short { display: inline; }
  html:not(.rec) :is(.wt-drone-exit, .wt-drone-all) { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
}

/* ---------- phones, 20 Oct (owner: "when sliding up the pic goes down"): when the browser's toolbars slide away the
   screen grows, and anything pinned to its bottom moved down with it. The model and the photo are both pinned to the top
   in svh, which the toolbars never change, so nothing moves. The photo panel reaches the screen's bottom edge (owner:
   "now there is gap at bottom... can cover with pic?"), and each photo is as tall as the panel can ever get (100lvh, toolbars
   gone) from its top: hiding the toolbars uncovers more of the same photo, which neither moves nor zooms. The words and
   Ask / Book stay on the bottom edge. */
@media (max-width: 899px) {
  html:not(.rec) .wt-panel { top: 58svh; bottom: 0; height: auto; }
  html:not(.rec) .wt-frame > img:not(.wt-plan) { bottom: auto; height: calc(100lvh - 58svh); }
  html:not(.rec) .wt-multi:not(.wt-exploring):not(.wt-droning) .wt-stage { height: 58svh; bottom: auto; }
  html:not(.rec) .wt-toast { top: calc(58svh - 52px); bottom: auto; }
}

/* Walk around and the drone view are controls, not text: a finger resting on the joystick or the counts selected words and
   showed iPhone's selection handles (owner's screenshot, 20 Oct) */
.wt-exploring, .wt-droning { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- the nudge (engine/extras.js, 21 Oct 2026): the inspection times offered to a keen visitor ---------- */
.wt-nudge {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); z-index: 60; width: min(400px, calc(100vw - 24px));
  padding: 16px 18px 14px; border-radius: min(var(--box), 14px); background: var(--bg); color: var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22); transform: translate(-50%, 16px); opacity: 0; transition: opacity 0.25s, transform 0.25s;
}
.wt-nudge.show { opacity: 1; transform: translate(-50%, 0); }
.wt-nudge-x { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; }
.wt-nudge-h { margin: 0 32px 4px 0; font-weight: 600; font-size: 16px; line-height: 1.3; }
.wt-nudge-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.wt-nudge-btns { display: flex; gap: 8px; }
.wt-nudge-btns .wt-cta { flex: 1; min-height: 42px; font-size: 14px; }
.rec .wt-nudge { display: none; }