/* ══════════════════════════════════════════════════════════════════════════
   Юридические страницы.

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

   Токены — из tokens.css, общие с лендингом.
   ══════════════════════════════════════════════════════════════════════════ */

/* Шапка и подвал НЕ описываются здесь. Они берутся из лендинга целиком —
   и разметка, и стили (landing.css подключён раньше этого файла). Своё
   описание было именно тем, из-за чего страница выглядела как другой
   сайт: другой значок бренда, другой подвал, другой набор ссылок.

   Правило `.skip` тоже приходит из landing.css.

/* ── Каркас: оглавление + текст ──────────────────────────────────────── */

.legal {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s7);
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
}

.toc {
  position: sticky; top: var(--s5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
  box-shadow: var(--shadow-1);
  max-height: calc(100vh - var(--s7)); overflow-y: auto;
}
.toc-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); font-weight: 600; margin-bottom: var(--s3);
}
/* Список без собственной нумерации: разделы документа уже пронумерованы
   в заголовках, и вторая нумерация читается как «1. 1. Кто обрабатывает». */
.toc ul { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.toc li { margin-bottom: var(--s2); }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.doc { max-width: var(--maxw-text); min-width: 0; }

/* ── Типографика документа ───────────────────────────────────────────── */

.doc h1 {
  font-size: clamp(26px, 4vw, 34px); line-height: 1.18;
  letter-spacing: -.02em; margin: 0 0 var(--s5); font-weight: 700;
}
.doc h2 {
  font-size: 21px; line-height: 1.25; letter-spacing: -.01em;
  margin: var(--s7) 0 var(--s4); font-weight: 600;
  padding-bottom: var(--s2); border-bottom: 1px solid var(--border);
  scroll-margin-top: var(--s5);
}
.doc h3 {
  font-size: 17px; margin: var(--s6) 0 var(--s3); font-weight: 600;
  scroll-margin-top: var(--s5);
}
.doc p { margin: 0 0 var(--s4); }
.doc a { color: var(--accent); }
.doc strong { color: var(--text); font-weight: 600; }

.doc ul, .doc ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.doc li { margin-bottom: var(--s2); }

.doc code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-sunk); padding: .12em .38em; border-radius: var(--r-sm);
}

.doc hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }

.doc blockquote {
  margin: 0 0 var(--s5); padding: var(--s4) var(--s5);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-2); font-size: 15px;
}
.doc blockquote strong { color: var(--text); }

/* Таблицы прокручиваются внутри своей рамки: документ с горизонтальной
   прокруткой всей страницы на телефоне нечитаем. */
.tablewrap {
  overflow-x: auto; margin: 0 0 var(--s5);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.doc th {
  text-align: left; padding: var(--s3) var(--s4); font-weight: 600; font-size: 13px;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.doc td {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  vertical-align: top; color: var(--text-2);
}
.doc tbody tr:last-child td { border-bottom: 0; }

/* ── Узкий экран ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s5); }
  .toc { position: static; max-height: none; }
  .toc ul { columns: 2; column-gap: var(--s5); }
}

@media (max-width: 520px) {
  .toc ul { columns: 1; }
  .legal { padding-left: var(--s4); padding-right: var(--s4); }
}

@media print {
  .toc, .topbar, .foot, .skip { display: none; }
  .legal { display: block; }
  body { background: #fff; font-size: 12px; }
}