/* Оформление юридических страниц. Документы открываются в обычном браузере, а
   не в окне мини-аппа: маме они приходят ссылкой из чата, проверяющему и
   эквайеру – адресом.

   Палитра та же, «Лаванда», но ЦИФРАМИ, а не переменными темы: `theme.css`
   собирается Vite в бандл приложения и до статической страницы не доезжает, а
   тянуть его сюда значило бы тянуть вместе со всей раскладкой экранов. Значения
   – hex-двойники токенов из `src/app/theme.css`, посчитанные из тех же oklch
   (`--bg` совпал с записанным там двойником #15161a, по нему и сверялись).
   Правя палитру приложения, правьте и здесь: тест `legal.test.ts` следит за
   тем, что файл на месте и ни на какой чужой домен не ссылается, но совпадение
   оттенков сторожить нечем.

   Вид – артборды «Веб · Документ» и «Веб · Реквизиты» канвы `Cabinet
   Subscription` (план 33): узкая колонка, заголовок 26–28 px весом 500, заголовки
   разделов 18 px, текст 16 px с интервалом 1,6, реквизиты столбиком «название над
   значением». Страница оплаты (`pay.html`, план 6) берёт отсюда `.doc`, `.draft`
   и `.doc__nav`; их правила остаются на месте.

   Шрифт – свой, из /fonts, теми же файлами, что у приложения. Ссылок на
   fonts.googleapis.com быть не может: сторонний домен у российского провайдера
   не откроется. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px 20px 56px;
  background: #15161a;
  /* Основной текст документа чуть приглушён относительно заголовков: длинный
     текст в полную яркость на тёмном фоне утомляет. */
  color: #d6d7dd;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Колонка по макету: 560 px, по центру. Шире читать подряд договор тяжело. */
.doc {
  max-width: 560px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 6px;
  color: #eaebf1;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h2 {
  margin: 28px 0 12px;
  color: #eaebf1;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}

p,
li {
  margin: 12px 0;
}

ol,
ul {
  margin: 12px 0;
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

a {
  color: #bcb6ee;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

@media (min-width: 640px) {
  body {
    padding-top: 40px;
  }

  h1 {
    font-size: 28px;
  }
}

/* Дата редакции под заголовком. */
.doc__meta {
  margin: 0 0 18px;
  color: #90929a;
  font-size: 13px;
  line-height: 1.5;
}

/* Подзаголовок страницы реквизитов и пояснение под таблицей. */
.doc__lead {
  margin: 0 0 22px;
  color: #bcbdc4;
  font-size: 15px;
  line-height: 1.5;
}

.doc__note {
  margin: 22px 0 0;
  color: #90929a;
  font-size: 13px;
  line-height: 1.5;
}

/* Заглушка реквизита. Видна глазом намеренно: если скрипт подстановки не
   доехал или ключ в разметке не совпал с ключом в `requisites.js`, реквизит
   обязан читаться как дыра, а не как готовый текст. Когда значение подставлено,
   скрипт класс снимает, и реквизит выглядит обычным текстом. */
.req {
  padding: 0 4px;
  border-bottom: 1px dashed #e0b771;
  color: #e0b771;
  font-weight: 600;
  white-space: nowrap;
}

/* Полоса «страница готовится». Юридическим документам она больше не нужна,
   они опубликованы целиком; правило остаётся для `pay.html`, пока страницу
   оплаты не заменит план 6. */
.draft {
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid #e0b771;
  border-radius: 12px;
  background: #212126;
  color: #e0b771;
  font-size: 14px;
}

/* Реквизиты столбиком: название над значением, строки разделены линией. Так же
   оформлен раздел 14 оферты. */
.kv {
  margin: 16px 0;
}

.kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-top: 1px solid #28282e;
}

.kv dt {
  color: #90929a;
  font-size: 13px;
  line-height: 1.5;
}

.kv dd {
  margin: 0;
  color: #eaebf1;
  font-size: 15px;
  line-height: 1.4;
  /* Номера счетов и почта длиннее экрана не бывают, но длинная ссылка не
     должна раздвигать страницу. */
  overflow-wrap: anywhere;
}

/* Цитата с формулой возврата (пункт 9.2 оферты). */
blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid #bcb6ee;
  color: #eaebf1;
}

/* Таблицы документов. Широкая таблица прокручивается внутри своей обёртки, а не
   раздвигает страницу. */
.table-wrap {
  margin: 16px 0;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.table th,
.table td {
  padding: 10px 12px 10px 0;
  border-top: 1px solid #28282e;
  text-align: left;
  vertical-align: top;
}

.table th {
  color: #90929a;
  font-size: 13px;
  font-weight: 400;
}

/* Таблица с четырьмя столбцами (политика, раздел 3) на телефоне не читается ни
   в прокрутке, ни сжатой: каждая строка становится карточкой, а название
   столбца встаёт над значением, как в реквизитах. */
@media (max-width: 639px) {
  .table--stack thead {
    display: none;
  }

  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
  }

  .table--stack tr {
    padding: 8px 0;
    border-top: 1px solid #28282e;
  }

  .table--stack td {
    padding: 6px 0;
    border-top: 0;
  }

  .table--stack td::before {
    display: block;
    color: #90929a;
    content: attr(data-label);
    font-size: 13px;
  }
}

/* Ссылки на соседние документы внизу. */
.doc__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #28282e;
  color: #90929a;
  font-size: 13px;
}

/* Текущая страница в списке остаётся, чтобы набор ссылок был одинаков на всех
   документах, но ссылкой не выглядит. */
.doc__nav a[aria-current='page'] {
  color: #90929a;
  pointer-events: none;
}