/* EVO TrustGuard — page-register.css
 *
 * Owned by:    register.html
 * Category:    auth / pre-onboarding page
 * Cascade:     tokens → base → utilities → components → shared → page
 * Edit policy: rules unique to this page only. Anything used by 5+
 *              pages should be promoted to /css/components.css or
 *              /css/portal-chrome.css with a /css/AGENTS.md update.
 *
 * Single-tone dark conversion (this sprint):
 *   /register.html now renders single-tone dark unconditionally — body
 *   and form surface both sit on var(--bg) (#1a1a1a charcoal). Matches
 *   the LOCKED C70 marketing dark conversion pattern used on /index.html
 *   /about.html /contact.html, but uses single-tone treatment (no
 *   elevated card surface) per Sean's call — focused signup task, no
 *   sectional storytelling needed. Inputs sit one notch up on
 *   var(--marketing-section-elevated) (#242424) so the form stays
 *   visually grouped without a separate white card.
 *
 *   Token strategy mirrors /css/page-index.css + /css/page-static.css:
 *   marketing-namespaced tokens (--marketing-section-elevated,
 *   --marketing-border, --marketing-red-accent) drive surfaces; primary
 *   text uses literal #f5f5f5 because no light-mode token resolves to
 *   off-white without data-theme="dark", and this page sets no theme
 *   attribute (matches the marketing-page convention). Muted secondary
 *   text uses var(--text-disabled) / var(--text-faint) which resolve to
 *   light grays in BOTH themes and clear AA contrast on var(--bg).
 *
 *   Brand logo SVG has hardcoded fill="#1a1a1a" on the TrustGuard
 *   wordmark (invisible on dark) — overridden via the same .brand-logo
 *   .brand-trustguard rule used in /css/page-index.css line 61.
 *
 *   Early Access notice container is inline-styled in register.html
 *   (out of scope for this CSS-only sprint) — overridden via
 *   [style*=...] attribute selector with !important because inline
 *   styles outrank class selectors. Targets the var(--surface-light)
 *   background literal in the inline style attribute.
 *
 * Button radius (this sprint):
 *   .auth-btn was border-radius: 100px (full pill). Replaced with
 *   var(--radius-md) (8px) per LOCKED C37/C38 platform action-button
 *   standard. .waitlist-btn inherits via .auth-btn cascade.
 */

