/* ==========================================================================
   Длинные тексты: обвязка страницы статьи (.article) и типографика
   контента (.prose).

   Разделение намеренное:
     .article — колонка, шапка и подвал страницы;
     .prose   — стилизация ГОЛЫХ тегов внутри контейнера.

   .prose стилизует именно голые теги (h2, p, ul, blockquote…), потому что HTML
   статьи порождает серверный рендерер из документа редактора и классов там нет
   и не будет. Тот же файл подключается в админку на поле редактора — поэтому
   набор WYSIWYG честный, из одного источника.

   Почему не расширили .legal из pages.css: там list-style снят и заменён
   коралловыми квадратами (нумерованный список остался бы без нумерации), нет
   ни h3, ни blockquote, ни hr, ни code/pre, а кегль 15.5px — размер договора,
   а не длинного чтения.

   КОНТРАСТ. Значения --prose-* ниже — для палитры по умолчанию, все проверены
   по WCAG AA (см. src/lib/color.test.ts). Если админ меняет цвета сайта,
   /theme.css переопределяет эти же токены подобранными значениями: акцентный
   цвет почти никогда не проходит порог для текста (коралл на кремовом — 2.77:1
   при норме 4.5:1), поэтому цвет ссылки ПОДБИРАЕТСЯ, а не смешивается на
   фиксированный процент. См. src/lib/color.ts.
   ========================================================================== */

/* Цвета — в :root, а НЕ на .prose. Это принципиально: /theme.css подключается
   после этого файла и переопределяет те же токены в :root подобранными под
   палитру значениями. Объяви мы их на .prose, локальное правило оказалось бы
   специфичнее :root и молча съело бы тему. */
:root {
  /* Приглушённый текст и текстовый коралл — те же самые, что на остальном
     сайте (engpulse-b.css). Раньше здесь стояли свои числа: #647087 против
     #616E85 и #c14336 против #C03020. Одна роль в трёх файлах с тремя
     значениями — и замер контраста давал разные цифры на разных страницах,
     а правка одного места ничего не чинила в двух других. */
  --prose-text: var(--ink);                                    /* 12.88:1 на cream */
  --prose-muted: var(--ink-50, #616E85);                       /*  4.66:1 на cream */
  --prose-link: var(--coral-text, #C03020);                    /*  5.15:1 на cream */
  --prose-link-hover: var(--coral-text-strong, #A52A1C);       /*  6.72:1 на cream */
  /* Линии и подложки — альфой поверх фона: так они корректны на ЛЮБОМ фоне и
     не уводят тон (смешивать тёмно-синий с кремовым в OKLCH нельзя — короткая
     дуга тона идёт через пурпур и даёт грязный фиолетовый).
     Проценты подобраны так, чтобы <hr> и рамка блока кода не пропадали на
     дешёвой матрице: при 14%/5% линия давала лишь 1.30:1 к фону. */
  --prose-line: color-mix(in srgb, var(--ink) 22%, transparent);
  --prose-surface: color-mix(in srgb, var(--ink) 8%, transparent);
  --prose-marker: var(--prose-link);
}

.prose {
  /* Ритм — мобильные значения; ниже растут по min-width. */
  --p-fs: 17px;
  --p-lh: 1.65;
  --p-gap: 22px;
  --h2-fs: 24px;
  --h2-top: 44px;
  --h2-bot: 12px;
  --h3-fs: 19px;
  --h3-top: 32px;
  --h3-bot: 8px;
  --list-gap: 10px;
  --block-gap: 26px;
  --rule-gap: 40px;

  font-size: var(--p-fs);
  line-height: var(--p-lh);
  color: var(--prose-text);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

@media (min-width: 680px) {
  .prose {
    --p-fs: 18px; --p-lh: 1.7; --p-gap: 24px;
    --h2-fs: 28px; --h2-top: 56px; --h2-bot: 14px;
    --h3-fs: 21px; --h3-top: 40px; --h3-bot: 10px;
    --list-gap: 11px; --block-gap: 30px; --rule-gap: 48px;
  }
}

@media (min-width: 1100px) {
  .prose {
    --p-fs: 19px; --p-gap: 26px;
    --h2-fs: 32px; --h2-top: 64px; --h2-bot: 16px;
    --h3-fs: 23px; --h3-top: 44px; --h3-bot: 12px;
    --block-gap: 34px; --rule-gap: 56px;
  }
}

/* --- Вертикальный ритм ---------------------------------------------------- */

.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--p-gap); }
.prose > :first-child { margin-top: 0; }

/* --- Заголовки ------------------------------------------------------------ */

/* Собственные размеры обязательны: глобальный h2 на лендинге — дисплейный
   clamp(30px,4.4vw,56px), в статье он выглядел бы как заголовок секции. */
.prose h2,
.prose h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--prose-text);
  /* Задел под оглавление: id у заголовков рендерер пока не проставляет, но
     шапка .status-head липкая — без этого отступа якорь уедет под неё. */
  scroll-margin-top: 88px;
}
.prose h2 { font-size: var(--h2-fs); line-height: 1.15; margin-top: var(--h2-top); }
.prose h3 { font-size: var(--h3-fs); line-height: 1.25; margin-top: var(--h3-top); letter-spacing: -0.02em; }
/* Отступ «заголовок → следующий блок» задан в КОНЦЕ файла: у него та же
   специфичность, что у правил списка, цитаты и кода, и выиграть он может
   только порядком. См. блок «Заголовок и следующий блок». */

