/* ============================================================
   ДОКУМЕНТЫ — правовые и справочные страницы (11 штук)
   ============================================================
   Разбор аналогов (Stripe Legal, 37signals Policies, Яндекс.Правовые
   документы) дал четыре вывода:

   • ЭТО ДОКУМЕНТ, А НЕ ДИАЛОГ. Раньше каждая страница была плавающим окном
     с крестиком посреди пустого экрана, без шапки и футера: пришедший из
     поиска или по ссылке оказывался в коробке, у которой единственное
     управление — «×» на главную. У всех трёх аналогов документ — обычная
     страница со всей навигацией сайта.
   • ДАТА РЕДАКЦИИ — РЕКВИЗИТ, А НЕ УКРАШЕНИЕ. Stripe пишет «Last modified»
     под заголовком, 37signals — «Last updated» первой строкой, Яндекс держит
     архив всех 18 редакций с 2011 года. Формулировка «продолжение
     использования означает согласие с действующей редакцией» без даты не
     значит ничего.
   • ОГЛАВЛЕНИЕ У ДЛИННОГО ДОКУМЕНТА (есть у всех трёх). У нас документы от 4
     до 16 разделов — оглавление появляется с шестого.
   • СПЛОШНОЙ ТЕКСТ, А НЕ КОЛОДА КАРТОЧЕК. Раньше каждый раздел был отдельной
     плашкой со скруглением и рамкой — восемь карточек подряд вместо
     документа. Ни один правовой документ так не верстают.

   Материал — лист в архиве гильдии: тёмные чернила по бумаге. Для длинного
   чтения это ещё и вернее белого по тёмному.
   ⚠️ Разметка ВНУТРИ `.info-body` не тронута (инвариант 14 ТЗ):
   `js/account-overlay/info.js` тянет этот блок через fetch и показывает в
   оверлее, а его стили завязаны на `.lead` / `.section` / `.meta-date` /
   `.inline-link`. Меняются только оболочка страницы и оформление.
   ============================================================ */

.doc-page {
  padding-bottom: var(--s-20);
}


.doc {
  position: relative;
  /* Поля обязательны: светлое — это ПРЕДМЕТ на поверхности, и под ним должна
     быть видна поверхность. Во всю ширину экрана лист превращается в фон. */
  width: min(760px, calc(100% - var(--s-8)));
  margin: var(--s-8) auto var(--s-0);
  padding: var(--s-10) var(--s-10) var(--s-14);
  clip-path: var(--clip-leaf);
  /* ⚠️ Затемнение к нижнему краю держим в последних процентах листа. Чернила
     на бумаге дают контраст 5.07:1 — норму AA, но на `--leaf-lo` он падает до
     3.5:1, и у длинного документа под это ушло бы несколько экранов текста. */
  background:
    radial-gradient(90% 40% at 22% -4%, var(--leaf-hi) 0%, rgba(246,236,211,0) 60%),
    linear-gradient(180deg, var(--leaf) 0%, var(--leaf) 97%, var(--leaf-lo) 100%);
  filter: var(--sh-leaf);
}

.doc__title {
  margin: var(--s-0) var(--s-0) var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-4);
  font-weight: var(--w-normal);
  line-height: var(--lh-tight);
  color: var(--leaf-ink);
}

/* ── Оглавление ────────────────────────────────────────────────────────
   Появляется только у длинных документов (шесть разделов и больше): на
   документе из четырёх пунктов оглавление длиннее самого текста. */

.doc__toc {
  margin: var(--s-2) var(--s-0);
  padding: var(--s-5) var(--s-0);
  border-block: 1px solid var(--leaf-line);
}
.doc__toc[hidden] { display: none; }
.doc__toc-title {
  margin: var(--s-0) var(--s-0) var(--s-3);
  font-size: var(--t--2);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  line-height: var(--lh-flat);
}
/* ⚠️ Своей нумерации у оглавления НЕТ намеренно: семь из одиннадцати
   документов нумеруют разделы прямо в заголовке («1. Оператор и контакты»), и
   счётчик давал бы «1. 1. Оператор и контакты». Порядок и так виден списком. */
.doc__toc-list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-0);
  padding: var(--s-0);
  list-style: none;
}
.doc__toc-list li {
  display: grid;
  align-items: baseline;
}
.doc__toc-list a {
  /* Подчёркивание обязано обнимать текст, а не тянуться на всю колонку —
     иначе оглавление читается линованной тетрадью. */
  justify-self: start;
  font-size: var(--t-0);
  line-height: var(--lh-snug);
  text-decoration: none;
  border-bottom: 1px solid var(--leaf-edge);
}
.doc__toc-list a:hover { border-bottom-color: var(--leaf-ink); }

/* ── Тело документа ────────────────────────────────────────────────────
   Классы внутри — легаси-контракт с оверлеем, менять нельзя; здесь только
   оформление. */

