/* EVO TrustGuard — page-marketplace-signup.css
 *
 * Owned by:    marketplace-signup.html
 * Category:    auth / pre-onboarding page (card-free free-tier signup)
 * 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 (C102 — LOCKED C99-A dark-only launch):
 *   /marketplace-signup.html renders single-tone dark unconditionally —
 *   body and form surface both sit on var(--bg) (#1a1a1a charcoal),
 *   matching /login.html + /register.html (see /css/page-login.css, the
 *   canonical reference). The page sets no data-theme attribute, so design
 *   tokens resolve to LIGHT defaults (--dark/--mid/--light = dark text,
 *   --border = light gray) which are invisible/wrong on dark — so primary
 *   text uses literal #f5f5f5 and surfaces/borders use marketing-namespaced
 *   tokens (--marketing-border, --marketing-section-elevated,
 *   --marketing-red-accent). Muted secondary text uses var(--text-disabled) /
 *   var(--text-faint), which resolve to light grays in BOTH themes.
 *
 *   Brand logo SVG has hardcoded fill="#1a1a1a" on the TrustGuard wordmark
 *   (invisible on dark) — overridden via .brand-logo .brand-trustguard.
 *
 * Button radius: ALL action buttons are var(--radius-md) (8px) — rectangular,
 *   NEVER pill/oval, per LOCKED C68-B-1A.6-A.
 */

/* ── 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-login.css. EVO red is fine as-is. */
  .brand-logo .brand-trustguard { fill: #f5f5f5; }

  /* NAV */
  .auth-nav { background: var(--bg); border-bottom: 1px solid var(--marketing-border); padding: calc(1rem + env(safe-area-inset-top)) 2rem 1rem; 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; }

  /* AUTH LAYOUT — 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); line-height: var(--leading-relaxed); }

  /* FORM */
  .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; }
  .auth-field input::placeholder { color: var(--text-disabled); }
  .auth-field input:focus { border-color: var(--marketing-red-accent); }
  /* Chrome/Safari autofill override — repaints the browser's white autofill
     fill so autofilled values stay legible on the dark single-tone surface.
     Page sets no data-theme attribute, so this is PAGE-SCOPED
     (cf. /css/page-login.css + /css/page-register.css). */
  .auth-field input:-webkit-autofill,
  .auth-field input:-webkit-autofill:hover,
  .auth-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--marketing-section-elevated) inset !important;
    -webkit-text-fill-color: #f5f5f5 !important;
    caret-color: #f5f5f5;
    border-color: var(--marketing-border) !important;
  }
  .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 button — 8px rounded rectangle (LOCKED C68-B-1A.6-A) ── */
  .auth-btn { display: block; width: 100%; background: var(--btn-primary-bg); color: var(--btn-primary-text); border: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); padding: 13px 20px; border-radius: var(--btn-radius); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); cursor: pointer; transition: filter 0.15s ease, transform 0.18s var(--ease-spring); }
  .auth-btn:hover { filter: brightness(1.06); }
  .auth-btn:active { transform: scale(var(--press-scale)); }
  .auth-btn:disabled { background: var(--marketing-border); color: var(--text-faint); cursor: not-allowed; }

  /* LINKS */
  .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; }

  /* FOOTER (matches /css/page-login.css 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); }

  /* MOBILE */
  @media (max-width: 600px) {
    .auth-nav { padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem; }
    .auth-nav .auth-nav-brand img { height: 40px !important; width: auto !important; }
    .auth-card { padding: var(--space-8) var(--space-5); }
    .auth-wrap { padding: var(--space-6) var(--space-4); }
  }

  /* ── Brand-logo nav image sizing (matches auth-page convention) ── */
.nav-brand img, .dash-nav-brand img { height: 48px !important; width: auto !important; min-height: 48px !important; max-height: none !important; }