@layer components {
/* Avatar banner that anchors the top of redesigned widget screens.
   Two viewport-responsive layouts:

     top-left       - avatar + entity title in a left-aligned row. The avatar is
                      44px inside a 2px white ring (48px total) at every width.
                      Mobile: 18/24 bold title, tighter padding.
                      Desktop: 20/28 bold title, roomier padding.
     bottom-center  - avatar centered on the seam between the banner and the
                      page body. No title. 116px avatar over an 82px banner.

   Background is themed off the vendor's secondary color via the inline
   --avatar-banner-bg custom property the partial emits when set. Otherwise it
   falls back to the page-level secondary theme tint, then the default secondary
   tint (Seashell Blue / Cobalt 100), at every width. */

.psw-avatar-banner {
    background: var(--avatar-banner-bg, var(--theme-secondary, var(--theme-secondary-default)));
    font-family: var(--font-sans);
}

/* --- top-left ----------------------------------------------------------- */

.psw-avatar-banner--top-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* 32px inline padding at every width (matches Figma) — consistent with the
       desktop band rather than aligning the avatar to the overlapping card's
       inner content edge. */
    padding: var(--space-4) var(--space-8);
}

@media (min-width: 640px) {
    .psw-avatar-banner--top-left {
        padding: var(--space-6) var(--space-8);
    }
}

/* 44px avatar image inside a 2px white ring → 48px total, matching the lg
   default's footprint (so the surrounding layout is unchanged). Same at every
   width per the design. content-box keeps the image at 44 regardless of any
   global border-box reset. */
.psw-avatar-banner--top-left > .psw-avatar {
    box-sizing: content-box;
    width: 44px;
    height: 44px;
    border: 2px solid var(--color-white);
}

.psw-avatar-banner__title {
    font-size: var(--text-label-lg);
    line-height: var(--text-label-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
    /* Allow flex child to shrink so long titles wrap inside the row instead
       of pushing the avatar off-screen. */
    min-width: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .psw-avatar-banner__title {
        font-size: var(--text-heading-xs);
        line-height: var(--text-heading-xs--line-height);
    }
}

/* --- bottom-center ------------------------------------------------------ */

/* Avatar sits on the banner/body seam. Banner provides the colored slab; the
   avatar overflows downward into the white body via translateY so half is in
   the banner and half is in the page body. Margin-bottom reserves the
   space the avatar consumes outside the banner so following content isn't
   covered by the overflow. */

.psw-avatar-banner--bottom-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Success frames use an 82px banner with the 116px avatar centered on
       the lower edge: 24px in-banner, 58px over body. */
    height: 82px;
    margin-bottom: 58px;   /* 116px avatar / 2 */
}

/* 4px white stroke drawn INSIDE the 116px circle (border-box), so the avatar
   keeps its footprint and the artwork sits in the inner 108px — the ring reads
   against the colored banner it straddles (Figma 2950:167073). */
.psw-avatar-banner--bottom-center > .psw-avatar {
    box-sizing: border-box;
    border: 4px solid var(--color-white);
    transform: translateY(calc(82px - 58px));
}
}