/* Раздел «Каналы»: список с формой добавления, карточки в семи статусах,
   пилюля индексации в шапке, ролики выбранного канала, чипы тайм-кодов
   гаджетов ролика (итерация 2, plan2.md §3).
   Владелец — блок C2. Источник — docs/redesign/canvas2/body_Channels.html,
   docs/redesign/canvas/body_Components.html (чипы статуса, карточка канала,
   прогресс). Общие компоненты (.pane .ph .card .tag .prog .list-row .sel …)
   не переопределяются — здесь только то, что своё для раздела. */

/* ---- Пилюля индексации в шапке (#status-bar, фрагмент /status) ---- */
#status-bar a.tag { cursor: pointer; }
#status-bar a.tag:hover { text-decoration: none; filter: brightness(.96); }
/* .tb-progress рисует контракт (base.css) для div+i; здесь она — нативный
   <progress>, что даёт процент без инлайнового style="width:…". */
.tb-progress[value] { -webkit-appearance: none; appearance: none; border: none; }
.tb-progress[value]::-webkit-progress-bar { background: transparent; }
.tb-progress[value]::-webkit-progress-value { background: var(--accent); border-radius: inherit; }
.tb-progress[value]::-moz-progress-bar { background: var(--accent); border-radius: inherit; }

/* ---- Список: шапка/форма/подвал фиксированы, скроллятся только карточки ---- */
#channels-pane-content {
  display: flex; flex-direction: column; overflow: hidden;
}
.chn-rows-list { flex: 1; min-height: 0; overflow: auto; }

.chn-add {
  flex: none;
  padding: 10px 12px;
  background: var(--surf2);
  border-bottom: 1px solid var(--line);
}
.chn-add-form { display: flex; flex-direction: column; gap: 6px; }
.chn-add-row { display: flex; gap: 6px; }
.chn-period { width: 118px; flex: none; }
.chn-add-hint { margin-top: 2px; }

.chn-count { margin-left: 2px; }

/* ---- Карточка канала ---- */
.chn-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.chn-card:hover { background: var(--surf2); }
.chn-card:last-child { border-bottom: none; }
.chn-row { display: flex; align-items: center; gap: 9px; }
.chn-ava { width: 34px; height: 34px; }
.chn-ava-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4);
}
.chn-info { min-width: 0; }
.chn-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chn-title-row .t-h3 { white-space: nowrap; min-width: 0; }
/* Чип статуса — короткий и постоянной длины: ужиматься должно имя, а не он. */
.chn-title-row .tag { flex: none; }
.chn-sub { margin-top: 2px; }
.chn-actions { display: flex; gap: 4px; flex: none; }

/* Статус «в очереди» — нейтральный, но чуть темнее «прервано». */
.tag-queue { background: var(--surf2); color: var(--ink3); }

/* ---- Карточка «индексируется»: прогресс, плитки, «сейчас», методы ---- */
.chn-prog { display: block; width: 100%; margin: 8px 0; }
.chn-prog[value] { -webkit-appearance: none; appearance: none; border: none; }
.chn-prog[value]::-webkit-progress-bar { background: var(--surf3); border-radius: 99px; }
.chn-prog[value]::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.chn-prog[value]::-moz-progress-bar { background: var(--accent); border-radius: 99px; }

.chn-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin-bottom: 8px;
}
.chn-stat { background: var(--surf2); border-radius: 8px; padding: 6px 8px; }
.chn-stat--err { background: var(--errSoft); }
.chn-stat--err .t-xs, .chn-stat--err .t-h3 { color: var(--err); }

.chn-now {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--surf2); border-radius: 8px;
}
.chn-now-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .chn-now-dot { animation: chn-pulse 1.6s ease-in-out infinite; }
}
@keyframes chn-pulse { 50% { opacity: .35; } }

/* Счётчики в чипах растут раз в 3 с — без табличных цифр чипы меняли бы
   ширину и переносились, дёргая высоту карточки. */
.chn-methods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chn-methods .tag { font-variant-numeric: tabular-nums; }

/* ---- Карточка «ошибка»: подробности и повтор ---- */
.chn-err-actions { display: flex; gap: 6px; margin-top: 8px; }
.chn-details { margin-top: 8px; }

/* ---- Пустое состояние списка ---- */
.chn-empty { padding: 20px 16px; }

/* ---- Подвал списка ---- */
.chn-foot {
  flex: none;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.chn-foot-ic { color: var(--ink4); }

/* ---- Видео выбранного канала ---- */
#channel-videos-content { display: flex; flex-direction: column; overflow: hidden; }
.chn-vhead {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-bottom: 1px solid var(--line);
}
.chn-vhead-ava { width: 44px; height: 44px; }
.chn-vhead-title { font-size: 18px; }
.chn-vhead-actions { display: flex; gap: 6px; flex: none; }
/* Пока канал индексируется, шапка перерисовывается раз в 3 с: счётчики
   держат ширину сами, иначе строка «перебирает» буквами. */
.chn-vhead-meta { font-variant-numeric: tabular-nums; }

.chn-rows { flex: 1; min-height: 0; overflow: auto; }
/* Список перерисовывается целиком раз в 3 с, пока канал индексируется:
   высота строки не должна зависеть от того, приехала ли у ролика вторая
   строка метаданных. */
.chn-vrow { min-height: 74px; }
/* Ролик, который сейчас играет в панели «Просмотр» (yts:view-state,
   plan2.md §3, §6). */
.chn-vrow.is-playing { background: var(--accentSoft); box-shadow: inset 2px 0 0 var(--accent); }
/* Разделители месяцев липнут к верху скролла своей колонки; справа в них —
   подпись «свежие сверху» (артборд body_Channels.html). */
.chn-rows .stick { position: sticky; top: 0; z-index: 1; justify-content: space-between; }
.chn-vthumb { width: 104px; height: 58px; }
.chn-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--ink4); }
.chn-vid-date { width: 76px; text-align: right; flex: none; }

/* «N гаджетов» открывает чипы тайм-кодов прямо под строкой ролика
   (артборд body_Channels.html, plan2.md §3) — обёртка нужна, чтобы граница
   строк осталась только у самой строки, а не у блока чипов. */
.chn-vitem { border-bottom: 1px solid var(--line); }
.chn-vitem .chn-vrow { border-bottom: 0; }
.chn-vitem:last-child { border-bottom: none; }
[data-role="chn-gadgets-toggle"][aria-expanded="true"] [data-role="chn-chevron"] { transform: rotate(180deg); }
.chn-vchips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 12px 11px 126px;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 99px;
  border: 1px solid var(--line2); background: var(--surface);
  font: 600 11.5px var(--font-ui); color: var(--ink2); cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.is-playing { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.chip .mono { font-size: 10.5px; }

.chn-more {
  flex: none;
  padding: 9px 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}

.chn-empty-hint { margin: auto; padding: 16px; text-align: center; }