/* ==========================================================
     12. УЗКИЙ ЭКРАН
     ========================================================== */

  /* Пальцем в чип высотой 26px не попасть — на сенсорной ширине все
     нажимаемые элементы подрастают. */
  @media (max-width: 900px) {
    :root { --chip-h: 32px; --ctrl-h: 36px; --tap: 44px; }
  }

  /* Панель квестов карты ниже этой ширины не встаёт рядом с картой —
     сама карта на телефоне и так узкая, отжимать её ещё на 280px нельзя.
     Панель становится выдвижной шторкой поверх карты, а не соседом. */
  @media (max-width: 720px) {
    .map-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(86vw, 320px);
      height: auto; /* top+bottom растягивают шторку на весь экран — height задаёт desktop-правило */
      max-height: none;
      margin-top: 0;
      transform: translateX(100%);
      transition: transform .2s ease;
      z-index: 1001;
    }
    .map-sidebar.is-open { transform: translateX(0); }
    .map-sidebar-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      z-index: 1000;
    }
  }

  /* План рейда: колонки схлопываются в одну. Порог тот же, что у
     sticky-схемы выше (861px) — прилипшая карта в одноколоночной
     раскладке закрывала бы список мест собой. */
  @media (max-width: 860px) {
    /* На телефоне схема — вторая по важности после ленты: дать ей
       58vh значит отдать больше половины экрана картинке, по которой
       всё равно ничего не прочитать.

       aspect-ratio здесь СНИМАЕТСЯ, и это не украшение. В трёхколоночной
       раскладке схема держит пропорцию (.plan-map--ratio), потому что
       ширину ей задаёт колонка. В одноколоночной ширину задаёт экран, а
       высоту — это правило; оставь пропорцию включённой, и она вместе с
       фиксированной высотой посчитает ШИРИНУ: 460px × 1.613 = 742px в
       колонке на 365px, то есть горизонтальная прокрутка всей страницы.
       Файл подключается последним и выигрывает — поэтому снимать надо
       здесь, а не надеяться на порядок. */
    .plan-map { height: max(46vh, 300px); aspect-ratio: auto; }
    /* Журнал статусов: пять колонок в 400 точек не влезают — имя квеста
       на своей строке, остальное парами под ним. */
    .history-row { grid-template-columns: 1fr auto; }
    .history-row__task { grid-column: 1 / -1; white-space: normal; }
  }

  @media (max-width: 620px) {
    /* Метка ряда фильтров уходит наверх: 82px слева на 400px — это
       пятая часть ширины под одно слово. */
    .qfilters__row { grid-template-columns: 1fr; gap: 2px; }
    .qfilters__label { padding-top: 0; }
    /* Три полосы по ~120px: подпись «СМОТРИТЕЛЬ» и «0 / 7» в такую
       ширину не влезают вместе, поэтому столбец один. */
    .progress-strip { grid-template-columns: 1fr; gap: var(--sp-2); }
    /* Поиску 280px здесь взять неоткуда, и он занимал строку один:
       счётчик уезжал на второй этаж, плотность на третий, кнопка
       «фильтры» на четвёртый — 133px липкой строки на экране высотой
       800. Со 180px всё встаёт в две строки. */
    .search-box { flex: 1 1 180px; }
    /* 78 px под вид требования — пятая часть четырёхсотпиксельной
       строки под одно слово, и сама причина («Миротворец — уровень не
       ниже 3») в остаток не помещается. Подпись уходит строкой выше,
       а «участвует в N» остаётся РЯДОМ с причиной, а не под ней:
       кнопка высотой 44 px на своей строке давала 113 px на причину,
       то есть шесть причин на два экрана телефона. */
    .breason { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 4px 0; }
    .breason__kind { grid-column: 1 / -1; }
    .breason__main { grid-column: 1; padding-left: 0; }
    .breason__all { grid-column: 2; align-self: center; }
  }

  @media (max-width: 480px) {
    body { padding: 10px; }
    .brand { font-size: 18px; }
    .brand__sub { display: none; }
    .tab-btn { font-size: 12px; padding: 6px 8px; }
    /* Три колонки в 400px влезают только без «(+2,5%)» рядом с суммой —
       иначе таблица получает свою горизонтальную прокрутку и проценты
       всё равно остаются за краем. Сама сумма важнее доли. */
    .col-lastlow, .col-slots, .change-pct { display: none; }
    tbody td, thead th { padding: 7px 5px; font-size: 12px; }
    .item-short { display: none; }
    .header-right { margin-left: 0; width: 100%; }
    .profile-select { max-width: none; flex: 1 1 auto; min-width: 0; }
    .lang-switch { flex-shrink: 0; }
    .quest-name { font-size: 15px; flex-basis: 100%; }
    /* Имя здесь занимает всю строку. Раньше кнопка раскрытия стояла в
       разметке после него и уезжала на ТРЕТЬЮ строку — 52 px пустоты на
       каждый квест в компактном виде, ради которого всё и затевалось;
       лечилось order и margin-left: auto. С 22.09.2026 она первая в
       разметке, в одном ряду со статусом и без того, — костыль снят. */
    .quest-badge { font-size: 10px; }
    .profile-row__actions { margin-left: 0; }
    /* Счётчик и «на карте» ниже текста цели, а не сжатой колонкой
       справа: на 400px 132px под них не остаётся. */
    .objective-row { flex-wrap: wrap; }
    /* Отступ равен цели нажатия чекбокса плюс зазор — счётчик встаёт
       ровно под текстом цели, а не под её галочкой. */
    .objective-aside { grid-template-columns: auto auto; justify-content: start; margin-left: calc(var(--tap) + var(--sp-2)); }
    /* Запас в несколько пикселей обязателен: ровно «100% − чекбокс −
       зазор» округляется вверх, строка не помещается и чекбокс уезжает
       на отдельную строку НАД текстом цели. */
    .objective-desc { flex-basis: calc(100% - var(--tap) - 17px); }
    /* Подпись вида награды в 96px и текст рядом на 400px дают колонку
       в полтора слова — «РАЗБЛОКИРУЕТ ПОКУПКУ» переносится по буквам.
       Ставим подпись строкой выше текста. */
    .rw { grid-template-columns: 1fr; }
    .needed-row { grid-template-columns: minmax(0, 1fr) auto; }
    .needed-row__price { grid-column: 2; }
    .needed-row__qty { grid-column: 2; }
    .map-toolbar .field { min-width: 0; flex: 1 1 auto; }
    .map-popup { padding: var(--sp-3); }
    .stub-mark { font-size: 40px; }
    /* «62vh, но не меньше 380px» — на маленьких телефонах 62vh в ландшафте
       или с открытой клавиатурой ужимается до полоски, нижняя граница не
       даёт схеме стать бесполезной. */
    .map-layout { --map-frame-h: max(62vh, 380px); }
    .plan-lede { gap: var(--sp-3); margin: var(--sp-3) 0; }
    /* Счётчик «0 / 5» уходит под текст цели: 13px + текст + счётчик в
       три колонки на 400px оставляют цели полторы сотни пикселей. */
    .plan-obj li { grid-template-columns: 13px minmax(0, 1fr); }
    .plan-obj .plan-count { grid-column: 2; }
    /* Счётчик встал отдельной строкой внутри цели, и при прежнем зазоре
       в 6px он оказывался ровно посередине между своей целью и
       следующей — то есть читался как её заголовок. Зазор между целями
       вдвое больше внутреннего, и группировка снова очевидна. */
    .plan-obj { gap: 13px; }
    .plan-unplaced-list li { grid-template-columns: minmax(0, 1fr); }
  }