/* V32.8 — recovery OTP layout fix.
   Keeps the approved visual identity, prevents content-box overflow,
   and switches to a centered single-card layout on narrower desktop windows. */
body.auth-forgot-page,
body.auth-forgot-page *,
body.auth-forgot-page *::before,
body.auth-forgot-page *::after{
  box-sizing:border-box;
}
html,
body.auth-forgot-page{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
body.auth-forgot-page{
  overflow-y:auto!important;
}
body.auth-forgot-page .auth-wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(380px,500px)!important;
  gap:clamp(30px,5vw,76px)!important;
  align-items:center!important;
  min-height:calc(100svh - 83px)!important;
  height:auto!important;
  padding:42px 0 56px!important;
  overflow:visible!important;
}
body.auth-forgot-page .auth-story,
body.auth-forgot-page .auth-card{
  min-width:0!important;
}
body.auth-forgot-page .auth-story{
  position:static!important;
  align-self:center!important;
}
body.auth-forgot-page .auth-card{
  width:100%!important;
  max-width:500px!important;
  align-self:center!important;
  overflow:hidden!important;
}
body.auth-forgot-page .auth-card form,
body.auth-forgot-page .auth-card .field,
body.auth-forgot-page .auth-card input,
body.auth-forgot-page .turnstile-shell{
  min-width:0!important;
  max-width:100%!important;
}
body.auth-forgot-page.recovery-verify-active .auth-wrap{
  align-items:start!important;
  padding-top:30px!important;
  padding-bottom:70px!important;
}
body.auth-forgot-page.recovery-verify-active .auth-story{
  position:sticky!important;
  top:116px!important;
  align-self:start!important;
}
body.auth-forgot-page.recovery-verify-active .auth-card{
  align-self:start!important;
}
.recovery-email-chip{
  margin:-8px 0 14px;
  padding:10px 13px;
  border:1px solid var(--af-border);
  border-radius:12px;
  background:var(--af-card-2);
  color:var(--af-text);
  font-weight:800;
  text-align:center;
  overflow-wrap:anywhere;
}
html[data-theme="light"] .recovery-email-chip{
  background:#f8fafc;
  color:var(--af-light-text);
  border-color:var(--af-light-border);
}
.recovery-code-input{
  font-size:24px!important;
  font-weight:900!important;
  letter-spacing:.34em;
  text-align:center;
  padding-inline-start:calc(15px + .34em)!important;
  font-variant-numeric:tabular-nums;
}
.auth-secondary{
  width:100%;
  margin-top:12px;
  min-height:48px;
  border:1px solid var(--af-border);
  border-radius:14px;
  background:transparent;
  color:var(--af-text);
  font-weight:900;
  cursor:pointer;
}
.auth-secondary:hover,
.auth-secondary:focus-visible{
  border-color:var(--af-orange);
  color:var(--af-orange);
  background:rgba(254,121,13,.08);
}
html[data-theme="light"] .auth-secondary{
  color:var(--af-light-text);
  border-color:var(--af-light-border);
}
[data-recovery-panel][hidden]{display:none!important}

/* A 2-column auth layout is too tight in split-screen and common laptop widths.
   Use the approved centered card layout before anything can clip. */
@media(max-width:1080px){
  body.auth-forgot-page .auth-wrap,
  body.auth-forgot-page.recovery-verify-active .auth-wrap{
    width:min(620px,calc(100% - 36px))!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    align-items:start!important;
    min-height:auto!important;
    padding:34px 0 64px!important;
  }
  body.auth-forgot-page .auth-story,
  body.auth-forgot-page.recovery-verify-active .auth-story{
    display:none!important;
    position:static!important;
  }
  body.auth-forgot-page .auth-card,
  body.auth-forgot-page.recovery-verify-active .auth-card{
    width:min(100%,500px)!important;
    margin-inline:auto!important;
    align-self:start!important;
  }
}
@media(max-width:560px){
  body.auth-forgot-page .auth-wrap,
  body.auth-forgot-page.recovery-verify-active .auth-wrap{
    width:min(100% - 22px,620px)!important;
    padding:24px 0 50px!important;
  }
}