/* tour.css — first-run spotlight coachmark tour for Lysia.
   Self-contained + theme-neutral so it reads on both light and dark modes.
   Reuses the app's spacing and radius tokens where they exist, with hard fallbacks
   so the tour still renders if a token is missing. High z-index sits above the
   app chrome; the popover sits above the dimming overlay. */

:root {
  --tour-z: 9000;
  --tour-dim: rgba(20, 28, 22, 0.55);
  --tour-radius: 18px;
  --tour-pad: 22px;
  --tour-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tour-fade: 360ms;
}

/* The dimming layer. We dim everything by painting a huge box-shadow ring
   *around* a transparent cutout, so the spotlighted element shows through. */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--tour-z, 9000);
  /* Click-through: the tour is interactive (steps ask the user to create a
     course and upload a real file), so the overlay must NOT swallow clicks on
     the spotlighted control. The dim is painted by the cutout's box-shadow;
     the popover is a separate body child and keeps its own pointer events. */
  pointer-events: none;
}

/* The transparent hole. Its box-shadow is the dimming — sized to cover the
   whole viewport regardless of where the cutout sits. */
.tour-cutout {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px var(--tour-dim, rgba(20, 28, 22, 0.55));
  transition: top 220ms cubic-bezier(0.16, 1, 0.3, 1),
              left 220ms cubic-bezier(0.16, 1, 0.3, 1),
              width 220ms cubic-bezier(0.16, 1, 0.3, 1),
              height 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;            /* let the real element underneath stay seen */
  outline: 2px solid var(--accent, rgba(255, 255, 255, 0.55));
  outline-offset: 2px;
}

/* When there's no target (welcome / finish), the cutout collapses to nothing
   and the whole screen dims evenly. */
.tour-cutout.is-centered {
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  outline: none;
}

.tour-popover {
  position: fixed;
  z-index: calc(var(--tour-z, 9000) + 1);
  width: min(340px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: var(--tour-pad);
  background: var(--surface-raised, #15181f);
  color: var(--ink, #f4f6fb);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--tour-radius);
  box-shadow: var(--shadow-3, 0 30px 72px -16px rgba(8, 14, 10, 0.72));
  font-family: inherit;
  transition: top 220ms var(--tour-ease),
              left 220ms var(--tour-ease),
              opacity 160ms ease;
}

/* The popover inherits the app's live theme tokens (surface, ink, accent) with
   hard dark fallbacks, so it matches whatever theme the user is currently in. */

/* Step row: sapling glyph + terracotta mono "STEP N OF M" label, matching the
   handoff tutorial-tour card. Tokenised so light reads cream and dark reads
   intentionally — no hardcoded palette. */
.tour-step-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
}

.tour-sapling {
  display: inline-flex;
  align-items: flex-end;
  height: 22px;
}

.tour-sapling img {
  display: block;
  height: 22px;
  width: auto;
}

.tour-step {
  font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #b85c34);
}

.tour-title {
  font: 500 1.4rem/1.12 'Newsreader', Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--ink, #f4f6fb);
  margin: 0;
}

.tour-desc {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-muted, rgba(244, 246, 251, 0.82));
  margin: 9px 0 0;
}

.tour-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}

/* Progress dots: inactive = small muted dot; active = elongated terracotta
   pill. The dots container takes the leading slack so the buttons sit right. */
.tour-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--border-strong, rgba(255, 255, 255, 0.24));
  transition: width 300ms var(--tour-ease), background 300ms var(--tour-ease);
}

.tour-dot.is-active {
  width: 18px;
  background: var(--accent, #b85c34);
}

.tour-btn {
  font: 600 12px 'Inter', sans-serif;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.tour-btn:active {
  transform: translateY(1px);
}

.tour-btn:focus-visible {
  outline: 2px solid var(--accent, #b85c34);
  outline-offset: 2px;
}

/* Skip — muted mono text, no border (matches handoff). */
.tour-btn-skip {
  font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle, rgba(244, 246, 251, 0.6));
  padding: 8px 6px;
}

.tour-btn-skip:hover {
  color: var(--ink, #f4f6fb);
}

/* Back — outlined pill. */
.tour-btn-back {
  color: var(--ink-muted, rgba(244, 246, 251, 0.82));
  border-color: var(--border-strong, rgba(255, 255, 255, 0.24));
  padding: 8px 15px;
}

.tour-btn-back:hover {
  border-color: var(--accent, #b85c34);
  background: var(--accent-soft, color-mix(in oklch, var(--accent, #b85c34) 12%, transparent));
  color: var(--ink, #f4f6fb);
}

/* Next / Finish — dark filled pill with cream text. */
.tour-btn-primary {
  background: var(--ink, #1b2a22);
  border-color: var(--ink, #1b2a22);
  color: var(--bg, #fbf8f1);
  padding: 9px 18px;
}

.tour-btn-primary:hover {
  background: color-mix(in oklch, var(--ink, #1b2a22) 88%, var(--accent, #b85c34));
  border-color: color-mix(in oklch, var(--ink, #1b2a22) 88%, var(--accent, #b85c34));
}

/* Stabilise the layout while the tour is running. Force a persistent scrollbar
   gutter so the page doesn't jump when the overlay is injected or removed.
   scrollbar-gutter: stable is the modern path; the overflow-y fallback covers
   browsers that don't support it yet. */
html.tour-active {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Dismiss fade: the whole tour eases to 0 opacity, then the DOM is removed in
   JS after the fade window. Fading the overlay composites its child cutout (the
   dim ring), so the spotlight dim fades with it. */
.tour-overlay.tour-fading,
.tour-popover.tour-fading {
  opacity: 0;
  transition: opacity var(--tour-fade) var(--tour-ease);
}

@media (prefers-reduced-motion: reduce) {
  .tour-cutout,
  .tour-popover,
  .tour-overlay,
  .tour-dot {
    transition: none;
  }
  /* Reduced motion removes the tour instantly (JS skips the fade), so no
     opacity transition should linger here either. */
  .tour-overlay.tour-fading,
  .tour-popover.tour-fading {
    transition: none;
  }
}