/* wrap.css — КОЛОНКА РАЗДЕЛА. Одно место, где записаны её ширина и отступы.
 *
 * Зачем понадобился. Правила у класса .wrap не было ни одного общего: #tab-tasks .wrap жил в por-panel.css,
 * #tab-requests .wrap — в zay-panel.css, #tab-clients .wrap — в crm-panel.css, и так далее. Предупреждение об
 * этом стояло в crm-panel.css с прошлого раза («Забыв его здесь, я получил раздел без колонки вовсе»), но
 * предупреждение не правило: при следующем разделе число разошлось опять. Замер перед выносом:
 *
 *   на 960px   tasks/planner/requests/clients 960/20px 18px   notif/settings 720/14px 14px
 *   на 360px   tasks/planner 14px 12px   requests/clients 16px 14px   notif 14px 14px   settings 12px 12px
 *
 * То есть на широком экране две формулы, а на узком ЧЕТЫРЕ — при том что колонка во всех разделах одна и та
 * же. Переход между разделами давал скачок ширины.
 *
 * ⚠️ ЧИСЛА В ПЕРЕМЕННЫХ, А ПРАВИЛО ОДНО. Разделам, у которых контейнер называется иначе (планировщик —
 *    .planner-wrap, сообщения — .chat-wrap), своё правило нужно: у них поверх колонки лежит своя раскладка
 *    (двухпанельная сетка, высота от вьюпорта). Но ЧИСЛА им брать неоткуда, кроме этого файла, — иначе
 *    разъедутся они. Поэтому здесь объявлены --wrap-max и --wrap-pad, а те два правила их читают.
 *
 * ⚠️ ПОД .tab-panel, А НЕ ГОЛЫЙ .wrap. Имя .wrap занято и вне оболочки: landing.css задаёт ему свою ширину
 *    для публичных страниц. Скоуп по контейнеру вкладки отсекает их наверняка, а специфичность (0,2,0)
 *    оставляет разделу возможность поправить свою колонку у себя: #tab-x .wrap это (1,1,0) и выигрывает.
 *
 * ⚠️ НИЖНИЙ ОТСТУП СЧИТАЕТСЯ ОТ --bnav-h — высоты нав-бара, которую замеряет и подставляет сам
 *    bottom_nav.php. Своё число здесь означает молчаливый разъезд при первой правке бара: так уже расходились
 *    60/48/68/72/76/88/100 в семи местах на один и тот же бар.
 * ⚠️ env(safe-area-inset-bottom) СЮДА НЕ ДОБАВЛЯТЬ: бар учитывает её своим padding, а --bnav-h это его
 *    offsetHeight, то есть safe-area уже внутри. Прибавив ещё раз, получим двойной зазор на iPhone.
 */

.tab-panel {
    --wrap-max: 960px;
    --wrap-pad: 20px 18px calc(var(--bnav-h, 56px) + 12px);
}

@media (max-width: 640px) {
    .tab-panel { --wrap-pad: 16px 14px calc(var(--bnav-h, 56px) + 12px); }
}

.tab-panel .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: var(--wrap-pad); }