/* Shared authentication workspace: login, registration and account recovery. */
:root {
  --auth-surface: light-dark(#fff, #151c27);
  --auth-surface-muted: light-dark(#f5f8fc, #1b2431);
  --auth-text: light-dark(#172033, #f3f6fb);
  --auth-muted: light-dark(#5c687d, #aab6c9);
  --auth-border: light-dark(#d8e0eb, #344154);
  --auth-border-strong: light-dark(#b7c3d4, #52627a);
  --auth-primary: light-dark(#1457d9, #77a7ff);
  --auth-primary-hover: light-dark(#0f45ad, #9abbff);
  --auth-on-primary: light-dark(#fff, #071225);
  --auth-focus: light-dark(rgba(20, 87, 217, .24), rgba(119, 167, 255, .3));
  --auth-success: light-dark(#087a3d, #5cda91);
  --auth-error: light-dark(#b42318, #ff8f86);
  --auth-warning: light-dark(#9a5b00, #ffc56d);
  --auth-radius: .75rem;
  --auth-radius-lg: 1.5rem;
  --auth-shadow: 0 24px 70px light-dark(rgba(22, 36, 60, .12), rgba(0, 0, 0, .36));
}

.auth-wrapper {
  width: min(100%, 66rem);
  box-sizing: border-box;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3.5rem) 1rem;
  color: var(--auth-text);
}

.auth-layout {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(16rem, .8fr) minmax(22rem, 1.2fr);
  overflow: hidden;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-lg);
  box-shadow: var(--auth-shadow);
}

.auth-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.2), transparent 34%), linear-gradient(145deg, #164fc3, #15378d 58%, #202f68);
}

.auth-intro__eyebrow, .auth-card__eyebrow {
  margin: 0 0 .75rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-intro__eyebrow { color: rgba(255,255,255,.78); }
.auth-card__eyebrow { color: var(--auth-primary); }

.auth-intro h1 {
  margin: 0;
  color: inherit;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

.auth-intro__description {
  max-width: 32rem;
  margin: 1.25rem 0 0;
  color: rgba(255,255,255,.86);
  font-size: 1.02rem;
  line-height: 1.65;
}

.auth-intro__points {
  display: grid;
  gap: .8rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-intro__points li {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.9);
  font-size: .92rem;
  line-height: 1.45;
}

.auth-intro__points i {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}

.auth-container {
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--auth-surface);
}

.auth-wrapper > .auth-container {
  width: min(100%, 34rem);
  margin-inline: auto;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-lg);
  box-shadow: var(--auth-shadow);
}

.auth-header { margin-bottom: 1.75rem; text-align: left; }
.auth-header--centered { text-align: center; }

.auth-header .auth-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: .85rem;
  color: var(--auth-primary);
  background: light-dark(#e9f0ff, rgba(119,167,255,.13));
  font-size: 1.2rem;
}

.auth-header--centered .auth-icon { margin-inline: auto; }
.auth-wrapper .auth-container .auth-header--centered :is(h1, h2) { text-align: center; }

.auth-wrapper .auth-container .auth-header h1,
.auth-wrapper .auth-container .auth-header h2,
.auth-wrapper .auth-container > h1 {
  margin: 0;
  color: var(--auth-text);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-align: left;
}

.auth-subtitle {
  margin: .65rem 0 0;
  color: var(--auth-muted);
  line-height: 1.55;
}

.auth-method { display: grid; gap: .75rem; }
.auth-method__hint, .auth-wrapper .form-hint, .auth-wrapper .help-text {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .5rem 0 0;
  color: var(--auth-muted);
  font-size: .84rem;
  line-height: 1.45;
}
.auth-method__hint i, .auth-wrapper .form-hint i, .auth-wrapper .help-text i { margin-top: .15rem; flex: 0 0 auto; }

.auth-wrapper .form-section + .form-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--auth-border);
}

.auth-wrapper .form-section__header { margin-bottom: 1.25rem; }
.auth-wrapper .auth-container .form-section__header h2 { margin: 0; color: var(--auth-text); font-size: 1.05rem; font-weight: 750; line-height: 1.3; text-align: left; letter-spacing: -.01em; }
.auth-wrapper .form-section__header p { margin: .35rem 0 0; color: var(--auth-muted); font-size: .9rem; line-height: 1.45; }
.auth-wrapper .form-group { margin-bottom: 1.15rem; }

.auth-wrapper .form-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  color: var(--auth-text);
  font-size: .92rem;
  font-weight: 700;
}
.auth-wrapper .form-label i { width: 1rem; color: var(--auth-primary); text-align: center; }
.auth-wrapper .form-input-wrapper { position: relative; }

.auth-wrapper .form-input {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 3.35rem .75rem 3rem;
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius);
  color: var(--auth-text);
  background: var(--auth-surface);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.auth-wrapper .form-input::placeholder { color: var(--auth-muted); opacity: .82; }
.auth-wrapper .form-input:hover:not(:disabled) { border-color: var(--auth-primary); }
.auth-wrapper .form-input:focus-visible { outline: none; border-color: var(--auth-primary); box-shadow: 0 0 0 .22rem var(--auth-focus); }
.auth-wrapper .form-input:disabled { cursor: not-allowed; opacity: .62; background: var(--auth-surface-muted); }

.auth-wrapper .form-input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--auth-muted);
  pointer-events: none;
}
.auth-wrapper .form-input-wrapper:focus-within .form-input-icon { color: var(--auth-primary); }

.auth-wrapper .password-toggle {
  position: absolute;
  top: 50%;
  right: .45rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  border-radius: .55rem;
  color: var(--auth-muted);
  background: transparent;
  cursor: pointer;
}
.auth-wrapper .password-toggle:hover { color: var(--auth-primary); background: var(--auth-surface-muted); }

.auth-wrapper .auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .25rem 0 1.2rem;
}

.auth-wrapper .auth-link, .auth-wrapper .auth-text-link {
  color: var(--auth-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
}
.auth-wrapper :is(.auth-link, .auth-text-link):hover { color: var(--auth-primary-hover); text-decoration-color: currentColor; }

.auth-wrapper .auth-text-button {
  min-height: 2.75rem;
  padding: .45rem .2rem;
  border: 0;
  border-radius: .5rem;
  color: var(--auth-primary);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  cursor: pointer;
}
.auth-wrapper .auth-text-button:hover { color: var(--auth-primary-hover); text-decoration-color: currentColor; }

.auth-wrapper .remember-me, .auth-wrapper .auth-check-row {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .65rem;
  color: var(--auth-muted);
  cursor: pointer;
}
.auth-wrapper input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--auth-primary); }

.auth-wrapper .btn {
  display: inline-flex;
  width: 100%;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--auth-radius);
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.auth-wrapper .btn:hover:not(:disabled) { transform: translateY(-1px); }
.auth-wrapper .btn:disabled { cursor: not-allowed; opacity: .58; }
.auth-wrapper :is(.btn-primary, .btn-passkey) { color: var(--auth-on-primary); background: var(--auth-primary); border-color: var(--auth-primary); }
.auth-wrapper :is(.btn-primary, .btn-passkey):hover:not(:disabled) { color: var(--auth-on-primary); background: var(--auth-primary-hover); border-color: var(--auth-primary-hover); }
.auth-wrapper .btn-secondary { color: var(--auth-text); background: var(--auth-surface); border-color: var(--auth-border-strong); }
.auth-wrapper .btn-secondary:hover:not(:disabled) { color: var(--auth-primary); background: var(--auth-surface-muted); border-color: var(--auth-primary); }
.auth-wrapper .btn-tertiary { color: var(--auth-primary); background: transparent; border-color: transparent; }
.auth-wrapper .btn-tertiary:hover:not(:disabled) { background: var(--auth-surface-muted); }
.auth-wrapper .btn-small { min-height: 2.75rem; padding: .6rem .9rem; font-size: .9rem; }
.auth-wrapper .btn.loading { pointer-events: none; }
.auth-wrapper .btn.loading::after { content: ""; width: 1rem; height: 1rem; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin 700ms linear infinite; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.5rem 0;
  color: var(--auth-muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--auth-border); }

.auth-footer, .register-prompt, .auth-support {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--auth-border);
  text-align: center;
}
.register-prompt p, .auth-support p { margin: 0 0 .75rem; color: var(--auth-muted); font-size: .9rem; }
.auth-support__title { margin: 0 0 .65rem; color: var(--auth-text); font-size: 1rem; font-weight: 750; }
.auth-secondary-actions {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  width: 100%;
}
.auth-secondary-actions--single { grid-template-columns: minmax(0, 1fr); }
.auth-secondary-action {
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--auth-radius);
  color: var(--auth-primary);
  background: transparent;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.auth-secondary-action--secondary { border-color: var(--auth-border-strong); background: var(--auth-surface); }
