/* AD-specific onboarding styles.

   .c-persona-card--unavailable / .c-persona-card__unavailable —
   sales-gated persona-card variant used on /onboarding when a
   Company or Professional persona isn't enabled in the user's
   country. Card stays visible but the Get-started button is
   `disabled` and an inline notice explains why.

   WRAPPED IN @layer components — it extends .c-persona-card, which
   lives in that layer (OnPoint.Razor components/app-c-ui.css). This
   file was previously unlayered, which meant it outranked EVERY
   layered rule in the system rather than just the one it extends:
   unlayered normal declarations beat all layers, so it also sat above
   vendor, utilities, brand and syncfusion by accident. None of its
   rules need that reach.

   The hover override below has the same specificity as core's
   .c-persona-card:hover, so inside one layer the tie is broken by
   source order. That still resolves this file's way: _Layout.cshtml
   emits <app-head-assets /> (core) before <app-local-css-assets />
   (this file). */

@layer components {

    .c-persona-card--unavailable {
        opacity: 0.72;
    }
    .c-persona-card--unavailable:hover {
        /* Cancel the normal hover lift so the card doesn't beckon a
           click it won't honour. */
        transform: none;
        box-shadow: none;
    }
    .c-persona-card__unavailable {
        /* Global reset zeroes <p> margins (OnPoint.Razor's app-reset.css),
           so the gap above and below has to be explicit — without this
           the notice sits flush against the desc above and the button
           row below. */
        margin: var(--space-3) 0 var(--space-4);
        padding: var(--space-2) var(--space-3);
        background: var(--color-surface-muted, rgba(15, 23, 42, 0.05));
        border-left: 3px solid var(--color-warning, #b45309);
        border-radius: var(--radius-sm, 0.25rem);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft, #475569);
    }
}