/* ЮРИДИЧЕСКИЕ СТРАНИЦЫ: КОНТЕЙНЕР, ЧИТАЕМОСТЬ, ДВЕ ВКЛАДКИ — SHAT-6369.
 *
 * 🔴 ЧТО БЫЛО ИЗМЕРЕНО НА ЖИВОЙ СТРАНИЦЕ 16.10.2026 (headless chromium, только GET, 390px и
 * 1440px) — обе жалобы владельца объяснялись ОДНИМ дефектом разметки, а не темой и не вставленным
 * с сервера HTML:
 *
 *   `.page-hero` открывался и НЕ ЗАКРЫВАЛСЯ: весь документ лежал ВНУТРИ тёмного героя.
 *   ⇒ фон под первым абзацем rgb(46,48,80) при цвете текста rgb(55,65,81) — тёмный на тёмном;
 *   ⇒ `max-width: none`, `padding-left: 0px`, `left: 0`, ширина = ширине окна — текст от края.
 *
 *   А класс `legal-doc`, в который завёрнут весь текст, НЕ ИМЕЛ НИ ОДНОГО ПРАВИЛА ни в странице,
 *   ни в shatale.css. Правило же для `.content` было написано и не использовалось ничем.
 *   ⇒ Поэтому контейнер здесь висит на `.legal-doc` — на классе, который РЕАЛЬНО стоит в
 *     разметке, а не на том, который кто-то однажды собирался поставить. Мёртвое правило и
 *     неодетый класс — это один и тот же дефект с двух сторон, и `scripts/legal-pages-selftest.mjs`
 *     краснеет на обе стороны.
 *
 * ⚠️ И ПОЧЕМУ ЗДЕСЬ ВООБЩЕ ЕСТЬ ТЁМНАЯ ТЕМА. Канонический документ с /v1/legal несёт
 * `color-scheme: light dark` и свою тёмную палитру. Мы его тело вставляем в СВОЮ страницу, то есть
 * его собственные стили до читателя не доходят — значит обязанность читаемости в обеих темах
 * переходит на этот файл. Молчаливое наследование тут и дало бы тёмное на тёмном во второй раз.
 */

.legal-page {
  --legal-ink: #16181d;
  --legal-ink-soft: #374151;
  --legal-bg: #ffffff;
  --legal-rule: #e2e8f0;
  --legal-surface: #f8fafc;
  --legal-accent: #4f46e5;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  .legal-page {
    --legal-ink: #e8e9ec;
    --legal-ink-soft: #c7cad2;
    --legal-bg: #15171b;
    --legal-rule: #333842;
    --legal-surface: #1d2026;
    --legal-accent: #b2b8ff;
  }
}

body.legal-page { background: var(--legal-bg); color: var(--legal-ink); }

/* ---------- переключатель аудитории: ДВЕ ССЫЛКИ, НЕ ВКЛАДКИ ----------
 *
 * ⚠️ ЭТО РЕШЕНИЕ ПО РЕВЬЮ (круг 1, codex+gemini, 16.10.2026), а не вкус. Вкладки в одном файле
 * требовали `role="tab"` + `tabpanel` + `aria-controls` + стрелки ArrowLeft/Right/Home/End, и без
 * них скринридер читал несвязанные кнопки, а клавиатурой невыбранная вкладка не достигалась
 * (`tabIndex=-1` без обработчиков стрелок). Ссылка на отдельный адрес умеет всё это сама, и у неё
 * есть то, чего у вкладки нет: её можно переслать, открыть в новой вкладке и прочитать без JS. */
