/* Price history chart (DESIGN.md §Charts). Nominal in Teal sereno, real terms
   in Ámbar libreta, gridlines in Borde, labels in-plot — no fills, no
   gradients, no charting library.

   The plot box is a CSS box, not a viewBox. Only the geometry lives in SVG
   (stretched with preserveAspectRatio="none", kept crisp with a non-scaling
   stroke); every label is HTML at its ordinary rem size, so the axis reads the
   same at 390 px as at 1400 px. SVG <text> would have scaled down with the
   viewBox — which is fluid typography, the one thing product UI is not
   supposed to do. */
.chart-wrap { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md); }
.chart-lead { margin-top: var(--sp-2xs); margin-bottom: var(--sp-md); }
.chart-legend {
  display: flex; gap: var(--sp-lg); flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--sp-sm);
}
.chart-legend .swatch {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 6px;
}
.chart-legend .swatch-nominal { background: var(--primary); }
.chart-legend .swatch-real { background: var(--accent); }

/* [y labels] [plot] over [x labels], so the gutter is exactly as wide as the
   longest price and never a guessed indent. */
.chart-plot {
  display: grid;
  /* Not `auto`: the tick labels are absolutely positioned so they land exactly
     on their gridline, so they contribute nothing to intrinsic width and an
     auto track collapses to zero. The gutter is set inline from the longest
     label, in `ch`, which is exact because every price here is tabular. */
  grid-template-columns: var(--chart-gutter, 5ch) 1fr;
  column-gap: var(--sp-xs);
}
.chart-area { position: relative; height: 200px; grid-column: 2; }
.chart-y, .chart-x { position: relative; font-size: 0.8125rem; color: var(--muted); }
.chart-y { grid-column: 1; }
/* The bottom y label is centred on the last gridline, so half of it sits below
   the plot; the day labels have to clear that half or they read as belonging
   to it. */
.chart-x { grid-column: 2; height: 2rem; }
.chart-y .tick, .chart-x .tick {
  position: absolute; white-space: nowrap;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Centred on its own gridline; the last one sits on the baseline of the plot. */
.chart-y .tick { right: 0; transform: translateY(-50%); }
.chart-x .tick { top: 0.9rem; }
.chart-x .align-middle { transform: translateX(-50%); }
.chart-x .align-end { transform: translateX(-100%); }

svg.chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
svg.chart .grid line { stroke: var(--border); vector-effect: non-scaling-stroke; stroke-width: 1; }
svg.chart polyline {
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
svg.chart .series-nominal { stroke: var(--primary); }
svg.chart .series-real { stroke: var(--accent); }

/* "Hoy, en pesos constantes". A <circle> inside a stretched viewBox renders as
   an ellipse, so the one round thing on the chart is not in the SVG. */
.chart-head {
  position: absolute; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent); transform: translate(-50%, -50%);
}

.chart-source { margin-top: var(--sp-sm); margin-bottom: 0; }
.chart-callout { margin-top: var(--sp-sm); margin-bottom: 0; font-size: 0.9375rem; }

/* A phone gets a shorter plot — the answer and the table are what the fold is
   for (PRODUCT.md 4). Structural, not fluid: the type never moves. */
@media (max-width: 640px) {
  .chart-wrap { padding: var(--sp-sm); }
  .chart-area { height: 150px; }
  .chart-legend { gap: var(--sp-sm); flex-direction: column; }
  /* Every other date, but never the last one: the two ends of the window are
     the two labels that carry the most meaning, and dropping the newest to a
     counting rule would be the wrong one to lose. */
  .chart-x .tick:nth-child(even):not(:last-child) { display: none; }
}

/* Chart draw-in, once per visit (DESIGN.md §Motion). pathLength="1" normalises
   every series to the same dash length, so one keyframe draws both regardless
   of how many points they hold — no JavaScript, and no measuring the path. */
@media (prefers-reduced-motion: no-preference) {
  svg.chart polyline {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw-in 700ms var(--ease-out) forwards;
  }
  svg.chart .series-real { animation-delay: 120ms; }
  .chart-head { animation: settle 200ms var(--ease-out) 700ms both; }
  @keyframes draw-in { to { stroke-dashoffset: 0; } }
}