/* Keep both grid columns inside the available viewport, including their content. */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{height:100dvh;min-height:0;padding:20px;overflow:hidden}
.shell{width:min(1080px,100%);height:min(660px,calc(100dvh - 40px));min-height:0;max-height:calc(100dvh - 40px);grid-template-rows:minmax(0,1fr);--login-pad-y:24px;--login-pad-x:32px}
.brand-lede{padding-top:0;justify-content:center;margin-top:24px;flex:1 1 0;min-height:0}
.brand-lede h1{font-size:clamp(1.8rem,2.8vw,3rem)}
.brand-lede p{font-size:.95rem;line-height:1.55;overflow-wrap:anywhere}
.brand-mark .wordmark{font-size:clamp(1rem,1.2vw,1.38rem)}
.panel{justify-content:center;justify-content:safe center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-height:0}
/* Shared dashboard/PWA rules size main to 100dvh with !important. The login
   main belongs to this card and must follow its grid row instead. */
.shell>.panel{height:100%!important;max-height:100%!important;width:auto!important;margin:0!important;border-radius:0!important;flex:none!important;overflow-y:auto!important}
.panel-align{display:none}
.card{width:min(390px,100%);min-width:0;flex:0 0 auto}
.card form,.role-grid,.field,.input-wrap{min-width:0}
.in{width:100%;max-width:100%;min-width:0}
.foot{overflow-wrap:anywhere}
.card h2{font-size:1.7rem}
.card .sub{font-size:.85rem;margin-bottom:16px}
.roles{margin-bottom:14px}
.role label{min-height:58px;padding:9px 11px;gap:9px}
.role-grid{gap:8px}
.field{margin-bottom:12px}
.field label,.field-label-row{margin-bottom:5px;font-size:.74rem}
.in{min-height:44px;padding-top:10px;padding-bottom:10px}
.submit{min-height:44px;margin-top:0;padding:11px;font-size:.88rem;letter-spacing:.04em}
.sep{margin:14px 0 7px;font-size:.7rem}
.foot{font-size:.72rem;line-height:1.4}
.alert{font-size:.76rem;line-height:1.35;margin-bottom:10px;padding:9px 11px}
@media(max-width:980px){
  body{padding:16px;align-items:center}
  .shell{width:min(500px,100%);height:min(660px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);border-radius:24px}
  .panel{padding:22px}
  .mobile-brand{flex-direction:row;justify-content:center;gap:10px;margin:0 0 16px}
  .mobile-brand-logos{gap:4px}
  .mobile-brand .brand-gt,.mobile-brand .brand-gt img,.mobile-brand .brand-seal{width:38px;height:38px;min-height:0}
  .mobile-brand .wordmark{font-size:.95rem;white-space:nowrap}
  .mobile-brand .tagline{display:none}
  .role-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .role label{flex-direction:column;gap:5px;min-height:66px;padding:8px 3px}
  .role .ic{width:24px;height:24px;border-radius:7px}
  .role .s{display:none}
  .role .t{font-size:.69rem}
}
@media(max-width:560px){
  body{padding:10px}
  .shell{height:min(660px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);border-radius:20px;border:1px solid var(--gt-border);box-shadow:0 16px 48px #01313c18}
  .panel{padding:18px}
  .card h2{font-size:1.5rem}
  .mobile-brand{margin-bottom:12px}
  .role label{min-height:44px;flex-direction:row}
  .role .ic{display:none}
  .card .sub{font-size:.78rem;margin-bottom:12px}
  .roles{margin-bottom:12px}
  .field{margin-bottom:10px}
  .sep{display:none}
  .foot{margin-top:12px;font-size:.65rem}
}
@media(max-height:700px) and (min-width:981px){
  .brand{padding:20px 28px;--login-mark:48px}
  .brand-gt,.brand-gt img,.brand-seal{width:48px;height:48px;min-height:0}
  .brand-lede{margin-top:16px}
  .brand-lede h1{font-size:clamp(1.65rem,2.6vw,2.4rem)}
  .brand-lede .kicker{margin-bottom:10px}
  .brand-lede p{font-size:.85rem;line-height:1.45}
  .brand-lede .rule{margin:14px 0}
  .panel{padding:18px 28px}
  .role-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .role label{flex-direction:column;gap:4px;min-height:62px;padding:7px 3px}
  .role .ic{width:24px;height:24px}
  .role .s{display:none}
  .role .t{font-size:.7rem}
}
@media(max-height:590px){
  body{padding:8px}
  .shell{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
  .panel{padding:14px 18px}
  .mobile-brand{display:none}
  .card h2{font-size:1.35rem}
  .card .sub{margin-bottom:10px}
  .role label{min-height:44px;flex-direction:row;padding:7px 3px}
  .role .ic,.role .s{display:none}
  .roles{margin-bottom:10px}
  .sep{display:none}
  .foot{margin-top:10px}
}
@media(max-height:400px){
  .brand{display:none}
  .shell{grid-template-columns:1fr;width:min(600px,100%)}
  .panel{padding:10px 14px}
  .card h2{font-size:1.2rem}
  .card .sub{font-size:.72rem;margin-bottom:8px}
  .role label{min-height:36px;padding:6px 2px}
  .roles,.field{margin-bottom:8px}
  .in{min-height:40px;padding-top:8px;padding-bottom:8px}
  .submit{min-height:40px;padding:9px}
  .foot{font-size:.62rem;margin-top:8px}
}
@media(max-height:480px) and (min-width:600px){
  #studentFields,#staffFields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field-label-row{gap:4px;flex-wrap:wrap}
  .field label{font-size:.65rem}
  .forgot{font-size:.65rem}
  .card .sub{font-size:.75rem}
}