/* Центр материалов автора: вкладки состояний, строка материала, полки отбора.
 *
 * Отдельным файлом, потому что раздел живёт только в веб-клиенте: `web.html`
 * подключает этот файл, `index.html` — нет. Откат — снять одну строку из
 * `web.html`: экраны собраны из общих карточек и без этого файла останутся
 * рабочими, только теснее.
 *
 * Ничего с `!important`: файл подключается после `app.css` и перекрывает его
 * обычным каскадом.
 */

/* ── Шапка и полки ────────────────────────────────────────────────────────── */

.lib-top {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px;
}

/* Полки прокручиваются вбок, а не переносятся: у человека, писавшего в пять
 * сообществ, перенос съел бы два ряда экрана ещё до первой строки списка. */
.lib-tabs,
.lib-shelf,
.lib-facet {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.lib-tabs::-webkit-scrollbar,
.lib-shelf::-webkit-scrollbar,
.lib-facet::-webkit-scrollbar { display: none; }
.lib-tabs .chip,
.lib-shelf .chip,
.lib-facet .chip { scroll-snap-align: start; flex: none; }

.lib-tabs { margin-bottom: 12px; }
.lib-shelf { margin: 8px 0 8px; }
.lib-facets { margin-bottom: 8px; display: grid; gap: 8px; }

/* Число рядом с именем вкладки. Приглушено и мельче имени: это подсказка
 * «сколько там», а не сам заголовок. У выбранной вкладки оно на её же фоне. */
.lib-count {
  font-style: normal;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-left: 2px;
}
.chip.active .lib-count { color: inherit; opacity: .75; }

/* Вкладка с неудачами. Цвет — добавка к слову «Ошибки загрузки» и к числу
 * рядом, а не замена им: состояние, переданное одним цветом, для части людей
 * не передано вовсе. */
.lib-tabs .chip.bad {
  border-color: var(--bad);
  color: var(--bad);
}
.lib-tabs .chip.bad .lib-count { color: var(--bad); }

/* ── Поиск ────────────────────────────────────────────────────────────────── */

.lib-search-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--muted);
}
/* Поле внутри рамки строки, а не со своей: две рамки одна в другой читаются
 * как поле внутри поля. */
.lib-search {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0;
  /* Палец: поле поиска обязано быть не ниже общей меры нажатия. */
  min-height: var(--tap-touch);
  color: var(--text);
}
.lib-search:focus { outline: none; }
.lib-search-row:focus-within { border-color: var(--accent); }
/* Свой крестик у type=search в WebKit — второй рядом с нашим. Убираем чужой:
 * наш умеет ещё и перечитать список. */
.lib-search::-webkit-search-cancel-button { display: none; }

/* ── Строка материала ─────────────────────────────────────────────────────── */

.lib-row { align-items: flex-start; gap: 12px; }

/* Плашка: снимок обложки или знак вида. Постоянного размера — список, в
 * котором строки разной высоты из-за картинок, глазами не пролистывается. */
.lib-shot {
  flex: none;
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.lib-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-open {
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
/* Длинный заголовок без пробелов (ссылка, набор решёток) не должен растягивать
 * строку за край экрана. */
.lib-open b,
.lib-open small { display: block; overflow-wrap: anywhere; }
.lib-open small { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.lib-nums { font-variant-numeric: tabular-nums; }

/* Убранное в архив приглушено, но читаемо: это не «удалённое», а «не на
 * виду». Полоса слева — вторая примета к слову «в архиве» в самой строке. */
.lib-row.archived {
  border-left: 2px solid var(--line-strong);
  padding-left: 8px;
}
.lib-row.archived .lib-shot img { opacity: .6; }

/* Строка неудавшейся отправки. Та же примета, что у очереди отправки. */
.lib-row.bad { border-left: 2px solid var(--bad); padding-left: 8px; }

.lib-acts { display: flex; align-items: center; gap: 8px; flex: none; }

.lib-warn { color: var(--bad); }

/* ── Числа одного материала ───────────────────────────────────────────────── */

/* Две в ряд на телефоне, три на компьютере. `minmax(0, 1fr)` обязателен: без
 * нуля длинное имя показателя растягивает столбец, и сетка уезжает за край. */
.lib-nums-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
@media (min-width: 620px) {
  .lib-nums-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lib-num {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.lib-num-name {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.lib-num strong {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-lg);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lib-num small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }

/* ── Телефон ──────────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  /* Плашка мельче: на узком экране 52 пиксела картинки отнимают у заголовка
     четверть строки, а узнают материал всё равно по первому слову. */
  .lib-shot { width: 44px; height: 44px; }
  /* Числа под заголовком уходят: они есть в окне «Числа материала», а здесь
     занимали бы третью строку у каждой записи. */
  .lib-nums { display: none; }
}