@layer legacy {
.app-warning-callout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}
    .app-warning-callout i {
        color: darkorange;
    }
.app-callout-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    justify-content: center;
}
}

/* ----------------------------------------------------------------------- */
/* Onboarding callout — shown on the Company / Professional workspaces     */
/* when the entity's lifecycle status is Onboarding. Lays the message and  */
/* its CTA out side-by-side; stacks below the small-screen breakpoint.     */
/* ----------------------------------------------------------------------- */
@layer components {
    .app-onboarding-callout {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        margin-bottom: var(--space-5);
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
        border-radius: var(--radius-md);
    }

    .app-onboarding-callout-body {
        flex: 1 1 20rem;
        min-width: 0;
    }

    .app-onboarding-callout-title {
        margin: 0 0 var(--space-1);
        font-size: var(--fs-body-lg);
        font-weight: 600;
        color: var(--color-ink);
    }

    .app-onboarding-callout-text {
        margin: 0;
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
    }
}