/* ── Body + nav ───────────────────────────────────────────────── */

  body { font-family: var(--font-sans); background: var(--bg); color: #f5f5f5; line-height: var(--leading-loose); min-height: 100vh; display: flex; flex-direction: column; }

  /* Brand logo — TrustGuard wordmark fill in the SVG is hardcoded
     #1a1a1a (invisible on dark). Override to match the dark-marketing
     pattern from /css/page-index.css. EVO red is fine as-is. */
  .brand-logo .brand-trustguard { fill: #f5f5f5; }

  .auth-nav { background: var(--bg); border-bottom: 1px solid var(--marketing-border); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
  .auth-nav-brand { font-family: var(--font-serif); font-size: var(--text-3xl); color: #f5f5f5; letter-spacing: var(--tracking-tighter); text-decoration: none; }
  .auth-nav-brand span { color: var(--marketing-red-accent); }
  .auth-nav-link { font-size: var(--text-base); color: var(--text-disabled); text-decoration: none; font-weight: var(--weight-medium); transition: color 0.15s; }
  .auth-nav-link:hover { color: #f5f5f5; }

  /* ── Form surface — single-tone (no elevated card) ──────────── */

  .auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-4); }
  .auth-card { background: var(--bg); border: none; border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); width: 100%; max-width: 420px; }
  .auth-card h1 { font-family: var(--font-serif); font-size: var(--text-display-sm); color: #f5f5f5; margin-bottom: var(--space-1-5); letter-spacing: var(--tracking-tighter); }
  .auth-card .auth-subtitle { font-size: var(--text-base); color: var(--text-disabled); font-weight: var(--weight-light); margin-bottom: var(--space-7); }

  /* ── Form fields ─────────────────────────────────────────────── */

  .auth-field { margin-bottom: var(--space-4); }
  .auth-field label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #f5f5f5; margin-bottom: 5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  .auth-field input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--marketing-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-lg); color: #f5f5f5; background: var(--marketing-section-elevated); outline: none; transition: border-color 0.15s; }
  /* Placeholder color: var(--text-disabled) #bbbbbb is used in place of
     var(--text-faint) #888 because the input fill is the elevated tone
     var(--marketing-section-elevated) #242424 — #888 on #242424 lands
     at ~4.2:1 (fails AA 4.5:1 for small text), while #bbb on #242424
     hits ~7.9:1 (AAA). Footer text uses --text-faint deliberately
     because that text sits on var(--bg) #1a1a1a where #888 reaches
     ~4.9:1 (clears AA), matching the /index.html footer precedent. */
  .auth-field input::placeholder { color: var(--text-disabled); }
  .auth-field input:focus { border-color: var(--marketing-red-accent); }
  .auth-hint { font-size: var(--text-sm); color: var(--text-disabled); margin-top: var(--space-1); font-weight: var(--weight-light); }
  .auth-field-pw { position: relative; }
  .auth-field-pw input { padding-right: 44px; }
  .pw-toggle { position: absolute; right: var(--space-2-5); top: 26px; background: none; border: none; cursor: pointer; padding: var(--space-1); color: var(--text-disabled); display: flex; align-items: center; justify-content: center; }
  .pw-toggle:hover { color: #f5f5f5; }
  .pw-toggle svg { width: 20px; height: 20px; }
  .pw-toggle .eye-closed { display: none; }
  .auth-error { color: var(--marketing-red-accent); font-size: var(--text-md); margin-bottom: var(--space-3); display: none; }

  /* ── Action buttons — 8px rounded rectangle (LOCKED C37/C38) ── */

  .auth-btn { display: block; width: 100%; background: var(--red); color: var(--white); border: none; padding: 13px 20px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); cursor: pointer; transition: background 0.2s; }
  .auth-btn:hover { background: var(--red-hover); }
  .auth-btn:disabled { background: var(--marketing-border); color: var(--text-faint); cursor: not-allowed; }

  .auth-links { margin-top: var(--space-5); text-align: center; font-size: var(--text-base); color: var(--text-disabled); }
  .auth-links a { color: var(--marketing-red-accent); text-decoration: none; font-weight: var(--weight-medium); }
  .auth-links a:hover { text-decoration: underline; }

  .auth-success { display: none; text-align: center; padding: var(--space-5) 0; }
  .auth-success-icon { width: 60px; height: 60px; background: var(--status-active-wash); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .auth-success-icon svg { width: 30px; height: 30px; }
  .auth-success h3 { font-family: var(--font-serif); font-size: var(--text-3xl); color: #f5f5f5; margin-bottom: var(--space-2-5); }
  .auth-success p { font-size: var(--text-base); color: var(--text-disabled); font-weight: var(--weight-light); line-height: 1.7; }

  /* ── Footer (matches /index.html dark-footer separation) ────── */

  .auth-footer { background: var(--bg); border-top: 1px solid var(--marketing-section-elevated); padding: 30px 2rem; text-align: center; }
  .auth-footer-brand { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--white); margin-bottom: var(--space-1-5); }
  .auth-footer-brand span { color: var(--marketing-red-accent); }
  .auth-footer p { font-size: var(--text-sm); color: var(--text-faint); font-weight: var(--weight-light); }
  .auth-footer a { color: var(--text-faint); text-decoration: none; font-size: var(--text-sm); margin: 0 var(--space-2); transition: color 0.15s; }
  .auth-footer a:hover { color: var(--white); }
  .auth-footer-links { margin-top: var(--space-3); }

  @media (max-width: 600px) {
    .auth-nav { padding: 0.75rem 1rem; }
    .auth-card { padding: var(--space-8) var(--space-5); }
    .auth-wrap { padding: var(--space-6) var(--space-4); }
  }

  /* ── Stripe payment section (LOCKED C61 — 1C signup checkout) ───────── */
  .payment-section { margin: var(--space-5) 0 var(--space-3); padding: var(--space-4) var(--space-4); background: var(--marketing-section-elevated); border: 1px solid var(--marketing-border); border-radius: var(--radius-md); }
  .payment-headline { font-size: var(--text-base); font-weight: var(--weight-semibold); color: #f5f5f5; margin-bottom: var(--space-1); }
  .payment-sub { font-size: var(--text-sm); color: var(--text-disabled); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
  /* Stripe card element sits inside .payment-section (already elevated),
     so use the deepest tone here so the card field reads as a clear
     input slot against the section fill. */
  .stripe-card-element { width: 100%; padding: 12px 14px; border: 1.5px solid var(--marketing-border); border-radius: var(--radius-md); background: var(--bg); transition: border-color 0.15s; min-height: 44px; }
  .stripe-card-element.StripeElement--focus { border-color: var(--marketing-red-accent); }
  .stripe-card-element.StripeElement--invalid { border-color: var(--danger); }
  .card-errors { color: var(--marketing-red-accent); font-size: var(--text-sm); margin-top: var(--space-1-5); min-height: 1em; line-height: var(--leading-snug); }

  /* ── Brand-logo nav image sizing (preserved from prior sprint) ── */

.nav-brand img, .dash-nav-brand img { height: 48px !important; width: auto !important; min-height: 48px !important; max-height: none !important; }

/* ── Waitlist email capture (pre-launch funnel) ───────────────────────── */
/* Sits between the Early Access notice and the subscription signup form.
   Visual language matches the existing auth-field + auth-btn patterns so
   the two forms feel like they belong on the same page. */
.waitlist-block { margin: 0 0 var(--space-6); padding: var(--space-4); background: var(--marketing-section-elevated); border: 1px solid var(--marketing-border); border-radius: var(--radius-md); }
.waitlist-lede { font-size: var(--text-sm); color: var(--text-disabled); font-weight: var(--weight-medium); margin: 0 0 var(--space-3); line-height: var(--leading-relaxed); }
.waitlist-form .waitlist-field { margin-bottom: var(--space-3); }
/* Waitlist email input nests inside .waitlist-block (already elevated to
   var(--marketing-section-elevated)). Drop input fill to var(--bg) so
   the input slot reads as a clear field against the block fill, matching
   the .stripe-card-element pattern inside .payment-section. */
.waitlist-form .auth-field input { background: var(--bg); }
.waitlist-form .auth-error { display: none; }
.waitlist-btn { padding: 11px 20px; font-size: var(--text-base); }
.waitlist-success p { font-size: var(--text-base); color: #f5f5f5; font-weight: var(--weight-medium); margin: 0; line-height: var(--leading-relaxed); }

/* ── Early Access notice — inline-style override ──────────────────────
 * register.html's Early Access notice is inline-styled (the only bare
 * <div> child of .auth-card with no class). CSS-only sprint can't add
 * a class, and inline styles outrank class selectors — so we target via
 * [style*=...] attribute selector + !important. The inline style uses
 * background: var(--surface-light) which matches nothing else on the
 * page, so this attribute selector is precise. Strong + a children
 * also need overrides because the inline style sets their colors too.
 */
.auth-card > div[style*="surface-light"] {
  background: var(--marketing-section-elevated) !important;
  border-color: var(--marketing-border) !important;
  border-left-color: var(--marketing-red-accent) !important;
  color: var(--text-disabled) !important;
}
.auth-card > div[style*="surface-light"] strong { color: #f5f5f5 !important; }
.auth-card > div[style*="surface-light"] a { color: var(--marketing-red-accent) !important; }