/* The tour's cards in the portal's own look (index.html :root tokens), over Driver.js's base
   driver-1.9.0.css. Scoped to .storm-tour so nothing else on the page is touched. */
.driver-popover.storm-tour {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font);
  max-width: 340px;
  padding: 18px 18px 14px;
}

.driver-popover.storm-tour .driver-popover-title {
  font: 600 16px/1.3 var(--font);
  color: var(--ink);
}

.driver-popover.storm-tour .driver-popover-description {
  font: 400 14px/1.5 var(--font);
  color: var(--muted);
  margin-top: 6px;
}

/* Driver.js renders its button row as a <footer>, and index.html styles every `footer` for the
   page footer (max-width, 40px bottom padding, small muted text). Undo that here, or each card
   grows an empty band under its buttons. */
.driver-popover.storm-tour .driver-popover-footer {
  max-width: none;
  margin: 14px 0 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.driver-popover.storm-tour .driver-popover-progress-text {
  font: 500 12px/1 var(--font);
  color: var(--muted);
}

.driver-popover.storm-tour .driver-popover-footer button {
  font: 600 13px/1 var(--font);
  text-shadow: none;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
}

.driver-popover.storm-tour .driver-popover-footer .driver-popover-next-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.driver-popover.storm-tour .driver-popover-footer .driver-popover-next-btn:hover {
  background: var(--accent-hover);
}

.driver-popover.storm-tour .driver-popover-footer button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

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

/* The arrow takes the card's colour, whichever side it is on. */
.driver-popover.storm-tour .driver-popover-arrow-side-left { border-left-color: var(--surface); }
.driver-popover.storm-tour .driver-popover-arrow-side-right { border-right-color: var(--surface); }
.driver-popover.storm-tour .driver-popover-arrow-side-top { border-top-color: var(--surface); }
.driver-popover.storm-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface); }

/* An accent ring on whatever is spotlighted. In dark mode the dimmed page and the lit card are
   close in brightness, so the cut-out alone did not show clearly what is being pointed at. */
.driver-active .driver-active-element {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}