/* Правовые страницы (/legal/privacy и /legal/terms) — тот же случай, что и
   identity.css: две страницы с общей раскладкой, но без общего компонента,
   поэтому изолированные стили здесь только удвоили бы один и тот же файл. */

.vx-legal{max-width:74ch;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8)}

.vx-legal__head{display:flex;flex-direction:column;gap:var(--space-3)}
.vx-legal__title{font:var(--type-display-l);color:var(--text-1);margin:0}
/* Дата редакции и ссылка на соседний документ: у правового текста это первое,
   что ищут, — какая версия и где второй документ. */
.vx-legal__meta{font:var(--type-small);color:var(--text-3);margin:0}
.vx-legal__meta a{color:var(--text-2)}

/* Врезка «коротко» — пересказ документа человеческим языком. Она не заменяет
   текст ниже и прямо об этом говорит, но без неё документ дочитывают единицы. */
.vx-legal__tldr{padding:var(--pad-card);background:var(--surface-1);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--shadow-1);
  display:flex;flex-direction:column;gap:var(--space-3)}
.vx-legal__tldr h2{font:var(--type-body-strong);color:var(--text-1);margin:0}
.vx-legal__tldr ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.vx-legal__tldr li{font:var(--type-body);color:var(--text-2)}

.vx-legal__section{display:flex;flex-direction:column;gap:var(--space-4)}
.vx-legal__section h2{font:var(--type-display-s);color:var(--text-1);margin:0}
.vx-legal__section h3{font:var(--type-body-strong);color:var(--text-1);margin:var(--space-2) 0 0}
.vx-legal__section p{font:var(--type-body);color:var(--text-2);margin:0}
.vx-legal__section ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.vx-legal__section li{font:var(--type-body);color:var(--text-2)}
.vx-legal__section li strong{color:var(--text-1);font-weight:600}
.vx-legal__section code{font:var(--type-mono);color:var(--text-1);
  padding:1px 5px;background:var(--surface-sunken);border-radius:var(--radius-xs)}

/* Сроки хранения — таблица, а не список: у каждой строки два столбца, и в
   списке они бы слиплись в предложения, по которым ничего не найти взглядом. */
.vx-legal__table{width:100%;border-collapse:collapse}
.vx-legal__table th{font:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-3);text-align:left;
  padding:0 12px 8px 0;border-bottom:1px solid var(--border-1)}
.vx-legal__table td{font:var(--type-small);color:var(--text-2);
  padding:10px 12px 10px 0;border-bottom:1px solid var(--border-1);vertical-align:top}
.vx-legal__table td:first-child{color:var(--text-1);font:var(--type-small-strong);width:38%}

/* Контакт в конце документа — не подпись мелким шрифтом: по этому адресу
   приходят обращения правообладателей, и он должен читаться. */
.vx-legal__contact{padding:var(--space-5);background:var(--surface-sunken);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:var(--space-2)}
.vx-legal__contact p{font:var(--type-body);color:var(--text-2);margin:0}

@media (max-width:640px){
  .vx-legal__title{font:var(--type-display-m)}
  .vx-legal__table td:first-child{width:auto}
}