/* R416: Friend/Connection directory — flat navigation, visible identities,
 * no cross-persona relationship changes and no change to closeness access.
 */
html body .friendPage{max-width:760px!important;padding:11px 14px calc(105px + env(safe-area-inset-bottom,0px))!important}
html body .friendNav{padding:3px 0 8px!important;gap:5px!important}
html body .friendBack{
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-height:44px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important
}
html body .intro{padding:0 0 8px!important;border-bottom:0!important}
html body .intro h1{font-size:clamp(23px,6vw,28px)!important}
html body .intro p{margin:5px 0 0!important;font-size:12px!important;line-height:1.45!important}
html body .friendHubLinksR289{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;margin:13px 0 3px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important
}
html body .friendHubLinksR289 > .friendHubLinkR289{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:center!important;min-width:0!important;min-height:62px!important;
  gap:3px!important;padding:8px 5px!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;text-decoration:none!important
}
html body .friendHubLinkR289 strong{
  font:850 clamp(11px,3.2vw,14px)/1.2 system-ui,sans-serif!important;
  color:var(--r378-accent,#bb79ff)!important
}
html body .friendHubLinkR289 small{
  display:block!important;margin:4px 0 0!important;
  font:500 clamp(9px,2.45vw,11px)/1.3 system-ui,sans-serif!important;
  color:rgba(255,255,255,.6)!important
}
html body .friendHubCountR289{
  display:inline-flex!important;min-height:17px!important;align-items:center!important;
  margin:0!important;padding:0!important;background:transparent!important;
  border:0!important;border-radius:0!important;
  color:var(--r378-accent,#bb79ff)!important;
  font:850 11px/1.1 system-ui,sans-serif!important
}
html body .summary{padding:9px 2px 2px!important}
html body .personaHeadingR378{padding:4px 2px 9px!important}
html body #filters.filters{
  display:flex!important;flex-wrap:nowrap!important;gap:0!important;padding:0 0 7px!important;
  overflow-x:auto!important;border-bottom:1px solid rgba(255,255,255,.08)!important
}
html body #filters[hidden]{display:none!important}
html body .filter{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:44px!important;margin:0!important;padding:8px 10px!important;
  background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;
  border-radius:0!important;box-shadow:none!important;
  font:800 12px/1.2 system-ui,sans-serif!important;color:rgba(255,255,255,.64)!important
}
html body .filter.active{color:var(--r378-accent,#ba77ff)!important;border-bottom-color:var(--r378-accent,#ba77ff)!important;background:transparent!important}
html body .friendList{gap:0!important;contain:layout style!important}
html body .friendCard{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) 44px!important;
  align-items:center!important;gap:10px!important;
  padding:11px 1px!important;margin:0!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.11)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important
}
html body .friendAvatar{width:54px!important;height:54px!important;border-radius:15px!important;overflow:hidden!important}
html body .friendName{font-size:15px!important}
html body .friendHeadline{font-size:12px!important}
html body .audienceBadges{margin-top:5px!important;gap:3px 9px!important}
html body .audienceBadge,
html body .audienceBadge[data-mode]{
  min-height:20px!important;display:inline-flex!important;align-items:center!important;
  padding:3px 0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--r378-accent,#c593ff)!important;font-size:10px!important
}
html body .moreBtn{
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;color:var(--r378-accent,#bb7fff)!important
}
/* Friend menu is a real permission-changing popover and MUST remain visually distinct. */
html body .friendMenu{
  border-color:rgba(255,255,255,.22)!important;background:#15121a!important;
  box-shadow:0 18px 45px rgba(0,0,0,.5)!important
}
html body .friendMenu[hidden]{display:none!important}
html body .audienceChoice{min-height:44px!important}
html body .empty{padding:30px 10px!important;border:0!important;border-radius:0!important;background:transparent!important}
html body .policyNote{
  background:transparent!important;margin:13px 0 0!important;padding:10px 6px!important;
  border-left:2px solid var(--r378-accent,#bb7fff)!important;
  font-size:11px!important;line-height:1.45!important
}
html body :is(.friendBack,.friendHubLinkR289,.filter,.friendName,.moreBtn,.audienceChoice):focus-visible{
  outline:2px solid var(--r378-accent,#bb7fff)!important;outline-offset:1px!important
}
@media(max-width:365px){
 html body .friendHubLinksR289{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 html body .friendPage{padding-left:10px!important;padding-right:10px!important}
 html body .friendHubLinksR289 > .friendHubLinkR289{padding:7px 3px!important}
 html body .friendHubLinkR289 small{font-size:9px!important}
}