@layer block {
    .report-button {
        /* Muted throughout on purpose: this is the quietest control on the page.
           A report button that looks like the share buttons invites the bored to
           press it. */
        font-family: var(--font-ui);
        font-size: var(--text-label-caps);
        color: var(--color-text-muted);
        text-align: start;

        & .report-button__summary {
            display: inline-block;
            padding-block: var(--space-1);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 0.2em;

            /* Safari still needs the marker removed explicitly. */
            &::-webkit-details-marker {
                display: none;
            }

            &::marker {
                content: "";
            }
        }

        & .report-button__form {
            margin-top: var(--space-2);
            padding: var(--space-3);
            border-radius: var(--radius-lg);
            background: var(--color-surface-container);
            gap: var(--space-2);
        }

        & .report-button__reasons {
            display: grid;
            gap: var(--space-1);
            /* The global reset leaves <fieldset> alone, and the user agent's
               inset border and floating legend belong to no design system on
               this site. The grouping is for assistive technology, not for
               drawing a box. */
            border: 0;
            padding: 0;
            margin: 0;
            min-inline-size: 0;
        }

        & .report-button__reason {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            /* Comfortably bigger than the radio itself: this is read and tapped
               on a phone, and a label the size of its dot is a label nobody
               hits. */
            padding-block: var(--space-1);
            cursor: pointer;
            color: var(--color-text);
        }

        & .report-button__error {
            margin-top: var(--space-2);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-md);
            color: var(--color-on-error-container);
            background: var(--color-error-container);
        }

        /* The one thing here that is allowed to be visible: a reader who just
           reported something needs to see that it landed. */
        & .report-button__done {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-lg);
            background: var(--color-surface-container);
            color: var(--color-text);
        }
    }
}