/* ============================================================
   avatars.css — the .avatar primitive
   ============================================================
   This file owns the .avatar primitive: a circle wrapper that
   contains either an initial (for users without an uploaded
   avatar) or an <img>. Size variants run from xs (16px) up
   through hero (96px); see the section comment below for the
   per-size usage table.

   Avatar-specific decorations (unread halo ring, status dots,
   etc.) live in the feature files that own them — e.g. the
   navbar's .avatar-has-unread rule lives in navbar.css.

   Reference: markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md
   ============================================================ */

/* ============================================================
   Avatars — reusable circle-with-initial component
   ============================================================
   The .avatar class is the wrapper; size modifiers set the
   pixel dimensions and matching font size for the initial.

   When avatar_path is set on a User, the macro emits an <img>
   with the .avatar class instead of a div with the initial.
   The img rule below makes the image fill the circle and crop
   on aspect mismatch (object-fit: cover).

   Sizes:
     xs    16px  tiny attribution chips (links-column tile)
     sm    24px  comments, message senders, nested-in-message preview
     md    28px  shared/quoted post nested header
     lg    32px  top-level post cards, nav avatar, share/send previews
     xl    36px  compose, inbox rows, followers/following lists
     2xl   48px  dashboard profile-column header
     hero  96px  profile page header, edit-profile preview

   Use via the _avatar.html macro rather than hand-rolling
   markup at call sites — the macro picks <img> vs initial-circle
   based on whether the user has uploaded an avatar.
   ============================================================ */

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-bg-subtle);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    /* Avatar text shouldn't be selectable — initial-circle case
       is decoration plus an aria-label, not body content. */
    user-select: none;
}

/* When .avatar is an <img>, fill the circle with the image and
   crop on aspect mismatch. border-radius is inherited from the
   shared .avatar declaration, so this works for any size. */
img.avatar {
    object-fit: cover;
    /* Same dimensions as the wrapper sizes below — width/height
       come from .avatar-<size>. No need to set them here. */
}

.avatar-xs {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs);
}

.avatar-sm {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-sm);
}

.avatar-md {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-md);
    background-color: var(--color-bg-surface);
    /* shared-post nested avatar sits on a bg-subtle parent — needs surface white */
}

.avatar-lg {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
}

.avatar-xl {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-body);
}

.avatar-2xl {
    width: 48px;
    height: 48px;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
}

/* New avatar size — slots between 2xl (48px) and hero (96px). Used
   by the profile column header. Pulled into the size ladder here
   during css-refactor (was previously appended next to pr37 feature
   code). */
.avatar-3xl {
    width: 64px;
    height: 64px;
    font-size: 1.35rem;
}

.avatar-hero {
    width: 96px;
    height: 96px;
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
}