.chart {
  display: block;
  width: 100%;
  height: auto;
}

/* Charts scale with their card, but never stretch past a readable height on wide
   screens, and never shrink so far on phones that axis labels become unreadable
   (the card body scrolls sideways instead). */
.chart-line,
.chart-bar {
  max-height: 340px;
}

@media (max-width: 640px) {
  .chart-line,
  .chart-bar {
    min-width: 480px;
  }
}

.chart--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border-radius: var(--r-md);
}

.chart__baseline {
  stroke: var(--border);
  stroke-width: 1;
}

.chart__axis-label {
  fill: var(--text-faint);
  font-size: 10px;
  font-family: var(--font);
}

.chart-line__path {
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-line__area {
  fill: var(--brand-soft);
  stroke: none;
}

.chart-line__dot {
  fill: var(--surface-1);
  stroke: var(--brand);
  stroke-width: 2;
}