/*
 * Кирпич · нижнее меню.
 *
 * Полоса у нижнего края на телефоне: значок, под ним подпись. Классов
 * внутри нет, кроме имени блока и пометки текущего пункта: остальное
 * описывают теги.
 *
 *     nav.tabbar
 *         menu
 *             li a > i + span
 *             li a.here
 *
 * Именно полоса внизу, а не выезжающая панель: до неё дотягивается
 * большой палец, она не закрывает содержимое и не требует поведения,
 * чтобы открыться.
 *
 * Список ведётся отдельно от боковой колонки. Раньше полосу внизу
 * рисовала она, и меню на телефоне зависело от того, объявила ли
 * страница колонку: на разделе полоса была, на записи пропадала. Здесь
 * список свой, поэтому меню одинаково на всех страницах.
 */

/*
 * На широком экране полосы нет вовсе.
 *
 * Скрыта по умолчанию, а показывается в медиазапросе, а не наоборот:
 * порядок правил тогда совпадает с порядком мысли, и забытое правило
 * прячет полосу, а не оставляет её висеть посреди широкой страницы.
 *
 * display: none, а не масштаб, как у боковой колонки: там нулём гасит
 * настройка-переменная, и свойство должно её читать. Здесь показ решает
 * ширина экрана, а её читает сам медиазапрос.
 */
.tabbar {
    display: none;
}

@media (max-width: 899px) {
    .tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        /*
         * Выше боковой колонки и меню: полоса лежит поверх страницы, и
         * прилипшая шапка при прокрутке не должна проезжать над ней.
         */
        z-index: 15;
        display: block;
        background: var(--menu-back);
        /*
         * Насыщенность вместе с размытием, как у шапки: под
         * полупрозрачным белым краски выцветают, и без неё страница под
         * полосой выглядит припудренной.
         *
         * Префикс нужен: Safari до недавних версий понимает свойство
         * только с ним, а полоса без размытия становится мутным белым
         * прямоугольником.
         */
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        /* Линия сверху, а не тень: под полосой у нижнего края её не видно. */
        box-shadow: 0 calc(var(--hairline) * -1) 0 var(--separator);
        /*
         * Поле под вырез снизу: на телефонах с жестовой навигацией внизу
         * экрана лежит системная полоса, и подписи уходили бы под неё.
         */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /*
     * Пункты делят ширину поровну. Списочные маркеры и отступы браузера
     * снимаются здесь же: тег menu вне этого блока нам не встречается.
     */
    .tabbar menu {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: space-around;
        list-style: none;
    }

    .tabbar li {
        /*
         * Доля, а не содержимое: иначе «Обжиг» и «Как мы работаем»
         * заняли бы разное место, и полоса читалась бы кривой.
         */
        flex: 1;
        /*
         * Доля с нулём в основе: без него длинная подпись раздувает
         * пункт сверх своей доли, потому что flex-basis по умолчанию
         * считается по содержимому.
         */
        flex-basis: 0;
        /*
         * Пункт не сжимается уже своей доли, а лишнее прячется ниже
         * обрезкой подписи: сжатие двигало бы значки с центра.
         */
        min-width: 0;
    }

    /*
     * Пункт полосы: значок, под ним подпись. Высота задана целиком, а не
     * полями, потому что по пункту попадают пальцем, а не курсором, и
     * область нажатия должна быть одинаковой у пункта со значком и без.
     */
    .tabbar a {
        display: flex;
        height: var(--tabbar-height);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding-inline: 4px;
        color: var(--color-muted);
        font-size: var(--tabbar-text);
        line-height: 1;
        text-align: center;
        text-decoration: none;
    }

    /* Линия под подписью в полосе читается как подчёркивание значка. */
    .tabbar a:hover {
        text-decoration: none;
    }

    /*
     * Текущий пункт. В шапке текущий раздел ничем не выделен, а здесь
     * выделен намеренно: полоса стоит на экране всё время и служит
     * указателем места, а меню наверху только списком переходов.
     *
     * Цветом, а не насыщенностью: жирная подпись шире обычной, и соседи
     * сдвигались бы при каждом переходе.
     */
    .tabbar a.here {
        color: var(--color-accent);
    }

    /*
     * Подпись в одну строку. Не помещается — обрезается многоточием:
     * перенос на вторую строку вытолкнул бы значок вверх, и пункты
     * встали бы на разной высоте.
     */
    .tabbar span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Значок необязателен: без него в пункте остаётся одна подпись. */
    .tabbar i {
        display: flex;
        width: var(--tabbar-icon);
        height: var(--tabbar-icon);
        align-items: center;
        justify-content: center;
    }

    .tabbar i > img,
    .tabbar i > svg {
        max-width: 100%;
        max-height: 100%;
    }

    /*
     * Место под полосу в конце страницы: без него последняя строка
     * текста оказывается под ней и дочитать её нельзя.
     *
     * Полем у main, а не у body: фон и полоса тянутся во всю ширину, и
     * поле у body отодвинуло бы от нижнего края их тоже.
     */
    .with-tabbar > .page-column > main {
        padding-bottom: calc(
            var(--tabbar-height) + env(safe-area-inset-bottom) + 24px
        );
    }

    /*
     * Боковая колонка при своём нижнем меню остаётся колонкой и полосой
     * не становится: две одинаковые полосы друг на друге читались бы
     * поломкой, а нижнее меню собрано вручную и главнее.
     *
     * Разделы колонки при этом не теряются: до них добираются со
     * страницы раздела, куда полоса и ведёт.
     */
    body.with-tabbar > aside:not(.outline-column) {
        display: none;
    }
}