/* F440 — база знаний. Источник: «Экран базы знаний - F440.dc.html».

   Ширина текста и кегль — как в читалке, а не как в вебе: статья должна
   читаться за один экран прокрутки, а не за три. */

.kb-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line) }
.kb-title { font-size: var(--fs-h3); font-weight: 600; margin: 0; flex-shrink: 0 }

/* Поиск живёт в верхней строке, а не в колонке: он ищет по всей базе,
   и в колонке читался бы как фильтр оглавления. */
.kb-find { position: relative; flex: 1; min-width: 220px; max-width: 460px; margin-left: auto }
.kb-find .field { padding-left: 36px }
.kb-find .icon { display: flex; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-3) }
.kb-find kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-3) }

.kb-found {
  position: relative; margin: 0 0 var(--sp-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3);
  display: grid; gap: 4px;
}
.kb-found.hidden { display: none }
.kb-found .t-label { padding: 6px 6px 2px }
.kb-hit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); font-family: inherit; font-size: var(--fs-small);
  text-align: left; cursor: pointer;
}
.kb-hit b { color: var(--text); font-weight: 600 }
.kb-hit small { display: block; font-size: 12px; color: var(--muted-3); margin-top: 2px }
@media (hover: hover) { .kb-hit:hover { background: var(--panel-2) } }
.kb-empty { padding: 10px 12px var(--sp-3) }
.kb-empty b { display: block; margin-bottom: 4px }
.kb-empty p { font-size: var(--fs-small); color: var(--muted); margin: 0 }

/* ── Оглавление ───────────────────────────────────────────────── */
.kb-index { display: grid; gap: var(--sp-4); grid-template-columns: 1fr }
@media (min-width: 900px) { .kb-index { grid-template-columns: 300px minmax(0, 1fr) } }

.kb-toc { align-self: start; display: grid; gap: 2px }
.kb-toc .t-label { padding: 0 12px 6px }
.kb-sec {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 11px 12px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--text); font-family: inherit; font-size: var(--fs-small);
  text-align: left; cursor: pointer;
}
.kb-sec .t-num { color: var(--muted-3); font-size: 12px }
@media (hover: hover) { .kb-sec:hover { background: var(--panel) } }
/* Раздел, которого ещё нет, помечен, а не спрятан: «готовится» честнее,
   чем пустая страница или отсутствие строки. */
.kb-sec.is-empty { color: var(--muted-3); cursor: default }
.kb-arts { display: grid; gap: 1px; margin: 2px 0 6px 12px; padding-left: 10px; border-left: 1px solid var(--line) }
.kb-art {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); font-family: inherit; font-size: var(--fs-small);
  text-align: left; cursor: pointer;
}
@media (hover: hover) { .kb-art:hover { background: var(--panel-2); color: var(--text) } }
.kb-art-title { flex: 1; min-width: 0 }
.kb-art .t-num { font-size: 11px; color: var(--muted-3) }
.kb-art-mark { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-2); flex-shrink: 0 }
.kb-art-mark.is-read { background: var(--accent); border-color: var(--accent) }
.kb-note { font-size: 12px; color: var(--muted-3); margin: var(--sp-3) 12px 0; line-height: 1.5 }

.kb-entry { display: grid; gap: var(--sp-4); align-content: start }
.kb-block-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-3) }
.kb-block-head b { font-size: var(--fs-h3); font-weight: 600 }
.kb-block-head span { font-size: 12px; color: var(--muted-3) }
.kb-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.kb-card {
  display: grid; gap: 7px; align-content: start; text-align: left; cursor: pointer;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--t-press) var(--ease);
}
@media (hover: hover) { .kb-card:hover { border-color: var(--line-2) } }
.kb-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2) }
.kb-card-top .t-num { font-size: 11px; color: var(--muted-3) }
/* Причина, из которой выбрана карточка, стоит на ней самой: «рекомендуем»
   без причины — это шум. */
.kb-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brass) }
.kb-card-title { font-size: var(--fs-h3); font-weight: 600 }
.kb-card p { font-size: var(--fs-small); color: var(--muted); margin: 0 }
.kb-card-foot { display: flex; justify-content: space-between; gap: var(--sp-2);
  padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; color: var(--accent-ink) }
.kb-card-foot .t-num:last-child { color: var(--muted-3) }

.kb-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: left; cursor: pointer; margin-bottom: var(--sp-2);
  padding: 13px var(--sp-4); border-radius: var(--r-card);
  background: var(--stage); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--t-press) var(--ease);
}
@media (hover: hover) { .kb-row:hover { border-color: var(--line-2) } }
.kb-row-title { font-size: var(--fs-small); font-weight: 600 }
.kb-row-why { font-size: 12px; color: var(--muted); margin-top: 2px }
.kb-row .t-num { font-size: 11px; color: var(--muted-3); flex-shrink: 0 }

