/* ==========================================================================
   The guided tour

   Three fixed layers over the page: a dimmer that swallows clicks, the
   spotlight that cuts a hole in it, and the step card.
   ========================================================================== */

/* The home page's entry point. A button among nav links, so it borrows their
   look rather than inventing one. */
.tour-start {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--color-text-inverse);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity var(--transition-base);
}

.tour-start:hover {
    opacity: 1;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
}

/* One element does the dimming and the cut-out both: a spread far larger than
   any window paints everything outside this box, which leaves the box itself
   as the hole. Cheaper and better supported than an SVG mask, and it animates
   from step to step for free. */
.tour-spotlight {
    position: fixed;
    z-index: 1501;
    pointer-events: none;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 9999px rgba(16, 40, 58, 0.72);
}

/* Added by tour.js after the first step is placed, so the spotlight glides
   from step to step but does not glide in from the corner on page load. */
.tour-spotlight.placed {
    transition: left var(--transition-base), top var(--transition-base),
        width var(--transition-base), height var(--transition-base);
}

.tour-card {
    position: fixed;
    z-index: 1502;
    width: min(24rem, calc(100vw - 2rem));
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--panel-border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--gap-1);
    line-height: 1.5;
}

.tour-step-count {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-bottom: calc(var(--gap-0) / 4);
}

.tour-title {
    font-size: var(--font-size-medium);
    margin-bottom: calc(var(--gap-0) / 2);
}

.tour-body {
    font-size: var(--font-size-small);
    margin-bottom: var(--gap-0);
}

.tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-0);
}

/* Skip sits left of Back/Next so the two buttons that walk the tour stay
   together under the thumb. */
.tour-actions [data-tour-action="skip"] {
    margin-right: auto;
}

.tour-button {
    font: inherit;
    font-size: var(--font-size-small);
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.tour-button:hover:not(:disabled) {
    background: var(--color-surface-hover);
}

.tour-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tour-button.primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}

.tour-button.primary:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}