/* =====================================================================
   login.html only. Shared rules live in assets/css/styles.css.
   No new colours, radii, shadows or type sizes: tokens only.
   ===================================================================== */

/* ---------- 1. Slim header variant ---------------------------------
   An auth screen wants the quietest possible shell, so the utility bar
   and the marketing announcement are dropped on this page only. The nav,
   the drawer and every link inside the markers stay exactly as synced. */
.util-bar,
.announce{display:none!important}

/* ---------- 2. Split screen ---------------------------------------- */
.auth{
  position:relative;background:var(--surface-warm);
  padding-block:clamp(1.25rem,1rem + 1.6vw,2.5rem) clamp(3rem,2.2rem + 4vw,5rem);
}
.auth::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--saffron-500) 0 33.33%,#fff 33.33% 66.66%,var(--forest-600) 66.66% 100%);
  opacity:.9;
}
.auth__inner{
  display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:minmax(0,1fr);align-items:stretch;
}
@media (min-width:1024px){
  .auth__inner{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
}

/* ---------- 3. Brand panel (left) ---------------------------------- */
.auth__brand{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-2xl);background:var(--grad-dark-band);color:var(--text-on-dark);
  padding:clamp(22px,2.6vw,38px);box-shadow:var(--sh-xl);
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
}
.auth__brand::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glow-saffron),var(--glow-green);
}
.auth__brand .dots-field{z-index:-1;opacity:.2}
.auth__logo{display:inline-flex;align-self:flex-start}
.auth__logo img{height:clamp(38px,3vw,46px);width:auto;background:none}
.auth__strapline{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--saffron-300);
}
.auth__tagline{display:flex;gap:14px;align-items:stretch;margin:0}
.auth__tagline p{
  margin:0;font-family:var(--font-head);font-size:clamp(1.0625rem,1rem + .45vw,1.25rem);
  line-height:1.45;color:#fff;font-weight:500;
}
.auth__tagline b{color:var(--saffron-300);font-weight:700}

.auth__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.auth__points li{display:flex;gap:12px;margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-on-dark-muted)}
.auth__points b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
.auth__tick{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px;
  background:rgba(245,151,61,.16);color:var(--saffron-300);
}
.auth__tick svg{width:15px;height:15px}

.auth__quote{
  margin:0;padding:var(--sp-5);border-radius:var(--r-lg);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.auth__quote .testimonial__mark{color:var(--saffron-400);opacity:.6}
.auth__quote blockquote{margin:0;font-size:15.5px;line-height:1.6;color:#fff;text-wrap:pretty}
.auth__quote figcaption{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--text-on-dark-muted)}
.auth__quote figcaption b{display:block;color:#fff;font-size:13px;font-weight:600}
.auth__quote .avatar{background:rgba(245,151,61,.2);color:var(--saffron-200)}

.auth__script{
  margin:0;font-size:clamp(1.375rem,1rem + 1.4vw,2rem);color:var(--saffron-200);
}
.auth__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);
  margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--line-dark);
}
.auth__stats .stat__num{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--saffron-400)}
.auth__stats .stat__label{font-size:var(--fs-xs);color:var(--text-on-dark-muted);line-height:1.4}

/* ---------- 4. Form column (right) --------------------------------- */
.auth__panel{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
@media (min-width:1024px){
  .auth__panel{max-width:620px;width:100%;justify-self:center}
}
.auth__panel h1{margin:var(--sp-3) 0 var(--sp-3);font-size:clamp(1.875rem,1.4rem + 1.8vw,2.5rem)}
.auth__lead{max-width:52ch}

.auth__roles{display:flex;flex-direction:column;gap:var(--sp-3)}
.auth__roles .tab{flex:1 1 auto;justify-content:center}
.auth-rolenote{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  border:1px solid var(--line-soft);background:var(--surface-2);border-radius:var(--r-md);
  padding:12px 14px;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;
}
.auth-rolenote svg{width:17px;height:17px;color:var(--forest-600);flex:none;margin-top:2px}
.auth-rolenote b{color:var(--ink-800)}

.auth-card{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:var(--sp-5)}
.auth-card .tabs--underline{margin-bottom:calc(-1 * var(--sp-2))}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-4)}

.auth-row{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);align-items:center;justify-content:space-between}
.auth-link{
  border:0;background:none;padding:0;font-size:var(--fs-sm);font-weight:600;
  color:var(--forest-700);text-decoration:underline;text-underline-offset:3px;
}
.auth-link:hover{color:var(--saffron-700)}

/* password field: room for the reveal button */
.field--pass .input{padding-right:78px}
.pw-toggle{
  position:absolute;right:5px;top:50%;translate:0 -50%;min-height:38px;padding:0 12px;
  border:0;border-radius:var(--r-sm);background:var(--ink-50);
  font-size:13px;font-weight:600;color:var(--forest-700);
}
.pw-toggle:hover{background:var(--forest-50);color:var(--forest-800)}

