/* Space belongs to the group, including authenticated and dynamically revealed states. */
:root {
  --form-label-gap: 8px;
  --form-field-gap: 16px;
  --form-section-gap: 24px;
}

.form-stack {
  display: grid;
  gap: var(--form-field-gap);
  min-width: 0;
}
.form-stack[hidden] { display: none; }
.form-stack > * { margin-block: 0; }
/* Keep the former field/consent pattern safe when a stack is omitted. */
:where(:not(.form-stack, .loan-fields, .form-grid, .calculator-fields))
  > .loan-field + :is(label.loan-choice, label.contract-consent) {
  margin-block-start: var(--form-field-gap);
}
/* Match component specificity so its margin reset cannot erase group spacing. */
.receipt-form .form-stack > label,
.receipt-form .form-stack > p,
.contract-saved .form-stack > label,
.contract-saved .form-stack > p,
.form-stack > .loan-actions {
  margin-block: 0;
}
.form-stack > .loan-actions { gap: 12px; }
.form-stack > .contract-text-button { justify-self: start; }
.form-stack label:has(> input[type=checkbox]) { cursor: pointer; }
.account-flags { gap: 12px; }

/* A label, its control and help stay together; the next field starts a new block. */
.form-stack > label:not(:has(> input[type=checkbox], > input[type=radio])) {
  gap: var(--form-label-gap);
}