/* Раскладка читалки базы знаний (статические страницы knowledge/ на topodrone.ru и topodrone.com).
   🔴 Каркас — оболочка ERP из кита: `ui-shell` + `ui-sidebar` (логотип, поиск, дерево, подвал) + `ui-content`
   (решение заказчика 03.09.2026). Своей шапки у читалки нет, пункты дерева — `ui-navitem` кита.
   🔴 Здесь ТОЛЬКО раскладка и то, чего в ките нет. Все визуальные примитивы — из кита (tokens.css + ui.css),
   который выкладывается рядом: поля `ui-input`, кнопки `ui-btn`, плашки `ui-alert`, таблицы `ui-table`,
   счётчики `ui-count`, код `ui-code`. Ничего из кита здесь не дублируется (как promo.css у лендинга).
   Раскладка относительная: %, fr, clamp(), minmax() — фиксированных ширин нет. */

/* 🔴 Меню читалки ШИРЕ, чем в ERP (правило заказчика 03.09.2026): здесь в нём не короткие названия
   разделов, а названия книг и статей («Установка лазерного сканера TOPODRONE на автомобильное
   крепление»), которые на 250px рвутся на три строки. Токен кита не правим — переопределяем его
   только на страницах knowledge/; мобильный режим кита (меню off-canvas, ширина колонки 0) повторяем
   следом, иначе переопределение перебило бы и его. */
:root {
  /* 🔴 Ширина меню СЧИТАЕТСЯ от окна (правило заказчика 03.09.2026 «текст ровно по центру, меню и
     якоря масштабируй»): меню забирает ровно половину того, что остаётся от полосы текста в 60rem,
     столько же (минус зазор) получает колонка якорей — и середина текста совпадает с серединой
     экрана на любом мониторе. Пределы: уже 300px читать названия книг невозможно, шире 520px меню
     начинает соперничать с текстом. */
  --sidebar-w: clamp(300px, calc((100vw - 60rem - 2 * var(--content-pad)) / 2), 520px);
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
}

.kb-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
}

/* ───────── Сайдбар: то, чего нет в ките ───────── */
/* Логотип — ссылка на главную читалки; кит рисует его как блок, поэтому снимаем оформление ссылки. */
.kb-brand { text-decoration: none; color: inherit; flex: none; }
.kb-brand svg { display: block; flex: none; height: 26px; width: auto; color: var(--text); }
.kb-search { position: relative; }
.kb-search__input { width: 100%; }
.kb-search__input { cursor: pointer; padding-right: 4.5rem; }
.kb-search__kbd { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
/* Подвал сайдбара: слева иконки, справа вход (как в ERP — аватар прижат к правому краю). */
.kb-foot__gap { flex: 1; }
.kb-auth { min-width: 0; }

/* ───────── Дерево разделов ─────────
   Пункт — `ui-navitem` кита (те же отступы, радиус, ховер и активное состояние с градиентной меткой).
   Здесь только вложенность, шеврон и уплотнение под длинные названия книг. */
.kb-nav { display: flex; flex-direction: column; }
.kb-branch__head { width: 100%; }
/* 🔴 Все уровни — одинаковые пункты меню, как в ERP (правило заказчика 03.09.2026): различает их
   только цвет иконки (полка фиолетовая, книга голубая, глава и статья зелёные). Никаких «заголовков
   группы» капслоком: раньше полка и глава выглядели подписями, а не строками меню. */
.kb-item { align-items: flex-start; line-height: 1.35; }
.kb-item__label { min-width: 0; overflow-wrap: anywhere; }
.kb-item__count { margin-left: auto; flex: none; }
.kb-item--article { text-decoration: none; }
/* Свёрнутая ветка прячет содержимое, а не выгружает его: развернули обратно — всё на месте. */
.kb-branch:not(.is-open) > .kb-sub { display: none; }
/* 🔴 Вложенность показывает ЛИНИЯ слева, стрелок нет (правило заказчика 03.09.2026): сворачивает
   клик по самой строке. */
.kb-sub { margin-left: var(--space-4); padding-left: var(--space-2); border-left: 1px solid var(--border); }

/* ───────── Страница: текст и оглавление ─────────
   🔴 Текст стоит РОВНО ПО ЦЕНТРУ ЭКРАНА (правило заказчика 03.09.2026). Условие простое: то, что
   слева (меню), и то, что справа (якоря + зазор), должно занимать одинаковую ширину — тогда середина
   полосы текста совпадает с серединой окна. Поэтому колонка якорей не фиксирована, а СЧИТАЕТСЯ от
   ширины меню и тянется вместе с ним; страницу по ширине не ограничиваем, иначе центр уедет. */
.kb-page {
  --kb-gap: clamp(var(--space-5), 3vw, calc(var(--space-6) * 2));
  --kb-aside-w: calc(var(--sidebar-w) - var(--kb-gap));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kb-aside-w);
  gap: var(--kb-gap);
  align-items: start;
}
/* Оглавления нет (в статье меньше двух заголовков) — колонку всё равно держим: без неё текст
   съехал бы вправо от центра экрана. */
.kb-main { min-width: 0; }
/* Полоса текста статьи. 60rem ≈ 960px: заказчик 03.09.2026 — «сделаем статьи пошире». */
.kb-main__in { max-width: 60rem; margin-inline: auto; }
.kb-aside { position: sticky; top: 0; min-width: 0; }

@media (max-width: 1200px) {
  .kb-page { grid-template-columns: minmax(0, 1fr); }
  .kb-aside { display: none; }
}

/* ───────── Заголовки и общий текст ───────── */
.kb-h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin: 0 0 var(--space-4); }
.kb-h2 { font-size: clamp(17px, 2vw, 20px); margin: var(--space-6) 0 var(--space-3); }
.kb-lead { color: var(--muted); margin: 0 0 var(--space-5); }
/* Крошки — `ui-crumbs` кита; здесь только отступ до заголовка. */
.kb-crumbs { margin-bottom: var(--space-4); }

/* Шапка статьи (редизайн 29.09.2026): НЕ закреплена — текст получает весь экран; где ты, показывают
   оглавление справа и полоска прочитанного сверху. Действия (ссылка, PDF) — справа в строке с датой. */
.kb-article__head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
.kb-article__title { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
.kb-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--muted); font-size: 13px; }
.kb-article__fact { display: inline-flex; align-items: center; gap: 6px; }
.kb-article__acts { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.kb-article__acts .ui-btn svg { margin-inline-end: 6px; }
.kb-copylink.is-done, .kb-anchor.is-done, .ui-pre__copy.is-done { color: var(--success); }
.kb-article__body :is(h2, h3, h4) { scroll-margin-top: var(--space-5); }
/* Полоса прокрутки колонки контента резервируется с обеих сторон: иначе текст смещается
   от центра экрана на её ширину. */
.ui-content { scrollbar-gutter: stable both-edges; }
.kb-article__body { font-size: 15.5px; }
/* 🔴 Интервалы между блоками статьи. Обнулять поля отдельным правилом `p { margin: 0 }` нельзя:
   у него специфичность выше, чем у `> * + *`, и абзацы слипаются в сплошное полотно. */
.kb-article__body > * { margin: 0; }
.kb-article__body > * + * { margin-top: var(--space-5); }
.kb-article__body a { color: var(--accent); }
/* Цвет и фон текста — имя из палитры кита (Р2, 29.09.2026): токен темы, читается в обеих темах. */
.kb-c--red { color: var(--ic-red); } .kb-c--orange { color: var(--ic-orange); } .kb-c--amber { color: var(--ic-amber); }
.kb-c--green { color: var(--ic-green); } .kb-c--blue { color: var(--ic-blue); } .kb-c--violet { color: var(--ic-violet); }
.kb-c--gray { color: var(--ic-slate); }
.kb-bg { border-radius: 3px; padding: 0 2px; }
.kb-bg--red { background: color-mix(in srgb, var(--ic-red) 28%, transparent); }
.kb-bg--orange { background: color-mix(in srgb, var(--ic-orange) 28%, transparent); }
.kb-bg--amber { background: color-mix(in srgb, var(--ic-amber) 30%, transparent); }
.kb-bg--green { background: color-mix(in srgb, var(--ic-green) 26%, transparent); }
.kb-bg--blue { background: color-mix(in srgb, var(--ic-blue) 26%, transparent); }
.kb-bg--violet { background: color-mix(in srgb, var(--ic-violet) 26%, transparent); }
.kb-bg--gray { background: color-mix(in srgb, var(--ic-slate) 26%, transparent); }
/* Подчёркивание ссылок при наведении (правило кита `a:hover`) в читалке не нужно — правило
   заказчика 02.09.2026: цвета и подсветки достаточно, подчёркивание только мельтешит. */
.kb-body a:hover, .kb-body a:focus { text-decoration: none; }
.kb-article__body a:hover { color: var(--text); }
.kb-h { scroll-margin-top: var(--space-5); margin: var(--space-6) 0 var(--space-3); line-height: 1.3; position: relative; }
/* «#» у заголовка — `ui-iconbtn` кита, ужатая до высоты строки и видимая при наведении на заголовок. */
.kb-anchor { display: inline-grid; width: 1.4em; height: 1.4em; margin-inline-start: var(--space-2); vertical-align: middle; opacity: 0; }
.kb-h:hover .kb-anchor, .kb-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .kb-anchor { opacity: .6; } }
h2.kb-h { font-size: clamp(19px, 2.2vw, 23px); padding-top: var(--space-2); border-top: 1px solid var(--border); }
h3.kb-h { font-size: clamp(17px, 2vw, 19px); }
h4.kb-h { font-size: 16px; }
.kb-article__body ul, .kb-article__body ol { margin: 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: 6px; }
/* Чек-лист: отметка — квадрат `ui-check__box` кита в строке текста. Цитата, код, разделитель — `ui-quote`,
   `ui-pre`, `ui-divider` кита. */
