/* ══════════════════════════════════════════════════════════════════════════
   РЯД ЧИСЕЛ ВВЕРХУ РАЗДЕЛА (В-89-01, ТР-599, ОЧ-106)

   Число крупно, подпись под ним мелко и приглушённо, четыре в строку
   (ТР-599: число крупнее подписи не меньше чем вдвое, контраст подписи
   не ниже 4,5:1 — `--text2` на листе 6,41:1). Каждое число — ссылка
   на свой список, поэтому весь блок нажимается, а не одна цифра:
   прораб в перчатке попадает в плитку, а не в «3».

   Отдельным файлом, как окно и дерево: app.css правят другие заходы.
   На телефоне ряд переносится по два — четыре числа в 375 px не читаются.
   ══════════════════════════════════════════════════════════════════════════ */

.metrics-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--p2);
  margin: 0 0 var(--p4);
}

.metrics-row__item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--target);
  padding: var(--p2) var(--p3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.metrics-row__item:hover,
.metrics-row__item:focus-visible{ border-color: var(--accent-main); }

.metrics-row__value{
  font-size: var(--t7);
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metrics-row__label{
  font-size: var(--t1);
  color: var(--text2);
}

.metrics-row__note{
  font-size: var(--t0);
  color: var(--text2);
}

@media (max-width: 599px){
  .metrics-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-row__value{ font-size: var(--t5); }
}