/* ── /listings/:slug/tour — the 3D tour editor's LAYOUT ONLY ────────────────
 *
 * CS-TOUR-01 P1 (2026-09-03), built from the approved mockup
 * `_mockups/tour-editor-v1.html`.
 *
 * THIS SHEET ADDS NO DESIGN. Every token, face, colour, radius, shadow,
 * button, tile, chip, input, meter and table style on this page is the
 * Listing Composer's own (assets/css/listing-composer.css) or main.css. What
 * is here is the arrangement the composer has no rule for: the two-column
 * body, the room tile + name pair, the pano viewer and the dots inside it,
 * the link row and the links table.
 *
 * Its own sheet for the same reason the composer has one — main.css and
 * agent-dash.css belong to other lanes right now. Fold into
 * listing-composer.css when this lane lands.
 *
 * NOT HERE, deliberately:
 *   · the delete dialog — components/confirm-typed.js is the portal's one
 *     type-to-confirm dialog and this page uses it (the mockup drew its own
 *     only because a static cannot import);
 *   · the mockup's theme chip, which is not part of the design.
 */

/* Two columns: rooms on the left, the link editor on the right. */
.te-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-6);
}
@media (max-width: 1180px) { .te-body { grid-template-columns: 1fr; } }

.te-sec { min-width: 0; }
.te-sec .lcx-sec-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.te-sec .lcx-sec-head .muted { flex-basis: 100%; margin: 0; }

/* ── Rooms: the composer's cell, with a name under it ─────────────────── */
.te-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.te-room .lcx-cell { aspect-ratio: 2 / 1; }
.te-room .lcx-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.te-room-name { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.te-room-name .input { min-width: 0; flex: 1 1 auto; height: 34px; font-size: 13px; }
.te-room-name .input.is-empty { border-color: var(--cat-red); }
.te-room-meta { margin-top: 6px; font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; gap: var(--sp-2); }
.te-room-meta b { color: var(--ink-2); font-weight: 600; }
.te-room.is-start .lcx-n { background: var(--ink); color: var(--bg-elevated); }
/* Drop target for the 360 photos — the composer's own treatment, same token. */
.te-rooms.is-drop,
.te-sec .empty.is-drop {
  outline: 2px dashed var(--lcx-green);
  outline-offset: var(--sp-2);
  border-radius: var(--r-2);
}

/* ── The link editor: the viewer and the row under it ─────────────────── */
.te-viewer {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: crosshair;
}
.te-viewer-tag {
  position: absolute; left: 12px; top: 12px; z-index: 5; pointer-events: none;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 10px;
}
.te-viewer-tag em { font-style: normal; color: var(--ink-3); font-weight: 500; }

/* A link on the floor. Ring + dot, painted from the page's own ink. */
.te-hs {
  position: relative; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--bg-elevated) 30%, transparent);
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.te-hs::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg-elevated); }
.te-hs.is-sel { border-color: var(--brand); }
.te-hs.is-sel::after { background: var(--brand); }
.te-hs.is-new { border-style: dashed; border-color: var(--brand); animation: te-blink 1s ease-in-out infinite; }
.te-hs.is-new::after { background: var(--brand); }
@keyframes te-blink { 50% { opacity: .45; } }
.te-hs-lbl {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
}

.te-linkrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.te-linkrow .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); flex: none; }
.te-linkrow .lcx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.te-linkrow .sp { flex: 1 1 auto; }
.te-both { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.te-both input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }

/* ── The links table: every header sorts (components/table-sort.js) ────── */
.te-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: 13px; }
.te-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink-3); font-weight: 600; font-size: 12px; }
.te-table th .cso-sort { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.te-table th .cso-sort.is-on { color: var(--ink); }
.te-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; font-variant-numeric: tabular-nums; }
.te-table td.n { color: var(--ink); font-weight: 600; }
.te-table tr:hover td { background: var(--bg-hover); }
.te-table .lcx-tb--sm { height: 30px; padding: 0 10px; font-size: 12px; }

/* ── Publish row: the composer's own tour row ─────────────────────────── */
.te-pub { margin-top: var(--sp-8); }
.te-pub .lcx-tour-url.is-off { color: var(--ink-4); }
.te-pub-note { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--ink-3); }

