/*
 * Stat row — app/components/ui/stat_row_component.rb
 *
 * Figures in a row with hairlines above, below and between: no card fill,
 * no radius, no shadow. Wraps as the column narrows.
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

/* Each stat draws a hairline on its left and top edges as a 1px shadow;
   the row clips whatever hangs outside it, so the first column and the
   first row show none and the row's own border closes top and bottom.
   That holds however the stats wrap, leaves an empty grid cell blank, and
   needs no background, so the row sits on any surface. */
.ui-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-12) * 3), 1fr));
  margin: 0;
  overflow: hidden;
  border-block: var(--border-hairline);
}

.ui-stat-row__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  box-shadow: -1px 0 0 var(--color-border), 0 -1px 0 var(--color-border);
}

.ui-stat-row__label {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.ui-stat-row__figure {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.ui-stat-row__value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 500;
  font-variant-numeric: var(--numeric-tabular);
  color: var(--color-ink);
}

.ui-stat-row__caption {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}