/*
  The first-run tour's popover (#191), design/"Onboarding tour - issue 191.dc.html", over driver.js's
  own stylesheet (lib/driver.js/dist/driver.css). Global rather than scoped: driver.js draws the popover
  at the end of <body>, outside every component. Tokens come from ClientCommon's nocturne.css; the
  overlay's colour is the ground token too, handed to driver.js by wwwroot/tour.js.
*/

.driver-popover.council-tour {
    min-width: 260px;
    max-width: 320px;
    padding: 14px 16px 12px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-surface);
    box-shadow: var(--nocturne-shadow);
    font-family: var(--font-sans);
    color: var(--nocturne-text);
}

.council-tour .driver-popover-title {
    font: 500 13px/1.4 var(--font-sans);
    color: var(--nocturne-text);
}

.council-tour .driver-popover-description {
    font: 400 12px/1.55 var(--font-sans);
    color: var(--nocturne-text-dim);
}

.council-tour .driver-popover-footer {
    gap: 10px;
    margin-top: 14px;
}

/* The step counter is a label, so it is set as one: mono, upper-case, letter-spaced. */
.council-tour .driver-popover-progress-text {
    font: 400 9.5px var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nocturne-text-muted);
}

.council-tour .driver-popover-navigation-btns {
    gap: 6px;
}

.council-tour .driver-popover-navigation-btns button + button {
    margin-left: 0;
}

.council-tour .driver-popover-footer-btn,
.council-tour .driver-popover-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: auto;
    height: auto;
    padding: 6px 11px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised);
    font: 400 11.5px var(--font-sans);
    color: var(--nocturne-text-dim);
    text-shadow: none;
    cursor: pointer;
}

.council-tour .driver-popover-footer-btn:hover,
.council-tour .driver-popover-footer-btn:focus {
    background: var(--nocturne-raised-alt);
    color: var(--nocturne-text);
}

/* Next and Done: the way on, in the accent. */
.council-tour .driver-popover-next-btn {
    border-color: var(--nocturne-accent-edge);
    background: var(--nocturne-accent-deep);
    color: var(--nocturne-accent-text);
}

.council-tour .driver-popover-next-btn:hover,
.council-tour .driver-popover-next-btn:focus {
    background: var(--nocturne-accent-faded);
    color: var(--nocturne-text);
}

/* Skip: a ghost, so it never reads as the step's main action. */
.council-tour .driver-popover-close-btn {
    border-color: transparent;
    background: transparent;
    color: var(--nocturne-text-muted);
}

.council-tour .driver-popover-close-btn:hover,
.council-tour .driver-popover-close-btn:focus {
    background: var(--nocturne-hover-wash);
    color: var(--nocturne-text);
}

.council-tour .driver-popover-footer-btn:focus-visible,
.council-tour .driver-popover-close-btn:focus-visible {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

/* driver.js draws the arrow as one coloured border side; each side keeps its own transparency and
   takes the popover's surface instead of white. */
.council-tour .driver-popover-arrow-side-left {
    border-left-color: var(--nocturne-surface);
}

.council-tour .driver-popover-arrow-side-right {
    border-right-color: var(--nocturne-surface);
}

.council-tour .driver-popover-arrow-side-top {
    border-top-color: var(--nocturne-surface);
}

.council-tour .driver-popover-arrow-side-bottom {
    border-bottom-color: var(--nocturne-surface);
}

/* Compact, below 640px: the popover keeps inside the 14px gutter, and every button is thumb-sized
   (design/"Responsive pass - issue 36.dc.html" 1d's 44px). */
@media (width < 640px) {
    .driver-popover.council-tour {
        min-width: 0;
        max-width: calc(100vw - 28px);
    }

    .council-tour .driver-popover-footer {
        flex-wrap: wrap;
    }

    .council-tour .driver-popover-footer-btn,
    .council-tour .driver-popover-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* tour.js already turns driver.js's animation off for this reader; this catches the fade it would
   otherwise run on the overlay and the popover. */
@media (prefers-reduced-motion: reduce) {
    .driver-fade .driver-overlay,
    .driver-fade .driver-popover {
        animation: none;
    }
}