/* Callen — одна таблица стилей на все девять юридических документов.

   ПОЧЕМУ ФАЙЛ ОДИН. Документов девять, и вёрстка у них одна и та же: шапка,
   заголовок, плашка редакции, оглавление, нумерованные разделы, таблица
   сроков, сноски. Девять копий этих стилей разъедутся на первой же правке —
   и разъедутся молча: заметит это не тот, кто правил, а человек, открывший
   десятую страницу и увидевший другой отступ там, где всё остальное совпадает.

   ОТКУДА ВЗЯТА ТИПОГРАФИКА. Из web/privacy.html — это образец, и он остаётся
   на месте: та же ширина колонки (720), те же цвета, те же два шрифта, тот же
   межстрочный интервал. Отличия только там, где у короткой страницы просто не
   было такого элемента: оглавления, нумерации, таблицы сроков и сносок.

   ШРИФТЫ СВОИ, ИЗ /fonts. Ссылок на fonts.googleapis.com и fonts.gstatic.com
   здесь нет ни одной, и это не про скорость загрузки. По такой ссылке браузер
   каждого, кто открыл страницу, сам уходит на серверы Google и отдаёт им свой
   IP-адрес, User-Agent и адрес открытой страницы — до единого нажатия. Для
   страницы о персональных данных это её собственное нарушение: она обещает
   рассказать, куда уходят данные, и про этот канал молчит. Лицензия шрифтов
   и история переезда — web/fonts/README.md.

   ПУТИ К ШРИФТАМ ОТНОСИТЕЛЬНЫЕ (../fonts/…). Файл лежит в подкаталоге
   web/legal/, и относительный путь считается от него, а не от страницы, —
   поэтому он одинаково верен и на боевом /legal/…, и при открытии файла с
   диска, и на предпросмотре из подкаталога. Абсолютный /fonts/… работал бы
   только в первом случае.

   ЗАГЛУШКИ РЕКВИЗИТОВ. Класс .slot ТОЛЬКО красит. Фигурные скобки и текст
   вроде {ИНН} стоят в самом HTML и обязаны там остаться: реквизиты будут
   заменяться одним поиском по файлам, а подставленное из CSS через content
   в поиск не попадёт вовсе. Тот, кто решит «скобки же можно рисовать стилем»,
   сломает именно способ финализации, ради которого заглушки и заведены.

   Тема одна, тёмная, как и у web/privacy.html: переключателя на лендинге нет,
   а вторая палитра, которую никто не увидит, — это второе место, где цвета
   разъедутся. Печать перекрашивается отдельно, в самом низу файла. */

/* Оба шрифта переменные: один файл покрывает всю линейку насыщенности,
   поэтому объявлений четыре, а не десяток. unicode-range оставлен от Google —
   по нему латинский файл не качается, пока латиница не встретилась. */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/onest-latin.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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin.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}

/* СЕЛЕКТОР ЗДЕСЬ ИЗ ТРЁХ ЧАСТЕЙ, И ЭТО НЕ ПЕРЕСТРАХОВКА. Часть документов
   подключает /tokens.css перед этим файлом, а в токенах есть светлая тема:
   `:root:not([data-theme="dark"])` внутри @media и `:root[data-theme="light"]`
   отдельно. У обоих вес 0-2-0, у голого `:root` — 0-1-0, и голый проигрывает.
   Проигрыш этот наполовину: --bg и --ink токены перекрашивают в кремовые, а
   --bg2, --slot-* и --warn-*, которых в токенах нет вовсе, остаются тёмными.
   Получается тёмная врезка на светлом листе — и только у части читателей,
   у тех, у кого система стоит в светлой теме. Проверено в браузере: с одним
   `:root` фон страницы действительно приезжал кремовым.
   Повторяем ОБА селектора токенов один в один: при равном весе побеждает тот,
   что подключён позже, а это всегда legal.css. Значения не дублируются —
   селекторы перечислены списком к одному и тому же блоку. Третий, голый
   `:root`, нужен для случая data-theme="dark": там у токенов вес 0-1-0.
   Тема у юридических страниц одна, тёмная, как у образца web/privacy.html. */
