/* Повторяющиеся элементы: карточки, рейтинги, значки, кнопки, хлебные крошки. */

/* ---------- карточка сериала ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  color: inherit;
  text-decoration: none;
}

.card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

.card:hover .card-poster img,
.card:focus-visible .card-poster img { transform: scale(var(--image-hover-scale)); }

.card-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  border-radius: inherit;
  pointer-events: none;
}

.card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card:hover .card-title { color: var(--accent); }

.card-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

/* Уголок с рейтингом поверх постера. */
.card-rating {
  position: absolute;
  top: var(--gap-2);
  left: var(--gap-2);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 0.72);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--imdb);
}

/* ---------- карточка серии ---------- */

.ecard {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: var(--gap-4);
  padding: var(--gap-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.ecard:hover,
.ecard:focus-visible { border-color: var(--surface-3); background: var(--surface-2); }

.ecard-still {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}

.ecard-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

/* Кадра нет — карточка в один столбец, пустого места не остаётся. */
.ecard-textonly { grid-template-columns: 1fr; }

.ecard-num {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ecard-title {
  font-size: var(--text-md);
  font-weight: 600;
  margin: 2px 0 var(--gap-2);
  line-height: 1.3;
}

.ecard:hover .ecard-title { color: var(--accent); }

.ecard-text {
  font-size: var(--text-sm);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ecard-meta {
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-top: var(--gap-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

@media (max-width: 560px) {
  .ecard { grid-template-columns: 116px 1fr; gap: var(--gap-3); }
  .ecard-text { -webkit-line-clamp: 2; }
}

/* ---------- плашка свежей серии ---------- */

/*
 * Кадр во всю плашку, подписи поверх него.
 *
 * Прошлый вариант делил карточку пополам: слева кадр, справа текст на сером.
 * В ленте это читалось как ряд полупустых прямоугольников — половина ширины
 * уходила под три строки, а кадр, ради которого сюда и смотрят, оставался
 * размером с марку.
 *
 * Под текстом обязательна затемняющая подложка, а не просто тёмный кадр:
 * кадры бывают светлые, и белые буквы на дневной сцене пропадают вовсе.
 */
.rcard {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}

.rcard-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

.rcard:hover .rcard-art,
.rcard:focus-visible .rcard-art { transform: scale(var(--image-hover-scale)); }

/*
 * Подложка рисуется псевдоэлементом на самой плашке, а не фоном блока
 * с текстом: градиент должен уходить выше подписей и таять, иначе снизу
 * получается отчётливая полоса поперёк кадра.
 */
.rcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.88) 0%,
    rgb(0 0 0 / 0.72) 28%,
    rgb(0 0 0 / 0.28) 55%,
    rgb(0 0 0 / 0) 78%
  );
}

.rcard-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--gap-4);
  /*
   * Тень под буквами — вдобавок к затемнению, а не вместо него.
   *
   * Затемнение выравнивает кадр целиком, но пёстрый кадр остаётся пёстрым:
   * жёлтое название сериала терялось на граффити, белое — на светлом небе.
   * Тень работает по контуру каждой буквы, и ей всё равно, что под ней.
   *
   * Две тени: узкая держит контур, широкая гасит фон вокруг слова —
   * одной узкой на ярком пятне не хватает.
   */
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 2px 14px rgb(0 0 0 / 0.55);
}

/* Название сериала — надзаголовок: в ленте по нему и опознают карточку. */
.rcard-show {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 2px;
}

.rcard-num {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}

.rcard-title {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rcard:hover .rcard-title,
.rcard:focus-visible .rcard-title { color: rgb(255 255 255 / 0.95); }

/*
 * Кадра нет.
 *
 * Постер сериала сюда не подставляется намеренно — это то же решение,
 * что на странице сезона: у сериала без кадров получался бы экран
 * из одинаковых плашек. Поэтому пустая плашка должна выглядеть задуманной,
 * а не сломанной: свой фон, рамка и подписи по центру, а не прижатые
 * к низу, где под ними зияли бы две трети пустоты.
 */
.rcard.is-blank {
  /* Рамку 16:9 держать незачем: затемнять нечего, и пустая плашка
     во весь кадр — это полэкрана пустоты. Соседей по ряду она догонит
     сама, сетка и лента растягивают карточки по высоте ряда. */
  aspect-ratio: auto;
  min-height: 92px;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--surface-2), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  /* К низу, а не по центру: в ряду с обычными плашками подписи тогда
     стоят на одной линии, а не пляшут через одну. */
  justify-content: flex-end;
}

.rcard.is-blank::after { background: none; }

/* Под текстом нет кадра — нечего и перебивать: тень на ровном фоне
   только мылит буквы. */
.rcard.is-blank .rcard-body { position: static; text-shadow: none; }

.rcard.is-blank .rcard-num { color: var(--ink); }
.rcard.is-blank .rcard-title { color: var(--ink-2); }

.rcard.is-blank:hover,
.rcard.is-blank:focus-visible { border-color: var(--surface-3); }

/* ---------- рейтинги ---------- */

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-variant-numeric: tabular-nums;
}

.rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.rating-badge span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.rating-imdb  { color: var(--imdb); }
.rating-kp    { color: var(--accent); }
.rating-votes { font-size: var(--text-xs); color: var(--ink-3); font-weight: 400; }

/* ---------- оценка звёздами ---------- */

.stars-line {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  white-space: nowrap;
}

/* Два ряда одинаковых звёзд друг над другом: серый снизу, цветной сверху
   обрезан по ширине. Дробная звезда получается сама, без «половинок». */
.stars {
  position: relative;
  display: inline-block;
  color: var(--rule);
  letter-spacing: 2px;
  line-height: 1;
}

.stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--imdb);
  white-space: nowrap;
}

/* Оценка посетителей — другим цветом, чтобы не путалась с чужой. */
.stars-fill-user { color: var(--vote); }

/* Голосование: десять звёзд на десятибалльной шкале. */
.vote { margin: var(--gap-3) 0 0; }
.vote-scale { display: flex; flex-wrap: wrap; gap: 1px; margin: 6px 0 0; }

.vote-scale button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}

.vote-scale button:hover {
  color: var(--vote);
  transform: translateY(-1px) scale(1.08);
}
.vote-scale button:focus-visible {
  color: var(--vote);
  outline: 2px solid var(--vote);
  outline-offset: 1px;
}

/* Текущая оценка и предпросмотр при наведении закрашивают звёзды слева направо. */
.vote-scale button.is-mine,
.vote-scale button.is-preview { color: var(--vote); }

.player-notice {
  margin: 0 0 var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.player-notice a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.vote-note { font-size: var(--text-xs); color: var(--ink-3); margin: 6px 0 0; }
.vote-note.is-ok { color: var(--ok); }

.stars-value { font-weight: 600; }
.stars-label { font-size: var(--text-xs); color: var(--ink-3); letter-spacing: 0.04em; }
.stars-votes { font-size: var(--text-xs); color: var(--ink-3); }

/* ---------- значки ---------- */

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

a.chip:hover { border-color: var(--accent); color: var(--accent); }

/*
 * Текущий элемент: где мы сейчас.
 *
 * `aria-current` в переключателе сезонов стоял с самого начала, но только
 * для читалок — глазами текущий сезон был неотличим от остальных, и по ряду
 * одинаковых плашек нельзя было понять, какой открыт. Класс `is-current`
 * на страницах отбора числился в разметке и не имел стилей вовсе.
 * Правило одно на оба случая, чтобы они снова не разошлись.
 */
.chip[aria-current],
.chip.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* На акцентном фоне текст активной сортировки должен оставаться контрастным. */
.chip[aria-current]:hover,
.chip.is-current:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.chip[aria-current]:hover b,
.chip.is-current:hover b { color: var(--accent-ink); }

.chip-row { display: flex; gap: var(--gap-2); flex-wrap: wrap; }

/* Два ряда плашек подряд — это жанры и темы на карточке сериала.
   Отступ между ними больше, чем зазор внутри ряда: с одинаковым они
   слипались в один список из семи жанров. */
.chip-row + .chip-row { margin-top: var(--gap-3); }

/*
 * Подборка: та же плашка, но кликабельная и со счётчиком.
 *
 * Число говорит, стоит ли туда идти: «зомби 1» и «драма 15» — разное
 * обещание, и обманывать посетителя пустой страницей незачем.
 *
 * Крупнее обычной плашки и с заметной границей при наведении: ряд
 * одинаковых серых пилюль читался как техническая сноска, хотя это
 * основная навигация по каталогу.
 */
.chip-link {
  padding: 7px 14px;
  font-size: var(--text-sm);
  background: var(--surface);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.chip-link:hover,
.chip-link:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--accent-dim);
}

