/* The click-through walkthrough on /tour (2026-11-01). */
.wt { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.wt-lead { margin: 0; color: var(--ink-2); max-width: 62ch; }
.wt-chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-chip { font: inherit; font-weight: 500; font-size: .95rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.wt-chip:hover { background: var(--sand); }
.wt-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wt-chip:focus-visible, .wt-ctrl:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.wt-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.wt-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); cursor: default; }
.wt-stage.phone { max-width: 390px; justify-self: center; width: 100%; border-radius: 28px; border-width: 6px; border-color: var(--ink); }
.wt-screen { position: relative; }
.wt-img { display: block; width: 100%; height: auto; }
.wt-spot { position: absolute; padding: 0; margin: 0; background: rgba(31, 122, 77, .12); border: 2px solid var(--green); border-radius: 10px; cursor: pointer; box-shadow: 0 0 0 4px rgba(31, 122, 77, .25); animation: wt-pulse 1.6s ease-out infinite; min-width: 28px; min-height: 28px; transform: translate(0, 0); }
.wt-spot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wt-spot.nudge { animation: wt-nudge .5s ease-in-out 2, wt-pulse 1.6s ease-out infinite .9s; }
@keyframes wt-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 122, 77, .45); } 70% { box-shadow: 0 0 0 14px rgba(31, 122, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, 0); } }
@keyframes wt-nudge { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-4px, 0); } 75% { transform: translate(4px, 0); } }
@media (prefers-reduced-motion: reduce) { .wt-spot, .wt-spot.nudge { animation: none; } }
.wt-side { position: sticky; top: calc(var(--head) + 16px); display: flex; flex-direction: column; gap: 12px; background: var(--ink); color: #f3e9d2; border-radius: var(--radius); padding: 20px; }
.wt-count { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #b9c8bd; }
.wt-say { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.35rem; line-height: 1.25; color: #fff; }
.wt-say::before { content: "👆 "; }
.wt-say.done::before { content: "✓ "; color: #9fd8b8; }
.wt-what { margin: 0; color: #d6dfd8; font-size: .95rem; }
.wt-ctrls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wt-ctrl { font: inherit; font-size: .9rem; font-weight: 500; border-radius: 999px; padding: 8px 14px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #f3e9d2; }
.wt-ctrl:disabled { opacity: .4; cursor: default; }
.wt-next { background: var(--green); border-color: var(--green); color: #fff; }
@media (max-width: 900px) {
  .wt-body { grid-template-columns: 1fr; }
  .wt-side { position: static; order: -1; }
  .wt-say { font-size: 1.15rem; }
}
.wt-try { color: #9fd8b8; font-size: .9rem; font-weight: 500; }
.wt-try:hover { color: #fff; }
/* Phones: a desktop screen keeps a readable size and scrolls sideways to the spot to tap. */
@media (max-width: 640px) {
  .wt-stage:not(.phone) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wt-stage:not(.phone) .wt-screen { width: 820px; }
}