/* ==========================================================
     5. КВЕСТЫ: ПАНЕЛЬ ФИЛЬТРОВ
     Механика намеренно отличается от tarkov-market: у них ряды
     торговцев/карт/статуса — строгий radio, повторный клик выбор не
     снимает, вернуться можно только через «Любой». Здесь мультивыбор:
     ИЛИ внутри ряда, И между рядами, повторный клик снимает.
     ========================================================== */

  /* Липкой едет ТОЛЬКО верхняя строка: поиск, счётчик найденного,
     плотность и снимаемые чипы активных фильтров. Раньше липла вся
     панель — пять рядов чипов держали 221 px экрана всё время
     прокрутки, хотя при прокрутке нужен один ответ: «чем сужена
     выдача». Его дают чипы, а не ряды.
     Ряды вынесены из .qfilters отдельным СОСЕДОМ, а не оставлены
     внутри: вложенный sticky прилипает только в границах своего
     родителя и отклеился бы ровно тогда, когда ряды уехали вверх. */
  .qfilters {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
    padding: 6px 0;
    margin-bottom: var(--sp-2);
  }

  /* Ряды — обычный поток под липкой строкой. Раскрытые, они уезжают
     вверх при прокрутке и списку больше не мешают. */
  .qfilters__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-4);
  }

  /* Метка ряда фиксированной ширины слева — без неё панель выглядит
     свалкой кнопок (у tarkov-market меток нет, и это заметно). */
  .qfilters__row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: var(--sp-2);
    align-items: start;
  }

  .qfilters__label { padding-top: 6px; }

  .qfilters__chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

  .qfilters__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
  }

  .search-box { position: relative; flex: 1 1 280px; min-width: 0; }

  .search-box input {
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    height: var(--ctrl-h);
    padding: 0 32px 0 10px;
  }

  .search-box input::placeholder { color: var(--text-faint); }
  .search-box input:hover { border-color: var(--line-strong); }

  .search-box__clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: var(--ctrl-h);
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }

  .search-box__clear:hover { color: var(--danger); }

  .qfilters__found {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .qfilters__found b { color: var(--accent); font-weight: 600; }

  /* Переключатель плотности и чип сфокусированного квеста живут в
     ВЕРХНЕМ ряду панели, а не среди рядов чипов: ряды на узком экране
     свёрнуты под кнопкой «фильтры», и оттуда оба были бы не видны —
     а «показан один квест» скрывать нельзя ни при какой ширине. */
  .qfilters__density { display: inline-flex; gap: 4px; align-items: center; }

  /* Активные фильтры снимаемыми чипами — в самой липкой строке. Ряды
     чипов теперь свёрнуты на любой ширине, и без этого списка при
     прокрутке было бы не видно, ЧЕМ сужена выдача: «найдено 5 из 515»
     говорит сколько, но не говорит почему. Потолок ширины одного чипа
     нужен из-за квестов с длинными именами: «квест: …» иначе занимал
     бы всю строку один. */
  .qfilters__active { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
  .qfilters__active .chip { max-width: min(100%, 34ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .level-input {
    width: 62px;
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    height: var(--chip-h);
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
  }

  /* --text-dim: 12 px в --text-faint — 3.33:1, ниже AA. Здесь стоит
     имя профиля и режим, то есть ответ на «а от кого вообще считается
     доступность» — не декорация. */
  .qfilters__note { font-size: 12px; color: var(--text-dim); }
  /* «уровень не указан» — не сноска, а предупреждение: от него зависят
     «по моему уровню» и все пороги уровня в списке. */
  .qfilters__warn { font-size: 12px; color: var(--text); border-left: 2px dashed var(--line-strong); padding-left: 6px; }

  /* Ряды чипов сворачиваются на ЛЮБОЙ ширине, а не только на 400px.
     Довод тот же, только на десктопе он был не так заметен: пять рядов
     — это 154 px, которые нужны раз в сессию (выбрал торговца и забыл),
     а держались они на экране постоянно. Снаружи остаются поиск,
     счётчик, плотность и чипы включённого — то, что трогают чаще
     всего и на что смотрят при прокрутке. Число на кнопке говорит,
     сколько фильтров сейчас внутри. */
  .qfilters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--line);
    background: var(--surface-1);
    height: var(--ctrl-h);
    padding: 0 12px;
  }

  .qfilters__toggle:hover { border-color: var(--line-strong); color: var(--text); }
  .qfilters__toggle b { color: var(--accent); }

  /* Пустая выдача: у конкурента здесь чёрная пустота без единого слова.
     Мы перечисляем активные фильтры и даём снять любой прямо отсюда. */
  .empty-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 0 auto var(--sp-4);
    max-width: 640px;
  }