@layer components {
    .content-ubb-performance {
        --performance-accent: var(--color-success-strong);
        --performance-accent-contrast: var(--color-white);

        display: grid;
        gap: var(--space-14);
        min-width: 0;
        margin-block: var(--space-4) var(--space-24);
        padding: var(--space-18) var(--space-20);
        border: var(--border-width-hairline) solid var(--color-card-border);
        border-left: var(--space-6) solid var(--performance-accent);
        border-radius: 0.5rem;
        background: var(--color-bg-surface);
        box-shadow: 0 0.5rem 1.5rem var(--color-shadow-soft);
        color: var(--color-text);
    }

    .content-article > .content-ubb-performance {
        margin-block: 0 var(--space-4);
    }

    .content-article > .content-ubb-performance:first-child + p {
        font-weight: var(--font-weight-semibold);
    }

    .content-ubb-performance--stable {
        --performance-accent: var(--color-success-strong);
    }

    .content-ubb-performance--delayed {
        --performance-accent: #b45309;
    }

    .content-ubb-performance--incident {
        --performance-accent: var(--color-danger);
    }

    .content-ubb-performance__header {
        display: flex;
        align-items: center;
        gap: var(--space-14);
        min-width: 0;
    }

    .content-ubb-performance__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--space-40);
        width: var(--space-40);
        height: var(--space-40);
        border-radius: 50%;
        background: var(--performance-accent);
        color: var(--performance-accent-contrast);
    }

    .content-ubb-performance__icon-svg,
    .content-ubb-performance__icon-svg.svg-sprite {
        position: static;
        display: block;
        width: var(--space-20);
        height: var(--space-20);
        fill: currentColor;
    }

    .content-ubb-performance__heading {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
    }

    .content-ubb-performance__eyebrow {
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-ui);
    }

    .content-ubb-performance__title {
        color: var(--color-heading);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-title);
    }

    .content-ubb-performance__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: var(--space-32);
        margin-left: auto;
        padding: var(--space-6) var(--space-12);
        border-radius: 0.5rem;
        background: var(--performance-accent);
        color: var(--performance-accent-contrast);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        white-space: nowrap;
    }

    .content-ubb-performance__message {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-base);
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-reading);
    }

    .content-ubb-performance__meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-8);
        margin: 0;
    }

    .content-ubb-performance__meta > div {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
        padding: var(--space-10) var(--space-12);
        border-radius: 0.5rem;
        background: var(--color-bg-surface-alt);
    }

    .content-ubb-performance__meta dt,
    .content-ubb-performance__meta dd {
        min-width: 0;
        margin: 0;
    }

    .content-ubb-performance__meta dt {
        color: var(--color-text-soft);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-ui);
    }

    .content-ubb-performance__meta dd {
        overflow-wrap: break-word;
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
    }

    @media (max-width: 47.9375rem) {
        .content-ubb-performance {
            gap: var(--space-12);
            padding: var(--space-16);
        }

        .content-ubb-performance__header {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .content-ubb-performance__heading {
            flex: 1 1 calc(100% - var(--space-56));
        }

        .content-ubb-performance__badge {
            margin-left: calc(var(--space-40) + var(--space-14));
        }

        .content-ubb-performance__meta {
            grid-template-columns: 1fr;
        }
    }
}