/* ── Статья ───────────────────────────────────────────────────── */
.kb-art-wrap { display: grid; gap: var(--sp-6); grid-template-columns: 1fr }
@media (min-width: 1000px) { .kb-art-wrap { grid-template-columns: minmax(0, 1fr) 240px } }
.kb-body { max-width: 680px }
.kb-art-head { margin-bottom: var(--sp-4) }
.kb-crumb { display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: 11px; color: var(--muted-3); margin-bottom: var(--sp-2) }
.kb-body h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  font-weight: 600; margin: 0 0 8px }
.kb-lead { font-size: var(--fs-body); color: var(--muted); margin: 0 }
.kb-body h3 { font-size: var(--fs-h3); font-weight: 600; margin: var(--sp-6) 0 var(--sp-2) }
.kb-body p { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 var(--sp-3) }
.kb-dl { margin: 0 0 var(--sp-4); display: grid; gap: 1px;
  background: var(--line); border-radius: var(--r-card); overflow: hidden }
.kb-dl dt { background: var(--stage); padding: 10px 13px 2px; font-family: var(--font-mono);
  font-size: 12px; color: var(--accent-ink) }
.kb-dl dd { background: var(--stage); padding: 0 13px 10px; margin: 0;
  font-size: var(--fs-small); color: var(--muted) }

.kb-term, .kb-mistake {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
}
.kb-term p, .kb-mistake p { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 0 }
.kb-term b { color: var(--text) }
.kb-mistake { border-color: var(--brass-edge); background: var(--brass-wash) }
.kb-mistake .t-label { color: var(--brass) }

/* Пример на слух: тот же материал и те же цепочки, что в тренажёре. */
.kb-listen { background: var(--stage); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); margin: 0 0 var(--sp-4) }
.kb-listen-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); margin-bottom: var(--sp-3) }
.kb-listen-title { font-size: var(--fs-small); font-weight: 600 }
.kb-listen-sub { font-size: 12px; color: var(--muted); margin-top: 2px }
.kb-listen .t-num { font-size: 11px; color: var(--muted-3); flex-shrink: 0 }
.kb-player { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.kb-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 }
.kb-item {
  padding: 9px 13px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); font-family: inherit; font-size: 12px; cursor: pointer;
}
.kb-item.on { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent-ink) }
@media (hover: hover) { .kb-item:hover { color: var(--text) } }

.kb-steps { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4) }
.kb-step { display: flex; gap: var(--sp-3); align-items: baseline }
.kb-step .t-num { color: var(--muted-3); font-size: 12px; flex-shrink: 0 }
.kb-step span:last-child { font-size: var(--fs-small); color: var(--muted); line-height: 1.6 }

/* Врезка возврата — единственный элемент статьи, который влияет на
   метрику продукта, поэтому она блок, а не ссылка в тексте. */
.kb-back {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--accent-edge); border-radius: var(--r-lg);
  padding: var(--sp-4); margin: var(--sp-6) 0 var(--sp-4);
}
.kb-back-title { font-size: var(--fs-h3); font-weight: 600 }
.kb-back-sub { font-size: var(--fs-small); color: var(--muted); margin-top: 3px }
.kb-back-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap }
.kb-back .btn { min-height: var(--tap-row); padding: 11px 16px; font-size: var(--fs-small) }

.kb-next { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 13px 0; border-top: 1px solid var(--line) }
.kb-next-btn { border: 0; background: transparent; color: var(--accent-ink);
  font-family: inherit; font-size: var(--fs-small); cursor: pointer; padding: 0 }
.kb-feed { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding-top: var(--sp-3); border-top: 1px solid var(--line) }
.kb-feed .t-num { font-size: 12px; color: var(--muted-3); margin-right: auto }
.kb-feed .btn { min-height: var(--tap-row); padding: 9px 14px; font-size: var(--fs-small) }
.kb-feed-thanks { color: var(--accent-ink) !important; margin: 0 !important }

/* Правая колонка — только у длинных статей: у короткой она дублировала
   бы саму себя. */
.kb-aside { align-self: start; position: sticky; top: 76px; display: grid; gap: 2px }
@media (max-width: 1000px) { .kb-aside { display: none } }
.kb-anchor {
  text-align: left; padding: 7px 10px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; cursor: pointer;
}
.kb-anchor b { color: var(--text); font-weight: 600 }
@media (hover: hover) { .kb-anchor:hover { background: var(--panel); color: var(--text) } }

/* Оговорка под плеером: она бывает только там, где пример намеренно
   нарушает общее правило выровненной громкости. */
.kb-listen-note { margin: 10px 0 0; color: var(--ink-3); font-size: 13px; }