/* Обучающий тур по странице блока: пелена с вырезом, кольцо вокруг цели, карточка шага.
 *
 * Обычный CSS, а не Tailwind, и это осознанно: input.css правится параллельно, пересборка
 * app.css в этой ветке запрещена. Все цвета берутся из тех же токенов темы, что и остальной
 * продукт (--color-ink, --color-surface, --color-line, --color-accent), поэтому тур не заводит
 * собственной палитры и переживёт любую правку темы.
 *
 * Слои: пелена 900, кольцо 901, карточка 902. Всё, что есть в продукте (подсказки замечаний,
 * меню, липкие шапки), живёт ниже 60, поэтому тур гарантированно сверху.
 *
 * ВСЁ ДВИЖЕНИЕ КОМПОЗИТНОЕ: transform, opacity и clip-path. Ни одно правило не трогает
 * геометрию документа, поэтому таблица на две тысячи строк не переразмечается ни разу.
 */

/* ── пелена с вырезом ──────────────────────────────────────────────────────────────────
   Вырез делает clip-path: внешний прямоугольник обходится по часовой стрелке, внутренний
   против, и при нонзеро-заливке дырка выпадает из фигуры. Способ выбран из-за размытия:
   box-shadow с огромным spread тоже даёт вырез, но backdrop-filter к тени не применяется, а
   владелец просил, чтобы ненужное именно размывалось, а не только темнело.

   Координаты выреза приходят переменными от tour.js в пикселях. */
.tour-veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(35, 33, 29, 0.44);
  backdrop-filter: blur(2.5px) saturate(0.85);
  -webkit-backdrop-filter: blur(2.5px) saturate(0.85);
  opacity: 0;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--tour-x) var(--tour-y),
    var(--tour-x) var(--tour-y2),
    var(--tour-x2) var(--tour-y2),
    var(--tour-x2) var(--tour-y),
    var(--tour-x) var(--tour-y)
  );
  /* Закрытый тур обязан быть НЕДОСЯГАЕМ, а не просто прозрачен: пелена с opacity 0 всё ещё
     ловит каждый клик по странице, а кнопки карточки остаются в обходе табом. Отсюда
     visibility, снимаемая с задержкой ровно на время затухания. */
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 380ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease,
    visibility 0s linear 220ms;
}

/* Без цели (страница, где ни один шаг не нашёл своего элемента) вырезать нечего: пелена
   сплошная, карточка стоит по центру. */
.tour-veil[data-nohole] { clip-path: none; }

/* ── кольцо вокруг цели ────────────────────────────────────────────────────────────────
   Кольцо ещё и ЩИТ: оно перекрывает цель и гасит клик, иначе первый же шаг по ссылке
   «Находки» увёл бы со страницы посреди тура. Клик по кольцу ведёт на следующий шаг: рука
   уже там, куда смотрит глаз.

   Скругление у кольца маленькое (5px) намеренно: вырез в пелене прямоугольный, и при большом
   радиусе по углам оставались бы неприкрытые уголки. */
.tour-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 901;
  border-radius: 5px;
  box-shadow:
    0 0 0 2px var(--color-accent),
    0 0 0 6px rgba(26, 115, 209, 0.16);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Переезд считает transform, размер меняется шириной и высотой. Элемент фиксированный и
     пустой, поэтому пересчёт геометрии не выходит за его пределы: документ не переразмечается. */
  transition:
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

/* Пульс живёт на псевдоэлементе и меняет ТОЛЬКО прозрачность: дыхание видно боковым зрением,
   а перерисовки нет. Он же отвечает на вопрос «куда смотреть», когда цель мелкая. */
.tour-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 11px;
  box-shadow: 0 0 0 2px var(--color-accent);
  opacity: 0.3;
  animation: tour-breathe 2.4s ease-in-out infinite;
}

@keyframes tour-breathe {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.7; }
}

/* ── карточка шага ─────────────────────────────────────────────────────────────────────
   Ширина фиксированная: текст шага в две-три строки, и резиновая карточка на широком экране
   растянулась бы в одну длинную строку, которую глаз не держит. */
