.home-page .members-directory {
  position: relative;
  width: min(1380px, calc(100% - 40px));
  margin: 48px auto 0;
  padding: clamp(28px, 3.5vw, 50px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: radial-gradient(circle at 0 0, rgba(184, 55, 58, .12), transparent 30%), #121316;
}
.members-directory::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #0008, transparent 75%);
  content: "";
}
.members-directory > * { position: relative; }
.home-page .roster-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  align-items: end;
  gap: 36px;
  margin-bottom: 30px;
}
.roster-heading-copy .eyebrow { margin-bottom: 14px; }
.home-page .roster-heading-copy h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.roster-heading-copy h2 em { color: #eb706a; font-style: normal; }
.roster-heading-copy > p:last-child {
  max-width: 640px;
  margin: 18px 0 0;
  color: #a4a8b0;
  font-size: 14px;
  line-height: 1.7;
}
.roster-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 15px;
  background: rgba(24, 26, 30, .88);
}
.roster-snapshot > div { min-width: 0; padding: 18px 16px; border-right: 1px solid rgba(255, 255, 255, .07); }
.roster-snapshot > div:last-child { border-right: 0; }
.roster-snapshot dt {
  min-height: 30px;
  color: #9ba0aa;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.roster-snapshot dd { margin: 7px 0 0; color: #f2f3f5; font-size: 27px; font-weight: 800; line-height: 1; }
.roster-snapshot dd small { margin-left: 3px; color: #8d929b; font-size: 13px; font-weight: 650; }
.home-page .roster-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: rgba(17, 19, 22, .88);
}
.roster-search { position: relative; width: min(100%, 430px); margin: 0; }
.roster-search > span:first-child {
  position: absolute;
  top: 50%; left: 17px;
  width: 13px; height: 13px;
  border: 1.6px solid #999ea7;
  border-radius: 50%;
  transform: translateY(-55%);
}
.roster-search > span:first-child::after {
  position: absolute;
  right: -6px; bottom: -3px;
  width: 6px; height: 1.5px;
  background: #999ea7;
  transform: rotate(45deg);
  content: "";
}
.roster-search input {
  width: 100%; height: 46px;
  padding: 0 15px 0 43px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: #0e1013;
  color: #f0f1f3;
  font-size: 13px;
}
.roster-search input::placeholder { color: #81868e; }
.roster-search input:focus-visible { outline: 2px solid #e97772; outline-offset: 2px; }
.roster-filters {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  gap: 7px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.roster-filters button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
  color: #bec2ca;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.roster-filters button:hover { border-color: rgba(255, 255, 255, .2); color: #fff; }
.roster-filters button[aria-pressed="true"] { border-color: rgba(231, 99, 95, .38); background: rgba(220, 71, 69, .16); color: #ffaaa4; }
.roster-filters button:focus-visible { outline: 2px solid #e97772; outline-offset: 2px; }
.home-page .roster-result-count {
  grid-column: 2; grid-row: 1;
  margin: 0;
  color: #a5aab2;
  font-size: 11px;
  white-space: nowrap;
}
.roster-result-count strong { margin-right: 2px; color: #f1f2f4; font-size: 16px; }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.roster-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(31, 33, 38, .98), rgba(20, 22, 26, .98));
  color: #f0f1f3;
  text-decoration: none;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .11);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.roster-card[hidden], .roster-no-results[hidden] { display: none !important; }
a.roster-card:hover { transform: translateY(-2px); border-color: rgba(229, 100, 95, .38); box-shadow: 0 18px 42px rgba(0, 0, 0, .21); }
a.roster-card:focus-visible { outline: 2px solid #ed7770; outline-offset: 3px; }
.roster-card-accent { position: absolute; top: 0; left: 22px; width: 52px; height: 3px; border-radius: 0 0 4px 4px; background: #e36d67; }
.roster-card[data-member-role="Medic"] .roster-card-accent { background: #72d39b; }
.roster-card[data-member-role="Support"] .roster-card-accent { background: #d2a85f; }
.roster-card[data-member-role="Recon"] .roster-card-accent { background: #78a8df; }
.roster-card[data-member-role="Pilot"] .roster-card-accent, .roster-card[data-member-role="Driver"] .roster-card-accent { background: #a68cda; }
.roster-card-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.roster-avatar-wrap { position: relative; width: 54px; height: 54px; }
.roster-avatar-wrap > img { width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 13px; object-fit: cover; background: #111316; }
.freshness-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #a2a7b0; box-shadow: 0 0 8px currentColor; }
.roster-avatar-wrap > .freshness-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border: 3px solid #1d1f23; }
.freshness-dot.freshness-today { color: #72d39b; background: #72d39b; }
.freshness-dot.freshness-recent { color: #79a5dd; background: #79a5dd; }
.freshness-dot.freshness-old { color: #d2a567; background: #d2a567; }
.freshness-dot.freshness-reconnect { color: #df6b67; background: #df6b67; }
.roster-identity { display: flex; min-width: 0; flex-direction: column; }
.roster-identity small { overflow: hidden; margin-bottom: 3px; color: #e78680; font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .065em; white-space: nowrap; }
.roster-identity strong { overflow: hidden; font-size: 19px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.roster-identity em { overflow: hidden; margin-top: 4px; color: #999ea8; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.roster-card-statuses { align-self: start; display: flex; align-items: flex-end; flex-direction: column; gap: 6px; }
.roster-staff-badge, .roster-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.roster-staff-badge { border: 1px solid rgba(205, 187, 148, .27); background: rgba(205, 187, 148, .08); color: #dcc9a2; text-transform: uppercase; }
.roster-staff-badge i { font-size: 8px; font-style: normal; }
.roster-live-badge { border: 1px solid rgba(74, 211, 132, .27); background: rgba(74, 211, 132, .09); color: #92e5b4; }
.roster-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #54d68c; box-shadow: 0 0 0 3px rgba(84, 214, 140, .11); }
.roster-main-job { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 17px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: #101216; }
.roster-main-job > img { width: 40px; height: 40px; object-fit: contain; }
.roster-main-job > span { display: flex; min-width: 0; flex-direction: column; }
.roster-main-job small { margin-bottom: 4px; color: #9297a0; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.roster-main-job strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.roster-main-job > b { padding: 7px 9px; border-radius: 7px; background: rgba(224, 88, 83, .12); color: #f08b85; font-size: 11px; white-space: nowrap; }
.roster-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 10px 0 0; }
.roster-metrics > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .04); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.roster-metrics dt { color: #a0a4ad; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.roster-metrics dd { margin: 0; color: #f4f5f6; font-size: 19px; font-weight: 800; }
.roster-metrics .roster-global-level { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.roster-global-level img { display: block; width: 38px; height: 38px; flex: none; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .38)); }
.roster-specialties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.roster-specialties > span { display: flex; flex: 1 1 145px; min-width: 0; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .045); border-radius: 9px; background: rgba(255, 255, 255, .035); }
.roster-specialties > span.is-primary { border-color: rgba(227, 93, 88, .2); background: rgba(227, 93, 88, .075); }
.roster-specialties img { width: 27px; height: 27px; flex: none; object-fit: contain; }
.roster-specialties > span > span { display: flex; min-width: 0; flex-direction: column; }
.roster-specialties small { color: #9da1a9; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.roster-specialties strong { overflow: hidden; margin-top: 3px; color: #e1e3e7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.roster-presentation { display: -webkit-box; overflow: hidden; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .075); color: #a9adb5; font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.roster-private { display: flex; align-items: center; gap: 12px; margin-top: 17px; padding: 15px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 10px; background: #111316; }
.roster-private > span { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .04); color: #a2a7b0; font-size: 21px; }
.roster-private p, .roster-private strong, .roster-private small { display: block; margin: 0; }
.roster-private strong { font-size: 13px; }
.roster-private small { margin-top: 4px; color: #9297a0; font-size: 11px; line-height: 1.5; }
.roster-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.roster-card-footer > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; overflow: visible; color: #a0a4ac; font-size: 11px; white-space: normal; }
.roster-card-footer .roster-sync-date { color: #858a93; }
.roster-card-footer strong, .roster-card-footer > a { color: #ed9892; font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.roster-card-footer strong i, .roster-card-footer > a i { display: inline-block; margin-left: 4px; font-style: normal; transition: transform .18s; }
a.roster-card:hover .roster-card-footer strong i, .roster-card-footer > a:hover i { transform: translateX(3px); }
.roster-card-legacy { min-height: 0; }
.roster-card-legacy .roster-presentation { margin-top: 16px; -webkit-line-clamp: 4; }
.roster-legacy-specialties { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.roster-legacy-specialties span { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 7px; background: rgba(255, 255, 255, .04); color: #c8cbd1; font-size: 11px; }
.roster-no-results { display: grid; min-height: 220px; place-items: center; align-content: center; text-align: center; }
.roster-no-results > span { display: grid; width: 56px; height: 56px; place-items: center; margin-bottom: 12px; border-radius: 50%; background: rgba(255, 255, 255, .04); color: #a2a7b0; font-size: 27px; }
.roster-no-results strong { font-size: 18px; }
.roster-no-results p { margin: 8px 0 0; color: #9297a0; font-size: 13px; }
.roster-card.roster-card-stale { filter: grayscale(1); opacity: .76; cursor: not-allowed; }
.roster-card.roster-card-stale .roster-card-footer strong { color: #b0b4bc; }
.roster-card.roster-card-stale:hover { transform: none; border-color: rgba(255, 255, 255, .1); box-shadow: 0 12px 35px rgba(0, 0, 0, .11); }
@media (max-width: 1100px) {
  .home-page .roster-heading { grid-template-columns: 1fr; gap: 23px; }
  .roster-snapshot { max-width: 720px; }
}
@media (max-width: 980px) {
  .roster-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .home-page .members-directory { width: calc(100% - 24px); margin-top: 12px; padding: 24px 20px; border-radius: 17px; }
  .home-page .roster-heading { margin-bottom: 22px; }
  .home-page .roster-heading-copy h2 { font-size: clamp(40px, 10vw, 58px); }
  .roster-snapshot > div { display: block; padding: 13px 10px; border-right: 1px solid rgba(255, 255, 255, .07); border-bottom: 0; }
  .roster-snapshot > div:last-child { border-right: 0; }
  .roster-snapshot dt { min-height: 37px; font-size: 9px; }
  .roster-snapshot dd { margin: 8px 0 0; font-size: 24px; }
  .home-page .roster-toolbar { grid-template-columns: 1fr; gap: 11px; padding: 12px; }
  .roster-search { width: 100%; }
  .roster-filters { grid-column: 1; grid-row: 2; gap: 6px; }
  .roster-filters button { min-height: 37px; padding: 0 11px; }
  .home-page .roster-result-count { grid-column: 1; grid-row: 3; justify-self: start; }
  .roster-grid { gap: 12px; }
  .roster-card { padding: 18px; }
  .roster-card-head { grid-template-columns: 50px minmax(0, 1fr); gap: 11px; }
  .roster-avatar-wrap, .roster-avatar-wrap > img { width: 50px; height: 50px; }
  .roster-card-statuses { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .roster-identity strong { font-size: 18px; }
  .roster-main-job { margin-top: 15px; }
}
@media (max-width: 390px) {
  .roster-snapshot > div { padding-inline: 8px; }
  .roster-snapshot dt { font-size: 8.5px; }
  .roster-card { padding: 16px; }
  .roster-metrics > div { padding: 10px; }
  .roster-metrics dt { font-size: 9px; }
  .roster-global-level img { width: 30px; height: 30px; }
  .roster-specialties > span { flex-basis: 120px; }
  .roster-specialties > span:nth-child(n+3) { display: flex; }
}
@media (max-width: 360px) {
  .roster-metrics > div { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .roster-card, .roster-card-footer strong i, .roster-card-footer > a i { transition: none; }
}