/* мобильные
   Вынесено из index.html в фазе 3. Порядок подключения в <head> значим:
   файлы идут ровно в том порядке, в каком эти правила шли внутри <style>. */
/* ===== Мобильные ===== */
/* Колонка в 360px на телефоне не оставляет карте ничего, поэтому здесь панель не
   раздвигает карту, а выезжает поверх неё. По умолчанию — свёрнута (см. JS). */
@media (max-width: 768px) {
  #app, #app.sidebar-collapsed { grid-template-columns: 1fr 0; }

  #sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    width: min(360px, 88vw);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 10001;                                  /* поверх легенды и тостов */
  }
  #app:not(.sidebar-collapsed) #sidebar { transform: translateX(0); }

  /* Язычок едет вместе с панелью и остаётся кликабельным — иначе её нечем закрыть.
     Стоит не посередине края, а вверху, на одной линии с кнопками масштаба: полоса
     рекламы 67 px плюс тот же зазор 10 px. Посередине он ложился на раскрытую легенду
     и закрывал её строки (замечание владельца 19.09.2026, снимок со счётчиком
     «Аэропортов» под язычком). Легенда растёт снизу и выше язычка не поднимается. */
  .sidebar-handle {
    position: fixed;
    top: 77px;
    right: 0;
    transform: none;
    width: 28px;
    height: 72px;
    z-index: 10002;
    transition: right 0.22s ease;
  }
  #app:not(.sidebar-collapsed) .sidebar-handle { right: min(360px, 88vw); }
  /* Открытая панель оставляет от карты полоску в полсотни пикселей, и язычок у её
     края встаёт ровно на кнопки масштаба. Масштабировать эту полоску незачем —
     кнопки гаснут, пока панель открыта, и возвращаются вместе с картой. */
  .leaflet-control-zoom { transition: opacity 0.22s ease, visibility 0s linear 0s; }
  #app:not(.sidebar-collapsed) .leaflet-control-zoom {
    opacity: 0; visibility: hidden;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
  }
  /* Подсказка режима метки стоит по центру на той же высоте, что кнопки масштаба
     слева и язычок справа, и не заходит ни на то, ни на другое: 48 px с каждой
     стороны — кнопки (10 + 34) и язычок (28) с зазором. */
  .hint-banner { max-width: calc(100% - 96px); box-sizing: border-box; }

  /* Легенда на телефоне. Ширина считается вместе с полями: раньше к «100vw − 24px»
     прибавлялись ещё поля 12 + 12, и раскрытая карточка уходила за правый край
     экрана (снимок владельца 19.09.2026). Теперь с обеих сторон по 12 px на любом
     телефоне. Высота — до верхнего ряда: кнопки масштаба кончаются на 163 px
     (язычок — раньше, на 149), плюс зазор 10 сверху и 18 снизу; что не поместилось,
     прокручивается внутри карточки. */
  .legend {
    box-sizing: border-box;
    min-width: 234px;                          /* прежние 210 + поля */
    max-width: min(304px, calc(100% - 24px));  /* прежние 280 + поля */
    max-height: calc(100% - 191px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .legend.expanded { width: calc(100% - 24px); max-width: none; max-height: calc(100% - 191px); }

  /* Плотность панели (замечание владельца 19.09.2026: «очень много воздуха на мобилке
     по вертикали»). Строка 36 px, а не 44: на телефоне по ней попадают пальцем, но
     она во всю ширину колонки, и 36 px хватает. Шапка, фильтры и низ — те же, только
     без лишних полей; кегли не меняются. */
  .row { height: 36px; }
  .brand-bar { padding: 12px 18px 10px; }
  .filters { padding: 10px 0; }
  .sidebar-foot { padding: 6px 18px 12px; }
  .sidebar-foot #add-flag { margin-bottom: 8px; }
  .sidebar-foot .btn { padding: 9px; }
  .ad-footer { padding: 9px 0 8px; }
  .ad-footer .ad-head { margin-bottom: 4px; }

  /* Плашка «пусто» уже экрана и не под язычком панели. */
  .empty-state { width: min(250px, 72vw); padding: 14px 14px 12px; }

  /* Блок «Ссылка на этот вид» на телефоне встаёт вниз колонки — ближе к пальцу,
     а не к верхнему краю экрана. Поля те же, что на широком: содержимое стоит
     по полям колонки. Нижний отступ учитывает полосу жестов iPhone. */
  .share-sheet { justify-content: flex-end; }
  .share-card {
    padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(12px);
  }
  .share-sheet.leaving .share-card { transform: translateY(16px); }
}