/* ===== Marla auth pages (Devise) — light theme, shares tokens with application.css ===== */

.auth-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:24px;
  background:var(--bg);
}

.auth-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px 32px 28px;
  box-shadow:0 1px 2px rgba(25,54,60,.04);
}

@media (max-width:480px){
  .auth-card{padding:24px 20px;border-radius:12px}
}

.auth-brand{display:inline-block;line-height:0;margin-bottom:28px}
.auth-logo{display:block;height:38px;width:auto}

.auth-card h1{
  font-family:'Urbanist',sans-serif;
  font-weight:600;
  font-size:1.5rem;
  color:var(--ink);
  margin-bottom:8px;
}

.auth-sub{
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:24px;
}

.auth-form .field{margin-bottom:16px}
.auth-form .field.checkbox{display:flex;align-items:center;gap:8px}
/* labels and inputs match the dashboard's settings fields (.hf-field) */
.auth-form label{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:600;
}
.auth-form .field.checkbox label{
  display:inline;
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
  color:var(--ink-soft);
  margin:0;
}
.auth-form .field.checkbox input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--lime);
}
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=text]{
  width:100%;
  height:40px;
  padding:0 12px;
  font-size:.9rem;
  font-family:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
}
.auth-form input::placeholder{color:var(--muted)}
.auth-form input:focus-visible{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--ink-soft)}

/* the dashboard's primary button (.btn-primary), full width */
.auth-form input[type=submit],
.auth-form .btn{
  width:100%;
  display:block;
  height:40px;
  background:var(--lime);
  color:#19363C;
  font-family:inherit;
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--lime);
  border-radius:8px;
  cursor:pointer;
  margin-top:8px;
  transition:filter .12s;
}
.auth-form input[type=submit]:hover,
.auth-form .btn:hover{filter:brightness(.95)}
.auth-form input[type=submit]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.auth-hint{font-size:.85rem;color:var(--muted);margin-bottom:20px}

/* password field with a show/hide button inside its right edge */
.password-input{position:relative}
.auth-form .password-input input{padding-right:42px}
.password-toggle{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:none;border-radius:6px;cursor:pointer;
  color:var(--muted);font-size:1rem;
}
.password-toggle:hover{color:var(--ink)}
.password-toggle:focus-visible{outline:2px solid var(--lime);outline-offset:0}
.password-toggle[aria-pressed="true"]{color:var(--ink)}

/* live checklist under a new password */
.password-rules{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:3px}
.password-rules li{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.password-rules li i{font-size:.7rem;width:14px;text-align:center;opacity:.35}
.password-rules li.met{color:var(--routine-text, #2B7651);font-weight:600}
.password-rules li.met i{opacity:1}
.auth-field-hint{font-size:.8rem;color:var(--muted);margin-top:6px}
.auth-match{font-size:.8rem;font-weight:600;margin-top:6px;color:var(--urgent-text)}
.auth-match.ok{color:var(--routine-text, #2B7651)}

.auth-notice{
  background:rgba(79,169,124,.10);
  border:1px solid rgba(79,169,124,.45);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:20px;
  font-size:.875rem;
  color:var(--ink-soft);
}

.auth-errors{
  background:rgba(228,87,76,.08);
  border:1px solid rgba(228,87,76,.4);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:20px;
}
.auth-errors h2{
  font-size:.85rem;
  font-weight:700;
  color:var(--urgent-text);
  margin-bottom:6px;
}
.auth-errors ul{list-style:none;padding:0;margin:0}
.auth-errors li{font-size:.88rem;color:var(--ink-soft)}

.auth-links{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-links a{
  font-size:.875rem;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
}
.auth-links a:hover{color:var(--ink)}

.auth-back{
  font-size:.85rem;
  color:var(--muted);
  text-decoration:none;
}
.auth-back:hover{color:var(--ink-soft)}

.auth-form .field.checkbox label a{color:var(--ink);font-weight:600}
.auth-form .field.checkbox{align-items:flex-start}
.auth-form .field.checkbox input[type=checkbox]{margin-top:3px;flex-shrink:0}