/* Shared outer shell for Log in, Back Office sign-in, and My Giving sign-in.
   Copied from the approved Log in page: cool gray canvas, white 440px card,
   quiet fine print, and a centered loading line. Header, logo, and footer
   stay in the site chrome. Do not set a transform on body or main. */

:root{
  --white:#fff;
  --line:#CBD5E0;
  --err:#8C1D1D;
  --card-shadow:0 8px 32px rgba(0,0,0,.12);
}

.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.login-card{background:var(--white);border-radius:16px;box-shadow:var(--card-shadow);padding:30px 36px;max-width:440px;width:100%;text-align:center}
.login-icon{width:44px;height:44px;border-radius:50%;background:var(--light,#D2E9FF);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.login-card h1,.login-card .state-h{font-family:var(--font-display,var(--f,'Outfit',system-ui,sans-serif));font-size:1.625rem;font-weight:700;color:var(--blue,#1E3EAF);margin-bottom:6px}
/* The code box's title when it is not the active state (signin-sms.js styles only its h1). */
.signin-code h2#code-title{font-family:var(--font-display,'Outfit',system-ui,sans-serif);font-size:1.625rem;font-weight:700;color:var(--blue,#1E3EAF);margin:0 0 6px;text-align:center;line-height:1.2}
.login-card .lede{font-size:.9375rem;color:var(--gray,#475569);margin-bottom:18px;line-height:1.55}
.fineprint{font-size:.875rem;color:var(--gray,#475569);margin-top:14px;line-height:1.5}
.fineprint a{color:var(--blue,#1E3EAF);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Light gray is the footer only. Card and Log in sentences stay slate. */
footer .fineprint{color:var(--muted,#A0AEC0)}
/* 14px type. The vertical padding keeps each Terms and Privacy link easy to tap. */
.login-card .fineprint a{display:inline-block;padding:14px 6px}
.login-card input:focus-visible{outline:3px solid #1E3EAF;outline-offset:2px}
.login-card a:focus-visible,.login-card button:focus-visible{outline:3px solid #1E3EAF;outline-offset:2px}
/* The expiry note is a sentence someone has to read. Muted 12px type is the
   Log in fine print, and it is 2.25:1 on white, which fails the public scan.
   Slate at 14px stays quiet and clears 4.5:1. */
.signin-note{font-size:.875rem;color:var(--gray,#475569);margin-top:14px;line-height:1.5;overflow-wrap:anywhere;max-width:100%}
/* After a code is asked for. Always on screen, for a donor and for a
   stranger, so it never says which emails we have. */
.signin-help{margin:14px 0 0;padding:12px 14px;border-radius:8px;background:var(--light,#D2E9FF);color:var(--text,#2D3748);font-size:.9375rem;line-height:1.5;text-align:left;max-width:100%;min-width:0;overflow-wrap:anywhere}
.signin-help p{margin:0;max-width:100%;overflow-wrap:anywhere}
.signin-help-actions{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:4px;max-width:100%}
.signin-help-actions button,.signin-help-actions a{background:none;border:0;padding:8px 0;min-height:44px;color:var(--blue,#1E3EAF);font:600 1rem/1.4 Outfit,system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:2px;max-width:100%}
.signin-help-actions button:disabled,.signin-help-actions button[aria-disabled="true"]{opacity:.55;cursor:default;text-decoration:none}
.signin-help[hidden]{display:none !important}
/* The help box is the one set of actions. Hide the card's copies while it is open. */
.login-card:has(#donor-code-help:not([hidden])) .signin-quiet:has(#code-resend),
.login-card:has(#donor-code-help:not([hidden])) .signin-quiet:has(#code-other){display:none}
.signin-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.signin-note a{color:var(--blue,#1E3EAF);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.working{display:none;text-align:center}
body.working-state .working{display:block}
/* Staff and My Giving write the status into #working (textContent) and add
   .show. Same centered heading as Log in's loading line. */
#working.show{display:block;font-family:var(--font-display,'Outfit',system-ui,sans-serif);font-size:1.625rem;font-weight:700;color:var(--blue,#1E3EAF);line-height:1.2;margin:0}
/* The Terms line sits under the form. Once #working is showing, the form is
   hidden and the line would hang under the loading heading. */
#working.show + .fineprint{display:none}
html,body{overflow-x:hidden;max-width:100%}
.login-card{min-width:0;max-width:min(440px,100%);overflow-wrap:anywhere}
.login-card h1,.login-card .state-h,.login-card .lede,.field input{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:480px){.login-card{padding:28px 16px}.login-wrap{align-items:flex-start;padding:max(24px,env(safe-area-inset-top,0px)) 16px calc(96px + env(safe-area-inset-bottom,0px))}.login-card h1,.login-card .state-h,#working.show{font-size:1.5rem}}

/* Installed app, or sign-in opened from one (html.app-signin from
   assets/signin-app.js). The public header sits under the iOS status bar
   and the public footer makes a long scroll. The card stays centered in
   the safe area. The email step and the code step share this wrap.
   A regular browser visit does not get the class, and the phone padding
   above is unchanged. Spacers center the card when it fits, and shrink
   away when it is taller than the screen so the top can still scroll
   into view. */
html.app-signin .ubar,
html.app-signin header.hdr,
html.app-signin .m-overlay,
html.app-signin .m-drawer,
html.app-signin footer.ftr .ftr-main,
html.app-signin footer.ftr .fbot{display:none}
/* The cookie notice and the accessibility panel live in the footer.
   Hiding the whole footer hides them too, including the Help button's
   Accessibility panel. Keep the footer element, drop its navy band. */
html.app-signin body:has(footer.ftr) footer.ftr{
  background:transparent;
  padding:0;
  height:0;
  min-height:0;
  overflow:visible;
  border:0
}
html.app-signin body:has(footer.ftr) footer.ftr::after{content:none;box-shadow:none}
html.app-signin{background:var(--bg,#EDF2F7);overflow-x:hidden;max-width:100%}
html.app-signin body{min-height:100dvh;background:var(--bg,#EDF2F7);overflow-x:hidden;max-width:100%}
html.app-signin body main{zoom:1;min-width:0;max-width:100%}
html.app-signin .login-wrap{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-height:100dvh;
  min-width:0;
  overflow-x:hidden;
  padding:max(24px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) max(16px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px)) max(var(--jfsd-float-pad,96px),env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px)) max(16px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px))
}
html.app-signin .login-wrap::before,
html.app-signin .login-wrap::after{content:"";flex:1 0 auto;width:100%;min-height:0}
html.app-signin .login-card{flex:0 0 auto;width:100%}
.app-signin-back{display:none}
html.app-signin .login-card .app-signin-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0 0 4px;
  padding:8px 12px;
  font-family:var(--font-display,var(--f,'Outfit',system-ui,sans-serif));
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  color:var(--blue,#1E3EAF);
  text-decoration:underline;
  text-underline-offset:2px
}
@media (display-mode:standalone),(display-mode:fullscreen){
  html .ubar,
  html header.hdr,
  html .m-overlay,
  html .m-drawer,
  html footer.ftr .ftr-main,
  html footer.ftr .fbot{display:none}
  html body:has(footer.ftr) footer.ftr{
    background:transparent;
    padding:0;
    height:0;
    min-height:0;
    overflow:visible;
    border:0
  }
  html body:has(footer.ftr) footer.ftr::after{content:none;box-shadow:none}
  html main{zoom:1;min-width:0;max-width:100%}
  html .login-wrap{
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-height:100dvh;
    min-width:0;
    overflow-x:hidden;
    padding:max(24px,env(safe-area-inset-top,0px),var(--jfsd-sat,0px)) max(16px,env(safe-area-inset-right,0px),var(--jfsd-sar,0px)) max(var(--jfsd-float-pad,96px),env(safe-area-inset-bottom,0px),var(--jfsd-sab,0px)) max(16px,env(safe-area-inset-left,0px),var(--jfsd-sal,0px))
  }
  html .login-wrap::before,
  html .login-wrap::after{content:"";flex:1 0 auto;width:100%;min-height:0}
  html .login-card{flex:0 0 auto;width:100%}
  html .login-card .app-signin-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0 0 4px;
    padding:8px 12px;
    font-family:var(--font-display,var(--f,'Outfit',system-ui,sans-serif));
    font-size:1rem;
    font-weight:600;
    line-height:1.2;
    color:var(--blue,#1E3EAF);
    text-decoration:underline;
    text-underline-offset:2px
  }
}