/* Счётчик приглушён, но при наведении оживает вместе с плашкой. */
.chip-link span {
  margin-left: 7px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.chip-link:hover span,
.chip-link:focus-visible span { color: var(--accent); }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { border-color: var(--surface-3); background: var(--surface-3); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }

/* ---------- хлебные крошки ---------- */

.crumbs {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--gap-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.45; }

/* ---------- переход между сериями ---------- */

.pager {
  display: flex;
  gap: var(--gap-3);
  justify-content: space-between;
  margin-top: var(--gap-5);
}

.pager a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  font-size: var(--text-sm);
  min-width: 0;
}

.pager a:hover { border-color: var(--surface-3); background: var(--surface-2); }
.pager a span { font-size: var(--text-xs); color: var(--ink-3); }
.pager a b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager .next { text-align: right; }

/* ---------- пустое состояние ---------- */

.empty {
  padding: var(--gap-7) var(--gap-4);
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

/*
 * Метка темы отличается от жанровой.
 *
 * Жанр отвечает «какой это сериал», тема — «про что он». Одинаковые метки
 * в двух строках подряд читались бы как один список из семи жанров.
 */
.chip-theme {
  border-color: var(--accent-soft);
  color: var(--accent);
}

.chip-theme:hover,
.chip-theme:focus-visible { border-color: var(--accent-dim); }

/* ---------- люди ---------- */

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--gap-4);
}

.cast-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  color: inherit;
  text-decoration: none;
  text-align: center;
}

.cast-photo {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  margin-bottom: var(--gap-1);
}

.cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

.cast-card:hover .cast-photo img,
.cast-card:focus-visible .cast-photo img { transform: scale(var(--image-hover-scale)); }

/* Силуэт вместо пустой рамки: у трети актёров фотографии нет и не будет,
   а пустой прямоугольник читался как незагрузившаяся картинка. */
.cast-blank {
  width: 100%;
  height: 100%;
  fill: var(--ink-3);
  opacity: 0.28;
}

.cast-card b { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }
.cast-card span { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.3; }
.cast-card:hover b { color: var(--accent); }

/* Крупнее — только на телевизоре. Признак тот же, что в tv.css:
   большая ширина сама по себе не означает просмотр с трёх метров. */
@media (min-width: 1800px) and (pointer: coarse) {
  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Справка о человеке — под фактами, не во всю ширину экрана:
   строка длиннее 70 знаков читается тяжело. */
.person-bio {
  margin-top: var(--gap-4);
  max-width: 70ch;
  color: var(--ink-2);
}

/* ---------- навигация по признакам ---------- */

.catalog-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-3);
  margin-bottom: var(--gap-5);
}

