/* ---- Completing a form, drawn outside the Portal (#230) -----------------------------------------
   The appearance of ApplicantFormQuestions, ApplicantFormSteps and ApplicantFormReference wherever
   they are drawn inside an element marked .applicant-form - today, the designer's Preview as
   applicant in TenantAdmin.

   ⚠ SCOPED, AND THAT IS THE WHOLE DESIGN. Every host links this file (StylesheetCoverageTests holds
   a shared component to the sheets EVERY host links), and two of them already use the same class
   names for other things: PlatformAdmin's .form-question is a flex column with its own input
   geometry, and the Portal's sign-in card, registration and Contact Us all lean on .form-hint and
   .form-actions. Unscoped, these rules would have restyled all of them. Under .applicant-form they
   touch nothing that does not ask for them.

   ⚠ THE PORTAL DOES NOT USE THE WRAPPER, AND THAT IS DELIBERATE. Its form page keeps the rules in
   its own app.css, untouched, so moving the markup into the shared component could not change a
   pixel of what applicants see. The cost is that these rules restate the Portal's - the same
   values, on design tokens so the preview survives TenantAdmin's dark theme. Folding the Portal's
   copy into this file means auditing every Portal page that uses the generic names; that is a
   consolidation of its own, not part of adding a preview. */

.applicant-form .form-steps {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: var(--cv-text-base);
    color: var(--cv-text-muted);
    flex-wrap: wrap;
}

.applicant-form .form-steps .current { font-weight: 700; color: var(--cv-text); }
.applicant-form .form-steps .done { color: var(--cv-success-text); }

.applicant-form .form-questions { max-width: 34rem; }

.applicant-form .form-questions > .lede { margin: 0 0 1rem; }

.applicant-form .form-question { margin-bottom: 1rem; }

.applicant-form .form-question label {
    display: block;
    font-weight: 600;
}

.applicant-form .form-question input,
.applicant-form .form-question select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-weight: 400;
}

.applicant-form .form-question input[type="checkbox"] { width: auto; }

/* The applicant's text box, which is taller and rounder than a staff form's: the Portal sizes its
   controls for a phone held at arm's length, and a preview drawn with the admin's compact boxes
   would understate how much room a question takes. */
.applicant-form .form-question input:not([type="checkbox"]),
.applicant-form .form-question select {
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    font: inherit;
    color: var(--cv-text);
    background: var(--cv-input-bg);
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-md);
}

/* "CHOOSE ANY NUMBER" (#229): one checkbox per option, the box beside its words. */
.applicant-form .form-question__choices {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.applicant-form .form-question__choices legend {
    font-weight: 600;
    padding: 0;
}

.applicant-form .form-question .form-question__choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 400;
    padding: 0.45rem 0;
    min-height: 2.25rem;
}

.applicant-form .form-question .form-question__choice input[type="checkbox"] {
    display: inline-block;
    margin: 0;
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.applicant-form .form-hint {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cv-text-muted);
    margin-top: 0.2rem;
}

.applicant-form .required { color: var(--cv-danger-text); margin-left: 0.2rem; }

/* The blank form beside the questions (#102): one column until there is room for two. */
.applicant-form .form-fill {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 75rem) {
    .applicant-form .form-fill {
        grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    }

    .applicant-form .form-reference {
        position: sticky;
        top: 1rem;
    }
}

.applicant-form .form-reference {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-sm);
    padding: 0.75rem;
    background: var(--cv-surface-subtle);
    min-width: 0;
}

.applicant-form .form-reference > summary {
    cursor: pointer;
    font-weight: 600;
}

.applicant-form .form-reference__pages {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.applicant-form .form-reference__pages button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-sm);
    background: var(--cv-surface);
    color: var(--cv-text);
    cursor: pointer;
}

/* Not color alone - heavier and outlined too (§12, WCAG). */
.applicant-form .form-reference__pages button.current {
    font-weight: 700;
    background: var(--cv-text);
    color: var(--cv-surface);
    border-color: var(--cv-text);
}

/* White in every theme: it is a picture of paper. */
.applicant-form .form-reference__page {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
    object-position: top;
    border: 1px solid var(--cv-border);
    background: #fff;
}

.applicant-form .form-preview {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--cv-border);
    margin: 1rem 0;
}

.applicant-form .form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}