.auth-secondary-action--tertiary { background: var(--auth-surface-muted); }
.auth-secondary-action:hover:not(:disabled) { color: var(--auth-primary-hover); border-color: var(--auth-primary); }
.auth-secondary-action:disabled { cursor: not-allowed; opacity: .58; }
.auth-footer .help-text { justify-content: center; margin-bottom: .75rem; }
.verification-help { margin-top: 1.25rem; text-align: center; }
.verification-hint, .verification-modal-subtitle { margin: .65rem 0 0; color: var(--auth-muted); font-size: .88rem; line-height: 1.5; }

.verification-modal {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  padding: 1rem;
  place-items: center;
  background: rgba(5,10,20,.68);
}
.verification-modal-content { position: relative; width: min(100%, 29rem); padding: 2rem; border: 1px solid var(--auth-border); border-radius: var(--auth-radius-lg); color: var(--auth-text); background: var(--auth-surface); box-shadow: var(--auth-shadow); }
.verification-modal-content h2 { margin: 0; padding-right: 2rem; color: var(--auth-text); font-size: 1.35rem; }
.verification-form { display: grid; gap: .75rem; margin-top: 1.25rem; }
.verification-input { padding-left: 1rem !important; }
.modal-close { position: absolute; top: .9rem; right: .9rem; display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 0; border-radius: .65rem; color: var(--auth-muted); background: transparent; cursor: pointer; }
.modal-close:hover { color: var(--auth-text); background: var(--auth-surface-muted); }