.kb-list--check { list-style: none; padding-inline-start: 0; }
.kb-list--check .ui-check__box { display: inline-grid; vertical-align: -0.2em; margin-inline-end: var(--space-2); }

/* ───────── Медиа ───────── */
.kb-figure { margin: 0; }
/* Снимок экрана — самостоятельный кусок инструкции: воздуха вокруг него больше, чем между абзацами. */
.kb-article__body > .kb-figure { margin-top: var(--space-6); }
.kb-article__body > .kb-figure + .kb-figure { margin-top: var(--space-5); }
.kb-article__body > .kb-figure + p, .kb-article__body > .kb-figure + ul, .kb-article__body > .kb-figure + ol { margin-top: var(--space-6); }
.kb-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--photo-bg); }
/* Снимок увеличивается по клику (Р5): курсор-лупа подсказывает, что так можно. */
.kb-figure img, .kb-gallery__item img, .kb-article__body td img { cursor: zoom-in; }
/* Подложка — `ui-overlay` кита (без размытия, решение 0090); здесь только раскладка снимка. */
.kb-zoom { display: grid; place-items: center; padding: clamp(8px, 3vw, 40px); cursor: zoom-out; }
.kb-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-pop); background: var(--photo-bg); }
.kb-figure figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--muted); }
.kb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.kb-gallery__item { margin: 0; }
.kb-gallery__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--photo-bg); border-radius: var(--radius); }
.kb-video { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.kb-video iframe, .kb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kb-tablewrap .ui-table { width: 100%; }
/* Вложение — чип `ui-attchip` кита; в полосе текста он чуть крупнее, чем в карточках ERP. */
.kb-file .ui-attchip { font-size: 13.5px; padding: 5px 4px 5px 6px; }
.kb-file .ui-attchip__act { margin-block: -5px; }
/* Карточка товара в статье: снимок квадратом (фото каталога 1:1), справа название, артикул, ссылка. */
.kb-product { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); min-width: 0; }
.kb-product img { flex: none; width: clamp(4rem, 22%, 8rem); aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius-sm); background: var(--photo-bg); }
.kb-product__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.kb-product__name { font-weight: 600; }

/* ───────── Инструкции: шаги, вкладки, аккордеон, колонки ───────── */
.kb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.kb-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.kb-step__body > * + * { margin-top: var(--space-3); }
.kb-step__title { font-weight: 600; }
/* Выделения — `ui-alert--prose` кита (текст обычного размера, кромка слева); здесь только интервалы. */
.kb-callout .ui-alert__msg > * + * { margin-top: var(--space-3); }
.kb-article__body > .kb-callout + .kb-callout { margin-top: var(--space-2); }
/* Подряд идущие выделения одного вида (пункты «Запрещается…») — одной группой: общая рамка, тонкий
   разделитель, без зазоров. */