/* --- Списки --------------------------------------------------------------- */

/* Маркеры возвращаем принудительно: в engpulse-b.css ul сброшен глобально. */
/* margin-bottom: 0 обязателен — в engpulse-b.css сброшен только ul, поэтому у
   вложенных ol остаётся UA-отступ снизу (внутри цитаты он не схлопывается). */
.prose ul,
.prose ol { padding-left: 1.35em; margin-top: var(--p-gap); margin-bottom: 0; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
/* Градация по уровням, которую мы иначе затираем: без неё вложенный список
   отличается только отступом и на узком экране читается как плоский. */
.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }
.prose ol ol { list-style: lower-alpha; }
.prose ol ol ol { list-style: lower-roman; }
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol { margin-top: var(--list-gap); }
.prose li { margin-top: var(--list-gap); padding-left: 0.25em; }
.prose li::marker { color: var(--prose-marker); font-weight: 700; }
/* Редактор кладёт внутрь пункта абзац — он не должен добавлять свой отступ. */
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: 0.5em; }

/* --- Цитата --------------------------------------------------------------- */

/* Без заливки: в длинном тексте плашка шумит сильнее, чем линейка. */
.prose blockquote {
  margin: var(--block-gap) 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--prose-marker);
  font-size: 1.06em;
  line-height: 1.55;
  color: var(--prose-text);
}
.prose blockquote p + p { margin-top: 0.7em; }
/* Две цитаты подряд иначе схлопываются в одну с провалом посередине. */
.prose blockquote + blockquote { margin-top: calc(var(--block-gap) * 1.6); }
/* Кегль не должен компаундиться на вложенной цитате (редактор её допускает). */
.prose blockquote blockquote { font-size: 1em; }

/* --- Разделитель ---------------------------------------------------------- */

.prose hr {
  margin: var(--rule-gap) 0;
  border: 0;
  height: 0;
  border-top: 1px solid var(--prose-line);
}

/* --- Ссылки --------------------------------------------------------------- */

/* Различимы НЕ только цветом (WCAG 1.4.1) — подчёркиванием. Линия тонкая и
   полупрозрачная, посажена ниже базовой линии и разрывается под выносными
   элементами: иначе в длинном тексте она рябит и режет «у», «р», «ц». */
.prose a {
  color: var(--prose-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  /* 70%, а не 42%: подчёркивание — ЕДИНСТВЕННЫЙ не-цветовой признак ссылки
     (сам цвет отличается от основного текста лишь на 2.8:1, по WCAG 1.4.1 это
     не различение). При 42% линия давала 1.83:1 к фону и пропадала на светлой
     матрице — то есть признак исчезал вместе с ней. */
  text-decoration-color: color-mix(in srgb, var(--prose-link) 70%, transparent);
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
  overflow-wrap: anywhere;
}
.prose a:hover {
  color: var(--prose-link-hover);
  /* Линия «наливается» вместо смены толщины текста — состояние очевидно, а
     раскладка не дёргается. */
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* Кольцо фокуса — подобранным токеном, а не акцентом.
   Акцент на фоне страницы даёт 2.77:1 при норме 3:1 (WCAG 1.4.11), и на четырёх
   из шести пресетов ещё хуже. Прежняя попытка «добрать тёмным ореолом» не
   работала геометрически: outline с offset рисуется ПОВЕРХ box-shadow, поэтому
   ореол был виден только внутри кольца, а наружная граница оставалась
   неконтрастной. Теперь контраст даёт сам цвет кольца (7.10:1), а тень —
   светлый зазор, отделяющий его от текста. */
.prose a:focus-visible {
  outline: 3px solid var(--prose-link-hover);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--cream);
}
/* В заголовке кегль крупный — тонкая линия там пропадает. */
.prose h2 a,
.prose h3 a { text-decoration-thickness: 2px; text-underline-offset: 0.14em; }

/* --- Начертания ----------------------------------------------------------- */

.prose strong,
.prose b { font-weight: 800; color: var(--prose-text); }
.prose em,
.prose i { font-style: italic; }
.prose s { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--prose-muted); }
/* Зачёркнутая ссылка иначе теряет цвет ссылки и становится неотличима от
   обычного зачёркнутого текста (правило .prose s идёт ниже .prose a). */