/* ── Remove: red is danger only ───────────────────────────────────────── */
.te-remove { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.te-remove .muted { margin: var(--sp-2) 0 var(--sp-4); }

@media (prefers-reduced-motion: reduce) { .te-hs.is-new { animation: none; } }

/* ── CS-TOUR-02 · the automatic pass ──────────────────────────────────────
 *
 * Added 2026-09-03 for the alignment job, the mini-map and the pairs it could
 * not solve. STILL NO DESIGN: the chips are .lcx-chip, the buttons are
 * .lcx-tb, the bar is components/progress-bar.js, and the map's own ink lives
 * in components/tour-map.js as tokens. What is here is arrangement only.
 */

/* The floor a room is on, on its tile — a quiet label, never a badge. */
.te-lvl {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ── The mini-map, under the viewer ───────────────────────────────────── */
.te-map { margin: var(--sp-4) 0 0; }
.te-map[hidden] { display: none; }
.te-map-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.te-map-title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.te-map-head .lcx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.te-map-head .lcx-chip { padding: 4px 10px; font-size: 12px; }
.te-map-canvas {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}

/* ── The pairs the automatic pass could not place ──────────────────────── */
.te-hand { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.te-hand[hidden] { display: none; }
.te-hand .muted { margin: var(--sp-2) 0 var(--sp-4); }
.te-hand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.te-hand-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: 13px; color: var(--ink-2);
}
.te-hand-pair { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-hand-pair b { color: var(--ink); font-weight: 600; }

/* ── CS-TOUR-03 · THE LAYOUT BOARD ────────────────────────────────────────
 *
 * Dom, 2026-09-04: "there should be a layout for me where I can rotate and
 * move the single scans on the map to match them."
 *
 * STILL NO DESIGN. The fold is components/collapse.js, the chips are
 * .lcx-chip, the buttons are .lcx-tb, the fields are .input, and every colour
 * on the board itself is read out of the page's own tokens by the canvas.
 * What is here is arrangement: the header that folds, the toolbar, the stage
 * the canvas fills, the selected-scan row and the list of what is unsaved.
 *
 * The existing mini-map (.te-map) is NOT touched — it shows what the automatic
 * pass worked out; this is where a human corrects it.
 */

.te-lay { margin-top: var(--sp-8); }
.te-lay[hidden] { display: none; }

/* The header IS the fold. One button, the whole width. */
.te-lay-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0 0 var(--sp-4);
  font: inherit; color: inherit;
}
.te-lay-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-1); }
.te-lay-caret { color: var(--ink-3); margin-top: 5px; transition: transform 140ms var(--ease, cubic-bezier(.4, 0, .2, 1)); }
.te-lay.is-collapsed .te-lay-caret { transform: rotate(-90deg); }
.te-lay.is-collapsed .te-lay-body { display: none; }
.te-lay-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.te-lay-h .h3 { margin: 0; }
.te-lay-h .muted { margin: 0; font-size: 13px; }
.te-lay-count { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 4px; }

/* The toolbar, spacious: chips left, the tools right. */
.te-lay-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.te-lay-bar .lcx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.te-lay-bar .lcx-chip { padding: 4px 10px; font-size: 12px; }
.te-lay-bar .sp { flex: 1 1 auto; }
.te-lay-op {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.te-lay-op input[type="range"] { width: 120px; accent-color: var(--brand); }
.te-lay-op b { color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 34px; }

/* The stage. The canvas fills it; the board's own ink is drawn, not styled. */
.te-lay-stage {
  position: relative;
  height: clamp(380px, 52vh, 660px);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.te-lay-stage canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
.te-lay-stage canvas:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.te-lay-hint { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--ink-3); }
.te-lay-empty { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--ink-3); }
.te-lay-empty[hidden] { display: none; }

/* The selected scan: its number, its name, its three numbers. */
.te-lay-insp {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.te-lay-insp[hidden] { display: none; }
.te-lay-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--ink); color: var(--bg-elevated);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.te-lay-name { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.te-lay-f {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
}
.te-lay-f .input { width: 88px; height: 32px; font-size: 13px; font-variant-numeric: tabular-nums; }
.te-lay-f i { font-style: normal; color: var(--ink-4); }
.te-lay-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.te-lay-lock input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }

/* What is unsaved, and what the save did. A tick per scan, nothing louder. */
.te-lay-changed {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.te-lay-changed[hidden] { display: none; }
.te-lay-crow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.te-lay-crow:hover { background: var(--bg-hover); }
.te-lay-crow i { font-style: normal; color: var(--ink-4); width: 14px; text-align: center; }
.te-lay-crow i.ok { color: var(--lcx-green, var(--ok)); }
.te-lay-crow i.err { color: var(--cat-red); }
.te-lay-crow b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 20px; }
.te-lay-crow span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-lay-crow em { font-style: normal; color: var(--ink-4); font-size: 12px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .te-lay-caret { transition: none; } }