.info-body {
  display: grid;
  gap: var(--s-8);
}
.info-body .meta-date {
  font-family: var(--font-mono);
  font-size: var(--t--2);
  letter-spacing: 0;
  color: var(--leaf-ink-3);
}
.info-body .lead {
  font-size: var(--t-1);
  line-height: var(--lh-body);
  color: var(--leaf-ink-2);
}
.info-body .section {
  display: grid;
  gap: var(--s-3);
}
/* ⚠️ `display` из правила выше перебивает `[hidden]` UA-таблицы: без гарда
   поиск по FAQ считает совпадения верно, а карточки остаются на месте. */
.info-body .section[hidden] { display: none; }
.info-body .section h2 {
  margin: var(--s-0);
  /* Отбивка заголовка сверху — воздухом, а не рамкой: рамка снова превратит
     раздел в карточку. */
  padding-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-weight: var(--w-normal);
  line-height: var(--lh-snug);
  color: var(--leaf-ink);
  /* Якорь не должен уезжать под липкую шапку сайта. ⚠️ 56px не хватало:
     шапка высотой 74px, и заголовок раздела оказывался под ней. */
  scroll-margin-top: var(--s-20);
}
.info-body .section p,
.info-body .section li {
  margin: var(--s-0);
  font-size: var(--t-0);
  line-height: var(--lh-loose);
  color: var(--leaf-ink-2);
}
.info-body .section ul,
.info-body .section ol {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-0);
  padding-left: var(--s-5);
}
.info-body a {
  text-decoration: none;
  border-bottom: 1px solid var(--leaf-edge);
}
.info-body a:hover { border-bottom-color: var(--leaf-ink); }
.info-body a:focus-visible,
.doc__toc-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────
   Аккордеона нет: 16 ответов по 197 символов в среднем — прятать две строки
   за клик шестнадцать раз и ломать Ctrl+F ради половины экрана незачем.
   GOV.UK прямо запрещает аккордеон для серии вопросов, NN/g для коротких FAQ
   советует обычный список. Из ТЗ остаются группы, поиск и якоря. */

/* ⚠️ `.info-body` — грид с gap var(--s-8): собственные вертикальные отступы у
   детей складываются с ним, и страница расползается пустыми полосами.
   Отбивку группы даёт только кромка сверху. */
.faq-group {
  margin: var(--s-0);
  padding-top: var(--s-5);
  border-top: 1px solid var(--leaf-line);
  font-family: var(--font-label);
  font-size: var(--t--2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-flat);
  color: var(--leaf-ink-3);
  scroll-margin-top: var(--s-20);
}
.faq-group[hidden] { display: none; }
.info-body .faq-group:first-of-type { padding-top: var(--s-0); border-top: 0; }

/* Вопрос — заголовок карточки, а не ссылка: подчёркивание на нём читалось бы
   переходом. Якорь у группы, внутри группы вопросов немного. */
.info-body .section h3 {
  margin: var(--s-0);
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: var(--w-normal);
  line-height: var(--lh-snug);
  color: var(--leaf-ink);
}

.faq-find {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-0);
}
/* Поле поиска — на бумаге, поэтому чернила и рамка тоже бумажные. */
.faq-find input {
  /* Поле во всю ширину листа читается пустой полосой, а не полем ввода. */
  width: min(420px, 100%);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--leaf-ink);
  background: rgba(255,255,255,0.42);
  border: 1px solid var(--leaf-ink-3);
  border-radius: var(--r-0);
  box-shadow: none;
}
.faq-find input::placeholder { color: var(--leaf-ink-3); }
.faq-find input:focus {
  border-color: var(--accent);
  box-shadow: none;
}
.faq-find input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.faq-find__count {
  margin: var(--s-0);
  font-size: var(--t--2);
  letter-spacing: 0;
  color: var(--leaf-ink-3);
}
.faq-find__count[hidden] { display: none; }

/* Последний блок — путь к человеку. Отбит латунной кромкой слева, чтобы не
   потеряться в череде вопросов. */
.faq-help {
  padding-left: var(--s-4);
  border-left: 2px solid var(--leaf-edge);
}

/* Оговорка внутри документа (страница cookie-политики). */
.info-body .note {
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--leaf-edge);
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--leaf-ink-3);
}

/* Категории cookie и таблица лицензий: ширины считает браузер, наша забота —
   чтобы длинная строка не распирала лист. */
.info-body .cookie-cat {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-0);
  border-top: 1px solid var(--leaf-line);
}
.info-body .lic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--leaf-ink-2);
}
.info-body .lic-table th,
.info-body .lic-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--leaf-line);
  vertical-align: top;
}
.info-body .lic-table th {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
}
.info-body .lic-pre {
  overflow-x: auto;
  padding: var(--s-4);
  background: rgba(42,32,21,0.06);
  font-family: var(--font-mono);
  font-size: var(--t--2);
  line-height: var(--lh-body);
  color: var(--leaf-ink-2);
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .doc {
    margin-top: var(--s-8);
    padding: var(--s-10) var(--s-5) var(--s-10);
  }
  .doc__title { font-size: var(--t-3); }
  .info-body { gap: var(--s-6); }
}