@layer components {
    [data-error-report-notice] {
        position: relative;
    }

    [data-error-report-notice] > .sf-error-report__dismiss {
        position: absolute;
        top: var(--sf-space-2);
        right: var(--sf-space-2);
    }

    .sf-alert[data-error-report-notice] {
        padding-inline-end: calc(var(--sf-touch-target) + var(--sf-space-3));
    }

    .sf-error-report__dismiss {
        display: inline-grid;
        width: var(--sf-touch-target);
        min-width: var(--sf-touch-target);
        height: var(--sf-touch-target);
        min-height: var(--sf-touch-target);
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: currentColor;
        cursor: pointer;
        font: inherit;
        font-size: 1.75rem;
        line-height: 1;
    }

    .sf-error-report__dismiss:hover,
    .sf-error-report__dismiss:focus-visible {
        background: color-mix(in srgb, currentColor 10%, transparent);
    }

    .sf-error-report__trigger {
        width: 100%;
        margin-top: var(--sf-space-4);
        border-color: currentColor;
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
    }

    .sf-error-report__trigger svg {
        width: 1.25rem;
        height: 1.25rem;
        flex: 0 0 auto;
        color: #087f5b;
    }

    .sf-error-report__injected {
        display: flex;
        align-items: center;
        gap: var(--sf-space-2);
        margin-block: var(--sf-space-3) var(--sf-space-5);
    }

    .sf-error-report__injected .sf-error-report__trigger {
        flex: 1 1 auto;
    }

    .sf-error-report__runtime {
        position: fixed;
        z-index: var(--sf-z-transient);
        right: var(--sf-page-gutter);
        bottom: calc(var(--sf-mobile-stack-height) + var(--sf-space-3));
        left: var(--sf-page-gutter);
        max-width: 30rem;
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-error-report__dialog {
        width: min(calc(100% - 1rem), 38rem);
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
    }

    .sf-error-report__dialog .sf-dialog__body {
        max-height: calc(100dvh - 1rem);
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .sf-error-report__content {
        display: grid;
        min-height: 0;
        gap: var(--sf-space-4);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .sf-error-report__dialog header :last-child,
    .sf-error-report__preview,
    .sf-error-report__preview figcaption,
    .sf-error-report__privacy,
    .sf-error-report__details pre {
        margin: 0;
    }

    .sf-error-report__status {
        border-radius: var(--sf-radius-control);
        padding: var(--sf-space-3);
        background: var(--sf-color-surface);
        font-weight: 650;
    }

    .sf-error-report__preview {
        display: grid;
        gap: var(--sf-space-2);
    }

    .sf-error-report__preview img {
        width: 100%;
        max-height: min(42dvh, 28rem);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        object-fit: contain;
    }

    .sf-error-report__preview figcaption,
    .sf-error-report__privacy {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-error-report__details {
        border-block: 1px solid var(--sf-color-border);
        padding-block: var(--sf-space-3);
    }

    .sf-error-report__details summary {
        min-height: var(--sf-touch-target);
        align-content: center;
        cursor: pointer;
        font-weight: 700;
    }

    .sf-error-report__details pre {
        max-height: 12rem;
        overflow: auto;
        padding: var(--sf-space-3);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        font: inherit;
        font-size: var(--sf-font-size-100);
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .sf-error-report__actions > * {
        width: 100%;
    }

    .sf-error-report__actions {
        border-top: 1px solid var(--sf-color-border);
        padding-top: var(--sf-space-3);
        background: var(--sf-color-surface-raised);
    }

    @media (min-width: 43rem) {
        .sf-error-report__trigger,
        .sf-error-report__actions > * {
            width: auto;
        }

        .sf-error-report__runtime {
            right: var(--sf-space-5);
            bottom: var(--sf-space-5);
            left: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sf-error-report__dialog {
            scroll-behavior: auto;
        }
    }
}