/* Онбординг-тур v3 — премиум спотлайт-walkthrough в дизайне Эталон (ember/ink).
   Фокусная зона остаётся ЧЁТКОЙ; всё остальное мягко блюрится 4 панелями (.tour-shade__p)
   вокруг выреза + лёгкое затемнение. Сверху — чистый тонкий ember-ring (.tour-spotlight).
   .tour-catch снизу глотает свободные клики; .tour-card — coachmark-карточка. */

.tour-catch {
    position: fixed;
    inset: 0;
    z-index: 1100;
    cursor: default;
    background: transparent;
    transition: background var(--dur-2, 240ms) var(--ease-out, ease),
                backdrop-filter var(--dur-2, 240ms) var(--ease-out, ease);
}
/* центр-шаги (welcome/finish) без таргета — блюрим + затемняем весь экран */
.tour-catch--dim {
    background: rgba(18, 20, 23, 0.42);
    -webkit-backdrop-filter: blur(5px) saturate(0.95);
    backdrop-filter: blur(5px) saturate(0.95);
}

/* 4 панели затемнения-с-блюром вокруг выреза (геометрию ставит placeSpot) */
.tour-shade {
    position: fixed;
    inset: 0;
    z-index: 1101;
    pointer-events: none;
    transition: opacity 150ms var(--ease-out, ease);
}
.tour-shade.tour-hidden { opacity: 0; }
.tour-shade__p {
    position: fixed;
    /* ТОЛЬКО блюр, без затемнения — затемнение даёт СКРУГЛЁННЫЙ box-shadow ring'а (следует
       border-radius → нет острых угловых «гэпов» между скруглённым контуром и панелями). */
    background: transparent;
    -webkit-backdrop-filter: blur(5px) saturate(0.95);
    backdrop-filter: blur(5px) saturate(0.95);
    transition:
        left 520ms cubic-bezier(.4, 0, .2, 1),
        top 520ms cubic-bezier(.4, 0, .2, 1),
        width 520ms cubic-bezier(.4, 0, .2, 1),
        height 520ms cubic-bezier(.4, 0, .2, 1);
}
.tour-shade.tour-spot--jump,
.tour-shade.tour-spot--jump .tour-shade__p { transition: none; }

