/* chart styles (redesign lane, 10/24). Tokens from ../style.css only. */
.chart svg { shape-rendering: geometricPrecision; }
.chart text { fill: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: var(--ink); font-size: 13px; }
.chart .val { fill: var(--ink); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
/* text drawn inside marks: white on dark segments, dark ink on teal and light segments */
.chart .inval { fill: #ffffff; font-size: 12px; font-weight: 600; stroke: none; }
:root[data-theme="dark"] .chart .inval { fill: var(--bg); }   /* white on the lighter dark-mode blue and rust is under 4.5:1 */
.chart .indark { fill: #1b1b1a; font-size: 12px; font-weight: 600; stroke: none; }
.chart line { shape-rendering: crispEdges; }
.chart .grid { stroke: var(--hair); stroke-width: 1; }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .ref { stroke: var(--c-ref); stroke-width: 1.75; stroke-dasharray: 3 3; }
.chart .hl { transition: opacity .12s; }
.chart .hl:hover, .chart .hl.on { opacity: .85; }
.chart .hit { fill: transparent; }
.chart .rb { stroke-opacity: .3; }
:root[data-theme="dark"] .chart .rb { stroke-opacity: .75; }
.chart .note { fill: var(--ink); font-size: 12px; font-weight: 500; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.chart .leader { stroke: var(--ink3); stroke-width: 1; }
.chart .share { fill: var(--ink2); font-size: 12px; font-weight: 600; }