.alert { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; padding: .9rem 1rem; border: 1px solid; border-radius: var(--auth-radius); font-size: .9rem; line-height: 1.45; }
.alert ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.alert-error { color: var(--auth-error); background: light-dark(#fff1f0, rgba(255,143,134,.09)); border-color: light-dark(#f0b5b0, rgba(255,143,134,.42)); }
.alert-success { color: var(--auth-success); background: light-dark(#eefbf3, rgba(92,218,145,.09)); border-color: light-dark(#a9ddbd, rgba(92,218,145,.38)); }
.alert-info { color: var(--auth-primary); background: light-dark(#edf4ff, rgba(119,167,255,.09)); border-color: light-dark(#bad0f7, rgba(119,167,255,.4)); }

.strength-meter { height: .4rem; margin-top: .6rem; overflow: hidden; border-radius: 999px; background: var(--auth-border); }
.strength-meter-fill { width: 0; height: 100%; border-radius: inherit; transition: width 180ms ease, background-color 180ms ease; }
.strength-weak { width: 34%; background: var(--auth-error); }
.strength-medium { width: 67%; background: var(--auth-warning); }
.strength-strong { width: 100%; background: var(--auth-success); }

.password-requirements-container { margin: .5rem 0 1rem; padding: 1rem; border: 1px solid var(--auth-border); border-radius: var(--auth-radius); background: var(--auth-surface-muted); }
.password-requirements-container > p { margin: 0 0 .7rem; color: var(--auth-text); font-size: .88rem; font-weight: 750; }
.password-requirements { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .45rem .8rem; margin: 0; padding: 0; list-style: none; }
.password-requirements li { display: flex; align-items: flex-start; gap: .45rem; color: var(--auth-muted); font-size: .82rem; line-height: 1.4; }
.password-requirements li::before { content: "\f111"; margin-top: .1rem; color: var(--auth-muted); font-family: "Font Awesome 6 Free"; font-size: .65rem; font-weight: 900; opacity: .55; }
.password-requirements li.valid { color: var(--auth-success); }
.password-requirements li.valid::before { content: "\f058"; color: var(--auth-success); font-size: .8rem; opacity: 1; }
.password-requirements-details { margin-top: .8rem; color: var(--auth-muted); font-size: .84rem; }
.password-requirements-details summary { min-height: 2.5rem; padding: .55rem 0; color: var(--auth-primary); font-weight: 700; cursor: pointer; }
.password-requirements--details { margin-top: .45rem; padding-top: .7rem; border-top: 1px solid var(--auth-border); }

.password-match, .user-inline-status, #pwd-now-missing { display: flex; align-items: flex-start; gap: .45rem; margin-top: .5rem; color: var(--auth-error); font-size: .84rem; line-height: 1.4; }
.password-match.valid, .user-inline-status.valid, .user-inline-status--available { color: var(--auth-success); }
.user-inline-status--checking { color: var(--auth-primary); }
.user-inline-status--error, .user-inline-status--invalid, .user-inline-status--taken { color: var(--auth-error); }
#pwd-now-missing { padding: .7rem .8rem; border-radius: .55rem; background: var(--auth-surface-muted); }

.auth-actions { display: grid; gap: .75rem; margin-top: 1.25rem; }
.auth-back-button { margin-top: .75rem; }
.auth-shake { animation: shake 500ms ease; }
.hidden { display: none !important; }

@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-.4rem); } 75% { transform: translateX(.4rem); } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-.5rem); } }

.auth-wrapper :is(.btn,.form-input,.auth-link,.auth-text-link,.auth-text-button,.auth-secondary-action,.password-toggle,.modal-close,input[type="checkbox"]):focus-visible { outline: 3px solid var(--auth-focus); outline-offset: 2px; }

.auth-wrapper .form-input:-webkit-autofill,
.auth-wrapper .form-input:-webkit-autofill:hover,
.auth-wrapper .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-text);
  caret-color: var(--auth-text);
  box-shadow: 0 0 0 1000px var(--auth-surface) inset;
  transition: background-color 9999s ease-out;
}

