/* Signed-out screens: sign in, first-time setup, choose a password.
   One fluid base size (the body font-size) drives everything below in em, so the card, the type and the scenery scale together
   from a small phone up to a very large display. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#03307a}
body.auth-body{
  margin:0;min-height:100vh;min-height:100svh;overflow-x:hidden;color:#fff;
  font:400 clamp(15px,calc(11px + .45vw),24px)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(120% 100% at 52% 58%,#1a7bea 0%,#0b63cc 32%,#05459f 62%,#022b6b 100%);
  background-attachment:fixed;
}
a{color:#fff}
img{max-width:100%}

/* ---- the picture behind the card ---- */
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 55%,rgba(0,0,0,0) 55%,rgba(0,12,48,.5) 100%)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.blob{position:absolute;display:block;border-radius:50%}
.blob.b1{left:-18vmax;top:-26vmax;width:62vmax;height:62vmax;background:radial-gradient(closest-side,rgba(118,188,255,.5),rgba(118,188,255,0))}
.blob.b2{right:-24vmax;bottom:-30vmax;width:74vmax;height:74vmax;background:radial-gradient(closest-side,rgba(0,16,70,.62),rgba(0,16,70,0))}
.sh{position:absolute;display:block;left:calc(50% + var(--x,0em));top:calc(50% + var(--y,0em));width:var(--w,10em);height:auto;overflow:visible;transform-origin:50% 50%;animation:afloat var(--s,12s) ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}
.sh.dk{opacity:.85}
@keyframes afloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-.9em,0) rotate(var(--r,2deg))}}

/* ---- the card ---- */
.auth{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:max(1.5em,env(safe-area-inset-top)) max(1em,env(safe-area-inset-right)) max(1.5em,env(safe-area-inset-bottom)) max(1em,env(safe-area-inset-left))}
.glass{position:relative;width:min(100%,27em);padding:2.2em 2.4em 2em;border-radius:1.6em;
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.05)),rgba(4,58,150,.4);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 2.2em 4.5em -1.4em rgba(0,14,60,.65),inset 0 1px 0 rgba(255,255,255,.35)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(8,60,140,.82)}}
.alogo{display:block;width:6.4em;height:auto;margin:0 0 1.1em}
.aflash{margin:0 0 1.1em;padding:.7em .9em;border-radius:.6em;background:rgba(255,255,255,.93);color:#05306d;font-size:.92em;font-weight:600}

.ah{margin:0 0 .35em;font-size:2.7em;line-height:1.08;font-weight:800;letter-spacing:-.02em}
.asub{margin:0 0 1.1em;font-size:.92em;color:rgba(255,255,255,.9)}

/* ---- the form ---- */
.aform{margin:1em 0 0}
.fld{margin:0 0 1em}
.fld label{display:block;margin:0 0 .3em;font-size:1.05em;font-weight:500;text-shadow:0 1px 2px rgba(0,20,70,.35)}
.fld input{display:block;width:100%;height:2.75em;padding:0 1em;border:2px solid transparent;border-radius:.55em;background:#fff;color:#0d2244;font:inherit;font-size:max(16px,1em);outline:0;appearance:none;-webkit-appearance:none}
.fld input::placeholder{color:#66758b;opacity:1}
.fld input:focus{border-color:#7fc0ff;box-shadow:0 0 0 .22em rgba(127,192,255,.45)}
.pw{position:relative;display:block}
.pw input{padding-right:3em}
.eye{position:absolute;top:50%;right:.35em;transform:translateY(-50%);display:grid;place-items:center;width:2.3em;height:2.3em;padding:0;border:0;border-radius:.45em;background:none;color:#66758b;cursor:pointer}
.eye:hover,.eye:focus-visible{color:#05306d;background:#eaf2fc;outline:0}
.eye .e-off{display:none}.eye.on .e-off{display:block}.eye.on .e-on{display:none}
.eye svg{width:1.3em;height:1.3em}

.flink{display:inline-block;margin:-.4em 0 1em;font-size:.88em;color:#fff;text-decoration:none;opacity:.95}
.flink:hover,.flink:focus-visible{text-decoration:underline;opacity:1}
.abtn{display:block;width:100%;min-height:2.9em;margin:.2em 0 0;padding:.5em 1em;border:0;border-radius:.55em;background:#052b5f;color:#fff;font:inherit;font-size:1.15em;font-weight:700;cursor:pointer;box-shadow:0 .5em 1.1em -.5em rgba(0,10,50,.8);transition:background .15s,transform .15s}
.abtn:hover{background:#06357a}
.abtn:active{transform:translateY(1px)}
.abtn:focus-visible,.sbtn:focus-visible,.glass a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- sign in with another account ---- */
.or{display:flex;align-items:center;gap:.8em;margin:1.2em 0 .9em;font-size:.95em;color:rgba(255,255,255,.95)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.6em,1fr));gap:.8em}
.socials.one{grid-template-columns:1fr;margin-top:1.2em}
.sbtn{display:flex;align-items:center;justify-content:center;gap:.7em;min-height:2.6em;padding:.4em .8em;border-radius:.55em;background:#fff;color:#0d2244;text-decoration:none;font-weight:600;box-shadow:0 .4em 1em -.5em rgba(0,10,50,.7);transition:transform .15s,box-shadow .15s}
.sbtn:hover{transform:translateY(-2px);box-shadow:0 .7em 1.2em -.6em rgba(0,10,50,.8)}
.sbtn svg{flex:none;width:1.35em;height:1.35em}
.sbtn.wide{min-height:2.9em}
.pi{display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:#05306d;color:#fff;font-size:.8em;font-weight:700}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.alt{text-wrap:balance;margin:1.3em 0 0;text-align:center;font-size:.92em;color:rgba(255,255,255,.95)}
.alt a{font-weight:700;text-decoration:none}
.alt a:hover{text-decoration:underline}

/* ---- "email me a sign-in link" shows in the same card, no script needed ---- */
.view.v-forgot{display:none}
.v-forgot:target{display:block}
.glass:has(.v-forgot:target) .v-main{display:none}

/* ---- the choose-a-password page ---- */
.amsg{margin:0 0 1.1em;font-size:.95em;color:rgba(255,255,255,.95)}
.abtn[disabled]{opacity:.6;cursor:default}

/* ---- phones and short screens ---- */
@media (max-width:30em){
  .glass{padding:1.7em 1.35em 1.5em;border-radius:1.3em}
  .ah{font-size:2.35em}
  .alogo{width:5.6em}
}
@media (max-height:34em) and (orientation:landscape){
  .auth{place-items:start center}
  .alogo{width:4.6em;margin-bottom:.6em}
  .ah{font-size:2em}
}
@media (min-width:2200px){.glass{width:min(100%,29em)}}
@media (prefers-reduced-motion:reduce){.sh{animation:none}.abtn,.sbtn{transition:none}}
@media print{.scene{display:none}body.auth-body{background:#fff;color:#000}}