/*
  Стили экрана «Гипотезы». Вынесены из <style> самой страницы 27.08.2026
  веб-дизайнером (блок A утверждённого плана): 62 строк своего стиля внутри
  разметки — это своя дизайн-система на одной странице
  (config/web-design.json, «строк_своего_стиля»), из-за неё экраны и перестают
  быть похожими друг на друга. Ни одного нового цвета и шрифта: только токены
  design-tokens.css. Вид и поведение не менялись — переехало то, из чего
  страница собрана.
*/
  /* Три числа в ряд: было → сейчас → цель. Один и тот же порядок мысли на
     каждой карточке, чтобы взгляд не искал, где что. */
  .hyp-numbers {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: end;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
  }
  .hyp-num-label {
    font-size: var(--text-xs); line-height: var(--leading-xs);
    color: var(--color-muted); margin-bottom: 4px;
  }
  .hyp-num-value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl); line-height: var(--leading-2xl);
    font-variant-numeric: tabular-nums; color: var(--color-text);
  }
  .hyp-num-value.is-goal { color: var(--color-accent); }
  .hyp-num-note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
  .hyp-arrow { color: var(--color-muted); font-size: var(--text-md); padding-bottom: 8px; }

  /* Полоса прогресса — прибор, а не разделитель: на всю ширину карточки она
     читалась линейкой между блоками (правка 27.08.2026). */
  .hyp-track {
    position: relative; height: 6px; border-radius: 3px; max-width: 180px;
    background: rgba(47, 111, 237, .10); overflow: hidden; margin-bottom: 6px;
  }
  .hyp-track-fill { position: absolute; inset: 0 auto 0 0; background: var(--color-accent); border-radius: 3px; }
  .hyp-track-fill.is-negative { background: var(--color-danger); }

  /* Цепочка до денег — одна мысль в две строки, а не абзац. Обрезается сам
     текст, а не плашка: если вешать обрезку на блок с отступами, третья
     строка успевает нарисоваться в поле отступа и торчит половиной высоты. */
  .hyp-chain {
    font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-muted);
    padding: var(--space-3) var(--space-4);
    background: rgba(47, 111, 237, .04);
    border-radius: var(--radius-sm);
    margin: var(--space-3) 0 var(--space-4);
  }
  .hyp-chain > span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hyp-dl { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
  .hyp-dl dt { font-size: var(--text-sm); color: var(--color-muted); }
  .hyp-dl dd { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-text); margin: 0; }
  .hyp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  /* Заголовок — заголовок, а не абзац: две строки на виду, целиком — в
     подсказке и первой строкой подробностей. Действие гипотезы пишется
     фразой на две-три строки, и в кегле --text-lg оно занимало треть
     карточки (правка 27.08.2026). */
  .hyp-title {
    font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-md);
    margin: 0; flex: 1 1 320px; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hyp-details { border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-2); }
  .hyp-details > summary { font-size: var(--text-sm); color: var(--color-accent); padding: var(--space-3) 0 0; }
  .hyp-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .hyp-badge {
    font-size: var(--text-xs); line-height: var(--leading-xs); padding: 3px 10px;
    border-radius: var(--radius-sm); white-space: nowrap;
  }
  .hyp-badge--accent { background: rgba(47, 111, 237, .12); color: var(--color-accent); }
  .hyp-badge--ok { background: rgba(26, 157, 108, .12); color: var(--color-success); }
  .hyp-badge--warn { background: rgba(208, 65, 58, .12); color: var(--color-danger); }
  .hyp-badge--mute { background: rgba(107, 115, 130, .12); color: var(--color-muted); }

  .hyp-findings li { margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-base); }
  .hyp-findings li:last-child { margin-bottom: 0; }

  @media (max-width: 720px) {
    .hyp-numbers { grid-template-columns: 1fr; }
    .hyp-arrow { display: none; }
    .hyp-dl { grid-template-columns: 1fr; gap: 2px var(--space-4); }
    .hyp-dl dd { margin-bottom: var(--space-3); }
  }

  /* Гипотезы стоят сеткой, а не столбиком: 21 карточка в одну колонку — это
     7 831 px прокрутки, из которых на экране помещается три (правка
     27.08.2026). Минимум 440 px на карточку держит ряд «было → сейчас →
     цель» читаемым; уже — колонка одна. */
  .hyp-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: var(--card-gutter); align-items: stretch;
  }
  /* Карточки одного ряда одной высоты, а подробности прижаты к низу: разная
     высота соседей и есть то, что читается как «косо». */
  .hyp-list > .page-section { display: flex; flex-direction: column; }
  .hyp-list .hyp-details { margin-top: auto; }
  .hyp-list > .page-section { margin-bottom: 0; }

/* На телефоне карточка одна в ряд. minmax(440px, 1fr) выше требует 440 px
   минимум, и в экране 390 px страница распиралась до 456 — её приходилось
   возить вбок целиком (найдено прогоном mobile_screens_check 28.08.2026). */
@media (max-width: 720px) {
  .hyp-list { grid-template-columns: minmax(0, 1fr); }
}