/* shared/legal/info-page.css
 * ============================================================================
 * ОБЩИЙ СЛОЙ ИНФОРМАЦИОННЫХ СТРАНИЦ
 * ============================================================================
 *
 * Сюда относятся: поддержка, центр приватности, политика cookies, политика
 * конфиденциальности, памятка о самозанятости, страница блокировки и реестр
 * документов. У каждой свой корневой блок (.sup-shell, .pc-shell,
 * .legal-shell, .npd-shell, .blk-shell, .legal-index), но общего у них два.
 *
 * ── 1. Страница не должна быть флекс-элементом ──────────────────────────────
 *
 * shared/legacy/styles.css задаёт body { display: flex; align-items: center;
 * justify-content: center } — это написано для экранов входа, где на пустом
 * фоне стоит одна карточка. Информационные страницы попадали под то же
 * правило и превращались в колонку по ширине содержимого, прижатую к левому
 * краю; общий подвал вставал не под текстом, а СПРАВА от него — второй
 * колонкой. Именно так «Поддержка» и выглядела.
 *
 * ── 2. Со страницы должен быть выход ────────────────────────────────────────
 *
 * На «Поддержке» и на странице блокировки не было ни одной ссылки наружу:
 * человек, открывший их из письма или из кабинета в новой вкладке, оставался
 * там навсегда. Ряд .info-nav — общий выход: «Назад» (в историю, если внутри
 * вкладки есть куда) и «На главную».
 */

body:has(> .sup-shell),
body:has(> .pc-shell),
body:has(> .legal-shell),
body:has(> .npd-shell),
body:has(> .blk-shell),
body:has(> .legal-index) {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: var(--legal-surface-soft, var(--ws-bg-soft));
}

/* ── Ряд выхода ──────────────────────────────────────────────────────────── */

.info-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.info-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--legal-line, var(--ws-line));
    border-radius: var(--legal-radius-pill, 999px);
    background: var(--legal-surface, var(--ws-surface));
    color: var(--legal-fg, var(--ws-fg));
    font: 600 13px/1 var(--legal-font-sans, Inter, system-ui, sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.info-nav__link:hover {
    border-color: var(--legal-accent, var(--ws-primary));
    color: var(--legal-accent, var(--ws-primary));
}

.info-nav__link:focus-visible {
    outline: 2px solid var(--legal-accent, var(--ws-primary));
    outline-offset: 2px;
}

/* Переключатель темы висит в правом верхнем углу поверх страницы. На узком
   экране ряд выхода дотягивался до него, и последняя ссылка уезжала под
   кружок — резервируем место. */
@media (max-width: 599px) {
    .info-nav {
        padding-right: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .info-nav__link { transition: none; }
}


/* Заголовки страниц выключены влево.
   Общий h1 из shared/legacy/styles.css центрирует любой заголовок — правило
   написано для экранов входа с одной карточкой посередине. На странице с
   текстом получалось так: заголовок по центру, а всё под ним — по левому
   краю. */
:is(.sup-shell, .pc-shell, .legal-shell, .npd-shell, .blk-shell, .legal-index) :is(h1, h2) {
    text-align: left;
}