/* ============================================================
   MOBILE-TOUR.CSS — guided product tour for the mobile PWA.
   Mirrors the hub tour, styled with the --m-* tokens and sized
   for phone. Dependency-free.
   ============================================================ */

.mtour-root { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }

/* Click-blocker so the tour stays guided (Next/Back/Skip). Transparent while a
   spotlight is shown (the spotlight dims); dims itself when there's no target. */
.mtour-backdrop {
  position: fixed; inset: 0; pointer-events: auto;
  background: transparent; transition: background .2s ease;
}
.mtour-backdrop.dim { background: rgba(14, 20, 33, 0.58); }

/* Spotlight: transparent rect whose huge box-shadow dims everything else. */
.mtour-spot {
  position: fixed; pointer-events: none;
  border-radius: 12px;
  border: 2px solid var(--m-accent, #3B6FE0);
  box-shadow: 0 0 0 9999px rgba(14, 20, 33, 0.58);
  transition: top .25s var(--m-ease, ease), left .25s var(--m-ease, ease),
              width .25s var(--m-ease, ease), height .25s var(--m-ease, ease);
}

.mtour-callout {
  position: fixed; pointer-events: auto;
  width: min(330px, 88vw);
  background: var(--m-surface, #fff);
  color: var(--m-text, #16181D);
  border: 1px solid var(--m-line, rgba(20,32,58,0.10));
  border-radius: 16px;
  box-shadow: var(--m-shadow-xl, 0 24px 60px rgba(20,32,58,0.20));
  padding: 16px 16px 12px;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  animation: mtour-pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes mtour-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; } }

.mtour-chapter {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--m-accent, #3B6FE0); margin-bottom: 6px;
}
.mtour-title { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--m-text, #16181D); margin-bottom: 6px; }
.mtour-body { font-size: 13px; line-height: 1.55; color: var(--m-muted, #6E7480); margin-bottom: 14px; }
.mtour-body b { color: var(--m-text, #16181D); font-weight: 600; }

.mtour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mtour-nav { display: flex; align-items: center; gap: 8px; }
.mtour-count { font-size: 11px; color: var(--m-faint, #9CA1AB); font-variant-numeric: tabular-nums; }

.mtour-btn { font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; }
.mtour-next { background: var(--m-accent, #3B6FE0); color: #fff; }
.mtour-back { background: transparent; color: var(--m-muted, #6E7480); border-color: var(--m-line, rgba(20,32,58,0.12)); }
.mtour-skip { font: inherit; font-size: 12px; color: var(--m-faint, #9CA1AB); background: none; border: none; cursor: pointer; padding: 8px 2px; }

@media (prefers-reduced-motion: reduce) { .mtour-spot, .mtour-callout { transition: none; animation: none; } }