/* Shared chart styles (src/core/charts.tsx). Palette: violet #5B3DF5, coral #FF5A5F, yellow #FFB400, mint #00C2A8. */
.chart2 { margin: 0; }
.chart2 svg { display: block; width: 100%; max-width: 40rem; height: auto; }
.chart2 .c-grid { stroke: var(--line, var(--border, #E4E4F0)); stroke-width: 1; }
.chart2 .c-tick { fill: var(--muted, #5F6283); font-size: 10px; }
.chart2 .c-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart2 .c-dot { stroke: var(--surface, #fff); stroke-width: 1.5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.chart-data { margin-top: 8px; }
.chart-data summary { cursor: pointer; color: var(--muted, #5F6283); font-size: 0.875rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .chart2 .c-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c-draw 0.8s ease-out forwards; }
  .chart2 .c-bar { transform-box: fill-box; transform-origin: bottom; animation: c-grow 0.5s ease-out both; }
  .hb-fill { transform-origin: left center; animation: hb-grow 0.5s ease-out both; }
  [dir="rtl"] .hb-fill { transform-origin: right center; }
}
@keyframes c-draw { to { stroke-dashoffset: 0; } }
@keyframes c-grow { from { transform: scaleY(0); } }

.hbars { list-style: none; margin: 0 0 var(--s3, 12px); padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.hb-label { overflow-wrap: anywhere; font-size: 0.9375rem; }
.hb-track { display: block; block-size: 12px; border-radius: 999px; background: var(--surface-2, #EFEDFD); overflow: hidden; }
.hb-fill { display: block; block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, #5B3DF5, #8B6CFF); }
.hb-val { font-variant-numeric: tabular-nums; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 520px) { .hbars li { grid-template-columns: minmax(0, 1fr) auto; } .hb-track { grid-column: 1 / -1; grid-row: 2; } }
.chart-swatch.is-hatch { background-image: repeating-linear-gradient(135deg, transparent 0 2px, rgb(255 255 255 / 0.65) 2px 4px); }
@keyframes hb-grow { from { transform: scaleX(0); } }