@layer components {
    /* Small coloured label. .tag sets the shape; .tag-cN picks a
     * palette hue (N = 0..7, matching the server-assigned slot). The
     * hue (--tag-color) is the ink for text and border; the fill is a
     * --tag-bg-mix tint of it over the page background, so a tag stays
     * legible in light and dark themes without per-tag overrides. */
    .tag {
        --tag-color: var(--fg-muted);
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 0 var(--space-2);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        line-height: 1.5;
        white-space: nowrap;
        border-radius: var(--radius-pill);
        color: var(--tag-color);
        background: color-mix(in oklch, var(--tag-color) var(--tag-bg-mix), var(--bg));
        border: 1px solid color-mix(in oklch, var(--tag-color) 30%, transparent);
    }

    .tag-c0 { --tag-color: var(--tag-c0); }
    .tag-c1 { --tag-color: var(--tag-c1); }
    .tag-c2 { --tag-color: var(--tag-c2); }
    .tag-c3 { --tag-color: var(--tag-c3); }
    .tag-c4 { --tag-color: var(--tag-c4); }
    .tag-c5 { --tag-color: var(--tag-c5); }
    .tag-c6 { --tag-color: var(--tag-c6); }
    .tag-c7 { --tag-color: var(--tag-c7); }

    /* A trailing cluster of tags as a superscript on a heading. Use
     * a <sup class="tag-row"> so the badges ride high next to the
     * title text. font-size is relative (em) so the pills scale with
     * the heading they trail, staying proportional from h1 to h6;
     * vertical-align: super lifts them clear of the baseline without
     * stretching the line. */
    .tag-row {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-left: 0.4em;
        vertical-align: super;
        font-size: 0.42em;
    }

    /* Inside the row, pills follow the row's scaled size rather than
     * the fixed standalone --text-xs, so a tag stays proportional on
     * an h1 and an h6 alike. Padding is em-based and the weight drops
     * to regular so the badge reads as a quiet label, not a second
     * heading competing with the title. */
    .tag-row .tag {
        font-size: inherit;
        padding: 0.05em 0.5em;
        font-weight: var(--weight-regular);
    }
}