/* SchoolOS login mascots: entrances, expressions and authenticated departure. */
:root[data-theme="light"] {
  --creatures-illustration:#f2eae9;
  --creatures-panel:#fffdfd;
  --creatures-heading:#252127;
  --creatures-soft:#817881;
  --creatures-border:#e1d7da;
  --creatures-field:#fff;
  --creatures-action:#242226;
  --creatures-action-text:#fff;
  --creatures-action-hover:#403a42;
}
:root[data-theme="dark"] {
  --creatures-illustration:#2b2530;
  --creatures-panel:#1d1920;
  --creatures-heading:#f5f0f6;
  --creatures-soft:#b7abb8;
  --creatures-border:#564959;
  --creatures-field:#28232b;
  --creatures-action:#eae1ed;
  --creatures-action-text:#211c25;
  --creatures-action-hover:#fff;
}
.auth-page--creatures {background:var(--creatures-panel);}
.auth-page--creatures .auth-shell--creatures {
  display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);
  max-width:none;min-height:100vh;padding:0;
}
.auth-page--creatures .auth-illustration {
  min-width:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;
  padding:clamp(26px,4vw,58px) clamp(28px,5vw,78px);
  background:var(--creatures-illustration);
}
.auth-illustration__brand {
  display:inline-flex;align-items:center;gap:12px;
  font-size:1.28rem;font-weight:800;letter-spacing:-.055em;
  color:var(--creatures-heading);
}
.auth-illustration__brand-mark {
  display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:13px;background:#6541f3;color:#fff;
  font-size:1.15rem;letter-spacing:0;
}
.auth-illustration__brand-dot{color:#7050ee;}
.auth-illustration__scene{
  display:grid;place-items:center;flex:1 1 auto;
  min-height:300px;width:100%;padding:10px 0 0;
}
.auth-characters{display:block;width:min(100%,590px);overflow:visible;}
.auth-illustration__footer{color:var(--creatures-heading);}
.auth-illustration__footer p{
  margin:0 0 8px;font-size:clamp(1.2rem,2vw,1.55rem);
  font-weight:700;letter-spacing:-.035em;
}
.auth-illustration__footer span{color:var(--creatures-soft);font-size:.95rem;}
.auth-page--creatures .auth-card--creatures {
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:none;margin:0;
  padding:86px clamp(26px,7vw,110px);
  border:0;border-radius:0;box-shadow:none;
  background:var(--creatures-panel);
}
.auth-card__content{width:100%;max-width:400px;}
.auth-page--creatures .auth-kicker{color:#714af1;letter-spacing:.1em;}
.auth-page--creatures h1{
  color:var(--creatures-heading);font-size:clamp(2.25rem,3.2vw,3.35rem);
  font-weight:800;letter-spacing:-.055em;
}
.auth-page--creatures .auth-intro{margin-bottom:34px;color:var(--creatures-soft);}
.auth-page--creatures .auth-form{gap:9px;}
.auth-page--creatures .auth-form label{color:var(--creatures-heading);font-size:.91rem;}
.auth-page--creatures .auth-form input:not([type="hidden"]){
  min-height:50px;margin:0 0 14px;padding:13px 15px;
  border:1px solid var(--creatures-border);border-radius:11px;
  background:var(--creatures-field);color:var(--creatures-heading);font-size:1rem;
}
.auth-page--creatures .auth-form input:not([type="hidden"]):hover{border-color:#9b90a2;}
.auth-page--creatures .auth-form input:not([type="hidden"]):focus-visible{border-color:#6b4aff;}
.auth-page--creatures .auth-form button{
  min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:8px;border:0;border-radius:11px;
  background:var(--creatures-action);color:var(--creatures-action-text);
  transition:background .18s ease,transform .18s ease;
}
.auth-page--creatures .auth-form button:hover{
  background:var(--creatures-action-hover);transform:translateY(-1px);
}
.auth-page--creatures .auth-form button span{font-size:1.25rem;}
.auth-card__note{margin:26px 0 0;color:var(--creatures-soft);text-align:center;font-size:.84rem;}
.auth-login-status{min-height:2.8em;margin:20px 0 0;color:var(--creatures-soft);text-align:center;font-size:.84rem;line-height:1.5;}
.auth-page--creatures .auth-error[hidden]{display:none;}
.auth-page--creatures .auth-password{position:relative;margin-bottom:14px;}
.auth-page--creatures .auth-password input:not([type="hidden"]){margin-bottom:0;padding-right:58px;}
.auth-page--creatures .auth-form .auth-password-toggle{
  position:absolute;right:6px;top:6px;min-height:38px;min-width:40px;margin:0;
  padding:8px;border-radius:7px;background:transparent;color:var(--creatures-soft);font-size:.78rem;
}
.auth-page--creatures .auth-form .auth-password-toggle:hover{background:var(--theme-button);color:var(--creatures-heading);transform:none;}
.auth-password-slash{display:none;}
.auth-password-toggle[aria-pressed="true"] .auth-password-slash{display:block;}
.auth-page--creatures .auth-form .auth-password-toggle[hidden]{display:none;}
.auth-characters .mascot{cursor:pointer;outline:none;}
.auth-characters .mascot-sleep{fill:var(--creatures-soft);font-family:Arial,sans-serif;font-weight:700;pointer-events:none;}
.auth-characters .mascot-emotion{fill:var(--creatures-heading);font-family:Arial,sans-serif;font-size:24px;font-weight:700;text-anchor:middle;pointer-events:none;}
.auth-characters #schoolos-creature-orange .mascot-emotion{fill:#e26a79;}
.auth-characters #schoolos-creature-purple .mascot-emotion{fill:#9977ff;}
.auth-characters .mascot-placard text{fill:#382e2d;font:700 14px 'Comic Sans MS','Segoe Print',sans-serif;letter-spacing:-.4px;}
.auth-page--creatures [hidden]{display:none!important;}
.auth-page--creatures #schoolos-auth-panel:focus{outline:none;}
.auth-characters .mascot:focus-visible>.body-outline{stroke:var(--theme-focus);stroke-width:3;}
.auth-characters #schoolos-farewell text{fill:var(--creatures-soft);}
.auth-page--creatures .auth-form .submit:disabled{opacity:.75;cursor:wait;transform:none;}
.auth-page--creatures .auth-theme-action{top:24px;right:24px;}
@media(max-width:850px){
  .auth-page--creatures .auth-shell--creatures{grid-template-columns:1fr;}
  .auth-page--creatures .auth-illustration{
    min-height:0;padding:22px 26px 8px;
  }
  .auth-illustration__scene{flex:0 0 auto;min-height:0;max-height:none;padding:0;}
  .auth-characters{width:min(100%,345px);}
  .auth-illustration__footer{display:none;}
  .auth-page--creatures .auth-card--creatures{padding:44px 26px 64px;}
}
@media(max-width:420px){
  .auth-page--creatures .auth-illustration{min-height:0;padding:18px 20px 0;}
  .auth-characters{width:min(100%,310px);}
  .auth-page--creatures .auth-theme-action{top:18px;right:18px;}
}
@media(prefers-reduced-motion:reduce){
  .auth-page--creatures .auth-form button{transition:none!important;}
}