/* tour.css — the first-run walkthrough.
   A ring around the real thing, a card next to it, and a way out. */

.tour { position: fixed; inset: 0; z-index: 900; opacity: 0; transition: opacity .2s ease; }
.tour.on { opacity: 1; }

/* The dim is its own layer so the ring can sit above it without a mask. */
.tour-dim { position: absolute; inset: 0; background: rgba(12, 16, 24, .58); }

/* The hole. A huge spread shadow darkens everything except this rectangle,
   which is how the target stays at full brightness without cloning it. */
.tour-ring {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(12, 16, 24, .58), 0 0 0 2px var(--brand) inset;
  border: 2px solid var(--brand);
  pointer-events: none;
  transition: top .28s cubic-bezier(.22,.61,.36,1), left .28s cubic-bezier(.22,.61,.36,1),
              width .28s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1);
}
/* The dim layer is only needed before the first ring lands — once the ring is
   drawn its own shadow does the darkening, and two stacked dims read muddy. */
.tour-ring ~ .tour-dim, .tour-dim { background: transparent; }

.tour-card {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 18px 14px;
  box-shadow: 0 18px 44px -12px rgba(12,16,24,.45);
  transition: top .28s cubic-bezier(.22,.61,.36,1), left .28s cubic-bezier(.22,.61,.36,1);
}
.tour-step {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 7px;
}
.tour-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.tour-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tour-btns { display: flex; align-items: center; gap: 10px; }
.tour-skip {
  font: inherit; font-size: 14px; color: var(--faint);
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
}
.tour-skip:hover { color: var(--muted); }
.tour-next {
  font: inherit; font-size: 15px; font-weight: 600;
  margin-left: auto; padding: 10px 20px;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .tour, .tour-ring, .tour-card { transition: none; }
}