/* chart.css — карточка графика .chart-card, контейнер холста .chart-box (высота включает подписи осей — без
   вложенной прокрутки), таблица-альтернатива .chart-data под графиком, «нет данных» .chart-empty.
   Владелец — агент `cal-dash` (js/charts.js). Правила: только var(--…) токены (tests/ui/test_ui_regulation.py),
   см. docs/THEMES.md. */
.chart-card { display: flex; flex-direction: column; min-width: 0; }
.chart-card .card-head { align-items: flex-start; }
.chart-card .card-head h2 { font-size: var(--fs-md); }
.chart-card .card-head p { margin-top: 2px; }
.chart-box { position: relative; height: 260px; min-width: 0; }
.chart-box.tall { height: 320px; }
.chart-box canvas { display: block; max-width: 100%; }
.chart-empty { display: flex; align-items: center; gap: var(--s2); min-height: 120px; justify-content: center;
  border: var(--border-w) dashed var(--border); border-radius: var(--r); padding: var(--s4); text-align: center; }
.chart-empty .icon { color: var(--fg-muted); }

.chart-data { margin-top: var(--s3); }
.chart-data > summary { display: inline-flex; align-items: center; gap: var(--s1h); min-height: 28px; padding: 0 var(--s1);
  border-radius: var(--r-sm); list-style: none; }
.chart-data > summary::-webkit-details-marker { display: none; }
.chart-data > summary .icon { width: 14px; height: 14px; }
.chart-data > summary:hover { color: var(--fg); }
.chart-data[open] > summary { color: var(--fg); margin-bottom: var(--s2); }
.chart-data table { font-size: var(--fs-sm); }
.chart-data th[scope="row"] { font-weight: var(--fw-medium); color: var(--fg); text-transform: none; letter-spacing: 0;
  font-size: var(--fs-sm); background: transparent; position: static; }
.chart-data th.num { text-align: right; }

/* ключ серии в легендах и таблицах, сделанных разметкой: цвет задаёт класс серии (никогда не текст) */
.series-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--key, var(--chart-1)); }
.series-key.s-1 { --key: var(--chart-1); } .series-key.s-2 { --key: var(--chart-2); } .series-key.s-3 { --key: var(--chart-3); }
.series-key.s-4 { --key: var(--chart-4); } .series-key.s-5 { --key: var(--chart-5); } .series-key.s-6 { --key: var(--chart-6); }
.series-key.s-danger { --key: var(--danger); } .series-key.s-neutral { --key: var(--border-strong); }

@media (max-width: 640px) {
  .chart-box { height: 220px; }
  .chart-data .table-wrap > table > tbody > tr > th[scope="row"] { display: block; padding: 0 0 var(--s1); border: 0; }
}
@media (forced-colors: active) {
  .series-key { forced-color-adjust: none; border: var(--border-w) solid CanvasText; }
}