/* ── /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; } }