/* ======================================================================
   Правовые страницы (A9–A11)
   ----------------------------------------------------------------------
   Отдельный файл, а не раздел в style.css. Причина простая: этот текст
   читают не так, как пользуются приложением. В приложении человек
   смахивает карточки одним пальцем и на экран смотрит мельком;
   сюда он приходит читать — и ему нужны длина строки, межстрочный
   интервал и контраст, а не компактность.

   Токены при этом общие, из style.css: страницы одного сервиса,
   а не отдельный сайт.
   ====================================================================== */

.legal-body {
    background: var(--bg-color);
    color: var(--text-primary);

    /* Всё это правило — отмена того, чем body живёт в приложении.
       Там оно ростом ровно в экран и с `overflow: hidden`: карточки
       позиционируются внутри, и страница не должна прокручиваться
       вообще. Здесь наоборот — текст длиннее экрана всегда.

       Без `height: auto` и `overflow: visible` правовые страницы
       обрезались по нижнему краю экрана и не прокручивались ни
       колесом, ни пальцем. */
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.legal-header {
    border-bottom: 1px solid var(--card-border);
    padding: var(--gap-3) var(--gap-4);
}

.legal-logo {
    font-size: 1.15rem; font-weight: 900; letter-spacing: -0.5px;
    color: var(--text-primary); text-decoration: none;
}
.legal-logo span { color: var(--accent-red); }

/* Ширина колонки — по читаемости, а не по экрану. Больше 68 символов
   в строке глаз теряет начало следующей. */
.legal-page {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--gap-5) var(--gap-4) var(--gap-6);
    font-size: 1rem;
    line-height: 1.65;
}

.legal-crumbs { margin-bottom: var(--gap-4); font-size: .85rem; }
.legal-crumbs a { color: var(--text-secondary); text-decoration: none; }
.legal-crumbs a:hover { color: var(--text-primary); }

.legal-page h1 {
    font-size: 1.6rem; font-weight: 800; line-height: 1.25;
    margin-bottom: var(--gap-2);
}

.legal-lead {
    color: var(--text-secondary);
    font-size: 1.02rem;
    margin-bottom: var(--gap-5);
}

.legal-page h2 {
    font-size: 1.12rem; font-weight: 800;
    margin: var(--gap-5) 0 var(--gap-2);
}

.legal-page p { margin-bottom: var(--gap-3); }
.legal-page ul { margin: 0 0 var(--gap-3) 1.1rem; }
.legal-page li { margin-bottom: var(--gap-2); }

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

/* --- Таблицы ---
   Заголовок колонки тут не украшение: без него «40%» напротив «Жанры»
   читается как доля фильмов, а не как вес признака. */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap-3) 0 var(--gap-4);
    font-size: .93rem;
    /* Фиксированная раскладка, иначе на телефоне браузер отдаёт левой
       колонке всё место под длинный текст, а правую сжимает в лесенку
       по одному слову. Проверено на 375 px */
    table-layout: fixed;
}
.legal-table th:first-child,
.legal-table td:first-child { width: 44%; }
.legal-table th,
.legal-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
}
.legal-table th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-secondary); font-weight: 700;
}
.legal-table td:last-child { color: var(--text-secondary); }
.legal-host {
    display: block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .76rem; color: var(--text-secondary); opacity: .75;
    /* `kinopoiskapiunofficial.tech` — 28 знаков без единого пробела.
       В моноширинном шрифте это шире колонки, а при `table-layout: fixed`
       лишнее не расширяет ячейку, а вылезает поверх соседней: хост
       наезжал на «Русские названия и оценка российских зрителей».
       `anywhere` разрешает перенос внутри слова — но только когда
       иначе не помещается, короткие хосты остаются целыми. */
    overflow-wrap: anywhere;
}

/* --- Атрибуция TMDB ---
   Их условия требуют, чтобы логотип был МЕНЕЕ заметен, чем маскот
   и логотип MovieMatch, и запрещают его перекрашивать, растягивать,
   отражать и поворачивать. Поэтому здесь нет ни filter, ни transform,
   ни собственного цвета — только высота, заданная в разметке. */
.legal-attribution {
    display: flex; align-items: center; gap: var(--gap-3);
    flex-wrap: wrap;
    padding: var(--gap-3) var(--gap-4);
    margin-bottom: var(--gap-5);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--r-sm);
}
.legal-attribution p {
    margin: 0;
    font-size: .84rem;
    color: var(--text-secondary);
}
.legal-tmdb-logo { height: 22px; width: auto; display: block; }

/* --- Заготовка --- */
.legal-stub {
    padding: var(--gap-4);
    background: var(--card-bg);
    border: 1px solid var(--accent-orange);
    border-radius: var(--r-sm);
    margin-bottom: var(--gap-4);
}
.legal-stub h2 { margin-top: 0; }
/* Мелко и в углу: страница юридическая, спорить с текстом он тут
   не должен. */
.legal-cat { float: right; width: 96px; margin: 0 0 var(--gap-2) var(--gap-3); }
.legal-stub p:last-child { margin-bottom: 0; }

/* --- Подвал: владелец и почта --- */
.legal-footer {
    margin-top: var(--gap-6);
    padding-top: var(--gap-4);
    border-top: 1px solid var(--card-border);
    font-size: .93rem;
}
.legal-footer p { margin-bottom: var(--gap-1); color: var(--text-secondary); }

/* Незаполненные реквизиты видны сразу и намеренно некрасиво:
   страница раскрытия без владельца требование не закрывает. */
.legal-missing {
    color: var(--dislike-color) !important;
    font-weight: 700;
}

.legal-other { margin-top: var(--gap-5); font-size: .93rem; }
.legal-other ul { list-style: none; margin-left: 0; }
.legal-soon {
    font-size: .76rem; color: var(--text-secondary);
    border: 1px solid var(--card-border); border-radius: 20px;
    padding: 1px 8px; margin-left: 6px;
}

@media (min-width: 900px) {
    .legal-page { padding-top: var(--gap-6); }
    .legal-page h1 { font-size: 2rem; }
}

/* ======================================================================
   Экран согласия перед входом (152-ФЗ)
   ----------------------------------------------------------------------
   Живёт на вёрстке правовых страниц: это тоже текст, который читают,
   а не экран приложения. Своего файла ради двух десятков строк заводить
   незачем.
   ====================================================================== */
.consent-page { max-width: 34rem; }

.consent-what {
    padding: var(--gap-4);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--r-sm);
    margin-bottom: var(--gap-4);
}
.consent-what h2 { margin-top: 0; }
.consent-what ul { margin-bottom: var(--gap-3); }
.consent-note { font-size: .88rem; color: var(--text-secondary); margin-bottom: 0; }

.consent-form { display: flex; flex-direction: column; gap: var(--gap-4); }

/* Галочка не предустановлена и не спрятана: согласие, поставленное
   за человека, согласием не является. Область нажатия — вся строка
   с текстом, иначе на телефоне попадают мимо квадратика. */
.consent-check {
    display: flex; gap: var(--gap-3); align-items: flex-start;
    font-size: .92rem; line-height: 1.5; cursor: pointer;
}
.consent-check input {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
    accent-color: var(--accent-orange); cursor: pointer;
}

.consent-go { width: 100%; justify-content: center; }

.consent-error {
    padding: var(--gap-3);
    border: 1px solid var(--dislike-color);
    border-radius: var(--r-sm);
    color: var(--dislike-color);
    font-size: .9rem;
}

.consent-back { margin-top: var(--gap-4); font-size: .85rem; }
.consent-back a { color: var(--text-secondary); }