/* ─────────────────────────────────────────────────────────────
   Кит-скин страниц глоссария /glossary/<term>/.

   Тот же приём, что у статей и инструментов: разметку 323 терминов
   не трогаем, перекрашиваем то, что уже есть. Семейства .gl-* и
   .cc-* одинаковы во всех терминах, поэтому один файл покрывает
   раздел целиком.

   ⚠️ Подключается ПОСЛЕ pages.css и после инлайновых <style>
   страницы, иначе правила генератора перебивают скин.
   ───────────────────────────────────────────────────────────── */

/* ── 1. Старые переменные на кит-токены (только внутри main:
   шапка и подвал остались легаси и красятся теми же именами) ── */
body.kit main {
  --ivory: var(--surface-2);
  --parchment: var(--surface-2);
  --warm-sand: var(--surface-3);
  --warm-silver: var(--surface-2);
  --border-deep: var(--border);
  --border-cream: var(--border);
  --near-black: var(--ink);
  --charcoal: var(--text);
  --olive: var(--muted);
  --stone: var(--faint);
  --terracotta: var(--brand);
  --terracotta-d: var(--brand-ink);
  --tint-terra: var(--brand-bg);
  --green: var(--ok);
  --serif: var(--font);
  --coral: var(--brand);
  --r-xl: var(--r-lg);
}
body.kit main { background: var(--surface-2); font-family: var(--font); }
body.kit main .wrap { max-width: var(--wrap); }

/* ── 2. Шапка термина ───────────────────────────────────────── */
body.kit .gl-page-head { padding-block: 30px 18px; }
body.kit .gl-page-head .crumb { font-size: 13px; color: var(--faint);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.kit .gl-page-head .crumb a { color: var(--muted); }
body.kit .gl-page-head .crumb a:hover { color: var(--brand); }
body.kit .gl-page-head .crumb .sep { color: var(--faint); }
body.kit .gl-page-head .crumb .here { color: var(--ink); font-weight: 600; }
body.kit .gl-page-head h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08;
  letter-spacing: -.03em; font-weight: 700; color: var(--ink); margin: 16px 0 10px; }
body.kit .gl-page-head p { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }

/* ── 3. Раскладка: текст и боковая колонка ──────────────────── */
body.kit .gl-layout { gap: 48px; padding-bottom: 64px; align-items: start; }
body.kit .gl-body { max-width: var(--measure); }
body.kit .gl-body h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em;
  font-weight: 700; color: var(--ink); margin: 40px 0 14px; }
body.kit .gl-body h3 { font-size: 20px; line-height: 1.3; font-weight: 600;
  color: var(--ink); margin: 28px 0 10px; }
body.kit .gl-body p { font-size: var(--fs-body); line-height: 1.7; color: var(--text);
  margin-bottom: 16px; }
body.kit .gl-body strong, body.kit .gl-body b { color: var(--ink); font-weight: 600; }
body.kit .gl-body ul li, body.kit .gl-body ol li { color: var(--text);
  font-size: var(--fs-body); line-height: 1.65; }
body.kit .gl-body ul li::before { background: var(--brand); }
body.kit .gl-body ol li::marker { color: var(--brand); font-weight: 600; }
body.kit .gl-body a { color: var(--brand-ink);
  text-decoration-color: rgba(59,79,216,.35); text-underline-offset: 3px; }
body.kit .gl-body a:hover { color: var(--brand); text-decoration-color: var(--brand); }
body.kit .gl-body code { background: var(--surface-3); color: var(--ink);
  border-radius: 5px; box-shadow: none; padding: 2px 6px; font-size: .88em; }
