/* Книга знаний (public/book/book.js): оглавление слева, статья справа; каждая часть прокручивается сама —
   страница остаётся «в один экран». Цвета — как у шапки хаба и «Git» (тёмная тема в стиле GitHub). */
.kb {
  --kb-bg: #0d1117; --kb-panel: #161b22; --kb-panel2: #1c2128; --kb-hover: #21262d; --kb-line: #30363d; --kb-line2: #3d444d;
  --kb-text: #e6edf3; --kb-dim: #8b949e; --kb-accent: #f78166; --kb-blue: #58a6ff; --kb-green: #3fb950;
  display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 16px;
  grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; box-sizing: border-box; color: var(--kb-text);
  font: 15px/1.6 Inter, system-ui, "Segoe UI", Roboto, sans-serif; font-variant-ligatures: none;
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
/* книга внутри квеста — в цветах и шрифте квеста; код и текст статьи — стилями квеста (.theory) */
.kb.kb-quest {
  --kb-bg: var(--panel); --kb-panel: var(--panel); --kb-panel2: var(--panel2, var(--panel)); --kb-hover: var(--panel2, var(--panel3, var(--panel)));
  --kb-line: var(--line); --kb-line2: var(--line2, var(--line)); --kb-text: var(--text); --kb-dim: var(--muted);
  --kb-accent: var(--accent, var(--gold)); --kb-blue: var(--accent, var(--gold)); font: inherit;
}
.kb-langs[hidden] { display: none; }
.kb-more { flex: none; padding: 7px 10px; border: 1px dashed var(--kb-line2); border-radius: 8px; color: var(--kb-dim); font-size: 13px; text-align: center; text-decoration: none; }
.kb-more:hover { border-style: solid; color: var(--kb-text); }
.kb-st { font-style: normal; font-size: .85em; opacity: .7; }
.kb-st.done { color: var(--ok, #3fb950); opacity: 1; }
.kb-go { margin-left: auto; align-self: center; padding: 4px 12px; border: 1px solid var(--kb-line2); border-radius: 8px; background: none; color: var(--kb-accent); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.kb-go:hover { border-color: var(--kb-accent); }

/* ---------- оглавление ---------- */
.kb-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.kb-langs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--kb-line); border-radius: 10px; background: var(--kb-panel); }
.kb-langs button { flex: 1 1 auto; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--kb-dim); font: 600 13px/1.3 Inter, system-ui, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; }
.kb-langs button:hover { background: var(--kb-hover); color: var(--kb-text); }
.kb-langs button.active { background: var(--kb-hover); color: var(--kb-text); box-shadow: inset 0 -2px 0 var(--kb-accent); }
.kb-q { width: 100%; padding: 8px 12px; border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-bg); color: var(--kb-text); font: inherit; font-size: 14px; outline: 0; }
.kb-q:focus { border-color: var(--kb-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-blue) 25%, transparent); }
.kb-toc { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--kb-line); border-radius: 10px; background: var(--kb-panel); }
.kb-grp { margin: 12px 8px 4px; color: var(--kb-dim); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kb-grp:first-child { margin-top: 4px; }
.kb-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--kb-text); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; }
.kb-item > span { flex: 1; min-width: 0; }
.kb-item:hover { background: var(--kb-hover); }
.kb-item.active { background: var(--kb-hover); box-shadow: inset 2px 0 0 var(--kb-accent); font-weight: 600; }
.kb-n { padding: 0 7px; border-radius: 99px; background: rgba(110, 118, 129, .4); color: var(--kb-text); font-size: 12px; font-style: normal; font-weight: 600; }
.kb-subs { display: flex; flex-direction: column; margin: 2px 0 6px 22px; padding-left: 8px; border-left: 1px solid var(--kb-line); }
.kb-subs button { padding: 3px 8px; border: 0; border-radius: 6px; background: none; color: var(--kb-dim); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; }
.kb-subs button:hover { background: var(--kb-hover); color: var(--kb-text); }
.kb-subs button.on { color: var(--kb-text); box-shadow: inset 2px 0 0 var(--kb-blue); }
.kb-empty { padding: 24px 12px; color: var(--kb-dim); text-align: center; }

/* ---------- статья ---------- */
.kb-main { min-width: 0; min-height: 0; border: 1px solid var(--kb-line); border-radius: 10px; background: var(--kb-bg); overflow: hidden; }
.kb-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 22px clamp(18px, 4vw, 48px) 32px; outline: 0; }
.kb-head, .kb-body, .kb-pager { max-width: 860px; margin-left: auto; margin-right: auto; }
.kb-crumbs { margin: 0 0 4px; color: var(--kb-dim); font-size: 13px; }
.kb-crumbs i { font-style: normal; opacity: .6; }
.kb-head h1 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 26px; line-height: 1.25; font-weight: 700; }
.kb-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 14px; border-bottom: 1px solid var(--kb-line); }
.kb-where-l { color: var(--kb-dim); font-size: 13px; margin-right: 2px; }
.kb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--kb-line2); border-radius: 99px; background: var(--kb-panel); color: var(--kb-text); font: inherit; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.kb-chip:hover { border-color: var(--kb-blue); }

