/* Encore login: Storm (login-storm lane, 2026-10-10). Encore's tokens only; the card and the lockup rules are the
   approved Rain login's (login/login.css), unchanged. The scene is a full-bleed canvas under everything; before the
   first frame the body carries the same sky (lavender into peach, the Overview's gradient) so the page is never blank.
   Motion law as the shell's: one curve, --fast 180 ms, --slow 320 ms, transform and opacity only. */
/* The product family (Naveen, 2026-10-11): Geist from ../shell/fonts.css, as shell/shell.css sets it for every other page. */
:root{--font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif}
:root{--ease:cubic-bezier(.16,1,.3,1);--fast:180ms;--slow:320ms;--card-w:400px}
html,body{height:100%}
body.login{margin:0;overflow:hidden;background:linear-gradient(180deg,#b7adf1 0%,#ded3f7 34%,#ffd5c3 58%,#ffb79d 100%)}
.sky{position:fixed;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity var(--slow) ease}
.sky.is-on{opacity:1}
.login-brand{position:fixed;top:0;left:0;z-index:2;display:flex;align-items:center;min-height:68px;padding:0 24px}
.login-brand .masthead-brand{display:flex;align-items:center;gap:12px}
.login-brand img{display:block;width:130px;height:34px}
/* The lockup keeps the wordmark at every width, as the rail's brand does; system.css hides it under 1200 px on report pages. */
.login-brand .masthead-product{display:inline-flex}
.login-main{position:relative;z-index:1;display:grid;place-items:center;min-height:100%;padding:88px 16px 32px}
/* The panel is the surface (the approved card's border, radius, surface and shadow, unchanged); inside it the card is
   Clerk's mount and, 24 px above the panel's bottom edge, the legal line. A rejected email shakes the whole panel. */
.signin-panel{width:var(--card-w);max-width:100%;padding:0 0 24px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-popover)}
.signin-card{padding:32px 32px 24px}
.signin-legal{--legal-pad:32px}
.signin-panel:has(.signin-card.is-rejected){animation:signin-shake var(--slow) var(--ease)}
/* The card runs a still animation of the same length so storm.js's animationend on the card clears the state. */
.signin-card.is-rejected{animation:signin-hold var(--slow) linear}
@keyframes signin-hold{to{opacity:1}}
@keyframes signin-shake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}45%{transform:translateX(7px)}70%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.signin-title{margin:0 0 20px;font-size:var(--font-panel);line-height:var(--line-panel);font-weight:var(--weight-bold)}
.signin-form{display:grid;gap:12px}
.signin-form label{gap:6px;font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-medium)}
.signin-form input{font-size:var(--font-body);line-height:var(--line-body);font-weight:var(--weight-regular)}
.signin-form input:focus{border-color:var(--accent)}
.signin-form input[aria-invalid=true]{border-color:var(--danger-ink)}
.signin-error{margin:-4px 0 0;color:var(--danger-ink)}
.signin-continue{display:flex;width:100%;align-items:center;justify-content:center;min-height:48px;margin-top:4px;padding:10px 16px;border:1px solid var(--accent);border-radius:var(--radius-control);background:var(--accent);color:var(--surface)}
.signin-continue:hover{filter:brightness(1.06)}
.signin-continue-label{transition:opacity var(--fast) ease}
.signin-continue.is-swapping .signin-continue-label{opacity:0}
.signin-continue.is-sent{background:var(--surface);color:var(--accent)}
/* Google as a text link under the primary action, as the mechanics inspo settled it. */
.signin-google{display:block;width:100%;min-height:48px;margin:8px 0 0;padding:10px 0;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.signin-google:hover{color:var(--ink)}
.signin-secured{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 0;color:var(--muted)}
.clerk-mark{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:var(--weight-bold)}
/* Clerk's own card renders inside the same surface; its box becomes the card's body. */
.signin-card.has-clerk{padding:0;border:0;background:none;box-shadow:none}
/* With Clerk mounted, the panel stays the one surface: Clerk's card box gives up its own border and shadow. */
.signin-panel .cl-cardBox,.signin-panel .cl-card{border:0!important;box-shadow:none!important}
/* Clerk's mount fills the panel at every width (Naveen, 10/11 12:4x PM: under 760 px the panel is full width and Clerk's
   400 px card sat at its left edge). The panel stays the one surface; Clerk's root, card box and card take its width. */
.signin-panel .cl-rootBox,.signin-panel .cl-cardBox,.signin-panel .cl-card{width:100%!important;max-width:none!important}
@media(max-width:760px){
  :root{--card-w:100%}
  .login-brand{min-height:62px;padding:0 16px}
  .login-main{padding:78px 16px 24px}
  .signin-card{padding:24px 20px 20px}
  .signin-legal{--legal-pad:20px}
}
@media(prefers-reduced-motion:reduce){.sky,.signin-card{transition:none}.signin-card.is-rejected,.signin-panel:has(.signin-card.is-rejected){animation:none}.signin-continue-label{transition:none}}