/*
 * One look for every chart: same axes, same gridlines, same legend, same tooltip. A chart that
 * cannot draw says so in the same place a chart would be, instead of collapsing the layout.
 */

.chart {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	min-width: 0;
}

.chart-canvas {
	width: 100%;
	height: auto;
	display: block;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r2);
	overflow: visible;
}

.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis-line { stroke: var(--line-strong); stroke-width: 1; }
.chart-axis {
	fill: var(--muted);
	font-size: 10px;
	font-family: var(--font);
	font-variant-numeric: tabular-nums;
}
.chart-axis-title { fill: var(--faint); font-size: 10px; letter-spacing: .04em; }

.chart-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.is-raw { stroke-width: 1.1; opacity: .75; }
.chart-line.is-dim { opacity: .18; }
.chart-area { stroke: none; opacity: .1; }

.chart-marker { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.chart-marker-label { fill: var(--faint); font-size: 9px; }

.chart-point { stroke: var(--surface-2); stroke-width: 1.5; }
.chart-point.is-best { stroke: var(--surface); stroke-width: 2; }

/* Invisible but hoverable: a transparent fill still takes pointer events, so the curve stays
   clean and the reading appears under the cursor. */
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-cursor { stroke: var(--line-strong); stroke-width: 1; pointer-events: none; }

.chart-bar { rx: 2; }
.chart-bar-label { fill: var(--text-2); font-size: 11px; }
.chart-bar-value { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-bar-track { fill: var(--surface-3); rx: 2; }

/* --- legend ---------------------------------------------------------------------------- */

.chart-legend {
	display: flex;
	align-items: center;
	gap: var(--s3);
	flex-wrap: wrap;
	font-size: var(--t-caption);
	color: var(--muted);
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 2px 0;
	height: auto;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}
.legend-item:hover { color: var(--text); }
.legend-item.is-off { opacity: .4; }
.legend-item.is-off .legend-swatch { background: var(--faint) !important; }
.legend-swatch { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.legend-note { margin-left: auto; color: var(--faint); }

/* --- chart toolbar (scale / window / series pickers) ----------------------------------- */

.chart-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.seg {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: var(--r2);
	overflow: hidden;
	background: var(--surface-2);
}
.seg > button {
	height: 26px;
	padding: 0 var(--s3);
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: var(--t-caption);
	white-space: nowrap;
}
.seg > button + button { border-left: 1px solid var(--line); }
.seg > button:hover { color: var(--text); background: var(--surface-3); }
.seg > button.is-on { background: var(--accent-weak); color: var(--accent); }

/* --- empty / loading inside a chart ---------------------------------------------------- */

.chart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 170px;
	border: 1px dashed var(--line);
	border-radius: var(--r2);
	background: var(--surface-2);
	color: var(--muted);
	text-align: center;
	padding: var(--s5);
}

/* --- sparkline in a stat card ---------------------------------------------------------- */

.spark { width: 100%; height: 28px; display: block; margin-top: var(--s1); }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark-area { fill: var(--accent); opacity: .12; stroke: none; }

/* A restart is a different kind of event from an evaluation and must not read as one. */
.chart-marker.is-restart { stroke: var(--warn); stroke-dasharray: 2 3; }