/* Text labels remain visible: colour is an additional cue, never the only one. */
:root {
  /* One result palette shared by badges, counts, rows and charts. */
  --outcome-win: #15803d;
  --outcome-loss: #dc2626;
  --outcome-abandoned: #424242;
  --outcome-win-soft: #cfead7;
  --outcome-win-hover: #b9ddc4;
  --outcome-loss-soft: #fad5d5;
  --outcome-loss-hover: #f4bcbc;
  --outcome-abandoned-soft: #d5d7db;
  --outcome-abandoned-hover: #bfc3c9;
}
.outcome-tone-win { --outcome-color: var(--outcome-win); color: var(--outcome-color); }
.outcome-tone-loss { --outcome-color: var(--outcome-loss); color: var(--outcome-color); }
.outcome-tone-abandoned { --outcome-color: var(--outcome-abandoned); color: var(--outcome-color); }
.outcome-tone-neutral { color: #58626b; background-color: #eff1f3; border-color: #ccd2d8; }
.outcome-badge {
  display: inline-block;
  padding: 2px 9px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: .92em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.outcome-badge:not(.outcome-tone-neutral) {
  color: #fff;
  background-color: var(--outcome-color);
  border-color: var(--outcome-color);
}
.outcome-count { background-color: transparent; font-weight: 700; }