.kb-article__body > .ui-alert--danger + .ui-alert--danger,
.kb-article__body > .ui-alert--warning + .ui-alert--warning,
.kb-article__body > .ui-alert--success + .ui-alert--success,
.kb-article__body > .ui-alert--info + .ui-alert--info { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.kb-article__body > .ui-alert--danger:has(+ .ui-alert--danger),
.kb-article__body > .ui-alert--warning:has(+ .ui-alert--warning),
.kb-article__body > .ui-alert--success:has(+ .ui-alert--success),
.kb-article__body > .ui-alert--info:has(+ .ui-alert--info) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Поля абзацев по умолчанию внутри составных блоков снимаются (нулевая специфичность :where), интервалы
   задают правила `> * + *` — иначе у каждого выделения и шага снизу лишняя пустая строка. */
:where(.kb-callout .ui-alert__msg, .kb-step__body, .kb-tabs__pane, .kb-acc__body, .kb-cols__col, .kb-snippet) > * { margin: 0; }
/* Вкладки — `ui-tabs` кита (у ленты кита запас −8px под свечение — сохраняем, добавляем отступ снизу). */
.kb-tabs__head { margin-bottom: var(--space-2); }
.kb-tabs__pane { display: none; }
.kb-tabs__pane.is-active { display: block; }
.kb-tabs__pane > * + * { margin-top: var(--space-4); }
/* Раскрывающиеся блоки — `ui-acc ui-acc--prose` кита; здесь только интервалы содержимого. */
.kb-acc__body > * + * { margin-top: var(--space-3); }
.kb-cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.kb-cols__col > * + * { margin-top: var(--space-3); }
.kb-snippet > * + * { margin-top: var(--space-4); }
.kb-legacy { overflow-x: auto; }
.kb-legacy img { max-width: 100%; height: auto; }
.kb-legacy table { max-width: 100%; }

/* ───────── Оглавление статьи (правая колонка): `ui-toc` кита, «Наверх» — `ui-btn--subtle` ───────── */
.kb-toc__top { margin-top: var(--space-4); }
.kb-aside { top: var(--space-5); max-height: calc(100dvh - 2 * var(--space-5)); overflow-y: auto; }

/* ───────── «Помогла ли статья» и соседние статьи ───────── */
.kb-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: calc(var(--space-6) * 1.5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.kb-helpful__q { color: var(--muted); font-size: 14px; }
.kb-near { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
/* Соседние статьи — карточки кита с подсветкой при наведении (`ui-card ui-hoverable`). */
.kb-near__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; min-width: 0; }
.kb-near__item span { font-size: 12px; color: var(--muted); }
.kb-near__item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.kb-near__item--next { text-align: right; }

/* ───────── Главная и оглавление книги (редизайн 29.09.2026) ───────── */
.kb-herohome { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) 0 var(--space-6); }
.kb-herohome__t { font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
.kb-herohome__sub { color: var(--muted); font-size: clamp(15px, 1.6vw, 17px); margin: 0; }
/* Поиск на главной — поле кита (`ui-inputwrap` + `ui-input`), по фокусу открывает палитру. */
.kb-herohome__search { width: min(40rem, 100%); margin-top: var(--space-3); }
.kb-shelf + .kb-shelf { margin-top: var(--space-6); }
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--space-3); }
/* Книга — карточка кита (`ui-card ui-hoverable`, подсветка голубым — цвет книги в меню) с плиткой `ui-icontile`. */
.kb-card { --st: var(--ic-sky); display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); color: var(--text); text-decoration: none; }
.kb-tile--book { --tile-c: var(--ic-sky); }
.kb-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-card__t { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.kb-card__m { color: var(--muted); font-size: 12.5px; }
.kb-recent__row { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; padding: var(--space-3) var(--space-4); }
.kb-recent__ic { flex: none; color: var(--ic-amber); display: grid; }
.kb-recent__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kb-recent__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-recent__b { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-recent__d { flex: none; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.kb-bookhead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.kb-bookhead__text { flex: 1 1 18rem; min-width: 0; }
.kb-bookhead .kb-h1 { margin: 0; }
.kb-bookhead__meta { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.kb-start { flex: none; gap: 6px; text-decoration: none; }
.kb-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.kb-chapter { min-width: 0; }
.kb-chapter__t { display: flex; align-items: center; gap: var(--space-2); font-size: 15.5px; margin: 0 0 var(--space-3); }
.kb-chapter__t .ui-count { margin-inline-start: auto; }
.kb-chapter__ic { display: grid; color: var(--ic-lime); flex: none; }
.kb-index { margin: 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--muted); font-size: 14px; }
.kb-index a { color: var(--text); text-decoration: none; }
.kb-index a:hover { color: var(--accent); }

/* ───────── Поиск: страница результатов ───────── */
.kb-hero { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.kb-hero__input { flex: 1 1 min(420px, 100%); }
/* Результаты — список кита (`ui-list ui-list--hover`), найденное — `ui-mark`. */
.kb-results__item { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.kb-results__t { font-weight: 600; }
.kb-results__p { color: var(--muted); font-size: 13.5px; }
.kb-results__crumb { color: var(--muted); font-size: 12.5px; }

/* ───────── Подвал страницы (внутри прокручиваемой колонки текста) ───────── */
.kb-foot { border-top: 1px solid var(--border); margin-top: calc(var(--space-6) * 2); }
.kb-foot__in {
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  max-width: 60rem; padding: var(--space-5) 0;
  color: var(--muted); font-size: 13px;
}
.kb-foot a { color: var(--muted); }

/* ───────── Мобильный каркас: полоска с бургером только на узком экране (как в ERP) ───────── */
.ui-mtop { display: none; }
@media (max-width: 1024px) {
  .ui-mtop { display: flex; }
  /* Сайдбар off-canvas: ширину и выезд даёт кит (`ui-sidebar--open`), здесь только подложка. */
  .ui-navscrim[hidden] { display: none; }
}

/* ───────── Окно читателя (вход по коду, отзыв) ─────────
   Окно целиком из кита: ui-overlay + ui-modal (шапка с крестиком, тело, подвал), поля ui-field/ui-input,
   флажок ui-check, кнопки ui-btn--md — как Modal в ERP. Здесь только раскладка тела. */
.kb-dialog__body { display: flex; flex-direction: column; gap: var(--space-4); }
.kb-dialog__msg { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* Вход читателя (P3): почта → код; новому — имя, контакты и согласие 152-ФЗ. */
.ui-modal.kb-signin { width: min(32rem, calc(100vw - 32px)); }
.kb-signin__step, .kb-signin__new { display: flex; flex-direction: column; gap: var(--space-4); }
.kb-signin__step[hidden], .kb-signin__new[hidden], .kb-signin__err[hidden] { display: none; }
.kb-signin__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.kb-signin__code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.kb-signin__consent { align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; user-select: auto; }
.kb-signin__consent .ui-check__box { margin-top: 1px; }
.kb-signin__consent a, .kb-signin__fine a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.kb-signin__fine { font-size: 11.5px; color: var(--dim); line-height: 1.5; padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* ───────── Палитра поиска (Ctrl+K, «/») ─────────
   Окно кита: `ui-overlay` + `ui-modal` (шапка — поле `ui-input`, тело — `ui-list`, подвал — подсказки `ui-kbd`).
   Своё — только место: окно прижато к верху, чтобы при наборе список рос вниз, а поле не прыгало. */
.kb-pal[hidden] { display: none; }
.ui-modal.kb-pal__box { top: clamp(12px, 10vh, 120px); transform: translateX(-50%); animation: ui-fade .15s; width: min(42rem, calc(100vw - 32px)); max-height: min(80vh, 44rem); }
.kb-pal__head { gap: var(--space-3); }
.kb-pal__field { flex: 1; min-width: 0; }
.kb-pal__field .ui-input::-webkit-search-cancel-button { display: none; }
.kb-pal__list { padding: var(--space-2); }
.kb-pal__row { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text); text-decoration: none; }
.kb-pal__ic { flex: none; color: var(--ic-amber); padding-top: 3px; display: grid; }
.kb-pal__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kb-pal__body b { font-weight: 600; line-height: 1.35; }
.kb-pal__crumb { color: var(--muted); font-size: 12px; }
.kb-pal__body small { color: var(--muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-pal__foot { justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); color: var(--muted); font-size: 12px; }
.kb-pal__foot span { display: inline-flex; align-items: center; gap: 4px; }
.kb-pal__all { margin-inline-start: auto; }
.kb-pal-open, .kb-pal-open body { overflow: hidden; }
@media (max-width: 700px) { .ui-modal.kb-pal__box { top: var(--space-2); } .kb-pal__foot span { display: none; } }

/* Полоска прочитанного — `ui-progress--bare` кита у верхнего края колонки текста. */
.ui-main { position: relative; }
.kb-progress { position: absolute; inset-inline: 0; top: 0; z-index: 8; pointer-events: none; }