/*
  Страница юридических документов. Оформление кабинета (app.css), но тема ТОЛЬКО светлая:
  договор должен выглядеть одинаково на экране, в скриншоте и на бумаге, а тёмная тема
  при печати даёт либо чёрный лист, либо непредсказуемо перекрашенный текст.

  Разметку генерирует tools/build-legal.js из docs/legal/*.md. Руками её не правят.
*/

:root{
  --bg:#f4f6f9; --panel:#fff; --ink:#12151a; --muted:#6b7480; --line:#e3e7ed;
  --accent:#1f6feb; --accent-ink:#fff; --chip:#eef2f7; --radius:12px;
  --warn-bg:#fff4e0; --warn-line:#f0c675; --warn-ink:#7a4a05;
  --tbc-bg:#fdf2d0; --tbc-ink:#6b4e05;
  --head:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}

/* Переключатель языка прячет чужие языки целиком: у каждого куска текста есть близнец
   на каждом языке, видим всегда ровно один.

   Правило одно на язык, а не пара на каждое сочетание: языков пять, упорядоченных пар
   двадцать, и такой список первым же делом разошёлся бы с действительностью.
   `[data-l]:not([data-l=…])` вместо `[data-l]{display:none}` — потому что восстанавливать
   display нечем: у article, ul и span он разный. Скрываем лишнее, видимое не трогаем. */
html[data-lang="ru"]:not([data-bi]) [data-l]:not([data-l="ru"]),
html[data-lang="en"]:not([data-bi]) [data-l]:not([data-l="en"]),
html[data-lang="pt"]:not([data-bi]) [data-l]:not([data-l="pt"]),
html[data-lang="es"]:not([data-bi]) [data-l]:not([data-l="es"]),
html[data-lang="sr"]:not([data-bi]) [data-l]:not([data-l="sr"]){display:none !important}

/* В двуязычном режиме видимое помечает legal.js классом .l-on: показать надо ДВА языка
   из пяти, а сравнить два атрибута средствами CSS нельзя. */
html[data-bi] [data-l]:not(.l-on){display:none !important}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:20;height:var(--head);
  display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)
}
.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand small{font-weight:400;font-size:13px;color:var(--muted)}
.top .spacer{flex:1}
.back{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);
  font-size:13px;white-space:nowrap
}
.back:hover{border-color:var(--accent)}

/* Сегментированный контрол, как в кабинете: оба языка видны сразу, и не надо гадать,
   текущий это язык или предлагаемый. */
.lang-switch{display:flex;gap:4px;background:var(--chip);border-radius:9px;padding:3px}
.lang-switch button{
  display:flex;align-items:center;gap:6px;padding:5px 9px;border:0;border-radius:7px;
  background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* Флаги нарисованы SVG, а не эмодзи: Windows не поставляет глифы региональных
   индикаторов, и 🇷🇺 там выглядит как две буквы в рамке (та же грабля, что в app.css). */
.lang-switch svg{width:16px;height:12px;border-radius:2px;display:block;flex:0 0 16px}

.menu-btn{
  display:none;padding:6px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer
}

/* ---------- каркас ---------- */
.layout{display:flex;align-items:flex-start;gap:0}
.side{
  position:sticky;top:var(--head);align-self:flex-start;
  width:290px;flex:0 0 290px;height:calc(100vh - var(--head));overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line);padding:16px 0 40px
}
.side-title{
  padding:0 18px 8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)
}
.docs{list-style:none;margin:0;padding:0}
.doc-link{
  display:block;padding:9px 18px;color:var(--ink);text-decoration:none;font-size:14px;
  border-left:3px solid transparent
}
.doc-link:hover{background:var(--chip)}
/* ⚠️ Пары «текущий документ → его элемент» перечислены руками: сравнить два атрибута
   средствами CSS нельзя. Добавили документ — дописать его в ТРИ списка ниже
   (подсветка ссылки, раскрытие содержания, показ самого текста). Забыть третий —
   значит открыть страницу, на которой нет ничего: разметка на месте, весь текст скрыт
   `.doc{display:none}`, в консоли ни слова. Так и случилось с партнёрским пакетом,
   поэтому теперь наличие правила проверяет tools/build-legal.js. */
