/*
 * Restyles driver.js to look like the rest of Mindup.
 *
 * Colours come from mindup-tokens.css only - no material names and no Vuetify
 * overrides, which belong in mindup-vuetify.css. Everything here is scoped to
 * driver's own class names, so it cannot leak into the app's markup.
 */

.driver-popover.mindup-tour {
    background: var(--mu-surface, #ffffff);
    color: var(--mu-ink-1, #1f2933);
    border-radius: var(--mu-r-lg, 16px);
    box-shadow: var(--mu-sh-2, 0 12px 32px rgba(15, 23, 42, 0.18));
    padding: 20px 22px;
    max-width: 360px;
}

.driver-popover.mindup-tour .driver-popover-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mu-ink-1, #1f2933);
    margin-bottom: 8px;
}

.driver-popover.mindup-tour .driver-popover-description {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--mu-ink-2, #52606d);
}

/* --mu-ink-60, not a lighter grey: at 12.5px anything paler falls under 4.5:1 on white. */
.driver-popover.mindup-tour .driver-popover-progress-text {
    font-size: 0.78rem;
    color: var(--mu-ink-60, #5c5668);
}

.driver-popover.mindup-tour .driver-popover-navigation-btns button {
    background: var(--mu-purple, #651cf8);
    color: #ffffff;
    border: 0;
    border-radius: var(--mu-r-sm, 8px);
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: none;
    cursor: pointer;
}

.driver-popover.mindup-tour .driver-popover-navigation-btns button:hover {
    background: var(--mu-purple-dark, #3d0fa3);
}

/* The way out has to stay legible without competing with the primary action. */
.driver-popover.mindup-tour .driver-popover-close-btn {
    color: var(--mu-ink-3, #7b8794);
    font-size: 1.1rem;
}

.driver-popover.mindup-tour .driver-popover-close-btn:hover {
    color: var(--mu-ink-1, #1f2933);
}

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

/* The welcome: the floating step that opens a tour or a delta run. It borrows
   the dashboard's CTA banner (solid brand purple, a large faded glyph) so the
   first thing a tour says reads as Mindup greeting, not a system tooltip. The
   band is added by the overlay; it bleeds to the popover's edges. */
.driver-popover.mindup-tour.mindup-tour--welcome {
    max-width: 400px;
    padding-top: 0;
    overflow: hidden;
    border-radius: var(--mu-r-lg, 20px);
    box-shadow: var(--mu-sh-4, 0 24px 56px rgba(61, 15, 163, 0.18));
}

.driver-popover.mindup-tour--welcome .mindup-tour__band {
    position: relative;
    height: 92px;
    margin: 0 -22px 18px;
    background: var(--mu-purple, #651cf8);
    overflow: hidden;
}

.driver-popover.mindup-tour--welcome .mindup-tour__glyph {
    position: absolute;
    right: 18px;
    bottom: -22px;
    font-size: 112px;
    line-height: 1;
    color: #ffffff;
    opacity: 0.18;
}

.driver-popover.mindup-tour--welcome .driver-popover-title {
    font-family: var(--mu-font-display, 'Montserrat', sans-serif);
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--mu-ink, #0f0a1f);
}

.driver-popover.mindup-tour--welcome .driver-popover-description {
    font-size: 0.95rem;
    color: var(--mu-ink-60, #5c5668);
}

/* The way out sits on the band, so it turns white to stay legible there. */
.driver-popover.mindup-tour--welcome .driver-popover-close-btn {
    z-index: 1;
    color: rgba(255, 255, 255, 0.85);
}

.driver-popover.mindup-tour--welcome .driver-popover-close-btn:hover {
    color: #ffffff;
}

/* The replay button: 20 px from the corner (Vuetify's fixed offsets are
   16 px; these override them), above page content and below dialogs.
   driver's overlay sits far above both, so a run covers it as well as
   hiding it. Vuetify sets the offsets with two-class selectors
   (.v-btn--fixed.v-btn--bottom), so a single class would lose; three win. */
.v-btn.v-btn--fixed.mu-tour-fab {
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

/* Over a right-hand drawer (the cycle page's risk panel): above the drawer and
   its scrim, and in the other corner, clear of the drawer's footer button. On a
   phone the drawer is full width, and its footer keeps its left side empty. */
.v-btn.v-btn--fixed.mu-tour-fab.mu-tour-fab--over-panel {
    left: 20px;
    right: auto;
    z-index: 10;
}