/* === Onboarding spotlight tour === */
/* Guide mode is a HARD lock: only the spotlight hole (+ «Пропустить»/«Далее») is
   interactive. The dim is still drawn by the box-shadow on .onb-cutout, but four
   transparent .onb-block panels around the hole now CAPTURE every off-spotlight tap
   so the user can't wander. The hole between the panels stays click-through, so the
   lit target/task (and the study_2 direction sheet, which floats above at z 6000)
   still work. The root stays pointer-events:none so the hole isn't covered; the
   panels and controls opt back in. */
.onb-root { position: fixed; inset: 0; z-index: 4000; pointer-events: none; transition: opacity 200ms ease; }
/* Enter fade: a freshly built overlay starts transparent; JS drops the class next frame.
   Opacity never affects hit-testing, so the shields work from the first frame. */
.onb-root.onb-enter { opacity: 0; }

/* The cutout: a transparent box whose huge box-shadow dims everything else.
   The backdrop (course names, levels) must be unreadable during guide steps —
   the .onb-block panels add a heavy backdrop blur, and this shadow re-darkens
   the frosted result. Only the spotlit target and the plaque stay legible. */
.onb-cutout {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(8, 6, 20, 0.6);
    transition: all 280ms ease;
    pointer-events: none; /* clicks pass through to the real target */
}

/* Click-blockers around the hole; they also frost the backdrop so nothing behind
   is readable (the hole between them stays sharp). JS lays out their geometry
   each frame. */
.onb-block {
    position: fixed; z-index: 4000; pointer-events: auto; background: transparent;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    /* Glide in sync with .onb-cutout when the overlay is REUSED between steps (item #15) —
       the four panels' inner edges are the frosted hole, so they must move together. */
    transition: left 280ms ease, top 280ms ease, width 280ms ease, height 280ms ease;
}

/* Soft spotlight for interaction steps (the quiz): a glowing ring on the lit element
   with NO full-screen dim, so the task (answer options) stays bright and usable. Nav +
   escape routes are still locked by body.onb-tour-active; only the quiz is interactive. */
.onb-cutout.onb-cutout--soft {
    box-shadow: 0 0 0 3px rgba(24, 224, 138, 0.95), 0 0 22px 7px rgba(24, 224, 138, 0.5);
    animation: onb-cutout-glow 1.4s ease-in-out infinite;
}
@keyframes onb-cutout-glow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(24, 224, 138, 0.95), 0 0 18px 5px rgba(24, 224, 138, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(24, 224, 138, 1), 0 0 28px 10px rgba(24, 224, 138, 0.65); }
}

.onb-skip {
    position: fixed; top: 14px; right: 14px; z-index: 6100; /* above the z-6000 chooser sheet — always reachable */
    background: rgba(255,255,255,0.14); color: #fff; border: 0; border-radius: 999px;
    padding: 8px 16px; font-size: 14px; cursor: pointer; backdrop-filter: blur(6px);
    pointer-events: auto; /* re-enable: the root is pointer-events:none */
}

.onb-plaque {
    position: fixed; z-index: 4001; max-width: 300px;
    display: flex; align-items: flex-end; gap: 8px;
    transition: all 280ms ease;
}
/* Step-change content crossfade: the bubble dips out while the plaque glides, the new
   text/buttons fill in mid-flight, then it fades back (JS toggles .onb-swap). The fading
   stale button must not catch taps (.onb-plaque__next opts into pointer-events itself). */
.onb-plaque__bubble { transition: opacity 120ms ease; }
.onb-plaque.onb-swap .onb-plaque__bubble { opacity: 0; }
.onb-plaque.onb-swap .onb-plaque__next { pointer-events: none; }
.onb-plaque__cat { width: 72px; height: 72px; flex: 0 0 72px; object-fit: contain; }
.onb-plaque__bubble {
    background: #1b1530; color: #fff; border-radius: 14px; padding: 12px 14px;
    font-size: 14px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.onb-plaque__next {
    margin-top: 8px; display: inline-block; background: var(--accent, #18e08a);
    color: #06210f; border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer;
    pointer-events: auto; /* re-enable: the root is pointer-events:none */
}
.nav-tab.locked { opacity: 0.5; pointer-events: none; }

/* Blocked-tap feedback: the bubble pulses to redirect attention to the spotlight. */
@keyframes onb-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.onb-plaque__bubble.onb-pulse { animation: onb-pulse 360ms ease; }

/* Whole-tour lock: while guide mode is active, nav tabs + escape routes are dimmed
   and inert (covers the gaps between steps / page transitions, when the shield isn't
   up). The single tab the current step points at gets .onb-current to stay live. */
body.onb-tour-active .client-bottom-nav .nav-tab,
body.onb-tour-active .client-save-progress-cta,
body.onb-tour-active #quiz-close {
    opacity: 0.45;
    pointer-events: none;
}
body.onb-tour-active .client-bottom-nav .nav-tab.onb-current {
    opacity: 1;
    pointer-events: auto;
}

/* === Page-change veil (item #15) ===
   Tour navigations flag sessionStorage; an inline <head> script adds .onb-veiling to <html>
   at PARSE time, so the dark veil exists from the first paint — the deferred tour bundle +
   its async onboarding fetch are far too late and the page used to flash bright. Purely
   visual (pointer-events:none): it can never trap input. The keyframes failsafe dissolves
   it after ~2.6s even if the tour JS never resumes (skip/complete/JS error). */
html.onb-veiling::before {
    content: ''; position: fixed; inset: 0; z-index: 3999; /* just under the 4000 overlay */
    background: rgba(8, 6, 20, 0.92); pointer-events: none;
    transition: opacity 250ms ease;
    animation: onb-veil-failsafe 400ms ease 2600ms forwards;
}
html.onb-veiling.onb-veil-out::before { opacity: 0; }
@keyframes onb-veil-failsafe { to { opacity: 0; visibility: hidden; } }