@layer components {
    /* Fine print: small, muted, but its links stay the accent so they read as links. */
    .consent-note {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        line-height: 1.5;
    }

    /* A consent: its label is a whole row the finger can hit (≥ 44 px); the box keeps its size beside
       the label (the same rule as PanoramaJoin's options); the fine print below lines up with the label. */
    .consent-note--checkbox {
        --consent-box: 1.375rem;

        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding-block: var(--space-1);
        /* The label reads like the checkboxes around it (PanoramaJoin's options, the share box's switch);
           only the fine print is small. */
        font-size: inherit;

        & .consent-note__choice {
            display: flex;
            gap: var(--space-3);
            align-items: center;
            min-block-size: 44px;
            color: var(--color-text);
            cursor: pointer;
        }

        & input {
            flex: none;
            inline-size: var(--consent-box);
            block-size: var(--consent-box);
            margin: 0;
            accent-color: var(--color-accent);
        }

        & .consent-note__text {
            margin: 0;
            font-size: var(--text-xs);
            padding-inline-start: calc(var(--consent-box) + var(--space-3));
        }
    }
}