/* css/tour.css: interactive tutorial (see js/tour.js) */

/* 🎓 Tutorial button in the header, styled to match the 📖 User Guide link */
.tour-launch {
  color: var(--accent2); font-weight: 600; font-size: 11px; letter-spacing: 0.05em;
  font-family: var(--font-body); text-shadow: none; cursor: pointer;
  background: var(--bg3); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
}
@media (hover: hover) { .tour-launch:hover { border-color: var(--border2); background: var(--bg4); } }

.tour-root { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }

/* Swallows clicks on the page while the tour is open */
.tour-blocker { position: absolute; inset: 0; pointer-events: auto; }
.tour-root.tour-dim .tour-blocker { background: rgba(8, 6, 14, 0.72); }

/* Highlight box; its huge shadow darkens everything around it */
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 6, 14, 0.72), 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow);
}
/* Animate only when moving to another step; while the page scrolls the box follows instantly. */
.tour-root.tour-anim .tour-spot { transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }

.tour-card {
  position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 32px));
  background: var(--bg2); color: var(--text); border: 1px solid var(--border2);
  border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  font-family: var(--font-body); font-size: 13px; line-height: 1.55;
  outline: none;
}
.tour-card-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); }
.tour-card-sheet {
  left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto;
  max-height: 46vh; overflow-y: auto;
}

.tour-progress { height: 3px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.tour-progress-fill { height: 100%; background: var(--accent); width: 0; transition: width .25s ease; }
.tour-count { font-size: 10px; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.tour-title { font-family: var(--font-head); font-size: 15px; color: var(--gold); margin-bottom: 8px; letter-spacing: .02em; }
.tour-body { color: var(--text2); }
.tour-body b { color: var(--text); font-weight: 600; }
.tour-body code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.tour-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
.tour-nav { display: flex; gap: 6px; }
.tour-skip, .tour-back, .tour-next {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 20px; padding: 7px 14px; border: none;
}
.tour-skip { background: none; color: var(--text3); padding-left: 0; }
.tour-back { background: var(--bg3); color: var(--text); }
.tour-next { background: var(--accent); color: #0a1a14; box-shadow: 0 4px 12px var(--accent-glow); }
@media (hover: hover) {
  .tour-skip:hover { color: var(--text2); }
  .tour-back:hover { background: var(--bg4); }
  .tour-next:hover { background: var(--accent2); }
}
.tour-skip:focus-visible, .tour-back:focus-visible, .tour-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tour-root.tour-anim .tour-spot, .tour-progress-fill { transition: none; }
}