/* — chart chrome: Nova Console dark-first — */
.chart{width:100%;display:block;overflow:visible}
.chart-box{position:relative;padding:var(--sp-2) var(--sp-5) var(--sp-5)}

/* — legend — */
.chart-legend{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-12);color:var(--text-secondary);padding-block-end:var(--sp-3)}
.chart-legend__item{display:inline-flex;align-items:center;gap:var(--sp-2)}
.chart-legend__swatch{width:8px;height:8px;border-radius:2px;flex:none}
.chart-legend .muted{color:var(--text-muted);font-variant-numeric:tabular-nums}

/* — grid & axes — */
.chart .grid-line{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
.chart .axis-line{stroke:var(--axis);stroke-width:1;shape-rendering:crispEdges}
.chart .tick{fill:var(--text-muted);font-size:11px;font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.chart .tick--y{text-anchor:end}
[dir="rtl"] .chart .tick--y{text-anchor:start}

/* — series — */
.chart .series-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .series-area{stroke:none}
.chart .bar{rx:4}
.chart .point{stroke:var(--bg-surface);stroke-width:2}
.chart .crosshair{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3}

/* — sparkline — */
.sparkline{display:block;width:100%;height:36px;overflow:visible}
.sparkline .spark-line{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sparkline .spark-area{stroke:none}
.sparkline .spark-end{stroke:var(--bg-surface);stroke-width:2}

/* — tooltip — */
.chart-tip{position:absolute;pointer-events:none;background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-12);color:var(--text-primary);white-space:nowrap;opacity:0;transform:translate(-50%,-120%);transition:opacity var(--dur-fast) var(--ease);z-index:10;min-width:120px}
.chart-tip.is-visible{opacity:1}
.chart-tip__row{display:flex;align-items:center;gap:var(--sp-2);font-variant-numeric:tabular-nums;margin-block-start:2px}
.chart-tip__label{color:var(--text-muted)}
.chart-tip__val{margin-inline-start:auto;font-weight:600;color:var(--text-primary)}

/* — donut center — */
.donut-center{text-anchor:middle;fill:var(--text-primary);font-family:var(--font-sans);font-weight:600}
.donut-center__sub{fill:var(--text-muted);font-weight:400;font-size:11px}

/* — bar track — */
.bar-track{fill:var(--bg-active)}

/* — draw-in (never leaves a line hidden if the animation is skipped) — */
@media (prefers-reduced-motion: no-preference) {
  .chart .series-line { animation: drawLine 900ms var(--ease) both; }
  @keyframes drawLine {
    from { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
    to   { stroke-dasharray: var(--len, 0); stroke-dashoffset: 0; }
  }
}