/* welcome-tour.css — Phase 207 revision (Karl-directed rebuild, 2026-07-22):
 * chrome for <WelcomeTourOverlay> (window.ManifoldComponents.
 * WelcomeTourOverlay), rebuilt as a SPOTLIGHT tour after Karl reviewed the
 * original centered-<Modal> build live and asked for the signed-off mock's
 * veil + real-element-highlight look instead (207-tour-mock.html).
 *
 * .manifold-tour-veil / -spot / -tip map directly onto the mock's
 * .veil / .spot / .tip. welcome-tour.jsx measures the real on-page target
 * (getBoundingClientRect) and sets its position/size as inline style —
 * allowed per tools/audit_inline_style_aesthetics.py's ALLOWED_KEYS
 * (left/top/width/height/position), since those values MUST vary per
 * render. Aesthetic values (color, radius, shadow, spacing) live here as
 * classes reading theme tokens, same split every other primitive in this
 * directory uses.
 *
 * PRIM-STYLE rules this file MUST satisfy (tools/audit_primitive_css.py --gate):
 *   1. At least one var(--mt-*)/var(--m-*) consumption.
 *   2. Zero hex literals.
 *   3. Zero variable declarations (tokens live in theme.css only).
 *
 * Failure mode if this file regresses: a hex literal here bypasses the
 * theme system (spotlight ring wrong color on non-default themes); a
 * declared --m-*/--mt-* var here shadows theme.css and breaks theme
 * switching. audit_primitive_css.py --gate catches both.
 */

.manifold-tour-veil {
  position: fixed;
  inset: 0;
  /* Same dim value Modal.css's overlay uses (theme.css .manifold-modal-overlay)
     so the tour's backdrop reads as "the same kind of thing" as every other
     full-screen overlay in the app. */
  background: rgba(13, 15, 18, 0.7);
  z-index: 2000;
}

.manifold-tour-spot {
  position: fixed;
  z-index: 2005;
  border-radius: var(--m-radius-lg);
  /* The classic CSS spotlight cutout: a huge box-shadow spread repaints the
     dim color over the ENTIRE viewport a second time, except inside this
     element's own box. That hole is what makes the real button underneath
     read as highlighted rather than just "also dimmed." Left/top/width/
     height are set inline per-render (the position that MUST vary). */
  box-shadow:
    0 0 0 4px var(--m-accent-line),
    0 0 0 2000px rgba(13, 15, 18, 0.7);
  transition:
    left var(--m-t-norm),
    top var(--m-t-norm),
    width var(--m-t-norm),
    height var(--m-t-norm);
  pointer-events: none;
}

.manifold-tour-tip {
  position: fixed;
  z-index: 2010;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, var(--m-surface), var(--m-bg));
  border: 1px solid var(--m-border-hi);
  border-radius: var(--m-radius-md);
  padding: var(--m-pad-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  transition:
    left var(--m-t-norm),
    top var(--m-t-norm);
}

/* Graceful fallback (no real target found for this stop, e.g. the "+ Add
   card" header button only exists on an empty tab): center the callout
   instead of positioning it near nothing. left/top/transform here are
   static (not state-driven), so they're the one exception living in the
   class rather than inline. */
.manifold-tour-tip--centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.manifold-tour-dismiss {
  position: absolute;
  top: var(--m-pad-sm);
  right: var(--m-pad-sm);
  width: 24px;
  height: 24px;
  border-radius: var(--m-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--m-text-muted);
  font-family: var(--m-font-mono);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.manifold-tour-dismiss:hover,
.manifold-tour-dismiss:focus-visible {
  border-color: var(--m-border-hi);
  color: var(--m-text);
}

.manifold-tour-count {
  font-family: var(--m-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 var(--m-pad-sm);
}

.manifold-tour-title {
  font-family: var(--m-font-display);
  font-size: 16px;
  font-weight: var(--m-font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--m-text);
  margin: 0 0 var(--m-pad-sm);
  padding-right: var(--m-pad-lg);
}

.manifold-tour-body {
  font-size: 13.5px;
  color: var(--m-text-muted);
  margin: 0 0 var(--m-pad-xs);
  line-height: 1.55;
}

.manifold-tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-pad-sm);
  margin-top: var(--m-pad-md);
}

.manifold-tour-dots {
  display: flex;
  gap: var(--m-pad-xs);
}

.manifold-tour-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--m-radius-full);
  background: var(--m-border-hi);
  display: inline-block;
}

.manifold-tour-dot.on {
  background: var(--m-accent);
}

.manifold-tour-buttons {
  display: flex;
  align-items: center;
  gap: var(--m-pad-sm);
}

/* Respect reduced-motion: the spot/tip still move to the next stop's
   position, they just snap instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .manifold-tour-spot,
  .manifold-tour-tip {
    transition: none;
  }
}