/* Выбор оформления: лента карт, которую листают вбок.

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

   Карта показана крупно и целиком, соседняя выглядывает с краю —
   это и есть приглашение листать, никаких стрелок не нужно. */

/* Лента живёт строго внутри шторки. Пока она вылезала за края
   отрицательными полями, её ширина раздвигала панель, а вместе с ней
   и всю колонку: экран уезжал вбок целиком. Ничего наружу. */
.stylelane {
  position: relative;
  overflow: hidden;
}

/* Стрелки — только там, где есть мышь: пальцу они не нужны, он листает
   саму ленту, а на телефоне две кнопки поверх обложек только мешали бы
   смотреть. Тот же приём, что у подсказок под значками. */
.stylelane__go { display: none; }

.styleset {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-1) 0 var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Полоса прокрутки здесь лишняя: лента и так выдаёт себя
     выглядывающей картой, а полоса режет обложку по низу. */
  scrollbar-width: none;
}

.styleset::-webkit-scrollbar { display: none; }

.styletile {
  flex: 0 0 62cqw;
  scroll-snap-align: center;
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

/* Обложка той же пропорции, что и сама карта — банковской: в шторке
   человек выбирает предмет, который потом увидит целиком. */
.styletile__face {
  display: grid;
  place-items: center;
  aspect-ratio: 1.586;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--card-back);
  background-size: cover;
  background-position: center;
  color: var(--card-ink);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

.styletile__face .icon { width: var(--fs-lg); height: var(--fs-lg); }

.styletile:active .styletile__face { transform: scale(.97); }

/* Выбранное — золотым контуром и галочкой: цветом одной рамки
   на восьми разноцветных обложках не обойтись. */
.styletile.is-on .styletile__face {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

.styletile.is-on .styletile__name {
  color: var(--accent-text);
  font-weight: 650;
}

.styletile__name {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

@media (hover: hover) {
  .styletile:hover .styletile__face { border-color: var(--accent-dim); }

  /* Ленту можно взять и повести: курсор говорит об этом раньше,
     чем человек попробует. На время протяжки прилипание снимаем —
     иначе лента дёргается от кадра к кадру и не идёт за рукой. */
  .styleset { cursor: grab; }

  .styleset.is-held {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .stylelane__go {
    position: absolute;
    top: 38%;
    display: grid;
    place-items: center;
    width: var(--sp-10);
    height: var(--sp-10);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    box-shadow: 0 var(--sp-1) var(--sp-3) var(--sheet-shadow);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
  }

  .stylelane__go:hover { background: var(--surface-2); color: var(--text); }

  .stylelane__go .icon { width: var(--fs-md); height: var(--fs-md); }

  /* Стрелки стоят внутри ленты, у самого края: вынесенные наружу,
     они расширяли шторку и уводили колонку вбок. */
  .stylelane__go--back { left: var(--sp-2); }
  .stylelane__go--next { right: var(--sp-2); }

  /* Обведённая лента говорит, что клавиши сейчас листают именно её. */
  .styleset:focus-visible {
    outline: 2px solid var(--accent-dim);
    outline-offset: var(--sp-1);
    border-radius: var(--r-md);
  }
}