.win-rate-chart .outcome-wins { --outcome-color: var(--outcome-win); }
.win-rate-chart .outcome-losses { --outcome-color: var(--outcome-loss); }
.win-rate-chart .outcome-abandoned { --outcome-color: var(--outcome-abandoned); }
.win-rate-chart .win-rate-segment { fill: var(--outcome-color); stroke: none; }
.win-rate-chart .win-rate-selected-column { fill: #edf3ee; }
.win-rate-chart .chart-point:focus .win-rate-outline,
.win-rate-chart .chart-point.is-selected .win-rate-outline { stroke: var(--ink); stroke-width: 1.5; }
.win-rate-chart { display: flex; flex-direction: column; }
.win-rate-chart > svg { flex-shrink: 0; }
.win-rate-legend { order: -1; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; padding-right: 52px; color: var(--muted); font-size: 11px; }
.win-rate-legend span { display: inline-flex; align-items: center; gap: 4px; }
.win-rate-legend span::before { content: ''; width: 9px; height: 9px; background: var(--outcome-color); }
.compact .win-rate-legend { font-size: 9px; gap: 3px 8px; padding-right: 0; }
.compact .win-rate-legend span::before { width: 6px; height: 6px; }
#chart-zoom .win-rate-legend { padding-right: 0; }