/* Стили страницы «База знаний» (lexa.html), scoped под #kbz.
* Дизайн-система «Графит» (2026-10): только токены css/styles.css — строки с тонкими линиями
* вместо коробок, текстовые вкладки, поле-подчёркивание, ридер — плоскость со «светлым листом».
* Модель 2026-10-15 — «список → документ»: шапка по оси, список на всю ширину, документ
* открывается на месте списка (на телефоне — на весь экран).
* Подключается до css/tailwind.css (порядок каскада!).
*/
/* Фикс-оболочка: шапка сайта закреплена, скроллятся только список и текст документа */
#kbz { height: 100dvh; padding-top: calc(var(--head-h) + var(--safe-top) + 22px); padding-bottom: 20px;
display: flex; flex-direction: column; overflow: hidden; }
#kbz .kbz-body { flex: 1; min-height: 0; display: flex; }
#kbz .kbz-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#kbz .kbz-panel { display: none; }
#kbz .kbz-panel.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#kbz .kb-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
/* Шапка раздела — по оси страницы, как главная: заголовок и строка-сводка */
#kbz .kbz-head { text-align: center; margin-bottom: 18px; }
#kbz .kbz-stats { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
#kbz .kbz-msg { color: var(--err); }
/* Строка управления: вкладки · поиск с «Найти» в линии · вид транспорта */
#kbz .kbz-bar { display: flex; align-items: center; gap: 12px 28px; }
#kbz .kbz-tabs { display: flex; gap: 22px; }
#kbz .kbz-tab { position: relative; padding: 8px 0; font-size: 15px; color: var(--ink-2); cursor: pointer; transition: color .2s; }
#kbz .kbz-tab:hover { color: var(--ink); }
#kbz .kbz-tab.on { color: var(--ink); }
#kbz .kbz-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--link); }
#kbz .kbz-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
#kbz .kbz-search:focus-within { border-bottom-color: var(--link); }
#kbz .kbz-search svg { color: var(--ink-2); flex-shrink: 0; }
#kbz .kbz-search input { flex: 1; min-width: 0; padding: 9px 0; background: transparent; border: 0; outline: none;
color: var(--ink); font-size: 15.5px; }
#kbz .kbz-search input::-webkit-search-cancel-button { display: none; }
#kbz .kbz-search input::placeholder { color: var(--ink-2); opacity: .6; }
#kbz .kbz-clear { display: none; color: var(--ink-2); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
#kbz .kbz-clear:hover { color: var(--ink); }
#kbz .kbz-clear.show { display: block; }
#kbz .kbz-go { flex: none; padding: 8px 0 8px 4px; font-size: 14px; cursor: pointer; }
/* Вид транспорта — выпадающий список (решение владельца 2026-10-19: «убери плашки, сделай
просто выпадающий список»; прежде — кнопка-плоскость и панель плоскостей 3×3). Кнопка —
строка с подчёркиванием, в тон поля поиска рядом; список — простые пункты без плашек.
Селекторы с #kbz: preflight Tailwind обнуляет фон кнопок с весом класса. */
#kbz .kbz-mode-pick { position: relative; flex: none; }
#kbz .kbz-mode-btn { display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 2px 11px;
border-bottom: 1px solid var(--line-strong); color: var(--ink); font-size: 15px;
line-height: 1.35; white-space: nowrap; cursor: pointer;
transition: border-color .2s, color .2s; }
#kbz .kbz-mode-btn:hover { border-bottom-color: var(--ink-2); }
#kbz .kbz-mode-btn.on { color: var(--link); border-bottom-color: var(--link); }
#kbz .kbz-mode-btn:focus-visible { outline: 1px solid var(--link); outline-offset: 3px; }
#kbz .kbz-mode-btn .kicker { font-size: 10.5px; }
#kbz .kbz-k-m { display: none; } /* на телефоне подпись короче — кнопка остаётся в строке вкладок */
#kbz .kbz-caret { align-self: center; width: 6px; height: 6px; margin-left: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
#kbz .kbz-mode-btn[aria-expanded="true"] .kbz-caret { transform: translateY(1px) rotate(-135deg); }
#kbz .kbz-mode-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
min-width: 240px; max-width: calc(100vw - 32px); padding: 4px 0;
background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-up); }
#kbz .kbz-mode-panel[hidden] { display: none; }
#kbz .kbz-modes-row { display: grid; }
#kbz .kbz-modes-row .kbz-mode { padding: 7px 14px; text-align: left; white-space: nowrap; color: var(--ink-2);
font-size: 14px; line-height: 1.45; cursor: pointer;
transition: background-color .2s, color .2s; }
#kbz .kbz-modes-row .kbz-mode:hover { background: var(--hover-row); color: var(--ink); }
#kbz .kbz-modes-row .kbz-mode.on { color: var(--link); }
#kbz .kbz-modes-row .kbz-mode:focus-visible { outline: 1px solid var(--link); outline-offset: -2px; }
/* Отбор внутри списка: сферы реестра / виды практики — текстом со счётчиками, по оси */
#kbz .kbz-segs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 14px; }
/* Пункты отбора — контурные, как .tag дизайн-системы: рамка в 1px очерчивает каждый пункт,
выбранный берёт цвет связи. Прежняя черта снизу (как у вкладок) ставила чипы на один
уровень с «Реестр/Практика» — рамка их разводит. Кегль 13px и узкие поля — чтобы весь
набор (11 пунктов со «Справочными») по-прежнему умещался в одну строку на 1440. */
#kbz .kbz-seg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 1.45;
cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s; }
#kbz .kbz-seg .num { font-size: 12px; opacity: .8; }
#kbz .kbz-seg:hover { border-color: var(--line-strong); color: var(--ink); }
#kbz .kbz-seg.on { border-color: var(--link); color: var(--link); }
/* Справочный слой — не из того же набора, что сферы: рамка пунктиром. Прежняя черта слева
ломалась при переносе строки, пунктир держится при любой ширине. */
#kbz .kbz-seg-ref { margin-left: 8px; border-style: dashed; }
/* --- Список: дата и событие · суть акта и реквизиты · сфера (как «Свежие НПА» на главной) --- */
#kbz .kb-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 28px;
padding: 13px 4px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
#kbz a.kb-row:hover { background: var(--hover-row); }
#kbz .kb-head { position: sticky; top: 0; z-index: 1; padding-block: 4px 10px; background: var(--bg); border-bottom-color: var(--line-strong);
color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
/* Подписи колонок — по центру своей колонки (решение владельца 2026-10-19), включая
«СФЕРА» над прижатым вправо столбцом. */
#kbz .kb-head span { text-align: center; }
#kbz .kb-d { display: grid; gap: 2px; color: var(--ink); font-size: 14px; line-height: 1.45; }
#kbz .kb-ev { color: var(--ink-2); font-size: 12.5px; }
#kbz .kb-t { display: grid; gap: 4px; min-width: 0; }
#kbz .kb-n { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#kbz a.kb-row:hover .kb-n, #kbz a.sg-h:hover .kb-n { color: var(--link-h); }
/* Реквизиты акта — содержимое строки, а не служебная подпись: капитель с разрядкой
оставлена только шапке колонок («ДАТА · ДОКУМЕНТ · СФЕРА»), иначе шапка и строки
списка читаются одним слоем. Реквизиты — обычный регистр, кегль и цвет второго
уровня; название акта держит первый уровень начертанием 500. */
#kbz .kb-k { color: var(--ink-2); font-size: 12.5px; font-weight: 400; letter-spacing: 0;
text-transform: none; line-height: 1.4; }
#kbz .kb-s { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#kbz .kb-m { color: var(--ink-2); font-size: 13px; white-space: nowrap; text-align: right; }
#kbz .kb-row.active, #kbz .sg-f.active { background: var(--hover-row); box-shadow: inset 2px 0 0 var(--link); }
#kbz .kb-empty { padding: 18px 4px; color: var(--ink-2); font-size: 14px; }
/* Метки «проект» / «практика» */
#kbz .pr-badge { display: inline-block; margin-right: 8px; padding: 0 6px; border: 1px solid var(--line-strong);
color: var(--ink-2); font-size: 11.5px; line-height: 1.5; vertical-align: 1px; }
#kbz .dr-badge { border-color: var(--st-soon); color: var(--st-soon); }
#kbz .pr-note { margin: -4px 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
/* --- Результаты поиска: группа на документ, фрагменты строками --- */
#kbz .sg { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
#kbz .sg:first-child { border-top: 1px solid var(--line); }
#kbz .sg-h { display: grid; gap: 4px; padding: 14px 4px 8px; }
#kbz .sg-c { color: var(--ink-2); font-size: 12.5px; }
#kbz .sg-f { padding: 8px 4px 8px 22px; cursor: pointer; transition: background-color .2s; }
#kbz .sg-f:hover { background: var(--hover-row); }
#kbz .sg-f .art { margin-bottom: 3px; color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
#kbz .sg-f .sn { max-width: 100ch; color: var(--p-ink); font-size: 14px; line-height: 1.5; }
#kbz mark { background: var(--blue-soft); color: var(--ink); padding: 0 .15em; }
/* --- Ридер: по умолчанию (мобайл) — полноэкранный слой; на десктопе — на месте списка --- */
#kbzReader { position: fixed; inset: 0; z-index: 60; display: none; background: var(--scrim); }
#kbzReader.on { display: flex; justify-content: flex-end; }
#kbzReader .rp { width: min(960px, 100%); height: 100%; display: flex; flex-direction: column;
background: var(--bg); color: var(--p-ink); }
/* Верх: «← Назад» · стрелки (только поиск) · суть акта и реквизиты · «Обсудить» · «Светлый лист» */
#kbzReader .rt { display: flex; align-items: center; gap: 12px 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
#kbz .rback { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
#kbz .rtitle { flex: 1; min-width: 0; display: grid; gap: 3px; }
#kbzReader .rt h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#kbzReader .rt .kicker { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
#kbzReader .rt .kicker:empty { display: none; }
#kbz .rnav { display: inline-flex; align-items: center; gap: 4px; flex: none; }
#kbz .rnav button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line-strong); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer;
transition: border-color .2s, color .2s; }
#kbz .rnav button:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
#kbz .rnav button:disabled { opacity: .3; cursor: default; }
#kbz .rpos { min-width: 50px; text-align: center; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
#kbz .kbz-discuss { flex: none; padding: 4px 10px; border: 1px solid var(--link); color: var(--link); font-size: 12.5px; white-space: nowrap;
transition: background-color .2s, color .2s; }
#kbz .kbz-discuss:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
#kbz .kbz-sheet { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line-strong);
color: var(--ink-2); font-size: 12.5px; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s; }
#kbz .kbz-sheet:hover { border-color: var(--ink-2); color: var(--ink); }
#kbz .kbz-sheet i { width: 11px; height: 11px; border: 1px solid currentColor; background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
#kbzReaderMain { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
#kbzReaderToc { overflow: auto; padding: 22px 16px 22px 18px; border-right: 1px solid var(--line); font-size: 13px; }
#kbzReaderToc .toc-h { margin: 0 0 10px; color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
#kbzReaderToc ul { list-style: none; margin: 0; padding: 0; }
#kbzReaderToc li { padding: 4px 0; color: var(--ink-2); line-height: 1.4; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color .2s; }
#kbzReaderToc li:hover { color: var(--ink); }
/* Текст документа — как .prose в К1 */
#kbzReaderBody { overflow: auto; min-height: 0; padding: 26px clamp(18px, 3vw, 40px) 48px; }
/* Колонка текста — в rem, а не ch: у плашек и карточек кегль меньше, края должны совпадать */
#kbzReaderBody > * { max-width: 46rem; margin-inline: auto; }
#kbzReaderBody { color: var(--p-ink); font-size: 16px; line-height: 1.7; }
#kbzReaderBody p { margin: .7em 0; }
#kbzReaderBody h1, #kbzReaderBody h2, #kbzReaderBody h3, #kbzReaderBody h4 { color: var(--ink); line-height: 1.35; margin: 1.6em 0 .5em; }
/* Заголовки почти в кегль текста: в корпусе целые абзацы бывают размечены как H2 (сетекст-заголовки
из выгрузки), и крупный кегль превращал их в «крик». */
#kbzReaderBody h1, #kbzReaderBody h2 { font-size: 17px; font-weight: 500; }
#kbzReaderBody h3, #kbzReaderBody h4 { font-size: 16px; font-weight: 500; }
#kbzReaderBody ul, #kbzReaderBody ol { padding-left: 1.4em; margin: .6em 0; }
#kbzReaderBody ul { list-style: disc; }
#kbzReaderBody ol { list-style: decimal; }
#kbzReaderBody li + li { margin-top: .3em; }
#kbzReaderBody a { color: var(--link); text-decoration: underline 1px; text-underline-offset: 3px; cursor: pointer; }
#kbzReaderBody a:hover { color: var(--link-h); }
#kbzReaderBody strong, #kbzReaderBody b { color: var(--ink); font-weight: 600; }
/* Таблицы НПА бывают со сложной сеткой — тонкие линии во всех ячейках, а не только под строкой */
#kbzReaderBody table { border-collapse: collapse; max-width: 100%; margin: 1em 0; font-size: 13.5px; line-height: 1.5; border-top: 1px solid var(--ink); }
#kbzReaderBody td, #kbzReaderBody th { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; text-align: left; }
#kbzReaderBody th { color: var(--ink-2); font-weight: 500; }
.kb-anchor { scroll-margin-top: 12px; }
/* Карточка практики («не норма») и «Практика по акту» */
#kbzReaderBody .pr-card { max-width: 46rem; margin: 0 auto 22px; padding: 14px 18px; background: var(--bg-2); border-left: 2px solid var(--st-soon);
font-size: 14px; line-height: 1.55; color: var(--p-ink); }
#kbzReaderBody .pr-card p { margin: .35em 0; }
#kbzReaderBody .pr-card .pr-h { margin: .9em 0 .3em; color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
#kbzReaderBody .pr-card .pr-warn { color: var(--ink); }
#kbzReaderBody .pr-card ul { margin: .3em 0; padding-left: 1.1em; }
#kbzReaderBody .pr-card li { margin: .4em 0; }
#kbzReaderBody .pr-card .pr-m { color: var(--ink-2); font-size: 13px; }
#kbzReaderBody details.pr-card summary { cursor: pointer; color: var(--ink); font-weight: 500; }
/* Гостевой лимит и предупреждение «осталось N документов» */
#kbzReaderBody .kbz-limit { max-width: 520px; margin: 10vh auto; text-align: left; }
#kbzReaderBody .kbz-limit h3 { margin: 0 0 12px; }
#kbzReaderBody .kbz-limit p { margin: 0 0 24px; color: var(--ink-2); }
#kbzReaderBody .kbz-limit a { text-decoration: none; }
#kbzReaderBody .kbz-limit .btn-line--ink { color: var(--ink); }
#kbzReaderBody .kbz-limit .btn-line:hover { color: #fff; }
#kbzReaderBody .kbz-limit .btn-line--ink:hover { color: var(--bg); }
#kbzReaderBody .kbz-note { margin: 0 auto 16px; padding: 10px 14px; background: var(--bg-2); border-left: 2px solid var(--link);
color: var(--p-ink); font-size: 14px; }
/* Пометка «не действует» / «проект» — предупреждение, а не подсказка: цвет другой */
#kbzReaderBody .kbz-note--warn { border-left-color: var(--st-soon); }
#kbzReaderBody .kbz-note--warn b { color: var(--ink); }
@media (max-width: 767px) {
#kbz { padding-top: calc(var(--head-h) + var(--safe-top) + 14px); }
#kbz .kbz-head { margin-bottom: 10px; }
/* Вкладки и вид транспорта — в строку, поиск — под ними во всю ширину (поиск по Enter) */
#kbz .kbz-bar { flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; }
#kbz .kbz-search { flex-basis: 100%; order: 2; }
#kbz .kbz-go { display: none; }
#kbz .kbz-mode-btn { gap: 8px; padding: 8px 2px; }
#kbz .kbz-k-d { display: none; }
#kbz .kbz-k-m { display: inline; }
#kbz .kbz-modes-row .kbz-mode { padding: 10px 14px; white-space: normal; }
/* Отбор — лента с прокруткой вбок до краёв экрана (страница вбок не едет: #kbz overflow:hidden) */
#kbz .kbz-segs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
margin: 12px calc(-1 * var(--gutter)) 4px; padding: 0 var(--gutter); }
#kbz .kbz-segs::-webkit-scrollbar { display: none; }
#kbz .kb-head { display: none; }
#kbz .kb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 0; }
#kbz .kb-d { display: flex; gap: 10px; align-items: baseline; }
#kbz .kb-m { text-align: left; white-space: normal; }
#kbz .kb-m:empty { display: none; }
#kbzReaderMain { grid-template-columns: minmax(0, 1fr); }
#kbzReaderToc { display: none; }
#kbzReader .rt { flex-wrap: wrap; padding: calc(var(--safe-top) + 10px) 16px 12px; }
#kbz .rtitle { order: 3; flex-basis: 100%; }
#kbz .rback { margin-right: auto; }
#kbz .kbz-sheet { padding: 6px 8px; }
#kbz .kbz-sheet .sheet-l { display: none; }
/* Полноэкранный ридер — модал: шапку сайта прячем, чтобы текст НПА не уходил под неё */
body.kb-reading .head { display: none; }
}
@media (min-width: 768px) {
/* Документ — на месте списка, во всю ширину раздела; шапка раздела и отбор уступают ему высоту */
#kbz.reader-open .kbz-head, #kbz.reader-open .kbz-segs, #kbz.reader-open .kbz-main { display: none; }
#kbz.reader-open .kbz-bar { margin-bottom: 16px; }
#kbzReader { position: static; z-index: auto; display: none; background: none; }
#kbz.reader-open #kbzReader { display: block; flex: 1; min-width: 0; }
#kbzReader .rp { width: auto; background: var(--plane-face), var(--plane); box-shadow: var(--shadow); }
#kbzReader .rp.sheet { background: var(--bg); }
}
@media (min-width: 768px) and (max-width: 1100px) {
#kbzReaderMain { grid-template-columns: minmax(0, 1fr); }
#kbzReaderToc { display: none; }
#kbz .kb-row { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 6px 20px; }
}