/* Сетка обложек (решение №117): каждая плитка видна целиком, своей
   прокрутки нет вовсе — везёт родная прокрутка шторки. Отдельным
   файлом от style-pick.css (там лента, которой всё ещё пользуется
   ui/card-kind-pick.js) — вместе они перерастали двести строк.

   Свой левый и правый отступ — так же ровно, как у самой шторки:
   не полагаемся на то, что у неё не окажется соседней детали (полосы
   прокрутки), которая на глаз сместит сетку к одному краю. */
.coverpick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
}

.coverpick__tile {
  display: grid;
  /* Подпись ближе к картинке, чем у обычной плитки: имя здесь —
     подпись к самой обложке, а не отдельная строка под ней. */
  gap: var(--sp-1);
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.coverpick__face {
  position: relative;
  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;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.coverpick__tile:active .coverpick__face { transform: scale(.97); }

.coverpick__tile.is-on .coverpick__face {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

/* Круг с галочкой: воздух со всех сторон ровный, к рамке визуально
   не привязан. Размер и отступы — из шкалы --fs-*, не только --sp-*:
   30 и 10 — обе стоят на ней (--fs-2xl, --fs-2xs). */
.coverpick__check {
  display: none;
  position: absolute;
  top: var(--fs-2xs);
  right: var(--fs-2xs);
  width: var(--fs-2xl);
  height: var(--fs-2xl);
  place-items: center;
  border-radius: 50%;
  background: var(--accent-text);
  color: var(--bg-app);
}

.coverpick__tile.is-on .coverpick__check { display: grid; }

.coverpick__check .icon { width: var(--fs-sm); height: var(--fs-sm); }

/* Только рамка и галочка — без цветного текста: подпись остаётся
   ровно такой же, выбранная плитка или нет, узнаётся по обложке. */
.coverpick__name { font-size: var(--fs-xs); color: var(--text-dim); }

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