/* CircleTime sign-in: intentionally separate from classroom home styling. */
.login-page { min-height:100vh; display:flex; flex-direction:column; background:#f8f9f7; }
.login-page form { min-height:100vh; display:flex; flex-direction:column; }
.login-header { background:linear-gradient(105deg,#e7f7f7 0%,#eef4fd 58%,#f7ecfa 100%); border-bottom:1px solid #d4e4ea; }
.login-header-inner { max-width:1230px; margin:auto; min-height:90px; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.header-app-name { color:#457b9a; font-weight:800; font-size:20px; letter-spacing:.4px; line-height:1.2; }
.login-main { width:100%; max-width:1180px; margin:32px auto; padding:0 20px; flex:1; display:flex; align-items:center; }
.login-layout { width:100%; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); align-items:stretch; background:#fff; border:1px solid #e5ecef; border-radius:26px; box-shadow:0 17px 55px rgba(29,57,79,.09); overflow:hidden; }
.login-intro { min-height:530px; background:linear-gradient(125deg,#fff3ca 0%,#fff9df 46%,#e5f7f2 100%); position:relative; padding:54px 50px 22px; overflow:hidden; }
.intro-eyebrow { font-size:11px; font-weight:800; letter-spacing:2px; color:#c57948; }
.login-intro h1 { color:#224a7b; font-size:clamp(32px,3.7vw,48px); letter-spacing:-1.7px; line-height:1.12; margin:15px 0 17px; max-width:450px; }
.login-intro h1 span { color:#279d7b; }
.login-intro p { color:#56788c; font-size:16px; max-width:420px; line-height:1.65; margin:0; }
.login-illustration { position:absolute; right:0; bottom:-3px; width:63%; height:51%; object-fit:contain; object-position:right bottom; }
.intro-footnote { position:absolute; left:50px; bottom:25px; font-size:12px; color:#648b8c; z-index:1; max-width:39%; }
.login-panel { display:flex; flex-direction:column; justify-content:center; padding:42px 50px; }
.login-card { max-width:410px; width:100%; margin:auto; }
.login-card-top { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.login-lock { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:14px; font-size:20px; background:#eaf4ff; }
.login-eyebrow { color:#52718c; font-size:11px; font-weight:800; letter-spacing:1.6px; }
.login-card h2 { color:#173f70; font-size:32px; line-height:1.1; margin:12px 0 9px; letter-spacing:-.8px; }
.login-description { margin:0 0 28px; color:#59758d; font-size:14px; }
.login-field { margin-bottom:20px; }
.login-field label { display:block; font-size:13px; color:#204665; font-weight:bold; margin-bottom:7px; }
.login-input { width:100%; min-height:50px; padding:12px 14px; border-radius:11px; font-size:15px; border:1px solid #cad9e5; color:#163b5d; background:#fff; outline:none; }
.login-input:focus { border-color:#2884cd; box-shadow:0 0 0 3px rgba(40,132,205,.13); }
.password-row { position:relative; }
.password-row .login-input { padding-right:75px; }
.password-toggle { position:absolute; top:6px; right:7px; border:0; border-radius:8px; height:38px; padding:0 12px; color:#28669a; background:#eaf3f9; font-size:12px; font-weight:700; }
.password-toggle:hover { background:#dbeaf5; }
.login-submit { margin-top:4px; border:0; width:100%; height:52px; border-radius:11px; background:#2374c5; color:white; font-size:16px; font-weight:bold; box-shadow:0 3px 0 #195b9a; cursor:pointer; }
.login-submit:hover { background:#1967b5; }
.login-submit:focus-visible, .password-toggle:focus-visible { outline:3px solid #8fbfe8; outline-offset:2px; }
.login-hint { margin-top:24px; border:1px solid #d8e9f3; background:#f2f8fc; padding:13px 14px; border-radius:10px; color:#59758b; font-size:12px; line-height:1.55; }
.login-hint strong { color:#215577; }
.login-error { display:block; border:1px solid #f3b9c4; background:#fff0f1; color:#9a2549; border-radius:10px; padding:11px 12px; margin:0 0 17px; font-size:13px; }
.login-help { margin:22px auto 0; text-align:center; color:#7b8fa1; font-size:12px; }
.login-footer { font-size:12px; color:#8aa0b0; text-align:center; padding:10px 16px 22px; }
.mast-actions { display:flex; align-items:center; gap:12px; }
.signout { display:inline-block; padding:8px 4px; font-size:12px; color:#4b6884; font-weight:bold; white-space:nowrap; }
.signout:hover { color:#146bb8; }
@media(max-width:850px) {
  .login-main { margin:20px auto; }
  .login-layout { grid-template-columns:1fr; }
  .login-intro { min-height:255px; padding:29px 32px; }
  .login-intro h1 { font-size:36px; max-width:60%; }
  .login-intro p { max-width:58%; font-size:14px; }
  .login-illustration { width:46%; height:90%; right:0; bottom:0; }
  .intro-footnote { display:none; }
  .login-panel { padding:34px 32px; }
}
@media(max-width:560px) {
  .login-header-inner { min-height:75px; padding:12px 16px; }
  .login-header .brand-title { font-size:18px; }
  .login-header .brand .apple { font-size:32px; }
  .header-app-name { font-size:17px; }
  .login-main { padding:0 12px; margin:14px auto; }
  .login-layout { border-radius:20px; }
  .login-intro { min-height:220px; padding:24px 22px; }
  .login-intro h1 { font-size:28px; max-width:64%; margin:9px 0; }
  .login-intro p { font-size:12px; max-width:61%; }
  .login-illustration { width:48%; height:85%; }
  .login-panel { padding:26px 22px; }
  .login-card h2 { font-size:28px; }
  .login-description { margin-bottom:22px; }
  .mast-actions { gap:8px; }
  .mast-actions .signout { font-size:11px; }
}

/* School-neutral branding: original schoolhouse artwork stays in the hero.
   Display the CircleTime logo in place of the upper-right text. */
.login-header .brand { min-width:0; margin-left:auto; text-align:right; }
.login-header .brand-title { font-size:30px; line-height:1.12; letter-spacing:-.65px; }
.login-header .brand-sub { font-size:12px; color:#56818a; }
.login-header-inner { min-height:132px; padding-top:8px; padding-bottom:8px; }
.header-circle-logo { display:block; flex:0 0 auto; width:158px; max-width:42vw; height:auto; object-fit:contain; object-position:left center; background:#fff; border:1px solid #deebef; border-radius:16px; padding:6px; box-shadow:0 4px 15px rgba(32,83,115,.08); }
.login-footer { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 16px 24px; }
.login-legal-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; }
.login-legal-links a { font-size:12px; font-weight:600; color:#356c91; text-decoration:underline; text-underline-offset:2px; }
.login-legal-links a:focus-visible { outline:2px solid #2374c5; outline-offset:4px; }
@media (max-width:560px) {
  .login-header-inner { min-height:97px; padding:7px 14px; gap:8px; }
  .login-header .brand-title { font-size:20px; line-height:1.14; }
  .login-header .brand-sub { font-size:11px; }
  .header-circle-logo { width:112px; max-width:38vw; }
}
@media (max-width:370px) {
  .login-header .brand-title { font-size:18px; }
  .login-header .brand-sub { font-size:10px; }
  .header-circle-logo { width:100px; }
}