/* ============================================================================
   AVATAR RING — one white ring around every profile picture on the site.
   ----------------------------------------------------------------------------
   base/root.css already unified the ring's COLOUR (--avatar-border-color); this
   file unifies the rest of it. Before it existed the same face was drawn three
   different ways depending on which sheet happened to own the component:

     - 2px  var(--avatar-border)               header, comments, chat, popups
     - 3px / 4px solid var(--avatar-border-color)   profile header, group members,
                                                    commission requests, media
     - no ring at all                          chat messages, commission manager
                                               rows, group-card organisers,
                                               kcard artist rows, event organisers
     - TWO rings                               notifications and the profile
                                               picker, where a ringed wrapper
                                               held a ringed <img>

   The navbar's ring is the one the site standardised on, so it is the one
   declared here: `var(--avatar-border)`, at one width for every size of face.
   A 2px ring on a 120px profile header reads as the same object as a 2px ring
   on a 32px card byline, which a proportional ring never did.

   LOADED SITE-WIDE from templates/fragments/head-styles.html, next to
   profile-link.css and for the same reason: avatars appear on nearly every page
   and inside fragments htmx swaps in on their own. See static/css/new/README.md.

   ADDING AN AVATAR? Add its class to the list below — do NOT declare a border
   on it in the component or page sheet. Those declarations land later in the
   cascade at the same specificity, so one of them silently puts that avatar back
   out of step with the rest of the site, which is exactly how the four different
   rings above happened.
   ========================================================================== */

/* THE RING HOSTS — every element that IS the visible circle. For some of these
   that is the <img> itself; for the wrappers below it is the box that crops the
   image. Classes that are card thumbnails rather than faces (.card-avatar,
   .thumb-avatar, .user-card-avatar) are deliberately absent: they are rectangles
   with a card's own border, not profile pictures. */
.user-avatar,                 /* component/header.css — the reference ring     */
.user-avatar-small,           /* user/journals.html                            */
.profile-avatar,              /* page/profile.css — the 120px profile header   */
.notification-avatar,         /* component/notification{,-bell}.css            */
.comment-avatar,              /* component/comment.css, cp-build-progress      */
.author-avatar,               /* build/journal/media cards, profile comments   */
.artist-avatar,               /* commission + user cards, kcard artist row     */
.builder-avatar,              /* component/build-card.css, item/character.css  */
.creator-avatar,              /* page/item/cp-build.css                        */
.organizer-avatar,            /* group cards, item/group.css, item/cp-event    */
.attendee-avatar,             /* page/item/cp-event.css (and the +N button)    */
.member-avatar,               /* page/item/group.css                           */
.requester-avatar,            /* group-manage.css, commission-req.css          */
.channel-avatar,              /* page/media.css, page/item/media.css           */
.cmi-avatar,                  /* page/commission-manager-item.css              */
.chat-avatar,                 /* page/chat.css — conversation header           */
.conv-avatar,                 /* page/chat.css — conversation list row         */
.message-avatar,              /* page/chat.css — the messages themselves       */
.character-avatar {           /* base/popup-common.css — pickers and invites   */
    border: var(--avatar-border);
}

/* THE TINY TITLE CARD's user variant — the face in "Tagged Users" on a video or
   gallery page, in attendee lineups, and in the pickers. It is the one avatar
   whose class does not say "avatar": component/title-card.css reuses
   .title-card-img for character, build and event thumbnails too, and only the
   --user variant rounds it into a face. So it is scoped rather than added to the
   list above — a ring on the character thumbnails would be wrong. 0-2-0, which
   is deliberate: it has to outrank .title-card-img's own rule. */
.title-card--user .title-card-img {
    border: var(--avatar-border);
}

/* EXACTLY ONE RING PER FACE.
   Several of these avatars are a wrapper (a flex box holding a gradient fallback)
   with the real <img> inside it, and both used to carry the ring — two concentric
   circles, the inner one overflowing the outer because the image was sized to the
   wrapper's full width and then grew by its own border. The wrapper is the ring
   host: it is what the layout reserves space for. So it crops, and everything
   inside it fills it flat.

   Specificity 0-2-0 / 0-1-1, so these beat the single-class rule above without
   !important. `.profile-link` is in the list because the avatar is usually
   wrapped in one (see base/profile-link.css) and an anchor sized to its content
   would let the image out of the crop. `.character-avatar .character-avatar` is
   not a typo: the profile picker (fragments/card-results/profile-list.html) puts
   the same class on the wrapper AND on the image inside it, and so does the
   build card (fragments/card-results/build-card.html) with .builder-avatar. */
.notification-avatar,
.character-avatar,
.builder-avatar,
.conv-avatar,
.chat-avatar,
.message-avatar {
    overflow: hidden;
}

.notification-avatar > .profile-link,
.notification-avatar img,
.character-avatar > .profile-link,
.character-avatar .character-avatar,
.builder-avatar > .profile-link,
.builder-avatar .builder-avatar,
.conv-avatar > .profile-link,
.chat-avatar > .profile-link,
.message-avatar > .profile-link {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    object-fit: cover;
}