/*
 * LINE CHART — gráfico de linha em SVG puro (sem lib JS).
 * Eixo Y a partir de 0 com grade + valores, linha na cor de ação e área com
 * gradiente que esmaece para baixo. Valor acima de cada ponto e mês/ano
 * abaixo. Proporção uniforme (não distorce pontos nem texto).
 */
.line-chart {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 16rem;
}

.line-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.line-chart__line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Gradiente da área: cor de ação esmaecendo até transparente embaixo. */
.line-chart__grad-top    { stop-color: var(--color-accent); stop-opacity: 0.28; }
.line-chart__grad-bottom { stop-color: var(--color-accent); stop-opacity: 0; }

.line-chart__dot {
  fill: var(--color-surface);
  stroke: var(--color-accent);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

/* Rótulos dos eixos (valores Y e meses X). */
.line-chart__axis {
  fill: var(--color-text-muted);
  font-size: 14px;
}

.line-chart__axis--y {
  text-anchor: end;
  dominant-baseline: middle;
}

.line-chart__axis--x {
  text-anchor: middle;
}

/* Valor acima de cada ponto. */
.line-chart__value {
  fill: var(--color-text);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-anchor: middle;
}