/* ---------------------------------------------------------------------------
 * Юридические страницы (/terms, /privacy).
 *
 * Отдельный файл, а не правка styles.css: styles.css принадлежит другой задаче и
 * перезаписывается деплоем кабинета, а эти правила нужны только двум страницам.
 * Все цвета — через переменные темы, поэтому страницы одинаково читаются
 * в тёмной и светлой теме.
 * ------------------------------------------------------------------------ */

.legal-page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 0 4rem;
    /* Длинный текст читается по ширине строки, а не по ширине экрана. */
    line-height: 1.7;
}

.legal-page h1 {
    font-size: 1.75rem;
    margin-bottom: .25rem;
}

.legal-page h2 {
    font-size: 1.125rem;
    margin: 2rem 0 .75rem;
    color: var(--color-text-primary);
}

.legal-page p,
.legal-page li {
    color: var(--color-text-secondary);
}

.legal-page ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.legal-page li {
    margin-bottom: .35rem;
}

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

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: .9375rem;
    /* Таблица с тремя колонками не влезает в 360 px — даём ей прокрутку внутри себя,
       иначе горизонтально поедет вся страница. */
    display: block;
    overflow-x: auto;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--color-border-primary);
    padding: .5rem .75rem;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    color: var(--color-text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.legal-table td {
    color: var(--color-text-secondary);
}