/* MathVenture Login Proportional Responsive v2.38
   Scope: login-card proportions and responsive sizing only.
   Loaded after v2.37 so it corrects the compact-height mobile edge case
   without changing authentication, routing, artwork, or other app views. */

/* The role is inferred after login; keep the entry card visually simple. */
#view-login #login-mode-label {
  display: none !important;
}

/* Desktop / laptop: keep the card substantial but not oversized. */
#view-login .mv-login-panel {
  width: clamp(430px, 33vw, 500px) !important;
  min-width: 0 !important;
  padding-left: clamp(22px, 2.6vw, 38px) !important;
  padding-right: clamp(22px, 2.6vw, 38px) !important;
}

#view-login .mv-login-card {
  width: clamp(360px, 28vw, 410px) !important;
  max-width: 100% !important;
  padding: clamp(22px, 2.1vw, 28px) !important;
}

#view-login .mv-login-card-heading {
  margin-bottom: clamp(16px, 2.2vh, 21px) !important;
}

#view-login .mv-login-card-heading h1 {
  font-size: clamp(1.55rem, 2vw, 1.85rem) !important;
}

/* Tablet: preserve a balanced floating card without taking over the artwork. */
@media (min-width: 701px) and (max-width: 1100px) {
  #view-login .mv-login-panel {
    width: clamp(390px, 44vw, 455px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #view-login .mv-login-card {
    width: min(100%, 390px) !important;
    padding: clamp(20px, 2.5vw, 25px) !important;
  }
}

/* Portrait phones / compact tablets: use nearly the full available width.
   This deliberately overrides the old 48vw short-screen rule. */
@media (max-width: 700px) {
  #view-login .mv-login-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #view-login .mv-login-card {
    width: min(calc(100vw - 28px), 390px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: clamp(17px, 5vw, 22px) !important;
    border-radius: 18px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: clamp(12px, 2vh, 16px) !important;
  }

  #view-login .mv-login-card-heading h1 {
    font-size: clamp(1.38rem, 6.3vw, 1.65rem) !important;
  }

  #view-login .mv-login-form {
    gap: clamp(10px, 1.7vh, 13px) !important;
  }

  #view-login .mv-login-input-wrap input,
  #view-login .mv-login-primary-btn {
    min-height: clamp(44px, 6.3vh, 49px) !important;
  }

  #view-login .mv-login-teacher-link,
  #view-login .mv-login-back-btn {
    min-height: clamp(41px, 5.8vh, 45px) !important;
  }
}

/* Short portrait screens should become vertically compact, not horizontally narrow. */
@media (max-width: 700px) and (max-height: 740px) and (orientation: portrait) {
  #view-login .mv-login-panel {
    padding-top: 64px !important;
    padding-bottom: 8px !important;
  }

  #view-login .mv-login-card {
    width: min(calc(100vw - 24px), 380px) !important;
    padding: 15px 17px !important;
  }

  #view-login .mv-login-card-heading {
    margin-bottom: 9px !important;
  }

  #view-login .mv-login-card-heading h1 {
    font-size: 1.3rem !important;
  }

  #view-login .mv-login-form {
    gap: 8px !important;
  }

  #view-login .mv-login-field label {
    margin-bottom: 3px !important;
    font-size: 11px !important;
  }

  #view-login .mv-login-input-wrap input,
  #view-login .mv-login-primary-btn {
    min-height: 41px !important;
  }

  #view-login .mv-login-admin-switch {
    margin-top: 8px !important;
  }

  #view-login .mv-login-divider {
    margin-bottom: 7px !important;
  }

  #view-login .mv-login-teacher-link,
  #view-login .mv-login-back-btn {
    min-height: 39px !important;
  }
}

/* True landscape phones / very short split-screen windows can use a compact
   side card, but only when the viewport is actually landscape. */
@media (max-height: 560px) and (orientation: landscape) {
  #view-login .mv-login-panel {
    width: min(440px, 48vw) !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #view-login .mv-login-card {
    width: min(390px, 100%) !important;
    margin: 0 auto !important;
    padding: 12px 15px !important;
  }
}

/* Very narrow phones: preserve comfortable edge gutters. */
@media (max-width: 380px) {
  #view-login .mv-login-panel {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #view-login .mv-login-card {
    width: calc(100vw - 20px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}