/* Правовые документы: соглашение, политика, оферта.

   До этого страницы отдавались голым фрагментом <article class="legal-text">
   без базового шаблона и без единого правила стиля — класс не был описан
   нигде. Документ, который человек открывает перед тем как доверить сервису
   почту и деньги, выглядел как необработанный текст.

   Оформление то же, что на остальных экранах: подложка, белая карточка,
   рамка в 1px. Ширина колонки ограничена по длине строки, а не по сетке:
   читать сплошной юридический текст во весь монитор невозможно. */

:root {
  --lg-page: #F6F4F9;
  --lg-surface: #FFFFFF;
  --lg-ink: #241E2B;
  --lg-muted: #6D6678;
  --lg-line: #E7E3EE;
  --lg-purple: #8F00FF;
  --lg-purple-dark: #7100C9;
  --lg-tint: #F3EDFD;
  --lg-tint-line: #E3D7F7;
}

body:has(.legal-page) {
  background: var(--lg-page);
}

.legal-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 0 48px;
}

/* ---------- шапка ---------- */
.legal-brand {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px;
  line-height: 0;
  border-radius: 12px;
}

.legal-brand img {
  height: 24px;
  width: auto;
  display: block;
}

.legal-head {
  margin-bottom: 14px;
}

.legal-title {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--lg-ink);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-meta span {
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--lg-tint);
  color: var(--lg-purple-dark);
  font-size: .78rem;
  font-weight: 600;
}

/* ---------- оглавление ---------- */
/* Документ длинный, и приходят в него обычно за одним пунктом — за тем, где
   написано про возврат денег или про удаление аккаунта. */
.legal-toc {
  margin-bottom: 14px;
  border: 1px solid var(--lg-line);
  border-radius: 22px;
  background: var(--lg-surface);
  overflow: hidden;
}

.legal-toc > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  font-size: .93rem;
  font-weight: 700;
  color: var(--lg-ink);
}

.legal-toc > summary::-webkit-details-marker {
  display: none;
}

.legal-toc > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2.2px solid var(--lg-muted);
  border-bottom: 2.2px solid var(--lg-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.legal-toc[open] > summary::after {
  transform: rotate(-135deg);
}

.legal-toc ol {
  margin: 0;
  padding: 0 20px 16px 36px;
  color: var(--lg-muted);
  font-size: .9rem;
  line-height: 1.9;
}

.legal-toc a {
  color: var(--lg-ink);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--lg-purple);
  text-decoration: underline;
}

/* ---------- текст ---------- */
.legal-body {
  padding: 24px 22px;
  border: 1px solid var(--lg-line);
  border-radius: 22px;
  background: var(--lg-surface);
  color: var(--lg-ink);
  font-size: .96rem;
  line-height: 1.65;
}

.legal-body h2 {
  margin: 30px 0 12px;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  /* Отступ сверху съедается у первого заголовка: иначе карточка начинается
     с пустоты */
  scroll-margin-top: 16px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: 20px 0 8px;
  font-size: .96rem;
  font-weight: 700;
  color: var(--lg-ink);
}

.legal-body p {
  margin: 0 0 10px;
}

.legal-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-body li {
  margin-bottom: 6px;
}

.legal-body a {
  color: var(--lg-purple-dark);
  font-weight: 600;
}

.legal-body strong {
  font-weight: 700;
}

/* Определения и врезки, на которые ссылаются из других пунктов */
.legal-note {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--lg-tint-line);
  border-radius: 16px;
  background: var(--lg-tint);
  font-size: .9rem;
  line-height: 1.55;
}

.legal-note p:last-child {
  margin-bottom: 0;
}

/* ---------- таблица целей обработки ---------- */
/* Перечень «цель — данные — основание» читается таблицей, а сплошным текстом
   превращается в кашу, в которой невозможно найти своё основание. */
.legal-table-wrap {
  margin: 0 0 14px;
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .88rem;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lg-line);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: #FAF8FC;
  font-weight: 700;
  white-space: nowrap;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

/* ---------- подвал документа ---------- */
.legal-req {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--lg-line);
  border-radius: 22px;
  background: var(--lg-surface);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--lg-ink);
}

.legal-req p {
  margin: 0 0 4px;
}

.legal-req .legal-req__name {
  font-weight: 700;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.legal-links a {
  padding: 11px 16px;
  border: 1px solid var(--lg-line);
  border-radius: 18px;
  background: var(--lg-surface);
  color: var(--lg-ink);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-links a:hover {
  background: var(--lg-tint);
  border-color: var(--lg-tint-line);
}

@media (min-width: 640px) {
  .legal-body {
    padding: 30px 32px;
  }
}

/* Документ нередко распечатывают или сохраняют в PDF, чтобы приложить к
   обращению. Убираем всё, что на бумаге только мешает. */
@media print {
  body:has(.legal-page) {
    background: #fff;
  }

  .legal-page {
    max-width: none;
    padding: 0;
  }

  .legal-brand,
  .legal-toc,
  .legal-links {
    display: none;
  }

  .legal-body,
  .legal-req {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .legal-body h2 {
    break-after: avoid;
  }
}