/* ============================================================================
   SpellBook · Онбординг маркетплейса
   ----------------------------------------------------------------------------
   Самодостаточный модуль. Цвета/типографика берутся из существующих токенов
   marketplace.css (--void/--surface/--text/--line/--r-sm, шрифты, --ease).
   Темы (dark/light) — автоматически через [data-theme]. Полностью адаптивно:
   на десктопе — модалки и плавающие подсказки; на мобиле — bottom sheet и
   подсказки, прижатые к низу экрана. Уважает prefers-reduced-motion.
   Все слои онбординга живут выше всего остального (z-index 9000+).
   ============================================================================ */

:root{
  --ob-z:           9500;
  --ob-dim:         rgba(8,8,11,0.76);          /* затемнение фона в туре (тёмная тема) */
  --ob-card:        #26262c;                      /* плашки серее, чем чистый --void */
  --ob-card-line:   rgba(255,255,255,0.13);
  --ob-shadow:      0 24px 70px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
  --ob-tip-shadow:  0 14px 44px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --ob-ring:        rgba(255,255,255,0.16);      /* ободок вокруг подсвеченного элемента */
  --ob-radius:      14px;
  --ob-tip-radius:  12px;
}
[data-theme="light"]{
  --ob-dim:         rgba(18,18,24,0.46);
  --ob-card:        #eeeef1;                      /* серовато-белая плашка */
  --ob-card-line:   rgba(0,0,0,0.11);
  --ob-shadow:      0 24px 70px rgba(20,20,30,0.18), 0 2px 10px rgba(20,20,30,0.10);
  --ob-tip-shadow:  0 14px 44px rgba(20,20,30,0.16), 0 1px 4px rgba(20,20,30,0.08);
  --ob-ring:        rgba(20,20,30,0.18);
}

/* Блокируем прокрутку под модалками онбординга */
body.ob-lock{ overflow:hidden; }

/* ─────────────────────────── Подложка модалок ─────────────────────────── */
.ob-scrim{
  position:fixed; inset:0; z-index:var(--ob-z);
  background:var(--ob-dim);
  opacity:0; transition:opacity .28s var(--ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.ob-scrim.is-in{ opacity:1; }

/* ───────────────────── Карточка приветствия / финала ──────────────────── */
/* Десктоп: центрированная модалка. Мобайл (≤640px): bottom sheet со свайпом. */
.ob-card{
  position:relative;
  width:min(520px, 100%);
  max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column;
  background:var(--ob-card);
  border:1px solid var(--ob-card-line);
  border-radius:var(--ob-radius);
  box-shadow:var(--ob-shadow);
  overflow:hidden;
  transform:translateY(10px) scale(.985);
  opacity:0;
  transition:transform .34s cubic-bezier(0.22,1,0.36,1), opacity .26s var(--ease);
}
.ob-scrim.is-in .ob-card{ transform:none; opacity:1; }

.ob-card-handle{ display:none; }              /* «ручка» только на мобиле */

.ob-card-body{ padding:30px 30px 8px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.ob-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono, var(--font-body)); font-size:0.6875rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3);
  margin-bottom:14px;
}
.ob-eyebrow .ob-dot{ width:6px; height:6px; border-radius:50%; background:var(--text); opacity:.85; }

.ob-card h2{
  margin:0 0 10px; font-family:var(--font-display); font-weight:700;
  font-size:1.6rem; line-height:1.18; letter-spacing:-0.02em; color:var(--text);
}
.ob-lead{ margin:0 0 20px; font-size:0.95rem; line-height:1.6; color:var(--text-2); }

/* Список возможностей в приветствии */
.ob-feats{ display:flex; flex-direction:column; gap:14px; margin:0 0 8px; }
.ob-feat{ display:flex; gap:13px; align-items:flex-start; }
.ob-feat-ic{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
}
.ob-feat-ic svg{ width:19px; height:19px; }
.ob-feat-tx{ min-width:0; }
.ob-feat-tx b{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.9rem; color:var(--text); margin-bottom:2px; }
.ob-feat-tx span{ display:block; font-size:0.82rem; line-height:1.45; color:var(--text-3); }

/* Кликабельные выборы для зарегистрированного (Найти / Собрать / Зарабатывать) */
.ob-choices{ gap:10px; }
.ob-feat-btn{ width:100%; display:flex; gap:13px; align-items:center; text-align:left; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s ease, background .15s ease, transform .12s ease; }
.ob-feat-btn:hover{ border-color:var(--text-3); background:var(--raised); }
.ob-feat-btn:active{ transform:scale(.99); }
.ob-feat-btn .ob-feat-arr{ margin-left:auto; flex-shrink:0; display:flex; color:var(--text-3); }
.ob-feat-btn .ob-feat-arr svg{ width:18px; height:18px; }

