/* Лента: горизонтальная прокрутка, стрелки, захват мышью.

   Выделено из блока стилей внутри home.html: там сто восемьдесят
   строк лежали вперемешку, и ни переиспользовать, ни прочитать
   это было нельзя. Файлы подключаются в том же порядке, в каком
   правила шли в блоке, чтобы каскад не изменился. */

/* Каталог и ритуалы прокручиваются вбок, а не выкладываются сеткой.

   Сетка на полсотни программ разворачивается в стену карточек: человек
   видит её всю сразу и не понимает, с чего начать. Лента показывает
   несколько и обещает продолжение - это читается как приглашение
   листать, а не как список.

   ПРИЛИПАНИЯ ЗДЕСЬ НЕТ. Оно стояло (scroll-snap-type:x proximity), чтобы
   лента не замирала на половине карточки, и оно же ломало главное:
   отпустив мышь, человек видел, как лента уезжает не туда, куда он её
   дотянул, а к ближайшему краю карточки. Прокрутка переставала быть
   его прокруткой и превращалась в перещёлкивание по точкам.

   Ровность краёв теперь обеспечивают стрелки: они целятся в конкретную
   карточку, а не сдвигают ленту на отмеренный шаг. Это надёжнее
   прилипания - работает и при разной ширине карточек.

   overscroll-behavior-inline:contain остаётся: он не даёт жесту
   долистать ленту до края и увести назад по истории браузера - на
   телефоне это происходит постоянно и выглядит как случайный выход
   со страницы. */
/* Ширина карточки в ленте подобрана под её содержимое: заголовок, две
   строки описания и ссылка. Узкая колонка при высоте 480 давала стоячий
   прямоугольник 2:3 - карточка выглядела вытянутой и тесной. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,400px);
  gap:var(--gap-3);overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;padding-bottom:var(--gap-2);cursor:grab}
/* Современные scrollbar-width и scrollbar-color здесь НЕ задаются
   намеренно. Chrome, увидев их, берёт системную отрисовку полосы
   и полностью игнорирует правила ::-webkit-scrollbar - лента получала
   тонкую системную полосу вместо той, что в модуле подбора. У панели
   модуля современных свойств нет, поэтому её вид и работает. */
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 42%,transparent)}
/* Пока тянут, выделение текста выключается: иначе вместо прокрутки
   выделяются заголовки карточек и лента «залипает». */
/* Выделение и перетаскивание отключены ВСЕГДА, а не только во время
   захвата. Пока запрет включался по началу перетаскивания, первые
   пять пикселей движения успевали выделить заголовок карточки или
   подхватить картинку встроенным перетаскиванием браузера - и жест
   срывался, не начавшись.

   Картинке мало user-select: у неё своё, отдельное перетаскивание,
   которое выключается user-drag и обработчиком dragstart в скрипте. */
.rail{user-select:none;-webkit-user-select:none}
.rail img,.rail video{-webkit-user-drag:none;user-select:none;pointer-events:none}
/* Плавная прокрутка выключается и на время захвата, и на время
   докатывания: scroll-behavior:smooth действует на ЛЮБУЮ прокрутку
   из кода, включая присваивание scrollLeft. Оставь его - и каждый кадр
   докатывания запускал бы отдельную плавную анимацию, которая борется
   со следующим кадром. Лента дёргалась бы на месте. */
.rail.is-dragging,.rail.is-gliding{scroll-behavior:auto}
.rail.is-dragging{cursor:grabbing}
.rail.is-dragging *{pointer-events:none}
.rail-hint{display:flex;align-items:center;gap:8px;color:var(--text-soft);
  font-size:var(--step--1)}