/* MetricLab Data Display System: information hierarchy only. */
:root {
  --metric-gap: var(--space-xs);
  --metric-label-size: var(--text-xs);
  --metric-value-size: var(--text-xl);
  --metric-unit-gap: var(--space-2xs);
  --metric-group-gap: var(--space-sm);
  --summary-gap: var(--space-xs);
  --threshold-color-neutral: var(--ml-text-muted);
  --threshold-color-success: var(--positive);
  --threshold-color-info: var(--primary);
  --threshold-color-warning: #a16207;
  --threshold-color-error: var(--danger);
  --data-radius: var(--radius-sm);
}

.ml-metric {
  display: grid;
  gap: var(--metric-gap);
  min-width: 0;
}

.ml-metric__label,
.ml-summary__headline,
.ml-key-value__key {
  color: var(--muted);
  font-size: var(--metric-label-size);
  font-weight: var(--weight-bold);
  line-height: var(--line-snug);
}

.ml-metric__value,
.ml-summary__value,
.ml-key-value__value,
.ml-compact-counter__value {
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-extrabold);
  overflow-wrap: anywhere;
}

.ml-metric__value,
.ml-summary__value {
  font-size: var(--metric-value-size);
  line-height: var(--line-tight);
}

.ml-metric__unit {
  margin-inline-start: var(--metric-unit-gap);
  color: var(--muted);
  font-size: 0.55em;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.ml-data-helper,
.ml-metric__helper,
.ml-summary__support {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ml-metric-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--metric-group-gap);
  min-width: 0;
}

.ml-metric-group--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-metric-group--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-metric-group--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ml-key-value-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.ml-key-value {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, auto);
  gap: var(--space-sm);
  align-items: baseline;
  min-width: 0;
}

.ml-key-value__value {
  text-align: end;
}

.ml-summary {
  display: grid;
  gap: var(--summary-gap);
  min-width: 0;
}

.ml-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.ml-delta,
.ml-threshold {
  color: var(--threshold-color-neutral);
}

.ml-delta[data-state="success"],
.ml-threshold[data-state="success"],
.ml-threshold[data-state="good"] {
  color: var(--threshold-color-success);
}

.ml-delta[data-state="info"],
.ml-threshold[data-state="info"] {
  color: var(--threshold-color-info);
}

.ml-delta[data-state="warning"],
.ml-threshold[data-state="warning"],
.ml-threshold[data-state="near"] {
  color: var(--threshold-color-warning);
}

.ml-delta[data-state="error"],
.ml-threshold[data-state="error"],
.ml-threshold[data-state="critical"],
.ml-threshold[data-state="over"] {
  color: var(--threshold-color-error);
}

.ml-data-indicator {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.ml-data-indicator__icon {
  flex: none;
  inline-size: 1em;
  block-size: 1em;
}

.ml-compact-counter {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  gap: var(--metric-unit-gap);
  align-items: baseline;
  min-width: 0;
}

.ml-compact-counter__label {
  color: var(--muted);
  font-size: var(--text-xs);
}

@media (width <= 760px) {
  .ml-metric-group--3,
  .ml-metric-group--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 520px) {
  .ml-metric-group--2,
  .ml-metric-group--3,
  .ml-metric-group--4 {
    grid-template-columns: 1fr;
  }

  .ml-key-value {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .ml-key-value__value {
    text-align: start;
  }
}

@media (forced-colors: active) {
  .ml-delta,
  .ml-threshold {
    color: CanvasText;
  }
}