.cmp { display: flex; flex-direction: column; gap: var(--space-3); }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.cmp__head { font-size: var(--text-sm); color: var(--color-text-2); }
.cmp__teams { display: flex; justify-content: space-between; gap: var(--space-3); }
.cmp__lab { font-size: var(--text-sm); color: var(--color-text-2); }
.cmp__bar { display: flex; height: 2rem; border-radius: 6px; overflow: hidden; background: var(--color-surface-inset);
  font-family: var(--font-condensed); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp__bar > span { display: flex; align-items: center; min-width: 0; padding-inline: var(--space-2); white-space: nowrap; }
.cmp__home { background: var(--team-home); color: var(--team-home-ink); box-shadow: inset 0 0 0 2px var(--team-home-edge); }
.cmp__away { justify-content: flex-end; background: var(--team-away); color: var(--team-away-ink); box-shadow: inset 0 0 0 2px var(--team-away-edge); }
.cmp-table td.num, .cmp-table th.num { text-align: right; }
.cmp-table th[scope="col"].num { white-space: nowrap; }
.note-line { color: var(--color-text-2); }
@media (max-width: 480px) {
  .cmp__head, .cmp__row { grid-template-columns: 4.2rem minmax(0, 1fr); gap: var(--space-2); }
}