/* ==========================================================
     7c. РАЗБОР ТРЕБОВАНИЙ КАППЫ
     Полоска «0 / 13» была формально верна и бесполезна: 13 — это длина
     цепочки квестов, а не условие получения контейнера. Настоящих
     требований десять, и человеку нужно не число, а какое именно из них
     его держит. Разбор раскрывается по кнопке: в шапке он занимал бы
     полэкрана у всех, включая тех, кто пришёл за списком квестов.
     ========================================================== */

  .kappa-break { margin: 0 0 var(--sp-4); }

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

  .kappa-break__legend {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-3);
    font-size: 11px;
    color: var(--text-faint);
  }

  .kappa-break__list { display: flex; flex-direction: column; }

  /* Строка требования. Колонка под знак фиксирована, чтобы названия
     выстроились в один столбец: рваный левый край читается хуже, чем
     любая экономия ширины. */
  .kreq {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--sp-2);
    padding: 7px 0;
    border-top: 1px solid var(--line);
  }

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

  .kreq__mark {
    font-family: var(--font-display);
    font-size: 12px;
    line-height: 1.3;
  }

  .kreq.is-met     .kreq__mark { color: var(--ok); }
  .kreq.is-blocked .kreq__mark { color: var(--fresh-stale); }
  .kreq.is-unknown .kreq__mark { color: var(--line-strong); }

  .kreq__title { font-size: 13px; color: var(--text); min-width: 0; }
  .kreq.is-unknown .kreq__title { color: var(--text-dim); }
  .kreq.is-met .kreq__title { color: var(--text-dim); }

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

  .kreq.is-met .kreq__num { color: var(--ok); }

  /* Подробности — вторая строка под названием, а не хвост к нему: у
     заблокированного торговца это две разные мысли («не хватает 4,79»
     и «≈4 квеста дадут»), склеенные через точку они не читаются. */
  .kreq__detail {
    grid-column: 2 / -1;
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
  }

  .kreq.is-unknown .kreq__detail {
    color: var(--text-faint);
    border-left: 2px dashed var(--line-strong);
    padding-left: 8px;
    margin-left: -10px;
  }

  /* Оценка «≈N квестов» — нижняя граница, а не точное число, и выглядеть
     она обязана иначе, чем измеренные величины рядом. */
  .kreq__est {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-faint);
    border: 1px dashed var(--line-strong);
    padding: 0 5px;
    white-space: nowrap;
  }

  /* Цепочка из 13 квестов. Два столбца на широком экране: 13 строк в
     один столбец растягивают разбор так, что торговцы уезжают из вида. */
  .ktasks {
    grid-column: 2 / -1;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px var(--sp-4);
  }

  .ktask {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    min-width: 0;
  }

  .ktask__mark { font-family: var(--font-display); color: var(--line-strong); flex-shrink: 0; }
  .ktask__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ktask.is-done .ktask__mark { color: var(--ok); }
  .ktask.is-done .ktask__name { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }

  /* ==========================================================
     7d. ЭКРАН «КАППА» (план 09) — общий чеклист: счётчик, условия,
     цепочка квестов, предметы Коллекционера. Условия рисует тот же
     kappa-breakdown, что и на «Профиле»/«Квестах» — своих правил для
     строк требования здесь нет, только для двух собственных блоков
     ниже (цепочка и сетка предметов).
     ========================================================== */

  .kappa-page__head { margin-bottom: var(--sp-2); }
  .kappa-page__bar { margin-bottom: var(--sp-4); }

  .kappa-chain,
  .kappa-items { margin: 0 0 var(--sp-4); }

  .kappa-chain__head,
  .kappa-items__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
  }

  .kappa-chain__list { display: flex; flex-direction: column; }

  .kappa-chain__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 0;
    border-top: 1px solid var(--line);
  }

  .kappa-chain__row:first-child { border-top: 0; }

  .kappa-chain__name {
    font-size: 13px;
    color: var(--text);
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kappa-chain__row.is-done .kappa-chain__name { color: var(--text-faint); }

  /* Сетка карточек — тот же приём, что у лояльности торговцев (07-profile.css):
     путь взгляда от иконки до галки короткий на любой ширине экрана. */
  .kitem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-2);
  }

  .kitem {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-2);
    border: 1px solid var(--line);
    background: var(--surface-2);
    cursor: pointer;
  }

  .kitem.is-done { opacity: .55; }
  .kitem.is-done .kitem__name { text-decoration: line-through; text-decoration-color: var(--line-strong); }

  .kitem__name { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text); }

  .kitem__qty {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
  }

  .kitem input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; }