:root,
:root:not([data-theme="dark"]),
:root[data-theme="light"]{
  color-scheme:dark;

  /* Цвета ровно те же, что в web/privacy.html. Новых здесь три, и каждый
     заведён под элемент, которого на той странице не было. */
  --bg:#101116;
  --bg2:#171921;
  --line:#272A34;
  --ink:#F5F0E8;
  --muted:#8E93A0;
  --dim:#6B7079;
  --accent:#F2994A;

  /* Заглушка реквизита. Ярче основного текста намеренно: человек должен
     увидеть дырку, а не принять её за название. */
  --slot-ink:#FFB871;
  --slot-bg:rgba(242,153,74,.12);
  --slot-line:rgba(242,153,74,.55);

  /* Плашка «документ в подготовке» и врезка «вопрос не решён». Тот же
     оранжевый, но приглушённый: предупреждение, а не тревога. */
  --warn-bg:rgba(242,153,74,.08);
  --warn-line:rgba(242,153,74,.32);

  /* system-ui в запасе не для красоты: если файл шрифта не доехал, документ
     обязан остаться читаемым — это те страницы, которые открывают в плохой
     сети и в спешке, обычно когда что-то уже пошло не так. */
  --display:'Onest',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;

  /* Ширина колонки — как в web/privacy.html. Шире строка перестаёт читаться,
     а это документы, которые читают целиком, а не по диагонали. */
  --col:720px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--col);margin:0 auto;padding:40px 20px 80px}

/* --- Шапка с возвратом ---------------------------------------------- */

/* Две ссылки в строку: на лендинг и в перечень документов. У страницы,
   которую открыли по прямой ссылке из письма или из оферты, обратной дороги
   иначе нет вовсе. Разделитель рисуем стилем, а не символом в разметке:
   вторая ссылка есть не у всех девяти. */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px}
.nav a{color:var(--muted);text-decoration:none;font-size:15px}
.nav a:hover{color:var(--ink)}
.nav a + a::before{content:"·";color:var(--dim);margin-right:10px}

/* Оставлено ради совместимости с web/privacy.html: там возврат размечен
   одиночной ссылкой .back, и переучивать образец ради нового файла незачем. */
.back{display:inline-block;margin-bottom:26px;color:var(--muted);
      text-decoration:none;font-size:15px}
.back:hover{color:var(--ink)}

/* --- Заголовок ------------------------------------------------------- */

.kicker{font-family:var(--display);font-size:13px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--dim);margin-bottom:10px}

h1{font-family:var(--display);font-size:clamp(26px,7vw,34px);line-height:1.15;
   letter-spacing:-.025em;margin-bottom:10px}

.lead{color:var(--muted);margin-bottom:8px}

.upd{color:var(--dim);font-size:14px;margin-bottom:26px}

/* --- Плашки состояния документа -------------------------------------- */

/* Одна плашка, два вида. Стоит сразу под заголовком и до оглавления: человек
   обязан узнать, что перед ним, раньше, чем начнёт читать. */
.status{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 26px;
  font-size:15px;
  line-height:1.55;
  background:var(--bg2);
  color:var(--muted);
}
.status b{color:var(--ink);font-weight:600}
.status p + p{margin-top:8px}
/* Как у .box, .open и .exact: последний абзац не тащит за собой нижний отступ
   абзаца внутрь рамки — иначе плашка снизу заметно толще, чем сверху. */
.status > :last-child{margin-bottom:0}

/* Редакция есть, но реквизитов ещё нет: документ читают и им пользуются. */
.status--draft{border-left:3px solid var(--accent)}

/* Документа ещё нет: каркас и ссылка стоят, текст зальют разом.
   Заметнее первой намеренно — здесь читать пока нечего, и человек должен
   понять это с одного взгляда, а не дочитав до конца пустую страницу. */
.status--wip{
  background:var(--warn-bg);
  border-color:var(--warn-line);
  color:var(--ink);
}
.status--wip b{color:var(--accent)}

