/* Onboarding (2026-10-11): the tour and guide cards (app/js/tour/engine.js), the "How this works" button beside each
   section's title and Help in the top bar (ui/onboarding.js), and the studio's one tooltip (ui/tooltip.js).
   Motion: a 180 ms glide between steps, none with prefers-reduced-motion; nothing loops. */

/* ---- the tour: a layer over the page that lets every press through except on its card (a guide never blocks the page);
   the spotlight's shadow dims the rest. A modal step (the first-run welcome card) takes the presses too. ---- */
#tbv-tour { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; color: var(--ink); }
#tbv-tour.is-modal { pointer-events: auto; }
#tbv-tour .tour-hole { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(255, 255, 255, .85), 0 0 0 200vmax rgba(20, 19, 17, .42); }
#tbv-tour.no-anchor .tour-hole { box-shadow: 0 0 0 200vmax rgba(20, 19, 17, .42); }
#tbv-tour.is-modal .tour-hole { box-shadow: 0 0 0 200vmax rgba(20, 19, 17, .56); }
#tbv-tour .tour-card { pointer-events: auto; position: absolute; left: 12px; top: 12px; width: min(368px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 18px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(20, 19, 17, .28), 0 2px 8px rgba(20, 19, 17, .1); }
#tbv-tour.is-ready .tour-hole { transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, border-radius .18s ease; }
#tbv-tour.is-ready .tour-card { transition: left .18s ease, top .18s ease; }
#tbv-tour .tour-count { margin: 0 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--accent); }
#tbv-tour .tour-count:empty { display: none; }
#tbv-tour .tour-title { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
#tbv-tour .tour-body { font-size: 14.5px; line-height: 1.5; color: #3B3833; }
#tbv-tour .tour-body p { margin: 0; }
#tbv-tour .tour-list { margin: 8px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 13.5px; }
#tbv-tour .tour-list li::marker { color: var(--accent); }
#tbv-tour .tour-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#tbv-tour .tour-grow { flex: 1; }
#tbv-tour .tour-skip { padding: 0 10px; color: var(--muted); }
#tbv-tour .tour-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
#tbv-tour .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* phones: the card is a bottom sheet; the page scrolls what it explains into the space above */
#tbv-tour.is-sheet .tour-card { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 62vh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 36px rgba(20, 19, 17, .22); }
#tbv-tour.is-sheet .tour-acts .btn { min-height: 44px; }
#tbv-tour.is-sheet .tour-next { padding: 0 22px; }
@media (prefers-reduced-motion: reduce) { #tbv-tour.is-ready .tour-hole, #tbv-tour.is-ready .tour-card { transition: none; } }

/* ---- "How this works" beside a section's title (a "?" on phones) ---- */
h2.has-tour-help, h3.has-tour-help { display: inline-block; vertical-align: middle; margin-right: 10px; }
.tour-help { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; min-height: 30px; padding: 0 11px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1; cursor: pointer; white-space: nowrap; }
.tour-help:hover { color: var(--ink); border-color: #CFC7B9; }
.tour-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-help-i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 12.5px; font-weight: 700; }
@media (max-width: 640px) {
  .tour-help { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .tour-help-l { display: none; }
}

/* ---- Help in the top bar (desktop; the phone menu has its own Help group) ---- */
.tour-menu-wrap { position: relative; display: inline-flex; }
.tour-menu-btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; }
.tour-menu-btn[aria-expanded="true"] { color: var(--ink); }
.tour-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; width: 290px; padding: 6px; display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 19, 17, .14), 0 2px 6px rgba(20, 19, 17, .06); }
.tour-pop-item { display: grid; gap: 2px; padding: 9px 12px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.tour-pop-item:hover { background: var(--soft); }
.tour-pop-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tour-pop-t { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.tour-pop-d { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.nav-sheet button.nav-item { width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nav-sheet button.nav-item:hover { background: var(--soft); }

/* ---- the tooltip (one for the whole studio) and the small "?" beside a label ---- */
.tip { position: fixed; left: 0; top: 0; z-index: 2147483000; max-width: min(280px, calc(100vw - 16px)); padding: 7px 10px; border-radius: 8px; background: var(--ink); color: #FBF8F2; font-size: 13px; font-weight: 450; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(20, 19, 17, .24); }
.tip-i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: help; flex: none; }
.tip-i:hover { color: var(--ink); border-color: #CFC7B9; }
.tip-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }