/* Guided demo tour (app/static/tour.js): one card next to the element, a light ring on it, no dimming. DESIGN.md tokens. */

.tour-card { position: fixed; z-index: 60; width: 320px; padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-ctl);
  box-shadow: var(--sheet-shadow); border-top: 3px solid var(--stamp); }
.tour-card:focus { outline: none; }
.tour-card:focus-visible { box-shadow: var(--sheet-shadow), var(--focus); }
.tour-card h2 { font-size: var(--f-17); line-height: 24px; margin: 0 0 var(--s-1); }
.tour-card p { margin: 0; font-size: var(--f-15); line-height: 22px; }
.tour-card .tour-progress { font-size: var(--f-13); line-height: 18px; color: var(--ink-2); margin-bottom: var(--s-1); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.tour-skip { background: none; border: 0; padding: var(--s-1) 0; color: var(--ink-2); font: 500 var(--f-13)/18px "Onest", system-ui, sans-serif;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover { color: var(--ink); }

/* the element the step talks about: a ring, nothing else */
.tour-target { outline: 2px solid var(--stamp) !important; outline-offset: 4px; border-radius: 4px; }
.doc-sheet.tour-target { outline-offset: 6px; }
.stack.tour-target { outline-offset: -3px; border-radius: 0; }

@media (max-width: 767px) {
  .tour-card { left: var(--s-3) !important; right: var(--s-3); width: auto; top: auto !important; }
  .tour-target { outline-offset: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tour-card { transition: top .18s ease, left .18s ease; }
}