/* ==========================================================
     8. ЧТО НЕ ПРОДАВАТЬ
     Прежняя шапка ломалась: три подписи в строку, а «квесты» падало
     под них осиротевшей четвёртой. Теперь строка — grid, и шапка
     совпадает по колонкам с данными.
     ========================================================== */

  .needed-list { display: flex; flex-direction: column; }

  .needed-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 120px 110px;
    gap: 6px var(--sp-3);
    align-items: baseline;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
  }

  .needed-row:hover { background: var(--surface-1); }

  .needed-row--head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 6px;
  }

  .needed-row--head:hover { background: var(--bg); }

  .needed-row--head span {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .needed-row__name { color: var(--text); font-size: 13px; min-width: 0; }

  .needed-row__qty {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .needed-row__qty.is-complete { color: var(--ok); }

  .needed-row__price {
    font-size: 13px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .needed-row__quests {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 11px;
  }

  /* Ряд отбора по «найдено в рейде». Чипы, а не вкладки: механика
     отбора в проекте уже одна — чип с aria-pressed, — и заводить
     рядом второй способ выбирать значило бы учить человека дважды. */
  .needed-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--sp-3);
  }

  .needed-row__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--sp-2);
  }

  /* Иконка не участвует в переносе имени и метки ФИР: она — опознавалка
     строки, её место всегда слева у первой строки, а не в потоке слов.
     align-self: center против общего baseline ряда — по базовой линии
     картинка «тонет» ниже текста. */
  .needed-row__name .item-icon { align-self: center; }

  /* Шапка колонки обязана встать над названием, а не над иконкой —
     иначе подпись «предмет» уезжает на 32 px вправо от столбца имён. */
  .needed-row--head .needed-row__name { padding-left: 32px; }

  /* Оговорка внутри подсказки раздела: цены не того режима, что у
     профиля. Отличается от обычной подсказки только рамкой слева —
     это не ошибка и не предупреждение, а уточнение, чему верить. */
  .section-hint.is-caveat {
    border-left: 2px solid var(--accent);
    padding-left: var(--sp-2);
    color: var(--text-faint);
  }

  /* ----------------------------------------------------------
     Категории: «передать 15 предметов из категории Наушники».
     Одна строка на цель вместо сотни строк с «0 из 15» у каждого
     варианта. Сами варианты остаются в списке ниже — их прячет
     только показ, и поиск находит каждый.
     ---------------------------------------------------------- */
  .needed-groups {
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) 1px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-1);
  }

  .needed-groups__title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .needed-groups__note {
    margin: var(--sp-2) 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-faint);
  }

  /* Кнопка справа фиксированной колонкой, число — своей: иначе строки
     категорий с разной длиной описания ставят кнопки лесенкой, и
     раскрыть нужную получается не с первого взгляда. */
  .needed-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px var(--sp-3);
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }

  .needed-group:last-of-type { border-bottom: none; }

  .needed-group__text {
    min-width: 0;
    font-size: 13px;
    color: var(--text);
  }

  .needed-group__text b { color: var(--text); font-weight: 600; }

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

  .needed-group.is-open { background: var(--bg); }