/* The walkthrough popover, in the Crowdhelix design tokens. Loaded after
   driver.css, and scoped to the tour's popover class so nothing else changes. */

.driver-popover.crowdhelix-tour {
  background: var(--white, #fff);
  color: var(--text-prose, #3a3a4a);
  border: 1px solid var(--border-card, #e6e4ef);
  border-radius: var(--radius-3xl, 16px);
  box-shadow: 0 18px 48px rgba(20, 18, 50, 0.22);
  padding: 20px 22px 16px;
  max-width: 380px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.driver-popover.crowdhelix-tour .driver-popover-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--display-sm, 22px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-display, #16152b);
  margin-bottom: 8px;
}

.driver-popover.crowdhelix-tour .driver-popover-description {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--body-sm, 14px);
  line-height: var(--leading-prose, 1.6);
  color: var(--text-prose, #3a3a4a);
}

.driver-popover.crowdhelix-tour .driver-popover-description strong {
  color: var(--text-body, #22213a);
  font-weight: 600;
}

.driver-popover.crowdhelix-tour .driver-popover-footer {
  margin-top: 16px;
  align-items: center;
}

.driver-popover.crowdhelix-tour .driver-popover-progress-text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--mono-xs, 12px);
  color: var(--text-faint, #8a88a0);
}

.driver-popover.crowdhelix-tour .driver-popover-footer-btn {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--body-xs, 13px);
  text-shadow: none;
  border-radius: var(--radius-xl, 8px);
  padding: 7px 14px;
  background: var(--white, #fff);
  color: var(--accent-primary, #4b3fd6);
  border: 1px solid var(--indigo-150, #d9d6f2);
}

.driver-popover.crowdhelix-tour .driver-popover-footer-btn:hover,
.driver-popover.crowdhelix-tour .driver-popover-footer-btn:focus {
  background: var(--accent-pill-bg, #efedfc);
}

/* "Next" / "Done" is the primary action. */
.driver-popover.crowdhelix-tour .driver-popover-next-btn,
.driver-popover.crowdhelix-tour .driver-popover-done-btn {
  background: var(--accent-primary, #4b3fd6);
  color: var(--white, #fff);
  border-color: var(--accent-primary, #4b3fd6);
}

.driver-popover.crowdhelix-tour .driver-popover-next-btn:hover,
.driver-popover.crowdhelix-tour .driver-popover-next-btn:focus {
  background: var(--indigo-600, #3b31b3);
}

.driver-popover.crowdhelix-tour .driver-popover-close-btn {
  color: var(--text-faint, #8a88a0);
}

.driver-popover.crowdhelix-tour .driver-popover-close-btn:hover {
  color: var(--accent-primary, #4b3fd6);
}

/* A step's context — the selected tab and search scope — lifted above driver's
   overlay (z-index 10000) and pulsed, so it stays readable while the page fades.
   Clicks are still blocked by driver's `.driver-active *` rule. */
.crowdhelix-tour-context {
  position: relative;
  z-index: 10001 !important;
  background: var(--accent-pill-bg, #efedfc) !important;
  animation: crowdhelix-tour-pulse 1.6s ease-in-out infinite;
}

@keyframes crowdhelix-tour-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9), 0 0 0 0 rgba(125, 110, 240, 0.7);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(125, 110, 240, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crowdhelix-tour-context {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  }
}