/* 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-clear (bottom_nav.php: высота бара + 12px). Ни числа, ни
 *    собственного calc здесь быть не должно: так уже расходились 60/48/68/72/76/88/100 в семи местах на
 *    один и тот же бар, а повторённый calc расходится следом за ними при первой же правке дыхания.
 * ⚠️ env(safe-area-inset-bottom) СЮДА НЕ ДОБАВЛЯТЬ: бар учитывает её своим padding, а --bnav-h это его
 *    offsetHeight, то есть safe-area уже внутри. Прибавив ещё раз, получим двойной зазор на iPhone.
 */

/* ⚠️ БОКОВОЙ ОТСТУП ВЫНЕСЕН ОТДЕЛЬНО И ОБЪЯВЛЕН НА :root — ЕГО ЧИТАЕТ НЕ ТОЛЬКО КОЛОНКА. По нему равняется
   строка заголовка оболочки (shell.php, .shell-header), а она живёт ВНЕ .tab-panel: объяви мы переменную
   на панели, до шапки она бы не доехала. Замерено на dev: знак бренда стоял на 7px, текст колонки на 14 —
   левые края расходились на всех восьми разделах. */
:root {
    --wrap-pad-x: 18px;
}

.tab-panel {
    --wrap-max: 960px;
    --wrap-pad: 20px var(--wrap-pad-x) var(--bnav-clear, 68px);
}

@media (max-width: 640px) {
    :root { --wrap-pad-x: 14px; }
    .tab-panel { --wrap-pad: 16px var(--wrap-pad-x) var(--bnav-clear, 68px); }
}

/* ⚠️ width: 100% — НЕ УКРАШЕНИЕ, А ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ ВСЕЙ СТРАНИЦЫ. Колонка с
   margin: 0 auto внутри flex-раскладки размеряется по fit-content, а fit-content не бывает уже min-content
   содержимого: одна длинная строка с white-space: nowrap растягивала её до 489px при экране 390, и ездила
   вся страница. Определённая ширина уводит переполнение ВНУТРЬ, где его ловят собственные ellipsis и
   прокрутки. Правило общее намеренно: сегодня flex-колонка только у заявок, но ловушка не их, а класса
   .wrap — стоит любому разделу стать колонкой, и он наступит на неё снова. */
.tab-panel .wrap { max-width: var(--wrap-max); width: 100%; margin: 0 auto; padding: var(--wrap-pad); }

/* ⚠️ ВТОРОЙ ТОЧКИ КЛИРЕНСА НЕТ, И ЭТО ПРОВЕРЕНО, А НЕ ПРЕДПОЛОЖЕНО. Казалось, что телу внутренней прокрутки
   (реестр заявок, карточка) нужен свой padding-bottom: колонка-то прокручивается не вся. На деле тело лежит
   ВНУТРИ колонки, и её нижний padding отодвигает от панели их обоих — замер на 386×736 после правки: низ
   карточки 671 при панели с 684. Клиренс нужен только тому, кто переполняет колонку НАРУЖУ, а такого быть
   не должно вовсе: переполняющий ребёнок получает собственную прокрутку (см. экраны заявок). */