/* ═══════════════════════════════════════════════════════════════════════
   USER AVATAR — public/front/css/hh-avatar.css
   Single responsibility: styling for user-avatar.blade.php only.
   Tokens (--hh-*) come from hh-auth-tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

.hh-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: var(--hh-primary); color: #fff;
}
.hh-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.hh-avatar-initial { font-weight: 700; color: #fff; }

.hh-avatar--sm { width: 28px; height: 28px; }
.hh-avatar--sm .hh-avatar-initial { font-size: .85rem; }

.hh-avatar--md { width: 56px; height: 56px; }
.hh-avatar--md .hh-avatar-initial { font-size: 1.3rem; }

.hh-avatar--lg { width: 84px; height: 84px; }
.hh-avatar--lg .hh-avatar-initial { font-size: 1.8rem; }

/* ── Editable variant — profile page identity card ── */
.hh-avatar--editable { cursor: pointer; }
.hh-avatar-edit-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--hh-ink); color: #fff; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center; font-size: .68rem;
    transition: background 150ms ease;
}
.hh-avatar--editable:hover .hh-avatar-edit-badge { background: var(--hh-primary); }
.hh-avatar-file-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.hh-avatar--editable.hh-avatar--uploading { opacity: .6; pointer-events: none; }