/* ── Top-down scene connector (CS-TOUR-05) ─────────────────────────────────
 *
 * /listings/:slug/tour/board — the plane where the top-down scan tiles are
 * matched to each other and the ways between rooms are read off the result.
 *
 * PORTED FROM THE APPROVED PROTOTYPE, value for value. Every colour, size,
 * radius, gap and easing below is the one Dom signed off on; nothing here is
 * a new invention and nothing here reaches outside `.tdb`.
 *
 * SCOPE. The prototype was a standalone document, so it styled `*`, `html`
 * and `body`. Those three selectors are the only things that could not be
 * carried over as written: they are re-hung under `.tdb` so the board can
 * never restyle a page it shares the document with. The board's own surface
 * is one fixed layer that makes its own stacking context, which is why every
 * z-index in here is a small local number and none of them can climb over the
 * toast host or a type-to-confirm dialog.
 *
 * DARK IN BOTH THEMES, deliberately. The tiles are photographic top-down
 * renders and the plane is the dark table they are laid on; a cream plane
 * would wash them out. Same precedent as the two forced-dark cockpit screens.
 *
 * Laws: glass, no frames, no shadows, no outlines. Radius 6. Geist, then
 * Inter, then system-ui. Emerald #3EE092 for an active state only, CS yellow
 * #fff083 for selection. Red only ever means danger, and the one place it
 * appears is a save that did not land.
 */

.tdb {
  --tdb-plane: #08090b;
  --tdb-ink: #e9edf2;
  --tdb-ink-2: #9aa3ae;
  --tdb-ink-3: #6b7481;
  --tdb-glass: rgba(255, 255, 255, .055);
  --tdb-glass-2: rgba(255, 255, 255, .085);
  --tdb-glass-3: rgba(255, 255, 255, .12);
  --tdb-active: #3EE092;
  --tdb-sel: #fff083;
  --tdb-line: #e6ebf2;
  --tdb-line-cut: #8b95a3;
  --tdb-line-dash: #96a0ad;
  --tdb-info: #7fb4ff;
  --tdb-r: 6px;
  --tdb-font: "Geist", "Geist Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: fixed;
  inset: 0;
  z-index: 50;
  isolation: isolate;
  background: var(--tdb-plane);
  color: var(--tdb-ink);
  font-family: var(--tdb-font);
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.tdb *,
.tdb *::before,
.tdb *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; }
.tdb button,
.tdb select,
.tdb input { font: inherit; color: inherit; background: none; border-radius: var(--tdb-r); }
.tdb button { cursor: pointer; }

/* ---------- stage ---------- */
.tdb-stage { position: absolute; inset: 0; overflow: hidden; cursor: default; touch-action: none; }
.tdb-stage.is-pan { cursor: grab; }
.tdb-stage.is-panning { cursor: grabbing; }
.tdb-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.tdb-tiles { position: absolute; inset: 0; pointer-events: none; }
.tdb-tiles > img,
.tdb-tiles > .tdb-disc { position: absolute; pointer-events: none; will-change: transform; image-rendering: auto; }
/* SPHERE draws the node from the scan's own 360 instead of its floor render:
   the panorama projected about the nadir, so the floor is in the middle of the
   disc, the walls wrap around it and the ceiling runs out to the rim. The
   picture is made in the board's own script and carries its own transparency,
   so everything outside the disc is simply not there. No ring, no frame and no
   shadow — there is nothing here to draw one with. */
.tdb-planet { border-radius: 50%; }
/* The needle's "N" is the only text drawn into the plane. A font-family
   ATTRIBUTE holding var(--font) does not parse in SVG and silently leaves the
   default serif, so the family is set here, where a custom property works. */
.tdb-gfx { position: absolute; inset: 0; pointer-events: none; font-family: var(--tdb-font); }
.tdb-marquee { position: absolute; background: rgba(255, 240, 131, .10); border-radius: 2px; pointer-events: none; display: none; }

/* A scan with no top-down render is still placeable: a plain dark disc at the
   median radius of the tiles that do exist, carrying the room's own thumbnail
   and its name. Never a blank surface. It does not turn with the heading —
   there is no top-down geometry in it to align — the pin's tick shows that. */
.tdb-disc {
  border-radius: 50%;
  background: rgba(8, 9, 11, .88);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tdb-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .40; border-radius: 50%; }
