/* Avatars — spec 013 FR-024; contracts/avatar-rendering-contract.md §4.
   ==========================================================================

   In the shared kernel because BOTH shells load it: the workspace layout in
   ERP.Modules.TenantPortal and _ModuleShell.cshtml here. One file, so a person's
   avatar is the same control inside a module as it is in the workspace rather
   than a lookalike.

   `.avatar` itself, its gray ground, and `.avatar-lg` already exist in each
   surface's own sheet and are deliberately NOT redefined here — only the new
   sizes and the image rule are added, so nothing that renders today changes.

   Every value resolves to a design_system.md §5 token. No colour, radius, font,
   or duration is invented (§6 rule 1); the two genuinely new components are
   disclosed in ui-design.md §4. Logical properties throughout, so these mirror
   under dir="rtl" (§6 rule 9). */

/* The image sits inside the avatar span and fills it. `border-radius: inherit`
   rather than a value of its own, so a photo is exactly as round as the element
   holding it and stays that way if the avatar's radius ever changes.

   `object-fit: cover` is why there is no server-side cropping: a non-square
   upload is centre-cropped by the browser (research R-004).

   The min-size pair is what actually pins the avatar to its declared size, and
   it is not optional. `.avatar` is `display: grid` in every shell, so this image
   is a grid item, and a grid item's automatic minimum size is its CONTENT-based
   minimum — for a replaced element, the photo's intrinsic pixel width. A 1024px
   upload therefore forced the auto track out to 1024px, the box grew with it,
   and `100%` resolved against the blown-up track rather than against the 40px
   or 96px the size class asked for: the photo spilled out of the circle at its
   own aspect ratio. Zeroing the minimum lets the track collapse back to the
   avatar's definite size, so every avatar is exactly the size its class
   declares, whatever was uploaded. The max pair says the same thing from the
   other side and costs nothing.

   Logical properties throughout (§6 rule 9), matching the rest of this file. */
.avatar-photo {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* The sizes the workspace actually draws (ui-design.md §5). Size overrides only
   — ground, weight, and shape come from `.avatar`. */

/* 24px — reminder sheet rows and any dense list. */
.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

/* 32px — member and roster tables. */
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

/* 96px — the profile identity card, and the page's only oversized element. */
.avatar-xl {
    width: 96px;
    height: 96px;
    font-size: 1.75rem;
}

@media (max-width: 767.98px) {

    /* 72px below md, where the Profile page is a single column
       (ui-design.md §7). */
    .avatar-xl {
        width: 72px;
        height: 72px;
        font-size: 1.5rem;
    }
}