/* AM² Field Estimate tour — static stylesheet, loaded only when AppTour.astro
   renders (feature flag PUBLIC_APP_TOUR). Lives in public/ (not a component
   <style>) so a flag-off build ships ZERO tour bytes: Astro bundles even a
   dynamically-imported component's CSS into the importing page's stylesheet.
   Everything is keyed on .app-tour so nothing leaks site-wide. */

.app-tour .tour-hotspot {
  position: absolute;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.app-tour .tour-hotspot:hover,
.app-tour .tour-hotspot:focus-visible {
  border-color: rgb(59 130 246 / 0.7); /* cobalt (site `gold` token) */
  background: rgb(37 99 235 / 0.08);
  outline: none;
}
/* Selection state is conveyed by the screenshot itself (the radio/toggle
   controls baked into each PNG). Hotspots stay transparent at rest — a steady
   [aria-pressed='true'] outline drew a stray blue box on EVERY default-selected
   row (all 9 on Step 3), reading as a rendering glitch rather than a highlight.
   The hover/focus affordance below is the only visible cue, matching the
   goto-only steps (1,2,4) the owner signed off on. */
/* Small pulsing cue on the primary (advance) hotspot — understated, motion-gated */
.app-tour .tour-hotspot-dot {
  display: none;
}
.app-tour .tour-hotspot-primary .tour-hotspot-dot {
  display: block;
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
  background: #3b82f6;
  box-shadow: 0 0 0 0 rgb(59 130 246 / 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .app-tour .tour-hotspot-primary .tour-hotspot-dot {
    animation: tour-dot-pulse 2.4s ease-out infinite;
  }
}
@keyframes tour-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0.55);
  }
  60% {
    box-shadow: 0 0 0 0.55rem rgb(59 130 246 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(59 130 246 / 0);
  }
}
.app-tour .tour-dot {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #243454; /* navy-600 */
  transition: background-color 150ms ease, transform 150ms ease;
}
.app-tour .tour-dot:hover {
  background: #3b82f6;
}
.app-tour .tour-dot[aria-current='step'] {
  background: #3b82f6;
  transform: scale(1.25);
}