/* ⚑ РАБОЧИЙ ФАЙЛ (веб). Обучающий тур — визуал.
   Движок и сценарий — static/tour-web.js, точки запуска — static/web.html.

   Палитра захардкожена (не через var(--d-*)) намеренно: слой рисуется поверх
   любого экрана, в том числе тех, где токены темы переопределены локально
   (панели ввода несут свои). Значения — те же, что в остальном тёмном вебе.

   Слои: 400 — «дырявый» блокер (логика), 399 — затемнение с дыркой (только
   картинка), 402 — поинтер, 401 — карточка подсказки. Всё это ВЫШЕ панелей
   ввода (120) и ленты подсказок (130), но НИЖЕ сплеша (9000): заставка
   запуска перекрывает тур, а не наоборот. */

/* Блокер: прямоугольники, которыми выложен экран ВОКРУГ дырки. В самой дырке
   элемента нет вовсе — клик уходит в настоящий контрол нативно, без подъёма
   цели через z-index (у панелей и нижнего ряда свои стек-контексты, оттуда
   элемент над общим слоем не поднять). */
.tour-block {
  position: fixed;
  z-index: 400;
  background: transparent;
  touch-action: none;
}

/* Затемнение — ЧИСТАЯ ДЕКОРАЦИЯ (pointer-events: none): если бы оно вдруг
   легло не туда, тур всё равно остался бы проходимым. Дырку рисует
   box-shadow с огромным разлётом: он же красит всё вокруг.

   opacity здесь — канал ПРОЯВЛЕНИЯ затемнения под приветствием и финалом
   (JS ставит 0 → 1 на входе в модалку и 1 → 0 на выходе, см. fadeIn/fadeOut).
   На обычных шагах инлайн снимается и остаётся 1. */
.tour-hole {
  position: fixed;
  z-index: 399;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(74, 215, 245, 0.85),
              0 0 0 100vmax rgba(6, 14, 20, 0.5);
  transition: top 0.12s linear, left 0.12s linear,
              width 0.12s linear, height 0.12s linear,
              opacity 0.22s ease;
}
/* Якорь ещё не показался (идёт навигация) — затемнение без дырки: экран в
   этот момент заблокирован целиком, и выглядеть это должно так же. Размер
   обнуляет JS инлайном (инлайн прошлого кадра перебил бы класс), здесь
   снимаем только акцентное кольцо: обводить нечего. */
.tour-hole.tour-blank {
  box-shadow: 0 0 0 100vmax rgba(6, 14, 20, 0.5);
}
/* Пауза перед приветствием: экран УЖЕ заблокирован, но выглядит обычным —
   человек успевает увидеть, куда попал, до первого попапа. */
.tour-hole.tour-clear { box-shadow: none; }

.tour-hole.tour-nudge { animation: tour-nudge 0.42s ease-out; }
@keyframes tour-nudge {
  0%   { box-shadow: 0 0 0 2px rgba(74, 215, 245, 0.85), 0 0 0 100vmax rgba(6, 14, 20, 0.5); }
  40%  { box-shadow: 0 0 0 7px rgba(74, 215, 245, 0.45), 0 0 0 100vmax rgba(6, 14, 20, 0.5); }
  100% { box-shadow: 0 0 0 2px rgba(74, 215, 245, 0.85), 0 0 0 100vmax rgba(6, 14, 20, 0.5); }
}

/* Поинтер «нажми сюда»: рука с вытянутым указательным пальцем СНАРУЖИ цели +
   расходящееся от кончика кольцо, цикл 1.5с.

   Разворот (поворот вокруг КОНЧИКА пальца) ставит JS инлайном на обёртке —
   поэтому анимация «тапа» живёт на вложенном <svg> и берёт масштаб, а не
   сдвиг: иначе два transform'а на одном элементе перебили бы друг друга.
   Кончик пальца в координатах элемента — (13.2, 6), см. PTR_TIP_* в
   tour-web.js; в этой же точке transform-origin и центр кольца. */
