/* Тур: затемнение, дыра вокруг блока и окошко с объяснением.

   Дыра сделана одним элементом с огромной тенью, а не четырьмя панелями
   вокруг: панели приходится пересчитывать на каждый скролл, и на границе
   между ними просвечивала полоса в пиксель. */

/* Весь файл — в слое `legacy`. Смысл: правило вне слоя бьёт правило внутри
   любого слоя, независимо от специфичности и порядка. Пока хоть один наш файл
   оставался вне слоёв, утилиты Tailwind проигрывали ему молча — выглядело бы
   как «Tailwind не работает».

   Внутри слоя всё как раньше: файлы соперничают между собой по прежним
   правилам, порядок подключения тот же. Меняется только одно — утилита теперь
   перебивает старый CSS, потому что слой `utilities` объявлен после `legacy`
   (порядок задан в ozon_margin/tailwind.css).

   Оборачивать надо ВСЕ файлы разом, включая cyberpunk/dashboard.css: он
   вклеивается внутрь собранного «Обзора», и оставшись единственным вне слоёв,
   начал бы выигрывать у всего приложения. */
@layer legacy {
.tour { position: fixed; inset: 0; z-index: 9000; }

.tour__veil { position: absolute; inset: 0; }
/* Шаг без подсветки (вступление) затемняет страницу сам: дыры на нём нет, а
   вместе с ней нет и её тени, которой затемнение обычно и делается. Когда
   дыра есть, вуаль остаётся прозрачной — иначе она пригасила бы и её. */
.tour--flat .tour__veil { background: rgba(4, 8, 18, .72); }

.tour__hole {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(4, 8, 18, .72),
              0 0 0 1px rgba(34, 211, 238, .55) inset;
  /* Сквозь дыру страница остаётся видимой и живой: клики по ней ловит вуаль
     под ней, а не сама дыра. */
  pointer-events: none;
  /* Геометрию дыры не анимируем: она едет за прокруткой и за блоками, которые
     дорисовываются на ходу, и любая плавность здесь читается как отставание
     подсветки от того, о чём говорит окошко. Плавным остаётся только окошко. */
}

.tour__pop {
  position: absolute;
  width: min(380px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border: 1px solid var(--border2, rgba(120, 140, 175, .3));
  border-radius: var(--r-card, 14px);
  background: linear-gradient(180deg, rgba(18, 27, 45, .99), rgba(11, 17, 31, .99));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  color: var(--text, #e8edf5);
  transition: top .18s, left .18s;
}

.tour__title {
  margin: 0 22px 6px 0;
  font-size: var(--fs-h2, 15px); font-weight: 700; line-height: 1.3;
}
.tour__text {
  margin: 0; color: var(--muted, #aab6c8);
  font-size: var(--fs-sm, 12px); line-height: 1.6;
}

.tour__x {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--dim, #7c8798); font-size: 18px; line-height: 1; cursor: pointer;
}
.tour__x:hover { color: var(--text, #e8edf5); background: rgba(120, 140, 175, .12); }

.tour__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.tour__count {
  margin-right: auto;
  font-size: var(--fs-2xs, 10px); letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim, #7c8798); font-variant-numeric: tabular-nums;
}
.tour__btn {
  padding: 7px 14px;
  border: 1px solid var(--border, rgba(120, 140, 175, .22));
  border-radius: 9px;
  background: var(--surface2, rgba(120, 140, 175, .08));
  color: var(--text, #e8edf5);
  font: inherit; font-size: var(--fs-xs, 11px); font-weight: 600; cursor: pointer;
}
.tour__btn:hover { border-color: var(--border2, rgba(120, 140, 175, .34)); }
.tour__btn:disabled { opacity: .38; cursor: default; }
.tour__btn--main {
  border-color: rgba(34, 211, 238, .4);
  background: rgba(34, 211, 238, .14);
  color: #bfe6ff;
}

@media (prefers-reduced-motion: reduce) {
  .tour__pop { transition: none; }
}
}