body.kit .gl-body pre { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1); }
body.kit .gl-body table { border-collapse: collapse; font-size: var(--fs-sm); }
body.kit .gl-body table th { background: var(--surface-2); color: var(--faint);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
body.kit .gl-body table td, body.kit .gl-body table th { border-color: var(--border); }

/* ── 4. Четырёхцветные карточки: те же четыре роли, но в ките ─
   ⚠️ Цвет тут несёт смысл (четыре стороны разбора), поэтому не
   сводим всё к синему: терракота → бренд, фиолетовый → pick,
   зелёный → ok, песочный → warn. */
body.kit .cc-box { border-radius: var(--r-md); }
body.kit .cc-box.cc--terra { background: var(--brand-bg); border-color: #D5DCFB; }
body.kit .cc-box.cc--purple { background: var(--pick-bg); border-color: #DCCEFB; }
body.kit .cc-box.cc--green { background: var(--ok-bg); border-color: #BFE3CE; }
body.kit .cc-box.cc--sand { background: var(--warn-bg); border-color: #F0DDB8; }
body.kit .cc-box .cc-h.cc-h--terra { color: var(--brand-ink); }
body.kit .cc-box .cc-h.cc-h--purple { color: var(--pick-ink); }
body.kit .cc-box .cc-h.cc-h--green { color: var(--ok-ink); }
body.kit .cc-box .cc-h.cc-h--sand { color: var(--warn-ink); }
body.kit .cc-box .cc-title { color: var(--ink); font-size: 15px; }
body.kit .cc-box p, body.kit .cc-box ul { color: var(--text); font-size: 13px; }

/* ── 5. Пример и врезки ─────────────────────────────────────── */
body.kit .gl-example { background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--brand); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 16px 20px; }
body.kit .gl-example .lbl { color: var(--brand); font-family: var(--font);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
body.kit .gl-example p { color: var(--text); font-size: var(--fs-sm); }
body.kit .gl-body figure figcaption { font-size: 14px; line-height: 1.55;
  color: var(--muted); }

/* ── 6. Боковая колонка ─────────────────────────────────────── */
body.kit .gl-aside { position: sticky; top: 92px; }
body.kit .gl-aside-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 18px 20px; }
body.kit .gl-aside-card + .gl-aside-card { margin-top: 16px; }
body.kit .gl-aside-card h3 { font-size: 15px; color: var(--ink); font-weight: 600;
  margin-bottom: 12px; }
body.kit .gl-aside-card li { font-size: 14px; line-height: 1.5; }
body.kit .gl-aside-card a { color: var(--muted); }
body.kit .gl-aside-card a:hover { color: var(--brand); }
/* ⚠️ Тёмная карточка звала цвет текста через --warm-silver, а он теперь
   светло-серый: на тёмном фоне текст был бы почти невидим. Задаём явно. */
body.kit .gl-aside-card--dark { background: linear-gradient(135deg, #1B1F2E, #2B3AA8);
  border-color: transparent; box-shadow: var(--sh-2); }
body.kit .gl-aside-card--dark h3 { color: #fff; }
body.kit .gl-aside-card--dark p { color: #DDE3FE; font-size: 14px; }
body.kit .gl-aside-card--dark a { color: #fff; }
body.kit .gl-aside-card--dark .btn,
body.kit .gl-aside-card--dark .kbtn { background: #fff; color: var(--brand-ink);
  border-color: #fff; border-radius: var(--r-md); font-weight: 600; }

/* ── 7. Секции под термином и блок вопросов ─────────────────── */
body.kit main > section.section + section.section { margin-top: 26px; }
body.kit main > section.section > h2 { font-size: 30px; line-height: 1.2;
  letter-spacing: -.02em; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
body.kit main { padding-bottom: 72px; }

/* ── 8. Узкие экраны ────────────────────────────────────────── */
@media (max-width: 900px) {
  body.kit .gl-layout { gap: 32px; }
  body.kit .gl-aside { position: static; }
  body.kit .gl-body { max-width: none; }
  body.kit .gl-page-head h1 { font-size: clamp(27px, 7vw, 34px); }
  body.kit .gl-body h2 { font-size: 24px; }
  body.kit main { padding-bottom: 48px; }
  body.kit main > section.section > h2 { font-size: 24px; }
}

/* ── 9. Моноширинные подписи из старого макета ───────────────
   ⚠️ Переменную --mono целиком переопределять нельзя: ей набраны
   блоки кода в примерах. Правим точечно те места, где моноширинный
   шрифт был декоративным: английское название термина, подписи
   под схемами и заголовки карточек в боковой колонке. */
body.kit .gl-page-head .sub,
body.kit .gl-body figcaption,
body.kit .gl-aside-card h3,
body.kit .cc-box .cc-h { font-family: var(--font); }
body.kit .gl-page-head .sub { font-size: 16px; color: var(--muted); letter-spacing: 0; }
body.kit .gl-body figcaption { letter-spacing: 0; }
body.kit .gl-aside-card h3 { letter-spacing: .02em; text-transform: none; font-size: 15px; }
body.kit .cc-box .cc-h { letter-spacing: .04em; font-size: 11.5px; font-weight: 600; }