/* Job Scout web demo: the guided tour's spotlight and popup. Colors and type come from the
   studio kit's tokens (lib/ui), so the tour follows the page's light or dark theme. */
.tour-spot {
  position: fixed; z-index: 9000; pointer-events: none;
  border-radius: 10px; border: 2px solid var(--ui-accent);
  box-shadow: 0 0 0 9999px rgba(8, 10, 14, 0.62);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-spot.is-full { inset: 0; border: 0; border-radius: 0; box-shadow: none; background: rgba(8, 10, 14, 0.62); }
.tour-pop {
  position: fixed; z-index: 9001; width: min(380px, calc(100vw - 32px));
  background: var(--ui-surface, var(--ui-bg, #1e2128)); color: var(--ui-text, inherit);
  border: 1px solid var(--ui-border, rgba(255, 255, 255, .15)); border-top: 3px solid var(--ui-accent);
  border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.tour-pop.is-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-pop.is-sheet { left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; transform: none; }
.tour-pop h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.tour-pop p { margin: 0 0 12px; line-height: 1.45; }
.tour-count { font-size: .78rem; opacity: .7; letter-spacing: .02em; }
.tour-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tour-spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }