/* chart.css: Chart (component 31). Owner: group E (P2.T8). Tokens only, logical properties only. 02 "31. Chart".
   Series colours are --series-1 to --series-6 through the chart__s1 to chart__s6 classes, never semantic colours. */
[data-component="chart"] { display: grid; gap: var(--space-3); min-inline-size: 0; color: var(--text); }
[data-component="chart"][data-type="sparkline"] { position: relative; overflow: clip; display: inline-block; inline-size: var(--size-spark-w); block-size: var(--size-spark-h); line-height: 0; }

[data-component="chart"] .chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
[data-component="chart"] .chart__title { margin: 0; font: var(--type-section); }
[data-component="chart"] .chart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
[data-component="chart"] .chart__legend[hidden] { display: none; }
[data-component="chart"] .chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-3); max-inline-size: none; font: var(--type-label); }
[data-component="chart"] .chart__swatch { display: inline-block; flex: none; inline-size: var(--size-dot); block-size: var(--size-dot); }
[data-component="chart"] .chart__swatch[data-shape="line"] { block-size: var(--border-width-thick); border-radius: var(--radius-bar); }
[data-component="chart"] .chart__swatch.chart__s1,
[data-component="chart"] .chart__readout .chart__s1 { background: var(--series-1); }
[data-component="chart"] .chart__swatch.chart__s2,
[data-component="chart"] .chart__readout .chart__s2 { background: var(--series-2); }
[data-component="chart"] .chart__swatch.chart__s3,
[data-component="chart"] .chart__readout .chart__s3 { background: var(--series-3); }
[data-component="chart"] .chart__swatch.chart__s4,
[data-component="chart"] .chart__readout .chart__s4 { background: var(--series-4); }
[data-component="chart"] .chart__swatch.chart__s5,
[data-component="chart"] .chart__readout .chart__s5 { background: var(--series-5); }
[data-component="chart"] .chart__swatch.chart__s6,
[data-component="chart"] .chart__readout .chart__s6 { background: var(--series-6); }

/* The plot: a focus stop, 240 high (160 compact), width 100%, viewBox set to the measured size. */
[data-component="chart"] .chart__plot[hidden] { display: none; }
[data-component="chart"] .chart__focus { position: relative; block-size: var(--size-chart-h); border-radius: var(--radius-control); }
[data-component="chart"] .chart__plot[data-compact="true"] .chart__focus { block-size: var(--size-chart-h-sm); }
[data-component="chart"] .chart__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
[data-component="chart"] .chart__grid { stroke: var(--border); stroke-width: var(--border-width); }
[data-component="chart"] .chart__baseline { stroke: var(--border-strong); stroke-width: var(--border-width); }
[data-component="chart"] .chart__tick { fill: var(--text-secondary); font: var(--type-caption); font-variant-numeric: tabular-nums lining-nums; }
[data-component="chart"] .chart__end-label { fill: var(--text); font: var(--type-label); }
[data-component="chart"] .chart__hit { fill: transparent; pointer-events: all; }
[data-component="chart"] .chart__guide { display: none; stroke: var(--border-strong); stroke-width: var(--border-width); pointer-events: none; }
[data-component="chart"] .chart__guide[data-shown="true"] { display: inline; }

