/* Раздел «Каталог»: дерево рубрик, экран рубрики. Владелец — блок C2.
   Источники — docs/redesign/canvas/body_Main.html, body_CatalogRubric.html,
   body_Components.html; docs/redesign/canvas2/body_Rubric.html (карточка
   «играет», без промежуточного экрана товара — итерация 2, plan2.md §3).
   Классы дизайн-системы (.pane .ph .card .btn .tag .tc .list-row .stick
   .empty .prog .skel …) переиспользуются как есть — здесь только то, чего не
   хватает: раскладка дерева рубрик, сетка карточек гаджета.

   Правая колонка «Гаджеты видео»/«Гаджет» (панель тайм-кодов, карточка
   гаджета) удалена итерацией 2 вместе с `_items_pane.html`/`_gadget_pane.html`
   — их работу забрала панель «Просмотр» (блок A2, см. notes.md). Правила
   `.side-collapsed`, `.w340.is-collapsed`, `.item-video-head*`,
   `.timecode-row*`, `.gadget-detail*` вычищены при мёрдже A2 → B2 → C2;
   пропущенные тогда `.tw-side`, `.gadget-cover*`, `.reindex-note` и
   `.is-sel` (состояние «играет» теперь одно на всё — `.is-playing`) —
   фиксом по ревью (находки 4, 11). */

/* Замена point-инлайновых transform:rotate(180deg) из артбордов
   (стрелка «влево», кнопка «развернуть»). */
.ic-flip { transform: rotate(180deg); }
.jc-between { justify-content: space-between; }

/* `.pane-body` (base.css) сама скроллится целиком — здесь шапка и `.stick`
   остаются на месте, а скроллится только внутренний список/сетка. */
.pane-body.col { overflow: hidden; display: flex; flex-direction: column; }
.pane-empty-center {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; justify-content: center;
}

/* ---- Превью фиксированных размеров (замена инлайновых width/height) ---- */
.tw-row { width: 104px; height: 58px; }
.thumb-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4);
}

/* ---- Скелетон дерева рубрик (пока грузится /catalog) ---- */
.cat-row-skel { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px; }
.cat-row-skel-line { height: 12px; flex: 1; }

/* ---- Дерево рубрик ---- */
.cat-tree { padding: 6px; display: flex; flex-direction: column; }
.cat-list { display: flex; flex-direction: column; gap: 1px; }

.cat-row {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 8px;
  border-radius: 8px; color: var(--ink2);
  cursor: pointer; border: 0; background: none; width: 100%;
  font: inherit; text-align: left;
}
.cat-row:hover { background: var(--surf2); }
.cat-row.is-open { background: var(--surf2); color: var(--ink); }

.cat-ic {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cat-ic-violet { background: var(--violetSoft); color: var(--violet); }
.cat-ic-warn { background: var(--warnSoft); color: var(--warn); }
.cat-ic-ok { background: var(--okSoft); color: var(--ok); }
.cat-ic-info { background: var(--infoSoft); color: var(--info); }
.cat-ic-accent { background: var(--accentSoft); color: var(--accent); }
.cat-ic-mute { background: var(--surf2); color: var(--ink3); }

.cat-chevron { color: var(--ink4); flex: none; transition: transform .12s ease; }
.cat-row.is-open .cat-chevron { transform: rotate(180deg); }

.cat-subs { padding: 2px 0 4px 39px; display: flex; flex-direction: column; gap: 1px; }
.cat-sub-row {
  display: flex; align-items: center; height: 26px; padding: 0 8px;
  color: var(--ink3); font-size: 12.5px; border-radius: 7px;
  cursor: pointer; border: 0; background: none; width: 100%;
  font-family: inherit; text-align: left;
}
.cat-sub-row:hover { background: var(--surf2); }
.cat-sub-row.is-on { background: var(--accentSoft); color: var(--accent); font-weight: 600; }
.cat-sub-row.is-on .mono { color: var(--accent); }

.cat-foot {
  margin-top: auto; position: sticky; bottom: 0;
  padding: 10px 12px; background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.cat-foot .ic14 { color: var(--ink4); flex: none; }

/* ---- Экран рубрики: хлебная крошка, сортировка, сетка карточек ---- */
.crumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumb .ic14 { color: var(--ink4); flex: none; }

.cat-sort-wrap { position: relative; flex: none; }
.cat-sort {
  appearance: none; -webkit-appearance: none;
  height: 28px; padding: 0 26px 0 10px;
  border: 1px solid var(--line2); border-radius: 8px;
  background: var(--surface); color: var(--ink2);
  font: 600 12px/1 var(--font-ui); cursor: pointer;
}
.cat-sort-wrap .ic14 {
  position: absolute; right: 8px; top: 50%; margin-top: -7px;
  color: var(--ink4); pointer-events: none;
}

.cat-grid {
  flex: 1; min-height: 0; overflow: auto;
  padding: 10px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  align-content: start;
}
.gadget-card {
  padding: 9px; cursor: pointer; text-align: left;
  display: block; width: 100%; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.gadget-card:hover { border-color: var(--line2); }
/* Карточка текущего гаджета панели «Просмотр» (yts:view-state, plan2.md §3,
   §6) — артборд body_Rubric.html. */
.gadget-card.is-playing { border-color: var(--accent); background: var(--accentSoft); }
.gadget-card-thumb {
  width: calc(100% + 18px); height: 96px; margin: -9px -9px 8px;
  border-radius: 11px 11px 0 0;
}
.gadget-card-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--ink4); }
.gadget-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gadget-card-top .ic14 { color: var(--ink4); }
.gadget-card-title { height: 34px; }
.gadget-card-meta { margin-top: 5px; }
/* Бейдж «играет» — скрыт по умолчанию (hidden), показывает catalog.js. */
.tag-playing { background: var(--accent); color: var(--on-dark); }

.cat-pager {
  margin-top: auto; padding: 9px 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.cat-pager .pages { display: flex; align-items: center; gap: 8px; }
.cat-pager .pages > .cur { color: var(--ink); }

/* ---- «Похожее в каталоге» (карточка гаджета, ленивая подгрузка) ---- */
.gadget-similar { margin-top: 14px; }
.gadget-similar-head { padding: 0 0 8px; height: auto; }
.gadget-similar-empty { padding: 10px 0; }
.gadget-similar-list { display: flex; flex-direction: column; gap: 8px; }

.similar-card {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 8px; width: 100%; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.similar-card:hover { border-color: var(--line2); }
.similar-card-thumb { width: 84px; height: 47px; border-radius: 8px; flex: none; }
.similar-card-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--ink4); }
.similar-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.similar-card-top { display: flex; align-items: center; }
.similar-card-meta { color: var(--ink3); }

/* ---- Скелетон «Похожего» ---- */
.similar-skel-card { pointer-events: none; }
.similar-skel-line { height: 10px; border-radius: 5px; }
.similar-skel-line-title { width: 88%; height: 12px; }
.similar-skel-line-sub { width: 55%; }

/* `.pane-empty-center` — колоночный flex, и его дети растягиваются на всю
   ширину: `text-align: center` из `.empty` выравнивает текст, но не значок
   и не кнопку. Их центрируем сами. */
.pane-empty-center > .empty-ic,
.pane-empty-center > .empty-btn { align-self: center; }