/**
 * Подвкладка «Тайтлы»: панель фильтров, карточки и выбор аккаунта.
 *
 * Размер тут диктует не вкус, а число: тайтлов за две сотни. Поэтому карточка
 * ровно в одну строку высотой обложки, а не блок с полями — на экран должно
 * влезать полтора десятка, иначе список листают, а не читают.
 *
 * Очереди глав своих стилей не имеют: они рисуются классами .acc из
 * accounts.css, потому что это те же аккаунты, только с другими числами.
 */

/* ── Панель над списком ───────────────────────────────────────────────── */

.tbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.tbar-find { flex: 1; min-width: 180px; max-width: 380px; }
/* Счётчик прижат вправо и не скачет: цифры моноширинные из base. */
.tbar-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}

/* Сегменты фильтра. Тот же приём, что у подвкладок, но мельче: это фильтр
   внутри вкладки, а не уровень навигации, и спорить с ним он не должен. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .35);
}
.seg-btn {
  height: 22px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 600 11px/1 var(--sans);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.seg-btn:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.seg-btn.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ── Карточка тайтла ──────────────────────────────────────────────────── */

/* На широком мониторе одна колонка растягивала карточку на полтора метра
   пустоты между названием и кнопками. Колонок столько, сколько влезет: при
   двух сотнях тайтлов видеть за раз втрое больше — это втрое меньше листания. */
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 4px;
}

.tcard {
  position: relative;           /* якорь для всплывающего выбора аккаунта */
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  box-shadow: var(--hairline);
  transition: border-color var(--dur), background var(--dur);
}
.tcard:hover { border-color: var(--accent-line); }

/* Дочитанные всеми гасим зелёной кромкой: в списке из двух сотен взгляд ищет
   недоделанное, и готовое должно уходить на второй план само. */
.tcard.done { border-color: var(--ok-line); }
.tcard.done .tcard-cover { opacity: .75; }

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

.tcard-main { flex: 1; min-width: 0; }
.tcard-name {
  font-size: 12.5px;
  font-weight: 640;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcard-stats {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 2px 0 var(--s2);
  font-size: 10.5px;
  flex-wrap: wrap;
}
/* Лучший результат среди аккаунтов — главное число карточки. */
.tcard-read { font-weight: 700; color: var(--accent-hi); }

/* «Сколько аккаунтов дочитали» — кнопка: за ней разворачивается разбивка. */
.tcard-full {
  padding: 0 6px;
  height: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .35);
  color: var(--text-dim);
  font: 640 10px/1 var(--sans);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
}
.tcard-full:hover { color: #fff; border-color: var(--accent-line); }
.tcard.done .tcard-full { color: var(--ok); border-color: var(--ok-line); }

.tcard-slug {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Полоса — средний прогресс по аккаунтам, а не по лучшему из них: смысл
   фарма в том, чтобы тайтл дочитали все. */
.tbarline {
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
}
.tbarline i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-hi));
  transition: width var(--dur);
}
.tcard.done .tbarline i { background: linear-gradient(90deg, #10896a, var(--ok)); }

/* ── Разбивка по аккаунтам ────────────────────────────────────────────── */

.tcard-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px var(--s3);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
}
.tdet { display: flex; justify-content: space-between; gap: var(--s2); font-size: 10.5px; }
.tdet-name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdet-num { color: var(--text-mute); flex: none; }
.tdet.ok .tdet-name, .tdet.ok .tdet-num { color: var(--ok); }

/* ── Кнопки карточки ──────────────────────────────────────────────────── */

.tcard-act { display: flex; gap: 3px; flex: none; }

.ticon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.ticon:hover { background: var(--bg-3); border-color: var(--accent-line); color: #fff; }
.ticon.danger:hover { border-color: var(--err-line); background: var(--err-dim); color: var(--err); }

/* ── Выбор аккаунта для очереди ───────────────────────────────────────── */
/* Всплывает поверх карточки вместо select'а в каждой строке: двести выпадашек
   по двадцать пунктов — это четыре тысячи узлов разметки ни за чем. */

.pick {
  position: absolute;
  top: calc(100% - 6px);
  right: var(--s2);
  z-index: 20;
  width: 236px;
  padding: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--solid-2);
  box-shadow: var(--shadow-2);
}
.pick.up { top: auto; bottom: calc(100% - 6px); }
.pick-head {
  margin-bottom: var(--s2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Двадцать аккаунтов в один экран не влезут — список свой со скроллом. */
.pick-list { display: grid; gap: 1px; max-height: 232px; overflow-y: auto; }

.pick-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 3px var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: 600 11.5px/1 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur);
}
.pick-row:hover { background: var(--accent-dim); }
.pick-row.busy { opacity: .5; cursor: progress; }
.pick-row img {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-3);
}
.pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-id { flex: none; font-size: 10px; font-weight: 500; color: var(--text-mute); }

.pick-all {
  width: 100%;
  height: 24px;
  margin-top: var(--s2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  color: var(--accent-hi);
  font: 640 11px/1 var(--sans);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.pick-all:hover { background: var(--accent); color: var(--on-accent); }
.pick-all:disabled { opacity: .6; cursor: progress; }

/* ── Очереди глав ─────────────────────────────────────────────────────── */
/* Карточка та же, что на «Аккаунтах», но шире: там в чипах двузначные цифры
   за сегодня, здесь — трёхзначные счётчики очереди, и на 296px строка
   «в очереди 159 · 217 · 2» рвалась пополам. */

.qcards { grid-template-columns: repeat(auto-fill, minmax(344px, 1fr)); }

/* ── Подвал списка ────────────────────────────────────────────────────── */

.titles-more {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
}
.titles-more:empty { display: none; }

.cover-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Поиск для добавления ─────────────────────────────────────────────── */

#farmSearch { flex: 1; max-width: 420px; }

/* Пока не искали — блок пустой и рамку не рисует. */
.search-results:not(:empty) {
  display: grid;
  gap: 1px;
  max-height: 300px;
  margin-bottom: var(--s3);
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  overflow-y: auto;
}
.sr-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur);
}
.sr-item:hover { background: var(--accent-dim); }
/* Уже добавленное гасим, но не прячем: повторный клик безвреден, а
   исчезнувшая из выдачи строка заставляет гадать, тот ли это тайтл. */
.sr-item.have { opacity: .55; }
.sr-cover {
  flex: none;
  width: 28px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.sr-name { font-size: 12px; font-weight: 600; }
.sr-meta { font-size: 10.5px; color: var(--text-mute); }

/* ── Узкий экран ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tbar-count { margin-left: 0; }
  .tcard-slug { display: none; }
  .pick { left: var(--s2); right: var(--s2); width: auto; }
}