/* ═════════════════════════════════════════════════════════════════════
   «Как SXfont выглядит в работе»: ролик-обзор, нарисованный кодом.
   Окно — то же, что в блоках тем и «Обложки» (app-window.css),
   сценарий по главам — assets/js/tour.js. Здесь рамка с лугом,
   субтитры, кнопки глав и детали, которых нет в неподвижных окнах:
   курсор, всплывающие панели, перетаскиваемая карточка, уведомление.
   ═════════════════════════════════════════════════════════════════════ */

.tour { margin-top: clamp(32px, 4vw, 52px); }
.tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: #CBD3B7;
  container-type: inline-size;
}
.tour__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* окно 1400×748 во всю ширину 88 %; снизу остаётся полоса под субтитры */
.tour__win {
  position: absolute; left: 6cqw; top: 3.2cqw;
  width: 88cqw; height: calc(88cqw * 748 / 1400);
}
.tour__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(56.25cqw - 3.2cqw - 88cqw * 748 / 1400);
  display: grid; place-items: center;
  pointer-events: none;
}
.tour__cap span {
  padding: 7px 16px; border-radius: 999px;
  background: rgba(14,14,12,.62); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-size: clamp(12px, 1.25cqw, 15px); font-weight: 500; letter-spacing: -.005em;
  white-space: nowrap;
}

/* ─── управление: пауза и кнопки глав ─── */
.tour__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.tour__play {
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; cursor: pointer;
  transition: transform .2s var(--ease);
}
.tour__play:active { transform: scale(.96); }
.tour__play[hidden] { display: none; } /* при «уменьшить движение» кнопки нет: display: grid выше перебивал hidden */
.tour__play .ic { width: 16px; height: 16px; }
.tour__play .ic--play { margin-left: 2px; }
.tour__play[aria-pressed="true"] .ic--pause, .tour__play[aria-pressed="false"] .ic--play { display: none; }
.tour__chip {
  --p: 0%;
  height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--white); color: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  font: 500 14px var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.tour__chip:hover { color: var(--ink); }
.tour__chip:active { transform: scale(.96); }
/* прогресс главы — заливкой внутри таблетки, без отдельной полоски у края */
.tour__chip.is-on {
  color: #fff; box-shadow: none;
  background: linear-gradient(90deg, #3A3A35 var(--p), var(--ink) var(--p));
}
.tour__play:focus-visible, .tour__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ─── детали внутри окна (в «проектных» пикселях окна) ─── */
.thw .tour-cur {
  position: absolute; left: 0; top: 0; z-index: 30;
  width: 22px; height: 30px; transform-origin: 2px 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
  pointer-events: none;
}
.thw .tour-ring {
  position: absolute; left: 0; top: 0; z-index: 29;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 2px solid rgba(10,132,255,.55);
  opacity: 0; pointer-events: none;
}
.thw .tour-caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #0A84FF; opacity: 0; }
.thw__field.is-focus { background: var(--t-bar); box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
.thw__field.is-focus .tour-caret { opacity: 1; animation: tourBlink 1s steps(2) infinite; }
@keyframes tourBlink { 50% { opacity: 0; } }

/* наведение на карточку: подъём на 2 px и мягкая тень, как в приложении */
.thw__card, .thw__cover { transition: translate .2s var(--ease), box-shadow .2s var(--ease); }
.thw__card.is-hover, .thw__cover.is-hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--t-card-ring), 0 10px 30px -6px rgba(0,0,0,.1); }
/* у карточек ролика сердце и молния видны под курсором и у включённых */
.tour-grid .thw__fav, .tour-grid .thw__bolt { opacity: 0; transition: opacity .2s var(--ease); color: rgba(0,0,0,.45); }
.thw--dark .tour-grid .thw__fav, .thw--dark .tour-grid .thw__bolt { color: rgba(255,255,255,.5); }
.tour-grid .thw__card.is-hover .thw__fav, .tour-grid .thw__card.is-hover .thw__bolt, .tour-grid .thw__bolt.is-on { opacity: 1; }
.tour-grid .thw__bolt .ic { position: absolute; inset: 0; width: 12px; height: 16px; margin-left: 2px; }
.tour-grid .thw__bolt .f { color: var(--bolt-on); opacity: 0; transform: scale(.25); transition: opacity .25s cubic-bezier(.2,0,0,1), transform .42s cubic-bezier(.34,1.7,.5,1); }
.tour-grid .thw__bolt.is-on .f { opacity: 1; transform: none; }
.tour-grid .thw__bolt.is-on .o { opacity: 0; }

