/* Общие классы портала — то, что стояло одинаковыми копиями в файлах
 * страниц. Подключается сразу после chrome.css (_header_styles.html), то есть
 * на всех страницах с хромом и раньше CSS самой страницы: её правила
 * той же специфичности по-прежнему сильнее. */

/* Alpine прячет до инициализации — правило одно на все страницы с хромом. */
[x-cloak] { display: none !important; }

/* Тёмная страница портала — одна на все экраны. Пять одинаковых строк
 * стояли в восемнадцати файлах. Атрибут, а не класс: при переходе между
 * вкладками <body> остаётся прежним, и переносятся только data-*. Цвет
 * текста — у страниц: у части он свой, у части — от Bootstrap. */
body[data-surface="night"] {
    background-color: var(--bp-night-surface);
    background: linear-gradient(180deg, var(--bp-night-bg) 0%, var(--bp-night-surface) 100%);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--ff-body);
    margin: 0;
}

/* Заголовок раздела (школа: прогресс, кабинет тренера, план, расписание) —
 * одинаковой копией стоял в пяти файлах. */
.bp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: var(--bp-space-6) 4px var(--bp-space-2) 4px;
}
.bp-section-head h2 {
    font-family: var(--ff-display);
    font-size: var(--bp-fs-secondary);
    color: var(--bp-night-ink-strong);
    margin: 0;
}
.bp-section-head .section-sub {
    font-family: var(--ff-mono);
    font-size: var(--bp-fs-micro);
    color: var(--bp-night-ink-muted);
}

/* «Назад» — две разновидности, каждая стояла копиями в 3–4 файлах:
 * пилюля в кабинете тренера и школе, простая ссылка у организатора. */
.bp-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bp-night-ink-strong);
    text-decoration: none;
    font-size: var(--bp-fs-secondary);
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bp-night-raised-bg);
    border: 1px solid var(--bp-night-card-line);
    margin-bottom: 12px;
    position: relative;
}
.bp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bp-night-muted);
    text-decoration: none;
    font-size: var(--bp-fs-secondary);
    margin-bottom: var(--bp-space-2);
    position: relative;
}
/* Палец промахивается мимо 30-пиксельной кнопки, а растить её — сдвигать
 * вёрстку. Невидимая подложка дотягивает зону нажатия до 44 px. */
.bp-back-pill::before,
.bp-back-link::before {
    content: '';
    position: absolute;
    inset: -7px 0;
}
.bp-back-link::before { inset: -12px 0; }

/* Поиск: без сброса iOS рисует своё поле со скруглением и лупой поверх
 * нашего оформления. Кнопку очистки оставляем — ею пользуются. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
input[type="search"]::-webkit-search-decoration { display: none; }

/* Колонка страницы портала — 420 px по центру. Одинаковым правилом стояла
 * в одиннадцати файлах; страницы со своей колонкой (дети, видео,
 * организатор, карточка клиента) задают все три свойства сами, их CSS
 * подключается позже и сильнее. Сверху ступень 4 — одинаково у «Записи»,
 * «Моих», «Сообщений» и школы, чтобы при переходе по вкладкам содержимое
 * начиналось на одной высоте; низ — ступень 6 сверх того, что уже отвёл
 * `body.nav-*` под нижнее меню. Горизонталь 12 — общая для разделов. */
.book-container,
.ib-wrap,
.nt-wrap,
.lv-container {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--bp-space-4) 12px var(--bp-space-6);
}