/* Narva mnt 133 — 3D-vaade lehe plokis „Vali kodu” (16.10.2026). Segmentnupud on ühine .seg (leht.css); leht.js seob korrusena ainult nupud, millel on data-floor. */
#vt-plaan .seg { margin-bottom: 4px; }
.d3 { position: relative; aspect-ratio: 16 / 10; min-height: 320px; background: var(--stone); overflow: hidden; touch-action: none; }
.d3 canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.d3 canvas:active { cursor: grabbing; }
.d3-tags { position: absolute; inset: 0; pointer-events: none; }
.d3-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); font: 600 14px/1 Montserrat, sans-serif; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.d3-tag .s { width: 10px; height: 10px; background: var(--yellow); border: 1px solid var(--ink); }
.d3-tag.booked { border-color: var(--line); color: var(--muted); }
.d3-tag[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.d3-tag[aria-pressed="true"] .s { border-color: var(--yellow); }
.d3-tag.hid { opacity: 0; pointer-events: none; }
.d3-tag:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* kaamera- ja korrusenupud mudeli peal: sama segmentnupp mis .seg (leht.css), väiksem ja heledate vahejoontega */
.d3-views, .d3-floors { position: absolute; left: 12px; flex-wrap: nowrap; background: var(--white); --seg-px: 14px; --seg-fs: var(--fs-fine); --seg-sep: var(--line); }
.d3-views { top: 12px; } .d3-floors { bottom: 12px; }
.d3-floors button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.d3-msg { position: absolute; inset: auto 12px 12px 12px; background: var(--white); padding: 12px 14px; font-size: var(--fs-small); }
.d3-bar { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; margin-top: 18px; }
.d3-bar .range { flex: 1 1 240px; max-width: 420px; margin: 0; }
.d3-season { --seg-px: 12px; }
@media (max-width: 599px) {
  .d3 { aspect-ratio: 4 / 5; }
  .d3-views, .d3-floors { --seg-px: 10px; --seg-fs: var(--fs-label); }
  .d3-bar .range { max-width: none; }
  .d3-season { display: flex; width: 100%; }
  .d3-season button { flex: 1; padding: 0 4px; }
}