/* ============================================================
   signup.css - the 3-step account-creation wizard
   Uses base.css's own tokens throughout (--navy-*, --gold, --card, --muted,
   --line, --radius) so a future retint changes token VALUES, not this file.

   DARK-THEME PASS + the 12px floor (ui-ux, 15 Oct 2026; account-signup's
   file, routed by CI/CD as urgent -- the page is live and being tested).
   Findings S-01..S-06 (deploy/handover/ui-ux/SIGNUP-WIZARD-FINDINGS.md):
   the Back button was --navy-1 on the navy card (1.51:1); field errors
   were #c0392b at 3.01:1 and 11.5px; the selects were white slabs between
   --input-bg inputs; the message banners were light pastels; four sizes
   sat under the 12px floor; the active step dot was navy on navy. Every
   colour is a base.css token now (dark at base.css:265-268, light in the
   [data-theme="light"] block), the banners use the inset-accent treatment
   the slip, account and session sheets use (R16-01), and the four sizes
   are --text-xs. S-07 (password show/hide) stays open as F1-16.
   ============================================================ */

.signup-card{max-width:560px;margin:0 auto}

.signup-steps{display:flex;gap:6px;margin-bottom:4px}
.signup-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;opacity:.55}
.signup-step.active,.signup-step.done{opacity:1}
.signup-step-dot{width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.signup-step.active .signup-step-dot{background:var(--gold);color:var(--gold-ink)}
.signup-step.done .signup-step-dot{background:var(--ok);color:var(--tag-ink)}
.signup-step-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.signup-step.active .signup-step-label{color:var(--ink)}
.signup-step-progress{font-size:var(--text-xs);color:var(--muted);margin:6px 0 16px;text-align:center}

.signup-optional{text-transform:none;font-weight:400;letter-spacing:0}
.signup-help{font-size:var(--text-xs);color:var(--muted);line-height:1.4;margin-top:5px}

.field.has-error input,.field.has-error select{border-color:var(--bad)}
.signup-field-error{font-size:var(--text-xs);color:var(--bad);margin-top:5px}

.field select{width:100%;min-height:var(--control-h);border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;font-size:13.5px;background:var(--input-bg);color:var(--ink);font-family:inherit}

.signup-mobile-row{display:flex;gap:8px}
.signup-mobile-prefix{flex:0 0 92px;min-height:var(--control-h);border:1px solid var(--line);border-radius:8px;
  padding:11px 8px;font-size:13.5px;background:var(--input-bg);color:var(--ink);font-family:inherit}
.signup-mobile-number{flex:1;min-width:0;min-height:var(--control-h);border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;font-size:13.5px;background:var(--input-bg);color:var(--ink);font-family:inherit}

.signup-consent{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.signup-checkbox-row{margin-bottom:12px}
.signup-checkbox-row label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;cursor:pointer}
.signup-checkbox-row input[type="checkbox"]{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.signup-checkbox-row.has-error label{color:var(--bad)}
.signup-checkbox-row .signup-field-error{margin-left:25px}

.signup-msg{font-size:12.5px;line-height:1.5;border-radius:8px;padding:12px 14px;margin-bottom:14px;background:var(--card);border:1px solid var(--line)}
.signup-msg p{margin:6px 0 0}
.signup-msg-info{color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.signup-msg-error{color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.signup-msg-success{color:var(--ok);box-shadow:inset 3px 0 0 var(--ok)}

.signup-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.signup-nav .btn{margin-left:auto}
.signup-nav .btn-outline-dark{margin-left:0}

.btn-outline-dark{background:transparent;border:2px solid var(--line-strong);color:var(--ink)}
.btn-outline-dark:hover{background:var(--panel-hover);border-color:var(--ink)}