/* ═══════════════════════════════════════════════════════════════════════
   DOCS.CSS — только правовые страницы.
   Шрифты, токены, кнопки, ссылки, шапка и подвал берутся из base.css.
   Раньше этот файл был самостоятельным и объявлял всё заново — в нём
   успела завестись своя палитра, своя шкала отступов и своя шапка, чуть
   отличавшиеся от главной. Здесь остались только длинный текст, врезки,
   оглавление и таблицы: то, чего на главной нет.
   ═══════════════════════════════════════════════════════════════════════ */

.doc { padding-block: calc(var(--nav-h) + var(--s7)) var(--s9); }

.doc__eyebrow { margin-bottom: var(--s3); }
/* Заголовок документа — не заголовок героя. На --fs-h2 (до 60px) «Политика
   конфиденциальности» на телефоне не помещалась в строку и вылезала за
   правый край: в одном слове 18 букв. Своя шкала, помельче. */
.doc h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.04em; margin-block: var(--s2) var(--s3); }
.doc__meta { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-dim); margin-bottom: var(--s6); line-height: 1.4; }

.doc h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-block: var(--s7) var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s6); }
.doc h3 { margin-block: var(--s5) var(--s3); }

.doc p { margin-bottom: var(--s3); }
.doc ul, .doc ol { margin-block: var(--s3) var(--s4); }
.doc li { margin-bottom: var(--s2); line-height: 1.5; }
.doc ul { list-style: none; padding-inline-start: 0; }
.doc ul li { position: relative; padding-inline-start: var(--s5); }
.doc ul li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc ol { padding-inline-start: var(--s5); }
.doc ol li::marker { color: var(--accent); font-weight: 700; font-family: var(--mono); }

/* Ссылка в правовом тексте — цветом текста, акцент в подчёркивании и при
   наведении. Лаймовым текстом ссылка читается как кнопка, а в оферте их
   на страницу по два десятка: получалась россыпь зелёного по всему листу. */
.doc a:not(.btn) {
  color: var(--ink);
  border-bottom: 1px solid var(--accent-line);
  transition: color .18s ease, border-color .18s ease;
}
.doc a:not(.btn):hover, .doc a:not(.btn):focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* ─── врезка и оглавление ─── */
.callout, .toc { padding: var(--s5); margin-block: var(--s5); }
.callout { border-inline-start: 3px solid var(--accent); }
.callout p:last-child, .toc p:last-child { margin-bottom: 0; }
.callout__title, .toc__title {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
  font: 500 var(--fs-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.callout__title::before, .toc__title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.toc ol { columns: 2; column-gap: var(--s6); font-size: 14px; margin: 0; padding-inline-start: 0; list-style: none; }
.toc li { margin-bottom: var(--s2); break-inside: avoid; padding-inline-start: var(--s4); position: relative; }
.toc li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.toc a { color: var(--ink-dim); border-bottom: 0; }
.toc a:hover { color: var(--accent); }

/* ─── таблицы ───
   Таблица — единственное, чему разрешено быть шире колонки: сжатая до
   ширины телефона, она превращается в лесенку из одного слова. Поэтому
   она и только она едет вбок внутри своей обёртки. */
.table-scroll { width: 100%; margin-block: var(--s4); overflow-x: auto; -webkit-overflow-scrolling: touch;
                border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-raised); }
.doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { text-align: start; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.doc tr:last-child th, .doc tr:last-child td { border-bottom: 0; }
.doc thead th { font: 500 var(--fs-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line-strong); }
.doc .req th { width: 34%; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-dim); }

/* Место, куда надо вписать номер из Роскомнадзора, когда он придёт.
   Нарочно заметное: пустое место в правовом документе не должно
   выглядеть как обычный текст. */
.todo { display: inline-block; padding: 4px var(--s2); border: 1px solid var(--accent-line); border-radius: 6px;
        background: var(--accent-soft); color: var(--accent); font: 500 var(--fs-sm) var(--mono); }

@media (max-width: 640px) {
  .toc ol { columns: 1; }

  /* ═══ ТАБЛИЦЫ «КЛЮЧ — ЗНАЧЕНИЕ» НА ТЕЛЕФОНЕ ═══
     На широком экране это таблица в две колонки, и так правильно. На
     экране в 360 пикселей та же таблица не помещается и уезжает вбок —
     а уезжающий вбок договор человек просто не читает.
     Поэтому на телефоне каждая строка становится блоком: подпись сверху,
     значение под ней. Ничего не прячется и не сокращается.
     Трёхколоночные таблицы (с шапкой) оставляем с прокруткой: у них
     значение имеет смысл только рядом с соседними колонками. */
  .table-scroll:has(.req) { overflow-x: visible; }
  .doc .req,
  .doc .req tbody,
  .doc .req tr,
  .doc .req th,
  .doc .req td { display: block; width: auto; min-width: 0; }
  .doc .req tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .doc .req tr:last-child { border-bottom: 0; }
  .doc .req th,
  .doc .req td { padding: 0; border-bottom: 0; }
  .doc .req th { font: 500 var(--fs-xs) var(--mono); letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--s1); }
}

/* ─── печать ───
   Оферту распечатывают и подшивают. На бумаге тёмный фон — это залитый
   чёрным лист, поэтому для печати страница становится обычной белой. */
@media print {
  body { background: #fff; color: #1a1a1a; font-size: 11pt; }
  .nav, .footer, .toc { display: none; }
  .doc { padding: 0; }
  .doc a:not(.btn) { color: #1a1a1a; border-bottom: 0; }
  .doc h1, .doc h2, .doc h3 { color: #1a1a1a; }
  .callout, .table-scroll { background: #f5f6f8; border: 1px solid #d5d8dd; }
  .doc th, .doc td { color: #1a1a1a; border-bottom-color: #d5d8dd; }
  .doc ul li::before { background: #1a1a1a; }
  .doc h2 { break-after: avoid; }
  table, .callout { break-inside: avoid; }
}