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

/* ---------------------------------------------------------------------------------------------------------------
   Look of the sign-in, sign-up and password pages (every screen size)
   A clear white card on a soft green gradient, inputs with a visible edge and a green glow when focused.
   The card no longer jumps when touched: on a phone a tap leaves :hover on, and a form that moves under the finger is hard to use.
   --------------------------------------------------------------------------------------------------------------- */
body { background: radial-gradient(130% 90% at 50% -10%, #6ee7b7 0%, #10b981 42%, #047857 100%) fixed !important; }
.premium-card, .ins-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 18px 50px rgba(4, 78, 59, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.premium-card:hover { transform: none !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 18px 50px rgba(4, 78, 59, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08) !important; border-color: rgba(255, 255, 255, 0.85) !important; }
.premium-input { background: #f1f5f9 !important; border: 1.5px solid #e2e8f0 !important; color: #0f172a !important; backdrop-filter: none !important; }
.premium-input::placeholder { color: #64748b; opacity: 1; }
.premium-input:focus { background: #ffffff !important; border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18) !important; transform: none !important; }
.premium-btn:hover { transform: none !important; }

/* "Signed up with Google?" explanation: one short line that opens when tapped */
.auth-note { margin: 0 0 .6rem; text-align: center; }
.auth-note summary { display: inline-block; cursor: pointer; font-size: .8rem; font-weight: 600; color: #047857; list-style: none; padding: 4px 8px; }
.auth-note summary::-webkit-details-marker { display: none; }
.auth-note summary::after { content: " \25BE"; }
.auth-note[open] summary::after { content: " \25B4"; }
.auth-note p { margin: .15rem 0 0 !important; font-size: .78rem !important; line-height: 1.45 !important; color: #475569; }

/* The appearance button must not sit on top of the card on a phone */
@media (max-width: 575.98px) {
    body:has(.premium-card) .lt-fab, body:has(.ins-card) .lt-fab { left: auto !important; right: 10px !important; bottom: 10px !important; width: 34px !important; height: 34px !important; font-size: .9rem !important; }
}

/* Laptop screens are short (about 650-800px of page once the browser toolbars are counted): tighten the card so nothing scrolls */
@media (min-width: 576px) and (max-height: 820px) {
    .premium-card { padding: 1.3rem 2rem !important; margin: 12px auto !important; }
    .premium-card > .text-center.mb-4 { margin-bottom: .7rem !important; padding-bottom: 0 !important; }
    .premium-card > .text-center a span { font-size: 1.5rem !important; }
    .premium-card .mb-4 { margin-bottom: .75rem !important; }
    .premium-card .mb-3 { margin-bottom: .6rem !important; }
    .premium-input { padding-top: 10px !important; padding-bottom: 10px !important; }
    .premium-btn { padding-top: 11px !important; padding-bottom: 11px !important; }
    .premium-card > .text-center p { margin-bottom: 0 !important; }
}
@media (min-width: 576px) and (max-height: 700px) {
    .premium-card > .text-center p { display: none !important; }
    .premium-card { padding: 1rem 2rem !important; }
}

/* Instructor sign-up is the longest form: on short screens the explanation and badge give way so the fields and button stay in view */
@media (max-width: 575.98px) and (max-height: 620px) {
    .ins-badge { display: none !important; }
    .ins-title { font-size: 1.1rem !important; margin: 4px 0 2px !important; }
    .ins-card { padding: 10px 12px !important; }
    .ins-card > .text-center a span { font-size: 1.15rem !important; }
    .ins-google { margin: .4rem 0 .1rem !important; }
}
@media (min-width: 576px) and (max-height: 900px) {
    .ins-card { padding: 1.2rem 1.6rem !important; }
    .ins-card > .text-center { margin-bottom: .5rem !important; }
    .ins-lead { display: none !important; }
    .ins-badge { margin-top: 8px !important; padding: 4px 12px !important; }
    .ins-title { margin: 8px 0 4px !important; font-size: 1.4rem !important; }
    .ins-tabs { margin-bottom: .6rem !important; }
    .ins-label { margin: .55rem 0 .25rem !important; }
    .ins-input { padding-top: 8px !important; padding-bottom: 8px !important; }
    .ins-colleges { max-height: 84px !important; }
    .ins-hint:not(#fill-hint) { display: none !important; }
    .ins-google { margin: .8rem 0 .3rem !important; }
}
/* Login on a very short laptop window (about 600px): drop the sub-title so the card fits */
@media (min-width: 576px) and (max-height: 640px) {
    .premium-card > .text-center > div[style*="letter-spacing:1.6px"] { display: none !important; }
    .premium-card > .text-center a > div { padding: 3px 12px !important; }
}