/* ============================================================
   ZERANDA — Guided product tour (coachmark overlay)
   Layers on top of the live dashboard. Uses brand tokens from
   colors_and_type.css. Calm scrim + soft gold spotlight ring +
   a warm tooltip card. Honors prefers-reduced-motion.
   ============================================================ */

:root        { --tour-scrim: rgba(30, 25, 16, 0.55); }
:root[data-theme="dark"] { --tour-scrim: rgba(0, 0, 0, 0.64); }

/* Full-screen click blocker so the app underneath can't be touched
   mid-tour — the tour drives navigation itself. */
.tour-blocker {
  position: fixed; inset: 0; z-index: 9000;
  cursor: default;
}

/* The "hole": a transparent box whose enormous box-shadow paints the
   scrim everywhere except over the highlighted element. */
.tour-spot {
  position: fixed; z-index: 9001;
  pointer-events: none;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 9999px var(--tour-scrim);
  outline: 2px solid color-mix(in srgb, var(--gold-500) 88%, #fff);
  outline-offset: 3px;
}
/* soft gold halo just inside the ring */
.tour-spot::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 22%, transparent);
}

/* Plain scrim for centered (welcome / finish) steps — no cutout. */
.tour-veil {
  position: fixed; inset: 0; z-index: 9001;
  background: var(--tour-scrim);
  pointer-events: none;
}

/* ---- Tooltip card --------------------------------------------- */
.tour-tip {
  position: fixed; z-index: 9002;
  width: 344px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 20px 16px;
  font-family: var(--font-body);
  color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  .tour-tip { animation: tour-pop .34s cubic-bezier(.34,1.2,.4,1) both; }
}
@keyframes tour-pop {
  from { transform: translateY(8px) scale(.985); }
  to   { transform: none; }
}

.tour-tip .eyebrow {
  font-family: var(--font-body);
  font-size: var(--label-size); font-weight: 600;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  margin-bottom: 9px;
}
.tour-tip h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--text);
  margin: 0 0 7px;
}
.tour-tip p {
  font-size: 14px; line-height: 1.55; color: var(--fg-2);
  margin: 0; text-wrap: pretty;
}

/* progress */
.tour-meta {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 13px;
}
.tour-track {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--surface-sunk); overflow: hidden;
}
.tour-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  transition: width .42s cubic-bezier(.4,.01,.2,1);
}
.tour-count {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-3); letter-spacing: .02em; white-space: nowrap;
}

/* actions */
.tour-actions {
  display: flex; align-items: center; gap: 8px;
}
.tour-skip {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-3);
  padding: 8px 4px; border-radius: var(--r-sm);
  transition: color .15s ease;
}
.tour-skip:hover { color: var(--fg-2); }
.tour-actions .grow { flex: 1; }

.tour-btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  border-radius: var(--r-md); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: 1px solid transparent;
  transition: background .15s ease, transform .08s ease, border-color .15s ease, color .15s ease;
}
.tour-btn:active { transform: scale(.97); }
.tour-btn.ghost {
  background: transparent; color: var(--fg-2);
  border-color: var(--border-strong);
}
.tour-btn.ghost:hover { background: var(--surface-sunk); color: var(--text); }
.tour-btn.primary {
  background: var(--gold-500); color: var(--on-primary);
}
.tour-btn.primary:hover { background: var(--gold-600); }

/* ---- Centered (welcome / finish) variant ---------------------- */
.tour-tip.center {
  width: 432px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 30px 24px;
  border-radius: var(--r-xl);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .tour-tip.center { animation: tour-pop-c .4s cubic-bezier(.34,1.2,.4,1) both; }
}
@keyframes tour-pop-c {
  from { transform: translate(-50%, -46%) scale(.97); }
  to   { transform: translate(-50%, -50%) scale(1); }
}
.tour-tip.center .glyph {
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  box-shadow: var(--shadow-md);
}
.tour-tip.center .glyph.done {
  background: linear-gradient(150deg, var(--green-500), var(--emerald-600));
}
.tour-tip.center h3 { font-size: 24px; margin-bottom: 9px; }
.tour-tip.center p { font-size: 15px; max-width: 340px; margin: 0 auto; }
.tour-tip.center .tour-actions {
  margin-top: 22px; justify-content: center;
}
.tour-tip.center .tour-btn { padding: 11px 22px; font-size: 14px; }

/* ---- Replay pill (after the tour is dismissed) ---------------- */
.tour-replay {
  position: fixed; right: 22px; bottom: 22px; z-index: 8500;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 10px 16px 10px 13px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.tour-replay:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tour-replay:active { transform: translateY(0) scale(.98); }
.tour-replay .spk {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-600);
}
@media (prefers-reduced-motion: no-preference) {
  .tour-replay { animation: tour-pop .3s ease both; }
}

@media (max-width: 560px) {
  .tour-tip { width: calc(100vw - 24px); }
  .tour-replay .lbl { display: none; }
  .tour-replay { padding: 11px; }
}