/* Юридический раздел (LEGAL-12) — компонентный слой: подвал сайта + страницы /legal/*.
 * FRONT (baseline i5): SSR-страницы, JS здесь не нужен ВОВСЕ — ни htmx, ни Alpine (ТЗ §4.8):
 * улучшать нечего, а на странице, которую открывает проверяющий, лишний скрипт — только риск.
 *
 * Палитра, шрифты, reset и body — в общем static/css/base.css (подключается ПЕРЕД этим файлом).
 * Своих цветов и своих шрифтов файл НЕ заводит: всё через var(--…) темы «Шалфей».
 *
 * ПОЧЕМУ файл подключён на ПЯТИ шеллах, а не только на /legal/*.
 * Подвал `.legal-footer` (core/_legal_footer.html) включён в четыре продуктовых корневых шаблона
 * (public/base, identity/auth/base, booking/guest/base, dashboard/base) и в каркас юр-раздела —
 * это семь точек включения ТЗ §4.4. Стиль обязан доезжать ровно туда, куда доезжает разметка,
 * иначе на трёх поверхностях из пяти подвал остался бы голым списком ссылок.
 * Рассмотренная альтернатива — перенести `.legal-footer` в base.css — ОТКЛОНЕНА: base.css по
 * своей же шапке несёт токены, reset и кросс-экранные примитивы, а подвал — компонент, и
 * компонентные слои по конвенции проекта подключаются ПОСЛЕ базового. Цена решения — один
 * статик-запрос (хешированное имя, S3+CDN, INFRA-03/CDN), и она меньше цены размывания слоёв.
 *
 * Подвал обязан оставаться читаемым и в колонке 420px (auth/guest-шелл), и во всю ширину
 * (визитка, дашборд) — отсюда flex-wrap, а не сетка.
 */

/* --- Подвал сайта: пять шеллов, один вид -------------------------------------------------- */

.legal-footer {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px 28px;
  border-top: 1px solid var(--border);
  font: 400 12.5px/1.5 var(--font-b);
  color: var(--muted);
}

.legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.legal-footer__links a {
  color: var(--muted);
  text-decoration: none;
}

.legal-footer__links a:hover {
  color: var(--accent);
}

.legal-footer__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Разделитель — декоративный: он aria-hidden в разметке и не должен читаться скринридером как
 * часть наименования документа (тот же приём, что .visitka__legal-sep). */
.legal-footer__sep {
  color: var(--border);
}

.legal-footer__entity {
  margin: 10px 0 0;
  color: var(--muted);
}

/* Дашборд-шелл — grid 240px + контент; подвал добавлен последним ребёнком `.app-shell` (точка
 * включения 7), поэтому без растяжки он встал бы в колонку сайдбара. На мобиле `.app-shell`
 * переключается в `display:block` — правило там инертно и вреда не несёт. */
.app-shell > .legal-footer {
  grid-column: 1 / -1;
}

/* --- Страница юр-раздела: шапка ----------------------------------------------------------- */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 24px 8px;
}

.legal-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* Словомарка НЕ ссылка: корень «/» — вход воронки регистрации (PUB-04 редиректит анонима на
 * /auth/register и ставит реф-cookie), и уводить туда гостя, открывшего политику, нельзя. */
.legal-page__brand .brand-logo {
  height: 13px;   /* прежний кегль словомарки был 19px */
}

.legal-page__nav {
  margin: 0;
  font: 400 13px/1.4 var(--font-b);
}

.legal-page__nav a {
  color: var(--muted);
  text-decoration: none;
}

.legal-page__nav a:hover {
  color: var(--accent);
}

/* --- Типографика длинного текста ---------------------------------------------------------- */

/* Тело редакции — статический текст без классов (ТЗ §4.3: в файле опубликованной редакции
 * запрещены переменные и include). Значит стилизуются ТЕГИ внутри .legal-page, а не хуки:
 * LEGAL-01a вставляет готовый текст и не обязана размечать каждый абзац классом. */

.legal-doc__title,
.legal-index__title,
.legal-imprint__title {
  font: 600 27px/1.25 var(--font-h);
  color: var(--ink);
  margin: 28px 0 4px;
}

.legal-page h2 {
  font: 600 19px/1.35 var(--font-h);
  color: var(--ink);
  margin: 30px 0 8px;
}

.legal-page h3 {
  font: 600 16px/1.4 var(--font-h);
  color: var(--ink);
  margin: 22px 0 6px;
}

.legal-page p,
.legal-page li {
  font: 400 15.5px/1.7 var(--font-b);
  color: var(--ink);
}

.legal-page p {
  margin: 12px 0;
}

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

.legal-page li {
  margin: 6px 0;
}

.legal-page a {
  color: var(--accent);
}

.legal-doc__meta {
  font: 400 13.5px/1.5 var(--font-b);
  color: var(--muted);
  margin: 0 0 20px;
}

