/* Punchlist360 — sign-in surfaces.
 * The blueprint sits behind everything at low opacity: it should read as a
 * watermark you notice on the second look, never as something competing with
 * the form. It is an SVG, so it stays crisp on a Retina iPad. */

.auth-wrap{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(28px + env(safe-area-inset-top,0px)) 18px calc(28px + env(safe-area-inset-bottom,0px));
  position:relative;overflow:hidden;background:var(--bg);
}
.auth-bp{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('/public/img/blueprint-mansion.svg');
  background-repeat:no-repeat;background-position:center 46%;background-size:min(1700px,150%) auto;
  opacity:.42;
}
body.light-mode .auth-bp{opacity:.34;filter:saturate(.85)}
/* A soft vignette so the drawing fades at the edges instead of being cropped
   by a hard line, and the card always has contrast underneath it. */
.auth-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 92% 78% at 50% 48%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.88) 100%);
}
body.light-mode .auth-veil{
  background:radial-gradient(ellipse 92% 78% at 50% 48%, rgba(240,242,245,.15) 0%, rgba(240,242,245,.62) 58%, rgba(240,242,245,.95) 100%);
}

.auth-card{
  position:relative;z-index:2;width:100%;max-width:432px;
  background:var(--bg-card-2);border:1px solid var(--gold-border);border-radius:18px;
  padding:34px 32px 30px;box-shadow:0 26px 80px rgba(0,0,0,.72);backdrop-filter:blur(14px) saturate(1.1);
}
body.light-mode .auth-card{box-shadow:0 20px 56px rgba(0,0,0,.14)}
.auth-logo{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.auth-logo img{width:42px;height:42px}
.auth-logo .name{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.auth-logo .name em{font-style:normal;color:var(--gold)}
.auth-tag{font-size:12.5px;color:var(--text-2);margin:0 0 24px;line-height:1.5}
.auth-card h1{font-size:19px;margin:0 0 18px}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px;flex-wrap:wrap}
.auth-links a{color:var(--text-2)}
.auth-links a:hover{color:var(--gold)}
.auth-foot{
  position:relative;z-index:2;text-align:center;font-size:11.5px;color:var(--text-3);
  margin-top:22px;line-height:1.7;
}
.auth-card .btn{width:100%;margin-top:6px}
.auth-note{
  background:var(--bg-input);border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;font-size:12.5px;color:var(--text-2);line-height:1.55;margin-top:16px;
}
@media (max-width:520px){
  .auth-card{padding:26px 20px 24px;border-radius:14px}
  .auth-bp{background-size:250% auto;opacity:.30}
}

/* "or" divider between the password form and the biometric button */
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-3);font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
#bioBtn{width:100%;min-height:46px;font-size:14px}
#bioIcon{font-size:16px}