/* ══ CS-TOUR-04 · THE GUIDED FLOW ═══════════════════════════════════════════
 *
 * Dom, 2026-09-04: "very intuitive, straightforward, no friction". Ten
 * numbered steps down the left, the real tour running down the right.
 *
 * STILL NO NEW DESIGN. Every colour, radius, face, chip, input and button
 * below is the portal's own token — Geist, the emerald accent, red only where
 * something is destroyed. What is here is arrangement: the two-column body,
 * the step head, the stage, the picker grids and the live rail.
 */

/* The page: steps left, the live tour right, and it stays put while you work. */
.te-flow-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-6);
}
@media (max-width: 1180px) { .te-flow-body { grid-template-columns: 1fr; } }

.te-steps { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── One step ─────────────────────────────────────────────────────────── */
.te-step {
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
}
.te-step[hidden] { display: none; }
.te-step-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
}
.te-step-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-1); }
.te-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.te-step-n--quiet { background: var(--bg-sunken); color: var(--ink-3); }
.te-step-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.te-step-h .h3 { margin: 0; }
.te-step-h .muted { margin: 0; font-size: 13px; }
.te-step-count { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 6px; white-space: nowrap; }
.te-step-caret { flex: none; color: var(--ink-3); margin-top: 8px; transition: transform 140ms var(--ease, cubic-bezier(.4, 0, .2, 1)); }
.te-step.is-collapsed .te-step-caret { transform: rotate(-90deg); }
.te-step.is-collapsed .te-step-body { display: none; }
.te-step-body { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.te-step-foot { margin: 0; font-size: 13px; }
.te-step .te-remove { margin-top: 0; }

/* The advanced drawer is quieter than a step, because it is not one. */
.te-adv { background: var(--bg-sunken); }

/* ── Fields: sliders, chips and boxes, spacious ───────────────────────── */
.te-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.te-fields--stack { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
.te-f { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--ink-2); }
.te-f--wide { align-items: flex-start; flex-direction: column; gap: 6px; }
.te-f--wide .input { width: 100%; }
.te-f input[type="range"] { width: 150px; accent-color: var(--brand); }
.te-f input[type="color"] { width: 38px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-1); background: none; }
.te-f b { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 62px; }
.te-f-lbl { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.te-chk { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--ink-2); }
.te-chk input { accent-color: var(--brand); }
.te-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.te-acts-note { font-size: 13px; }
.te-sub { border-top: 1px solid var(--line-soft); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.te-sub .h4 { margin: 0; font-size: 14px; }
.te-note {
  margin: var(--sp-4) 0 0; font-size: 13px; color: var(--ink-2);
  background: var(--bg-sunken); border: 1px solid var(--line-soft);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
}

/* ── The stage: one viewer, moved between the steps ───────────────────── */
.te-stage { display: flex; flex-direction: column; gap: var(--sp-3); }
.te-stage-bar { min-width: 0; overflow-x: auto; }
.te-stage-bar .lcx-chips { flex-wrap: nowrap; }
.te-stage-hint { margin: 0; font-size: 13px; color: var(--ink-3); }
.te-viewer-in { position: absolute; inset: 0; transform-origin: 50% 50%; }
.te-stage[data-mode="tag"] .te-viewer,
.te-stage[data-mode="gallery"] .te-viewer,
.te-stage[data-mode="walk"] .te-viewer { cursor: crosshair; }
.te-stage[data-mode="level"] .te-viewer { cursor: grab; }

/* The horizon guide: the true middle of the photo, and a quarter either way. */
.te-horizon { position: absolute; inset: 0; pointer-events: none; }
.te-horizon i, .te-horizon b {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(255, 255, 255, .55);
}
.te-horizon i { top: 50%; border-top-style: solid; }
.te-horizon b { top: 25%; box-shadow: 0 50vh 0 -1px rgba(255, 255, 255, .22); }

/* The click area a pointer answers to — editor only, never on the tour. */
.te-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(255, 255, 255, .5);
  border-radius: 50%; pointer-events: none; opacity: .8;
}
.te-hs--tag { opacity: .92; }

/* ── Pickers: the stills that go into a gallery ───────────────────────── */
.te-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-3); }
.te-pick {
  position: relative; padding: 0; border: 2px solid transparent; background: var(--bg-sunken);
  border-radius: var(--r-2); overflow: hidden; aspect-ratio: 3 / 2; cursor: pointer;
}
.te-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.te-pick.is-on { border-color: var(--brand); }
.te-pick-n {
  position: absolute; top: 5px; left: 5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--brand); color: var(--brand-ink);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.te-pick:not(.is-on) .te-pick-n { display: none; }

