/* Sparkline trend widget — uses site custom properties, no hardcoded colors */

.sparkline-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sparkline-container svg {
  flex-shrink: 0;
}

.sparkline-label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.sparkline-label .value {
  font: 800 16px/1 Manrope;
  color: var(--ink);
}

.sparkline-label .delta {
  font: 700 11px/1 DM Sans;
  color: var(--muted);
}

.sparkline-label .delta.up {
  color: var(--green);
}

.sparkline-label .delta.down {
  color: var(--red);
}

/* Pending state: fewer than 4 data points or fetch error */
.sparkline-pending {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}