@layer components {
  .account-fields,
  .account-fields__for {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .account-fields__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--size-fill), var(--measure-tight) / 2), var(--track-fill)));
    gap: var(--space-5);
  }

  .account-fields__for {
    display: none;
  }

  .account-fields:has(:is([value="checking"], [value="savings"], [value="investment"]):checked) .account-fields__for--number,
  .account-fields:has(:is([value="checking"], [value="savings"]):checked) .account-fields__for--routing,
  .account-fields:has(:is([value="checking"], [value="savings"], [value="investment"]):checked) .account-fields__for--balance,
  .account-fields:has([value="credit_card"]:checked) .account-fields__for--card,
  .account-fields:not(:has(.choice__input:checked)) :is(.account-fields__for--number, .account-fields__for--balance) {
    display: flex;
  }
}