/* ── The layout tiles ─────────────────────────────────────────────────── */
.te-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-4); }
.te-lay-tile {
  display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3);
  background: var(--bg-sunken); border: 2px solid transparent; border-radius: var(--r-2);
  cursor: pointer; text-align: left;
}
.te-lay-tile.is-on { border-color: var(--brand); }
.te-lay-tile-art {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-1);
  overflow: hidden; background: linear-gradient(135deg, #3a3f4a, #171a20);
}
.te-lay-tile-art i, .te-lay-tile-art b, .te-lay-tile-art u {
  position: absolute; display: block; border-radius: 6px; background: rgba(255, 255, 255, .30);
  backdrop-filter: blur(3px);
}
.te-lay-tile-art i { left: 8%; top: 10%; width: 44%; height: 16%; }
.te-lay-tile-art b { left: 8%; bottom: 10%; right: 8%; height: 20%; }
.te-lay-tile-art u { left: 46%; top: 44%; width: 12%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .62); }
.te-lay-tile-art--vine { background: linear-gradient(135deg, #4a2f86, #1d1030); }
.te-lay-tile-art--noir { background: linear-gradient(135deg, #23262b, #0b0c0e); }
.te-lay-tile-art--maison { background: linear-gradient(135deg, #8a7a63, #3a3128); }
.te-lay-tile-art--stone { background: linear-gradient(135deg, #cdc9c2, #7e7a73); }
.te-lay-tile-n { font-size: 13px; font-weight: 600; color: var(--ink); }
.te-lay-tile-note { font-size: 12px; color: var(--ink-3); }

/* ── Swatches ─────────────────────────────────────────────────────────── */
.te-sw {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw); border: 2px solid var(--bg-elevated); box-shadow: 0 0 0 1px var(--line);
}
.te-sw.is-on { box-shadow: 0 0 0 2px var(--brand); }

/* ── Simple lists: what is placed, what is in the library ─────────────── */
.te-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.te-li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-soft);
  border-radius: var(--r-2); background: var(--bg-sunken); font-size: 13px;
}
.te-li.is-on { border-color: var(--brand); }
.te-li--none { color: var(--ink-3); justify-content: center; background: none; border-style: dashed; }
.te-li-kind { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: none; min-width: 54px; }
.te-li-main { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The drone tick on a room tile ────────────────────────────────────── */
.te-room-drone { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.te-room-drone input { accent-color: var(--brand); }

/* ── The embed box ────────────────────────────────────────────────────── */
.te-embed { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.te-embedcode { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ── The live rail: the real tour, beside the work ────────────────────── */
.te-live {
  position: sticky; top: var(--sp-6);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.te-live-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.te-live-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.te-live-frame {
  position: relative; border-radius: var(--r-2); overflow: hidden;
  background: var(--bg-sunken); aspect-ratio: 9 / 14; max-height: 62vh;
}
.te-live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.te-live-empty {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  padding: var(--sp-6); text-align: center; font-size: 13px; color: var(--ink-3);
}
.te-live-note { margin: 0; font-size: 12px; }
@media (max-width: 1180px) { .te-live { position: static; } .te-live-frame { aspect-ratio: 16 / 10; max-height: none; } }

/* ── Pointer styles, in the editor, so the picker is not a promise ─────────
 * The buyer page draws its own; these are the same four shapes so the choice
 * is made against something real rather than a word. */
.te-hs--chevron { border-radius: var(--r-2); }
.te-hs--chevron::after { inset: 9px; border-radius: 3px; transform: rotate(45deg); }
.te-hs--pill { width: 52px; height: 26px; margin: -13px 0 0 -26px; border-radius: 999px; }
.te-hs--pill::after { inset: 6px 16px; border-radius: 999px; }
.te-hs--minimal { background: none; border-color: rgba(255, 255, 255, .75); box-shadow: none; }
.te-hs--minimal::after { inset: 14px; }

/* Tags, panels, video, links and galleries: glass, soft, never a box with a
 * hard outline (Dom, 2026-09-04 07:00 — "all elegant, Apple-class"). */
.te-hs--tag {
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 12px;
  background: rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.te-hs--tag::after { inset: 10px; border-radius: 4px; background: rgba(255, 255, 255, .9); }
.te-hs--gallery { width: 40px; height: 30px; margin: -15px 0 0 -20px; border-radius: 10px; }
.te-hs--gallery::after { inset: 7px 9px; border-radius: 3px; }
.te-hs--tag .te-hs-lbl { bottom: 38px; }

/* ── LONG LISTS FOLD THEMSELVES (Dom 2026-09-04 08:55) ────────────────────
 * "Collapsed by default when longer than six items — they take too much
 * space." The rows past the sixth are hidden; the button underneath says how
 * many there are, so a folded list never reads as an empty one. */
.te-clamped > *:nth-child(n+7) { display: none; }
.te-clamp-b { align-self: flex-start; margin-top: var(--sp-2); }