/* ══════════════════════════════════════════════════════════════════════════
   A1 — стили раздела документации (/docs/, /en/docs/) поверх Nocturne
   и a1.css. Страницы генерируются tools/build-docs.py; здесь — типографика
   статьи, хлебные крошки и CTA-блок. Цвета, радиусы, шрифты — через
   var(--…); исключение одно и задокументировано у .doc code.
   ══════════════════════════════════════════════════════════════════════ */

/* — шапка: бренд как ссылка на главную — */

a.brand-link {
  color: inherit;
  text-decoration: none;
}

a.brand-link:hover .brand-mark { color: var(--color-accent); }

/* — хлебные крошки — */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 26px 0 0;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.crumbs a { color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.crumbs a:hover { color: var(--color-accent-300); }

/* Разделитель декоративный (aria-hidden), поэтому может быть тише
   нижней ступени текстовой лестницы прозрачностей. */
.crumbs-sep { color: color-mix(in srgb, var(--color-text) 35%, transparent); }

.crumbs-here { color: color-mix(in srgb, var(--color-text) 85%, transparent); }

/* — статья — */

/* Верхний отступ статьи — расстояние от плашки подключения до h1: чуть
   больше, чем зазор крошки→плашка, но без прежней «пропасти». */
.doc {
  max-width: 72ch;
  padding: clamp(24px, 4vh, 38px) 0 clamp(20px, 3vh, 32px);
}

.doc h1 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
}

.doc h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
}

.doc p {
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.doc ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.doc li {
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.doc li::marker { color: var(--color-accent); }

.doc strong { font-weight: 600; }

/* Переход пользователя («Я хочу…») и пример запроса — единственные цитаты
   в каталогах. Акцент — линией; текст абзацного размера берёт accent-300,
   как велит дизайн-система для акцентного текста. */
.doc blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--color-accent);
}

.doc blockquote p {
  margin: 0;
  color: var(--color-accent-300);
}

/* В Nocturne нет моноширинного токена, а инлайн-код в каталогах есть —
   единственный шрифт не из дизайн-системы: системный моностек. */
.doc code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 1.5px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  overflow-wrap: anywhere;
}

/* — таблицы (каталог Яндекс Доставки): вид даёт .table из Nocturne,
     здесь только прокрутка на узких экранах — */

.doc .table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}

.doc .table { min-width: 480px; }

.doc .table td {
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

/* — плашка подключения: вверху страницы, между крошками и статьёй.
     Компактная горизонталь — текст слева, кнопки справа, на узких
     экранах переносится в столбец. — */

.doc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  max-width: 72ch;
  margin: 36px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.doc-cta-text {
  flex: 1 1 320px;
  min-width: 0;
}

/* Заголовок плашки — заголовок только визуально: тегом h2 быть не может,
   потому что стоит до h1 статьи и ломал бы порядок заголовков. */
.doc-cta-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.doc-cta-body {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}