/* Register / login / onboarding pages. */
.auth-main{min-height:calc(100vh - 62px - 92px);display:flex;align-items:center;justify-content:center;padding:38px 18px}
.auth-card{width:100%;max-width:440px;padding:30px 30px 28px}
.auth-card h1{color:var(--navy);font-size:24px;margin:6px 0 4px}
.auth-card .sub{color:var(--grey);font-size:14px;margin-bottom:20px}

/* form fields */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:bold;color:var(--navy);letter-spacing:.3px;margin-bottom:6px;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:14.5px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;color:#0A1628;transition:.12s}
/* Interim contrast fix: the field background is hardcoded white, so pin the
   typed text and placeholder to fixed legible colours (existing brand
   navy / muted-grey tokens) rather than theme-resolved vars. Text colour only. */
.field input::placeholder,.field textarea::placeholder{color:#6B7280;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gear);box-shadow:0 0 0 3px rgba(46,103,190,.12)}
.field textarea{resize:vertical;min-height:96px}
.field .hint{font-size:11.5px;color:var(--grey);margin-top:5px}
.auth-foot{text-align:center;font-size:13px;color:var(--grey);margin-top:18px}
.auth-foot a{color:#1B68A4;font-weight:bold}

/* "Forgot password?" link under the login button */
.auth-aux{text-align:right;font-size:12.5px;margin-top:10px}
.auth-aux a{color:#1B68A4;font-weight:bold;text-decoration:none}
.auth-aux a:hover{text-decoration:underline}

/* Show/hide password toggle (assets/js/password-toggle.js).
   The wrapper only positions the button; the input keeps its own border and gold/blue
   focus ring, so the toggle never breaks the field styling. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;top:1px;right:1px;bottom:1px;width:42px;display:flex;
  align-items:center;justify-content:center;padding:0;margin:0;border:0;background:transparent;
  color:var(--grey);cursor:pointer;border-radius:0 9px 9px 0}
.pw-toggle:hover{color:var(--navy)}
.pw-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pw-toggle svg{display:block}

/* onboarding wizard */
.wizard{width:100%;max-width:560px;padding:30px 32px}
.wizard h1{color:var(--navy);font-size:22px;margin:6px 0 18px}
.steps{display:flex;gap:8px;margin-bottom:22px}
.steps .s{flex:1;height:6px;border-radius:4px;background:var(--line);transition:.2s}
.steps .s.on{background:var(--gold)}
.step{display:none}
.step.on{display:block}
.step h2{color:var(--navy);font-size:19px;margin-bottom:4px}
.step .lead{color:var(--grey);font-size:13.5px;margin-bottom:18px}
.wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}