/* KB / explanatory article pattern — breadcrumb, article head, prose, sticky TOC, prev/next nav.
   Requires tokens/tokens.css, tokens/core.css, components/components.css loaded first.
   Prototyped and visually verified in Claude Design before being written here — see README.md.

   Prefix: `kb-` (knowledge-base pattern). Composes with the shared `.wrap`/`.callout` from
   components.css — do not redefine those here. */

.kb-header {
  border-bottom: 1px solid var(--border-subtle);
}

.kb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.kb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
}

.kb-brand img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}

/* Breadcrumbs: shared .breadcrumbs / .kb-breadcrumbs live in components/components.css */

/* Two-column layout: article (measured for reading) + sticky in-page TOC. */
.kb-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--content-article)) 240px;
  gap: var(--space-16);
  justify-content: center;
  padding: var(--space-8) 0 var(--space-20);
}

.kb-article-head {
  margin-bottom: var(--space-8);
}

.kb-kicker {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--accent-hover);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kb-article-head h1 {
  margin: 0 0 var(--space-4);
  /* Коды ошибок и длинные имена — один неразрывный токен: подчёркивание
     переносов не даёт. Без этого заголовок вылезает из колонки и наезжает
     на оглавление. Проверено на ERR_CERT_AUTHORITY_INVALID. */
  overflow-wrap: break-word;
  font-size: var(--font-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.kb-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.kb-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* ---- Prose ---- */

.kb-prose {
  color: var(--text-secondary);
  font-size: var(--font-md);
  line-height: var(--leading-relaxed);
}

/* Ритм продлён внутрь секций. Тело статьи разбито на `<section>` по
   заголовкам — иначе прокруточной шкале не к чему привязаться, и указатель
   места в оглавлении построить не на чем. Сама секция остаётся соседом
   для этого правила, а её содержимое получает тот же шаг. Отступ
   заголовка схлопывается с отступом секции, поэтому вертикаль не едет —
   сверено координатами до и после. */
/* `:where(section)` — не украшение, а сохранение ВЕСА правила. Прямая
   запись `.kb-prose section > * + *` весит 0,2,0 и потому перебивает
   собственные отступы блоков вроде `.kb-points` (0,1,0), которые раньше
   выигрывали: список терял 4px, и вся вертикаль ниже уезжала. `:where()`
   вносит нулевой вес, и правило остаётся ровно тем же, чем было. */
.kb-prose > * + *,
.kb-prose :where(section) > * + * {
  margin-top: var(--space-5);
}

.kb-prose h2 {
  margin: var(--space-10) 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  scroll-margin-top: var(--space-8);
}

.kb-prose h3 {
  margin: var(--space-8) 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  scroll-margin-top: var(--space-8);
}

.kb-prose ul,
.kb-prose ol {
  padding-left: var(--space-6);
}

.kb-prose li + li {
  margin-top: var(--space-2);
}

/* Подчёркивание — признак ссылки ВНУТРИ ФРАЗЫ. Карточка раздела («In this
   section») сама по себе ссылка и рендерится внутри `.kb-prose`, поэтому
   правило без исключения подчёркивает целую поверхность: на `/engines/`
   так выглядели пять карточек из шести, на `/tools/` — единственная.

   Дефект в сети ловили дважды: `bridge-ssl-static` починил его у себя, в
   комплект правка тогда не вернулась, и он повторился на
   `bridge-seo-static`. B-56 закрыт в комплекте 2026-08-27 — но на уже
   разложенные сайты это НЕ доезжает: `build.py` копию CSS в репозитории
   не трогает. Селектор здесь дословно комплектный, включая
   `:not(.kb-pager-link)`, которого в этой разметке нет: расхождение с
   комплектом всплыло бы при следующей раскладке.

   Ни `verify.py`, ни `check_css.py`, ни `check-css-local.py` этого не
   видят: правило применяется, переменные разрешимы, классы на месте.
   Ловится взглядом на страницу целиком — и замером
   `getComputedStyle(a).textDecorationLine` у `.kb-prose a.nav-card`. */
.kb-prose a:not(.nav-card):not(.kb-pager-link) {
  color: var(--accent-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kb-prose a:not(.nav-card):not(.kb-pager-link):hover {
  color: var(--accent-hover);
}

.kb-prose code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--bg-panel-soft);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* Code block: shared .code-block / .kb-code-block live in components/components.css */

/* ---- Sticky in-page TOC ---- */

.kb-toc {
  align-self: start;
  position: sticky;
  top: var(--space-8);
  padding-top: var(--space-2);
}

/* Подпись группы карточек на хабе — «In this section». Правило взято из
   комплекта (`_ops/site-kit/assets/css/kb-article.css`, добавлено там
   2026-08-28), сюда доехало 2026-08-29 вручную: до этого класс выходил из
   сборщика без единого правила, и подпись рисовалась обычным абзацем —
   первой строкой текста, а не заголовком группы. Заметно тем, что на всех
   шести хабах она стоит рядом с `.kb-toc-label` («On this page»), у которого
   правило есть: два ярлыка одной роли выглядели по-разному.

   Значения совпадают с `.kb-toc-label` намеренно — роль одна. Не моноширинный,
   в отличие от `bridge-ssl-static`: моноширинный на пути конверсии здесь
   запрещён.

   Это ВТОРОЕ место правила: источник — комплект, `B-66`. Раскатка комплекта
   целиком снимет отсюда обе копии. */
.kb-cards-label {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kb-toc-label {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kb-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border-subtle);
}

.kb-toc li a {
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--text-muted);
  font-size: var(--font-sm);
  text-decoration: none;
}

.kb-toc li a:hover {
  color: var(--text-secondary);
}

/* Указатель текущего места. Цвет отсюда убран: им теперь распоряжается
   прокруточная шкала `toc-read` (см. kb.css) — она показывает пройденное,
   а это правило показывает «вы здесь». Два механизма на одном свойстве
   давали два указателя в разных местах. */
.kb-toc li.is-active a {
  border-left-color: var(--accent);
  font-weight: var(--weight-medium);
  font-weight: var(--weight-medium);
}

/* ---- Prev/next footer nav ---- */

.kb-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.kb-footer-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 260px;
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.kb-footer-nav a:hover {
  color: var(--accent-hover);
}

.kb-footer-nav .dir {
  color: var(--text-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kb-footer-nav .next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 900px) {
  .kb-layout {
    grid-template-columns: 1fr;
  }

  .kb-toc {
    display: none;
  }
}