/* ============================================================================
   tour.css — guided-tour UI: SVG-mask spotlight scrim + narration card.
   Chrome-on-dark system: tokens only, JetBrains-Mono chrome, tabular numerals,
   var(--ease) motion, prefers-reduced-motion respected. Phone-friendly.
   ==========================================================================*/

/* ---- SVG scrim (dims all but the lit region; never blocks the beat) --------*/
.tour-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
  pointer-events: none;                 /* the beat & the target stay live */
  animation: tourScrimIn var(--dur-3) var(--ease) both;
}
.tour-dim { fill: rgba(9, 9, 12, 0.74); }

.tour-ring {
  stroke: var(--ember);
  stroke-width: 1.5;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(203, 213, 225, 0.30));
  animation: tourRing 2.6s var(--ease) infinite;
}

@keyframes tourScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourRing {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.5; }
}

/* ---- narration card -------------------------------------------------------*/
.tour-pop {
  position: fixed;
  z-index: calc(var(--z-tour) + 2);
  width: min(360px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--bg-alt-2), var(--bg-alt));
  border: 1px solid var(--border-lit);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  padding: var(--sp-4) var(--sp-5) var(--sp-4);
  overflow: hidden;                     /* clip the progress hairline to radius */
  pointer-events: auto;
  animation: tourPopIn var(--dur-3) var(--ease) both;
}
@keyframes tourPopIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* dwell progress hairline along the top edge */
.tour-prog {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--bg-sunken);
}
.tour-prog-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ember-deep), var(--ember));
}

/* header row */
.tour-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tour-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.tour-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-label);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.tour-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  color: var(--ink-dim);
  border: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.tour-x:hover { color: var(--ink); background: var(--bg-alt-3); border-color: var(--border-lit); }
.tour-x svg { width: 15px; height: 15px; }

/* tag (which system this beat shows) */
.tour-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ember);
  background: var(--ember-soft);
  border: 1px solid color-mix(in srgb, var(--ember) 28%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  margin-bottom: var(--sp-3);
}

.tour-title {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.tour-text {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-4);
}

/* footer: dots + actions */
.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.tour-dots { display: flex; align-items: center; gap: 6px; }
.tour-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-lit);
  padding: 0;
  transition: background var(--dur-1) var(--ease), width var(--dur-1) var(--ease);
}
.tour-dot:hover { background: var(--ink-faint); }
.tour-dot.is-done { background: var(--ink-faint); }
.tour-dot.is-current {
  width: 16px;
  border-radius: var(--r-pill);
  background: var(--ember);
}

.tour-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.tour-actions .tour-i { display: inline-flex; }
.tour-actions .tour-i svg { width: 13px; height: 13px; }

/* closing step carries three actions + a long primary label — give it room and
   stack the dots above the buttons so nothing clips. */
.tour-pop.is-closing { width: min(440px, calc(100vw - 32px)); }
.tour-pop.is-closing .tour-foot { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.tour-pop.is-closing .tour-actions { justify-content: flex-end; }

/* Next glows once the dwell completes */
.tour-next { transition: box-shadow var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); }
.tour-next.is-ready { box-shadow: var(--glow-ember); }
.tour-back .tour-i svg { width: 13px; height: 13px; }

/* keyboard hint */
.tour-keys {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
  white-space: nowrap;
}

/* a little shake when the operator tries to advance before the beat is ready */
.tour-pop.is-waiting { animation: tourWait 0.42s var(--ease) both; }
@keyframes tourWait {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  50%     { transform: translateX(4px); }
  75%     { transform: translateX(-2px); }
}

/* ---- mobile: pin the card as a bottom sheet -------------------------------*/
.tour-pop.is-sheet {
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  animation: tourSheetIn var(--dur-3) var(--ease) both;
}
@keyframes tourSheetIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .tour-foot { flex-wrap: wrap; }
}

/* ---- reduced motion -------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .tour-scrim, .tour-pop, .tour-pop.is-sheet { animation: none; }
  .tour-ring { animation: none; }
  .tour-prog-fill { transition: none; }
  .tour-pop.is-waiting { animation: none; }
  .tour-next.is-ready { box-shadow: none; }
}