/* Sigmix — auth-page wiring additions (login / signup / forgot-password).
   The delivered sheet (/newsite/sigmix.css) styles the static auth card and is kept
   byte-identical to the delivery; this file adds ONLY what the LIVE multi-step flows
   need — the step machine, error regions, show/hide, back/resend, OTP inputs and the
   signup join-choice. Everything is scoped .smx4 #authpage so nothing can leak into
   other marketing pages or the dashboard. Loaded by the three auth page.tsx files
   AFTER the delivered sheet (same React precedence group, later insertion). */

/* Theme the two colors the controller sets inline (var(--err)/var(--green-dark) with
   light-theme fallbacks) so the dark surface gets legible equivalents. */
.smx4 #authpage{--err:#f87171;--green-dark:#34d399}

/* The step machine: auth.js toggles .on (login lgStep*, signup suStep*, forgot fpStep*). */
.smx4 #authpage .lg-step{display:none}
.smx4 #authpage .lg-step.on{display:block}

/* Error / status line (role=alert); auth.js toggles display and sets the color. */
.smx4 #authpage .auth-err{display:none;margin:0;font-size:13px;font-weight:600;line-height:1.55;color:var(--err)}

/* Password show/hide (the delivery has no eye control). */
.smx4 #authpage .lg-pass{position:relative}
.smx4 #authpage .lg-pass input{padding-right:64px}
.smx4 #authpage .lg-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:6px 8px;border-radius:8px}
.smx4 #authpage .lg-eye:hover{color:var(--brand-2)}

/* Back to the previous step. */
.smx4 #authpage .lg-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:0}
.smx4 #authpage .lg-back svg{width:15px;height:15px}
.smx4 #authpage .lg-back:hover{color:var(--text)}

/* Resend (link-styled button in the OTP step). */
.smx4 #authpage .lg-resend{border:0;background:none;cursor:pointer;font:inherit;font-weight:600;color:var(--brand-2);padding:0}
.smx4 #authpage .lg-resend:hover{text-decoration:underline}
.smx4 #authpage .lg-resend:disabled{color:var(--text-3);cursor:default;text-decoration:none}

/* One-time-code inputs. */
.smx4 #authpage .otp-input{text-align:center;font-family:var(--mono);font-size:22px;letter-spacing:.45em}

/* Signup: the individual-vs-join choice (revealed by the domain check). */
.smx4 #authpage .su-choice{display:flex;flex-direction:column;gap:10px}
.smx4 #authpage .su-opt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.smx4 #authpage .su-opt:hover{border-color:rgba(146,180,200,.34)}
.smx4 #authpage .su-opt:has(input:checked){border-color:var(--brand-2);background:var(--surface-2)}
.smx4 #authpage .su-opt input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer}
.smx4 #authpage .su-opt-body{display:flex;flex-direction:column;gap:3px}
.smx4 #authpage .su-opt-t{font-size:14px;font-weight:600;color:var(--text)}
.smx4 #authpage .su-opt-t b{color:var(--brand-2)}
.smx4 #authpage .su-opt-g{font-size:12px;color:var(--text-3);line-height:1.5}