@layer components {
/* data_entry_form — composite that stacks form fields rendered from a list of
   field descriptors. Figma frames 1850:15858 (mobile) / 2165:239300 (desktop).
   Layout only: every field's chrome (label, input, inline error) comes from the
   base components (.psw-field et al.); this file owns the vertical rhythm of the
   stack plus the choice-card group wrapper (single-choice radios / multi-choice
   checkboxes). */

.psw-data-entry-form {
    display: flex;
    flex-direction: column;
    /* 24px between fields on mobile (Figma 1850:15858 gap-24). The optional
       error_summary is the first flex child, so the same gap spaces it from the
       first field (matches the error-state frame 2231:21312). */
    gap: var(--space-6);
}

/* Desktop fills more vertical space — 32px between fields (Figma 2165:239300
   gap-32). Gated at the shared 769px breakpoint used across the redesign. */
@media (min-width: 769px) {
    .psw-data-entry-form {
        gap: var(--space-8);
    }
}

/* Address expands one field descriptor into several input components. Since
   those inputs are nested inside this wrapper, they don't receive the parent
   form's field-to-field gap unless the wrapper owns the same vertical rhythm. */
.psw-data-entry-form__address {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (min-width: 769px) {
    .psw-data-entry-form__address {
        gap: var(--space-8);
    }
}

/* Choice-card group. Single-choice (select) renders a <fieldset> of radio cards
   and multiple-choice (multiselect) a <fieldset> of checkbox cards, both under a
   single field label (the cards themselves come from the list_item component).
   The <legend> reuses .psw-field__label for the bold label treatment; reset the
   fieldset's default chrome and space the legend above the cards (a <legend> is
   the fieldset caption, not a flex item, so it needs explicit margin). */
.psw-data-entry-form__group {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.psw-data-entry-form__legend {
    padding: 0;
    margin: 0 0 var(--space-3);
}

/* 12px between choice cards (Figma 1306:83948). */
.psw-data-entry-form__choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.psw-data-entry-form__address {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* 8px between the upload control and its inline error/expiration sub-field. */
.psw-data-entry-form__upload-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Group/upload-level errors sit below their controls, reusing the per-field
   .psw-field__message styling (danger-400, label-sm) via the shared class.
   The multiselect group message is a plain block child of the non-flex
   <fieldset>, so it carries its own top margin. The upload message isn't
   listed here: it's a flex child of __upload-field, so that wrapper's gap
   already spaces it (the shared base class adds no margin of its own). */
.psw-data-entry-form__group-message {
    margin-top: var(--space-2);
}
}