@layer components {
    /* No box (Broadsheet): one quiet sentence under the generator's lede, and the button only while
       another drawing was kept. */
    .challenge-offer {
        margin-block-start: var(--space-3);
    }

    .challenge-offer[data-state='idle'],
    .challenge-offer__actions {
        display: none;
    }

    .challenge-offer[data-state='kept'] .challenge-offer__actions {
        display: block;
    }

    .challenge-offer__note {
        max-inline-size: 34ch;
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    .challenge-offer__actions {
        margin: var(--space-2) 0 0;
    }
}