.trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.trend-line {
  width: 3rem;
  height: 0.75rem;
  overflow: visible;
  color: var(--ink-muted);
}

.trend-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-delta {
  font-weight: 600;
  color: var(--ink);
}

.trend-up::before {
  content: "▲ ";
}

.trend-down::before {
  content: "▼ ";
}

.trend-flat {
  color: var(--ink-muted);
}