/* Suffah — X-style followers / following (Phase 46) */
.basic-shell:has(.xfl) { max-width: none; padding: 0; }
.basic-shell:has(.xfl) > .basic-shell__back { display: none; }
.xfl { background: var(--bg-primary); min-height: 100vh; }
.xfl__bar { display: flex; align-items: center; gap: 20px; padding: 12px 16px; }
.xfl__back, .xfl__add { color: var(--text-primary); display: inline-flex; }
.xfl__title { flex: 1; min-width: 0; }
.xfl__name { font-size: 1.4rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfl__sub { color: var(--text-tertiary); font-size: 1.05rem; }
.xfl__tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border-color); scrollbar-width: none; position: sticky; top: 0; z-index: 10; background: var(--bg-primary); }
.xfl__tabs::-webkit-scrollbar { display: none; }
.xfl__tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 16px 20px; color: var(--text-tertiary); font-weight: 700; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.xfl__tab.is-active { color: var(--text-primary); font-weight: 800; }
.xfl__tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 3px; background: var(--color-accent); }
.xfl__row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.xfl__avatar.avatar { width: 44px; height: 44px; flex: none; text-decoration: none; }
.xfl__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xfl__info { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.xfl__pname { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.15rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.xfl__handle { color: var(--text-tertiary); font-size: 1.05rem; overflow-wrap: anywhere; }
.xfl__bio { margin-top: 6px; font-size: 1.1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.xfl__btn { flex: none; border: 1px solid var(--text-primary); border-radius: 999px; background: var(--text-primary); color: var(--bg-primary); font: inherit; font-weight: 800; font-size: 1.05rem; padding: 9px 22px; cursor: pointer; text-decoration: none; }
.xfl__btn.is-following { background: transparent; color: var(--text-primary); border-color: var(--border-color); }