/** Bushari Design System — accessible figures and semantic data fallbacks. */

.bds-chart { background: var(--bds-color-surface); border: 1px solid var(--bds-color-rule); color: var(--bds-color-ink); font-family: var(--bds-font-sans); margin: var(--bds-space-6) 0; min-width: 0; }
.bds-chart > figcaption { background: var(--bds-color-navy); color: #fff; display: grid; gap: 4px; padding: 14px 16px; }
.bds-chart > figcaption strong { font-size: 16px; line-height: 1.35; }
.bds-chart > figcaption span { color: rgba(255,255,255,0.78); font-size: 12px; line-height: 1.45; }
.bds-chart__plot { height: clamp(17.5rem, 43vw, 23.75rem); padding: 1rem; position: relative; width: 100%; }
.bds-chart--tall .bds-chart__plot { height: clamp(21rem, 52vw, 28.75rem); }
.bds-chart__plot svg { display: block; height: 100%; overflow: visible; width: 100%; }
.bds-chart__grid line { stroke: var(--bds-color-rule); stroke-width: 1; }
.bds-chart__grid text, .bds-chart__x-axis text { fill: var(--bds-color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bds-chart__series--1 { fill: var(--bds-color-navy); stroke: var(--bds-color-navy); }
.bds-chart__series--2 { fill: var(--bds-color-accent); stroke: var(--bds-color-accent); }
.bds-chart__series--3 { fill: var(--bds-color-positive); stroke: var(--bds-color-positive); }
.bds-chart__series--4 { fill: var(--bds-color-negative); stroke: var(--bds-color-negative); }
.bds-chart__series--5 { fill: #7b1fa2; stroke: #7b1fa2; }
.bds-chart__lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.bds-chart__lines circle { stroke-width: 2; }
.bds-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0; padding: 0.2rem 1rem 0.9rem; }
.bds-chart__legend li { align-items: center; display: inline-flex; font-size: 12px; gap: 0.4rem; }
.bds-chart__legend-key { border-radius: 50%; display: inline-block; height: 0.65rem; width: 0.65rem; }
.bds-chart__table { border-top: 1px solid var(--bds-color-rule); }
.bds-chart__table summary { color: var(--bds-color-navy-dark); cursor: pointer; font-size: 13px; font-weight: 800; min-height: 44px; padding: 12px 16px; }
.bds-chart__table summary:focus-visible { outline: 3px solid var(--bds-color-accent); outline-offset: -3px; }
.bds-chart__table .bds-table-wrap { border: 0; margin: 0; }
.bds-chart__table .bds-table { font-size: 13px; min-width: 34rem; }
.bds-chart__status { color: var(--bds-color-muted); font-size: 13px; padding: 12px 16px; }
.bds-chart.is-error .bds-chart__plot { display: none; }
.bds-meter-chart { display: grid; gap: 11px; padding: 16px; }
.bds-meter-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(6.5rem, 0.45fr) minmax(8rem, 1fr) minmax(4.5rem, auto); }
.bds-meter-row > br { display: none; }
.bds-meter__label { color: var(--bds-color-navy-dark); font-size: 12px; font-weight: 750; }
.bds-meter__value { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.bds-meter { appearance: none; background: var(--bds-color-rule); border: 0; height: 12px; width: 100%; }
.bds-meter::-webkit-meter-bar { background: var(--bds-color-rule); border: 0; border-radius: 0; }
.bds-meter::-webkit-meter-optimum-value { background: var(--bds-color-navy); }
.bds-meter::-moz-meter-bar { background: var(--bds-color-navy); }
.bds-meter--prior::-webkit-meter-optimum-value { background: var(--bds-color-muted); }
.bds-meter--prior::-moz-meter-bar { background: var(--bds-color-muted); }
.bds-meter--current::-webkit-meter-optimum-value { background: var(--bds-color-accent); }
.bds-meter--current::-moz-meter-bar { background: var(--bds-color-accent); }

@media (max-width: 600px) {
  .bds-chart__plot { height: 18.75rem; padding: 0.75rem 0.5rem; }
  .bds-chart--tall .bds-chart__plot { height: 24.375rem; }
  .bds-meter-row { align-items: stretch; gap: 0.35rem; grid-template-columns: 1fr auto; }
  .bds-meter { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .bds-chart * { animation: none; transition: none; }
}

@media print {
  .bds-chart__plot { break-inside: avoid; height: 19rem; }
  .bds-chart__table { display: block; }
  .bds-chart__table summary { display: none; }
  .bds-chart__table[open] .bds-table-wrap { display: block; }
}