.member-connection { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--x-line); }
.member-connection:hover { background: var(--x-subtle); }
.member-connection > .x-avatar { width: 40px; height: 40px; flex-basis: 40px; }
.member-connection-info { min-width: 0; font-size: 15px; line-height: 20px; }
.member-connection-info strong, .member-connection-info a > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-connection-info a:hover strong { text-decoration: underline; }
.member-connection-info a > span, .member-connection-info > small { color: var(--x-muted); }
.member-connection-info > small { font-size: 12px; }
.member-connection > p { grid-column: 2 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 20px; }
[data-member-follow] { margin: 0; }
.member-follow-button { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; min-height: 34px; padding: 6px 15px; border: 1px solid transparent; border-radius: 999px; background: var(--x-primary-bg); color: var(--x-primary-text); font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.member-follow-button:hover { background: var(--x-primary-hover); }
.member-follow-button.is-following { min-width: 124px; border-color: var(--x-border); background: transparent; color: var(--x-ink); }
.member-unfollow-label { display: none; }
.member-follow-button.is-following:is(:hover,:focus-visible) { color: #c42132; border-color: #c4213260; background: #c4213210; }
.member-follow-button.is-following:is(:hover,:focus-visible) [data-follow-label] { display: none; }
.member-follow-button.is-following:is(:hover,:focus-visible) .member-unfollow-label { display: inline; }
.member-follow-button:focus-visible, .x-profile-counts a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.member-follow-button:disabled { opacity: .6; cursor: wait; }
.member-follow-unavailable { color: var(--x-muted); font-size: 13px; }
.member-follow-profile { position: absolute; top: 16px; right: 16px; }
.x-profile-counts { flex-wrap: wrap; }
.x-profile-counts a { color: var(--x-muted); }
.x-profile-counts a:hover { text-decoration: underline; }
.member-suggestions .member-connection { border-bottom: 0; }
.member-suggestions-empty { margin: 0; padding: 12px 16px; color: var(--x-muted); font-size: 14px; }
@media(max-width: 360px) { .member-connection { padding-inline: 12px; gap: 4px 8px; } .member-follow-button { padding-inline: 10px; } .member-follow-button.is-following { min-width: 112px; font-size: 13px; } }
@media(pointer: coarse) { .member-follow-button { min-height: 44px; } }