.tour-pointer {
  position: fixed;
  z-index: 402;
  width: 36px;
  height: 36px;
  pointer-events: none;
  transform-origin: 13.2px 6px;
}
.tour-pointer svg {
  display: block;
  width: 36px;
  height: 36px;
  transform-origin: 13.2px 6px;
  animation: tour-tap 1.5s ease-in-out infinite;
}
.tour-pointer::before {
  content: "";
  position: absolute;
  left: 1.2px;                  /* 13.2 − 12: кольцо 24×24 по центру кончика */
  top: -6px;                    /* 6 − 12 */
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid #4ad7f5;
  border-radius: 50%;
  opacity: 0;
  animation: tour-ripple 1.5s ease-out infinite;
}
@keyframes tour-tap {
  0%, 62%, 100% { transform: scale(1); }
  30%           { transform: scale(0.86); }
}
@keyframes tour-ripple {
  0%   { transform: scale(0.35); opacity: 0.9; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* Карточка подсказки. Ставится над или под дыркой — что просторнее (см.
   placeCard); ширина ограничена, чтобы на планшете не растягивалась в строку. */
.tour-card {
  position: fixed;
  z-index: 401;
  box-sizing: border-box;
  width: calc(100vw - 24px);
  max-width: 330px;
  padding: 13px 15px 11px;
  border: 1px solid #2f5b6e;
  border-radius: 16px;
  background: linear-gradient(135deg, #17313f, #0f212c);
  box-shadow: 0 18px 40px rgba(4, 10, 14, 0.7);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #eef7fa;
}
/* Приветствие и финал — не подсказка «вот сюда», а разговор: карточка стоит
   по центру экрана, дышит свободнее и ПРОЯВЛЯЕТСЯ (всплывает), а не выскакивает.
   Класс .is-in вешает JS следующим кадром после рендера — иначе браузер склеил
   бы оба состояния в одно и перехода не было бы. Он же снимает его перед
   закрытием и ждёт MODAL_FADE_MS (держать в паре с длительностью ниже). */
.tour-card.tour-modal {
  padding: 20px 20px 16px;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tour-card.tour-modal.is-in { opacity: 1; transform: none; }
.tour-card.tour-modal .tour-title { font-size: 18px; }
.tour-card.tour-modal .tour-foot { margin-top: 18px; }

/* Компактный вид. Включается только там, где карточке иначе некуда встать:
   шаг набора текста на коротком экране с открытой клавиатурой — поле ввода
   сверху, лента подсказок снизу, между ними меньше её полного роста (см.
   placeCard). Лучше поджать подсказку, чем лечь на строку, в которую печатают. */
.tour-card.tour-tight { padding: 9px 12px 9px; }
/* Счётчик шага — единственное, что здесь можно отдать без потери смысла:
   декорация, а 15px в этом режиме решают, ляжет карточка на поле или нет. */
.tour-card.tour-tight .tour-num { display: none; }
.tour-card.tour-tight .tour-title { font-size: 13px; }
.tour-card.tour-tight .tour-text { margin-top: 4px; font-size: 12px; line-height: 1.38; }
.tour-card.tour-tight .tour-foot { margin-top: 8px; min-height: 26px; }
.tour-card.tour-tight .tour-btn.primary { padding: 6px 13px; font-size: 12px; }

.tour-card .tour-num {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55788a;
}
.tour-card .tour-num[hidden] { display: none; }
.tour-card .tour-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.tour-card .tour-text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #9db8c4;
}
/* [hidden] на подвале: авторский display:flex перебивает UA-правило
   [hidden]{display:none}, поэтому гасим явно — иначе пустой ряд на шагах без
   кнопок занимал бы место. */
.tour-card .tour-foot[hidden] { display: none; }
.tour-card .tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  min-height: 30px;
}
/* Одна кнопка в ряду (финал, модалка без «пропустить») — прижимаем вправо,
   как основное действие. */
.tour-card .tour-foot > :only-child { margin-left: auto; }

.tour-card .tour-btn {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.tour-card .tour-btn.ghost {
  padding: 4px 0;
  font-size: 12px;
  color: #55788a;
}
.tour-card .tour-btn.ghost:hover { color: #9db8c4; }
/* Основное действие: «дальше» на шаге с набором текста, кнопки приветствия
   и финала. */
.tour-card .tour-btn.primary {
  padding: 8px 16px;
  border-radius: 10px;
  background: #4ad7f5;
  font-size: 13px;
  font-weight: 700;
  color: #0a1219;
}
.tour-card .tour-btn.primary:disabled {
  background: #142934;
  color: #55788a;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .tour-hole { transition: none; }
  .tour-card.tour-modal { transition: none; transform: none; }
  .tour-hole.tour-nudge { animation: none; }
  .tour-pointer svg, .tour-pointer::before { animation: none; }
  .tour-pointer::before { opacity: 0.6; }
}