.tdb-disc b {
  position: relative; z-index: 1; font-weight: 500; font-size: 10px; color: var(--tdb-ink-2);
  padding: 0 8px 14%; max-width: 100%; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- generic glass ---------- */
.tdb-glass {
  background: var(--tdb-glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--tdb-r);
}

/* ---------- top bar ---------- */
.tdb-topbar {
  position: absolute; top: 12px; left: 12px; right: 12px; height: 38px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px; z-index: 40;
}
.tdb-topbar .tdb-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .10); margin: 0 4px; }
.tdb-btn {
  height: 24px; padding: 0 10px; border-radius: var(--tdb-r);
  background: var(--tdb-glass-2); color: var(--tdb-ink-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.tdb-btn:hover { background: var(--tdb-glass-3); color: var(--tdb-ink); }
.tdb-btn[disabled] { opacity: .32; cursor: default; }
.tdb-btn[disabled]:hover { background: var(--tdb-glass-2); color: var(--tdb-ink-2); }
.tdb-btn.is-on { background: rgba(62, 224, 146, .14); color: var(--tdb-active); }
.tdb-btn.is-warn { color: var(--tdb-sel); }
.tdb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--tdb-r); background: rgba(255, 255, 255, .04); }
.tdb-seg .tdb-btn { background: transparent; height: 20px; padding: 0 9px; }
.tdb-seg .tdb-btn:hover { background: var(--tdb-glass-2); }
.tdb-seg .tdb-btn.is-on { background: rgba(62, 224, 146, .14); color: var(--tdb-active); }
/* The address is the one thing in the bar that can be any length, so it is the
   one thing that gives way — every control keeps its full label. */
