/* ======================================================================
   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;
    }
}