/* Кабинет и юридические документы: то, чего нет в библиотеке компонентов.

   ЧТО ЗДЕСЬ НЕ ЛЕЖИТ. Ни одного цвета числом. Раньше в этом файле стояли кирпично-красный
   и полупрозрачная заливка того же тона для полосы ошибки — от Фазы 2, до дизайн-системы.
   Значения намеренно не выписаны здесь даже в пояснении: правило запрещает цвет числом во
   всём файле, комментарий не исключение, и это правильно — иначе через комментарий цвет
   возвращается копипастой. В тёмной теме
   такой цвет остаётся прежним, а фон под ним меняется, и полоса либо выжигает глаз, либо
   исчезает. Теперь цвета берутся из tokens.css, и запрет держит машина: файл убран из
   списка исключений линтера (eslint.config.js, COLOR_SOURCE_FILES), то есть правило
   elbez/no-hex-color действует здесь наравне со всеми.

   ПОЧЕМУ ЭТОТ ЛИСТ ВООБЩЕ ЕСТЬ. Оформление страниц собрано из components.css: карточки,
   поля, кнопки, плашки. Своего осталось ровно два предмета, которых у портала больше
   нигде нет, — типографика длинного юридического текста, приезжающего готовой разметкой
   из showcase/legal/, и простые списки кабинета. Ради них лист подключается только на
   этих страницах (server/views/layout.njk), а не всем подряд.

   Разметка документа приходит извне и своих классов почти не имеет: <h2>, <p>, <ul>, <ol>,
   <li>, <strong>, плюс два класса — .draftline и .hint. Поэтому правила написаны на теги
   внутри .document, а не на классы: класс в чужом тексте не проставишь. */

/* ─── Юридический документ ─────────────────────────────────────────────────────────────── */

.document {
  /* Между абзацами воздуха меньше, чем перед новым разделом: связанное ближе, несвязанное
     дальше (Бирман). Без этого документ читается сплошной серой массой. */
  line-height: var(--lh-body);
}

.document > * + * { margin-top: var(--sp-4); }

.document h2 {
  margin-top: var(--sp-6);
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: var(--w-medium);
}

.document > h2:first-child { margin-top: 0; }

.document p { margin: 0; }

.document ul,
.document ol {
  margin: 0;
  padding-inline-start: var(--sp-5);
}

.document li + li { margin-top: var(--sp-2); }

/* Абзац-предупреждение в самом тексте документа: «Это черновик». Приезжает из источника с
   классом .draftline, и назвать его иначе нельзя — текст правит человек, а не программа. */
.document .draftline {
  padding: var(--sp-4);
  border-inline-start: 4px solid var(--c-brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-brand-tint);
  color: var(--c-brand-tint-ink);
}

.document .hint {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}

/* ─── Списки кабинета ──────────────────────────────────────────────────────────────────── */

/* Согласия и устройства — короткие перечни, а не таблица: столбцов у них два-три, и на
   390 px таблица всё равно свернулась бы в те же строки, только с горизонтальной
   прокруткой. */
.list {
  margin: 0;
  padding-inline-start: var(--sp-5);
}

.list li + li { margin-top: var(--sp-2); }

/* Форма выхода стоит в ряду кнопок и своей высоты добавлять не должна: без этого две
   формы подряд разъезжаются на две строки даже там, где кнопки помещаются рядом. */
.btn-row > form { display: contents; }