/* ---------- Ключевые показатели: плашки над отчётом по запросам ----------
   Цифра, ради которой открывают отчёт, должна читаться до всякой прокрутки.
   Плашки идут сеткой по пять в ряд и переносятся сами: на узком экране их
   становится три, потом две. */

.kpihead { margin: 0 0 4px; }
.kpisub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}

.kpigrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Подпись капителью и в разрядку: она не должна спорить с самой цифрой.
   Две строки места резервируются всегда — иначе у плашки с длинной подписью
   цифра съезжает вниз и ряд перестаёт читаться одной линией. */
.kpi .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.3;
  min-height: 2.6em;
}
.kpi .v {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.kpi .n {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* Значение-текст (название запроса) в цифру не влезает — своя раскладка. */
.kpi .v.text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.kpi .v.up { color: var(--good); }
.kpi .v.down { color: var(--bad); }

.kpi .d {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi .d.up { color: var(--good); }
.kpi .d.down { color: var(--bad); }
/* Период сравнения — отдельной строкой: в одну со стрелкой он переносился
   посередине даты и ломал её пополам. */
.kpi .d .when {
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  /* Переносить можно, вылезать за плашку — нет: диапазон половин длиннее одной
     даты, и nowrap выталкивал его за край. */
  overflow-wrap: anywhere;
}