/* ============================================================
   АСПЕКТПРОЕКТ · LEGAL
   ------------------------------------------------------------
   Политика и три согласия (с 25.10.2026). Компонент .legal —
   новый (11.08.2026, ТЗ — политика, cookie-баннер и страница 404):
   на сайте не было ни одной страницы с длинным нумерованным
   юридическим текстом, готового приёма под него не существовало.
   Один файл на одну страницу — design-system, раздел «Правило
   разделения»: компонент, использованный второй раз, переезжает
   в base.css, до этого живёт в своём файле.
   ============================================================ */

/* ============================================================
   РАСКЛАДКА ДОКУМЕНТОВ (25.10.2026)
   ------------------------------------------------------------
   Правка заказчика: страница политики «иишная, есть лист 2 зачем-то».
   Сняты метка листа, кикер «Документ» капсом, название капсом
   и оглавление в рамке. Теперь как на сайтах ОМНИКС и WP: четыре
   документа (политика и три согласия) в одной раскладке — слева
   список документов и оператор (партиал dokumenty), справа текст
   колонкой. Выделение пункта своё: синий квадрат и жирное начертание,
   не подложка с чертой (это приём ОМНИКС).
   ============================================================ */
.dok { padding: 8px 0 120px; background: var(--paper); }
.dok__h {
  max-width: 24ch;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.dok__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 760px);
  gap: 88px;
  margin-top: 48px;
}
.dok__side {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.dok__z { margin-bottom: 10px; font-size: 13.5px; color: var(--ink-2); }
.dok__nav { border-top: 1px solid var(--line-strong); }
.dok__nav > li { border-bottom: 1px solid var(--line); }
.dok__nav > li > a {
  position: relative;
  display: block;
  padding: 12px 0 12px 20px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-2);
  transition: color .2s;
}
.dok__nav > li > a::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  transition: background-color .2s, border-color .2s;
}
.dok__nav > li > a:hover { color: var(--ink); }
.dok__nav > li > a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.dok__nav > li > a[aria-current="page"]::before { background: var(--blue); border-color: var(--blue); }

/* Содержание длинного документа — под его пунктом в списке,
   строит common.js из заголовков разделов. Текущий раздел
   отмечен синим. */
.dok__toc { padding: 0 0 12px 20px; }
.dok__toc a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color .2s;
}
.dok__toc a:hover { color: var(--ink); }
.dok__toc a.on { color: var(--blue); }

.dok__op { margin-top: 28px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.dok__op dt { margin-top: 16px; }
.dok__op dt:first-child { margin-top: 0; }
.dok__op dd { margin: 3px 0 0; color: var(--ink); }
.dok__op .dok__op2 { color: var(--ink-2); }
.dok__op a { transition: color .2s; }
.dok__op a:hover { color: var(--blue); }

/* Колонка текста — до 760px, 68–72 знака в строке. */
.legal { max-width: 760px; }

/* overflow-wrap вместо ручных ­ в самом тексте: разрешает браузеру,
   если совсем не влезет, разорвать длинное слово, а не выпустить его
   за край колонки на 360px. Ни одного символа в дословно перенесённом
   тексте это не трогает. */
.legal p,
.legal li { overflow-wrap: break-word; }

/* Вводный абзац документа: у политики — строка «в Обществе…» из её
   шапки, у согласий — формула согласия. */
.legal__lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin-bottom: 44px !important;
}

@media (max-width: 1024px) {
  .dok__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .dok__side { position: static; max-height: none; overflow: visible; order: 2; }
  .dok__toc { display: none; }
}
@media (max-width: 768px) {
  .dok { padding-bottom: 72px; }
}

/* Разделы 1–9. Разделитель между ними — border-top на втором и
   последующих (тот же приём, что у .principles__item + .principles__item:
   первый раздел просто не имеет предыдущего соседа, обходить его
   не нужно). */
.legal__section { padding-top: 40px; margin-top: 40px; scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__section:first-of-type { padding-top: 0; margin-top: 0; }
.legal__section + .legal__section { border-top: 1px solid var(--line); }

.legal__title {
  font-family: var(--head);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: 22px;
}

/* Межстрочный интервал заметно больше, чем у основного текста сайта
   (.about__text и т.п. — 1.55–1.65): по ТЗ юридический текст плотнее
   по смыслу, ему нужно больше воздуха между строками. Цвет — --ink-2,
   как у любого основного текста на сайте (design-system: заголовки —
   --ink, текст — --ink-2), а не отдельная юридическая палитра. */
.legal p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.legal p:last-child { margin-bottom: 0; }
/* Номер пункта в начале абзаца («1.1.») — полужирным тем же способом,
   каким он размечен в исходном тексте, не CSS-counter: нумерация
   юридическая, а не декоративная, значит должна остаться настоящим
   текстом, который можно скопировать и процитировать. */
.legal p strong { color: var(--ink); font-weight: 700; }

/* Вложенные перечисления — обычный .dash-list, тот же маркер, что
   в остальных списках сайта («нейтральное перечисление» из
   design-system 4.1). Межстрочный интервал пунктов увеличен вслед
   за абзацами документа — иначе список внутри плотного текста
   выглядел бы более сжатым, чем окружающий его текст. */
.legal .dash-list { margin: 4px 0 20px; }
.legal .dash-list li { line-height: 1.7; margin-bottom: 10px; }

/* ---------- Открытое решение заказчика — [РЕШИТЬ] ----------
   Новый элемент: на сайте не было текстового плейсхолдера — только
   .placeholder под фото. Взят тот же визуальный приём (пунктирная
   рамка, подложка --paper-2, мелкая подпись Onest 600), но инлайновым
   элементом внутри строки, а не блоком. Текст пометки — дословно из
   исходного файла политики, включая квадратные скобки: это открытое
   решение заказчика, а не наш текст, ни удалять её, ни формулировать
   за заказчика нельзя. */
.legal__flag {
  display: inline;
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  padding: 1px 8px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
}

/* Дата и подпись — под текстом, а не под шапкой документа, как в
   исходном файле: настоящий подписанный документ несёт реквизиты
   утверждения в самом низу, а не сразу после названия (решение
   зафиксировано в ТЗ, раздел 3.1). Текст строки не менялся, изменено
   только её место на странице. */
.legal__sign {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ============================================================
   ПЕЧАТЬ
   ------------------------------------------------------------
   Политику распечатывают и подшивают — это её обычный сценарий
   (ТЗ, раздел 3.1). Шапка, подвал, оглавление и cookie-баннер на
   бумаге бесполезны — оглавление на экране заменяет прокрутку,
   на бумаге эту роль играют номера страниц принтера; шапка и подвал
   несут навигацию, которая на распечатке никуда не ведёт. Колонка
   разворачивается на всю ширину: 70ch — компромисс для экрана между
   читаемостью и использованием места, печатному листу вторая
   причина не нужна. */
@media print {
  #header,
  #footer,
  .crumbs,
  .dok__side,
  .cookiebar {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .dok { padding: 0; background: #fff; }
  .dok__grid { display: block; margin-top: 24px; }
  .legal { max-width: none; }
  .legal__title,
  .legal p strong { color: #000; }
  .legal p,
  .legal__sign { color: #000; }
  .legal a { color: #000; text-decoration: underline; }
  .legal__flag {
    background: #fff;
    border-color: #000;
    color: #000;
  }
}