/* tour.css - the guided tour spotlight and card (tour.js). Uses the shared
   tokens from tokens.css. */

:root { --tour-dim: rgba(13, 59, 99, .55); }
[data-theme="dark"] { --tour-dim: rgba(3, 8, 14, .68); }

/* The spotlight: a transparent box over the target, its surroundings dimmed by a
   very large box-shadow. Pointer-events off so it never intercepts a click. */
.tour-spot {
  position: fixed; z-index: 4000; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--tour-dim);
  transition: left var(--dur-2) var(--ease), top var(--dur-2) var(--ease), width var(--dur-2) var(--ease), height var(--dur-2) var(--ease);
}
.tour-spot.no-anim { transition: none; }

.tour-card {
  position: fixed; z-index: 4001; width: min(340px, calc(100vw - 24px)); max-width: 340px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: 18px 18px 14px;
  transition: left var(--dur-2) var(--ease), top var(--dur-2) var(--ease);
}
.tour-card.no-anim { transition: none; }
.tour-card.is-takeover { text-align: center; padding: 26px 24px 18px; }

.tour-x {
  position: absolute; top: 6px; right: 6px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  font-size: 22px; line-height: 1; color: var(--muted); border-radius: var(--r-xs);
}
.tour-x:hover { color: var(--ink); background: var(--bg-tint); }

.tour-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--brand-tint); color: var(--navy); margin-bottom: 10px;
}
.tour-card-icon .ic { width: 22px; height: 22px; }
.is-takeover .tour-card-icon { width: 56px; height: 56px; background: transparent; margin-bottom: 6px; }
.tour-monogram { width: 48px; height: 48px; display: block; }

.tour-kicker { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tour-title { font-size: 16px; color: var(--navy); margin: 3px 0 6px; letter-spacing: -0.01em; }
[data-theme="dark"] .tour-title { color: var(--ink); }
.tour-body { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.is-takeover .tour-foot { justify-content: center; }
.is-takeover .tour-dots { display: none; }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--line-strong); }
.tour-dot.is-on { background: var(--coral); }
.tour-foot-btns { display: flex; gap: 6px; }