/* База знаний «Инструкции по разделам» (эталон f7c_design v0.981.0, kb-* из reference/screens.css,
   адаптировано под переменные боевого fcx.css; своими значениями — не копия правил пакета).
   Скриншотов kb/*.jpg в бою нет — .kb-shot--stub рисует блок-заглушку вместо картинки. */

/* Кнопка «Инструкция» в шапке раздела — рядом с «Ассистент раздела», переноса текста нет. */
.kb-btn { white-space: nowrap; }

/* Хост раздела: индекс (колонка индекса + сверка) и статья (оглавление | тело | сверка). */
.kb-host { min-width: 0; }
.kb-home { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.kb-article { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.kb-aside { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* Индекс: сетка групп разделов, строка — плитка + название + краткая выжимка. */
.kb-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.kb-index__group { display: grid; gap: 4px; align-content: start; min-width: 0; }
.kb-index__row {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  align-items: center; padding: 8px; border-radius: var(--radius-md); cursor: pointer;
}
.kb-index__row:hover { background: var(--bg-hover); }
.kb-index__row > span { display: grid; gap: 1px; min-width: 0; }
.kb-index__row .fc-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Оглавление статей сбоку статьи — прилипает к верху, текущая статья подсвечена полосой слева. */
.kb-toc { display: grid; gap: 2px; align-content: start; max-height: calc(100vh - 110px); overflow: auto; position: sticky; top: 72px; padding: 10px; }
.kb-toc__row {
  all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink-2);
}
.kb-toc__row:hover { background: var(--bg-hover); color: var(--ink); }
.kb-toc__row[aria-current="true"] { background: var(--bg-selected); color: var(--ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--primary); }

/* Тело статьи — ритм блоков сверху вниз. */
.kb-body { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* Скриншот: картинка kb/<id>-<n>.jpg (снимает tools/kb-shots.mjs); файла нет — заглушка
 * с честной подписью вместо картинки, выдуманных адресов не остаётся. */
.kb-shot { margin: 0; display: grid; gap: 6px; }
.kb-shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md); border: 1px solid var(--line);
}
.kb-shot__ph {
  display: grid; gap: 8px; justify-items: center; align-content: center; text-align: center;
  min-height: 180px; padding: 24px 16px; border-radius: var(--radius-md);
  border: 1px dashed var(--line); background: var(--bg-sunken); color: var(--muted); font-size: 13px;
}
.kb-shot figcaption { font-size: 12.5px; color: var(--muted); }
.kb-shot-stamp:empty { display: none; }

/* «Что можно сделать» — галочки успеха (бирюза, не бренд-зелёный: зелёный — только действие). */
.kb-can { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kb-can li { display: flex; gap: 8px; align-items: flex-start; }
.kb-can .fc-ico { color: var(--success); flex: none; margin-top: 3px; }

/* «Как» — шаги нумеруются браузером, шаги ищутся из Ctrl K. */
.kb-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Механизмы раздела: чипы «вкладка/кнопка/переключатель» — метки дословно как в интерфейсе. */
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-chip {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px;
  border-radius: var(--radius-pill); background: var(--bg-sunken); border: 1px solid var(--line); font-size: 12.5px;
}
.kb-chip .fc-caption { color: var(--muted); }

/* Сверка базы с интерфейсом: ритм блоков и очередь «описать» на мягком жёлтом фоне. */
.kb-audit { display: grid; gap: 10px; }
.kb-audit__note { margin: 0; }
.kb-queue { display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-md); background: var(--warning-soft); }
.kb-queue__row {
  all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; padding: 4px 6px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
}
.kb-queue__row:hover { background: var(--bg-hover); }
.kb-queue__row > span:first-of-type { flex: 1; min-width: 0; }

/* Фокус клавиатурой — единый с остальными kb-элементами контур. */
.kb-index__row:focus-visible, .kb-toc__row:focus-visible, .kb-queue__row:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

@media (max-width: 1280px) {
  .kb-article { grid-template-columns: 220px minmax(0, 1fr); }
  .kb-article > aside { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .kb-home { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .kb-article { grid-template-columns: minmax(0, 1fr); }
  .kb-toc { position: static; max-height: 240px; }
}