html[data-doc="terms"]      .doc-item[data-doc="terms"]      > .doc-link,
html[data-doc="advertiser"] .doc-item[data-doc="advertiser"] > .doc-link,
html[data-doc="privacy"]    .doc-item[data-doc="privacy"]    > .doc-link,
html[data-doc="aup"]        .doc-item[data-doc="aup"]        > .doc-link,
html[data-doc="cookies"]    .doc-item[data-doc="cookies"]    > .doc-link,
html[data-doc="partner"]    .doc-item[data-doc="partner"]    > .doc-link,
html[data-doc="dpa"]        .doc-item[data-doc="dpa"]        > .doc-link{
  border-left-color:var(--accent);background:var(--chip);font-weight:600
}

/* Содержание раскрыто только у открытого документа: пять оглавлений сразу —
   это стена ссылок, в которой не найти нужный пункт. */
.toc{display:none;list-style:none;margin:0 0 8px;padding:2px 0 6px}
html[data-doc="terms"]      .doc-item[data-doc="terms"]      .toc,
html[data-doc="advertiser"] .doc-item[data-doc="advertiser"] .toc,
html[data-doc="privacy"]    .doc-item[data-doc="privacy"]    .toc,
html[data-doc="aup"]        .doc-item[data-doc="aup"]        .toc,
html[data-doc="cookies"]    .doc-item[data-doc="cookies"]    .toc,
html[data-doc="partner"]    .doc-item[data-doc="partner"]    .toc,
html[data-doc="dpa"]        .doc-item[data-doc="dpa"]        .toc{display:block}
.toc a{
  display:block;padding:4px 18px 4px 30px;font-size:13px;line-height:1.35;
  color:var(--muted);text-decoration:none;border-left:3px solid transparent
}
.toc a:hover{color:var(--ink);background:var(--chip)}
.toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:600}

.main{flex:1;min-width:0;padding:26px 32px 80px;display:flex;justify-content:center}
/* Ширина колонки ограничена по длине строки, а не по экрану: на широком мониторе
   строка в 200 символов не читается. */
.sheet{width:100%;max-width:78ch;min-width:0}

/* ---------- плашка «черновик» ---------- */
.banner{
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  border-radius:10px;padding:11px 15px;margin:0 0 22px;font-size:13.5px;line-height:1.5
}
.banner b{color:#8a5000}

/* ---------- документ ---------- */
.doc{display:none}
html[data-doc="terms"]      .doc[data-doc="terms"],
html[data-doc="advertiser"] .doc[data-doc="advertiser"],
html[data-doc="privacy"]    .doc[data-doc="privacy"],
html[data-doc="aup"]        .doc[data-doc="aup"],
html[data-doc="cookies"]    .doc[data-doc="cookies"],
html[data-doc="partner"]    .doc[data-doc="partner"],
html[data-doc="dpa"]        .doc[data-doc="dpa"]{display:block}

.doc h1{font-size:26px;line-height:1.25;margin:0 0 6px}
.docmeta{
  color:var(--muted);font-size:13px;margin:0 0 6px;
  display:flex;flex-wrap:wrap;gap:6px 14px
}
.doc hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* scroll-margin-top — из-за липкой шапки: без него якорь уводит заголовок под неё. */
.doc h2,.doc h3,.doc h4{scroll-margin-top:calc(var(--head) + 14px)}
.doc h2{
  font-size:20px;line-height:1.3;margin:34px 0 10px;
  padding-top:14px;border-top:1px solid var(--line)
}
.doc h3{font-size:16px;margin:22px 0 8px}
.doc h4{font-size:14.5px;margin:18px 0 6px}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 12px;padding-left:24px}
.doc li{margin:0 0 5px}
.doc li > ul,.doc li > ol{margin:5px 0 0}
.doc blockquote{
  margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--line);
  background:var(--panel);border-radius:0 8px 8px 0;color:var(--muted)
}
.doc code{
  background:var(--chip);border-radius:4px;padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;
  overflow-wrap:anywhere
}

/* Абзац «если коротко» — единственное, что многие прочитают целиком. */
.plain{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:11px 15px;margin:0 0 14px
}
.plain b:first-child{color:var(--accent)}

/* Внешний адрес показан текстом, а не ссылкой: href на чужой домен в wwwroot
   запрещён сторожем tools/check-frontend.js. Длинный URL не должен рвать колонку. */