/* Черновик: текста ещё нет, стоит одна строка-заглушка. Приглушена намеренно — она не должна
 * читаться как содержание документа. */
.legal-doc__pending {
  color: var(--muted);
}

/* --- Таблицы юридического документа --------------------------------------------------------- */

/* В опубликованных редакциях десять таблиц, и это НЕСУЩИЙ текст, а не иллюстрация: перечень
 * получателей персональных данных, сроки хранения, сроки ответа субъекту, перечень
 * неуничтожаемого, тарифы. Их читают проверяющий и модератор эквайринга — таблица обязана
 * читаться КАК таблица, а не как слипшиеся строки браузерного дефолта.
 *
 * Стилизуются ТЕГИ (файл редакции классов не несёт, §4.3) — и обязательно ВНУТРИ .legal-page:
 * legal.css подключён на пяти шеллах (см. шапку файла), голое правило `table` уехало бы на
 * визитку, в дашборд и в гостевые экраны. Рамку рисуют ячейки, а не сам <table>: на узком экране
 * таблица становится контейнером прокрутки (ниже), и своя рамка дала бы двойную линию по краю.
 */

.legal-page table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  background: var(--card);
}

.legal-page th,
.legal-page td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  /* Адрес почты или ссылка не должны распирать колонку: перенос по символам включается только
   * тогда, когда слово иначе не влезает в строку. Именно `break-word`, а не `anywhere`: второй
   * обнулил бы собственный минимум таблицы, на котором стоит прокрутка на узком экране (ниже). */
  overflow-wrap: break-word;
}

.legal-page th {
  background: var(--accent-soft);
  font: 600 13.5px/1.45 var(--font-b);
  color: var(--ink);
}

.legal-page td {
  font: 400 14.5px/1.6 var(--font-b);
  color: var(--ink);
}

/* Кольцо фокуса таблицы. У всех десяти таблиц в разметке редакций стоит tabindex="0" — иначе
 * прокрутить широкую таблицу с клавиатуры было бы нечем: браузер скроллит только то, что умеет
 * получать фокус. Своего кольца у этих десяти таб-стопов не было: глобального :focus-visible в
 * base.css нет, а браузерный дефолт у каждого свой и на светлой подложке местами почти не виден.
 *
 * outline, а не box-shadow: в режиме высокой контрастности (forced-colors) тени убирает сам
 * браузер, а outline остаётся — ему лишь принудительно меняют цвет на системный.
 *
 * outline-offset: 2px — не косметика. При border-collapse внешняя граница крайних ячеек И ЕСТЬ
 * край таблицы, и кольцо без отступа легло бы прямо на неё, читаясь как утолщённая рамка, а не как
 * фокус. Отступ даёт 2px подложки --paper между серой рамкой и зелёным кольцом; замер контраста:
 * --accent (#4b7453) к --paper — 4.88:1, к самой рамке --border — 4.11:1 (порог нетекстового
 * контраста — 3:1), то есть кольцо отличимо и от фона, и от границы таблицы.
 *
 * Кольцо не уезжает при прокрутке: outline рисуется на собственном боксе элемента, а не на его
 * прокручиваемом содержимом, и своим же overflow-x не обрезается.
 *
 * Именно :focus-visible: гость, ткнувший в таблицу пальцем или мышью, чтобы её проскроллить,
 * кольца не получает — оно для клавиатуры. Парного `:focus { outline: none }` здесь намеренно НЕТ:
 * оно сняло бы дефолт браузера там, где :focus-visible не поддержан, и таб-стоп остался бы вообще
 * без индикации. */
