/* Compare bars: two to four percentages on one scale. The group the page
   is about takes the concern tone; the comparison stays muted. */
.vc-compare-bars {
  margin: 2rem 0 2.5rem;
}
.vc-compare-bars__item--concern { --vc-bar-tone: var(--vc-chart-series-2); }
.vc-compare-bars__item--neutral { --vc-bar-tone: var(--vc-text-muted); }
.guide-prose .vc-compare-bars .vc-compare-bars__title,
.vc-compare-bars .vc-compare-bars__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1rem;
  font-family: var(--vc-font-heading);
  font-weight: var(--vc-weight-heading);
  font-size: 22px;
  line-height: 1.2;
  color: var(--vc-text);
}
.vc-compare-bars__icon {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.vc-compare-bars__icon--dark,
[data-theme="dark"] .vc-compare-bars__icon--light {
  display: none;
}
[data-theme="dark"] .vc-compare-bars__icon--dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vc-compare-bars__icon--light { display: none; }
  :root:not([data-theme="light"]) .vc-compare-bars__icon--dark { display: block; }
}
.guide-prose .vc-compare-bars .vc-compare-bars__list,
.vc-compare-bars .vc-compare-bars__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-prose .vc-compare-bars .vc-compare-bars__item,
.vc-compare-bars .vc-compare-bars__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  margin: 0 0 0.9rem;
  padding: 0;
}
.vc-compare-bars__item::before {
  content: none;
}
.vc-compare-bars__label {
  font-size: 15px;
  color: var(--vc-text);
}
.vc-compare-bars__value {
  font-weight: var(--vc-weight-heading);
  font-size: 16px;
  color: var(--vc-text);
}
.vc-compare-bars__track {
  grid-column: 1 / -1;
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--vc-surface-high);
}
.vc-compare-bars__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--vc-bar-tone);
}
.guide-prose .vc-compare-bars .vc-compare-bars__source,
.vc-compare-bars .vc-compare-bars__source {
  margin: 0.25rem 0 0;
  font-size: 13.5px;
  color: var(--vc-text-muted);
}
.guide-prose .vc-compare-bars .vc-compare-bars__source a,
.vc-compare-bars .vc-compare-bars__source a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}