.ext{overflow-wrap:anywhere}

/* Незакрытый пункт из черновика. Прятать его нечестно: документ и правда неполон. */
.tbc{
  background:var(--tbc-bg);color:var(--tbc-ink);border-radius:4px;
  padding:1px 5px;font-size:.94em;overflow-wrap:anywhere
}

/* Ссылка-якорь у заголовка: наведение показывает «#», клик кладёт адрес пункта в строку
   браузера — так пункт можно переслать, а не пересказывать. */
.anchor{
  margin-left:8px;color:var(--line);text-decoration:none;font-weight:400;
  opacity:0;transition:opacity .12s
}
h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,.anchor:focus{opacity:1;color:var(--accent)}

/* ---------- таблицы ---------- */
.tablewrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:10px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;background:var(--panel)}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.doc tr:last-child td{border-bottom:0}

/* ---------- оговорка о языке ---------- */

/* Перевод договора, который подписывают с иностранным партнёром, обязан прямо сказать,
   какой текст имеет преимущественную силу. Отдельной плашкой, а не серой строчкой
   в ряду «Версия · Обновлён · Оператор»: потерять эту фразу среди метаданных значит
   не сказать её вовсе. */
.lang-note{
  background:var(--chip);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--muted)
}
.lang-note b{color:var(--ink)}

/* ---------- двуязычный просмотр ----------

   Договор с иностранным партнёром читают вдвоём: партнёр — свой язык, мы — английский,
   который имеет преимущественную силу. Переключать язык туда-обратно, держа абзац
   в памяти, — верный способ не заметить расхождение, поэтому два языка показываются
   рядом, абзац напротив абзаца.

   Устройство: .sheet становится сеткой, а сами документы — display:contents, чтобы
   в ячейки попали ОТДЕЛЬНЫЕ абзацы, а не документ целиком. Номер строки каждому абзацу
   проставляет legal.js по ключу data-b («раздел : номер блока в разделе»), одинаковому
   во всех языках. Выравнивание получается смысловое, а не по высоте: перевод длиннее
   оригинала, и одинаковая высота — это уже другой абзац. */
.langs{display:flex;align-items:center;gap:6px;min-width:0}

.lang-pair{
  display:none;align-items:center;gap:4px;
  background:var(--chip);border-radius:9px;padding:3px
}
html[data-bi] .lang-pair{display:flex}
html[data-bi] .lang-switch{display:none}

.lang-sel{
  max-width:112px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer
}
.lang-swap{
  border:0;background:none;color:var(--muted);font:inherit;font-size:15px;
  line-height:1;padding:4px 3px;cursor:pointer
}
.lang-swap:hover{color:var(--accent)}

.bi-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--muted);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap
}
.bi-btn:hover{color:var(--ink);border-color:var(--accent)}
.bi-btn[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink)
}
.bi-ico{width:16px;height:12px;display:block;flex:0 0 16px}

html[data-bi] .sheet{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:30px;align-items:start;max-width:none
}
html[data-bi] .main{padding-left:22px;padding-right:22px}
html[data-bi] .sheet > .doc.l-on{display:contents}
/* Длинный идентификатор или широкая таблица не должны раздвигать свою колонку:
   у элемента сетки min-width по умолчанию auto, и одна ячейка ломает всю разметку. */
html[data-bi] .sheet > *,
html[data-bi] .sheet > .doc > *{min-width:0}
html[data-bi] .sheet > .banner{grid-column:1 / -1}

/* Подпись колонки: без неё через два экрана прокрутки уже не помнишь, где чей язык. */
.bi-head{
  position:sticky;top:var(--head);z-index:5;
  display:flex;align-items:center;gap:7px;
  margin:0 0 10px;padding:8px 0 7px;background:var(--bg);
  border-bottom:1px solid var(--line);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)
}
.bi-head svg{width:16px;height:12px;border-radius:2px;flex:0 0 16px}
.bi-head.main-lang{color:var(--accent)}