/* forgot-password disclosure */
.forgot-panel{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);
}
.forgot-panel[hidden]{display:none}
.forgot-panel h2{font-size:var(--fs-h4);margin:0}

/* ---------- 5. OTP ------------------------------------------------- */
.otp-step{display:flex;flex-direction:column;gap:var(--sp-4)}
.otp-step[hidden]{display:none}
.otp-step__to{
  margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.otp-step__to b{color:var(--ink-800);font-variant-numeric:tabular-nums}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.4vw,10px);max-width:392px}
.otp input{
  width:100%;min-height:56px;padding:0;text-align:center;
  font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:0;
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--heading);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.otp input:hover{border-color:var(--forest-300)}
.otp input:focus{outline:none;border-color:var(--saffron-500);box-shadow:0 0 0 3px rgba(240,125,26,.18)}
.otp input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.otp input.is-filled{border-color:var(--forest-400);background:var(--forest-50)}
.otp.has-error input{border-color:var(--danger-fg)}
@media (max-width:399.98px){ .otp input{min-height:50px;font-size:18px} }

.otp-timer{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0;
  font-size:var(--fs-sm);color:var(--text-muted);
}
.otp-timer svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.otp-timer b{color:var(--ink-800);font-variant-numeric:tabular-nums}

/* ---------- 6. Social sign-in (demo only) --------------------------- */
.auth-or{
  display:flex;align-items:center;gap:var(--sp-3);margin:0;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-subtle);
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){ .sso{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sso__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:#fff;
  font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--ink-800);
  transition:border-color var(--dur-fast) var(--ease-hover),background var(--dur-fast) var(--ease-hover),transform var(--dur-fast) var(--ease-hover);
}
.sso__btn:hover{border-color:var(--forest-300);background:var(--forest-50);transform:translateY(-1px)}
.sso__mark{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:13px;line-height:1;
  background:var(--ink-100);color:var(--ink-700);
}
.sso__mark svg{width:14px;height:14px}
.sso__mark--in{background:var(--info-bg);color:var(--info-fg)}

.auth-switch{margin:0;font-size:var(--fs-sm);color:var(--text-muted);text-align:center}
.auth-switch a{font-weight:600;color:var(--forest-700)}

.auth-safety{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  border:1px solid var(--forest-200);background:var(--forest-50);border-radius:var(--r-md);
  padding:12px 14px;font-size:13px;color:var(--ink-700);line-height:1.55;
}
.auth-safety svg{width:17px;height:17px;color:var(--forest-600);flex:none;margin-top:2px}
.auth-safety b{color:var(--forest-800)}

/* success state after the simulated login */
.auth-done{display:none;flex-direction:column;gap:var(--sp-4)}
.auth-done.is-open{display:flex}
.auth-done .form-success{align-items:flex-start;text-align:left}
.auth-done .form-success p{margin:0}
.auth-done__next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.auth-done__next li{display:flex;gap:10px;margin:0;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55}
.auth-done__next svg{width:16px;height:16px;color:var(--forest-600);flex:none;margin-top:3px}

/* ---------- 7. Role doors band -------------------------------------- */
.doors{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .doors{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:599.98px){ .doors{grid-template-columns:minmax(0,1fr)} }

/* partner recruiters are not a sign-up role: they apply on recruiters.html */
.doors__note{
  display:flex;gap:12px;align-items:flex-start;margin:clamp(18px,2.4vw,28px) 0 0;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);
  padding:14px 16px;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;
}
.doors__note svg{width:18px;height:18px;color:var(--forest-600);flex:none;margin-top:3px}
.doors__note a{font-weight:600;color:var(--forest-700)}
.door{
  display:flex;flex-direction:column;gap:var(--sp-3);height:100%;text-decoration:none;color:inherit;
}
.door h3{font-size:16.5px;margin:0}
.door p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
.door .link-arrow{margin-top:auto;padding-top:var(--sp-2)}
.door .hex{width:56px;height:61px}

/* ---------- 8. Help band --------------------------------------------- */
.help-layout{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .help-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)} }
.help-card{display:flex;flex-direction:column;gap:var(--sp-4)}
.help-card h3{margin:0;font-size:var(--fs-h4)}
.help-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.help-list li{display:flex;gap:12px;margin:0;font-size:var(--fs-sm);line-height:1.55}
.help-list b{display:block;color:var(--ink-800);font-weight:600}
.help-list a{color:var(--forest-700);font-weight:600;text-decoration:none}
.help-list a:hover{color:var(--saffron-700);text-decoration:underline}
.help-list__icon{
  width:36px;height:36px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--saffron-50);color:var(--saffron-700);
}
.help-list__icon svg{width:18px;height:18px}