/* Финальный текст */
.ob-final-tx{ margin:0 0 6px; font-size:0.95rem; line-height:1.65; color:var(--text-2); }
.ob-final-tx strong{ color:var(--text); font-weight:600; }

/* Действия */
.ob-actions{
  display:flex; gap:10px; padding:18px 30px 26px;
  border-top:1px solid transparent;
}
.ob-actions.is-stacked{ flex-direction:column; }
.ob-btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:0.9375rem;
  border-radius:var(--r-sm, 8px); padding:12px 20px;
  transition:transform .12s var(--ease), filter .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
}
.ob-btn:active{ transform:translateY(1px); }
.ob-btn:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

/* Главная кнопка — монохром в стиле .hdr-login (контраст под тему) */
.ob-btn-primary{ flex:1; background:#fff; color:#141414; box-shadow:0 4px 14px rgba(0,0,0,0.22); }
.ob-btn-primary:hover{ filter:brightness(0.94); }
[data-theme="light"] .ob-btn-primary{ background:#141416; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.14); }

/* Вторичная кнопка — тихая */
.ob-btn-ghost{ background:var(--surface); color:var(--text-2); border-color:var(--line); }
.ob-btn-ghost:hover{ color:var(--text); border-color:var(--line-2); }

/* Кнопка-крестик в углу карточки */
.ob-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--surface); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.ob-x:hover{ background:var(--wash); color:var(--text); }
.ob-x svg{ width:16px; height:16px; }

/* ───────────────────────────── Тур: затемнение ──────────────────────────── */
/* Визуальный слой: SVG с «дыркой» (скруглённой) вокруг подсвеченного элемента.
   pointer-events:none — этот слой НИКОГДА не ловит клики, только рисует. */
.ob-spot{
  position:fixed; inset:0; z-index:var(--ob-z);
  pointer-events:none;
  opacity:0; transition:opacity .26s var(--ease);
}
.ob-spot.is-in{ opacity:1; }
.ob-spot svg{ position:fixed; inset:0; width:100%; height:100%; display:block; }
.ob-spot path{ fill:var(--ob-dim); }
/* мягкий ободок вокруг дырки */
.ob-spot rect{ fill:none; stroke:var(--ob-ring); stroke-width:1.5; }

/* Слой блокировки кликов: ловит всё, кроме «дырки» (на интерактивных шагах
   дырка прорезается clip-path). На обычных шагах — блокирует всё (читаем + «Далее»). */
.ob-block{
  position:fixed; inset:0; z-index:calc(var(--ob-z) + 1);
  background:transparent; cursor:default;
}

/* ───────────────────────────── Тур: подсказка ───────────────────────────── */
.ob-tip{
  position:fixed; z-index:calc(var(--ob-z) + 3);
  width:340px; max-width:calc(100vw - 28px);
  box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--ob-card); border:1px solid var(--ob-card-line);
  border-radius:var(--ob-tip-radius); box-shadow:var(--ob-tip-shadow);
  padding:18px 18px 16px;
  opacity:0; transform:scale(.97); transform-origin:center top;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.ob-tip.is-in{ opacity:1; transform:none; }

/* Хвостик-стрелка — SVG (подход Floating UI): два path. .ob-af — заливка цветом плашки,
   .ob-al — обводка ТОЛЬКО двух наружных граней (без основания), цветом рамки плашки.
   Так уголок выходит чистым треугольником с обводкой, бесшовно сросшимся с плашкой.
   JS ставит размеры/path/позицию под направление. На мобиле тоже виден. */
.ob-tip-arrow{
  position:absolute; overflow:visible; pointer-events:none;
}
.ob-tip-arrow .ob-af{ fill:var(--ob-card); }
.ob-tip-arrow .ob-al{ fill:none; stroke:var(--ob-card-line); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }

.ob-tip-step{
  font-family:var(--font-mono, var(--font-body)); font-size:0.6875rem; font-weight:600;
  letter-spacing:0.06em; color:var(--text-3); margin-bottom:8px;
}
.ob-tip h3{
  margin:0 0 7px; font-family:var(--font-display); font-weight:600;
  font-size:1.06rem; line-height:1.25; letter-spacing:-0.01em; color:var(--text);
}
.ob-tip p{ margin:0; font-size:0.875rem; line-height:1.55; color:var(--text-2); overflow-y:auto; min-height:0; }

.ob-tip-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px;
}
.ob-progress{ display:flex; align-items:center; gap:5px; }
.ob-progress i{
  width:6px; height:6px; border-radius:50%; background:var(--line-2);
  transition:background .2s var(--ease), width .2s var(--ease);
}
.ob-progress i.is-on{ background:var(--text); }
.ob-progress i.is-cur{ width:18px; border-radius:3px; background:var(--text); }