.tour-spotlight {
    position: fixed;
    z-index: 1102;
    box-sizing: border-box;
    border-radius: 16px;
    pointer-events: none;
    /* БЕЗ оранжевой обводки (решение Артёма: «грязно») — фокус задаёт ТОЛЬКО чёткий вырез
       на затемнённо-размытом фоне. Затемнение = скруглённый 9999px-spread (следует
       border-radius → углы выреза идеально скруглены) + мягкая нейтральная тень для глубины
       + еле заметная светлая внутренняя кромка (1px), чтобы край выреза читался без цвета. */
    box-shadow:
        0 0 0 9999px rgba(18, 20, 23, 0.40),
        0 10px 30px rgba(18, 20, 23, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    /* МЕДЛЕННЫЙ плавный ease-in-out (~520мс позиция, ~360мс прозрачность) — переход «окошка»
       идёт мягко и неспешно вперёд/назад, без рывка. */
    transition:
        opacity 360ms cubic-bezier(.4, 0, .2, 1),
        left 520ms cubic-bezier(.4, 0, .2, 1),
        top 520ms cubic-bezier(.4, 0, .2, 1),
        width 520ms cubic-bezier(.4, 0, .2, 1),
        height 520ms cubic-bezier(.4, 0, .2, 1);
}
.tour-spotlight.tour-hidden { opacity: 0; }
/* jump = мгновенно ВСЁ (и позиция, и видимость): старый ring исчезает без фейда (нет
   стейл-обводки), новый появляется сразу на правильном элементе */
.tour-spotlight.tour-spot--jump { transition: none; }

.tour-card {
    position: fixed;
    z-index: 1103;
    width: min(380px, calc(100vw - 32px)); /* 380, не 420: влезает в боковой зазор центрированной модалки (600px) → карточка не задевает подсветку */
    background: var(--c-snow, #fff);
    border-radius: var(--r-lg, 20px);
    box-shadow: var(--sh-lg, 0 24px 60px rgba(21, 23, 26, .18));
    padding: 22px 22px 16px;
    opacity: 0;
    transform: translateY(6px) scale(.99);
    /* карточка НЕ исчезает между шагами — МЕДЛЕННО и плавно ПЕРЕЕЗЖАЕТ top/left (главное
       движение, за которым следит глаз) в одном ритме со спотом ~520мс ease-in-out →
       переход идёт мягко и неспешно вперёд/назад, без рывка. */
    transition:
        opacity 300ms cubic-bezier(.4, 0, .2, 1),
        transform 300ms cubic-bezier(.4, 0, .2, 1),
        top 520ms cubic-bezier(.4, 0, .2, 1),
        left 520ms cubic-bezier(.4, 0, .2, 1);
}
.tour-card.tour-show { opacity: 1; transform: translateY(0) scale(1); }
/* внутри-шаговая подгонка позиции (рост элемента/resize) — мгновенно, без медленного glide */
.tour-card.tour-card--no-anim { transition: none; }
/* первый показ — без скольжения top/left из угла (только проявление) */
.tour-card.tour-instant { transition: opacity 180ms var(--ease-out, ease), transform 180ms var(--ease-out, ease); }

.tour-card__x {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--c-smoke, #6E7178);
    border-radius: 8px; cursor: pointer;
    transition: all var(--dur-1, 160ms) var(--ease-out, ease);
}
@media (hover: hover) { .tour-card__x:hover { background: var(--c-mist, #DCDDE0); color: var(--c-ink, #15171A); } }

.tour-card__step {
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .08em;
    color: var(--c-ember, #FF5A1F);
    text-transform: uppercase;
    margin-bottom: 10px;
    min-height: 11px;
}
.tour-card__title {
    font: 600 19px/1.2 "Unbounded", sans-serif;
    color: var(--c-ink, #15171A);
    margin: 0 0 8px;
    padding-right: 26px;
}
.tour-card__body {
    font: 400 14px/1.55 "Inter", sans-serif;
    color: var(--c-graphite, #4A4D54);
    margin: 0 0 18px;
}
.tour-card__bar {
    height: 4px;
    border-radius: 999px;
    background: var(--c-mist, #DCDDE0);
    overflow: hidden;
    margin-bottom: 16px;
}
.tour-card__bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--c-ember, #FF5A1F);
    transition: width var(--dur-3, 420ms) var(--ease-out, ease);
}
.tour-card__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;                 /* safety: если шрифт шире — кнопка переносится целиком, не текстом */
}
.tour-card__nav-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tour-btn {
    font: 600 13px/1 "Inter", sans-serif;
    padding: 9px 14px;
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--c-mist, #DCDDE0);
    background: var(--c-snow, #fff);
    color: var(--c-graphite, #4A4D54);
    cursor: pointer;
    white-space: nowrap;            /* текст кнопки НИКОГДА не рвётся на 2 строки */
    transition: background var(--dur-1, 160ms) var(--ease-out, ease), border-color var(--dur-1, 160ms) var(--ease-out, ease), color var(--dur-1, 160ms) var(--ease-out, ease);
}
.tour-btn--primary {
    background: var(--c-ember, #FF5A1F);
    border-color: var(--c-ember, #FF5A1F);
    color: #fff;
}
/* убрать чёрное фокус-кольцо после клика мышью; для клавиатуры — мягкий ember-ring */
.tour-btn:focus { outline: none; }
.tour-btn:focus-visible { outline: 2px solid var(--c-ember-soft, #FFE3D3); outline-offset: 2px; }
@media (hover: hover) {
    .tour-btn:hover { border-color: var(--c-ink, #15171A); color: var(--c-ink, #15171A); }
    .tour-btn--primary:hover { background: var(--c-ember-deep, #C53D0F); border-color: var(--c-ember-deep, #C53D0F); color: #fff; }
}

/* Кнопка «?» в шапке */
#tour-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--c-mist, #DCDDE0);
    background: var(--c-paper, #F4F2EE);
    color: var(--c-smoke, #6E7178);
    cursor: pointer;
    transition: all var(--dur-1, 160ms) var(--ease-out, ease);
}
@media (hover: hover) {
    #tour-btn:hover { color: var(--c-ember, #FF5A1F); border-color: var(--c-ember, #FF5A1F); background: var(--c-ember-soft, #FFE3D3); }
}

/* Мобильную версию тура не делаем (2026-06-14): на ≤640px тур не запускается (см. tour.js
   isMobileViewport) — поэтому bottom-sheet @media-блок убран. */

/* Reduced motion — без «перелёта» подсветки */
@media (prefers-reduced-motion: reduce) {
    .tour-spotlight { transition: opacity 120ms linear; }
    .tour-card { transition: opacity 120ms linear; }
    .tour-card__bar > i { transition: none; }
}