/* chart-maker: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.chart-tool { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .chart-tool { grid-template-columns: minmax(300px, 380px) 1fr; } }
.chart-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.chart-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chart-label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.chart-types { display: flex; flex-wrap: wrap; gap: 6px; }
.chart-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 14px; }
.chart-stage {
    width: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    background: repeating-conic-gradient(#F1F4F9 0% 25%, #FFFFFF 0% 50%) 0 0 / 20px 20px;
}
.chart-stage svg { display: block; width: 100%; height: 100%; }