/**
 * Каталог Remanga на подвкладке «Тайтлы»: панель фильтров и плитка выдачи
 * с отметкой сразу многих.
 *
 * Панель свёрнута по умолчанию (<details>): добавляют тайтлы редко, а место
 * над списком фарма занимала бы она всегда.
 *
 * Карточка выдачи крупнее карточки фарма и с большей обложкой — здесь по ней
 * выбирают, а не опознают уже знакомое.
 */

.cat {
  margin-bottom: var(--s4);
  padding: var(--s2) var(--s3) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  box-shadow: var(--hairline);
}

.cat-sum {
  padding: var(--s1) 0;
  color: var(--accent-hi);
  font-size: 11.5px;
  font-weight: 640;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.cat-sum::-webkit-details-marker { display: none; }
.cat-sum::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--text-mute);
  transition: transform var(--dur);
}
.cat[open] .cat-sum::before { transform: rotate(90deg); }
.cat-sum:hover { color: #fff; }

/* ── Панель фильтров ──────────────────────────────────────────────────── */

.cat-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s2) 0;
}
#catQuery { flex: 1; min-width: 190px; max-width: 340px; }
/* Общий .select-sm рассчитан на «все» и «ошибки» — здесь подписи длиннее
   («по популярности»), и на 108px их обрезало на полуслове. */
#catOrder { width: 158px; }

/* «глав от — до» держится одним блоком: это один фильтр, а не два поля,
   и рвать его переносом посередине нельзя. */
.cat-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--s2) 0 var(--s3);
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .35);
  font-size: 10.5px;
  color: var(--text-mute);
  white-space: nowrap;
}
.cat-range input {
  width: 58px;
  height: 20px;
  padding: 0 5px;
  border-color: transparent;
  background: rgba(6, 5, 11, .75);
  text-align: right;
  font-size: 11.5px;
}
.cat-range i { font-style: normal; color: var(--text-mute); }

/* ── Панель выбора ────────────────────────────────────────────────────── */

.cat-sel {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--accent-dim), transparent 70%), var(--bg-2);
}
.cat-sel-text {
  margin-right: auto;
  font-size: 11.5px;
  font-weight: 640;
  color: var(--accent-hi);
}

/* ── Плитка выдачи ────────────────────────────────────────────────────── */

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

.cat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}
.cat-card:hover { border-color: var(--line-2); }
.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Отмеченное видно с расстояния: фиолетовая кромка и галка в углу. Полсотни
   карточек глазами не пересчитать, поэтому счётчик есть и в панели сверху. */
.cat-card.on {
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-dim), transparent 65%), var(--bg-2);
}
.cat-card.on .cat-mark { border-color: var(--accent); background: var(--accent); }
.cat-card.on .cat-mark::after { content: "✓"; color: var(--on-accent); font-size: 10px; }

/* Уже в фарме — не кликается и приглушено, но остаётся на месте: пропавшая
   из выдачи строка заставляет гадать, тот ли это тайтл. */
.cat-card.in-farm { opacity: .45; cursor: default; }
.cat-card.in-farm:hover { border-color: var(--line); }
.cat-card.in-farm .cat-mark { border-color: var(--ok-line); color: var(--ok); }

.cat-cover {
  flex: none;
  width: 44px;
  height: 60px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
}
.cat-cover.empty {
  background:
    linear-gradient(135deg, transparent 46%, var(--line-2) 46%, var(--line-2) 54%, transparent 54%),
    var(--bg-3);
}

.cat-info { flex: 1; min-width: 0; }
.cat-name {
  font-size: 12px;
  font-weight: 640;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-sub {
  font-size: 10.5px;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.cat-chips span {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .35);
  font-size: 9.5px;
  color: var(--text-dim);
}
/* Рейтинг — первый чип, и он единственный цветной: по нему скользят взглядом. */
.cat-chips span:first-child { color: var(--warn); border-color: var(--warn-line); }

.cat-mark {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: rgba(6, 5, 11, .6);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

/* ── Отчёт о добавлении ───────────────────────────────────────────────── */

.cat-report:not(:empty) { margin-top: var(--s2); font-size: 11px; }
.cat-ok  { color: var(--ok); }
.cat-bad { color: var(--err); margin-top: 2px; }

@media (max-width: 720px) {
  #catQuery { max-width: none; }
  .cat-range { flex: 1; }
}