/* З2 (ТЗ-23, 11.11.2026): узкий экран 375px — карта важнее панелей.
   Вынесено из index-late.css отдельным файлом: гейт live-кода не пускает
   файл длиннее 500 строк (.git/hooks/pre-commit), а index-late.css к моменту
   правки уже имел 505.
   Подключается ПОСЛЕ index-late.css: view_tabs.js дописывает свой <style> в head
   ещё позже, поэтому там, где он спорит с нами, мы берём специфичностью
   (префикс html), а не порядком. */

/* === З2 (ТЗ-23, 11.11.2026): на 375px карта важнее панелей.
               Три независимых дефекта, три блока:
               1) полоса вкладок схлопывалась в ширину 0 (theme_toggle.css: flex 1 1 auto) —
                  тапы приходили в кнопку темы/слоган, вкладки были некликабельны;
               2) панель расчёта в «Еде» была fixed на весь экран и прятала карту
                  (body.view-food #map{visibility:hidden}) — гексы нельзя было тапать;
               3) нижняя полоса островов резервировала 35vh даже в свёрнутом виде.
               Развёрнутые панели — шторка сверху, карта остаётся ≥60vh. */
        @media (max-width: 420px) {
            #app-topbar {
                display: flex !important; flex-wrap: wrap !important;
                height: auto !important; min-height: 40px; align-items: center;
            }
            #toggle-menu-button { order: 1; flex: 0 0 auto; }
            #brand-slogan, #view-tab-hint { display: none !important; }
            #view-tabs {
                order: 2; flex: 1 1 100% !important; width: 100% !important;
                min-width: 0; display: flex !important; flex-wrap: wrap !important;
                overflow: visible !important;
            }
            #view-tabs::-webkit-scrollbar { display: none; }
            #view-tabs .view-tab { flex: 0 0 auto; min-height: 34px; margin: 1px; }
            /* Кнопка темы живёт ВНУТРИ блока вкладок (theme_btn.js: bar.appendChild) —
               на узком экране она не должна сжиматься и уводить тапы с ярлыков. */
            #view-tabs #basemap-theme-toggle { flex: 0 0 auto; min-height: 34px; margin: 1px; }
            /* Контролы Leaflet прижаты к y=0 и уходят под двухстрочный топбар.
               Смещение считаем не магией в пикселях, а высотой топбара: её задаёт
               JS через --topbar-h (ResizeObserver в view_tabs.js), потому что на
               ар/кит/ит строки вкладок переносятся по-разному. */
            .leaflet-top { top: calc(var(--topbar-h, 44px) + 6px) !important; }

            /* «Еда»: шторка снизу, карта живая и кликабельная.
               html-префикс обязателен: view_tabs.js дописывает свой <style> в head
               позже этого файла, и при равной специфичности его !important правило
               оказывается ниже по списку подключений. Здесь мы выше специфичностью. */
            html body.view-food #map { visibility: visible !important; }
            html body.view-food #ih-kit-panel {
                left: 0 !important; right: 0 !important; top: auto !important;
                bottom: 0 !important; height: 38vh !important;
                overflow: hidden !important;
            }
            /* Без этого содержимое переливается за нижнюю шторку и своим <p> бьёт
               хит-тест по центру карты: панель выглядит во весь экран. */
            html body.view-food #ih-kit-panel .ih-kit-win-body {
                min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
            }
            html body.view-food.kit-shut #ih-kit-panel { height: 44px !important; }
            html body.view-food.kit-shut #ih-kit-panel .ih-kit-win-body,
            html body.view-food.kit-shut #ih-kit-panel .ih-kit-tabs { display: none !important; }
            html body.view-food #map-container { bottom: 38vh !important; }
            html body.view-food.kit-shut #map-container { bottom: 44px !important; }

            /* «Острова»: нижняя полоса по умолчанию свёрнута — класс .collapsed
               уже даёт 40px, а layoutMap() оставляет карте 48px снизу. */
            #islands-overlay.collapsed { height: 44px !important; }

            /* Плашка шкал «Мир/Экран»: modules/color_scale.js:123 placeScaleBox()
               считает left от правого края меню расчёта, а на мобиле меню скрыто
               (width=0) и остаётся дефолт 420px; кламп room=clientWidth-48=327
               отодвигает её лишь до 167px — правый край плашки (~407px) всё равно
               за экраном. !important бьёт по inline-стилю, который пишет JS. */
            html body #scale-mode {
                left: 8px !important;
                right: 8px !important;
                width: auto !important;
                max-width: calc(100vw - 16px) !important;
                white-space: normal !important;
                font-size: 12px !important;
            }

            /* Линейка GraphicScale: style.css:1366 прижимает нижний левый угол
               карты к left:372px — на десктопе это «не залезать на левое меню»,
               на 375px весь блок уезжает за правый край. Замер дефекта:
               qa/logs/z2_edge_box_probe.txt → div.label.subunitsLabel
               rect=[338,653,106,20] при вьюпорте 375 (белый обрезок «1000km»).
               Угол возвращаем к левому краю; плагин же ставит подписи
               left:0; margin-left:-50px (vendor/Leaflet.GraphicScale.min.css),
               что без обнуления отступа выталкивает их за левый край. */
            .leaflet-bottom.leaflet-left { left: 0 !important; }
            .leaflet-bottom.leaflet-left .leaflet-control-graphicscale {
                margin-left: 8px !important;
                max-width: calc(100vw - 16px);
            }
            .leaflet-control-graphicscale-inner .label { margin-left: 0 !important; }

            #kit-shutter {
                display: inline-flex !important; align-items: center; gap: 6px;
                margin-left: auto; border: 1px solid #cbd5e1; background: #fff;
                border-radius: 6px; font: 700 13px/1.2 sans-serif; color: #1b5e20;
                padding: 5px 10px; min-height: 32px; cursor: pointer;
            }
        }
        /* Кнопка-шторка показывается только там, где она имеет смысл на мобиле. */
        #kit-shutter { display: none; }