/* ── BWR onboarding ───────────────────────────────────────────────────────────
 * Styles for the first-visit welcome modal (#3 quick-start) and the interactive
 * coach-mark tour (#1). Loaded on map.html and routes.html, and reused by the
 * written guide page (guide.html). Pure CSS spotlight — no dependencies.
 * ──────────────────────────────────────────────────────────────────────────── */

/* ── Shared overlay ─────────────────────────────────────────────────────────── */
.bwr-tut-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 5000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  opacity: 0;
  transition: opacity var(--dur, 220ms) var(--ease-out, ease);
}
.bwr-tut-overlay.bwr-tut-dim { background: rgba(6, 26, 8, 0.62); backdrop-filter: blur(2px); }
.bwr-tut-overlay.bwr-tut-show { opacity: 1; }

/* ── Welcome / quick-start card ─────────────────────────────────────────────── */
.bwr-tut-welcome {
  width: min(440px, 100%);
  background: var(--surface-0, #fff);
  color: var(--text, #1f2937);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-xl, 0 40px 80px -32px rgba(11,36,16,.4));
  padding: var(--space-8, 32px) var(--space-6, 24px) var(--space-6, 24px);
  text-align: center;
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur, 220ms) var(--ease-spring, ease);
}
.bwr-tut-overlay.bwr-tut-show .bwr-tut-welcome { transform: translateY(0) scale(1); }

.bwr-tut-welcome-badge {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4, 16px);
  display: grid; place-items: center;
  font-size: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-700, #1e4d14), var(--forest-500, #4a8a32));
  box-shadow: 0 0 0 8px var(--forest-100, #f0f7ec);
}
.bwr-tut-welcome h2 {
  font-size: var(--fs-2xl, 1.875rem);
  margin: 0 0 var(--space-2, 8px);
  color: var(--text-strong, #0b2410);
}
.bwr-tut-welcome p.bwr-tut-lead {
  font-size: var(--fs-md, 1.125rem);
  color: var(--text-muted, #6b7280);
  margin: 0 0 var(--space-5, 20px);
  line-height: 1.5;
}
.bwr-tut-bullets {
  list-style: none;
  margin: 0 0 var(--space-6, 24px);
  padding: 0;
  text-align: left;
  display: grid;
  gap: var(--space-3, 12px);
}
.bwr-tut-bullets li {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: flex-start;
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.45;
}
.bwr-tut-bullets .bwr-tut-emoji {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.2;
}
.bwr-tut-bullets strong { color: var(--text-strong, #0b2410); }

.bwr-tut-welcome-actions { display: grid; gap: var(--space-2, 8px); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.bwr-tut-btn {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: 12px 22px;
  cursor: pointer;
  transition: transform var(--dur-fast, 140ms) var(--ease-out, ease), filter var(--dur-fast, 140ms) ease, background var(--dur-fast,140ms) ease;
}
.bwr-tut-btn:active { transform: translateY(1px) scale(0.99); }
.bwr-tut-btn-primary {
  background: linear-gradient(135deg, var(--forest-700, #1e4d14), var(--forest-600, #2d6b1f));
  color: var(--lime-300, #d9f99d);
}
.bwr-tut-btn-primary:hover { filter: brightness(1.07); }
.bwr-tut-btn-ghost {
  background: transparent;
  color: var(--text-muted, #6b7280);
  padding: 9px 16px;
}
.bwr-tut-btn-ghost:hover { background: var(--surface-2, #f3f4f0); }
.bwr-tut-btn-sm { padding: 8px 16px; font-size: var(--fs-sm, 0.875rem); }

/* ── Spotlight (coach-mark) ─────────────────────────────────────────────────── */
.bwr-spot {
  position: fixed;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 0 0 9999px rgba(6, 26, 8, 0.66), 0 0 0 3px var(--lime-500, #a3e635);
  pointer-events: none;
  z-index: var(--z-modal, 5000);
  transition: all var(--dur, 220ms) var(--ease-out, ease);
}
.bwr-spot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.55);
  animation: bwr-spot-pulse 1.8s var(--ease-out, ease) infinite;
}
@keyframes bwr-spot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(163, 230, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); }
}

/* Click-blocking layer so the page is inert while the tour runs */
.bwr-tut-blocker {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 5000) - 1);
  background: transparent;
}

/* ── Tooltip ────────────────────────────────────────────────────────────────── */
.bwr-tip {
  position: fixed;
  z-index: calc(var(--z-modal, 5000) + 1);
  width: min(330px, calc(100vw - 28px));
  background: var(--surface-0, #fff);
  color: var(--text, #1f2937);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-lg, 0 24px 48px -20px rgba(11,36,16,.3));
  padding: var(--space-5, 20px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur, 220ms) var(--ease-out, ease), transform var(--dur, 220ms) var(--ease-out, ease), top var(--dur,220ms) var(--ease-out,ease), left var(--dur,220ms) var(--ease-out,ease);
}
.bwr-tip.bwr-tip-show { opacity: 1; transform: translateY(0); }
.bwr-tip-step {
  font-size: var(--fs-xs, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest-600, #2d6b1f);
  margin-bottom: var(--space-1, 4px);
}
.bwr-tip h3 {
  font-size: var(--fs-lg, 1.25rem);
  margin: 0 0 var(--space-2, 8px);
  color: var(--text-strong, #0b2410);
  font-family: var(--font-display, Georgia, serif);
}
.bwr-tip p {
  font-size: var(--fs-sm, 0.875rem);
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
  margin: 0 0 var(--space-4, 16px);
}
.bwr-tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}
.bwr-tip-dots { display: flex; gap: 5px; }
.bwr-tip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong, #c8d0bf);
  transition: background var(--dur-fast, 140ms) ease, transform var(--dur-fast, 140ms) ease;
}
.bwr-tip-dot.active { background: var(--forest-600, #2d6b1f); transform: scale(1.35); }
.bwr-tip-nav { display: flex; gap: var(--space-2, 8px); align-items: center; }
.bwr-tip-skip {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: var(--text-faint, #9ca3af);
  font-size: var(--fs-xs, 0.78rem);
  cursor: pointer;
  padding: 4px;
}
.bwr-tip-skip:hover { color: var(--text-muted, #6b7280); text-decoration: underline; }

/* Confetti-free finish toast */
.bwr-tut-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast, 6000);
  background: var(--forest-700, #1e4d14);
  color: var(--lime-300, #d9f99d);
  font-weight: 700;
  font-size: var(--fs-sm, 0.875rem);
  padding: 12px 22px;
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-lg, 0 24px 48px -20px rgba(11,36,16,.3));
  opacity: 0;
  transition: opacity var(--dur, 220ms) ease, transform var(--dur, 220ms) var(--ease-spring, ease);
}
.bwr-tut-toast.bwr-tut-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .bwr-tip { width: calc(100vw - 24px); }
}