/* "Legs graded so far": a design sample (local demo). Colours are the page tokens; the donut is drawn with SVG attributes, so no inline style is needed. */
.gr { padding-block: 28px 56px; }
.gr-ribbon { margin: 0 0 18px; padding: 8px 14px; border: 1px dashed var(--ring-amber); border-radius: var(--r-md); color: var(--warn-text); font: 600 13px var(--font-body); }
.gr-card { padding: clamp(22px, 3.4vw, 38px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, var(--ink-900), color-mix(in srgb, var(--ink-900) 82%, var(--ink-950))); }
.gr-eyebrow { margin: 0 0 18px; color: var(--teal-text); font: 700 13px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
/* two columns in one card: the big counts start on the same line and the labels under them line up; a thin rule divides them (a line above them when they stack) */
.gr-cols { display: grid; gap: 28px 0; grid-template-columns: minmax(0, 1fr); }
.gr-col { min-width: 0; }
@media (max-width: 859px) { .gr-tier { padding-top: 24px; border-top: 1px solid var(--line); } }
@media (min-width: 860px) {
  .gr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .gr-tier { padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--line); }
  .gr-all { padding-right: clamp(24px, 4vw, 48px); }
}
.gr-solo { grid-template-columns: minmax(0, 1fr) !important; }
.gr-solo .gr-tier { padding-left: 0 !important; border-left: 0 !important; }
.gr-count { margin: 0; color: var(--teal-text); font: 500 clamp(52px, 8vw, 84px) var(--font-head); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gr-label { margin: 10px 0 0; font: 700 clamp(18px, 2.4vw, 24px) var(--font-head); letter-spacing: -0.01em; line-height: 1.2; }
.gr-sub { margin: 14px 0 0; max-width: 40ch; color: var(--text-dim); font-size: 16px; line-height: 1.5; }
.gr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 18px; }
.gr-side { flex: 1 1 140px; display: grid; gap: 12px; }
.gr-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.gr-legend > div { display: grid; gap: 2px; }
.gr-legend dt { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font: 600 13px var(--font-body); }
.gr-legend dt i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.gr-legend dd { margin: 0; font: 700 26px var(--font-head); font-variant-numeric: tabular-nums; }
.gl-landed { --c: var(--ring-green); } .gl-missed { --c: var(--ring-red); } .gl-void { --c: var(--ring-grey); }
.gr-meta { margin: 0; color: var(--text-dim); font-size: 13px; }
.gr-ring { position: relative; margin: 0; flex: none; width: 190px; }
.gr-ring svg { display: block; width: 100%; height: auto; transform: rotate(0deg); }
.gr-ring .rim { stroke: var(--line); }
.gr-ring .arc { stroke-linecap: butt; }
.gr-ring .a-landed { stroke: var(--ring-green); } .gr-ring .a-missed { stroke: var(--ring-red); } .gr-ring .a-void { stroke: var(--ring-grey); }
.gr-ring figcaption { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.gr-ring figcaption b { font: 600 34px var(--font-head); font-variant-numeric: tabular-nums; }
.gr-ring figcaption span { max-width: 11ch; margin: 0 auto; color: var(--text-dim); font: 600 12px var(--font-body); line-height: 1.25; }
.gr-empty { text-align: center; color: var(--text-dim); }
.gr-fine { margin: 14px 4px 0; color: var(--text-dim); font-size: 12.5px; }
.ch-graded .gr-card { margin-top: clamp(14px, 2vw, 24px); }