/* ==========================================================
     7b. ПРОГРЕСС (всего / каппа / смотритель)
     Три числа приезжают одним запросом /progress — тянуть ради них
     весь каталог из 515 квестов не нужно.
     ========================================================== */

  /* Полосы по-прежнему не тянем на всю ширину 1440px, но потолок
     колонки поднят с 300 до 380 px: подпись и число теперь стоят на
     одной строке с полосой, разъехаться им негде, а в 300 px сноска
     Каппы («2 из 10 не проверить…» плюс кнопка «разбор») ломалась на
     две строки и одна эта ячейка задавала высоту всей полосы. */
  .progress-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 380px));
    gap: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-2);
  }

  .progress-cell { min-width: 0; }

  /* Полоса стоит В ОДНОЙ строке с подписью и числом, а не под ними.
     Тремя этажами (подпись → полоса → сноска) ячейка занимала 64 px
     над списком квестов, а несёт она 8 px смысла. Подпись держит
     фиксированную ширину, иначе полосы трёх ячеек начинались бы в
     разных местах и перестали читаться как одна шкала. */
  .progress-cell__top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .progress-cell__top .marker { flex: 0 0 auto; min-width: 92px; }

  .progress-cell__num {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
  }

  /* display: flex обязателен: у полосы Каппы содержимое — ДВА куска
     («выполнено» и «не проверить»), и блоками они вставали друг под
     друга, а всё, что ниже 8 px, срезал overflow. Штриховка «не
     проверить» из-за этого не показывалась вовсе. */
  .progress-bar {
    display: flex;
    flex: 1 1 auto;
    min-width: 48px;
    height: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .progress-bar__fill { display: block; height: 100%; background: var(--text-faint); }
  .progress-bar__fill.k-overall     { background: var(--ok); }
  .progress-bar__fill.k-kappa       { background: var(--accent); }
  .progress-bar__fill.k-lightkeeper { background: var(--lightkeeper); }

  /* Оговорка про Смотрителя видна без наведения: подсказка у «?» —
     это подробности, а сам факт «счёт по устаревшей цепочке» обязан
     читаться сразу, иначе число молча врёт. */
  /* Сноска и кнопка «разбор» — ОДНА строка, а не две. Раздельными
     абзацами ячейка Каппы была на 18 px выше остальных и задавала
     высоту всей полосы: сетка равняется по самой высокой ячейке. */
  .progress-cell__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--sp-2);
    margin: 3px 0 0;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.35;
  }

  .hint-mark {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    line-height: 1;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-faint);
    font-family: var(--font-display);
    font-size: 10px;
    cursor: help;
    align-self: center;
  }

  .hint-mark:hover { color: var(--text); border-color: var(--accent); }

  /* Полоса Каппы набрана из кусков, а не залита одним цветом: у неё три
     исхода, а не два. «Не проверить» — это не «не выполнено», и у
     профиля владельца таких восемь требований из десяти, то есть это
     основной случай на старте. Сплошной акцент — выполнено, штриховка
     тем же тоном — не проверить, пустой трек — заблокировано. */
  .progress-bar__seg { display: block; height: 100%; flex-shrink: 0; }
  .progress-bar__seg.is-met { background: var(--accent); }
  .progress-bar__seg.is-unknown {
    background-color: var(--surface-3);
    background-image: repeating-linear-gradient(135deg,
      transparent 0 3px, rgba(216, 161, 42, .55) 3px 5px);
  }

  .progress-cell__toggle {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 2px;
    cursor: pointer;
  }

  .progress-cell__toggle:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .progress-cell__toggle[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }