/*
 * Sign-in, sign-up and password pages on a phone: the whole form should fit on one screen, so nobody has to
 * scroll to find the button. Only spacing and sizes shrink; text stays 16px in inputs (smaller makes iPhones zoom in).
 * Loaded after each page's own styles.
 */
@media (max-width: 575.98px) {
    html, body { min-height: 100vh; min-height: 100dvh; }
    body { min-height: 100vh !important; min-height: 100dvh !important; }
    .auth-container { padding: 6px !important; min-height: 100vh; min-height: 100dvh; }

    /* card used by login, register, forgot and reset */
    .premium-card { padding: 12px 14px !important; border-radius: 18px !important; }
    .premium-card > .text-center.mb-4 { margin-bottom: .35rem !important; padding-bottom: 0 !important; }
    .premium-card > .text-center a > div { padding: 3px 12px !important; border-width: 2px !important; }
    .premium-card > .text-center a span { font-size: 1.3rem !important; letter-spacing: 1.5px !important; }
    .premium-card h4 { font-size: 1.05rem !important; margin: .2rem 0 0 !important; }
    .premium-card > .text-center p { font-size: .76rem !important; margin: 0 !important; }
    .premium-card .mb-4 { margin-bottom: .5rem !important; }
    .premium-card .mb-3 { margin-bottom: .4rem !important; }
    .premium-card .mt-2 { margin-top: .2rem !important; }
    .premium-card .pt-2 { padding-top: .25rem !important; }
    .premium-input { padding-top: 9px !important; padding-bottom: 9px !important; min-height: 42px !important; height: auto !important; font-size: 16px !important; }
    .premium-btn { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 42px !important; }
    .premium-card .alert { padding: .4rem .6rem !important; margin-bottom: .4rem !important; font-size: .8rem !important; }
    /* "Keep me signed in" and "Forgot password" share one row instead of stacking */
    .premium-card form > .d-flex.flex-column { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin-bottom: .5rem !important; padding: 0 2px !important; }
    .premium-card form > .d-flex.flex-column .mb-3 { margin-bottom: 0 !important; }
    .premium-card .form-check-label, .premium-card form > .d-flex.flex-column a { font-size: .8rem !important; }

    /* instructor sign-up page */
    .ins-card { padding: 12px 14px !important; border-radius: 18px !important; }
    .ins-card > .text-center { margin-bottom: .4rem !important; }
    .ins-card > .text-center a > div { padding: 3px 12px !important; border-width: 2px !important; }
    .ins-card > .text-center a span { font-size: 1.3rem !important; letter-spacing: 1.5px !important; }
    .ins-badge { margin-top: 0 !important; padding: 4px 10px !important; font-size: .6rem !important; letter-spacing: 1.2px !important; vertical-align: middle; }
    .ins-title { font-size: 1.2rem !important; margin: 6px 0 4px !important; }
    .ins-lead { font-size: .78rem !important; line-height: 1.4 !important; }
    .ins-tabs { margin-bottom: .4rem !important; padding: 3px !important; }
    .ins-tabs a { padding: 7px 0 !important; font-size: .74rem !important; }
    .ins-label { margin: .45rem 0 .2rem !important; font-size: .74rem !important; }
    .ins-input { padding: 8px 12px !important; font-size: 16px !important; }
    .ins-hint { font-size: .68rem !important; margin-top: 2px !important; }
    .ins-colleges { max-height: 96px !important; padding: 2px 10px !important; }
    .ins-colleges label { padding: 5px 0 !important; font-size: .86rem !important; }
    .ins-google { margin: .6rem 0 .2rem !important; }
    .ins-card > .text-center.pt-3.mt-3, .ins-card > div.pt-3.mt-3 { padding-top: .4rem !important; margin-top: .4rem !important; }
    .ins-card label.d-flex.mt-3 { margin-top: .5rem !important; font-size: .8rem !important; }
}

/* Short screens (small phones, or a browser with toolbars showing): shrink further and drop what can wait */
@media (max-width: 575.98px) and (max-height: 760px) {
    .ins-lead, .ins-hint:not(#fill-hint) { display: none !important; }
}
@media (max-width: 575.98px) and (max-height: 700px) {
    .premium-card > .text-center p { display: none !important; }
    .premium-card > .text-center.mb-4 { margin-bottom: .2rem !important; }
    .premium-input { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
    .premium-card .mb-3 { margin-bottom: .35rem !important; }
    .premium-card .mb-4 { margin-bottom: .4rem !important; }
}