/* Avatar frames: the Journeyman rank perk (docs/21 section 21.1.2).
 *
 * AUDIT_TAG(loyalty-rank-perks)
 *
 * A frame is a ring drawn around an avatar with box-shadow so it never changes the avatar's
 * layout box. The ids are the fixed set the API declares (api/app/services/loyalty_rank_perks.py,
 * AVATAR_FRAMES); a script adds `avatar-frame avatar-frame--<id>` to whatever element draws the
 * avatar. The ring is decoration; it carries no information the page depends on.
 */
.avatar-frame { --avatar-frame-inner: var(--theme-canvas, #fff); --avatar-frame-ring: currentColor; }
.avatar-frame--ember { --avatar-frame-ring: #e8590c; --avatar-frame-glow: rgb(232 89 12 / 45%); }
.avatar-frame--moonlit { --avatar-frame-ring: #748ffc; --avatar-frame-glow: rgb(116 143 252 / 45%); }
.avatar-frame--verdant { --avatar-frame-ring: #2f9e44; --avatar-frame-glow: rgb(47 158 68 / 45%); }
.avatar-frame--gilded { --avatar-frame-ring: #e0a800; --avatar-frame-glow: rgb(224 168 0 / 50%); border-style: double; }
.avatar-frame--ember,
.avatar-frame--moonlit,
.avatar-frame--verdant,
.avatar-frame--gilded {
    box-shadow: 0 0 0 2px var(--avatar-frame-inner), 0 0 0 5px var(--avatar-frame-ring), 0 0 14px 5px var(--avatar-frame-glow);
}

/* The picker on the loyalty page. */
.avatar-frame-sample { display: inline-block; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--bg-card, #ddd); margin-inline-end: 0.75rem; }

/* The Apprentice rank badge beside a profile name: glyph plus the rank's name. */
.profile-rank-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding-block: 0.125rem; padding-inline: 0.625rem; border: 1px solid var(--border-color, currentColor); border-radius: 999px; font-size: 0.875rem; font-weight: 600; }
.profile-rank-badge[hidden] { display: none; }