/* ── The tour (src/ui/tour.js) ──
   The screen dims; the part being explained stays lit, and a card beside it
   says what it is. The spot and the card are placed at once, never slid: only
   the card fades and rises a little as each step appears. */
#cms-tour { position: fixed; inset: 0; z-index: 700; }
#cms-tour.tour-center { background: var(--overlay); }
.tour-spot { position: fixed; border-radius: var(--r-md); box-shadow: 0 0 0 9999px var(--overlay); outline: 2px solid var(--accent); outline-offset: 2px; pointer-events: none; }
.tour-card { position: fixed; width: min(340px, calc(100% - 24px)); padding: 16px 16px 12px; border: 1.5px solid var(--press-color); border-radius: var(--r-lg); background: var(--surface); box-shadow: 4px 4px 0 var(--press-color); color: var(--ink); }
#cms-tour.tour-center .tour-card { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 24px)); padding: 24px 24px 16px; }
.tour-card.tour-in { animation: tour-in var(--dur-3) var(--ease-out); }
#cms-tour.tour-center .tour-card.tour-in { animation: tour-in-center var(--dur-3) var(--ease-out); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tour-in-center { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.tour-step { font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.tour-card h2 { font-size: 18px; margin: 0 0 8px; }
#cms-tour.tour-center .tour-card h2 { font-size: 22px; }
.tour-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-gap { flex: 1; }
.tour-actions .btn { min-height: 40px; }
.tour-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .tour-actions .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tour-card.tour-in, #cms-tour.tour-center .tour-card.tour-in { animation: none; } }
:root[data-motion="reduced"] .tour-card.tour-in, :root[data-motion="reduced"] #cms-tour.tour-center .tour-card.tour-in { animation: none; }
@media print { #cms-tour { display: none !important; } }