.tour-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 902;
  width: 20.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.875rem 1rem 0.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.75rem;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 12px 32px -8px rgba(35, 33, 29, 0.28), 0 2px 6px rgba(35, 33, 29, 0.08);
  /* Положение задаётся ТОЛЬКО transform (координаты приходят переменными от tour.js), а не
     left/top: так переезд между шагами считает композитор, а не раскладчик. */
  transform: translate3d(var(--tour-cx, 0px), var(--tour-cy, 0px), 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

/* Носик карточки: повёрнутый квадрат с двумя сторонами рамки, поэтому стык с карточкой
   бесшовный. Сторону выбирает tour.js (data-side), смещение вдоль стороны приходит
   переменной: носик всегда напротив центра цели, а не посреди карточки. */
.tour-card__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  transform: rotate(45deg);
}
.tour-card[data-side="bottom"] .tour-card__arrow {
  top: -6px;
  left: var(--tour-arrow);
  border-right: 0;
  border-bottom: 0;
}
.tour-card[data-side="top"] .tour-card__arrow {
  bottom: -6px;
  left: var(--tour-arrow);
  border-left: 0;
  border-top: 0;
}
.tour-card[data-side="right"] .tour-card__arrow {
  left: -6px;
  top: var(--tour-arrow);
  border-right: 0;
  border-top: 0;
}
.tour-card[data-side="left"] .tour-card__arrow {
  right: -6px;
  top: var(--tour-arrow);
  border-left: 0;
  border-bottom: 0;
}
.tour-card[data-side="center"] .tour-card__arrow { display: none; }

.tour-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.tour-card__n {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  font-variant-numeric: tabular-nums;
}
.tour-card__x {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0 0.125rem;
  font-size: 14px;
  line-height: 1;
  color: var(--color-ink-tertiary);
  cursor: pointer;
}
.tour-card__x:hover { color: var(--color-ink); }

.tour-card__t {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.tour-card__p {
  margin: 0.375rem 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-ink-subtle);
}

.tour-card__foot {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-line);
}
.tour-card__skip {
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--color-ink-tertiary);
  cursor: pointer;
}
.tour-card__skip:hover { color: var(--color-ink); }
.tour-card__nav { margin-left: auto; display: flex; gap: 0.375rem; }

/* Точки прогресса: сколько пройдено и сколько осталось, без чтения цифр. */
.tour-dots { display: flex; gap: 3px; }
.tour-dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-line-strong);
  transition: transform 220ms ease, background-color 220ms ease;
}
.tour-dots i[data-done] { background: var(--color-ink-tertiary); }
.tour-dots i[data-now] {
  background: var(--color-accent);
  transform: scale(1.5);
}

/* ── появление и снятие ───────────────────────────────────────────────────────────────
   Открытый тур помечает <html>: так и пелена, и кольцо, и карточка гаснут одним переходом,
   а не тремя рассинхронизированными. */
html[data-tour="on"] .tour-veil,
html[data-tour="on"] .tour-ring,
html[data-tour="on"] .tour-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Смена шага: карточка не переезжает молча, а коротко проседает и всплывает заново. Без
   этого при близких целях казалось, что карточка не сменилась, а просто дёрнулась. */
html[data-tour="on"] .tour-card[data-enter] {
  opacity: 0;
  transform: translate3d(var(--tour-cx), calc(var(--tour-cy) + 6px), 0);
  transition: none;
}

/* Пока идёт прокрутка или меняется размер окна, геометрия обязана прилипать к цели БЕЗ
   перехода: переход в этот момент отставал бы от страницы, и вырез ехал бы за элементом
   с задержкой в треть секунды. */
html[data-tour-snap] .tour-veil,
html[data-tour-snap] .tour-ring,
html[data-tour-snap] .tour-card { transition: none; }

/* ── кнопка запуска в подвале рельса ───────────────────────────────────────────────────
   Тихая, пунктирная: это не действие над данными, а справка, и спорить с навигацией она
   не должна. */
.a-tour-start {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.3125rem 0.5rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: 0.5rem;
  background: none;
  font-size: 11px;
  color: var(--color-ink-tertiary);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.a-tour-start:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-hover);
}
.a-tour-start svg { flex: none; }

/* ── уважение к настройке «меньше движения» ────────────────────────────────────────────
   В app.css уже стоит общее правило, гасящее длительности, но пульс кольца это анимация с
   бесконечным повтором: длительность в 0.01ms превратила бы её в мельтешение. Гасим явно. */
@media (prefers-reduced-motion: reduce) {
  .tour-veil,
  .tour-ring,
  .tour-card,
  .tour-dots i { transition: none; }
  .tour-ring::after { animation: none; opacity: 0.5; }
}

/* Печать тура не касается: аудитор печатает документ, а не свою подсказку. */
@media print {
  .tour-veil,
  .tour-ring,
  .tour-card,
  .a-tour-start { display: none !important; }
}