/**
 * Tutorial — Core Make My
 *
 * The whole stylesheet for the driver.js coach marks. driver.js's own
 * `driver.css` is deliberately NOT loaded (2026-09-29): its popover chrome,
 * vendor font stack and button body (a white text-shadow that smeared the Coal
 * Next button) fought the site's, so this sheet carries the few structural
 * rules the library relies on plus the site's own chrome. The backdrop and
 * highlight cut-out need no CSS — driver.js draws them as an SVG with inline
 * styles (Design.md §11: the tour keeps the library's own backdrop).
 */

/* (`.core-tutorial-btn` overrode the `.core-btn` full-width default for a
   trigger button that no markup emits — the tutorial is opened from the
   stepper, not from a button of its own. Deleted, efficiency #229; same
   dead-class case as `.core-eb-group` in #222.) */

/* --- Structural rules driver.js relies on (ported from driver.css) --- */

/* While a tour runs, only the highlighted element and the popover take
   pointer input; the page behind the backdrop is inert. */
.driver-active .driver-overlay,
.driver-active * {
    pointer-events: none;
}

.driver-active .driver-active-element,
.driver-active .driver-active-element *,
.driver-popover,
.driver-popover * {
    pointer-events: auto;
}

.driver-no-interaction,
.driver-no-interaction * {
    pointer-events: none !important;
}

/* Stops a scroll container shifting the highlighted element out from under
   its cut-out mid-step. */
:not(body):has(> .driver-active-element) {
    overflow: hidden !important;
}

@keyframes core-tutorial-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.driver-fade .driver-overlay,
.driver-fade .driver-popover {
    animation: core-tutorial-fade-in var(--dur-base) var(--ease);
}

/* --- Popover ----------------------------------------------------------
   Surface, border, radius and shadow come from `.core-popover` in
   `core-modal.css` (joined there by selector — driver.js builds this markup).
   Only placement and the box's own proportions live here. */

.driver-popover {
    position: fixed;
    top: 0;
    right: 0;
    /* Above the overlay SVG, which driver.js pins at an inline z-index of
       10000 — a vendor number no rung of the --z-* scale reaches. */
    z-index: 10001;
    box-sizing: border-box;
    min-width: 250px;
    max-width: 300px;
    margin: 0;
    padding: var(--sp-5);
    font-family: var(--font-sans);
    color: var(--ink);
}

/* The arrow is a borderless 5px triangle that cannot carry the popover's 1px
   Stone edge, so it read as a notch cut out of the card. The highlighted
   element's cut-out already says what the popover is about. */
.driver-popover-arrow {
    display: none;
}

.driver-popover-title {
    display: block;
    margin: 0;
    /* Clears the corner ×. */
    padding-right: var(--sp-6);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.driver-popover-title[style*="block"] + .driver-popover-description {
    margin-top: var(--sp-2);
}

.driver-popover-description {
    margin: 0;
    font-size: var(--fs-14);
    line-height: 1.5;
    color: var(--ink-soft);
}

/* The corner × is joined onto `.core-btn` / `--close` in `core-controls.css`;
   only its pin lives here, in the popover's 8px corner like every other
   popover close. */
.driver-popover-close-btn {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
}

.driver-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.driver-popover-progress-text {
    font-size: var(--fs-12);
    /* --ink-muted, not --ink-faint: the old #999 already failed AA at 12px
       and --ink-faint would have dimmed it further. */
    color: var(--ink-muted);
}

.driver-popover-navigation-btns {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    gap: var(--sp-2);
}

/* The footer's Back / Next / Done buttons carry no body here (efficiency #229).
   They are driver.js's own markup, so they are comma-joined onto the `.core-btn`
   family — Small, inline, Back = Secondary, Next/Done = Primary — in
   `core-controls.css`, which this sheet reaches through its `core-configurator`
   dependency. Don't restate a body here; add a variant there. */

/* Step 1 has nowhere to go back to, so Back is removed rather than shown
   disabled — a greyed control advertises an action that doesn't exist.
   `!important` because driver.js writes `display: block` inline on every
   footer button it shows. */
.driver-popover-footer .driver-popover-navigation-btns .driver-popover-btn-disabled {
    display: none !important;
}