/* Edge-to-edge campus photo with a comfortably sized, centered sign-in card. */
.campus-login {margin:0;min-height:100vh;background:#172a44;}
.campus-login .login-wrap {
  --edge:clamp(20px,5vw,72px);
  isolation:isolate;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(64px,1fr) auto minmax(64px,1fr);
  min-height:100vh;min-height:100svh;padding:20px var(--edge);box-sizing:border-box;
}

/* Fill every screen edge while preserving the photo proportions. */
.campus-login .login-campus-photo {
  position:fixed;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;background:#172a44;
}
/* Light tint over the whole photo, darker only behind the header so it stays readable. */
.campus-login .login-wrap::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,22,44,.6) 0,rgba(8,22,44,.14) 26%,rgba(8,22,44,.06) 100%),
    linear-gradient(90deg,rgba(8,22,44,.3),rgba(8,22,44,0) 55%);
}

/* Header */
.campus-brand {display:flex;align-items:center;gap:12px;color:#fff;align-self:start;justify-self:start;text-shadow:0 1px 8px rgba(4,15,35,.5);}
.campus-brand-logo {width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(4,15,35,.32);}
.campus-brand-logo img {width:100%;height:100%;object-fit:cover;}
.campus-brand div>strong,.campus-brand div>span {display:block;}
.campus-brand strong {font-size:14px;font-weight:600;line-height:1.4;}
.campus-brand div>span {font-size:11px;line-height:1.5;color:rgba(255,255,255,.88);}

/* Equal outer grid tracks keep the card centered independently of the header. */
.campus-login .login-panel {grid-row:2;width:100%;min-width:0;display:flex;align-items:center;justify-content:center;padding:16px 0;background:transparent;}
.campus-login .login-card {
  box-sizing:border-box;width:100%;max-width:420px;padding:30px 32px 28px;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:18px;box-shadow:0 24px 64px rgba(4,15,35,.38),0 4px 14px rgba(4,15,35,.16);
  animation:campus-card-enter .35s ease-out both;
}
.campus-login .login-card h2 {font-size:24px;font-weight:700;line-height:1.2;margin:0 0 4px;text-align:center;color:#172c50;letter-spacing:-.4px;}
.campus-login .login-card>p.login-sub {font-size:13px;line-height:1.5;margin:0 0 18px;text-align:center;color:#5d6b82;}

/* Form */
.campus-login .field {margin-bottom:12px;}
.campus-login .field label {font-size:13px;margin-bottom:5px;color:#31405c;}
.campus-login .label-row {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px;}
.campus-login .label-row label {margin:0;}
.campus-login .forgot {font-size:12px;color:#365fa5;border-radius:4px;}
.campus-login .forgot:focus-visible {outline:2px solid #365fa5;outline-offset:2px;}
.campus-login .field-input {border-radius:10px;min-height:44px;background:#fff;border-color:#d5dde9;}
.campus-login .field-input input {min-width:0;width:100%;font-size:14px;padding-top:9px;padding-bottom:9px;}
.campus-login .field-input input::placeholder {color:#98a4b6;}
.campus-login .field-input:focus-within {border-color:#365fa5;box-shadow:0 0 0 3px rgba(54,95,165,.15);}
.campus-login .login-card .btn-block {
  min-height:44px;margin-top:18px;border-radius:10px;background:#365fa5;border-color:#365fa5;
  font-size:14px;font-weight:600;box-shadow:0 6px 14px rgba(54,95,165,.24);
}
.campus-login .login-card .btn-block:hover {background:#284d8b;border-color:#284d8b;}
.campus-login .login-card .btn-block:focus-visible {outline:3px solid rgba(54,95,165,.4);outline-offset:2px;}
.campus-login .login-divider {margin:14px 0;font-size:12px;letter-spacing:0;color:#7a879a;}
.campus-login .login-card .google-btn {min-height:43px;border-radius:10px;border-color:#d5dde9;font-size:13px;}
.campus-login .alert {font-size:12.5px;line-height:1.5;padding:9px 12px;margin-bottom:12px;border-radius:10px;overflow-wrap:anywhere;}

@keyframes campus-card-enter {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Short laptop screens: tighten spacing so the whole form still fits without scrolling. */
@media(max-height:660px) {
  .campus-login .login-wrap {padding-top:14px;padding-bottom:14px;}
  .campus-brand-logo {width:38px;height:38px;}
  .campus-login .login-panel {padding:10px 0;}
  .campus-login .login-card {padding:20px 24px 18px;}
  .campus-login .login-card>p.login-sub {margin-bottom:12px;}
  .campus-login .field {margin-bottom:9px;}
  .campus-login .field-input {min-height:40px;}
  .campus-login .login-card .btn-block {margin-top:14px;min-height:42px;}
  .campus-login .login-divider {margin:10px 0;}
  .campus-login .login-card .google-btn {min-height:40px;}
}
@media(max-width:600px) {
  .campus-login .login-wrap {--edge:16px;padding-top:16px;padding-bottom:16px;}
  .campus-brand {gap:10px;}
  .campus-brand strong {font-size:12.5px;}
  .campus-brand div>span {font-size:10px;max-width:240px;}
  .campus-login .login-panel {justify-content:center;padding:14px 0;}
  .campus-login .login-card {max-width:420px;padding:24px 22px 22px;border-radius:16px;}
}
@media(prefers-reduced-motion:reduce) {.campus-login .login-card {animation:none;}}

/* Recovery link follows the primary sign-in action. */
.campus-login .login-forgot {margin-top:12px;text-align:center;line-height:1.5;}
.campus-login .login-forgot .forgot {display:inline-block;padding:4px 8px;}

/* University and college branding on login */
.campus-brand-logos{display:flex;align-items:center;gap:10px;flex:none}
.campus-brand-logos .campus-brand-logo img{object-fit:contain}

/* Password recovery pages share the login background and branding. */
.campus-recovery .login-card {max-width:460px;}
.campus-recovery .login-back-link {margin:15px 0 0;text-align:center;}
.campus-recovery .login-card .form-text {font-size:12px;}
.campus-recovery .login-card .login-sub {margin-bottom:20px;}
@media(max-width:600px){.campus-recovery .login-card{max-width:100%;}}

/* Keep the password visibility control centered within the login field. */
.campus-login .field-input .toggle-pass {
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  min-width:44px;
  min-height:0;
  padding:0;
  line-height:1;
}
.campus-login .field-input .toggle-pass i {
  display:block;
  line-height:1;
}