.chart {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.chart-scroll {
  overflow-x: auto;
}

/* A plot never shrinks below its drawn size, so its labels stay readable; a narrow screen scrolls it sideways. */
.chart--plot {
  min-width: 480px;
  max-width: 560px;
  margin: 0 auto;
}

.chart--donut {
  max-width: 200px;
  margin: 0 auto;
}

.chart__bar {
  fill: var(--navy-700);
}

.chart__axis,
.chart__grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart__value {
  fill: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}

.chart__label {
  fill: var(--text-muted);
  font-size: 13px;
}

.chart__center {
  fill: var(--text-strong);
  font-size: 26px;
  font-weight: 700;
}

.chart__line {
  fill: none;
  stroke: var(--blue-600);
  stroke-width: 2.5;
}

.chart__area {
  fill: var(--blue-100);
}

.chart__dot {
  fill: var(--blue-600);
}

.chart__slice {
  fill: none;
}

.chart__slice--1 {
  stroke: var(--blue-600);
  background: var(--blue-600);
}

.chart__slice--2 {
  stroke: var(--warning);
  background: var(--warning);
}

.chart__slice--3 {
  stroke: var(--success);
  background: var(--success);
}

.chart__slice--4 {
  stroke: var(--danger);
  background: var(--danger);
}

.chart__slice--5 {
  stroke: var(--navy-700);
  background: var(--navy-700);
}

.chart__slice--6 {
  stroke: var(--neutral);
  background: var(--neutral);
}

.chart__slice--7 {
  stroke: var(--star);
  background: var(--star);
}

.chart__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.chart__legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.chart__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
}

.chart-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 639px) {
  .chart-pair {
    grid-template-columns: 1fr;
  }
}