/* Retreat Food Sign-Up — first-visit tour offer and guided tour (coach marks).
   Used by tour.js. Colors come from the tokens in styles.css (with fallbacks),
   so light and dark mode follow the app. Positions are set from JS through
   element.style (CSP-safe); nothing here depends on inline styles. */

:root {
  --tour-dim: rgb(17 22 20 / 60%);
  --tour-ring: var(--accent, #0b6e5f);
  --tour-halo: rgb(255 255 255 / 92%);
  --tour-card-border: var(--border, #e3e1d8);
  --tour-shadow: 0 14px 44px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 12%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tour-dim: rgb(0 0 0 / 66%);
    --tour-ring: var(--accent, #4fc4a6);
    --tour-halo: rgb(0 0 0 / 55%);
    --tour-card-border: var(--border-strong, #3e4944);
    --tour-shadow: 0 14px 44px rgb(0 0 0 / 60%);
  }
}

/* Screen-reader-only text (own copy, so the module does not depend on styles.css). */
.tour-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons (shared by the offer and the tour card) ---------- */
.tour-offer__btn,
.tour__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overflow-wrap: anywhere;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.tour-offer__btn:active,
.tour__btn:active { transform: scale(.98); }
.tour-offer__btn--primary,
.tour__btn--primary { background: var(--accent, #0b6e5f); color: var(--on-accent, #fff); }
.tour-offer__btn--secondary,
.tour__btn--secondary {
  background: var(--surface, #fff);
  border-color: var(--border-strong, #cbc8bd);
  color: var(--text, #1b201d);
}
.tour__btn:disabled { opacity: .45; cursor: default; transform: none; }
@media (hover: hover) {
  .tour-offer__btn--primary:hover,
  .tour__btn--primary:hover { background: var(--accent-hover, #085a4e); }
  .tour-offer__btn--secondary:hover,
  .tour__btn--secondary:not(:disabled):hover { background: var(--surface-2, #f3f2ec); border-color: var(--field-border, #858b86); }
}
.tour-offer :focus-visible,
.tour__card :focus-visible {
  outline: 3px solid var(--focus, #1d5fd6);
  outline-offset: 2px;
}
.tour__card:focus { outline: none; }

/* ---------- First-visit offer: a small card above the bottom bar ---------- */
.tour-offer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h, 80px) + 10px + var(--tour-offer-lift, 0px));
  z-index: 35; /* above the bottom bar (30), below toasts (40) */
  display: flex;
  justify-content: center;
  padding: 0 max(var(--gutter, 16px), env(safe-area-inset-right)) 0 max(var(--gutter, 16px), env(safe-area-inset-left));
  pointer-events: none;
  transition: bottom .2s ease; /* moves up smoothly when a toast appears */
}
.tour-offer[hidden] { display: none; }
.tour-offer__card {
  width: 100%;
  max-width: 520px;
  padding: 14px 14px 12px 16px;
  border: 1px solid var(--tour-card-border);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--text, #1b201d);
  box-shadow: 0 8px 28px rgb(0 0 0 / 20%), 0 1px 3px rgb(0 0 0 / 8%);
  pointer-events: auto;
  animation: tour-rise .24s cubic-bezier(.2, .8, .2, 1);
}
.tour-offer.is-leaving .tour-offer__card { animation: tour-sink .16s ease-in forwards; }
.tour-offer__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.tour-offer__text strong { font-weight: 800; }
.tour-offer__wave { display: inline-block; margin-right: 2px; }
/* Side by side; if they ever have to wrap, "Take the tour" goes on top. */
.tour-offer__actions {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.tour-offer__actions .tour-offer__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 16px;
}
.tour-offer__actions .tour-offer__btn--primary { flex-grow: 2; }
@media (min-width: 640px) {
  /* One row: the question on the left, the buttons on the right. */
  .tour-offer__card { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 18px; }
  .tour-offer__text { flex: 1 1 auto; min-width: 0; }
  .tour-offer__actions { flex: none; flex-wrap: nowrap; margin-top: 0; }
  .tour-offer__actions .tour-offer__btn { flex: none; padding: 8px 16px; }
}

/* ---------- The tour ---------- */
/* Catches taps everywhere outside the card: the page is not interactive
   during the tour, but it can still be scrolled. */
.tour__blocker {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
/* The highlight: a rounded hole whose huge box-shadow dims everything else,
   with an outline (and a contrasting halo) around the target. Positioned in
   page coordinates for targets that scroll with the page (so it stays glued
   while scrolling), or fixed for targets in fixed/sticky bars. */
.tour__spot {
  position: absolute;
  z-index: 10001;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 3px solid var(--tour-ring);
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--tour-halo), 0 0 0 9999px var(--tour-dim);
  pointer-events: none;
}
.tour__spot.is-lost { border-color: transparent; box-shadow: 0 0 0 9999px var(--tour-dim); }
/* Reports the safe-area insets (notch, home indicator) to tour.js. */
.tour__probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}
.tour.is-starting .tour__spot { animation: tour-fade .22s ease-out; }
.tour__spot.is-enter { animation: tour-spot-in .32s cubic-bezier(.2, .8, .2, 1); }

.tour__card {
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 24px));
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--tour-card-border);
  border-radius: 18px;
  background: var(--surface, #fff);
  color: var(--text, #1b201d);
  box-shadow: var(--tour-shadow);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}
.tour__card.is-scroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.tour__card.is-enter { animation: tour-card-in .22s cubic-bezier(.2, .8, .2, 1); }
.tour__card.is-nudge { animation: tour-nudge .32s ease-in-out; }

/* The little arrow pointing at the target (hidden when the card is docked). */
.tour__caret {
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--tour-card-border);
  transform: rotate(45deg);
  pointer-events: none;
}
.tour__card[data-place="below"] .tour__caret { top: -9px; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.tour__card[data-place="above"] .tour__caret { bottom: -9px; border-left: 0; border-top: 0; border-bottom-right-radius: 3px; }
.tour__card:not([data-place="below"]):not([data-place="above"]) .tour__caret,
.tour__card.is-scroll .tour__caret { display: none; }

.tour__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-right: -8px;
}
.tour__step {
  margin: 0;
  color: var(--text-2, #535c57);
  font-size: 16px;
  font-weight: 700;
}
.tour__skip {
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2, #535c57);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .tour__skip:hover { color: var(--text, #1b201d); background: var(--surface-2, #f3f2ec); } }

.tour__progress {
  height: 4px;
  margin: 2px 0 12px;
  border-radius: 2px;
  background: var(--surface-3, #e7e5dc);
  overflow: hidden;
}
.tour__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--tour-ring);
  transition: width .25s ease;
}

.tour__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.005em;
}
.tour__text {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.45;
}
.tour__text strong { font-weight: 800; }
.tour__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  margin-top: 16px;
}

/* Short, wide screens (a phone held sideways): a flatter card, so the card
   and the highlighted part both fit on the screen. tour.js sets .is-compact. */
.tour__card.is-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title title title title"
    "text text text text"
    "step skip back next";
  align-items: center;
  column-gap: 8px;
  padding: 10px 14px 12px;
}
.tour__card.is-compact .tour__head,
.tour__card.is-compact .tour__actions { display: contents; }
.tour__card.is-compact .tour__progress { display: none; }
.tour__card.is-compact .tour__title { grid-area: title; font-size: 18px; }
.tour__card.is-compact .tour__text { grid-area: text; margin-top: 2px; }
.tour__card.is-compact .tour__step { grid-area: step; margin-top: 10px; }
.tour__card.is-compact .tour__skip { grid-area: skip; justify-self: start; margin-top: 10px; }
.tour__card.is-compact .tour__btn { margin-top: 10px; min-height: 44px; }
.tour__card.is-compact [data-tour="back"] { grid-area: back; }
.tour__card.is-compact [data-tour="next"] { grid-area: next; min-width: 120px; }

/* ---------- Motion ---------- */
@keyframes tour-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes tour-sink { to { opacity: 0; transform: translateY(10px); } }
@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-spot-in { from { transform: scale(1.1); } }
@keyframes tour-card-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes tour-nudge {
  0%, 100% { transform: none; }
  30% { transform: scale(1.025); }
  60% { transform: scale(.995); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-offer__card,
  .tour-offer.is-leaving .tour-offer__card,
  .tour.is-starting .tour__spot,
  .tour__spot.is-enter,
  .tour__card.is-enter,
  .tour__card.is-nudge { animation: none; }
  .tour-offer,
  .tour-offer__btn,
  .tour__btn,
  .tour__progress-fill { transition: none; }
  .tour-offer__btn:active,
  .tour__btn:active { transform: none; }
}

@media (forced-colors: active) {
  .tour__spot { border-color: Highlight; }
  .tour__card, .tour-offer__card { border: 2px solid CanvasText; }
  .tour__progress-fill { background: Highlight; forced-color-adjust: none; }
}

@media print {
  .tour, .tour-offer { display: none !important; }
}