/* Clerestory 768 walkthrough + gallery in "03 / A deeper perspective" (index.html #step-inside) and its preview dialog.
   The tour is the Clerestory 768 film on YouTube (clerestory-tour.js VIDEO), loaded only when a visitor starts it; the
   site's photo-free rule hides YouTube frames, so the tour stage's frame is let through here. */
.ff-tour { background: var(--pc-bg); gap: 14px; justify-content: flex-start; }
/* approved Clerestory images show inside the tour panels too (the dialog sits outside #main) */
body.pc-style .ff-tour img[data-ff-asset="clerestory"],
body.pc-style .ff-tour-stage > iframe { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.ff-tour .df-slot-top { color: var(--pc-blue); }
.ff-tour-stage { position: relative; flex: none; min-height: 0; aspect-ratio: 16 / 9; max-width: 100%; background: #C5D0B6; overflow: hidden; }
.ff-tour-stage > img, .ff-tour-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ff-tour-stage > img { object-fit: cover; }
.ff-tour-stage > img[data-fit="contain"] { object-fit: contain; background: #fbfaf7; }
.ff-tour-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; border: 1px solid var(--pc-bg); background: #1d2a21cc; color: var(--pc-bg); font: 11px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(3px); }
.ff-tour-start:hover { background: #1d2a21ee; }
.ff-tour-start:focus-visible, .ff-tour-tabs button:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: 3px; }
.ff-tour-start .df-cross { width: 26px; height: 26px; font-size: 16px; border-color: currentColor; color: inherit; }
.ff-tour-note { position: absolute; left: 0; bottom: 0; right: 0; padding: 22px 12px 9px; font: 8px/1.6 "IBM Plex Mono", monospace; letter-spacing: .06em;
  color: #fbfaf7; background: linear-gradient(transparent, #1d2a21b3); pointer-events: none; }
.ff-tour-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ff-tour-tabs button { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--pc-muted); text-align: left; cursor: pointer;
  font: 8px/1.4 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; min-width: 0; }
.ff-tour-tabs button span.ff-thumb { display: block; aspect-ratio: 16 / 10; background: #C5D0B6 center / cover no-repeat; border: 1px solid var(--pc-hair); position: relative; }
.ff-tour-tabs button[data-kind="tour"] span.ff-thumb { display: grid; place-items: center; color: var(--pc-blue); font-size: 15px; }
.ff-tour-tabs button[aria-selected="true"] { color: var(--pc-ink); }
.ff-tour-tabs button[aria-selected="true"] span.ff-thumb { outline: 2px solid var(--pc-blue); outline-offset: 1px; }
.ff-tour figcaption a { color: inherit; }

/* dialog: the same tour, larger; the copy column narrows so the tour gets most of the width */
.df-tour-dialog .df-tour-dialog-body:has(.ff-tour) { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 32px; }
.df-tour-dialog .ff-tour { min-height: 0; padding: 18px; }
.df-tour-dialog .ff-tour-stage { aspect-ratio: 16 / 9; }
.ff-tour-reqs { font: 9px/1.8 "IBM Plex Mono", monospace; color: var(--pc-muted); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

@media (prefers-reduced-motion: reduce) { .ff-tour-start { backdrop-filter: none; } }
@media (max-width: 760px) {
  .ff-tour-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ff-tour-start { padding: 12px 15px; font-size: 10px; }
}