/* Charts sit inside cards and panels, so they take the product's text, border and surface tokens
   instead of colours of their own. Series colours come from the data (inline stroke/fill); this file
   only sets how strongly each layer draws: current value, saved data, ranges and limits, axes, grid. */

/* --na-chart-surface is the colour behind the chart, set per chart (card or page). */
.na-chart { display: block; overflow: visible; -webkit-user-select: none; user-select: none; }

/* Grid and axes: the quietest layer. The card border token keeps grid lines as faint as a card edge. */
.na-chart__grid { stroke: var(--na-card-border, rgba(32, 40, 51, .07)); stroke-width: 1px; shape-rendering: crispEdges; }
.na-chart__baseline { stroke: var(--na-control-border, #d9dee7); stroke-width: 1px; shape-rendering: crispEdges; }
.na-chart__tick { fill: var(--na-text-muted, #6b7585); font-size: .72rem; font-weight: 400; font-variant-numeric: tabular-nums; }

/* Ranges, limits and reference lines: thin and behind the data. */
.na-chart__limit { fill: none; stroke-width: 1px; stroke-opacity: .7; }
.na-chart__range-fill { stroke: none; fill-opacity: .06; }
/* Hovering a range or limit names its values; the hit area widens the thin line for the pointer. */
.na-chart__hit { fill: none; stroke: transparent; stroke-width: 10px; pointer-events: stroke; }
.na-chart__hovered .na-chart__range-fill { fill-opacity: .12; }
.na-chart__hovered .na-chart__limit { stroke-opacity: 1; }

/* Saved data. The thin surface ring keeps points that share an x apart without moving them. */
.na-chart__line { fill: none; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.na-chart__line--step { stroke-linejoin: miter; stroke-linecap: butt; }
.na-chart__band { stroke: none; fill-opacity: .08; }
.na-chart__point { stroke: var(--cui-card-bg, #fff); stroke-width: 1px; }

/* The value being typed: a ring on the plot, or a short arrowed value inside the edge it lies beyond. */
.na-chart__draft { fill: var(--cui-card-bg, #fff); stroke-width: 1.5px; }
.na-chart__overflow { fill: var(--na-text-body, #354052); font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--cui-card-bg, #fff); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* BarChartWidget: the bars, and the legend above them. */
.na-chart__bar { transition: filter .12s ease-out; }
.na-chart__bar:hover { filter: brightness(1.08); }
.na-bar-chart__legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .25rem .9rem; font-size: .78rem; color: var(--cui-secondary-color, #6c757d); margin-bottom: .25rem; }
.na-bar-chart__legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.na-bar-chart__swatch { width: .65rem; height: .65rem; border-radius: .15rem; display: inline-block; }