.tdb-brand { color: var(--tdb-ink-3); padding-right: 4px; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-gfx text { user-select: none; }
.tdb-brand b { color: var(--tdb-ink); font-weight: 500; }
/* The turn grip. Drag it left and right to turn the whole plan on screen,
   double press it to straighten it again. The reading beside it is set the way
   BLEND and NORTH set theirs, so the three read as one family. Nothing here is
   a new value: the grip is a .tdb-btn wearing a different cursor. */
.tdb-grip { cursor: ew-resize; touch-action: none; }
.tdb-grip.is-drag { cursor: grabbing; }
.tdb-topbar .tdb-val {
  color: var(--tdb-ink); font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 0 2px; min-width: 34px; white-space: nowrap;
}
.tdb-spacer { flex: 1; }
/* The save state, in the portal's own words: Saving… / Saved just now /
   Not saved. Nothing on this board saves silently and nothing fails quietly. */
.tdb-save { color: var(--tdb-ink-3); font-size: 10.5px; white-space: nowrap; padding: 0 2px; font-variant-numeric: tabular-nums; }
.tdb-save.is-err { color: var(--err, #ff6b6b); }
.tdb-lvl {
  height: 24px; padding: 0 8px; background: var(--tdb-glass-2); color: var(--tdb-ink);
  border-radius: var(--tdb-r); appearance: none; padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%239aa3ae' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
.tdb-lvl option { background: #14161a; color: #e9edf2; }

/* ---------- info clouds ---------- */
.tdb-q {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  background: rgba(127, 180, 255, .16); color: var(--tdb-info);
  font-size: 9px; line-height: 14px; text-align: center; padding: 0;
}
.tdb-q:hover { background: rgba(127, 180, 255, .30); }
.tdb-cloud {
  position: absolute; z-index: 60; max-width: 270px; padding: 10px 12px; border-radius: var(--tdb-r);
  background: rgba(58, 104, 176, .30);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  color: #dce9ff; display: none; font-size: 11.5px; line-height: 1.55;
}
.tdb-cloud h4 { font-size: 11.5px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.tdb-cloud p { margin-top: 6px; color: #c9dcff; }

/* ---------- right rail ---------- */
/* Blend alone. The column that once stacked it against the north dial went with
   the dial: a wrapper whose only job was to hold one control is not a control. */
.tdb-rail {
  position: absolute; right: 12px; top: 62px; width: 158px; z-index: 35;
  padding: 12px;
}
.tdb-rowhead { display: flex; align-items: center; gap: 6px; color: var(--tdb-ink-3); letter-spacing: .04em; text-transform: uppercase; font-size: 9.5px; }
.tdb-rowhead .tdb-val { margin-left: auto; color: var(--tdb-ink); text-transform: none; letter-spacing: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.tdb input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin-top: 6px; cursor: pointer;
}
.tdb input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.tdb input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--tdb-ink); margin-top: -4px;
}
.tdb input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.tdb input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--tdb-ink); border: 0; }

/* ---------- the needle's own reading, on the plane ----------
   ONE compass, not two. The needle is the north control, and its reading and
   its question ride beside it in the same quiet type the rest of the board
   uses. The tag is placed by the render, which knows where the needle is. */
.tdb-northtag {
  position: absolute; z-index: 34; display: flex; align-items: center; gap: 5px;
  height: 18px; pointer-events: auto;
}
.tdb-northtag .tdb-val {
  color: var(--tdb-ink); font-size: 11px; font-variant-numeric: tabular-nums;
  line-height: 18px; white-space: nowrap;
}
/* Emerald says the same thing the needle itself says: this floor has been
   given its own needle instead of following the plan. */
.tdb-northtag .tdb-val.is-own { color: var(--tdb-active); }

/* ---------- bottom strip ---------- */
.tdb-strip {
  position: absolute; left: 12px; right: 186px; bottom: 12px; z-index: 35;
  padding: 9px 10px 10px;
}
.tdb-striphead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--tdb-ink-3); font-size: 10px; }
.tdb-striphead .tdb-count { color: var(--tdb-ink); }
.tdb-items { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
.tdb-items::-webkit-scrollbar { height: 5px; }
.tdb-items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.tdb-item {
  flex: 0 0 78px; border-radius: var(--tdb-r); background: rgba(255, 255, 255, .045);
  padding: 5px; cursor: grab; position: relative; transition: background .12s;
}
.tdb-item:hover { background: rgba(255, 255, 255, .09); }
.tdb-item .tdb-th { width: 100%; height: 46px; border-radius: 4px; background: rgba(0, 0, 0, .35); display: block; object-fit: contain; }
.tdb-item .tdb-nm { margin-top: 4px; font-size: 9.5px; color: var(--tdb-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-item .tdb-id { font-size: 8.5px; color: var(--tdb-ink-3); font-variant-numeric: tabular-nums; }
.tdb-item.is-placed { cursor: default; opacity: .42; }
.tdb-item.is-placed:hover { background: rgba(255, 255, 255, .045); }
.tdb-item.is-inview { background: rgba(255, 240, 131, .12); }
.tdb-badge {
  position: absolute; top: 8px; right: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(62, 224, 146, .18); color: var(--tdb-active); font-size: 8.5px; letter-spacing: .02em;
  max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tdb-badge.is-other { background: rgba(255, 255, 255, .10); color: var(--tdb-ink-2); }
.tdb-ghost {
  position: absolute; z-index: 55; pointer-events: none; border-radius: 50%; opacity: .75; display: none;
  object-fit: cover; background: rgba(8, 9, 11, .88);
}

/* ---------- preview ---------- */
.tdb-preview {
  position: absolute; right: 12px; bottom: 12px; width: 158px; z-index: 35; padding: 8px;
}
.tdb-preview .tdb-pv { width: 100%; height: 82px; object-fit: cover; border-radius: 4px; display: block; background: #111; }
.tdb-preview .tdb-cap { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; }
.tdb-preview .tdb-cap b { font-weight: 500; font-size: 11px; color: var(--tdb-ink); }
.tdb-preview .tdb-cap span { font-size: 9.5px; color: var(--tdb-ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.tdb-preview .tdb-tag { margin-top: 2px; font-size: 9px; color: var(--tdb-ink-3); }
/* The panel is dragged to size from its top-left corner. No button, no menu and
   no handle drawn on the glass: an invisible grab zone in the corner and the
   cursor over it are the whole affordance. The caption stays one legible line
   at every width, so a long room name gives way rather than the reading. */
.tdb-preview { touch-action: none; }
.tdb-preview .tdb-grab {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; z-index: 1;
  cursor: nwse-resize; touch-action: none;
}
.tdb-preview .tdb-cap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-preview .tdb-cap span { flex: 0 0 auto; }
.tdb-preview .tdb-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- readout ---------- */
.tdb-readout {
  position: absolute; left: 12px; top: 62px; z-index: 35; padding: 8px 10px; max-width: 230px;
}
.tdb-readout .tdb-t { color: var(--tdb-ink-3); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.tdb-readout .tdb-n { font-size: 13px; margin-top: 2px; }
.tdb-readout .tdb-l { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--tdb-ink-2); }
.tdb-readout .tdb-l i { font-style: normal; display: inline-block; width: 24px; height: 1px; vertical-align: middle; margin-right: 7px; position: relative; top: -3px; }
.tdb-readout .tdb-empty { color: var(--tdb-ink-3); font-size: 10.5px; margin-top: 3px; }
/* More than one scene picked, said plainly. A shared ring is easy to miss, and
   the fact that the selection moves and turns together is the point of it. */
.tdb-readout .tdb-sel { margin-top: 5px; display: none; font-size: 10.5px; }
.tdb-readout .tdb-sel b { display: block; font-weight: 500; color: var(--tdb-sel); }
.tdb-readout .tdb-sel span { display: block; color: var(--tdb-ink-3); }

/* ═══════════════════════════════════════════════════════════════════════════
 * THE SPHERE VIEW (CS-TOUR-05, fourth pass)
 *
 * The second of the board's two views: the scan in view, full viewport, in its
 * own 360, where a way out is placed by hand on the doorway.
 *
 * Same laws, same tokens, not one new colour: glass, no frames, no shadows, no
 * outlines, radius 6, Geist. Emerald #3EE092 is the active state — the view
 * that is open, the tool that is armed, the pointer waiting for a room. CS
 * yellow #fff083 is selection, and it means here exactly what it means on the
 * plane: this is the thing your controls are pointed at. Red never appears.
 *
 * ONE EXCEPTION, DELIBERATE. The pointer markers carry a ring. They are not
 * board chrome; they are the tour's own approved pointer drawn over a
 * photograph, and the geometry below is the tour editor's, value for value —
 * the same 36 px body, the same inset mark, the same styles. Without a ring a
 * light marker over a bright window is invisible, which is the one thing a
 * marker may never be.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Which controls exist at all. A control that belongs to one view is not shown
   in the other, rather than sitting there doing nothing. */
.tdb.is-sphere .tdb-planonly { display: none; }
.tdb:not(.is-sphere) .tdb-sphonly { display: none; }

/* ---------- the 360 itself ---------- */
.tdb-sphere { position: absolute; inset: 0; z-index: 1; background: var(--tdb-plane); }
.tdb-vh { position: absolute; inset: 0; }
.tdb-vh canvas { display: block; }
.tdb-vfail { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 340px; text-align: center; color: var(--tdb-ink-2); font-size: 12px; line-height: 1.6; }

/* The room in view, and how many ways lead out of it. The plane's readout is
   not on screen here, so this stands where it stood. */
.tdb-vtag { position: absolute; left: 12px; top: 62px; z-index: 35; padding: 7px 11px; display: flex; align-items: baseline; gap: 8px; max-width: 260px; }
.tdb-vtag b { font-weight: 500; font-size: 12px; color: var(--tdb-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-vtag em { font-style: normal; font-size: 10px; color: var(--tdb-ink-3); flex: 0 0 auto; }

/* In the sphere every scan can be opened, placed or not, so the strip stops
   dimming the ones already on the plane. */
.tdb.is-sphere .tdb-item.is-placed { opacity: 1; cursor: pointer; }
.tdb.is-sphere .tdb-item.is-placed:hover { background: rgba(255, 255, 255, .09); }

/* ---------- the inspector ---------- */
.tdb-insp {
  position: absolute; right: 12px; top: 62px; width: 238px; z-index: 35;
  padding: 10px 12px 12px; max-height: calc(100% - 220px); overflow-y: auto;
  scrollbar-width: thin;
}
.tdb-insp::-webkit-scrollbar { width: 5px; }
.tdb-insp::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.tdb-insp .tdb-t { color: var(--tdb-ink-3); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.tdb-insp .tdb-t.tdb-mt { margin-top: 12px; }
.tdb-insp .tdb-rowhead.tdb-mt { margin-top: 12px; }
.tdb-hint { color: var(--tdb-ink-3); font-size: 10.5px; line-height: 1.55; margin-top: 5px; }
.tdb-goes { font-size: 12px; color: var(--tdb-ink-2); margin: 3px 0 10px; }
.tdb-goes b { font-weight: 500; color: var(--tdb-ink); }

/* The name filter over the rooms. Glass, like everything else on this board. */
.tdb-filter {
  width: 100%; height: 24px; margin-top: 6px; padding: 0 8px;
  background: var(--tdb-glass-2); color: var(--tdb-ink); font-size: 11px;
}
.tdb-filter::placeholder { color: var(--tdb-ink-3); }
.tdb-filter:focus { background: var(--tdb-glass-3); }

/* The rooms, as their own pictures. Picking one is the whole linking gesture. */
.tdb-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.tdb-pick {
  position: relative; padding: 0; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .045); transition: background .12s;
}
.tdb-pick:hover { background: rgba(255, 255, 255, .10); }
.tdb-pick img { display: block; width: 100%; height: 46px; object-fit: cover; background: rgba(0, 0, 0, .35); }
.tdb-pick span {
  display: block; padding: 3px 5px 4px; font-size: 9.5px; color: var(--tdb-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Where it goes today. Yellow is selection here as it is everywhere else. */
.tdb-pick.is-on { background: rgba(255, 240, 131, .16); }
.tdb-pick.is-on span { color: var(--tdb-sel); }

/* ---------- chips: the look, the size, which ways ---------- */
.tdb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tdb-chip {
  height: 22px; padding: 0 9px; border-radius: var(--tdb-r);
  background: var(--tdb-glass-2); color: var(--tdb-ink-2); font-size: 10.5px;
  transition: background .12s, color .12s;
}
.tdb-chip:hover { background: var(--tdb-glass-3); color: var(--tdb-ink); }
.tdb-chip.is-on { background: rgba(62, 224, 146, .14); color: var(--tdb-active); }
.tdb-acts { margin-top: 12px; display: flex; gap: 6px; }
.tdb-acts .tdb-btn { flex: 1; justify-content: center; }

/* ---------- the pointer markers, in the photo ----------
   The tour editor's own geometry. One size variable drives the body, so the
   three named sizes are three numbers and not three copies of the rule. */
.tdb-hs {
  --hs: 36px;
  position: relative; width: var(--hs); height: var(--hs);
  margin: calc(var(--hs) / -2) 0 0 calc(var(--hs) / -2);
  border-radius: 50%; cursor: grab; touch-action: none;
  background: rgba(233, 237, 242, .22);
  border: 2px solid rgba(233, 237, 242, .92);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.tdb-hs:active { cursor: grabbing; }
.tdb-hs::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: rgba(233, 237, 242, .92); }
.tdb-hs--s { --hs: 28px; }
.tdb-hs--m { --hs: 36px; }
.tdb-hs--l { --hs: 46px; }
.tdb-hs--chevron { border-radius: var(--tdb-r); }
.tdb-hs--chevron::after { inset: 25%; border-radius: 3px; transform: rotate(45deg); }
.tdb-hs--pill {
  width: calc(var(--hs) * 1.45); height: calc(var(--hs) * .72); border-radius: 999px;
  margin: calc(var(--hs) * -.36) 0 0 calc(var(--hs) * -.725);
}
.tdb-hs--pill::after { inset: 22% 42%; border-radius: 999px; }
.tdb-hs--minimal { background: none; border-color: rgba(233, 237, 242, .75); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tdb-hs--minimal::after { inset: 38%; }
/* Selected: the same yellow a selected tile wears on the plane. */
.tdb-hs.is-sel { border-color: var(--tdb-sel); }
.tdb-hs.is-sel::after { background: var(--tdb-sel); }
/* Placed, waiting to be told which room. Emerald, because it is the live tool. */
.tdb-hs.is-new { cursor: default; border-style: dashed; border-color: var(--tdb-active); animation: tdb-blink 1s ease-in-out infinite; }
.tdb-hs.is-new::after { background: var(--tdb-active); }
@keyframes tdb-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tdb-hs.is-new { animation: none; } }
.tdb-hs-lbl {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: 10.5px; color: var(--tdb-ink); padding: 3px 8px; border-radius: 999px;
  background: rgba(8, 9, 11, .62);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
/* THE TAP CIRCLE, drawn only here. The buyer page never draws it — this ring
   exists so the person setting it can see the size he is setting. */
.tdb-hs-hit {
  position: absolute; left: 50%; top: 50%;
  width: calc(10px * var(--hit, 6)); height: calc(10px * var(--hit, 6));
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(233, 237, 242, .45);
  border-radius: 50%; pointer-events: none;
}