/* Student view: phone-first touch layout. */
@media(max-width:540px){body{font-size:16px}.shell{padding:15px 14px 100px!important;max-width:540px}.topbar{gap:8px;align-items:center}.brand{font-size:16px;line-height:1.3}.brand-mark{width:23px;height:23px}.class-tag{font-size:12px;padding:6px 9px;white-space:nowrap}.shell>section[style*="display:flex"]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:14px!important}.shell>section[style*="display:flex"] label{font-size:12px!important}.shell>section[style*="display:flex"] select{width:100%;font-size:15px!important}.progress-wrap{padding:14px 0 18px!important}.rubric-head{font-size:13px!important;padding:15px 0 10px!important}.section-label{font-size:21px!important;padding:11px 13px!important;margin-top:18px!important}.criterion{padding:19px 0!important;gap:10px!important}.criterion-title{gap:10px!important}.criterion-title h3{font-size:19px!important}.criterion-title p{font-size:12px!important}.number{font-size:17px!important}.choices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.choices button{min-height:78px!important;padding:9px 5px!important}.choices b{font-size:20px!important;margin-bottom:5px!important}.choices span{font-size:13px!important;white-space:normal!important;line-height:1.35!important}.reflection{padding:28px 0 12px!important}.field textarea{height:105px!important;font-size:16px!important}footer{position:fixed!important;z-index:20;left:0;right:0;bottom:0;padding:12px 16px!important;background:#f6f4ee!important;box-shadow:0 -4px 14px #172a3516}.total strong{font-size:24px!important}#submit{padding:13px 16px!important;font-size:14px!important}}
@media(max-width:540px){.progress-copy{font-size:17px!important}.progress-copy strong{font-size:18px!important}.rubric-head{font-size:17px!important}}
@media(max-width:540px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.choices button{min-height:126px!important;padding:12px 8px!important}.choices span{font-size:15px!important;line-height:1.45!important;overflow-wrap:anywhere}.criterion-title h3{font-size:21px!important;line-height:1.4}.reflection{padding-bottom:22px!important}}@media(max-width:360px){.choices{grid-template-columns:1fr!important}.choices button{min-height:104px!important}}

/* The sign-in layer is shown before the responsive main page.  Keep it
   independently fluid so a phone never gets a horizontally clipped form. */
#loginGate{
  width:100vw!important;
  max-width:100vw!important;
  min-width:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:16px!important;
  place-items:center!important;
}
#loginGate #loginForm{
  width:calc(100vw - 32px)!important;
  max-width:430px!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0 auto!important;
}
#loginGate input,#loginGate button{
  box-sizing:border-box!important;
  max-width:100%!important;
}
@media(max-width:540px){
  #loginGate{align-items:start!important;padding:24px 16px max(24px,env(safe-area-inset-bottom))!important}
  #loginGate #loginForm{width:calc(100vw - 32px)!important;padding:28px 22px!important;margin:clamp(26px,9vh,68px) auto!important}
  #loginGate h1{font-size:28px!important;line-height:1.25!important}
  #loginGate label{font-size:18px!important}
  #loginGate input{width:100%!important;font-size:16px!important;padding:14px!important}
  #loginGate button{font-size:16px!important;padding:14px 12px!important}
}

/* Keep the signed-in student's identity visible on phones. */
@media(max-width:720px){
  .topbar .class-tag{
    display:inline-flex!important;
    align-items:center;
    width:100%;
    margin:4px 0 0!important;
    white-space:normal!important;
    font-size:15px!important;
    line-height:1.45;
  }
}