/* =====================================================
   ISSUE-017 Guided Tutorial
   Backdrop + step card + target highlight.
   Colors/dims from themes.css variables only.
   ===================================================== */

.tutorial-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--clr-overlay);
    z-index: 9000;
    /* pointer-events:auto is the default — the raised #sidebar (z-9001) sits above this backdrop
       so its tabs receive clicks. All other viewport area hits the backdrop (which swallows
       the click via stopPropagation in TutorialUI._buildOverlay). */
}

/* Desktop: raise the ENTIRE #sidebar above the backdrop.
   #sidebar is a flex item with z-index:100 → it IS a stacking context (flex item +
   non-auto z-index creates one per CSS spec). Individual .nav-tab children CANNOT
   escape this context. Raising the container is the only way to make tabs visible
   and clickable above the 9000 backdrop. */
body.tutorial-active #sidebar {
    z-index: 9001;
}

/* Highlight ring on the target tab — no z-index needed since the parent #sidebar
   is already above the backdrop. */
.nav-tab.tutorial-target {
    box-shadow: 0 0 0 3px var(--clr-accent);
    border-radius: 4px;
}

.tutorial-card {
    position: fixed;
    z-index: 9002;
    /* Card is appended to document.body (root stacking context), not to the backdrop.
       This is critical: on mobile the backdrop is z-998, and if the card were its child
       the card's z-9002 would be scoped to 998 (below the 1000 drawer). At root level,
       z-9002 exceeds both the 9000 desktop backdrop and the 1000 mobile drawer. */
    max-width: 320px;
    padding: var(--space-md);
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: var(--clr-text);
}

.tutorial-card--centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tutorial-title {
    margin: 0 0 var(--space-sm) 0;
    font-size: 1.1rem;
    color: var(--clr-accent);
}

.tutorial-text {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--clr-text);
}

.tutorial-skip {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: transparent;
    border: none;
    color: var(--clr-text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

.tutorial-dismiss {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--clr-accent);
    color: var(--clr-surface);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

/* ---- Mobile (<=768px): drawer-aware layout ---- */
@media (max-width: 768px) {
    /* Backdrop sits BELOW the drawer (#sidebar:1000) and its overlay (#sidebar-overlay:999)
       so the auto-opened drawer + tabs remain tappable. */
    .tutorial-overlay--mobile {
        z-index: 998;
        background-color: transparent; /* the drawer's own #sidebar-overlay provides the dim */
    }

    /* No per-tab z-lift on mobile — parent #sidebar is already raised above backdrop. */
    .nav-tab.tutorial-target {
        box-shadow: 0 0 0 3px var(--clr-accent);
    }

    /* Card becomes a bottom sheet floating above the drawer. */
    .tutorial-card {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 12px 12px 0 0;
        padding-bottom: max(var(--space-md), var(--safe-top));
    }

    .tutorial-card--centered {
        top: auto;
        left: 0;
        transform: none;
    }
}