/* ==========================================================================
   SIGN IN.CSS  —  sign in / register / forgot password (one page, three panes)
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#1D364D;
  --text-color:#3C4B64;
  --ink:#1A1A1A;          /* field labels */
  --page:#F5F8FC;
  --field:#E1E0DA;        /* input fill */
  --livid:#90B4CB;        /* primary button */
  --err:#B3261E;
  --line:#C9D0D8;
  --r-sm:6px; --r-md:8px;
  --col:652px;            /* form column width */
}

body{
  margin:0;background:var(--page);color:var(--text-color);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-family:var(--font-secondary);
}
a{text-decoration:none}
input{font:inherit;color:var(--head-color)}
:focus-visible{outline:2px solid var(--head-color);outline-offset:2px;border-radius:4px}

/* ============ LAYOUT ============ */
.wrap{min-height:100vh;display:grid;justify-items:center;padding:var(--gutter);min-height:520px}
.auth{width:100%;max-width:var(--col)}

/* only one pane is on screen at a time */
.pane[hidden],
.otp-step[hidden],
.submit[hidden]{display:none !important}

h1{margin:0 0 34px;font-size:40px;line-height:1.2;font-weight:400;color:#19325C}
h1 + .lede{margin:-24px 0 28px;font-size:15px;color:var(--text-color);max-width:44ch}

/* ============ FIELDS ============ */
.field{margin-bottom:22px}
.field label{display:block;margin-bottom:10px;font-size:16px;font-weight:500;color:var(--ink)}
.input-wrap{position:relative}
.field input{
  width:100%;height:46px;border:0;border-radius:var(--r-md);background:var(--field);
  padding:0 18px;font-size:15px;outline:none;
}
.field input[type="password"],
.field input[data-pw]{padding-right:52px}
.field.is-bad input{box-shadow:inset 0 0 0 1.5px var(--err)}
.field .err{display:none;margin:7px 0 0;font-size:13px;color:var(--err)}
.field.is-bad .err{display:block}

/* show / hide password */
.peek{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;color:var(--text-color);
  border:0;background:none;border-radius:var(--r-sm);cursor:pointer;
}
.peek:hover{color:var(--head-color)}

/* ============ ROW (remember me + forgot password) ============ */

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 22px}
.remember{display:inline-flex;align-items:center;gap:12px;font-size:16px;color:var(--ink);cursor:pointer}
.remember input{
  appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;
  border:1.5px solid var(--head-color);border-radius:3px;background:#fff;position:relative;cursor:pointer;
}
.remember input:checked{background:var(--head-color)}
.remember input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.forgot{margin-left:auto;font-size:16px;color:var(--head-color);text-decoration:none}
.forgot:hover{text-decoration:underline}

/* ============ SUBMIT ============ */
.submit{
  width:100%;height:48px;border:0;border-radius:var(--r-md);cursor:pointer;
  background:var(--livid);color:var(--head-color);font-size:16px;font-weight:600;
}
.submit:hover{background:#7FA8C2}
.submit[disabled]{opacity:.7;cursor:default}

.form-note{display:none;margin:16px 0 0;font-size:14px;color:var(--err)}
.form-note.on{display:block}

.alt{margin:22px 0 0;font-size:15px;color:var(--text-color)}
.alt a{color:var(--head-color);font-weight:500}
.alt a:hover{text-decoration:underline}

/* ============ OTP STEP ============ */
.otp-step{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.otp-step #fp-otp{letter-spacing:.4em;font-weight:500}
.resend{margin:14px 0 0;font-size:14px;color:var(--text-color)}
.linkish{
  border:0;background:none;padding:0;font:inherit;font-weight:500;
  color:var(--head-color);cursor:pointer;text-decoration:underline;
}
.linkish[disabled]{color:var(--text-color);text-decoration:none;cursor:default}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .wrap{padding: var(--gutter);}
  h1{font-size:26px;margin-bottom:26px}
  h1 + .lede{margin:-18px 0 22px;font-size:14px}
  .field label{font-size:15px}
  .field{margin-bottom:18px}
  .remember,.forgot{font-size:15px}
  .auth-row{margin-bottom:18px}
}

@media (prefers-reduced-motion:no-preference){
  .submit,.peek,.linkish{transition:background-color .15s ease,color .15s ease}
}