/* EMMCB — chart chrome
   Every chart is inline SVG built by /js/charts/*. This file owns only the
   shared visual language: axes, gridlines, marks, and hover affordances. */

.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font-ui); fill: var(--ink-3); }

/* ---- Axes ------------------------------------------------------------ */
/* Axis groups sit under the hover target. Taking them out of hit testing
   means a crosshair never snags on a tick label. */
.chart .axis, .chart .crosshair-dots { pointer-events: none; }
.chart .axis-line { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart .grid-line { stroke: var(--line-faint); stroke-width: 1; shape-rendering: crispEdges; }
.chart .grid-line--zero { stroke: var(--line-strong); }
.chart .tick-label {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-3);
}
.chart .tick-label--x { text-anchor: middle; }
.chart .tick-label--y { text-anchor: end; dominant-baseline: middle; }
.chart .axis-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

/* ---- Line / area ----------------------------------------------------- */
.chart .series-line {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .series-line[data-series="2"] { stroke: var(--series-2); }
.chart .series-line[data-series="3"] { stroke: var(--series-3); }
.chart .series-line[data-ghost="true"] { stroke: var(--series-ghost); stroke-width: 1.5; }
.chart .series-line[data-style="dashed"] { stroke-dasharray: 4 3; }
.chart .series-area { fill: var(--accent); opacity: 0.06; stroke: none; }

.chart .marker { fill: var(--surface); stroke: var(--series-1); stroke-width: 1.75; }
.chart .marker--solid { fill: var(--series-1); stroke: none; }

/* ---- Bars ------------------------------------------------------------ */
.chart .bar { fill: var(--series-1); transition: fill var(--dur-fast) var(--ease); }
.chart .bar[data-tone="mute"] { fill: var(--series-ghost); }
.chart .bar[data-tone="ink"]  { fill: var(--series-2); }
.chart .bar[data-tone="pos"]  { fill: var(--pos); }
.chart .bar[data-tone="neg"]  { fill: var(--neg); }
.chart .bar[data-tone="warn"] { fill: var(--warn); }
.chart .bar:hover { fill: var(--accent-ink); }
.chart .bar[data-tone="mute"]:hover { fill: var(--ink-3); }

/* ---- Histogram / distribution --------------------------------------- */
.chart .histbar { fill: var(--accent); opacity: 0.85; }
.chart .histbar[data-tail="true"] { fill: var(--ink-3); opacity: 0.55; }
.chart .histbar:hover { opacity: 1; }
.chart .ref-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .ref-line--accent { stroke: var(--accent); }
.chart .ref-line--neg { stroke: var(--neg); }
.chart .ref-label { font-size: 9px; font-weight: 600; fill: var(--ink-2); }

/* ---- Candlestick ----------------------------------------------------- */
.chart .candle-wick { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart .candle-body { stroke-width: 1; shape-rendering: crispEdges; }
.chart .candle-body[data-dir="up"]   { fill: var(--surface); stroke: var(--pos); }
.chart .candle-wick[data-dir="up"]   { stroke: var(--pos); }
.chart .candle-body[data-dir="down"] { fill: var(--neg); stroke: var(--neg); }
.chart .candle-wick[data-dir="down"] { stroke: var(--neg); }
.chart .volume-bar { fill: var(--line-strong); }

/* ---- Radar / spider -------------------------------------------------- */
.chart .radar-web { fill: none; stroke: var(--line-faint); stroke-width: 1; }
.chart .radar-web--outer { stroke: var(--line-strong); }
.chart .radar-spoke { stroke: var(--line); stroke-width: 1; }
.chart .radar-shape { stroke-width: 1.75; stroke-linejoin: round; }
.chart .radar-shape[data-series="1"] { stroke: var(--series-1); fill: var(--series-1); fill-opacity: 0.10; }
.chart .radar-shape[data-series="2"] { stroke: var(--series-2); fill: var(--series-2); fill-opacity: 0.06; }
.chart .radar-shape[data-series="3"] { stroke: var(--series-3); fill: var(--series-3); fill-opacity: 0.06; stroke-dasharray: 4 3; }
.chart .radar-axis-label { font-size: 10px; font-weight: 500; fill: var(--ink-2); }

/* ---- Waterfall / riser ----------------------------------------------- */
.chart .riser { transition: opacity var(--dur-fast) var(--ease); }
.chart .riser[data-kind="base"]  { fill: var(--series-2); }
.chart .riser[data-kind="up"]    { fill: var(--pos); }
.chart .riser[data-kind="down"]  { fill: var(--neg); }
.chart .riser[data-kind="total"] { fill: var(--accent); }
.chart .riser:hover { opacity: 0.82; }
.chart .riser-connector { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .riser-value { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--ink); text-anchor: middle; }

/* ---- Sparkline ------------------------------------------------------- */
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .spark-line { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-line[data-tone="pos"] { stroke: var(--pos); }
.spark .spark-line[data-tone="neg"] { stroke: var(--neg); }
.spark .spark-line[data-tone="accent"] { stroke: var(--accent); }
.spark .spark-area { stroke: none; fill: currentColor; opacity: 0.08; }
.spark .spark-tip { r: 1.9; }

/* ---- Hover plumbing shared by cartesian charts ----------------------- */
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .crosshair { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.4; pointer-events: none; }

/* ---- Chart frame ----------------------------------------------------- */
.chartframe { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.chartframe__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.chartframe__value { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.chartframe__note { font-size: var(--fs-xs); color: var(--ink-2); line-height: var(--lh-snug); }
.chartframe__canvas { min-width: 0; }