/* Allo overrides for Driver.js. Scoped via popoverClass: "allo-tour" so we
   don't fight defaults globally. All colors flow from the design-system
   tokens declared in tailwind/application.css, so dark mode swaps for free. */
.driver-popover.allo-tour {
  --driver-popover-bg: var(--color-surface);
  --driver-popover-color: var(--color-ink);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}

.driver-popover.allo-tour .driver-popover-arrow-side-bottom,
.driver-popover.allo-tour .driver-popover-arrow-side-top,
.driver-popover.allo-tour .driver-popover-arrow-side-left,
.driver-popover.allo-tour .driver-popover-arrow-side-right {
  border-color: var(--color-surface);
}

.driver-popover.allo-tour .driver-popover-title {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1rem;
}

.driver-popover.allo-tour .driver-popover-description {
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.driver-popover.allo-tour .driver-popover-progress-text {
  color: var(--color-ink-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
}

.driver-popover.allo-tour .driver-popover-close-btn {
  color: var(--color-ink-muted);
}
.driver-popover.allo-tour .driver-popover-close-btn:hover {
  color: var(--color-ink);
}

.driver-popover.allo-tour .driver-popover-next-btn {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-weight: 500;
  text-shadow: none;
}
.driver-popover.allo-tour .driver-popover-next-btn:hover {
  background: var(--color-accent-hover);
}

.driver-popover.allo-tour .driver-popover-prev-btn {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-weight: 500;
  text-shadow: none;
}
.driver-popover.allo-tour .driver-popover-prev-btn:hover {
  background: var(--color-accent-soft);
}

/* Icon-only "Take a tour" button. Compact square so it sits cleanly next to
   primary action buttons in the page header without hijacking the row. */
.tour-replay {
  padding-inline: 0.5rem;
  aspect-ratio: 1 / 1;
}