/* Обучающий гид: затемнение, вырез вокруг настоящего элемента, карточка с текстом.
   Токены берём из calm-executive.css — гид должен выглядеть частью продукта,
   а не сторонним виджетом. */

.sc-tour-lock { overflow: hidden; }

.sc-tour { position: fixed; inset: 0; z-index: 9000; }

/* Затемняет ТОЛЬКО тень вокруг выреза (.sc-tour__hole). Сам слой прозрачный и
   нужен лишь чтобы ловить клик мимо карточки: если дать ему фон, страница
   темнеет дважды и подсвеченный блок гаснет вместе со всем остальным —
   ровно то, ради чего гид и делался, перестаёт работать.
   Без backdrop-filter: размытие всей страницы держит GPU на каждом кадре. */
.sc-tour__scrim { position: absolute; inset: 0; background: transparent; z-index: 0; }

/* Шаг без якоря (приветствие, финал) — затемнять всё равно надо, подсвечивать нечего. */
.sc-tour--plain .sc-tour__scrim { background: rgba(8, 15, 30, .55); }

/* Вырез: сам элемент не перекрашиваем — только обводим и «прожигаем» тень,
   поэтому подсветка не зависит от вёрстки подсвечиваемого блока. */
.sc-tour__hole {
  position: absolute; border-radius: 14px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 9999px rgba(8, 15, 30, .55);
  outline: 2px solid var(--primary-2, #22C55E);
  outline-offset: 2px;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

/* Карточка ВЫШЕ выреза: иначе её накрывает та самая тень, и текст тускнеет. */
.sc-tour__box {
  position: absolute; z-index: 2; width: min(340px, calc(100vw - 24px));
  background: var(--card, #fff); color: var(--text-primary, var(--text, #0F172A));
  border: 1px solid var(--border, #E2E8F0); border-radius: 16px;
  padding: 14px 16px 12px; box-shadow: 0 18px 40px rgba(8, 15, 30, .28);
}
.sc-tour__box--center {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); text-align: center;
}

.sc-tour__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-tour__count { font-size: 12px; font-weight: 700; color: var(--text-secondary, var(--muted, #64748B)); letter-spacing: .3px; }
.sc-tour__x {
  border: 0; background: transparent; color: var(--text-secondary, var(--muted, #64748B));
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}

.sc-tour__title { font-size: 17px; font-weight: 800; line-height: 1.25; }
.sc-tour__text { font-size: 14px; line-height: 1.5; color: var(--text-secondary, var(--muted, #475569)); margin-top: 6px; }

.sc-tour__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.sc-tour__skip {
  border: 0; background: transparent; color: var(--text-secondary, var(--muted, #64748B));
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 2px; margin-right: auto;
}
.sc-tour__back, .sc-tour__next {
  border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sc-tour__back { border: 1px solid var(--border, #E2E8F0); background: transparent; color: inherit; }
.sc-tour__next { border: 0; background: var(--primary, #16A34A); color: #fff; }
.sc-tour__next:hover { background: var(--primary-2, #22C55E); }

/* Кнопка «?» в шапке — постоянный вход в гид. */
.sc-tour-btn {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border, #E2E8F0); background: transparent; color: var(--text-secondary, var(--muted, #64748B));
  font-size: 15px; font-weight: 800; line-height: 1;
}
.sc-tour-btn:hover { color: var(--text-primary, var(--text, #0F172A)); border-color: var(--primary-2, #22C55E); }

/* На телефоне карточку НЕ прижимаем к низу принудительно: в приложении внизу
   стоит панель вкладок, и гид накрывал бы ровно ту кнопку, о которой
   рассказывает. Место выбирает JS по реальным размерам — на узком экране это
   означает «снизу, если влезает, иначе сверху». */