.chart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.chart-head > div {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 52px;
}

.chart-head .chart-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.75);
  display: grid;
  gap: 16px;
}

.chart-card-wide {
  min-height: 360px;
}

.chart-meta {
  color: var(--muted);
  line-height: 1.5;
}

.chart-surface {
  width: 100%;
  min-height: 280px;
  height: 280px;
  border-radius: 18px;
}

.chart-line {
  fill: none;
  stroke: var(--line-color, var(--accent));
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-grid-line {
  stroke: rgba(23, 48, 66, 0.11);
  stroke-dasharray: 4 6;
}

.chart-grid-label,
.chart-axis-label {
  fill: #70869a;
  font-size: 12px;
  font-family: 'Avenir Next', 'Trebuchet MS', sans-serif;
}