/*
 * Sign-in, registration, password reset, invitation and "get started" on a
 * phone.
 *
 * Each of these pages carries the same inline styles: a 402px form with 402px
 * fields. On a 360px phone the fields ran off both edges of the screen -- the
 * first thing a student saw of Catapult was "mail" and "assword" -- and at
 * 15px the fields made iOS zoom the page on focus and leave it zoomed.
 *
 * Linked after each page's own <style>, so these win; the !important is for
 * the widths, which are the whole problem. Nothing outside the media query.
 */
@media (max-width: 575.98px) {
    body {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .login-form,
    .register-form,
    .pending-form,
    .sso-options,
    .alert,
    .container {
        width: 100% !important;
        max-width: 402px;
        box-sizing: border-box;
    }
    .login-form,
    .register-form,
    .pending-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The forms are centred flex columns, so a row is only as wide as what is
       in it; a field told to be 100% of that is 100% of nothing. */
    form { width: 100%; max-width: 402px; }
    .form-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .form-group > .btn { flex: 1 1 140px; }

    .form-control,
    select.form-control {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 48px;
        /* 16px is the floor below which iOS zooms on focus. */
        font-size: 16px !important;
        padding: 10px 14px !important;
        box-sizing: border-box;
    }

    /* The paired buttons (Log In / Forgot Password, Register / Back) share
       the row instead of each demanding 193px of it. */
    .btn-login,
    .btn-register,
    .btn-back-to-login,
    .btn-clear-background {
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        height: auto !important;
        min-height: 48px;
        white-space: normal;
    }
    .btn-sso { min-height: 48px; display: flex; align-items: center; justify-content: center; }

    img { max-width: 100%; height: auto; }
    .login-image img { max-width: 72%; }
}