/*
 * The guided tour (src/ui/tour.js): four shades round the part of the lab
 * being explained, a ring on its edge, and a text box beside it. The shades
 * take the clicks that land on them, so the reader acts on the lit part; End
 * tour and Esc are always there.
 */

:root {
  --tour-shade: rgba(8, 12, 18, 0.58);
}

.tour-root { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
/* While one of the lab's own dialogs is open, the tour steps aside. */
.tour-root.tour-yield { display: none; }
.tour-shade {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  background: var(--tour-shade); pointer-events: auto;
  /* Scrolling over the shade is passed to the page underneath (tour.js). */
  touch-action: none; overscroll-behavior: contain;
}
.tour-ring {
  position: fixed; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(255, 255, 255, 0.18);
}
.tour-pop, .tour-offer {
  position: fixed; width: 340px; max-width: calc(100vw - 32px);
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 14px 16px 12px; pointer-events: auto;
  font-size: 13.5px; line-height: 1.5;
}
.tour-pop:focus { outline: none; }
/* The box takes focus so a screen reader reads the step; it is not a control, so no ring. */
.tour-pop.docked { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
/* A target low on a phone screen: the box goes to the top instead. */
.tour-pop.docked.docked-top { top: 16px !important; bottom: auto; }
.tour-offer { right: 20px; bottom: 20px; z-index: 2000; }
.tour-count { font-size: 11px; color: var(--ink-faint); margin-bottom: 2px; }
.tour-head { display: flex; align-items: baseline; gap: 8px; }
.tour-head .tour-title { flex: 1; }
.tour-title { font-size: 15px; margin: 0 0 6px; }
/* Hide/Show folds the box on a phone, where it sits over the page. */
.tour-min-btn { display: none; }
.tour-pop.docked .tour-min-btn { display: inline-flex; }
.tour-pop.tour-min .tour-count, .tour-pop.tour-min .tour-text,
.tour-pop.tour-min .tour-note { display: none; }
.tour-pop.tour-min { padding-top: 8px; padding-bottom: 8px; }
.tour-text p, .tour-offer p { margin: 0 0 8px; }
.tour-note { margin: 0 0 8px; font-size: 12px; color: var(--warn); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tour-grow { flex: 1; }
.tour-skip { color: var(--ink-dim); }

/* No movement between steps: the spotlight jumps to the next part of the
   lab, which is easier to follow than a box sliding across the page and needs
   no exception for readers who ask for reduced motion. */