/*
 * Bar chart: a real <table> drawn as horizontal bars, so screen readers and
 * print get the numbers as a table. One series, one hue (the site primary).
 * Each bar's length comes from --v, a 0 to 100 share of the largest row.
 */
.bar-chart { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-family: var(--f-ui); }
.bar-chart caption {
  caption-side: top;
  text-align: left;
  font-family: var(--f-heading);
  font-size: 20px;
  color: var(--c-ink);
  padding-bottom: 12px;
}
.bar-chart th, .bar-chart td { padding: 7px 0; vertical-align: middle; text-align: left; }
.bar-chart th { font-weight: 400; color: var(--c-ink); padding-right: 16px; width: 38%; }
.bar-chart td { display: flex; align-items: center; gap: 10px; }
.bar-chart__bar {
  flex: 0 0 auto;
  width: calc(var(--v) * 0.72%);
  min-width: 4px;
  height: 22px;
  background: var(--c-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bar-chart tr:hover .bar-chart__bar { background: var(--c-primary-dark); }
.bar-chart__value { font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.bar-chart__source { color: var(--c-muted); font-size: 15px; margin: 0 0 32px; }
@media (max-width: 600px) {
  .bar-chart th { display: block; width: auto; padding: 2px 0; }
  .bar-chart td { padding: 2px 0 4px; }
  .bar-chart tr { display: block; padding: 6px 0; }
  .bar-chart__bar { width: calc(var(--v) * 0.6%); }
}
@media print {
  .bar-chart__bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}