/* ======================================================================
   Intake — the shared form page on phones and tablets (fbtfb):
   the step progress indicator's spacing, and the form's own action buttons.

   The shared form page (project_form_embed) draws Previous / Next /
   Save Draft / Submit in one group and Clear Form in another, inside a flex
   row. On a touch screen those buttons wrapped into a ragged pile with no
   space between them. Here, touch devices only:
     - narrow form (phone): every button full width on its own row
     - wider form (tablet): all buttons on one row, evenly spaced
   Desktop (a mouse or trackpad) is untouched.

   The row is matched by the buttons it holds (their ids are Intake's own), not
   by the form: in the finished page the row does not always sit inside the
   form element.

   The row is the container, so a form drawn in a narrow panel or preview
   window follows its own width, not the screen's. Layout and spacing only:
   the buttons keep their colours from Theme Studio and their per-form
   settings. No !important; the row's own inline flex rules are kept.
   Sizes are in px on purpose: this page also renders stand-alone, where the
   framework sets the root font to 10px, so rem would shrink the 44px tap target.
   ====================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Steps ("Step 1 of 3" bar, numbered steps or dots): more room above and
       below. The bar's own 20px bottom margin is set inline, so the room below
       it is added as padding on the form that follows. */
    .fb-form-container .fb-progress-container,
    .fb-form-container .fb-numbered-steps,
    .fb-form-container .fb-simple-steps {
        margin-top: 32px;
    }

    .fb-form-container .fb-numbered-steps,
    .fb-form-container .fb-simple-steps {
        margin-bottom: 20px;
    }

    .fb-form-container .fb-progress-container + .fb-form,
    .fb-form-container .fb-numbered-steps + .fb-form,
    .fb-form-container .fb-simple-steps + .fb-form {
        padding-top: 12px;
    }

    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) {
        container-type: inline-size;
        container-name: fbtfb-row;
        gap: 10px;
    }

    /* Phone: each group takes the whole row and stacks its buttons. */
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

    /* A group with no button showing takes no room. */
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div:not(:has(> .btn)) {
        display: none;
    }

    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div > .btn {
        width: 100%;
        min-height: 44px;
        margin: 0;
        white-space: normal;
    }

    /* Tablet: every button on one row. */
    @container fbtfb-row (min-width: 576px) {
        .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div {
            flex: 0 1 auto;
            flex-direction: row;
            align-items: center;
        }

        .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div > .btn {
            width: auto;
            padding-inline: 20px;
        }
    }
}

/* Numbered steps on a narrow screen (owner, 4 Oct 2026). Each step was as wide as its name and the names had no
   room between them, so on a phone they ran together ("Case set-upApplicantsFinances…") and the last step went off
   the page. Here the numbers share the width, and only the CURRENT step's name shows, centred under the row.
   Any narrow screen (a small desktop window too), not only touch. Layout only — colours stay with Theme Studio. */
@media (max-width: 576px) {
    .fb-form-container .fb-numbered-steps {
        padding-bottom: 20px;
    }

    .fb-form-container .fb-numbered-steps .fb-step-item {
        min-width: 0;
        position: static; /* the current name is placed against the row, not its own step */
    }

    .fb-form-container .fb-numbered-steps .fb-step-number {
        position: relative;
        z-index: 1; /* the numbers stay above the connecting line (the step used to carry this) */
    }

    .fb-form-container .fb-numbered-steps .fb-step-label {
        display: none;
    }

    .fb-form-container .fb-numbered-steps .fb-step-label.active {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        text-align: center;
    }
}

/* Phones, every form (owner, 4 Nov 2026: "the form buttons need to be full width … every form", "the field widths
   are too narrow"). The button row sat inside 30px of padding a side, and the frame's body, row and panel added
   about 50px more, so fields and buttons were boxed in. On a narrow screen the form uses the full width, the
   buttons match the fields exactly, and each button's icon and words are centred. Layout only. */
@media (max-width: 640px) {
    body { padding-left: 0 !important; padding-right: 0 !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    .fb-form-container [class*="col-"], body > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    .panel_s.fb-form-container, .fb-form-container { padding-left: 2px !important; padding-right: 2px !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) {
        padding-left: 0 !important; padding-right: 0 !important; flex-direction: column; align-items: stretch; gap: 10px;
    }
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div {
        display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0;
    }
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div:not(:has(> .btn)) { display: none; }
    .form-group:has(> div > #save-draft-btn, > div > #submit-btn, > div > #clear-form-btn, > div > #fb-next-btn) > div > .btn {
        width: 100% !important; margin: 0 !important; justify-content: center; text-align: center; min-height: 48px;
    }
}