.overall-outcome-wrap { min-width: 0; max-width: 100%; }
.overall-outcomes { display: grid; gap: 5px; width: 360px; max-width: 100%; font-variant-numeric: tabular-nums; }
.overall-outcome-legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.overall-outcome-label { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 11px; }
.overall-outcome-label::before { content: ''; width: 5px; height: 5px; align-self: center; border-radius: 50%; background: var(--outcome-color); }
.overall-outcome-label > span { color: #63788d; }
.overall-outcome-label strong { font-size: 13px; font-weight: 750; }
.overall-outcome-track { display: flex; height: 8px; overflow: hidden; border-radius: 5px; background: #e2e9f0; }
.overall-outcome-segment { flex-basis: 0; min-width: 0; background: var(--outcome-color); }
@media (max-width: 700px) {
  .overall-outcome-wrap { flex: 1 1 100%; }
  .overall-outcomes { width: 100%; }
  .overall-outcome-label { gap: 4px; }
  .overall-outcome-label strong { font-size: 12px; }
}