/* First-run guided tour (see tour.js) -- MyFitnessPal-style: one dim
   overlay, a bright cutout + ring around the single control being
   described, and a small card sitting right next to it with a bold
   title and one line of body copy.

   The overlay itself stays pointer-events:none so the spotlighted
   control is genuinely clickable through it; modality is enforced in JS
   instead (tour.js's onAnyClick swallows clicks that miss the target),
   which keeps the one sanctioned click completely untouched -- links
   still navigate, buttons still open their sheets. */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  --tour-accent: #2f66e8;
  --tour-accent-2: #4d7ff5;
}
.tour-overlay.is-visible { opacity: 1; }

/* The spotlight: a window over the highlighted control with a dim
   backdrop around it (box-shadow trick, no real DOM hole -- clicks pass
   through everywhere because the overlay itself is pointer-events:none). */
.tour-spotlight {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8, 10, 18, 0.45);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-spotlight.has-target {
  outline: 3px solid var(--tour-accent);
  outline-offset: 3px;
}

/* Soft step (see softNav in tour.js): shown right after the user pressed an
   ACTION control, which usually opened a sheet. Drop the dim so that sheet
   stays readable and usable -- the ring and the pulse still mark where to go
   next. The tour is still refusing to let them leave the page; it just isn't
   covering up the thing it told them to open. */
.tour-overlay.is-soft .tour-spotlight { box-shadow: none; }
.tour-overlay.is-soft .tour-card { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); }
.tour-spotlight.has-target::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  animation: tour-pulse 1.7s ease-out infinite;
}
@keyframes tour-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tour-accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--tour-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tour-accent) 0%, transparent); }
}

/* An explicit, bouncing arrow sitting in the gap between the card and the
   highlighted control, pointing straight at it -- proximity alone (the
   card just sitting nearby) isn't an obvious enough cue for a genuinely
   first-time user to know exactly what "tap here" refers to. Points down
   by default (card below target); .is-up flips it for the card-above
   case. tour.js positions it via left/top or left/bottom directly. */
/* Absolute (not fixed) so it shares the overlay's coordinate space. On
   desktop the app frames itself as a 390px "device" via a transform on
   <body>, and a transformed ancestor becomes the containing block for
   position:fixed -- so fixed children silently anchor to the frame while
   tour.js measures targets in viewport coordinates. Positioning
   everything inside the overlay and subtracting its origin (see
   overlayOrigin() in tour.js) makes the two agree in both layouts. */
.tour-arrow {
  position: absolute;
  z-index: 241;
  width: 26px; height: 26px;
  color: var(--tour-accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tour-arrow.is-visible { opacity: 1; animation: tour-arrow-bounce 1.3s ease-in-out infinite; }
.tour-arrow.is-up { transform: rotate(180deg); }
.tour-arrow.is-up.is-visible { animation-name: tour-arrow-bounce-up; }
@keyframes tour-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes tour-arrow-bounce-up {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(5px); }
}

/* The card: pinned right next to the highlighted control (tour.js's
   placeCard sets top/bottom/left directly), or centred for the one
   no-target (welcome) step. */
/* Absolute for the same reason as .tour-arrow above -- shares the
   overlay's coordinate space so the desktop device-frame transform can't
   shift it away from the control it's describing. */
.tour-card {
  position: absolute;
  width: min(320px, calc(100% - 24px));
  z-index: 241;
  background: var(--card-bg);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  padding: 14px 16px;
  animation: tour-card-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-card.is-centered {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 32px));
}
@keyframes tour-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tour-card.is-centered { animation: tour-card-in-centered 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tour-card-in-centered {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tour-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-step-count { font-size: 10.5px; font-weight: 800; color: var(--tour-accent); text-transform: uppercase; letter-spacing: 0.05em; }
.tour-skip {
  pointer-events: auto;
  background: none; border: none;
  color: var(--text-secondary);
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; padding: 2px 2px 2px 10px;
}
.tour-skip:hover { color: var(--text); }

.tour-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.tour-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-top: 5px; }

/* Shown only after a click that missed the spotlight, so a blocked tap
   reads as "not that one, this one" instead of as a dead page. Collapsed
   to zero height when idle so it never reserves space in the card. */
.tour-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--tour-accent);
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.tour-hint.is-visible { max-height: 40px; opacity: 1; margin-top: 8px; }

/* Feedback for a blocked click: a short shake on the card, and a brighter
   flare on the ring so the eye is pulled to where the tap should go. */
.tour-card.is-nudging { animation: tour-shake 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.tour-card.is-centered.is-nudging { animation: tour-shake-centered 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes tour-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@keyframes tour-shake-centered {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  20% { transform: translate(-50%, -50%) translateX(-7px); }
  40% { transform: translate(-50%, -50%) translateX(6px); }
  60% { transform: translate(-50%, -50%) translateX(-4px); }
  80% { transform: translate(-50%, -50%) translateX(2px); }
}
.tour-spotlight.is-nudging { animation: tour-flare 0.36s ease-out; }
@keyframes tour-flare {
  0% { outline-color: var(--tour-accent); }
  50% { outline-color: #fff; }
  100% { outline-color: var(--tour-accent); }
}

.tour-welcome-foot { display: flex; justify-content: flex-end; margin-top: 13px; }
.tour-next {
  pointer-events: auto;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tour-accent), var(--tour-accent-2));
  color: #fff;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px var(--tour-accent);
  transition: transform 0.1s ease;
}
.tour-next:active { transform: scale(0.96); }

/* ---------- Low-key "still going" pill ----------
   Shown instead of the full overlay once the current step's page isn't
   where the user actually is (including right after acknowledging a
   step) -- deliberately small and out of the way, never blocking
   anything, but still visibly there so the tour doesn't just vanish. */
.tour-mini {
  position: fixed;
  left: 50%;
  /* Clears the fixed bottom tab bar (.mobile-tabbar, style.css) instead of
     sitting behind it. Set here rather than in a `max-width: 720px` block,
     which is where it used to live: the tab bar is drawn at EVERY width
     (style.css's `@media all` block), so a phone-only clearance left the
     mini bar tucked behind the tab bar on an iPad and inside the desktop
     device frame -- the two places nobody was looking. */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  z-index: 240;
  display: flex;
  align-items: center;
  gap: 8px;
  /* % of the app box, not vw. Above 721px <body> is the app -- a 720px
     column on a tablet, a 390px phone on a desk -- and this fixed element's
     containing block is that box, while vw is still the whole screen. A
     1180px iPad made this cap 1062px against a 720px column, so the inset
     it exists to keep simply stopped applying. Below 721px the containing
     block IS the viewport, so % and vw agree and nothing changes. */
  max-width: calc(100% - 24px);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tour-mini.is-visible { opacity: 1; transform: translate(-50%, 0); }
.tour-mini-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--tour-accent);
  animation: tour-mini-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-mini-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tour-mini-text {
  font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tour-mini-skip {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--bg); color: var(--text-secondary);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tour-mini-skip:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition: none; }
  .tour-spotlight.has-target::after { animation: none; }
  .tour-card { animation: none; }
  .tour-mini-dot { animation: none; }
  .tour-arrow.is-visible, .tour-arrow.is-up.is-visible { animation: none; }
  /* The hint text still appears -- only the shake that carries it is
     dropped, so the "not that one" feedback survives without motion. */
  .tour-card.is-nudging,
  .tour-card.is-centered.is-nudging,
  .tour-spotlight.is-nudging { animation: none; }
}