.ob-tip-nav{ display:flex; align-items:center; gap:8px; }
.ob-skip{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:0.8125rem; color:var(--text-3);
  padding:6px 4px; transition:color .15s var(--ease);
}
.ob-skip:hover{ color:var(--text-2); }
.ob-next{
  appearance:none; cursor:pointer; border:1px solid transparent;
  background:#fff; color:#141414; font-family:var(--font-display); font-weight:600;
  font-size:0.8125rem; border-radius:var(--r-sm, 8px); padding:9px 16px;
  display:inline-flex; align-items:center; gap:7px;
  transition:filter .15s var(--ease), transform .12s var(--ease);
}
.ob-next:hover{ filter:brightness(0.94); }
.ob-next:active{ transform:translateY(1px); }
[data-theme="light"] .ob-next{ background:#141416; color:#fff; }
.ob-next svg{ width:14px; height:14px; }
.ob-tip:focus-visible, .ob-next:focus-visible, .ob-skip:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

/* ───────────────── Адаптив: мобайл — модалки как sheet ───────────── */
@media (max-width:640px){
  .ob-scrim{ align-items:flex-end; padding:0; }
  .ob-card{
    width:100%; max-height:88dvh; border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    transform:translateY(100%); opacity:1;
    transition:transform .36s cubic-bezier(0.22,1,0.36,1);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    will-change:transform;
  }
  .ob-scrim.is-in .ob-card{ transform:translateY(0); }
  .ob-card-handle{
    display:block; width:40px; height:4px; flex-shrink:0;
    margin:10px auto 2px; border-radius:2px; background:var(--line-2);
  }
  .ob-card-body{ padding:18px 20px 6px; }
  .ob-card h2{ font-size:1.4rem; }
  .ob-actions{ padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); flex-direction:column-reverse; }
  .ob-actions .ob-btn{ width:100%; }
  .ob-x{ top:12px; right:12px; }

  /* Подсказка тура — компактная, ПЛАВАЮЩАЯ, примагничена к элементу треугольником
     (позицию ставит JS; на скролле адаптируется). */
  .ob-tip{
    width:min(300px, calc(100vw - 24px));
    padding:14px 15px 13px;
  }
  .ob-tip-step{ font-size:0.64rem; margin-bottom:6px; }
  .ob-tip h3{ font-size:1rem; margin-bottom:6px; }
  .ob-tip p{ font-size:0.82rem; line-height:1.5; }
  .ob-tip-foot{ margin-top:13px; }
  .ob-next{ padding:8px 14px; }
  .ob-skip{ font-size:0.78rem; }
  /* коучмарк поиска тоже плавающий и компактный — примагничивается к полю с треугольником */
  .ob-coach{ width:min(300px, calc(100vw - 24px)); padding:14px 15px; }
  .ob-coach h3{ font-size:0.95rem; }
  .ob-coach p{ font-size:0.82rem; line-height:1.5; margin-bottom:12px; }
}

/* ───────────── Коучмарк над открытой модалкой поиска (шаг «поиск») ───────── */
.ob-coach{
  position:fixed; z-index:calc(var(--ob-z) + 3);
  width:330px; max-width:calc(100vw - 28px);
  box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--ob-card); border:1px solid var(--ob-card-line);
  border-radius:var(--ob-tip-radius); box-shadow:var(--ob-tip-shadow);
  padding:16px 18px;
  opacity:0; transform:scale(.97); transform-origin:center top; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.ob-coach.is-in{ opacity:1; transform:none; }
.ob-coach h3{ margin:0 0 6px; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text); }
.ob-coach p{ margin:0 0 14px; font-size:0.85rem; line-height:1.5; color:var(--text-2); overflow-y:auto; min-height:0; }
.ob-coach .ob-next{ width:100%; justify-content:center; }

/* ───────────────────────── Reduced motion / печать ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ob-scrim, .ob-card, .ob-spot, .ob-tip, .ob-coach{ transition-duration:.001ms !important; }
}