.chart { padding: 1.1rem; }
.chart > figcaption { color: var(--text); text-align: start; font-family: var(--serif); font-size: 1.15rem; margin: 0 0 1rem; }
.chart-plot { position: relative; block-size: clamp(16rem, 40vw, 22rem); }
.chart-plot canvas { max-inline-size: 100%; }
.chart-table { text-align: start; margin-top: .75rem; font-size: .78rem; }
.chart-table summary { color: var(--muted); cursor: pointer; }
.table-scroll { overflow-x: auto; margin-top: .65rem; }
.chart-table table { border-collapse: collapse; inline-size: 100%; }
.chart-table th, .chart-table td { text-align: start; padding: .35rem .55rem; border-bottom: 1px solid var(--rule); }
.chart-table th { font-weight: 600; color: var(--muted); }
@media (max-width: 37.8rem) { .chart { padding: .8rem; } }

.chart-plot.chart-boxplot { block-size: 15rem; }

.chart-scroll { overflow-x: auto; }
.chart-scroll:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }