@layer components{.badges{padding:var(--space-m);border:var(--border-thin)solid var(--color-border);border-radius:var(--radius-m);background:var(--color-surface);& .badges__grid{display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}& .badges__badge{display:grid;gap:var(--space-3xs);justify-items:center;text-align:center}& .badges__mark{position:relative;display:grid;place-items:center;inline-size:3rem;block-size:3rem;margin-block-end:var(--space-2xs);border-radius:50%;background:var(--color-done);color:var(--color-on-done)}& .badges__count{position:absolute;inset-block-start:-.35rem;inset-inline-end:-.35rem;min-inline-size:1.35rem;padding-inline:var(--space-3xs);border:var(--border-thin)solid var(--color-surface);border-radius:var(--radius-s);background:var(--color-text);color:var(--color-surface);font-family:var(--font-mono);font-size:var(--size-step--2);font-variant-numeric:tabular-nums;line-height:1.4;text-align:center}& .badges__name{color:var(--color-text);font-size:var(--size-step--1);font-weight:600}& .badges__description{color:var(--color-text-muted);font-size:var(--size-step--2);text-wrap:balance}}}