/* ==========================================================
     7d. ЧТО МЕНЯ ДЕРЖИТ
     Обратный разрез: не «этот квест недоступен, потому что…», а
     «вот одна причина — вот сколько квестов она держит». Причин втрое
     меньше, чем держимых квестов (226 против 275), и список причин
     говорит, что делать, тогда как список квестов — только что
     нельзя.

     Почему панель стоит НАД списком квестов, а не отдельной вкладкой:
     каждая строка здесь заканчивается кликом, который сужает тот самый
     список внизу. Отдельный раздел заставлял бы возвращаться после
     каждого клика, а рядом с разбором Каппы ей не место — Каппа про
     одну далёкую цель, а это про ближайший шаг.
     ========================================================== */

  /* Отступы панели тоньше общих для .panel: свёрнутая она несёт одну
     строку («что меня держит · держит N · развернуть»), и 16 px полей
     вокруг 16 px текста превращали её в 50 px над списком. */
  .blockers { margin: 0 0 var(--sp-3); padding: var(--sp-3); }

  .blockers__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--sp-3);
  }

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

  .blockers__toggle { margin-left: auto; }

  /* У развёрнутой панели свой потолок и своя прокрутка. Шесть причин —
     это 529 px над списком, а «показать все причины» раскрывает 226
     групп и уносит список на несколько экранов вниз: панель, которая
     объясняет список, не должна его прятать. Шапка со счётчиком и
     кнопкой «свернуть» остаётся снаружи — до неё всегда один клик.
     overscroll-behavior не даёт прокрутке перескочить на страницу,
     когда причины кончились: иначе колесо внутри панели незаметно
     уводило бы весь экран. */
  .blockers__body {
    max-height: min(40vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: var(--sp-2);
  }

  .blockers__types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: var(--sp-3) 0 var(--sp-2);
  }

  .blockers__list { display: flex; flex-direction: column; }

  /* Строка причины. Первая колонка фиксирована под вид требования —
     по ней же читается, что разрез неоднородный: уровень персонажа,
     торговец и «сдать квест» лечатся совершенно по-разному. */
  .breason {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 104px;
    align-items: center;
    gap: 2px var(--sp-2);
    border-top: 1px solid var(--line);
    padding: 2px 0;
  }

  .breason:first-child { border-top: 0; }

  /* Тон --text-dim, а не --text-faint как у .marker: это не заголовок
     блока, а само содержимое строки — «что именно меня держит:
     уровень, торговец или квест». 10 px в --text-faint дают 3.33:1,
     ниже AA, и читать пришлось бы наугад. */
  .breason__kind {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  /* Сама строка — кнопка: клик по ней сужает список квестов до тех,
     что откроются СРАЗУ. Высота не ниже цели нажатия. */
  .breason__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    background: transparent;
    border: 0;
    padding: 4px 6px 4px 0;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }

  .breason__main:hover { background: var(--surface-2); }
  .breason.is-on .breason__main { background: var(--surface-3); }
  .breason.is-on .breason__text { color: var(--accent); }

  .breason__text { min-width: 0; }

  /* «Откроет сразу N» — единственное число, по которому человек
     выбирает, чем заняться: причина здесь ЕДИНСТВЕННАЯ, снял её — и
     квест открылся. Поэтому акцент и шрифт заголовков. */
  .breason__now {
    font-family: var(--font-display);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--accent);
  }

  /* Ноль «откроет сразу» — не ошибка и не пустота: причина участвует,
     но эти квесты держит ещё что-то. Тон гасим, чтобы такие строки не
     спорили за внимание с настоящими кандидатами. */
  .breason__now.is-zero { color: var(--text-faint); }

  /* «Участвует в M» — вторая, ДРУГАЯ величина: сколько квестов эта
     причина вообще касается. Она всегда >= «откроет сразу», и путать
     их нельзя, поэтому у неё своя колонка, свой тон и свой клик. */
  .breason__all {
    justify-self: end;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-height: var(--tap);
    padding: 0 7px;
    cursor: pointer;
  }

  .breason__all:hover { border-color: var(--accent); color: var(--accent); }
  .breason.is-on-all .breason__all { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }

  .blockers__more { margin: var(--sp-2) 0 0; }

  /* Непроверяемые требования — НЕ блокировки, и стоять в одном списке
     с ними не могут: там «тебе не хватает», здесь «нам нечем
     проверить». Отсюда отдельный блок, пунктир и «?» — тот же язык,
     что у .quest-unknown в карточке и .kreq.is-unknown в разборе Каппы. */
  .bunknown {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
  }

  .bunknown__hint {
    margin: 4px 0 var(--sp-2);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
  }

  .bunk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--sp-2);
    padding: 4px 0 4px 8px;
    border-left: 2px dashed var(--line-strong);
    font-size: 12px;
    color: var(--text-dim);
  }

  .bunk-row + .bunk-row { margin-top: 3px; }

  .bunk-row__mark { font-family: var(--font-display); color: var(--line-strong); flex-shrink: 0; }
  .bunk-row__num { font-variant-numeric: tabular-nums; color: var(--text-faint); }