/* Unified auth pages — login / signup / forgot / reset (2026-07-24).
   One centered card, glyph, consistent heading, no colon labels. Replaces the
   per-page login.css / signup.css / app-forgot.css / public-resetPassword.css.
   Reuses global brand.css tokens; overrides Skeleton/Foundation for the shared
   #login-container / #signup-container + .card#card-center structure. */

/* ── Page wrapper (centers the card) ─────────────────────────────────── */
/* position:static/transform:none override a global rule that absolutely-
   positions #login-container (old login.css reset it the same way). */
#login-container, #signup-container {
  position: static; transform: none;
  max-width: 460px; width: 100%; margin: 3rem auto; padding: 0 1rem;
}

/* ── The card ────────────────────────────────────────────────────────── */
#login-container,
#signup-container #card-center {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px;
}
#signup-container #card-center { margin: 0; }
.card-section { padding: 0; }

/* ── Header: glyph + heading + sub ───────────────────────────────────── */
.auth-head { text-align: center; margin-bottom: 20px; border: 0; padding: 0; }
#login-container .brand__glyph,
#signup-container .brand__glyph {
  width: 44px; height: 44px; border-radius: 11px; display: block; margin: 0 auto 14px;
}
/* Both auth pages now use <h1 class="login-title">; the signup h3 selector is kept
   so the style survives if that markup is ever reverted. */
.login-title,
#signup-container .card-divider h3 {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  color: var(--color-text-strong); border: 0; text-align: center;
}
.card-divider { border: 0; padding: 0; margin: 0; }
.auth-sub { text-align: center; color: var(--color-text-muted); font-size: 14px; margin: 6px 0 0; }

/* ── Fields ──────────────────────────────────────────────────────────── */
#form-fileds-container { display: block; }
#form-fileds-container label {
  display: block; font-size: 13px; font-weight: 600; color: var(--color-text-strong); margin: 15px 0 6px;
}
#form-fileds-container input[type="text"],
#form-fileds-container input[type="email"],
#form-fileds-container input[type="password"] {
  width: 100%; height: auto; margin: 0; padding: 10px 12px;
  font-size: 15px; font-family: var(--font-sans); color: var(--color-text-strong);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
#form-fileds-container input:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint);
}
#form-fileds-container input::placeholder { color: var(--color-text-muted); opacity: .8; }

/* Password field + visibility toggle */
.password-wrapper { position: relative; display: flex; align-items: center; }
.password-wrapper input { width: 100%; padding-right: 40px; }
#togglePassword { position: absolute; right: 12px; cursor: pointer; color: var(--color-text-muted); }
#togglePassword:hover { color: var(--color-primary); }

/* Two-column name row (signup) */
.auth-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.auth-grid2 .auth-fld label { margin-top: 15px; }

/* Password hint lines */
.password-text-data { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.text-red { color: var(--color-danger) !important; }
.text-black { color: var(--color-text-muted); }

/* Terms checkbox */
#terms-container { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin: 16px 0 0; }
#terms-container input { margin: 0; width: auto; }
#terms-container label { margin: 0; font-weight: 500; display: inline; }

/* Cloudflare Turnstile widget.
 *
 * NOTE the selector: the container id changed with the Turnstile swap and this rule kept
 * the OLD id — so it silently stopped matching and
 * the widget rendered flush-left with no spacing. Nothing errors when a CSS selector matches
 * nothing, which is the same trap the legal pages hit with .doc/.doc--legal. */
#turnstile-container {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}
/* The widget is a fixed-size iframe; let it shrink rather than overflow on narrow screens. */
#turnstile-container .cf-turnstile { max-width: 100%; }

/* ── Submit button (override Skeleton's .button.submit) ──────────────── */
.button.submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: auto;
  margin: 18px 0 0; padding: 11px 18px; font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  line-height: 1; color: #fff; background: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); cursor: pointer; text-transform: none; letter-spacing: normal;
}
.button.submit:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.button.submit:disabled { opacity: .55; cursor: not-allowed; }
#submit-container, #login-button-container { margin: 0; }

/* ── Alt links (Log in / Sign up / Forgot) ──────────────────────────── */
.auth-alt { text-align: center; font-size: 13.5px; color: var(--color-text-muted); margin-top: 16px; }
.auth-alt a { color: var(--color-primary); font-weight: 600; }
#signup, #forgot { text-align: center; margin-top: 10px; }
#signup a, #forgot a { color: var(--color-primary); font-weight: 600; font-size: 13.5px; }

/* ── Messages ────────────────────────────────────────────────────────── */
#errors, .errors { color: var(--color-danger); font-size: 13.5px; }
#errors:empty, #success:empty { display: none; }
#success, .success { color: var(--color-success); font-size: 13.5px; }
.success-message { color: var(--color-success); font-size: 13.5px; }

/* Hide the honeypot.
 *
 * display:none, NOT the old `position:absolute; left:-9999px`. Browsers autofill an
 * off-screen field — Chrome's autofill only skips fields it considers INVISIBLE — and a
 * field named "phone" is one of the strongest autofill signals there is. That is how a
 * real person got "Not Human." on signup twice on 2026-08-05.
 *
 * autocomplete="off" alone does NOT fix it: Chrome deliberately ignores autocomplete="off"
 * for address/contact autofill. It was added to the markup, the field was still filled,
 * and writable/logs/binder-signup.log recorded the honeypot firing again. display:none is
 * what actually removes the field from autofill's candidates.
 *
 * The trade — a bot that renders CSS can now see it is hidden and skip it — is acceptable:
 * Cloudflare Turnstile (verified live 2026-08-05) is the real bot control on these forms,
 * and rate limiting plus account lockout sit behind it. A honeypot that rejects paying
 * customers is worth strictly less than nothing.
 *
 * If "Not Human." is ever reported again, the next step is renaming the field away from
 * "phone" (Index::signUp/login read $userInput['phone']), not more CSS.
 */
form input#phone { display: none !important; }

/* Resend-verification (login, conditional) */
#resendVerifyForm { margin-top: 12px; }
#resendVerifyForm input { width: 100%; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: 4px; }
#resendVerifyBtn { margin-top: 8px; }
#verify-notice, #session-expired-notice, #success-message { font-size: 13.5px; margin-bottom: 12px; }

/* ── Post-signup "check your email" panel ────────────────────────────────
   Shown in #success after a successful signup, in place of the form. Login is
   gated on email verification, so this screen replaced a (broken) redirect to
   /login, which sent new users to a form that would refuse them. */
.verify-notice { text-align: center; color: var(--color-text-strong); }
.verify-notice__icon {
  font-size: 30px; line-height: 1; margin: 4px auto 12px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-tint); color: var(--color-primary); border-radius: 50%;
}
.verify-notice__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.verify-notice p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.verify-notice strong { word-break: break-all; }   /* long addresses must not overflow the card */
.verify-notice__hint { font-size: 13px; color: var(--color-text-muted); }
.verify-notice__actions { margin-top: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.verify-notice__actions .button.submit { margin: 0; }
.verify-notice__login { font-size: 13.5px; font-weight: 600; color: var(--color-primary); }

/* Resend-verification form. The margin used to be an inline style="" attribute, which the
   CSP blocks ("Applying inline style violates ... style-src") because style-src carries no
   'unsafe-inline' and hashes do not apply to style ATTRIBUTES without 'unsafe-hashes'.
   It only started firing on every page load when the form became always-rendered. */
#resendVerifyForm { margin-top: 8px; }