/* ═══════════════════════════════════════════════════════════════════════
   Page tours — the driver.js popover in TotumTeams colours.

   driver.js appends its popover to <body>, outside .portal-shell, so the
   portal tokens (--white, --grey) are not in scope there. The :root tokens
   from theme.css are, and they flip with data-theme, so the popover follows
   the light/dark switch without a second rule set.

   --tt-menu rather than --tt-panel: the panel token is translucent, and the
   popover sits over driver's own dimmed backdrop.
   ═══════════════════════════════════════════════════════════════════════ */

.driver-popover {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    background-color: var(--tt-menu);
    color: var(--tt-text);
    border: 1px solid var(--tt-border);
    border-radius: 10px;
}

.driver-popover-description {
    color: var(--tt-text);
    font-size: 0.92rem;
}

.driver-popover-progress-text {
    color: var(--tt-muted);
}

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

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
    color: var(--tt-text);
}

.driver-popover-footer-btn {
    background-color: transparent;
    color: var(--tt-text);
    border: 1px solid var(--tt-border-input);
    border-radius: 6px;
    padding: 4px 10px;
}

.driver-popover-footer-btn:hover,
.driver-popover-footer-btn:focus {
    background-color: var(--tt-fill-2);
}

/* The last button in the row is next/done — the one the tour wants clicked. */
.driver-popover-navigation-btns button:last-child {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
    color: #ffffff;
}

.driver-popover-navigation-btns button:last-child:hover,
.driver-popover-navigation-btns button:last-child:focus {
    background-color: var(--tt-orange-hover);
    border-color: var(--tt-orange-hover);
}

/* One side of the arrow's border is the visible one and the other three are
   transparent, set per side in driver.css. Recolouring .driver-popover-arrow
   wholesale would paint all four and turn the arrow into a square. */
.driver-popover-arrow-side-left   { border-left-color:   var(--tt-menu); }
.driver-popover-arrow-side-right  { border-right-color:  var(--tt-menu); }
.driver-popover-arrow-side-top    { border-top-color:    var(--tt-menu); }
.driver-popover-arrow-side-bottom { border-bottom-color: var(--tt-menu); }

/* ── The per-page help button ──────────────────────────────────────────── */

.page-tour-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.page-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    padding: 5px 12px;
}