/* ═══════════════════════════════════════════
   Memoroam — Contextual Tutorial Engine (visuals)
   Spotlight + coachmark card. Just-in-time,
   skippable, replayable. Prefix: tut-

   Mechanics + sequencing live in
   js/tutorial/tutorial-engine.js. This file is
   presentation only. Spotlight uses a box-shadow
   "hole" (NO clip-path / mask / :has()) so it is
   bulletproof on the Samsung WebView.
   ═══════════════════════════════════════════ */

/* Root container — fixed, full-viewport, but click-through.
   Interaction is owned by .tut-catch (blocks page) and
   .tut-card (buttons); the container itself captures nothing. */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

/* Backdrop catcher — freezes the app behind the tour so stray taps
   don't fire page actions. Transparent: the dim comes from the
   spotlight's box-shadow, not from here. */
.tut-catch {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: auto;
}

/* Spotlight — a transparent window whose huge box-shadow darkens
   everything OUTSIDE its rect, so the target shows through bright.
   JS sets top/left/width/height from getBoundingClientRect(). */
.tut-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(18, 14, 10, 0.74);
  pointer-events: none;
  opacity: 0;
  z-index: 9001;
  transition: top .32s cubic-bezier(.4, 0, .2, 1),
              left .32s cubic-bezier(.4, 0, .2, 1),
              width .32s cubic-bezier(.4, 0, .2, 1),
              height .32s cubic-bezier(.4, 0, .2, 1),
              opacity .25s ease;
}
.tut-spot.lit { opacity: 1; }
/* Hairline ring lifts the spotlit element off the dim. */
.tut-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* Coachmark card */
.tut-card {
  position: fixed;
  z-index: 9002;
  width: min(330px, calc(100vw - 32px));
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-deep);
  padding: 16px 18px 14px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .26s ease, transform .26s cubic-bezier(.4, 0, .2, 1);
}
.tut-card.tut-card--in { opacity: 1; transform: none; }
.tut-card.tut-card--nudge { animation: tut-nudge .4s ease; }
@keyframes tut-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Arrow — points up when the card sits below its target, down when above. */
.tut-card-arrow {
  position: absolute;
  top: -7px;
  left: 24px;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tut-card--above .tut-card-arrow {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tut-card--noarrow .tut-card-arrow { display: none; }

/* Step dots — active one stretches into a gold pill. */
.tut-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.tut-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.tut-dots i.on { width: 18px; border-radius: 3px; background: var(--gold); }

.tut-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 5px;
  color: var(--text);
}
.tut-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 14px;
}

.tut-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tut-skip {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
}
.tut-nav { display: flex; align-items: center; gap: 8px; }
.tut-back {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.tut-next {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  border: none;
  padding: 9px 18px;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(198, 138, 58, .34);
}
.tut-next:active { transform: translateY(1px); }

/* Replay-confirmation toast */
.tut-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(10px);
  z-index: 9100;
  max-width: min(360px, calc(100vw - 40px));
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 18px;
  border-radius: 13px;
  text-align: center;
  box-shadow: var(--shadow-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.tut-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Replay picker — bottom sheet (Settings → Replay Tutorials) ──
   Mounts into .phone (above the settings drawer at z-index 901). */
.tut-sheet-overlay { position: absolute; inset: 0; z-index: 9300; }
.tut-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 10, 0.5);
  opacity: 0;
  transition: opacity .26s ease;
}
.tut-sheet-overlay.is-open .tut-sheet-scrim { opacity: 1; }
.tut-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9301;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-deep);
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.tut-sheet-overlay.is-open .tut-sheet { transform: none; }
.tut-sheet-grabber {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 4px auto 14px;
}
.tut-sheet-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.tut-sheet-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}
.tut-sheet-list { display: flex; flex-direction: column; gap: 8px; }
.tut-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .12s ease;
}
.tut-sheet-row:active { transform: scale(.99); }
.tut-sheet-row-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.tut-sheet-row-chev { color: var(--muted); flex-shrink: 0; }

/* ── Guided trip demo (tutorial-demo.js) ──
   Lighter dim than a tour, so the real form behind it stays readable. */
.tut-demo .tut-spot { box-shadow: 0 0 0 9999px rgba(18, 14, 10, 0.42); }

/* Demo airport-panel locks. Any lock hides the back button so the user
   can't escape the flow. The departure ('from') lock also hides search and
   restricts the list to the recommended airports. The arrival ('to') lock
   keeps search + the full list so any destination can be chosen. */
#aptPanel.td-apt-locked .apt-back-btn { display: none; }
#aptPanel.td-apt-recommended .apt-search-bar { display: none; }
.td-apt-lock-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  padding: 2px 2px 10px;
}

/* Demo: Continue stays greyed + unclickable until the step's requirement is
   met (e.g. two cities beyond the destination on the Cities step). */
#btnNext.td-btn-gated { opacity: 0.45; pointer-events: none; }

/* Demo: today + future calendar days are locked (past-only trip dates). */
.cal-day--disabled { opacity: 0.28; pointer-events: none; }

/* Demo: seat / gate / flight are optional and walked through with Okay boxes,
   so they're non-interactive during the walkthrough (just acknowledge). */
body.td-demo #seatInput,
body.td-demo #gateInput,
body.td-demo #flightInput { pointer-events: none; }
.td-hint {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .2px;
}