html.school-embedded,html.school-embedded body{height:100%;background:#f5f6fa}
.school-embedded #app>header{display:none}
.school-embedded #nav{padding:9px 24px;position:sticky;top:0;z-index:10}
.school-embedded #nav [data-act="return-modules"],.school-embedded #nav [data-act^="open-"]{display:none}
.school-embedded-teachers #nav{display:none}
.school-embedded .content{max-width:none;padding:24px 24px 80px}
.school-embedded .login{min-height:min(700px,100dvh)}
.school-embedded .school-leave-dialog{z-index:1000}
@media(max-width:600px){.school-embedded #nav{padding:8px 12px}.school-embedded .content{padding:18px 12px 70px}.school-embedded .login{padding:14px}}

/* Embedded modules own their controls; the school shell cannot style an iframe. */
.school-embedded :is(button,.button){min-height:44px}
.school-embedded select:not([multiple]):is(:not([size]),[size="0"],[size="1"]){
  -webkit-appearance:none;appearance:none;padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2363768c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
}
.school-embedded #teacherModulesForm>label select{min-height:44px;padding-inline-end:40px}
@media(forced-colors:active){
  .school-embedded select:not([multiple]):is(:not([size]),[size="0"],[size="1"]){-webkit-appearance:auto;appearance:auto;background-image:none;padding-inline-end:12px}
  .school-embedded #teacherModulesForm>label select{padding-inline-end:12px}
}