/* public/css/pjfllogin-login.css */

.pl-login{
  --bg:#e7dece;
  --ink:#121212;
  --muted:rgba(18,18,18,.65);
  --card:rgba(255,255,255,.92);
  --border:rgba(18,18,18,.12);
  --brand:#0078b8;
  --brand-ink:#fff;

  min-block-size:100svh;
  display:grid;
  place-items:center;
  padding:clamp(1.25rem,4vw,3rem);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(0,120,184,.12), transparent 60%),
    var(--bg);
  color:var(--ink);
}

.pl-login__card{
  inline-size:min(42rem,100%);
  background:var(--card);
  border:0.0625rem solid var(--border);
  border-radius:1rem;
  box-shadow:0 1rem 2.5rem rgba(0,0,0,.08), 0 .25rem .75rem rgba(0,0,0,.06);
  padding:clamp(1.25rem,3vw,2.25rem);
  display:grid;
  gap:clamp(1rem,2vw,1.5rem);
}

.pl-login__brand{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:1rem;
}

.pl-login__logo{
  inline-size:clamp(3.25rem,8vw,5rem);
  block-size:auto;
  border-radius:.5rem;
}

.pl-login__title{
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  line-height:1.2;
  margin:0;
}

.pl-login__subtitle{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:1rem;
}

.pl-login__form{
  display:grid;
  gap:1rem;
}

.pl-login__field{
  display:grid;
  gap:.5rem;
}

.pl-login__label{
  font-size:.95rem;
  color:var(--muted);
}

.pl-login__form input{
  inline-size:100%;
  padding:.9rem 1rem;
  border-radius:.75rem;
  border:0.0625rem solid var(--border);
  background:rgba(255,255,255,.9);
  outline:none;
}

.pl-login__form input:focus{
  border-color:rgba(0,120,184,.55);
  box-shadow:0 0 0 .25rem rgba(0,120,184,.15);
}

.pl-login__submit{
  padding:.95rem 1rem;
  border-radius:.75rem;
  border:0.0625rem solid rgba(0,0,0,.08);
  background:var(--brand);
  color:var(--brand-ink);
  font-weight:700;
  cursor:pointer;
}

a.pl-login__submit{
  display:block;
  text-align:center;
  text-decoration:none;
}

.pl-login__submit:hover{ filter:brightness(.96); }

.pl-login__message{
  min-block-size:1.5rem;
  font-size:.95rem;
  color:var(--muted);
}

.pl-login__message.is-error{ color:#b00020; }

.pl-login__links{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin:0;
}

.pl-login__link-button{
  flex:1 1 auto;
  padding:.85rem 1rem;
  border-radius:.75rem;
  border:0.0625rem solid var(--border);
  background:rgba(255,255,255,.9);
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}

.pl-login__link-button:hover{
  border-color:rgba(0,120,184,.45);
  color:var(--brand);
}

.pl-login__instructions{
  margin:0;
  padding-left:1.25rem;
  display:grid;
  gap:.5rem;
  font-size:.95rem;
  color:var(--muted);
}