/* Sign-in pages in the my-empower website style. The tenant's background
   image, layout and colours (from the control console) still apply; this
   adds the dark brand-tinted overlay, the floating card and gradient buttons. */
:root{--auth-grad:linear-gradient(120deg,var(--green-dk,var(--green)),var(--green));
  --auth-ring:color-mix(in srgb,var(--green) 35%,transparent)}

.login-bg::after{background:
  linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px) 0 0/48px 48px,
  radial-gradient(900px 520px at 85% 0%,color-mix(in srgb,var(--green) 40%,transparent),transparent 62%),
  radial-gradient(700px 480px at 0% 100%,color-mix(in srgb,var(--green-dk,var(--green)) 30%,transparent),transparent 62%),
  linear-gradient(180deg,rgb(6 18 43/.38),rgb(6 18 43/.68))}

body .card{border:0;border-radius:22px;padding:38px 34px;
  box-shadow:0 1px 2px rgb(0 0 0/.08),0 40px 80px -24px rgb(3 8 20/.65)}
body .card::before{height:3px;background:var(--auth-grad)}
body h1{font-size:26px;letter-spacing:-.03em;margin-bottom:6px}
body .brand{margin-bottom:28px}
body .brand .lockup{height:28px}

body input{border-radius:12px;padding:12px 14px}
body input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--auth-ring)}

body .card button:not(.ghost):not(.maint-x):not([style]){border-radius:12px;background:var(--auth-grad);font-weight:700;
  padding:14px;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--green-dk,var(--green)) 95%,transparent);
  text-shadow:0 1px 1px rgb(0 0 0/.12);transition:transform .15s,box-shadow .15s}
body .card button:not(.ghost):not(.maint-x):not([style]):hover{background:var(--auth-grad);transform:translateY(-1px);
  box-shadow:0 16px 30px -14px color-mix(in srgb,var(--green) 95%,transparent)}
body .err,body .notice,body .maint-notice{border-radius:12px}
body .alt a:hover{color:var(--green)}

/* side panel layout: frosted panel over the tinted image */
body.layout-split .card{border-radius:0;box-shadow:12px 0 40px -20px rgb(3 8 20/.5);
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.layout-split .card::before{width:3px;background:linear-gradient(180deg,var(--green-dk,var(--green)),var(--green))}
@media (max-width:820px){body.layout-split .card{border-radius:0}body.layout-split .card::before{height:3px;width:auto}}

@media (prefers-reduced-motion:reduce){body .card button{transition:none}}