.chart-caption {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bar-chart {
  display: grid;
  gap: 20px;
  margin-top: 14px;
}

.bar-row {
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.bar-metric {
  padding-top: 15px;
  color: var(--text);
}

.bar-comparison {
  display: grid;
  gap: 8px;
}

.bar-series {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(44px, auto);
  gap: 9px;
  align-items: center;
}

.bar-series > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bar-series > strong {
  color: var(--text);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-track {
  height: 10px;
  padding: 0;
}

.bar-track .bar-fill {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 999px;
}

.bar-fill-prior {
  background: #cbd5e1;
}

.bar-fill-current {
  background: var(--primary);
}

@media (max-width: 760px) {
  .bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .bar-metric {
    padding-top: 0;
  }

  .bar-series {
    grid-template-columns: 58px minmax(0, 1fr) minmax(44px, auto);
  }
}