@media (max-width: 760px) {
  .auth-wrapper { padding-inline: .75rem; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-intro { padding: 1.75rem; }
  .auth-intro h1 { font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .auth-intro__description { margin-top: .75rem; }
  .auth-intro__points { display: none; }
  .auth-container { padding: 1.75rem; }
}

@media (max-width: 460px) {
  .auth-wrapper { padding: .75rem .75rem 2rem; }
  .auth-layout, .auth-wrapper > .auth-container { border-radius: 1rem; box-shadow: 0 14px 38px light-dark(rgba(22, 36, 60, .1), rgba(0, 0, 0, .3)); }
  .auth-intro { padding: 1.25rem; }
  .auth-intro__description, .auth-intro__points { display: none; }
  .auth-intro h1 { font-size: clamp(1.55rem, 8vw, 2rem) !important; line-height: 1.08; }
  .auth-container { padding: 1.5rem 1.1rem; }
  .auth-wrapper .auth-container .auth-header :is(h1, h2) {
    font-size: clamp(1.6rem, 7vw, 1.9rem) !important;
    text-align: left !important;
  }
  .auth-wrapper .auth-container .auth-header--centered :is(h1, h2) { text-align: center !important; }
  .auth-wrapper .form-input { font-size: 1rem; }
  .auth-wrapper .auth-links { align-items: flex-start; flex-direction: column; }
  .auth-secondary-actions { grid-template-columns: minmax(0, 1fr); }
  .password-requirements { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-wrapper *, .auth-wrapper *::before, .auth-wrapper *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  .auth-layout, .auth-wrapper > .auth-container, .auth-wrapper .form-input, .auth-wrapper .btn-secondary { border-width: 2px; }
}