/* ---------- узкий экран ---------- */
@media (max-width:900px){
  /* Договор читают с телефона, и две колонки по 180 пикселей там нечитаемы. Колонки
     схлопываются в одну, но абзацы продолжают чередоваться — оригинал, перевод,
     оригинал: именно эта пара и нужна для сверки, а два документа подряд её теряют.
     Порядок задаёт legal.js через order, поэтому явную расстановку по сетке снимаем. */
  html[data-bi] .sheet{grid-template-columns:minmax(0,1fr);column-gap:0}
  html[data-bi] .sheet > .doc > *{grid-row:auto !important;grid-column:1 !important}
  /* Второй язык помечен чертой слева — иначе непонятно, где кончился один и начался другой. */
  html[data-bi] .sheet > .doc[data-side="b"] > *{
    border-left:3px solid var(--line);padding-left:11px
  }
  .bi-head{display:none}
}

@media (max-width:900px){
  .menu-btn{display:inline-block}
  .brand small{display:none}
  .layout{display:block}
  .side{
    position:fixed;top:var(--head);left:0;right:0;width:auto;flex:none;
    max-height:calc(100vh - var(--head));border-right:0;border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(0,0,0,.12);display:none;z-index:15
  }
  body.nav-open .side{display:block}
  .main{padding:18px 14px 60px}
  .doc h1{font-size:21px}
  .doc h2{font-size:18px}
  /* Длинное слово в договоре (адрес, идентификатор) не должно раздвигать страницу
     и включать горизонтальную прокрутку всего экрана. */
  .doc p,.doc li,.doc h1,.doc h2,.doc h3{overflow-wrap:break-word}
}

/* На телефоне в шапке помещаются четыре элемента, только если два из них
   ужать до значка. Иначе строка не влезает и появляется горизонтальная
   прокрутка ВСЕЙ страницы — на 375 px это первое, что видит человек. */
@media (max-width:620px){
  .top{gap:8px;padding:0 10px}
  .brand{font-size:15px;gap:6px}
  .back .lbl,.menu-btn .lbl,.bi-btn .lbl{display:none}
  .back,.menu-btn,.bi-btn{padding:6px 9px}
  .lang-switch button{padding:5px 7px}
  /* Пять языков подписями в строку шапки не помещаются — остаются одни флаги.
     Появление горизонтальной прокрутки ВСЕЙ страницы на 375 px человек видит первым. */
  .lang-switch .code{display:none}
  .lang-sel{max-width:88px;font-size:11px;padding:4px}
  .doc h1{font-size:19px}
}

/* ---------- печать ---------- */
@media print{
  :root{--head:0px}
  .top,.side,.menu-btn,.anchor,.back,.lang-switch{display:none !important}
  body{background:#fff;font-size:11pt}
  .layout{display:block}
  .main{padding:0;display:block}
  .sheet{max-width:none}
  .banner{border:1px solid #999;background:none;color:#000}
  .plain{border:0;border-left:2px solid #999;background:none;padding-left:10px}
  .tablewrap{overflow:visible;border:0}
  .doc table{border:1px solid #999}
  .doc h2,.doc h3{break-after:avoid}
  .doc table,.doc blockquote,.doc .plain{break-inside:avoid}
  /* Двуязычный просмотр печатается как есть: сверять переводы на бумаге удобнее,
     чем на экране, и именно этот лист кладут на стол при подписании. Липкую подпись
     колонки распечатывать липкой незачем. */
  .bi-head{position:static;background:none}
  a{color:#000;text-decoration:none}
}

/* ------------------------------------------------------------------ почта

   Адреса нарисованы картинкой (см. tools/build-legal.js): текста с «собакой»
   в разметке нет, сборщикам адресов брать нечего. Человеку остаётся нажатие —
   адрес кладётся в буфер обмена. */
.mail {
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
  cursor: pointer;
  color: var(--accent, #1f6feb);
  border-radius: 3px;
  padding: 0 1px;
}

.mail:hover { background: rgba(31, 111, 235, .1); }

.mail:focus-visible {
  outline: 2px solid var(--accent, #1f6feb);
  outline-offset: 1px;
}

.mail svg { display: block; }

/* Подтверждение копирования. Появляется на секунду и не двигает текст:
   position:absolute, чтобы строка договора не «прыгала». */
.mail { position: relative; }

.mail.copied::after {
  content: attr(data-copied);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  background: #1f2430;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 5px;
  pointer-events: none;
}

@media print {
  .mail { color: inherit; }
  .mail:hover { background: none; }
}