.admin-person-overview {
  container-type: inline-size;
  display: grid;
  gap: var(--space-xl);
  inline-size: 100%;
}

.admin-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--font-size-md);
}

.admin-settings-card__title {
  font-weight: var(--font-weight-bold);
}

.admin-settings-card__value,
.admin-settings-card__list {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.admin-settings-card__list {
  margin-block: var(--space-xs) 0;
  padding-inline-start: 1.25rem;
}

.admin-settings-card__warning {
  color: var(--color-action-danger);
  font-weight: var(--font-weight-semibold);
}

.admin-settings-card__action {
  inline-size: fit-content;
  justify-self: start;
}

@container (max-width: 26.1875rem) {
  .admin-settings-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

.membership-role-warning {
  margin-block-start: var(--space-lg);
}

.membership-ending-card {
  margin-block-start: 0;
}

.membership-role-form__option {
  color: var(--color-text-secondary);
}

.date-select-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.admin-child-list,
.admin-parent-list {
  display: grid;
  gap: var(--space-lg);
}

.assignment-sort {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  inline-size: max-content;
  max-inline-size: 100%;
  margin: 0 auto var(--space-xl);
}

.assignment-sort__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.assignment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-xl);
  inline-size: min(68.75rem, calc(100% - var(--space-2xl)));
  margin: 0 auto var(--space-xl);
}

.assignment-actions {
  inline-size: min(68.75rem, calc(100% - var(--space-2xl)));
  margin-inline: auto;
}

.self-assignment-form__explanation {
  display: grid;
  gap: var(--space-lg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-regular);
}

.self-assignment-form__explanation-text {
  margin: 0;
}

.self-assignment-form__options {
  display: grid;
  gap: var(--space-lg);
}

@media (max-width: 43.75rem) {
  .date-select-row {
    grid-template-columns: 1fr;
  }
}