/* PaperTrail guided tours — overlay, popover, welcome modal, launcher.
   Loaded site-wide from base.html. Colors mirror the app's teal palette. */

:root {
  --tour-teal:        #00acc1;
  --tour-teal-dark:   #007c91;
  --tour-teal-deeper: #1a4a4a;
}

/* ── Coach-mark overlay + spotlight ───────────────────────────────── */
.tour-ov {
  position: fixed; inset: 0; z-index: 12000;
  display: none;
}
.tour-ov.open { display: block; }

.tour-spot {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(15, 30, 30, .62);
  transition: top .42s cubic-bezier(.4,0,.2,1),
              left .42s cubic-bezier(.4,0,.2,1),
              width .42s cubic-bezier(.4,0,.2,1),
              height .42s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
/* centered (no-target) step — dim the whole screen, no hole */
.tour-ov.center .tour-spot { box-shadow: 0 0 0 9999px rgba(15, 30, 30, .62); width: 0; height: 0; top: 50%; left: 50%; }

/* ── Popover ──────────────────────────────────────────────────────── */
.tour-pop {
  position: fixed; z-index: 12001;
  width: 300px; max-width: calc(100vw - 28px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  padding: 18px 18px 14px;
  transition: top .42s cubic-bezier(.4,0,.2,1), left .42s cubic-bezier(.4,0,.2,1);
  font-family: inherit;
}
.tour-pop.center {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%);
  width: 360px;
}
.tour-pop-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tour-teal-dark); margin-bottom: 8px;
}
.tour-pop-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px; font-weight: 700; color: var(--tour-teal-deeper);
  margin: 0 0 6px;
}
.tour-pop-text { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0 0 14px; }

.tour-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: #d8dee2; }
.tour-dot.on { background: var(--tour-teal); }
.tour-btns { display: flex; align-items: center; gap: 8px; }

.tour-btn {
  font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: 100px; padding: 8px 16px; cursor: pointer; border: none;
  transition: background .15s, transform .1s;
}
.tour-btn:active { transform: translateY(1px); }
.tour-btn.primary { background: var(--tour-teal); color: #fff; }
.tour-btn.primary:hover { background: #00bcd4; }
.tour-btn.ghost { background: #fff; color: #6b7280; border: 1px solid #e3ddd5; }
.tour-btn.ghost:hover { background: #f7f5f1; }
.tour-skip {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: #9aa0a6; text-decoration: underline; font-family: inherit;
}
.tour-mute {
  background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px; color: #9aa0a6;
}
.tour-mute:hover { color: var(--tour-teal-dark); }

/* ── Welcome modal ────────────────────────────────────────────────── */
.tour-modal-back {
  position: fixed; inset: 0; z-index: 12050;
  background: rgba(15, 30, 30, .6);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.tour-modal-back.open { display: flex; }
.tour-modal {
  background: #fff; border-radius: 22px; width: 100%; max-width: 460px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.tour-modal-hero {
  background: linear-gradient(135deg, var(--tour-teal-deeper), #0f3a3a 60%, #143030);
  color: #fff; padding: 26px 26px 22px; position: relative;
}
.tour-modal-hero .tour-modal-emoji { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.tour-modal-hero h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; margin: 0; }
.tour-modal-body { padding: 20px 26px 24px; }
.tour-modal-body p { font-size: 15px; line-height: 1.65; color: #374151; margin: 0 0 18px; }
.tour-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.tour-modal-actions .tour-btn { padding: 13px 18px; font-size: 15px; text-align: center; }
.tour-modal-later {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: #9aa0a6; padding: 4px; align-self: center; margin-top: 2px;
}
.tour-modal-later:hover { color: #6b7280; text-decoration: underline; }
.tour-modal-mute {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.15); border: none; border-radius: 100px;
  color: #fff; font-size: 13px; padding: 6px 12px; cursor: pointer; font-family: inherit;
}

/* ── Replay launcher + first-visit toast ──────────────────────────── */
/* Banded per the layout contract in base.html: assistant chrome sits at
   --z-help (120), BELOW page bars (150), nav (200), modals (1000) and
   sheets (1200). It used to sit at 11900 — above everything — which is
   why it landed on top of the Next button, the character meter and the
   note textarea. A modal backdrop now covers it automatically, so no JS
   show/hide toggling is needed. Vertical rest position comes from
   --floating-chrome-b, which lifts clear of any page-level bottom bar. */
.tour-launch {
  position: fixed; right: 16px;
  bottom: var(--floating-chrome-b, 16px);
  z-index: var(--z-help, 120);
  display: none; align-items: center; gap: 7px;
  background: #fff; color: var(--tour-teal-deeper);
  border: 1px solid #e3ddd5; border-radius: 100px;
  padding: 9px 15px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.14);
  max-width: calc(100vw - 32px);
}
.tour-launch.show { display: inline-flex; }
.tour-launch:hover { border-color: var(--tour-teal); }

.tour-toast {
  position: fixed; left: 50%;
  bottom: var(--floating-chrome-b, 20px);
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-help, 120); opacity: 0; pointer-events: none;
  background: var(--tour-teal-deeper); color: #fff;
  border-radius: 14px; padding: 13px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  max-width: calc(100vw - 28px); font-family: inherit;
  transition: opacity .25s, transform .25s;
}
.tour-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tour-toast-text { font-size: 14px; line-height: 1.4; }
.tour-toast-btns { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tour-toast .tour-btn.primary { padding: 7px 14px; }
.tour-toast-x { background: none; border: none; color: rgba(255,255,255,.7); font-size: 13px; cursor: pointer; font-family: inherit; }

@media (max-width: 520px) {
  .tour-toast { flex-direction: column; align-items: stretch; }
  .tour-toast-btns { justify-content: flex-end; }
}

/* ── motion polish ─────────────────────────────────────────────────── */
/* Popover entrance: pop in for anchored steps, soft fade for centered ones. */
@keyframes tourPopIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes tourFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tour-ov.open .tour-pop:not(.center) { animation: tourPopIn .30s cubic-bezier(.2,.8,.3,1) both; }
.tour-ov.open .tour-pop.center      { animation: tourFadeIn .30s ease both; }

/* Gentle pulsing ring around the spotlighted element to draw the eye. */
.tour-spot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  animation: tourPulse 1.9s ease-out infinite;
}
.tour-ov.center .tour-spot::after { display: none; }
@keyframes tourPulse {
  0%   { box-shadow: 0 0 0 0  rgba(0,172,193,.55); }
  70%  { box-shadow: 0 0 0 13px rgba(0,172,193,0); }
  100% { box-shadow: 0 0 0 0  rgba(0,172,193,0); }
}

/* The floating "?" launcher gently pops in when it appears. */
@keyframes tourLaunchIn {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.tour-launch.show { animation: tourLaunchIn .32s cubic-bezier(.2,.8,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .tour-ov.open .tour-pop:not(.center),
  .tour-ov.open .tour-pop.center,
  .tour-launch.show { animation: none; }
  .tour-spot::after { animation: none; box-shadow: 0 0 0 2px rgba(0,172,193,.5); }
}

/* Vertical clearance is handled by --floating-chrome-b (base.html), which
   already accounts for the bottom nav, the safe area, and any page-level
   bottom bar. Phones only need the pill made physically smaller so it
   covers less of a narrow screen. */
@media (max-width: 768px) {
  .tour-launch { padding: 8px 12px; font-size: 12px; gap: 5px; }
}