.kb-body { padding-top: 6px; }
.kb-body h4 { margin: 26px 0 8px; padding-top: 4px; font-size: 19px; line-height: 1.3; font-weight: 700; scroll-margin-top: 12px; }
.kb-body p { margin: 0 0 12px; }
.kb-body ul { margin: 0 0 12px; padding-left: 22px; }
.kb-body li { margin: 3px 0; }
/* свёрнутые блоки «?? Заголовок» (ответы «Проверь себя», подсказки) — как в теории квестов (quest-layout.css .theory details.hint) */
.kb-body details.hint { margin: 8px 0 12px; border: 1px solid var(--kb-line2); border-radius: 8px; background: color-mix(in srgb, var(--kb-accent) 6%, transparent); }
.kb-body details.hint > summary { padding: 7px 12px; color: var(--kb-accent); font-weight: 600; cursor: pointer; list-style: none; }
.kb-body details.hint > summary::-webkit-details-marker { display: none; }
.kb-body details.hint > summary::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform .15s; }
.kb-body details.hint[open] > summary::before { transform: rotate(90deg); }
.kb-body details.hint > :not(summary) { margin: 0 12px 10px; }
.kb-body li::marker { color: var(--kb-dim); }
.kb-body b { font-weight: 650; }
.kb:not(.kb-quest) .kb-body b { color: #fff; }
.kb:not(.kb-quest) .kb-body code { padding: 1px 6px; border-radius: 6px; background: rgba(110, 118, 129, .25); font: 13.5px/1.5 "JetBrains Mono", ui-monospace, Consolas, monospace; font-variant-ligatures: none; }
.kb:not(.kb-quest) .kb-body pre.mini { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-panel); overflow: auto; }
.kb:not(.kb-quest) .kb-body pre.mini code { padding: 0; background: none; font-size: 13.5px; white-space: pre; color: var(--kb-text); }
.kb-body a.th-link { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--kb-blue) 14%, transparent); color: inherit; font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--kb-blue) 55%, transparent); }
.kb-body a.th-link:hover { background: color-mix(in srgb, var(--kb-blue) 28%, transparent); }
mark.kb-hit { padding: 0 2px; border-radius: 3px; background: #e3b341; color: #1b1b1b; }
.kb-flash { animation: kb-flash 1.6s ease-out; border-radius: 6px; }
@keyframes kb-flash { 0%, 30% { background: color-mix(in srgb, var(--kb-blue) 28%, transparent); } 100% { background: transparent; } }

/* схемы в статьях (book.js: @git — ветки и коммиты, @flow — путь по шагам, @arch — архитектура, @table — таблица) */
.kb-fig { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-panel); overflow-x: auto; }
.kb-git svg { display: block; max-width: 100%; height: auto; }
.kb-g-lbl { font: 600 13px "JetBrains Mono", ui-monospace, Consolas, monospace; }
.kb-g-id { fill: #0d1117; font: 700 12px Inter, system-ui, sans-serif; }
.kb-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.kb-fl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-fl-st { display: flex; flex-direction: column; gap: 1px; width: 340px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--kb-line2); border-left: 3px solid var(--kb-accent); border-radius: 8px; background: var(--kb-bg); }
.kb-fl-st b { font-size: 14.5px; }
.kb-fl-st span { color: var(--kb-dim); font-size: 13.5px; line-height: 1.4; }
.kb-fl-act { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 14px; color: var(--kb-dim); font-size: 13.5px; }
.kb-fl-act i { color: var(--kb-accent); font-style: normal; font-size: 18px; line-height: 1; }
/* @arch — ряды блоков и групп (узлы, зоны) со стрелками; цвет блока — --t (t-ok, t-warn, …) */
.kb-arch { display: flex; flex-direction: column; gap: 6px; }
.kb-ar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; }
.kb-ar-b { --t: var(--kb-blue); flex: 1 1 0; min-width: 118px; max-width: 340px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 7px 11px; border: 1px solid var(--kb-line2); border-top: 3px solid var(--t); border-radius: 8px; background: color-mix(in srgb, var(--t) 8%, var(--kb-bg)); text-align: center; }
.kb-ar-b b { font-size: 14px; line-height: 1.3; }
.kb-ar-b span { color: var(--kb-dim); font-size: 12.5px; line-height: 1.35; }
.kb-ar-g { --t: var(--kb-line2); flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; border: 1px dashed color-mix(in srgb, var(--t) 75%, var(--kb-line2)); border-radius: 10px; background: color-mix(in srgb, var(--t) 6%, transparent); }
.kb-ar-g > p { margin: 0; color: var(--kb-dim); font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; }
.kb-ar-g .kb-ar-b { min-width: 92px; max-width: none; }
.kb-ar-b.kb-ar-void { visibility: hidden; }
.kb-ar-to { flex: none; align-self: center; color: var(--kb-accent); font-style: normal; font-size: 18px; line-height: 1; }
.kb-ar-arrows { display: flex; justify-content: center; gap: 8px; }
.kb-ar-a { flex: 1 1 0; max-width: 340px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; color: var(--kb-dim); font-size: 13px; line-height: 1.3; }
.kb-ar-a i { color: var(--kb-accent); font-style: normal; font-size: 18px; line-height: 1; }
.kb-arch .t-ok { --t: var(--kb-green); } .kb-arch .t-warn { --t: #d29922; } .kb-arch .t-bad { --t: #f85149; }
.kb-arch .t-blue { --t: var(--kb-blue); } .kb-arch .t-violet { --t: #a371f7; } .kb-arch .t-dim { --t: var(--kb-dim); }
/* @table — таблица (широкая листается внутри рамки) */
.kb-table { padding: 0; }
.kb-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.kb-table th, .kb-table td { padding: 7px 12px; border-bottom: 1px solid var(--kb-line); text-align: left; vertical-align: top; }
.kb-table th { background: var(--kb-panel2); color: var(--kb-dim); font-size: 12.5px; font-weight: 700; }
.kb-table tr:last-child td { border-bottom: 0; }
.kb-table td:first-child { font-weight: 600; }
.kb:not(.kb-quest) .kb-table code { font-size: 12.5px; white-space: nowrap; }
.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--kb-line); }
.kb-pager button { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-panel); color: var(--kb-text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.kb-pager button.next { text-align: right; }
.kb-pager button small { color: var(--kb-dim); font-size: 12px; font-weight: 500; }
.kb-pager button:hover { border-color: var(--kb-blue); }

/* подсветка кода: HTML, CSS (codehl.js), JavaScript (js/jsrun.js), Python (py/pyrun.js), git (book.js); в квесте — цвета квеста */
.kb:not(.kb-quest) .tk-t { color: #7ee787; } .kb:not(.kb-quest) .tk-p { color: #8b949e; } .kb:not(.kb-quest) .tk-a { color: #79c0ff; } .kb:not(.kb-quest) .tk-v { color: #a5d6ff; }
.kb:not(.kb-quest) .tk-c, .kb:not(.kb-quest) .tk-com { color: #8b949e; font-style: italic; } .kb:not(.kb-quest) .tk-d { color: #d2a8ff; } .kb:not(.kb-quest) .tk-e { color: #ffa657; }
.kb:not(.kb-quest) .tk-sel { color: #7ee787; } .kb:not(.kb-quest) .tk-prop { color: #79c0ff; } .kb:not(.kb-quest) .tk-val { color: #e6edf3; } .kb:not(.kb-quest) .tk-num { color: #ffa657; }
.kb:not(.kb-quest) .tk-col { color: #ffa657; } .kb:not(.kb-quest) .tk-fn { color: #d2a8ff; } .kb:not(.kb-quest) .tk-at { color: #ff7b72; } .kb:not(.kb-quest) .tk-str { color: #a5d6ff; } .kb:not(.kb-quest) .tk-imp { color: #ff7b72; }
.kb:not(.kb-quest) .tk-kw { color: #ff7b72; } .kb:not(.kb-quest) .tk-bi { color: #d2a8ff; } .kb:not(.kb-quest) .tk-op { color: #79c0ff; } .kb:not(.kb-quest) .tk-fx { color: #ffa657; }
/* «Кластер» (KGUBook.hl): статусы в выводе kubectl, заголовки таблиц, пропуски <…> в шаблонах и шпаргалках */
.kb:not(.kb-quest) .tk-ok { color: #3fb950; } .kb:not(.kb-quest) .tk-warn { color: #e3b341; } .kb:not(.kb-quest) .tk-bad { color: #ff7b72; }
.kb:not(.kb-quest) .tk-head { color: #8b949e; font-weight: 700; } .kb:not(.kb-quest) .tk-ph { color: #e3b341; font-style: italic; }

/* планшет: оглавление уже; телефон — оглавление сверху, страница листается */
@media (max-width: 1023px) { .kb { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); gap: 12px; } .kb-head h1 { font-size: 22px; } }
@media (max-width: 767px) {
  .kb { display: flex; flex-direction: column; height: auto; }
  .kb-toc { flex: none; max-height: 40vh; }
  .kb-main { overflow: visible; }
  .kb-scroll { height: auto; overflow: visible; padding: 16px; }
  .kb-pager { grid-template-columns: 1fr; }
}