/* Guided tour: a spotlight on one part of the screen and a card that explains it. */
.tour { position: fixed; inset: 0; z-index: 90; }
.tour-block { position: absolute; inset: 0; }                       /* swallows clicks on the page underneath */
.tour-spot { position: fixed; border-radius: var(--r2); box-shadow: 0 0 0 200vmax rgba(26, 34, 45, .62); outline: 2px solid var(--on-night); outline-offset: 0; transition: left .2s, top .2s, width .2s, height .2s; pointer-events: none; }
.tour-card { position: fixed; background: var(--surface); border-radius: var(--r3); padding: var(--s5); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s3); max-width: calc(100vw - 32px); }
.tour-card.docked { left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); }
.tour-count { font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--brass); }
.tour-body { font-size: var(--t-md); color: var(--ink-2); }
.tour-actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.tour-actions .btn.sm { min-height: 44px; padding: 0 var(--s4); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }