/* docs.css — типографика длинных юридических документов (T10):
   /offer/ и /privacy-policy/. Подключается только этими двумя страницами
   поверх общего site.css — общий слой (site.css/site.js/_site.php/header/
   footer) не трогаем.

   Старые страницы держали свои переменные (--blue, --muted, --dark, --dark2)
   в инлайновых <style>; перенесённый текст документов местами ссылается на
   них через style="color:var(--muted)" — здесь эти имена алиасятся на
   переменные дизайн-системы (--accent, --text-muted…), чтобы не трогать
   перенесённый HTML текста ни на символ. */

.doc-page {
  --blue: var(--accent);
  --muted: var(--text-muted);
  --dark: var(--text);
  --dark2: var(--text-secondary);
  --border-doc: var(--border);
  /* Затемнённые варианты --warn/--ok только для .callout-title на этой странице —
     базовые токены на .callout--warn/--success::before-фонах дают 2,7:1/3,0:1,
     ниже 4,5:1 (найдено T14 при сквозной проверке контраста juridических страниц).
     Сами --warn/--ok не трогаем — 26 других мест (бейджи, формы, скоринг) их
     используют на других фонах, где контраст уже пройден. */
  --warn-deep: #975B00;
  --ok-deep: #0A7752;
}

/* ── Контейнер документа: 760px, как обычный текстовый столбец сайта ──── */
.doc-container {
  width: min(100% - var(--gutter) * 2, 760px);
  margin-inline: auto;
}

/* ── Шапка документа (эйбрроу/заголовок/подзаголовок/мета) ────────────── */
.doc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--s-4); }
.doc-title { margin-bottom: 6px; }
.doc-subtitle { font-size: 15px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.doc-meta { font-size: 14px; color: var(--text-secondary); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); display: flex; gap: var(--s-5); flex-wrap: wrap; }
.doc-divider { height: 1px; background: var(--border); margin: var(--s-7) 0; }

/* ── Оглавление ─────────────────────────────────────────────────────── */
.doc-toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-7); }
.doc-toc__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--s-3); }
.doc-toc__list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px; padding: 0; margin: 0; }
.doc-toc__list a { display: flex; align-items: baseline; gap: 8px; color: var(--text-secondary); text-decoration: none; padding: 5px 8px; border-radius: 6px; font-size: 14px; line-height: 1.4; transition: background .12s, color .12s; }
.doc-toc__list a:hover { background: var(--accent-soft); color: var(--accent); }
.doc-toc__n { font-size: 12px; font-weight: 700; color: var(--accent); min-width: 20px; flex-shrink: 0; }
@media (min-width: 640px) { .doc-toc__list { grid-template-columns: 1fr 1fr; } }

/* ── Оферта: doc-body (нумерованные пункты) ────────────────────────────── */
.doc-body h2 { font-size: 19px; font-weight: 800; color: var(--text); margin: var(--s-8) 0 var(--s-4); letter-spacing: -.01em; }
.doc-body h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: var(--s-6) 0 var(--s-3); }
.doc-body p { font-size: 15px; color: var(--text); margin-bottom: var(--s-3); line-height: 1.8; }
.doc-clause { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 10px; padding-left: 34px; position: relative; }
.doc-clause .clause-num { position: absolute; left: 0; top: 0; font-weight: 600; color: var(--text-secondary); font-size: 14px; white-space: nowrap; }
.doc-list { margin: 10px 0 var(--s-4) 34px; display: flex; flex-direction: column; gap: 7px; }
.doc-list li { font-size: 15px; color: var(--text); line-height: 1.7; list-style: disc; }
.appendix-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.req-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-top: var(--s-4); font-size: 14px; line-height: 2; }
.req-block strong { color: var(--text); font-weight: 700; }
.doc-link { color: var(--accent); }

/* ── Политика: секции policy-section (уже были в старой странице) ─────── */
.policy-section { margin-bottom: var(--s-8); }
.section-header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); color: var(--text-on-accent); border-radius: 8px; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.policy-section h2 { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.3; }
.policy-section p { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: var(--s-4); }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul, .policy-section ol { margin: 10px 0 var(--s-4) 0; display: flex; flex-direction: column; gap: 8px; padding-left: 0; list-style: none; }
.policy-section ul li, .policy-section ol li { font-size: 15px; color: var(--text); line-height: 1.7; padding-left: 22px; position: relative; }
.policy-section ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.policy-section ol { counter-reset: ol-counter; }
.policy-section ol li { counter-increment: ol-counter; }
.policy-section ol li::before { content: counter(ol-counter) "."; position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 700; color: var(--accent); }

/* ── Таблицы (общие для оферты и политики) ─────────────────────────────── */
.table-wrap { overflow-x: auto; margin: var(--s-4) 0; border-radius: var(--r-md); border: 1px solid var(--border); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap thead { background: var(--text); color: var(--text-on-accent); }
.table-wrap thead th { padding: 11px 14px; font-weight: 600; font-size: 12px; letter-spacing: .04em; text-align: left; }
.table-wrap tbody tr { border-bottom: 1px solid var(--border); }
.table-wrap tbody tr:last-child { border-bottom: none; }
.table-wrap tbody td { padding: 11px 14px; color: var(--text); vertical-align: top; line-height: 1.6; }
.table-wrap tbody td:first-child { font-weight: 600; color: var(--text-secondary); }

/* ── Врезки (callout) политики ──────────────────────────────────────── */
.callout { border-radius: var(--r-md); padding: 16px 20px; margin: var(--s-4) 0; font-size: 14px; line-height: 1.7; display: flex; gap: var(--s-4); align-items: flex-start; }
.callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.callout-body { flex: 1; }
.callout-title { font-weight: 700; margin-bottom: 3px; font-size: 14px; }
.callout--info { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.callout--info .callout-title { color: var(--accent-deep); }
.callout--warn { background: var(--warn-soft); border-left: 3px solid var(--warn); }
.callout--warn .callout-title { color: var(--warn-deep); }
.callout--success { background: var(--ok-soft); border-left: 3px solid var(--ok); }
.callout--success .callout-title { color: var(--ok-deep); }

/* ── Карточка реквизитов политики ──────────────────────────────────────── */
.contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin-top: var(--s-4); }
.contact-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: var(--s-4); }
.contact-row { display: flex; gap: 8px; font-size: 14px; margin-bottom: 10px; align-items: baseline; }
.contact-row:last-child { margin-bottom: 0; }
.contact-label { color: var(--text-secondary); font-weight: 500; min-width: 90px; flex-shrink: 0; }
.contact-val { color: var(--text); font-weight: 600; word-break: break-all; }
.contact-val a { color: var(--accent); text-decoration: none; }
.contact-val a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .doc-meta { flex-direction: column; gap: 6px; }
}