/* --------------------------------------------------------------- kpi row
 * templates/ui/kpi_row.html. Key figures of an overview and of a dossier
 * (WEB-KOM-11, K-36/K-35): the figure in the figure role with table
 * numerals, under it the minor hairline (web.hairline.minor, 58 x 2 px
 * corum, MAR-HAA-04), under that the label in micro graphite. The dt comes
 * first in the markup for screen readers; the figure is shown first.
 *
 * One even grid per row (K-35: six figures stood five and one on
 * /admin/auswertung): the macro counts the figures and sets the columns -
 * up to five in one row, six as three and three, eight as four and four.
 * Two columns on a phone (owner brief F), an odd last figure across both. */
@layer ui {
.kpi-row {
  display: grid; grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr)); gap: var(--s-5);
  margin: 0 0 var(--s-8);
}
.kpi-row--c1 { --kpi-cols: 1; }
.kpi-row--c2 { --kpi-cols: 2; }
.kpi-row--c3 { --kpi-cols: 3; }
.kpi-row--c4 { --kpi-cols: 4; }
.kpi-row--c5 { --kpi-cols: 5; }
.kpi-row__item { display: flex; flex-direction: column; min-width: 0; }
.kpi-row__value {
  order: -1; margin: 0; font-size: var(--t-figure); line-height: 1.1; color: var(--text-primary);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi-row__value a { color: inherit; text-decoration: none; }
.kpi-row__value a:hover { color: var(--text-accent); }
.kpi-row__unit { margin-left: .35em; font-size: var(--t-small); color: var(--text-secondary); }
/* The minor hairline between figure and label. */
.kpi-row__label { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--text-secondary); }
.kpi-row__label::before { content: ""; display: block; width: 58px; height: 2px; margin-bottom: var(--s-2);
  background: var(--rule-brand); }
.kpi-row__note { margin: var(--s-1) 0 0; font-size: var(--t-micro); color: var(--text-secondary); }
.kpi-row__note .lamp { font-size: var(--t-micro); }
/* The one figure that is the view's statement. */
.kpi-row__item--error .kpi-row__value { color: var(--text-accent); }
/* A fall reads corum-dark (owner decision 5; Etappe 3). */
.kpi-row__value.is-down { color: var(--corum-dark); }
/* Under a dossier head the next topic follows at the topic gap. */
.dossier-panel .kpi-row { margin-bottom: var(--gap-topic); }

/* Five in a row need room: below the navigation breakpoint four and five
   stand two by two, a fifth across both columns; on a phone every row
   has two columns (web.breakpoint.navigation, .compact). */
@media (max-width: 900px) {
  .kpi-row--c4, .kpi-row--c5 { --kpi-cols: 2; }
  .kpi-row--c5 > .kpi-row__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .kpi-row { --kpi-cols: 2; gap: var(--s-4); }
  .kpi-row--c1 { --kpi-cols: 1; }
  .kpi-row--odd > .kpi-row__item:last-child { grid-column: 1 / -1; }
}
}  /* @layer ui */