/* Stable member colors. Keep the slot order in sync with avatar_color_index(). */
.na-user-avatar.na-avatar-color-0 { --na-avatar-bg: #f9e1ee; --na-avatar-fg: #943361; }
.na-user-avatar.na-avatar-color-1 { --na-avatar-bg: #fff0ae; --na-avatar-fg: #785509; }
.na-user-avatar.na-avatar-color-2 { --na-avatar-bg: #e5efff; --na-avatar-fg: #24589a; }
.na-user-avatar.na-avatar-color-3 { --na-avatar-bg: #dff0e4; --na-avatar-fg: #246539; }
.na-user-avatar.na-avatar-color-4 { --na-avatar-bg: #e7e6fb; --na-avatar-fg: #654b96; }
.na-user-avatar.na-avatar-color-5 { --na-avatar-bg: #ffe7da; --na-avatar-fg: #9a4821; }
.na-user-avatar.na-avatar-color-6 { --na-avatar-bg: #d9f2ef; --na-avatar-fg: #246762; }
.na-user-avatar.na-avatar-color-7 { --na-avatar-bg: #e1f1fa; --na-avatar-fg: #28617e; }

/* Own fallback colors across page styles and both themes, without altering photos.
 * The extra class specificity also covers styles retained during app navigation. */
html .na-user-avatar.has-placeholder[class] {
    background: var(--na-avatar-bg);
    color: var(--na-avatar-fg);
    border-color: var(--na-avatar-bg);
}

html .na-user-avatar.has-placeholder > .na-avatar-placeholder {
    background: inherit;
    color: inherit;
}

html .na-app-header-avatar.na-user-avatar.has-placeholder {
    box-shadow: none;
}

.na-members-hero-avatar.na-user-avatar {
    border-radius: 50%;
}

/* Identity links retain the surrounding typography and expose keyboard focus. */
html a.na-member-profile-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow-wrap: anywhere;
}
html a.na-member-profile-link:hover { text-decoration: none; }
html a.na-member-profile-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}
.na-member-profile-avatar { display: inline-flex; flex: 0 0 auto; align-self: flex-start; }
.na-member-profile-avatar > .na-user-avatar { margin: 0; }
html .na-member-profile-avatar:hover { text-decoration: none; }
.nd-author-link { display: flex; align-items: center; gap: 9px; min-width: 0; }