/* Listing viewer: plan and 3D that answer each other. Dante's Models.
   Reads the site's colour tokens when they exist and falls back to the same values, so it also stands alone.
   Layout answers the width of the box it sits in (container query), not the width of the screen. */
.lv-root { --lv-ink: var(--color-bg-deep, #0a0806); --lv-surface: var(--color-bg-surface, #14110d); --lv-cream: var(--color-text-primary, #efe8db);
  --lv-muted: var(--color-text-secondary, #a79f90); --lv-dim: var(--color-text-muted, #7d7568); --lv-gold: var(--color-neon-cyan, #e0a63b);
  --lv-line: var(--color-border, rgba(239,232,219,.14)); --lv-line2: var(--color-border-input, rgba(239,232,219,.26));
  --lv-serif: var(--font-secondary, 'Bodoni Moda', 'Didot', Georgia, serif); --lv-mono: var(--font-mono, 'Space Mono', ui-monospace, Consolas, monospace);
  --lv-sans: var(--font-primary, 'Space Grotesk', system-ui, sans-serif);
  container-type: inline-size; container-name: lv; color: var(--lv-cream); font-family: var(--lv-sans); }
.lv-root *, .lv-root *::before, .lv-root *::after { box-sizing: border-box; }
.lv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container lv (min-width: 760px) { .lv__grid { grid-template-columns: minmax(0, 1.55fr) minmax(292px, 1fr); gap: 20px; align-items: start; } }

/* ---- stage ---- */
.lv__stage { background: radial-gradient(120% 90% at 50% 0%, #1b1610 0%, #0c0a08 68%); border: 1px solid var(--lv-line); position: relative; }
.lv__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 10px 0; }
.lv__tabs, .lv__units { display: inline-flex; border: 1px solid var(--lv-line2); }
.lv__tabs button, .lv__units button, .lv__tool { min-height: 44px; padding: 0 1.05rem; margin: 0; border: 0; background: transparent; color: var(--lv-muted); font-family: var(--lv-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, background .2s ease; }
.lv__tabs button + button, .lv__units button + button { border-left: 1px solid var(--lv-line2); }
.lv__tabs button[aria-selected="true"], .lv__units button[aria-pressed="true"] { background: var(--lv-gold); color: var(--lv-ink); }
.lv__tabs button:not([aria-selected="true"]):hover, .lv__units button:not([aria-pressed="true"]):hover, .lv__tool:hover { color: var(--lv-gold); }
.lv__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv__tool { border: 1px solid var(--lv-line2); }
.lv__tool[aria-pressed="true"] { border-color: var(--lv-gold); color: var(--lv-gold); }
.lv__tool[hidden] { display: none; }
.lv button:focus-visible, .lv-root button:focus-visible { outline: 2px solid var(--lv-gold); outline-offset: 2px; }
.lv__view { position: relative; margin: 6px 10px 0; aspect-ratio: var(--lv-aspect, 4 / 3); display: grid; place-items: center; overflow: hidden;
  background-image: radial-gradient(rgba(239,232,219,.055) 1px, transparent 1.2px); background-size: 22px 22px; }
.lv__view[hidden] { display: none; }
.lv__view .lv-svg { width: 100%; height: 100%; display: block; }
.lv__view img, .lv__view model-viewer { display: block; width: 100%; height: 100%; object-fit: contain; --poster-color: transparent; background: transparent; }
.lv__hint { margin: 0; padding: 8px 12px 12px; font-family: var(--lv-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lv-dim); min-height: 2.4em; }

/* 3D dots that sit on each room's floor */
.lv-hot { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; border: 1.5px solid var(--lv-gold); background: rgba(10,8,6,.82); color: var(--lv-gold);
  font-family: var(--lv-mono); font-size: .75rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.lv-hot:hover, .lv-hot.is-hover { transform: scale(1.12); }
.lv-hot.is-sel { background: var(--lv-gold); color: var(--lv-ink); transform: scale(1.18); }
.lv-hot span { pointer-events: none; }

/* ---- side ---- */
.lv__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lv__card { background: var(--lv-surface); border: 1px solid var(--lv-line); padding: clamp(14px, 3cqi, 22px); }
.lv__eyebrow { margin: 0 0 .5rem; font-family: var(--lv-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lv-gold); }
.lv__name { margin: 0 0 .9rem; font-family: var(--lv-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 7cqi, 2.5rem); line-height: 1.02; color: var(--lv-cream); }
.lv__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 1rem; padding: 0; }
.lv__facts div { border-top: 1px solid var(--lv-line); padding-top: 8px; min-width: 0; }
.lv__facts dt { font-family: var(--lv-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lv-dim); margin: 0 0 4px; }
.lv__facts dd { margin: 0; font-family: var(--lv-mono); font-size: .82rem; line-height: 1.35; color: var(--lv-cream); overflow-wrap: anywhere; }
.lv__photo { position: relative; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #1d1812 0%, #0e0c0a 62%); border: 1px solid var(--lv-line2); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 14px; }
.lv__photo::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(239,232,219,.08); pointer-events: none; }
.lv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv__photo p { margin: 0; font-family: var(--lv-serif); font-style: italic; font-size: 1.2rem; color: var(--lv-muted); }
.lv__photo small { display: block; margin-top: .4rem; font-family: var(--lv-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lv-dim); }
.lv__step { display: flex; gap: 8px; margin-top: 12px; }
.lv__step button { flex: 1; min-height: 44px; padding: 0 1rem; background: transparent; border: 1px solid var(--lv-line2); color: var(--lv-cream); font-family: var(--lv-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.lv__step button:hover { border-color: var(--lv-gold); color: var(--lv-gold); }
.lv__card.is-swap > * { animation: lv-swap .35s ease both; }
@keyframes lv-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lv__rooms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lv-line); }
.lv__rooms li { border-bottom: 1px solid var(--lv-line); }
.lv__rooms button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto 3px; gap: 4px 10px; align-items: center; min-height: 52px; padding: 8px 6px 8px 4px; margin: 0; background: transparent; border: 0; border-left: 2px solid transparent; color: var(--lv-cream); text-align: left; cursor: pointer; font-family: var(--lv-sans); transition: background .2s ease, border-color .2s ease; }
.lv__rooms .n { grid-row: 1; font-family: var(--lv-mono); font-size: .72rem; color: var(--lv-gold); }
.lv__rooms .nm { grid-row: 1; font-size: .98rem; }
.lv__rooms .ar { grid-row: 1; font-family: var(--lv-mono); font-size: .76rem; color: var(--lv-muted); }
.lv__rooms .bar { grid-column: 2 / 4; grid-row: 2; display: block; height: 3px; background: rgba(239,232,219,.08); }
.lv__rooms .bar b { display: block; height: 100%; background: var(--lv-gold); opacity: .55; transition: opacity .2s ease; }
.lv__rooms button:hover, .lv__rooms button.is-hover { background: rgba(224,166,59,.07); }
.lv__rooms button.is-sel { background: rgba(224,166,59,.12); border-left-color: var(--lv-gold); }
.lv__rooms button.is-sel .bar b, .lv__rooms button:hover .bar b { opacity: 1; }
.lv__total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--lv-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-muted); }
.lv__total strong { font-size: 1.05rem; letter-spacing: .04em; color: var(--lv-cream); }
.lv__dl { margin: 0; font-family: var(--lv-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-dim); line-height: 2; }
.lv__dl a { color: var(--lv-gold); text-decoration: none; border-bottom: 1px solid rgba(224,166,59,.4); }
.lv__dl a:hover { color: var(--lv-cream); border-color: var(--lv-cream); }
.lv__note { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--lv-dim); }

@media (prefers-reduced-motion: reduce) { .lv-root *, .lv-root *::before, .lv-root *::after { transition: none !important; animation: none !important; } }