@charset "UTF-8";
.activity-pie { display: grid; grid-template-columns: minmax(180px, 58%) minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; min-width: 0; }
.activity-pie svg { display: block; width: 100%; height: auto; }
.activity-pie-track { fill: none; stroke: #e6ebe7; stroke-width: 36; }
.activity-pie-slice { fill: none; stroke: var(--slice-color); stroke-width: 36; stroke-linecap: butt; }
.activity-pie-slice-label { fill: #fff; stroke: rgba(0, 0, 0, .58); stroke-width: 2.7px; paint-order: stroke; font-size: 9px; font-weight: 800; pointer-events: none; }
.activity-pie-total { fill: var(--ink); font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.activity-pie-total-label { fill: var(--muted); font-size: 11px; }
.activity-pie-legend { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 11px; }
.activity-pie-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 2px 5px; align-items: center; min-width: 0; }
.activity-pie-marker { width: 9px; height: 9px; border-radius: 50%; background: var(--slice-color); }
.activity-pie [data-tone="0"] { --slice-color: #4f7db8; }
.activity-pie [data-tone="1"] { --slice-color: #d58445; }
.activity-pie [data-tone="2"] { --slice-color: #6c9a68; }
.activity-pie [data-tone="3"] { --slice-color: #a36cb1; }
.activity-pie [data-tone="4"] { --slice-color: #d3a62b; }
.activity-pie [data-tone="5"] { --slice-color: #59a4a0; }
.activity-pie [data-tone="6"] { --slice-color: #bb6670; }
.activity-pie [data-tone="7"] { --slice-color: #7f8790; }
.activity-pie [data-tone="8"] { --slice-color: #a2a7aa; }
.activity-pie [data-tone="9"] { --slice-color: #cf5353; }
.activity-pie [data-tone="10"] { --slice-color: #a33375; }
.activity-pie [data-tone="11"] { --slice-color: #777f87; }
.activity-pie [data-tone="win"] { --slice-color: var(--outcome-win); }
.activity-pie [data-tone="loss"] { --slice-color: var(--outcome-loss); }
.activity-pie [data-tone="abandoned"] { --slice-color: var(--outcome-abandoned); }
.activity-pie-legend li > span:nth-child(2) { overflow-wrap: anywhere; }
.activity-pie-legend strong { grid-column: 2; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .activity-pie { grid-template-columns: minmax(165px, 54%) minmax(0, 1fr); }
}