/**
 * @file score-chart.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The score chart (components/ScoreChart.js): the plot on the left, the legend beside it
 *   (its title in typewriter, a square in each line's colour, the name cut with an ellipsis, the last
 *   score in typewriter); on a phone the legend goes under the plot. The box around it is the Object
 *   box (components/Box.js), which gives its padding and margin. Reads only the theme's tokens.
 *   Drawn by components/ScoreChart.js; a page never writes these classes.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v2.0.0 — 2026-09-26 — The component's own class names (.score-chart, .score-chart-legend,
 *     .score-chart-swatch) in place of the calibrator's .cal-chart and .cal-legend; the box's padding
 *     and margin are the Object box's (component plan, special view).
 *   v1.0.0 — 2026-09-25 — Moved out of calibrator-poster.css (UI consolidation phase 5, a move).
 */

.score-chart { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1rem; align-items: center; }
.score-chart > svg { width: 100%; height: auto; display: block; }
.score-chart-legend { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; }
.score-chart-legend small { font-family: var(--font-mono); font-size: .68rem; color: var(--text-dim); margin-bottom: .2rem; }
.score-chart-legend > div { display: flex; align-items: center; gap: .5rem; }
.score-chart-swatch { width: .8rem; height: .8rem; flex: none; display: block; }
.score-chart-legend span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-chart-legend b { font-family: var(--font-mono); font-size: .74rem; }

@media (max-width: 860px) {
  .score-chart { grid-template-columns: minmax(0, 1fr); }
}