/* Auth pages — login / signup / 2FA / activation. Builds on site.css. */

.auth-page { background: var(--blue); }

.auth-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #fff; padding: 20px 0; }
.auth-bar .container { display: flex; align-items: center; justify-content: space-between; }
.auth-bar__back { font: 700 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.auth-bar__back:hover { color: var(--orange); }

.auth-card--wide { width: min(620px, 100%); }
.auth-card .eyebrow { display: block; margin-bottom: 14px; }
.auth-card .lede { color: rgba(255, 255, 255, .58); font-size: 13px; line-height: 1.6; margin: 4px 0 26px; }
.auth-card .field label { color: rgba(255, 255, 255, .5); }
.auth-card .field input, .auth-card .field select {
  background: #0d1018; border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  padding: 14px; outline: none; border-radius: var(--radius); width: 100%;
}
.auth-card .field input:focus, .auth-card .field select:focus { border-color: var(--orange); }
.auth-card .field input.err, .auth-card .field select.err { border-color: var(--red); }
.auth-card .form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.auth-card .btn { width: 100%; }
.auth-card .btn[disabled] { opacity: .45; pointer-events: none; }

.auth-foot { margin-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .55); text-align: center; }
.auth-foot a { color: var(--orange); font-weight: 700; }

/* password show/hide */
.pw-field { position: relative; }
.pw-field input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-30%); background: none; border: 0;
  color: rgba(255, 255, 255, .5); cursor: pointer; font-size: 13px; }
.pw-toggle:hover { color: #fff; }

/* login mode tabs */
.auth-tabs { display: flex; gap: 6px; margin: 6px 0 22px; }
.auth-tabs a { flex: 1; text-align: center; padding: 11px 8px; border: 1px solid rgba(255, 255, 255, .18);
  font: 800 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.auth-tabs a.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* per-field inline validation message (signup.js targets .field-msg spans) */
.field-msg { display: block; font: 400 11px "DM Mono", monospace; min-height: 0; margin-top: 2px; }
.field-msg:empty { display: none; }
.field-msg .ok { color: #6ee7a0; }
.field-msg span[style*="green"] { color: #6ee7a0 !important; }
.field-msg span[style*="red"] { color: #ff8a8a !important; }

/* signup — multi-step wizard
   Progressive enhancement: without .js every step is visible and the nav is
   hidden (one long form + one submit); with .js only the active step shows. */
.wizard-progress { grid-column: 1 / -1; margin-bottom: 6px; }
.wizard-progress__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 700 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.wizard-progress__meta b { color: #fff; font-weight: 800; }
.wizard-bar { margin-top: 10px; height: 3px; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; }
.wizard-bar span { display: block; height: 100%; width: 33%; background: var(--orange); transition: width .35s var(--ease, ease); }

.form-step { grid-column: 1 / -1; }
/* wizard chrome only matters once signup.js has taken over the form.
   Without it: every step shows, progress + Back/Next are hidden, submit stays. */
.form:not([data-wizard]) .wizard-progress,
.form:not([data-wizard]) [data-wiz="back"],
.form:not([data-wizard]) [data-wiz="next"] { display: none; }
.form[data-wizard] .form-step { display: none; }
.form[data-wizard] .form-step.is-active { display: block; }
.wizard-nav [hidden] { display: none; }
.form-step__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-step__grid .field.full,
.form-step__grid > .field:only-child { grid-column: 1 / -1; }

.auth-section { margin: 0 0 16px; }
.auth-section h2 {
  font: 800 12px "DM Mono", monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange); margin: 0;
}
.auth-section p { color: rgba(255, 255, 255, .45); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }

.auth-consent { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 8px; }
.auth-consent input { margin-top: 3px; width: auto; flex: none; }
.auth-consent a { color: var(--orange); }

.g-recaptcha { margin-top: 6px; }

.wizard-nav { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 22px; }
.wizard-nav .btn { flex: 1; margin-top: 0; background: transparent; }
.wizard-nav .btn.dark { color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .25); }
.wizard-nav .btn.dark:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); transform: none; }
.wizard-nav .btn.light:hover { background: var(--orange); border-color: var(--orange); }
.wizard-nav .btn.primary { background: var(--red); }
.wizard-nav [hidden] { display: none; }

@media (max-width: 560px) {
  .form-step__grid { grid-template-columns: 1fr; }
}

/* slim footer bar under the card */
.auth-foot-bar { position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; }
.auth-foot-bar .container {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font: 400 10px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.auth-foot-bar a { color: rgba(255, 255, 255, .6); }
.auth-foot-bar a:hover { color: var(--orange); }

@media (max-width: 560px) {
  .auth-bar { padding: 14px 0; }
  .auth-wrap { padding: 110px 0 60px; }
}