.prose a s { color: inherit; }
/* Выделение мышью — на подобранном под палитру цвете текста: белый на акценте
   читается не на всякой теме (на янтарной — 2.15:1). Ограничено статьёй,
   чтобы не менять поведение остального сайта. */
.prose ::selection { background: var(--coral); color: var(--on-accent, #fff); }

/* Подчёркивание в вебе читается как ссылка — разводим их пунктиром и цветом. */
.prose u {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  color: inherit;
}

/* --- Код ------------------------------------------------------------------ */

/* Цвет текста здесь — основной (11.77:1 на подложке). Приглушённый на
   тонированной поверхности даёт лишь 4.12:1 и не проходит AA. */
.prose pre {
  margin: var(--block-gap) 0;
  padding: 16px 18px;
  background: var(--prose-surface);
  border: 1px solid var(--prose-line);
  border-radius: var(--r-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--mono);
  font-size: 0.82em;
  line-height: 1.55;
  color: var(--prose-text);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: var(--prose-surface);
  border: 1px solid var(--prose-line);
  color: var(--prose-text);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Обвязка страницы статьи
   ========================================================================== */

.article { padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 6vw, 80px); }

/* Мера строки: на мобильном во всю ширину контейнера, дальше — ограничиваем
   до 60–72 знаков. В пикселях, а не в ch: в Manrope цифра заметно шире средней
   строчной кириллицы, и 66ch дали бы около 90 знаков. */
.article__inner { max-width: 100%; margin: 0 auto; }
@media (min-width: 680px) { .article__inner { max-width: 620px; } }
@media (min-width: 1100px) { .article__inner { max-width: 680px; } }

.article__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prose-link);
}
.article__title {
  margin: 12px 0 0;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* Заголовок лежит ВНЕ .prose и не наследует её перенос: длинное слово или
     вставленный URL иначе выедет за экран. */
  overflow-wrap: break-word;
}
.article__meta {
  margin-top: 14px;
  font-size: 14px;
  color: var(--prose-muted);
}
.article__body { margin-top: clamp(28px, 4vw, 40px); }

.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-weight: 700;
  color: var(--navy);
}
/* Стрелка подобранным токеном: акцентом она на янтарной теме даёт 1.96:1 и
   практически не видна. */
.article__back::before { content: "←"; color: var(--prose-link); }

/* ==========================================================================
   Заголовок и следующий блок — НАМЕРЕННО в конце файла.

   У `.prose h2 + *` та же специфичность (0,1,1), что у `.prose ul`,
   `.prose blockquote`, `.prose pre` и `.prose hr`. При равной специфичности
   побеждает правило, которое ниже, — поэтому раньше отступ после заголовка
   применялся только к абзацу, а перед списком (самая частая пара в статье)
   заголовок отрывался от него и липнул к предыдущему тексту.
   Перенос этих двух строк вниз — и есть всё исправление; трогать
   специфичность остальных правил не потребовалось.
   ========================================================================== */
.prose h2 + * { margin-top: var(--h2-bot); }
.prose h3 + * { margin-top: var(--h3-bot); }

/* --- Картинки --------------------------------------------------------------
   width/height проставлены в разметке (см. rich-text.ts). height: auto вместе
   с ними даёт браузеру пропорции ДО загрузки файла: место резервируется, и
   текст под картинкой не подпрыгивает, когда она приезжает.
   Те же правила продублированы в frontend/editor.css — иначе предпросмотр в
   редакторе соврёт ровно в вёрстке. */
.prose figure {
  margin: var(--p-gap) 0 0;
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}