/* Intervex v2.1 — chart chrome (dataviz skill): hairline grid, recessive axes, text in text tokens, 2 px lines,
   surface-ring markers, hover lift. Series colour only ever appears on marks. */
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart-wrap { min-width: 0; }
.chart--spark { width: 100%; max-width: 360px; height: 64px; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-axis { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-tick { fill: var(--muted); font-size: 12px; }
.chart-cat { fill: var(--text-2); font-size: 13px; font-weight: 600; }
.chart-label { fill: var(--text-2); font-size: 12px; font-weight: 600; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-hair { stroke: var(--chart-muted); stroke-width: 1; }
.chart-mark { cursor: default; outline: none; }
.chart-mark:hover path, .chart-mark:focus-visible path { filter: brightness(1.12); }
.chart-cell:hover, .chart-cell:focus-visible { stroke: var(--text); stroke-width: 1.5; }
.chart-overlay { outline: none; }
.chart-overlay:focus-visible { stroke: var(--focus); stroke-width: 2; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: .93rem; color: var(--text-2); font-weight: 600; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend-swatch.is-line { height: 3px; width: 18px; border-radius: 2px; }
.chart-scale { display: flex; align-items: center; gap: 3px; margin-top: 6px; font-size: .87rem; color: var(--muted); }
.chart-scale-step { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-scale-label { padding: 0 4px; }
.chart-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px 10px; font-size: .93rem; min-width: 120px; }
.chart-tip-title { font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.chart-tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip-row strong { font-variant-numeric: tabular-nums; }
.chart-tip-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-tip-label { color: var(--muted); }