.legal-page table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Узкий экран — главный сценарий чтения. Широкая таблица обязана прокручиваться ВНУТРИ СЕБЯ:
 * горизонтальная прокрутка всей страницы ломает документ целиком, а не одну таблицу.
 *
 * Обёртки-контейнера (<div role="region">) в разметке нет — и это ВЫБОР, а не запрет. Утверждён
 * владельцем видимый ТЕКСТ редакции; служебный атрибут, текста не добавляющий, в файл вносить
 * можно — tabindex="0", scope="col" и aria-labelledby там уже стоят. Обёртку не завели потому, что
 * цена выше пользы: она правит пять файлов опубликованных редакций, а их sha256 заморожен в
 * PUBLISHED_MANIFEST (apps/core/tests/test_legal_archive.py), и правка строки манифеста там —
 * ревью-точка, а не «обновил хеш». Пользы же почти нет: tabindex="0" + aria-labelledby на самом
 * <table> уже дают ровно то, ради чего заводят role="region" с именем, — таб-стоп и доступное имя.
 *
 * Поэтому контейнером прокрутки становится сам <table> (display:block + overflow-x): внутри него
 * браузер строит анонимный табличный бокс, таблица остаётся таблицей, border-collapse наследуется
 * в него.
 *
 * Что выбор оставляет на столе — и при каком условии его пересматривать. display:block на
 * <table> исторически ронял табличную семантику в части скринридеров: обёртка позволила бы
 * таблице остаться display:table. На живом скринридере это НЕ проверено; проверка и есть
 * условие пересмотра, а не повод трогать замороженные редакции сейчас.
 *
 * Порога ширины (min-width на ячейках) здесь НЕТ намеренно. Собственный минимум таблицы — сумма
 * самых длинных слов по колонкам — у широких таблиц и так шире экрана, и прокрутка возникает
 * сама: замер при 360px (контейнер 324px) даёт 549px у четырёхколоночной «кому передаются данные»
 * и 361–410px у трёхколоночных. Этот же минимум — правильный пол читаемости, потому что он не
 * рвёт слова. Константа сверх него только заставила бы прокручиваться и те таблицы, которые
 * укладываются в экран целиком (перечень файлов cookie), — то есть ухудшила бы ровно то, что
 * должна была улучшить.
 *
 * Блок ограничен `screen` НАМЕРЕННО: на печати ширину задаёт бумага, а контейнер прокрутки отдаёт
 * в печать обрезанное содержимое. На печати таблица остаётся display:table и печатается целиком.
 * Своего @media print в проекте нет, и заводить его эта задача не уполномочена.
 */
@media screen and (max-width: 600px) {
  .legal-page table {
    display: block;
    overflow-x: auto;
  }

  /* Отступы поменьше: на 324px каждый лишний пиксель поля — это пиксель, отнятый у текста. */
  .legal-page th,
  .legal-page td {
    padding: 8px 10px;
  }
}

/* --- Цитата-преамбула ----------------------------------------------------------------------- */

/* Единственная цитата раздела — преамбула поручения на обработку персональных данных Гостей
 * (оферта §9). Она вводит роли сторон по части 3 статьи 6 № 152-ФЗ, а дальше по пунктам идёт уже
 * наше собственное обязательство. Слить их в один поток текста нельзя: граница «рамка нормы ↔
 * наше обязательство» должна быть видна глазом, иначе теряется смысл, а не оформление. */

.legal-page blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
}

/* Абзац внутри цитаты несёт свои поля (см. `.legal-page p`) — они сложились бы с padding рамки. */
.legal-page blockquote > :first-child {
  margin-top: 0;
}

.legal-page blockquote > :last-child {
  margin-bottom: 0;
}

/* --- Маркер черновика: видимый блок-дисклеймер --------------------------------------------- */

/* Пара к машинным маркерам (data-legal-status, meta robots, X-Robots-Tag). Заметный, но не
 * тревожный: это проект документа, а не ошибка, — предупреждающие токены, не danger. */
.legal-draft-notice {
  margin: 16px 0 24px;
  padding: 14px 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-ink);
  border-radius: var(--radius);
  font: 400 14px/1.55 var(--font-b);
  color: var(--warn-ink);
}

/* --- Архив редакций ------------------------------------------------------------------------ */

.legal-doc__archive {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.legal-doc__archive h2 {
  font: 600 16px/1.4 var(--font-h);
  margin: 0 0 8px;
}

.legal-doc__archive ul {
  margin: 0;
  padding-left: 20px;
}

/* --- Индекс /legal/ ------------------------------------------------------------------------ */

.legal-index__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.legal-index__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.legal-index__item a {
  font: 400 16px/1.45 var(--font-b);
  color: var(--accent);
}

.legal-index__meta {
  display: block;
  margin-top: 3px;
  font: 400 13px/1.4 var(--font-b);
  color: var(--muted);
}

/* --- Реквизиты /legal/imprint --------------------------------------------------------------- */

.legal-imprint__list {
  margin: 20px 0 0;
}

.legal-imprint__list dt {
  font: 400 13px/1.4 var(--font-b);
  color: var(--muted);
  margin-top: 16px;
}

.legal-imprint__list dd {
  margin: 3px 0 0;
  font: 400 15.5px/1.6 var(--font-b);
  color: var(--ink);
}

/* Реквизиты не утверждены → значений нет ВОВСЕ, только пометка (ТЗ §4.5: плейсхолдер на публичном
 * сайте есть публикация недостоверных сведений о владельце). Решение принимает entity, не стиль —
 * приглушить нечего, поэтому пометка оформлена как обычный текст состояния. */
.legal-imprint__pending {
  color: var(--muted);
}

/* --- Мобайл: главный сценарий чтения гостя — телефон --------------------------------------- */

@media (max-width: 600px) {
  .legal-page {
    padding: 24px 18px 4px;
  }

  .legal-doc__title,
  .legal-index__title,
  .legal-imprint__title {
    font-size: 23px;
  }

  .legal-footer {
    padding: 16px 18px 24px;
  }
}