/* chart.css */
.chart-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.chart-title {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
}

.chart-canvas-container {
  position: relative;
  height: 300px;
}

@media (max-width: 600px) {
  .chart-canvas-container { height: 220px; }
}

/* Prevent page scroll when touching chart — let Chart.js handle the touch */
.chart-canvas-container canvas {
  touch-action: none;
}