[data-component="chart"] .chart__line { fill: none; stroke-width: var(--border-width-thick); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
[data-component="chart"] .chart__line.chart__s1 { stroke: var(--series-1); }
[data-component="chart"] .chart__line.chart__s2 { stroke: var(--series-2); }
[data-component="chart"] .chart__line.chart__s3 { stroke: var(--series-3); }
[data-component="chart"] .chart__line.chart__s4 { stroke: var(--series-4); }
[data-component="chart"] .chart__line.chart__s5 { stroke: var(--series-5); }
[data-component="chart"] .chart__line.chart__s6 { stroke: var(--series-6); }
[data-component="chart"] .chart__point { stroke: var(--surface); opacity: 0; pointer-events: none; }
[data-component="chart"] .chart__point[data-active="true"] { opacity: 1; }
[data-component="chart"] .chart__point.chart__s1 { fill: var(--series-1); }
[data-component="chart"] .chart__point.chart__s2 { fill: var(--series-2); }
[data-component="chart"] .chart__point.chart__s3 { fill: var(--series-3); }
[data-component="chart"] .chart__point.chart__s4 { fill: var(--series-4); }
[data-component="chart"] .chart__point.chart__s5 { fill: var(--series-5); }
[data-component="chart"] .chart__point.chart__s6 { fill: var(--series-6); }
[data-component="chart"] .chart__bar { pointer-events: none; }
[data-component="chart"] .chart__seg { stroke: var(--surface); stroke-width: var(--border-width); }
[data-component="chart"] .chart__bar.chart__s1 { fill: var(--series-1); }
[data-component="chart"] .chart__bar.chart__s2 { fill: var(--series-2); }
[data-component="chart"] .chart__bar.chart__s3 { fill: var(--series-3); }
[data-component="chart"] .chart__bar.chart__s4 { fill: var(--series-4); }
[data-component="chart"] .chart__bar.chart__s5 { fill: var(--series-5); }
[data-component="chart"] .chart__bar.chart__s6 { fill: var(--series-6); }

/* The hover and focus readout: a popover on --surface-raised beside the guide. --w is its inline offset, set from the geometry. */
[data-component="chart"] .chart__readout {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--w, 0);
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  font: var(--type-caption);
  pointer-events: none;
  white-space: nowrap;
}
[data-component="chart"] .chart__readout[hidden] { display: none; }
[data-component="chart"] .chart__readout-title { margin: 0 0 var(--space-2); color: var(--text-secondary); font: var(--type-label); }
[data-component="chart"] .chart__readout-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
[data-component="chart"] .chart__readout-list li { display: flex; align-items: center; gap: var(--space-3); max-inline-size: none; }
[data-component="chart"] .chart__readout-name { margin-inline-end: auto; padding-inline-end: var(--space-4); }
[data-component="chart"] .chart__readout-value { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

/* Table view: a Data table with the same values; also in the DOM (visually hidden) while the plot shows. */
[data-component="chart"] .chart__table-wrap { overflow: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-region); background: var(--surface); }
[data-component="chart"] .chart__table-wrap.visually-hidden { border: 0; }
[data-component="chart"] .chart__table { inline-size: 100%; border-collapse: collapse; font: var(--type-table); }
[data-component="chart"] .chart__table th,
[data-component="chart"] .chart__table td { block-size: var(--size-row); padding-inline: var(--space-4); border-block-end: var(--border-width) solid var(--border); text-align: start; }
[data-component="chart"] .chart__table thead th { block-size: var(--size-header-row); background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-label); }
[data-component="chart"] .chart__table th[data-type="num"],
[data-component="chart"] .chart__table td[data-type="num"] { text-align: end; font-variant-numeric: tabular-nums lining-nums; }
[data-component="chart"] .chart__table tbody th { font-weight: 400; }

/* Sparkline: 96 by 24, 1.5 px stroke in text-secondary or a series colour, end marker radius 3. */
[data-component="chart"] .chart__spark { display: block; inline-size: var(--size-spark-w); block-size: var(--size-spark-h); overflow: visible; }
[data-component="chart"] .chart__spark-line { fill: none; stroke: var(--text-secondary); stroke-width: var(--border-width-rail); stroke-linejoin: round; stroke-linecap: round; }
[data-component="chart"] .chart__spark-end { fill: var(--text-secondary); }
[data-component="chart"][data-tone="s1"] .chart__spark-line { stroke: var(--series-1); } [data-component="chart"][data-tone="s1"] .chart__spark-end { fill: var(--series-1); }
[data-component="chart"][data-tone="s2"] .chart__spark-line { stroke: var(--series-2); } [data-component="chart"][data-tone="s2"] .chart__spark-end { fill: var(--series-2); }
[data-component="chart"][data-tone="s4"] .chart__spark-line { stroke: var(--series-4); } [data-component="chart"][data-tone="s4"] .chart__spark-end { fill: var(--series-4); }

/* Loading: a title bar (the title itself) and five horizontal lines. Empty and error sit in the plot area. */
[data-component="chart"] .chart__skeleton { display: grid; align-content: space-between; block-size: var(--size-chart-h); padding-block: var(--space-3); }
[data-component="chart"][data-compact="true"] .chart__skeleton { block-size: var(--size-chart-h-sm); }
[data-component="chart"] .chart__skeleton-line { display: block; block-size: var(--border-width); background: var(--border); animation: chart-pulse var(--duration-pulse) var(--ease-standard) infinite alternate; }
@keyframes chart-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { [data-component="chart"] .chart__skeleton-line { animation: none; } }
[data-component="chart"] .chart__empty { display: grid; align-content: center; justify-items: center; gap: var(--space-2); min-block-size: var(--size-chart-h); padding: var(--space-6); text-align: center; border: var(--border-width) dashed var(--border); border-radius: var(--radius-region); }
[data-component="chart"][data-compact="true"] .chart__empty { min-block-size: var(--size-chart-h-sm); }
[data-component="chart"] .chart__empty-title { margin: 0; font: var(--type-sub); }
[data-component="chart"] .chart__empty-detail { margin: 0; color: var(--text-secondary); font: var(--type-body); }
[data-component="chart"] .chart__error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--border); border-inline-start: var(--border-width-accent) solid var(--critical); border-radius: var(--radius-control); background: var(--critical-subtle); }
[data-component="chart"] .chart__error .icon { color: var(--critical); }
[data-component="chart"] .chart__error p { margin: 0; flex: 1 1 var(--size-popover-sm); font: var(--type-body); }

/* Kitchen sink sample column (the demo only). */
.chart-demo { inline-size: 100%; max-inline-size: var(--size-form-max); min-inline-size: 0; }
.chart-demo[data-width="half"] { max-inline-size: var(--size-dialog-md); }
.chart-demo__spark-row { display: flex; align-items: center; gap: var(--space-4); font: var(--type-body); }