/* /tour/ — the guided demo. Its furniture only: the chapter list, the step card and the
   frame that holds Slate's window. The window itself is tour/app.html, styled by the app's
   own stylesheet, and nothing here reaches into it. */

.tour-page { --side: 300px; }

.tour-top {
  display: flex; align-items: center; gap: 14px;
  max-width: 1560px; margin: 0 auto; padding: 18px 24px 0;
}
.tour-top .back {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgb(var(--text-muted)); text-decoration: none; font-size: 13px;
}
.tour-top .back:hover { color: rgb(var(--text)); }
.tour-top .back img { width: 22px; height: 22px; border-radius: 6px; }
.tour-top .grow { flex: 1; }
.tour-top .theme { position: static; }

.tour {
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 24px;
  max-width: 1560px; margin: 0 auto; padding: 18px 24px 48px; align-items: start;
}

/* ── The left column ──────────────────────────────────────────────────── */
.tour-side {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px;
  /* The step card, with Back and Next, must fit on any laptop screen. The column is
     never taller than the window below the top bar (88px: the bar, plus a margin);
     the chapter list gives up its height and scrolls. */
  max-height: calc(100vh - 88px);
}
.tour-intro h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.024em; }
.tour-intro p { margin: 0; font-size: 13.5px; color: rgb(var(--text-muted)); line-height: 1.5; }

.chapters-card { padding: 0; flex: 1 1000 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
/* The list shrinks first (to 120px). Past that, a long step's text scrolls inside the
   card, so Back and Next still stay on screen. */
.step-card { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.step-card > * { flex: none; }
.step-card > .step-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.chapters { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.chapters button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: none; font: inherit; font-size: 13.5px; color: rgb(var(--text-muted));
  padding: 7px 10px; border-radius: var(--r-ctl); cursor: pointer;
}
.chapters button:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.chapters button[aria-current="step"] { background: rgb(var(--surface-2)); color: rgb(var(--text)); font-weight: 600; }
.chapters .ico { width: 16px; height: 16px; flex: none; opacity: .85; }
.chapters .n { margin-left: auto; font-size: 11px; color: rgb(var(--text-faint)); font-variant-numeric: tabular-nums; font-weight: 400; }
.chapters .done .n::before { content: "✓ "; color: rgb(var(--ok-fg)); }

/* ── The step card ────────────────────────────────────────────────────── */
.step-card { padding: 16px 16px 14px; }
.step-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--text-faint)); font-weight: 600; margin-bottom: 8px; }
.step-kicker .count { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.step-card h2 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.016em; line-height: 1.3; }
.step-body { font-size: 13.5px; line-height: 1.55; color: rgb(var(--text-muted)); }
.step-body p { margin: 0 0 8px; }
.step-body p:last-child { margin-bottom: 0; }
.step-body strong { color: rgb(var(--text)); font-weight: 600; }
.step-body kbd {
  font: 500 11px var(--mono, ui-monospace, monospace); padding: 1px 5px; border-radius: 4px;
  background: rgb(var(--surface-2)); border: 1px solid rgb(var(--edge)); color: rgb(var(--text));
}
.step-try[hidden] { display: none; }
.step-try {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px;
  border-radius: var(--r-card); background: rgb(var(--brand-500) / .09); color: rgb(var(--text));
  font-size: 13px; line-height: 1.45;
}
.step-try svg { flex: none; margin-top: 2px; color: rgb(var(--brand-500)); }
.step-dots { display: flex; gap: 4px; margin: 14px 0 12px; flex-wrap: wrap; }
.step-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgb(var(--n-300)); cursor: pointer; }
:root[data-theme="dark"] .step-dots button { background: rgb(var(--n-700)); }
.step-dots button[aria-current="step"] { width: 18px; border-radius: 4px; background: rgb(var(--brand-500)); }
.step-nav { display: flex; gap: 8px; }
.step-nav button {
  height: 32px; padding: 0 13px; border-radius: var(--r-ctl); font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid rgb(var(--edge-2)); background: rgb(var(--surface)); color: rgb(var(--text)); cursor: pointer;
}
.step-nav button:hover { border-color: rgb(var(--edge-hover)); }
.step-nav .primary { margin-left: auto; background: rgb(var(--brand-600)); border-color: transparent; color: #fff; }
.step-nav .primary:hover { background: rgb(var(--brand-500)); }
.step-nav button:disabled { opacity: .4; cursor: default; }
.step-keys { margin: 10px 0 0; font-size: 11.5px; color: rgb(var(--text-faint)); }

/* ── The window ───────────────────────────────────────────────────────── */
.win-wrap { position: relative; width: 100%; }
.win-frame {
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  background: #0a0c10; box-shadow: var(--tile-shadow);
  outline: 1px solid rgb(255 255 255 / .08); outline-offset: -1px;
}
.win-bar { position: absolute; top: 0; left: 0; z-index: 2; display: flex; gap: 8px; padding: 15px 16px; pointer-events: none; }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.win-frame iframe {
  position: absolute; top: 0; left: 0; width: 1320px; height: 860px; border: 0;
  transform-origin: 0 0; background: #0a0c10;
}
.win-note { margin: 10px 2px 0; font-size: 12px; color: rgb(var(--text-faint)); }
.win-loading { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .5); font-size: 13px; }

/* A click that lands on nothing: the ring flashes to say where to look. */
.win-wrap.nudge .win-frame { animation: tour-nudge .35s; }
@keyframes tour-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .win-wrap.nudge .win-frame { animation: none; } }

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .tour { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 16px 40px; }
  .tour-top { padding: 14px 16px 0; }
  .tour-side { position: static; display: contents; max-height: none; }
  .tour-intro { order: 1; }
  .chapters-card { order: 2; overflow: hidden; min-height: 0; }
  .step-card > .step-body { overflow: visible; }
  .chapters { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters button { white-space: nowrap; width: auto; }
  .chapters .n { display: none; }
  .win-wrap { order: 3; }
  .step-card { order: 4; }
  .step-keys { display: none; }
}