.new-members-request-state[hidden],
.new-members-request-state [hidden] {
  display: none !important;
}

.new-members-request-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--ink-700);
  text-align: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.new-members-request-state.is-error {
  color: #7c263d;
  background: #fff6f8;
  border-color: #efc3cf;
}

.new-members-request-state__retry {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 12px;
  color: #0d5c9e;
  font: inherit;
  font-weight: 700;
  background: #fff;
  border: 1px solid #9fc9ea;
  border-radius: 999px;
  cursor: pointer;
}

.member-filter.is-loading button {
  cursor: wait;
}

/* Homepage member sections only: remove the outer framed-box treatment while
   preserving the white content surface, spacing, member cards, and identity. */
body.page-home .site-main > .cent:has(+ .centbody .member-grid--featured),
body.page-home .site-main > .cent:has(+ .centbody .member-grid--newest) {
  border-radius: var(--radius-md);
}

body.page-home .site-main > .centbody:has(.member-grid--featured),
body.page-home .site-main > .centbody:has(.member-grid--newest) {
  border: 0;
  border-radius: 0;
}

/* Keep the server page size fixed at 30, but inherit the theme's established
   member-grid column breakpoints. Do not force a viewport-only column count
   here: the right sidebar can narrow the actual card container substantially. */

@media (max-width: 767px) {
  .member-grid--newest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* R430: component-sized newest-member cards. */
body.page-home .member-grid--newest > .member-card {
  container-name: newest-member-card;
  container-type: inline-size;
}

body.page-home .member-grid--newest .member-card__content {
  overflow-wrap: normal;
  word-break: normal;
}

/* Keep the already-proved phone composition through 599px. From 600px up,
   adapt the card body to its real allocated width rather than the viewport. */
@media (min-width: 600px) {
  /* Container queries measure the card's content box. The two-pixel border is
     therefore subtracted so the visible outer-card boundary remains 270px. */
  @container newest-member-card (max-width: 267.9px) {
    .member-card__body {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 8px;
      padding: 12px 8px;
    }

    .member-card__avatar-link {
      width: 64px;
      justify-self: center;
    }

    .member-card__avatar {
      width: 64px;
      height: 64px !important;
    }
  }

  /* Same border-box correction keeps the visible stacked boundary at 234px. */
  @container newest-member-card (max-width: 231.9px) {
    .member-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      text-align: center;
    }

    .member-card__content {
      width: 100%;
    }
  }
}

/* Bounded fallback for engines without size-container queries. It deliberately
   favors readable stacked cards in the two verified narrow-card intervals. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) and (max-width: 836px) {
    body.page-home .member-grid--newest .member-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      text-align: center;
    }

    body.page-home .member-grid--newest .member-card__avatar-link {
      width: 64px;
    }

    body.page-home .member-grid--newest .member-card__avatar {
      width: 64px;
      height: 64px !important;
    }

    body.page-home .member-grid--newest .member-card__content {
      width: 100%;
    }
  }

  @media (min-width: 837px) and (max-width: 932px),
         (min-width: 1200px) and (max-width: 1264px) {
    body.page-home .member-grid--newest .member-card__body {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 8px;
      padding: 12px 8px;
    }

    body.page-home .member-grid--newest .member-card__avatar-link {
      width: 64px;
      justify-self: center;
    }

    body.page-home .member-grid--newest .member-card__avatar {
      width: 64px;
      height: 64px !important;
    }
  }
}