/* Оболочка публичной витрины базы знаний (/kb, /kb/<id>).
   Сам контент страниц стилизует help/help.css — он заскоуплен под #page-help и
   самодостаточен (свои токены, свой reset). Здесь только то, чего внутри продукта
   нет: шапка сайта, подвал, CTA и обложка индексной страницы.
   Палитра повторяет токены help.css, чтобы шапка не выбивалась из контента. */

:root {
  --kb-bg: #f4f5f8;
  --kb-surface: #ffffff;
  --kb-heading: #161b28;
  --kb-text: #3a4152;
  --kb-muted: #667085;
  --kb-border: #e7e9f0;
  --kb-accent: #4a6cf7;
  --kb-accent-strong: #2e4fd8;
  --kb-accent-soft: #eef2ff;
  --kb-head-h: 60px;
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--kb-bg);
  color: var(--kb-text);
  font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- шапка ---------- */

.kb-head {
  position: sticky; top: 0; z-index: 20;
  height: var(--kb-head-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--kb-border);
}
.kb-head-in {
  max-width: 1240px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
}
.kb-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.kb-logo {
  width: 27px; height: 27px; flex: none; border-radius: 8px;
  background: var(--kb-accent); color: #fff;
  font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: -.4px;
  display: flex; align-items: center; justify-content: center;
}
.kb-wm {
  font-family: 'Golos Text', sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: -.01em; color: var(--kb-heading);
}
.kb-sub {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--kb-muted);
  border-left: 1px solid var(--kb-border); padding-left: 9px; margin-left: 2px;
}
.kb-topnav { display: flex; gap: 4px; margin-left: auto; }
.kb-topnav a {
  font-size: 13.5px; color: var(--kb-muted); text-decoration: none;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
}
.kb-topnav a:hover { color: var(--kb-heading); background: var(--kb-bg); }
.kb-cta {
  flex: none; font-size: 13.5px; font-weight: 600; color: #fff;
  background: var(--kb-accent); text-decoration: none;
  padding: 8px 16px; border-radius: 9px; white-space: nowrap;
}
.kb-cta:hover { background: var(--kb-accent-strong); }

/* Боковое меню базы липнет к низу шапки, а не к верху экрана. */
#page-help .help-nav { top: var(--kb-head-h); max-height: calc(100vh - var(--kb-head-h)); }

/* ---------- индексная страница ---------- */

#page-help .kb-idx-group { margin-top: 26px; }
#page-help .kb-idx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
#page-help .kb-idx-list a {
  display: block; padding: 11px 14px; border-radius: 10px;
  background: var(--kb-surface); border: 1px solid var(--kb-border);
  color: var(--kb-heading); text-decoration: none; font-size: 14px; font-weight: 500;
}
#page-help .kb-idx-list a:hover { border-color: var(--kb-accent); color: var(--kb-accent-strong); }

/* ---------- подвал ---------- */

.kb-foot {
  border-top: 1px solid var(--kb-border);
  background: var(--kb-surface);
  padding: 26px 20px 40px;
}
.kb-foot-in {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline;
  font-size: 13.5px; color: var(--kb-muted);
}
.kb-foot-in b { color: var(--kb-heading); }
.kb-foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.kb-foot-links a { color: var(--kb-accent-strong); text-decoration: none; }
.kb-foot-links a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .kb-head-in { gap: 12px; padding: 0 14px; }
  .kb-sub, .kb-topnav { display: none; }
  .kb-cta { margin-left: auto; }
  .kb-foot-links { margin-left: 0; }
  /* На узком экране меню базы горизонтальное (см. help.css) — липкость не нужна. */
  #page-help .help-nav { top: 0; max-height: none; }
}