/* То же предупреждение, но записанное как `<div class="box notice">`.
   Восемь каркасов уже свёрстаны так, и переучивать их ради имени класса
   значит править восемь файлов вместо одного правила. Вид обязан совпадать
   со .status--wip до пикселя: две непохожие плашки с одинаковым текстом
   читаются как два разных состояния документа, а состояние тут одно.

   Селектор двойной, `.box.notice`, а не просто `.notice`: правило .box стоит
   ниже по файлу, и при равном весе победило бы оно — плашка молча вернула бы
   себе обычный серый фон врезки. */
.notice,
.box.notice{
  background:var(--warn-bg);
  border-color:var(--warn-line);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
}
.notice b,.box.notice b{color:var(--accent);font-weight:600}

/* --- Оглавление ------------------------------------------------------ */

.toc{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  margin:0 0 30px;
}
.toc h2{
  /* Заголовок оглавления нумерации не получает: он не раздел документа.
     Собственные правила, а не .plain, чтобы .toc можно было ставить в любой
     документ, не помня про служебный класс. */
  font-family:var(--display);font-size:15px;letter-spacing:.02em;
  color:var(--muted);margin:0 0 10px;text-transform:none;
}
.toc h2::before{content:none}
.toc ol{counter-reset:tocn;list-style:none;margin:0;padding:0}
.toc li{counter-increment:tocn;margin:0;padding:3px 0 3px 30px;position:relative}
.toc li::before{
  content:counter(tocn) ".";
  position:absolute;left:0;top:3px;
  width:24px;text-align:right;
  color:var(--dim);font-variant-numeric:tabular-nums;font-size:15px;
}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--accent)}

/* --- Тело документа и нумерация разделов ------------------------------ */

/* Номера считает CSS, а не разметка. Причина простая: раздел в середине
   девяноста абзацев однажды вставят или уберут, и руками перенумеровать
   забудут — а неверный номер в юридическом документе это не опечатка, это
   ссылка в никуда из другого документа. */
/* Сначала — как заголовок ВЫГЛЯДИТ, и это правило не привязано к .doc.
   Причина не в красоте: восемь документов из девяти — незаполненные каркасы,
   и обёртки .doc у них нет, потому что нумеровать там нечего. Держи типографику
   только внутри .doc — и у этих восьми заголовки останутся браузерными: без
   Onest и, из-за `*{margin:0}` в начале файла, вплотную к соседнему абзацу.
   Разъезжаются такие страницы молча: разметка валидна, стили подключены,
   а документ выглядит недовёрстанным. Поэтому вид — здесь, а номер — ниже. */
h2{
  font-family:var(--display);
  font-size:19px;
  letter-spacing:-.015em;
  margin:34px 0 10px;
  scroll-margin-top:20px;   /* переход из оглавления не должен резать заголовок */
}
h3{
  font-family:var(--display);
  font-size:16px;
  letter-spacing:-.01em;
  margin:20px 0 8px;
  scroll-margin-top:20px;
}

/* А теперь — нумерация, и только она. Включается обёрткой .doc: у каркаса без
   текста номера разделов были бы номерами несуществующего. */
.doc{counter-reset:sec}