/* ─── телефон: окно крупнее кадра — в кадре вся его высота и примерно половина ширины,
   «камера» плавно едет за курсором (tour.js). Кнопки глав — одной строкой с прокруткой. ─── */
/* --pan меняется каждый кадр; без inherits: false браузер пересчитывал стили всех 800 элементов окна */
@property --pan { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (max-width: 700px) and (orientation: portrait) {
  .tour__frame { aspect-ratio: auto; height: var(--fh, 440px); border-radius: 24px; }
  .tour__win {
    left: 0; top: 12px;
    width: calc(100cqw * 1400 / 760); height: calc(100cqw * 748 / 760);
    transform: translateX(var(--pan, 0px));
  }
  .tour__cap { height: 52px; }
  /* длинная подпись переносится, а не обрезается краями кадра */
  .tour__cap span { max-width: calc(100% - 24px); white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding: 6px 12px; border-radius: 14px; font-size: 12px; }
  .tour__bar {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tour__bar::-webkit-scrollbar { display: none; }
  .tour__play, .tour__chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__cap span, .tour__chip, .thw__card, .thw__cover { transition: none !important; }
  .thw__field.is-focus .tour-caret { animation: none; }
}

/* ─── детали сценария (в «проектных» пикселях окна 1400×748) ─── */
.tour-thw .thw__typed { color: var(--t-text); }
/* кнопка «Фильтры»: число выбранных фильтров на зелёной капсуле (FontGridView+Toolbar) */
.tour-badge {
  display: none; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
  background: #A8D63E; color: rgba(0,0,0,.75);
  font: 700 10px var(--mono); line-height: 15px;
}
.tour-badge.is-on { display: inline-block; }
/* всплывающая панель фильтров (SearchFilterPanel): висит под кнопкой, стрелкой к ней */
.tour-pop {
  --ax: 250px;
  position: absolute; left: 0; top: 0; z-index: 20; width: 360px;
  border-radius: 20px;
  background: var(--t-card);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 22px 50px -16px rgba(0,0,0,.35);
  opacity: 0; transform-origin: var(--ax) 0;
}
.tour-pop::before {
  content: ""; position: absolute; top: -6px; left: calc(var(--ax) - 7px);
  width: 14px; height: 14px; background: var(--t-card);
  box-shadow: -.5px -.5px 0 rgba(0,0,0,.12);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.tour-pop__sec { position: relative; padding: 12px 16px; }
.tour-pop__sec + .tour-pop__sec::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: .5px; background: var(--t-sep); }
.tour-pop__h { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--t-sec); }
.tour-pop__h u { text-decoration: none; font-weight: 400; opacity: 0; }
.tour-pop__h u.is-on { opacity: 1; }
.tour-pop__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--t-ctl); color: var(--t-text); font-size: 12.5px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.tour-fchip em { display: none; font-style: normal; font-size: 9px; font-weight: 700; }
.tour-fchip small { font: 10px var(--mono); opacity: .45; }
.tour-fchip.is-on { background: rgba(168,214,62,.16); color: #52780C; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(168,214,62,.6); }
.tour-fchip.is-on em { display: inline; }
.tour-fchip.is-on small { opacity: .75; }
.thw--dark .tour-fchip.is-on { background: rgba(168,214,62,.22); color: #BEE66E; }
.tour-pop__foot { position: relative; display: flex; justify-content: space-between; padding: 12px 16px; font-size: 12.5px; color: var(--t-text); }
.tour-pop__foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5px; background: var(--t-sep); }
.tour-pop__foot .t-reset { color: var(--t-sec); opacity: .4; font-weight: 500; }
.tour-pop__foot .t-reset.is-on { opacity: 1; }
/* строка «Активные» под панелью инструментов, когда включён фильтр */
.tour-active {
  position: absolute; left: 256px; top: 92px; z-index: 2;
  display: flex; align-items: center; gap: 8px; height: 32px;
  font-size: 11px; font-weight: 600; color: var(--t-sec);
  opacity: 0;
}
.tour-active__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 12px; border-radius: 999px;
  background: #0084FF; color: #fff; font-size: 12.5px; font-weight: 500;
}
.tour-active__chip .ic { width: 9px; height: 9px; opacity: .85; }
.tour-active u { font-size: 12.5px; font-weight: 400; }
/* с фильтром сетка опускается под строку «Активные» */
.tour-thw .t-lib { transition: top .45s var(--ease); }
.tour-thw.has-filter .t-lib { top: 136px; }
/* тег под перетаскиваемой карточкой: зелёная рамка; число у тега — только под курсором */
.thw__row.t-tag b { visibility: hidden; display: inline-block; }
.thw__row.t-tag.is-drop b { visibility: visible; }
.thw__row.is-drop::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; right: 4px; border: 2px solid #A8D63E; border-radius: 6px; }
/* шесть точек, которые разлетаются от молнии */
.tour-grid .thw__bolt i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 2px; background: #A3D902; opacity: 0; }
/* копия карточки, которую несут на тег */
.tour-ghost {
  position: absolute; left: 0; top: 0; z-index: 25;
  width: 140px; height: 100px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--t-card); color: var(--t-pv);
  box-shadow: 0 0 0 1px var(--t-card-ring), 0 18px 40px -12px rgba(0,0,0,.35);
  opacity: 0; transform-origin: 50% 50%; pointer-events: none;
}
.tour-ghost span { font-size: 40px; line-height: 1; margin-top: -10px; }
.tour-ghost small { position: absolute; left: 12px; bottom: 9px; font-size: 10px; color: var(--t-meta); }
/* крупный просмотр обложки */
.tour-lb {
  position: absolute; inset: 0; z-index: 15;
  background: rgba(0,0,0,.75); /* как в приложении: затемнение на всё окно, включая боковую панель */
  opacity: 0; pointer-events: none;
}
.tour-lb img { position: absolute; border-radius: 10px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
/* стрелки по краям, точки внизу, крестик в углу (CoverLightboxView) */
.tour-lb__ui { position: absolute; inset: 0; opacity: 0; }
.tour-lb__x, .tour-lb__arr { position: absolute; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; }
.tour-lb__x { right: 24px; top: 24px; width: 32px; height: 32px; }
.tour-lb__x .ic { width: 12px; height: 12px; }
.tour-lb__arr { top: 50%; width: 44px; height: 44px; margin-top: -22px; }
.tour-lb__arr .ic { width: 18px; height: 18px; }
.tour-lb__arr--l { left: 24px; } .tour-lb__arr--l .ic { transform: rotate(90deg); }
.tour-lb__arr--r { right: 24px; } .tour-lb__arr--r .ic { transform: rotate(-90deg); }
.tour-lb__dots { position: absolute; left: 0; right: 0; bottom: 44px; display: flex; justify-content: center; gap: 8px; }
.tour-lb__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.tour-lb__dots i.is-on { background: #fff; }
/* ползунок веса на карточке вариативного шрифта: встаёт на место подписи при наведении */
.thw__ctl {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px; padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--t-meta); white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease);
}
.thw__ctl b { min-width: 24px; text-align: right; font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--t-text); font-variant-numeric: tabular-nums; }
.thw__ctl { --w: 100%; }
.thw__sl { position: relative; flex: 1; height: 18px; }
.thw__sl::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--t-card-ring); }
.thw__slf { position: absolute; left: 0; top: 8px; height: 2px; width: var(--w); border-radius: 1px; background: var(--t-text); }
.thw__slk { position: absolute; top: 0; left: calc(var(--w) - 9px); width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.15); }
.thw__card .thw__meta { transition: opacity .2s var(--ease); }
.thw__card.is-ctl .thw__meta { opacity: 0; }
.thw__card.is-ctl .thw__ctl { opacity: 1; }
/* телефон боком: кадр ролика целиком помещается по высоте экрана, иначе ролик не запускался */
@media (orientation: landscape) and (max-height: 500px) {
  .tour { max-width: calc((100svh - 64px) * 16 / 9); margin-inline: auto; }
}