/* Followers / following lists: one card with a row per member. Colours come from the site's tokens, so it follows dark and light. */
.fl-main{padding-top:22px;}
.fl-owner{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; padding:4px 0 10px;}
.fl-owner:hover .fl-who b{color:var(--blue-dark);}
.fl-back{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--navy-soft);}
.fl-back svg{width:20px; height:20px;}
html[dir="rtl"] .fl-back svg{transform:scaleX(-1);}
.fl-owner:hover .fl-back{background:var(--blue-tint); color:var(--blue-dark);}
.fl-av{position:relative; flex:none; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg, var(--teal), var(--blue)); display:grid; place-items:center;}
.fl-av>span{font:700 17px/1 'Sora',sans-serif; color:rgba(255,255,255,.95);}
.fl-av img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover;}
.fl-who{min-width:0; display:flex; flex-direction:column; gap:2px;}
.fl-who b{font-size:15px; font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fl-who i{font-style:normal; font-size:13px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start;}

.fl-tabs{display:flex; gap:8px; padding:6px 0 12px; flex-wrap:wrap;}
.fl-tabs .fd-tab{display:inline-flex; align-items:center; gap:6px;}
.fl-tabs .fd-tab b{font-weight:700;}

.fl-search{position:relative; margin:0 0 12px;}
.fl-search svg{position:absolute; inset-inline-start:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--navy-soft); pointer-events:none;}
.fl-search input{width:100%; box-sizing:border-box; height:44px; padding-inline:42px 14px; border:1px solid var(--border-soft); border-radius:999px; background:var(--white); color:var(--navy); font:500 14.5px 'Inter',sans-serif; outline:none;}
html[lang="ar"] .fl-search input,html[lang="ja"] .fl-search input{font-family:inherit;}
.fl-search input::placeholder{color:var(--navy-soft);}
.fl-search input:focus-visible{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);}

.fl-list{list-style:none; margin:0; padding:0; background:var(--white); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;}
.fl-list:empty{display:none;}
.fl-item{border-top:1px solid var(--border-soft);}
.fl-item:first-child{border-top:0;}
.fl-row{display:flex; align-items:center; gap:12px; padding:12px 16px; color:inherit; text-decoration:none; transition:background .15s;}
.fl-row:hover{background:color-mix(in srgb, var(--navy) 5%, var(--white)); color:inherit;}
.fl-row:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}
.fl-row .fl-who{flex:1;}
.fl-chips{flex:none; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.fl-chip{padding:4px 10px; border-radius:999px; font:600 12px/1.2 'Inter',sans-serif; color:var(--navy-soft); background:color-mix(in srgb, var(--navy) 8%, transparent); white-space:nowrap;}
html[lang="ar"] .fl-chip,html[lang="ja"] .fl-chip{font-family:inherit;}
.fl-chip.is-on{color:var(--blue-dark); background:color-mix(in srgb, var(--blue) 14%, transparent);}

.fl-empty{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:48px 16px; color:var(--navy-soft);}
.fl-empty[hidden]{display:none;}
.fl-empty b{font:700 16px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .fl-empty b,html[lang="ja"] .fl-empty b{font-family:inherit;}
.fl-empty span{font-size:14px; max-width:36ch; line-height:1.5;}
.fl-more{text-align:center; padding:16px 0 4px;}
.fl-more[hidden]{display:none;}
.fl-error{margin:12px 0 0; text-align:center; color:#e0495d; font-size:13.5px;}
.fl-error[hidden]{display:none;}

@media (max-width:480px){
  .fl-row{padding-inline:12px; gap:10px;}
  .fl-chips{flex-direction:column; align-items:flex-end; gap:4px;}
}
@media (max-width:720px){
  .fl-wrap{padding-inline:14px; box-sizing:border-box;}
  .fl-main{padding-top:14px;}
}

/* The Following / Followers numbers on the profile header are links to the lists */
.pr-cnt .pr-cl{display:grid; gap:2px; justify-items:center; text-align:center; color:inherit; text-decoration:none; border-radius:10px;}
.pr-cnt .pr-cl:hover b{color:var(--blue-dark);}
.pr-cnt .pr-cl:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}