.feature-tour-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        168deg,
        color-mix(in srgb, var(--accent-primary) 18%, rgba(0, 0, 0, 0.08)) 0%,
        rgba(0, 0, 0, 0.38) 42%,
        color-mix(in srgb, var(--background-secondary) 35%, rgba(0, 0, 0, 0.5)) 100%
    );
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    z-index: 2200;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .feature-tour-overlay {
        background: linear-gradient(
            168deg,
            color-mix(in srgb, var(--accent-primary) 14%, rgba(0, 0, 0, 0.42)) 0%,
            rgba(0, 0, 0, 0.52) 100%
        );
    }
}

/* Card is a direct child of body so it sits above the highlighted element (z-index 2201) */
.feature-tour-card {
    position: fixed;
    z-index: 2202;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 96vw);
    border: 1px solid var(--border-primary);
    background: var(--background-modal);
    color: var(--text-primary);
    padding: 1rem;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent),
        0 18px 48px rgba(0, 0, 0, 0.28);
}

.feature-tour-progress {
    font-size: var(--font-size-controls);
    color: var(--text-tertiary);
    margin-bottom: 0.35rem;
}

.feature-tour-title {
    font-size: var(--font-size-category);
    margin-bottom: 0.35rem;
}

.feature-tour-body {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.feature-tour-fields {
    margin-bottom: 0.75rem;
    display: grid;
    gap: 0.65rem;
}

.feature-tour-field {
    display: grid;
    gap: 0.3rem;
}

.feature-tour-field-label {
    color: var(--text-secondary);
    font-size: var(--font-size-controls);
}

.feature-tour-input {
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
}

.feature-tour-fieldset {
    border: 1px solid var(--border-primary);
    padding: 0.45rem 0.6rem;
    display: grid;
    gap: 0.35rem;
}

.feature-tour-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
}

.feature-tour-field-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-controls);
}

.feature-tour-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.feature-tour-btn {
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

.feature-tour-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--background-secondary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

.feature-tour-highlight {
    position: relative;
    z-index: 2201;
    box-shadow: 0 0 0 2px var(--accent-primary), 0 0 0 6px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

@media (max-width: 768px) {
    .feature-tour-highlight {
        box-shadow: 0 0 0 1px var(--accent-primary), 0 0 0 3px color-mix(in srgb, var(--accent-primary) 14%, transparent);
    }
}

/* Elevate the header and button bar above the overlay so highlighted
   elements are crisp and interactive — their parent stacking contexts
   (z-index 1000 / no position) would otherwise keep them painted below
   the overlay's backdrop-filter blur. */
body[data-tour-active="true"] .header-top {
    position: relative;
    z-index: 2201;
    pointer-events: none;
}

body[data-tour-active="true"] .button-container {
    z-index: 2201;
    pointer-events: none;
}

/* Force commands, finders and search buttons visible during the tour */
body[data-tour-active="true"] .commands-button,
body[data-tour-active="true"] .finders-button,
body[data-tour-active="true"] #search-button {
    display: flex !important;
}