.membership-ending-setup {
  --profile-card-chip-surface: var(--color-neutral-100);
  max-inline-size: 37.5rem;
  margin-inline: auto;
  padding-block-end: var(--space-3xl);
}

.membership-ending-setup [hidden] {
  display: none;
}

.membership-ending-option:has(input[value="date"]:checked) .membership-ending-option__details {
  display: block;
}

.membership-ending-setup__header {
  margin-block-end: var(--space-2xl);
  text-align: center;
  font-size: var(--font-size-xl);
}

.membership-ending-setup__title {
  font-size: clamp(var(--font-size-2xl), 6vw, 3rem);
  font-weight: var(--font-weight-black);
}

.membership-ending-setup__section h2 {
  font-weight: var(--font-weight-bold);
}

.membership-ending-setup__section > .relationship-chip {
  margin-block-start: var(--space-sm);
}

.membership-ending-setup__section ul {
  padding-inline-start: var(--space-lg);
}

.membership-ending-setup__family {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.membership-ending-setup__chips,
.membership-ending-setup__controls,
.membership-ending-setup__next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.membership-ending-setup__controls {
  justify-content: space-between;
  margin-block-start: var(--space-xl);
}

.membership-ending-setup__chips {
  margin-block-start: var(--space-sm);
}

.relationship-choice {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  padding-inline-start: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  cursor: pointer;
}

.relationship-choice:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--color-neutral-800);
}

.relationship-choice input {
  appearance: none;
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid var(--color-neutral-600);
  border-radius: 2px;
  background: var(--color-neutral-400);
}

.relationship-choice .relationship-identity {
  padding: var(--space-xs) var(--space-sm);
}

.relationship-choice .relationship-identity__copy {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

.relationship-choice input:checked {
  border: 5px solid var(--color-action-primary);
  background: white;
}

.relationship-choice--required input:checked {
  border-color: var(--color-neutral-500);
}

.relationship-choice--blocked {
  color: var(--color-neutral-600);
  background: var(--color-neutral-50);
  cursor: default;
}

.relationship-choice--blocked .relationship-identity__context {
  color: inherit;
}

.relationship-choice:has(input:focus-visible) {
  outline: 3px solid var(--color-action-primary);
  outline-offset: 3px;
}

.membership-ending-admin-hint {
  margin-block-start: var(--space-sm);
  color: var(--color-neutral-1000);
  font-size: var(--font-size-sm);
}