.catalog-controls-label {
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.catalog-filter {
  margin: 0 0 var(--gap-6);
  padding: var(--gap-4) var(--gap-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

.catalog-filter-group {
  min-width: 0;
  margin: 0 0 var(--gap-4);
  padding: 0;
  border: 0;
}

.catalog-filter-group legend {
  margin-bottom: var(--gap-2);
  padding: 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 600;
}

.catalog-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}

.catalog-filter-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.catalog-filter-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.catalog-filter-chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.catalog-filter-chip b {
  color: var(--ink-3);
  font-size: 0.92em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.catalog-filter-chip:hover span {
  border-color: var(--accent-dim);
  color: var(--ink);
}

.catalog-filter-chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.catalog-filter-chip input:checked + span b { color: inherit; }
.catalog-filter-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.catalog-filter-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-5) var(--gap-7);
}

.catalog-range-group { flex: 1 1 320px; max-width: 440px; }

.catalog-dual-range { --range-start: 0%; --range-end: 100%; }

.catalog-range-values {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-4);
  margin: 0 2px var(--gap-2);
}

.catalog-range-values label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.catalog-range-values output {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.catalog-range-control {
  position: relative;
  height: 34px;
  touch-action: pan-y;
}

.catalog-range-track {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 10px;
  left: 10px;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-3);
  transform: translateY(-50%);
}

.catalog-range-ticks {
  position: absolute;
  z-index: 1;
  inset: 0 10px;
  pointer-events: none;
}

.catalog-range-ticks i {
  position: absolute;
  top: 50%;
  left: var(--tick-position);
  width: 1px;
  height: 8px;
  border-radius: 1px;
  background: var(--ink-2);
  opacity: 0.32;
  transform: translate(-50%, -50%);
}

.catalog-dual-range.is-filtered .catalog-range-track {
  background: linear-gradient(
    to right,
    var(--surface-3) 0%,
    var(--surface-3) var(--range-start),
    var(--accent) var(--range-start),
    var(--accent) var(--range-end),
    var(--surface-3) var(--range-end),
    var(--surface-3) 100%
  );
}

.catalog-range-input {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 34px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.catalog-range-input:focus-visible { outline: none; }

.catalog-range-input::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.catalog-range-input::-moz-range-track {
  height: 5px;
  background: transparent;
}

.catalog-range-input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  appearance: none;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.45);
  cursor: grab;
  pointer-events: auto;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.catalog-range-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.45);
  cursor: grab;
  pointer-events: auto;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.catalog-range-input:active::-webkit-slider-thumb,
.catalog-range-input:active::-moz-range-thumb { cursor: grabbing; }

.catalog-range-input:hover::-webkit-slider-thumb,
.catalog-range-input:hover::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 6px rgb(0 0 0 / 0.5);
  transform: scale(1.1);
}

.catalog-range-input:focus-visible::-webkit-slider-thumb,
.catalog-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent), 0 1px 5px rgb(0 0 0 / 0.45);
}

.catalog-range-input:disabled { opacity: 0.45; }

.catalog-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
}

.catalog-filter-hint {
  color: var(--ink-3);
  font-size: var(--text-xs);
}

@media (max-width: 600px) {
  .catalog-filter { padding: var(--gap-3); }
  .catalog-filter-ranges { gap: var(--gap-3); }
  .catalog-range-group { flex-basis: 100%; max-width: none; }
  .catalog-filter-actions .btn { flex: 1 1 auto; }
}

.facet-nav { margin-bottom: var(--gap-5); }

.facet-nav h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: var(--gap-2);
}

/* Число рядом с названием — сколько там сериалов. */
.chip b { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
a.chip:hover b { color: var(--accent); }

/* ---------- звуковые дорожки и субтитры ---------- */

.tracks {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  margin: var(--gap-5) 0;
}

.tracks-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: baseline;
}

/* Подпись фиксированной ширины: строки «Озвучки», «Оригинал», «Субтитры»
   выстраиваются в колонку, и глазу не приходится искать начало списка. */
.tracks-label {
  flex: 0 0 auto;
  min-width: 84px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.report { margin: 6px 0 0; font-size: var(--text-xs); }
.report form { margin: 0; }
.report-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); cursor: pointer; }
.report-btn:hover, .report-btn:focus-visible { color: var(--ink); }
.report-note { color: var(--ok); }