/* Sign-in page. Standalone: this page does not load the main app stylesheets. */
:root{
  --ink:#0a1640;--ink-2:#0f1f5c;--brand:#1d4ed8;--brand-deep:#1739a8;--sky:#5b86ff;
  --wheat:#e9b949;--wheat-deep:#c9962a;--mist:#eef2fb;--line:#d3dbf0;
  --text:#0d1a40;--muted:#5a6a8d;--danger:#8c1d27;
  --display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.auth-premium{margin:0;min-height:100vh;min-height:100dvh;background:var(--ink);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5}

.login{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Hero: deep blue with field contour lines drawn in once on load. */
.login-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:max(30px,env(safe-area-inset-top)) 24px 92px;
  background:radial-gradient(70% 80% at 88% 8%,rgba(91,134,255,.34),transparent 70%),linear-gradient(165deg,var(--ink-2),var(--ink) 70%)}
.login-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 38%;z-index:-1;pointer-events:none;user-select:none}
.login-brand{display:grid;gap:0}
.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;
  background:linear-gradient(145deg,#f4cf6a,var(--wheat) 55%,var(--wheat-deep));color:var(--ink);
  font:800 21px/1 var(--display);letter-spacing:-.01em;box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.login-hero h1{margin:26px 0 12px;font:800 clamp(32px,9.4vw,42px)/1.03 var(--display);letter-spacing:-.025em;text-wrap:balance}
.login-hero p{margin:0;max-width:31ch;color:#c3cff4;font-size:16.5px;line-height:1.5}

/* Form sheet overlaps the hero on phones and fills the rest of the screen. */
.login-sheet{position:relative;flex:1;margin-top:-54px;background:#fff;border-radius:30px 30px 0 0;
  padding:30px 22px max(30px,env(safe-area-inset-bottom));box-shadow:0 -14px 44px rgba(5,12,46,.32)}
.login-form{width:100%;max-width:400px;margin:0 auto}
.login-form h2{margin:0 0 4px;font:800 30px/1.1 var(--display);letter-spacing:-.02em}
.login-form .lede{margin:0 0 24px;color:var(--muted);font-size:15.5px}

.alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border:1px solid #f1b9bf;border-radius:12px;background:#fdecee;color:var(--danger);font-size:14.5px;line-height:1.4}
.alert svg{flex:none;width:20px;height:20px;margin-top:1px}

.field{display:block;margin:0 0 16px}
.field>span{display:block;margin-bottom:7px;color:#22305c;font-size:14px;font-weight:600}
.control{position:relative;display:flex;align-items:center}
.control .lead{position:absolute;left:15px;width:20px;height:20px;color:#7686ac;pointer-events:none;transition:color .15s}
.control input{width:100%;height:54px;padding:0 16px 0 46px;border:1.5px solid var(--line);border-radius:14px;background:#f8faff;color:var(--text);font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s,background .15s}
.control input::placeholder{color:#9aa7c6}
.control input:hover{border-color:#b9c5e6}
.control input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.16)}
.control:focus-within .lead{color:var(--brand)}
.control.has-toggle input{padding-right:54px}
.toggle{position:absolute;right:5px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:none;color:#5a6a8d;cursor:pointer}
.toggle:hover{background:#eaeffb}
.toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.toggle svg{width:21px;height:21px}
.toggle .eye-off{display:none}
.toggle.on .eye{display:none}
.toggle.on .eye-off{display:block}
.hint{display:block;margin:-8px 0 14px;color:#8a5a00;font-size:13.5px;font-weight:600}
.hint[hidden]{display:none}

.submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:8px;border:0;border-radius:14px;
  background:linear-gradient(180deg,#2c5df0,var(--brand-deep));color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px rgba(29,78,216,.34),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .08s,box-shadow .15s,filter .15s}
.submit:hover{filter:brightness(1.07)}
.submit:active{transform:translateY(1px);box-shadow:0 5px 14px rgba(29,78,216,.34),inset 0 1px 0 rgba(255,255,255,.2)}
.submit:focus-visible{outline:3px solid rgba(29,78,216,.45);outline-offset:3px}
.submit .spinner{display:none;width:19px;height:19px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.submit[aria-busy="true"]{pointer-events:none;filter:saturate(.8) brightness(.95)}
.submit[aria-busy="true"] .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.help{text-wrap:balance;margin:22px 0 0;color:var(--muted);font-size:14.5px;text-align:center}

/* Desktop and tablet: brand on the left, form on the right. */
@media (min-width:900px){
  .login{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr)}
  .login-hero{display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px}
  .login-art{object-position:60% 50%}
  .login-hero .login-copy{max-width:520px}
  .login-hero h1{margin:0 0 16px;font-size:clamp(46px,4.6vw,64px)}
  .login-hero p{font-size:19px;max-width:30ch}
  .brand-mark{width:64px;height:64px;border-radius:19px;font-size:23px}
  .login-sheet{display:grid;place-items:center;margin-top:0;border-radius:0;padding:48px;box-shadow:none}
  .login-form h2{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  .submit,.control input,.control .lead{transition:none}
  .submit .spinner{animation-duration:1.6s}
}