/*
 * Members, wherever they are shown (includes/member.php) — ONE look for the picture, the member card and the public
 * page's header (user: the same element looks the same on every page). Loaded on every page (small).
 */

/* the picture: a photo or the letter circle (an SVG image, includes/member.php) */
.sc-avatar { flex: none; border-radius: 50%; object-fit: cover; background: var(--sc-gray, #eef0ec); }

/* the member card: picture + name (a link to their page) + area */
.sc-member { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sc-member-name { font-weight: 600; }
a.sc-member:hover .sc-member-name { text-decoration: underline; }
.sc-member-area { opacity: .65; font-size: .85em; }

/* the public page's header (/member/<id>/) */
.sc-member-head { display: flex; align-items: flex-start; gap: 20px; margin: .5rem 0 2rem; padding: 22px 24px; border-radius: 22px; background: color-mix(in srgb, var(--sc-c-btn, #3d7a66) 8%, #fff); }
body.dark-mode .sc-member-head { background: rgba(255, 255, 255, .05); }
.sc-member-head-avatar { width: 96px; height: 96px; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(20, 30, 25, .15); }
body.dark-mode .sc-member-head-avatar { box-shadow: 0 0 0 3px var(--sc-c-card); }
.sc-member-head-text { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: start; }
/* one row per detail: its label, then the value */
.sc-member-row { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; align-items: baseline; line-height: 1.55; }
.sc-member-key { font-size: .85rem; font-weight: 600; opacity: .6; }
.sc-member-about { overflow-wrap: anywhere; }
.sc-member-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sc-member-link { display: inline-flex; align-items: center; gap: 5px; color: var(--sc-c-btn, #3d7a66); text-decoration: none; font-weight: 600; }
.sc-member-link svg { width: 17px; height: 17px; }
.sc-member-link:hover { text-decoration: underline; }
.sc-member-foot { margin: 4px 0 0 !important; font-size: .92rem; }
.sc-member-edit { font-weight: 600; }
.sc-member-h2, .sc-member-favs h2 { margin: 2rem 0 .8rem; font-size: 1.25rem; }
.sc-member-favs { margin-bottom: 2rem; }

@media (max-width: 600px) {
	.sc-member-head { flex-direction: column; align-items: center; }
	.sc-member-head-text { width: 100%; }
}