.legal-switch { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.legal-switch-link {
  font: 600 13px/1 'Manrope', system-ui, sans-serif;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e7e9f5;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.legal-switch-link:hover { background: rgba(255, 255, 255, 0.08); }
.legal-switch-link[aria-current="page"] { background: #ffffff; border-color: #ffffff; color: #26273d; }
.legal-switch-link:focus-visible { outline: 2px solid #b2b8ff; outline-offset: 2px; }

/* ---------- сам документ ---------- */

.legal-doc {
  max-width: 44rem;              /* та же мера строки, что у документа на /v1/legal */
  margin: 0 auto;
  padding: 48px 20px 80px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--legal-ink-soft);
}
.legal-doc > :first-child { margin-top: 0; }
.legal-doc h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1.25rem; color: var(--legal-ink); }
.legal-doc h2 { font-size: 1.2rem; margin: 2.25rem 0 .6rem; color: var(--legal-ink); }
.legal-doc h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; color: var(--legal-ink); }
.legal-doc p { margin: 0 0 .9rem; }
.legal-doc ul, .legal-doc ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.legal-doc li { margin: .25rem 0; }
.legal-doc strong { color: var(--legal-ink); font-weight: 600; }
.legal-doc a { color: var(--legal-accent); text-decoration: underline; }
.legal-doc hr { border: 0; border-top: 1px solid var(--legal-rule); margin: 2rem 0; }
.legal-doc blockquote {
  margin: 0 0 1.1rem;
  padding: 14px 18px;
  background: var(--legal-surface);
  border: 1px solid var(--legal-rule);
  border-radius: 10px;
}
.legal-doc blockquote p:last-child { margin-bottom: 0; }

/* ⚠️ `table-scroll` тоже стоял в разметке БЕЗ ПРАВИЛА (4 места на /privacy): таблица договора шире
 * телефона, и без прокрутки её правый край просто недостижим. Прокрутка здесь — не украшение. */
.legal-doc .table-scroll { overflow-x: auto; margin: 0 0 1.1rem; -webkit-overflow-scrolling: touch; }
.legal-doc table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.legal-doc th, .legal-doc td {
  border: 1px solid var(--legal-rule);
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: top;
}
.legal-doc thead th { background: var(--legal-surface); color: var(--legal-ink); }

/* ---------- состояния чтения ---------- */

/* 🔴 ПУСТАЯ ЮРИДИЧЕСКАЯ СТРАНИЦА — ХУЖЕ УСТАРЕВШЕЙ. Если текст не удалось прочитать, читатель
 * обязан увидеть, что это ОТКАЗ ЧТЕНИЯ, и получить прямую ссылку на документ, а не белый лист,
 * который читается как «у Shatale нет таких условий». */
/* Пометка «показана копия, живой документ недостижим» — рядом с версией, а не вместо текста:
 * читателю нужен текст, а знание о том, что он может отставать, идёт приложением к нему. */
.legal-meta-note { color: #d8c08a; }

@media (max-width: 600px) {
  .legal-doc { padding: 32px 16px 64px; }
  .legal-switch-link { padding: 8px 13px; }
}

/* ---------- герой страницы (общий для /terms и /privacy) ----------
 *
 * ⚠️ ЭТИ ПРАВИЛА БЫЛИ ЗАПИСАНЫ ДВАЖДЫ — своей копией в каждой странице, — и расходились: на
 * /privacy часть правил относилась к классам, которых в разметке нет. Одна копия здесь не
 * «красивее»: она не даёт двум юридическим страницам выглядеть по-разному от того, какую из них
 * правили последней. */
.page-hero {
  background: #2e3050;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 48px 0 40px;
}
.page-hero-inner { max-width: 44rem; margin: 0 auto; padding: 0 20px; }
.page-tag {
  display: inline-block;
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  color: #7c84e8;
  background: rgba(124, 132, 232, .14);
  border: 1px solid rgba(124, 132, 232, .28);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-title { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.5px; margin: 0 0 10px; line-height: 1.15; }
.page-meta { font-size: 13px; color: #b9bdd6; margin: 0; }

/* Инжектируемая шапка на этих страницах всегда «тёмное стекло»: контент под ней светлый. */
body.legal-page header { background: rgba(38, 39, 61, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

@media (max-width: 600px) {
  .page-title { font-size: 23px; }
  .page-hero { padding: 36px 0 30px; }
}