/* Onboarding tour: our tokens and type, a dimmed page with one clear cut-out. */

/* The page holds still while the tour runs; the tour scrolls targets into view itself. */
html.is-touring { overflow: hidden; scrollbar-gutter: stable; }
.tour-block { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tour-spot {
  position: fixed;
  z-index: 901;
  border-radius: 10px;
  box-shadow: 0 0 0 200vmax rgb(1 20 37 / 0.58);
  outline: 3px solid var(--lx-mint-400);
  pointer-events: none;
  transition: left 220ms var(--ease-out), top 220ms var(--ease-out), width 220ms var(--ease-out), height 220ms var(--ease-out);
}
/* No target (welcome, done, or a part this screen doesn't have): the whole page dims. */
.tour-spot.is-none { top: 50%; left: 50%; width: 0; height: 0; outline: 0; }

.tour-card {
  position: fixed;
  z-index: 902;
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 12px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  box-shadow: 0 22px 48px -14px rgb(1 20 37 / 0.55);
  transition: left 220ms var(--ease-out), top 220ms var(--ease-out);
}
.tour-card.is-centered { width: min(420px, calc(100vw - 32px)); }
.tour-count { color: var(--ink-2); font-size: var(--fs-caption); font-weight: 650; font-variant-numeric: tabular-nums; }
.tour-title { margin-top: 2px; font-size: 1.1875rem; font-weight: 750; line-height: 1.2; outline: none; }
.tour-text { margin-top: 6px; }
.tour-where { color: var(--ink-2); font-weight: 600; }
.tour-note { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }
.tour-link-row { margin-top: 4px; text-align: right; }
.tour-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-gap { flex: 1; }
.tour-actions .btn { min-height: 44px; }
.tour-skip { padding-inline: 4px; }
.tour-card :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tour-card .tour-title:focus-visible { outline: none; } /* the title takes focus only so a screen reader starts there */
[data-view="home"] .tour-card { --focus: #1d5baa; }

/* Phone: a bottom sheet (or a top sheet when the part lives at the bottom). */
.tour-card.is-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 60dvh;
  overflow-y: auto;
  padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 14px 14px 0 0;
}
.tour-card.is-sheet.is-top { top: 0; bottom: auto; border-radius: 0 0 14px 14px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
}
@media print { .tour-block, .tour-spot, .tour-card { display: none !important; } }

/* The last card: its two next steps get their own row, so they never spill out of the card. */
.tour-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tour-cta .btn { flex: 1 1 auto; min-height: 44px; }
.tour-actions { flex-wrap: wrap; }