/* LIFE LEVERAGE
   09-login.css
   Login page only.
*/

body.login-page{
  min-height:100vh;
  background:var(--ll-app-bg,#f5f7f9);
}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 20px;
}

.login-card{
  width:min(100%, 420px);
  padding:42px 40px 40px;
  background:#fff;
  border:1px solid var(--ll-border,#e6e8ec);
  box-shadow:0 20px 60px rgba(15,23,42,.08);
}

.login-brand{
  margin-bottom:38px;
}

.login-wordmark{
  display:grid;
  gap:7px;
  width:max-content;
  color:var(--ll-navy,#0f172a);
  font-size:15px;
  font-weight:800;
  letter-spacing:.34em;
  line-height:1.05;
}

.login-wordmark span{
  display:block;
}

.login-wordmark::after{
  content:"";
  display:block;
  width:30px;
  height:2px;
  margin-top:8px;
  background:var(--ll-gold,#c8a15a);
}

.login-heading{
  margin-bottom:28px;
}

.login-heading h1{
  margin:0;
  color:var(--ll-navy,#0f172a);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
}

.login-error{
  margin:0 0 20px;
  padding:12px 14px;
  border:1px solid #ead5d0;
  border-left:2px solid var(--ll-gold,#c8a15a);
  background:#fffaf7;
  color:var(--ll-navy,#0f172a);
  font-size:12px;
  font-weight:700;
  line-height:1.6;
}

.login-form{
  display:grid;
  gap:20px;
}

.login-field{
  display:grid;
  gap:8px;
}

.login-field > span{
  color:var(--ll-muted,#64748b);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}

.login-field input{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:46px;
  min-height:46px;
  padding:0 13px;
  border:1px solid var(--ll-border,#e6e8ec);
  border-radius:0;
  outline:0;
  background:#fff;
  color:var(--ll-navy,#0f172a);
  box-shadow:none;
  font:inherit;
  font-size:16px;
  font-weight:700;
  box-sizing:border-box;
}

.login-field input:focus{
  border-color:var(--ll-gold,#c8a15a);
  box-shadow:inset 0 0 0 1px var(--ll-gold,#c8a15a);
}

.login-submit{
  width:100%;
  height:46px;
  min-height:46px;
  margin-top:4px;
  padding:0 18px;
  border:1px solid var(--ll-navy,#0f172a);
  border-radius:0;
  background:var(--ll-navy,#0f172a);
  color:#fff;
  box-shadow:none;
  font-size:13px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.login-submit:hover{
  background:#172033;
  border-color:#172033;
}

@media (max-width:560px){
  .login-shell{
    align-items:start;
    padding:24px 16px;
  }

  .login-card{
    margin-top:40px;
    padding:34px 24px 30px;
    box-shadow:none;
  }

  .login-brand{
    margin-bottom:32px;
  }

  .login-heading h1{
    font-size:26px;
  }
}