.doc h2{
  counter-increment:sec;
  counter-reset:sub;
}
.doc h2::before{
  content:counter(sec) ". ";
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.doc h3{
  counter-increment:sub;
}
.doc h3::before{
  content:counter(sec) "." counter(sub) " ";
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* Раздел вне нумерации: приложение, реквизиты, «как с нами связаться».
   Счётчик такой заголовок не трогает вовсе — иначе следующий за ним раздел
   получит номер с пропуском. */
.doc h2.plain,.doc h3.plain{counter-increment:none}
.doc h2.plain::before,.doc h3.plain::before{content:none}

p{margin-bottom:12px}
ul,ol{margin:0 0 12px 20px}
li{margin-bottom:6px}
a{color:var(--accent)}
b,strong{font-weight:600}

/* Список внутри пункта, где нумерация уже есть у самого пункта. */
ul.tight li,ol.tight li{margin-bottom:2px}

hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* --- Заглушки реквизитов --------------------------------------------- */

/* Так выглядит дырка. Пунктир, а не сплошная рамка: сплошная читается как
   выделение, то есть как «здесь важное», а здесь — «здесь ничего нет».
   Скобки и текст внутри стоят в HTML, см. шапку файла. */
.slot{
  display:inline;
  padding:1px 6px;
  border:1px dashed var(--slot-line);
  border-radius:6px;
  background:var(--slot-bg);
  color:var(--slot-ink);
  font-size:.94em;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* Реквизиты блоком: таблица «оператор — вот он», где почти все значения пока
   заглушки. Каждая строка своей парой, чтобы длинное наименование не съезжало
   под номер ИНН. */
.req{margin:18px 0;border:1px solid var(--line);border-radius:16px;
     background:var(--bg2);padding:6px 18px}
.req dl{margin:0}
.req dt{color:var(--dim);font-size:13.5px;margin-top:12px}
.req dd{margin:2px 0 12px;color:var(--ink)}

/* --- Определения ------------------------------------------------------ */

/* Термины документа. Термин слева не выносим: на телефоне колонка в 720
   пикселей превращается в 335, и двухколоночный словарь там нечитаем. */
.defs{margin:18px 0}
.defs dt{
  font-family:var(--display);
  font-size:16px;
  letter-spacing:-.01em;
  margin-top:16px;
  color:var(--ink);
}
.defs dt:first-child{margin-top:0}
.defs dd{margin:4px 0 0;color:var(--muted)}
.defs dd b,.defs dd strong{color:var(--ink)}

/* --- Таблицы сроков --------------------------------------------------- */

/* Обёртка обязательна: таблица сроков в четыре колонки на телефон не влезает
   никакой вёрсткой, и выбор здесь между «таблица прокручивается вбок» и
   «страница прокручивается вбок целиком». Второе ломает весь документ. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.scroll table{margin:0}

table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.5;
}
th,td{
  text-align:left;
  vertical-align:top;
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);
}
th{
  font-family:var(--display);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--dim);
  border-bottom-color:var(--line);
}
td:last-child,th:last-child{padding-right:0}
tbody tr:last-child td{border-bottom:0}

/* Столбец со сроком: цифры в столбик, чтобы «14 дней» и «90 дней» читались
   как ряд, а не как два разных абзаца. */
.terms td.term,.terms th.term{white-space:nowrap;font-variant-numeric:tabular-nums}
.terms td.term{color:var(--ink)}

/* --- Врезки ------------------------------------------------------------ */

/* Общая плашка, как .box в web/privacy.html. Имя то же намеренно: разметку
   между страницами переносят копированием, и второе имя для того же вида
   врезки означает, что перенесённый кусок однажды приедет без стилей. */
.box{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  margin:18px 0;
}
.box > :last-child{margin-bottom:0}

/* Дословный текст, который дал юрист и который нельзя улучшать. Отбит
   рамкой слева, чтобы правящий документ видел границу: внутри — чужие слова,
   и переписывать их своими нельзя, даже если получится складнее. */
.exact{
  border-left:3px solid var(--accent);
  background:var(--bg2);
  border-radius:0 12px 12px 0;
  padding:14px 18px;
  margin:18px 0;
}
.exact > :last-child{margin-bottom:0}

/* Вопрос, по которому решения нет. Честная пустота лучше уверенного вранья,
   но она обязана быть видна как пустота, а не как обычный абзац. */
.open{
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-radius:16px;
  padding:14px 16px;
  margin:18px 0;
}
.open > :last-child{margin-bottom:0}
.open .open-label{
  display:block;
  font-family:var(--display);
  font-size:12.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}

/* --- Сноски ------------------------------------------------------------ */

/* Отсылка в тексте. Ссылкой, а не голым значком: со смартфона до сноски и
   обратно иначе не добраться. */
.fn{font-size:.75em;vertical-align:super;line-height:0;
    text-decoration:none;padding:0 1px}

.notes{
  margin:40px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}
.notes h2{
  font-family:var(--display);font-size:15px;color:var(--muted);
  margin:0 0 10px;letter-spacing:.02em;
}
.notes h2::before{content:none}
.notes ol{margin:0 0 0 22px}
.notes li{margin-bottom:8px;scroll-margin-top:20px}
.notes li:target{color:var(--ink)}

/* --- Подвал ------------------------------------------------------------ */

.foot{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:14px;
}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}
.foot p{margin-bottom:6px}

/* --- Перечень документов ---------------------------------------------- */

/* Список девяти страниц: восемь из них пока в подготовке, и это должно быть
   видно из перечня, а не выясняться переходом. */
.docs{list-style:none;margin:24px 0 0;padding:0}
.docs li{margin:0 0 10px}
.docs a{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg2);
  padding:14px 16px;
  color:var(--ink);
  text-decoration:none;
}
.docs a:hover{border-color:var(--accent)}
.docs .name{font-family:var(--display);font-size:17px;letter-spacing:-.01em}
.docs .about{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.docs .flag{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  border:1px solid var(--warn-line);
  background:var(--warn-bg);
  color:var(--accent);
  font-family:var(--body);
  font-size:12px;
  letter-spacing:.02em;
  vertical-align:2px;
  white-space:nowrap;
}

/* --- Перекрёстная навигация между документами -------------------------- */

/* Раздел из девяти страниц был связан звездой через один футер лендинга:
   попасть с оферты на правила возврата можно было только вернувшись на
   главную. Этот блок стоит в конце КАЖДОЙ из девяти страниц одним и тем же
   перечнем, поэтому уходить из документа за соседним документом больше не
   надо. Текущая страница в списке остаётся, но без ссылки: убрать её значит
   заставить человека пересчитывать, где он. */
.more{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.more h2{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 12px;
}
/* Нумерацию разделов рисует .doc h2::before. Этот заголовок стоит вне .doc,
   но правило повторено на случай, если блок однажды переедет внутрь. */
.more h2::before{content:none}
/* Разделитель точкой рисуем стилем, а не символом в разметке: при выпадении
   пункта из списка лишняя точка иначе осталась бы висеть. */
.more ul{list-style:none;margin:0;padding:0}
.more li{display:inline;margin:0;font-size:14.5px;color:var(--muted);line-height:1.9}
.more li + li::before{content:"·";color:var(--dim);margin:0 9px}
.more a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.more a:hover{color:var(--ink);border-bottom-color:var(--accent)}
/* Текущая страница: тем же кеглем, но цветом основного текста — она читается
   как «вы здесь», а не как неработающая ссылка. */
.more .self{color:var(--ink)}
.more p{margin:14px 0 0;font-size:14px;color:var(--dim)}
.more p a{color:var(--muted)}

/* Кнопка, выглядящая ссылкой: она зовёт скрипт, а не ведёт по адресу.
   Свойства display здесь намеренно нет — любое значение в правиле с классом
   перебило бы атрибут hidden из таблицы браузера, а показывает кнопку сам
   cookies.js. Не загрузился он — значит кнопки нет вовсе, и человек не жмёт
   в пустоту. Так же сделано в web/privacy.html. */
.linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--accent);
         cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* --- Печать ------------------------------------------------------------ */

/* Юридический документ рано или поздно печатают — в банк, юристу, в папку.
   Тёмная тема на бумаге это залитый лист, поэтому перекрашиваем. Заглушки
   реквизитов на печати остаются видимыми дырками: распечатанный договор с
   незаметно пустым ИНН хуже, чем ненапечатанный. */
@media print{
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .wrap{max-width:none;padding:0}
  .nav,.back,.toc,.more,.linkbtn{display:none}
  a{color:#000;text-decoration:underline}
  h1,h2,h3{page-break-after:avoid}
  .doc h2::before,.doc h3::before{color:#000}
  .box,.status,.req,.open,.exact,.docs a,.box.notice{
    background:#fff;border-color:#999;color:#000;
  }
  .notice b,.box.notice b{color:#000}
  .exact{border-left:3px solid #000}
  .open .open-label{color:#000}
  .status--wip b{color:#000}
  .slot{
    background:#fff;border:1px dashed #000;color:#000;
  }
  .scroll{overflow:visible}
  table{min-width:0}
  th,td{border-bottom:1px solid #999}
  th{color:#000}
  .notes,.foot{color:#000;border-top-color:#999}
  tr,li{page-break-inside:avoid}
}