/* ==========================================================================
   CHARTS — every chart answers exactly one question.
   ========================================================================== */

.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font-num); font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart .grid-line { stroke: var(--grid-line); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis-line); stroke-width: 1; }
.chart .zero-line { stroke: var(--axis-line); stroke-width: 1; }

.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-line[data-metric="revenue"]  { stroke: var(--data-revenue); }
.chart .series-line[data-metric="units"]    { stroke: var(--data-units); }
.chart .series-line[data-metric="growth"]   { stroke: var(--data-growth); }
.chart .series-line[data-metric="forecast"] { stroke: var(--data-forecast); stroke-dasharray: 5 4; }
.chart .series-area[data-metric="revenue"]  { fill: var(--data-revenue-soft); }
.chart .series-area[data-metric="units"]    { fill: var(--data-units-soft); }
.chart .series-area[data-metric="growth"]   { fill: var(--data-growth-soft); }
.chart .series-area[data-metric="forecast"] { fill: var(--data-forecast-soft); }

.chart .dot { r: 3; stroke: var(--bg-surface); stroke-width: 2; }
.chart .dot[data-metric="revenue"]  { fill: var(--data-revenue); }
.chart .dot[data-metric="units"]    { fill: var(--data-units); }
.chart .dot[data-metric="forecast"] { fill: var(--bg-surface); stroke: var(--data-forecast); }
/* A search rank (My Products): the inverted axis, a dot per measurement, and
   the hollow marker in the band under the axis for "outside the first 100". */
.chart .series-line[data-metric="rank"] { stroke: var(--brand); }
.chart .series-area[data-metric="rank"] { fill: var(--brand-tint); }
.chart .dot[data-metric="rank"]         { fill: var(--brand); }
.chart .outside-band  { fill: var(--bg-sunken); }
.chart .outside-label { font-size: 10px; }
.chart .dot--outside  { fill: var(--bg-surface); stroke: var(--text-muted); stroke-width: 1.5; }

.chart .bar { fill: var(--data-revenue); }
.chart .bar[data-tone="muted"]  { fill: var(--data-neutral); opacity: .45; }
.chart .bar[data-tone="units"]  { fill: var(--data-units); }
.chart .bar[data-tone="growth"] { fill: var(--data-growth); }
.chart .bar[data-tone="competition"] { fill: var(--data-competition); }
.chart .bar-track { fill: var(--bg-sunken); }

.chart .donut-seg { stroke: var(--bg-surface); stroke-width: 2; transition: opacity var(--dur) var(--ease); }
.chart .donut-center-value { font-family: var(--font-num); font-size: 22px; font-weight: 700; fill: var(--text-primary); letter-spacing: -.02em; }
.chart .donut-center-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; fill: var(--text-muted); }

.chart .zone-opportunity { fill: var(--data-growth-soft); }
.chart .zone-saturated   { fill: var(--negative-soft); opacity: .5; }
.chart .zone-label { font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.chart .zone-label--opportunity { fill: var(--positive); opacity: .85; }
.chart .zone-label--saturated   { fill: var(--negative); opacity: .7; }
.chart .point { fill: var(--data-revenue); fill-opacity: .55; stroke: var(--data-revenue); stroke-width: 1.25; cursor: pointer; transition: fill-opacity var(--dur) var(--ease); }
.chart .point:hover { fill-opacity: .85; }
.chart .point[data-tone="opportunity"] { fill: var(--data-growth); stroke: var(--data-growth); }
.chart .point[data-tone="saturated"]   { fill: var(--data-neutral); stroke: var(--data-neutral); }
.chart .axis-title { font-size: 10px; font-weight: 600; letter-spacing: .05em; fill: var(--text-muted); text-transform: uppercase; }

/* sparkline stretches to its host box; the host owns the dimensions */
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .spark-line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spark[data-tone="up"]   .spark-line { stroke: var(--data-growth); }
.spark[data-tone="up"]   .spark-area { fill: var(--data-growth-soft); }
.spark[data-tone="down"] .spark-line { stroke: var(--data-decline); }
.spark[data-tone="down"] .spark-area { fill: var(--negative-soft); }
.spark[data-tone="brand"] .spark-line { stroke: var(--data-revenue); }
.spark[data-tone="brand"] .spark-area { fill: var(--data-revenue-soft); }
.spark[data-tone="neutral"] .spark-line { stroke: var(--data-neutral); }
.spark[data-tone="neutral"] .spark-area { fill: transparent; }

.chart-tip {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--sh-md);
  padding: 8px 10px; font-size: var(--fs-caption); color: var(--text-primary);
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.chart-tip.is-visible { opacity: 1; transform: translateY(0); }
.chart-tip__label { color: var(--text-muted); font-weight: 500; }
.chart-tip__value { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Two more series colours for the admin's multi-line load charts: a module's
   share against the whole, and a decline tone for blocks and errors. */
.chart .series-line[data-metric="competition"] { stroke: var(--data-competition); }
.chart .series-area[data-metric="competition"] { fill: var(--warning-soft); }
.chart .series-line[data-metric="neutral"] { stroke: var(--data-neutral); }
.chart .series-area[data-metric="neutral"] { fill: var(--neutral-soft); }
.chart .series-line[data-metric="decline"] { stroke: var(--data-decline); }
.chart .series-area[data-metric="decline"] { fill: var(--negative-soft); }