.member-directory{overflow:hidden}
.member-boundary{display:flex;gap:14px;align-items:flex-start;margin:0 24px 22px;padding:16px 18px;border:1px solid light-dark(#d8e3f6, var(--web-border));border-radius:12px;background:light-dark(#f4f8ff, var(--web-surface-subtle))}
.member-boundary>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:light-dark(#e0eaff, var(--web-selection-surface));color:light-dark(#3154b8, var(--web-link));font-weight:800}
.member-boundary strong{font-size:.9rem}
.member-boundary p{margin:4px 0 0;color:light-dark(#657086, var(--web-muted));font-size:.8rem;line-height:1.5}
.member-boundary>div,.member-list-heading>div,.member-identity,.member-access{min-width:0}
.member-boundary p,.member-list-heading p,.member-access small{overflow-wrap:anywhere}
.member-role-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 24px}
.member-role-guide article{padding:16px;border:1px solid light-dark(#e3e7ef, var(--web-border));border-radius:12px;background:light-dark(#fff, var(--web-surface))}
.member-role-guide strong{font-size:.82rem}
.member-role-guide p{margin:6px 0 0;color:light-dark(#687287, var(--web-muted));font-size:.76rem;line-height:1.45}
.member-list-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 24px 12px;border-top:1px solid light-dark(#e8ebf1, var(--web-border))}
.member-list-heading h3{margin:0;font-size:1rem}
.member-list-heading p{margin:4px 0 0;color:light-dark(#727c8f, var(--web-muted));font-size:.78rem}
.member-list{padding:0 24px 22px}
.member-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,auto);gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid light-dark(#ebedf2, var(--web-border))}
.member-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 0;color:light-dark(#687184, var(--web-muted));font-size:12px}.member-facts div{display:flex;gap:5px}.member-facts dt{font-weight:700}.member-facts dd{margin:0}.member-access.eligible .member-status{background:light-dark(#e8f6ee, var(--web-surface-subtle));color:light-dark(#17643a, var(--web-success))}.member-access.ineligible .member-status{background:light-dark(#fff3df, var(--web-warning-surface));color:light-dark(#815500, var(--web-warning))}
.member-card:last-child{border-bottom:0}
.member-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:light-dark(#e8edff, var(--web-selection-surface));color:light-dark(#3453b4, var(--web-link));font-size:.82rem;font-weight:800}
.member-identity>div{display:flex;align-items:center;gap:8px}
.member-identity h3{margin:0;font-size:.9rem}
.member-identity p{margin:4px 0 0;color:light-dark(#687287, var(--web-muted));font-size:.78rem}
.member-current{padding:2px 7px;border-radius:999px;background:light-dark(#edf3ff, var(--web-surface-subtle));color:light-dark(#3154b8, var(--web-link));font-size:.68rem;font-weight:700}
.member-access{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.member-status{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700}
.member-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#8791a3}
.member-status.enabled{color:light-dark(#23724d, var(--web-success))}
.member-status.enabled::before{background:#35a76f}
.member-status.disabled{color:light-dark(#7b8494, var(--web-muted))}
.member-access small{color:light-dark(#747e90, var(--web-muted));font-size:.7rem;max-width:250px}
.member-directory>.message{margin:0 24px 22px;color:light-dark(#6d7789, var(--web-muted));font-size:.74rem}
@media(max-width:760px){
  .member-role-guide{grid-template-columns:1fr}
  .member-card{grid-template-columns:auto 1fr}
  .member-access{grid-column:2;align-items:flex-start;text-align:left}
}
@media(max-width:420px){
  .member-boundary,.member-role-guide,.member-list{margin-left:0;margin-right:0;padding-left:17px;padding-right:17px}
  .member-list-heading{align-items:flex-start;flex-direction:column;gap:8px;padding-left:17px;padding-right:17px}
  .member-card{grid-template-columns:36px minmax(0,1fr);gap:8px}
  .member-avatar{width:36px;height:36px}
  .member-directory>.message{margin-left:17px;margin-right:17px}
}