/* ============================================================
   MooseTraxx — /signup
   Page-scoped. Extends styles.css: every token, .btn, .input, .nav
   and .footer used here comes from that sheet and is not restated.
   Loaded second so the handful of overrides below win.
   ============================================================ */

.su{position:relative;padding:132px 0 96px;min-height:100vh;background:radial-gradient(1000px 560px at 50% -8%,var(--tint-blue),transparent 62%),linear-gradient(180deg,#FDFCFA,var(--bg));overflow:hidden}
.su::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(28,26,22,.05) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(110% 70% at 50% 0%,#000 18%,transparent 66%);mask-image:radial-gradient(110% 70% at 50% 0%,#000 18%,transparent 66%);opacity:.7}
.su .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

/* ---------- notices ---------- */
.su-notices{width:100%;max-width:640px;display:grid;gap:9px;margin-bottom:22px}
.su-notice{display:flex;align-items:flex-start;gap:10px;padding:13px 18px;border-radius:var(--r-md);background:color-mix(in srgb,var(--blue) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--blue) 22%,var(--border));font-size:14px;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
.su-notice svg{flex:none;margin-top:2px;color:var(--blue-on-surface)}
.su-notice b{color:var(--text);font-weight:700}

/* Driven by the is-mobile class signup.js sets from UA/platform detection, NOT by a width
   query. The comp carried a `@media (max-width:680px)` fallback as a review affordance; the
   README rules it out for production, because a narrow desktop window is not a phone and
   telling that user to "sign in on your computer" is nonsense — they are on one. */
.su-notice--mobile{display:none}
body.is-mobile .su-notice--mobile{display:flex}

/* ---------- card ---------- */
.su-card{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:52px 60px 40px}
.su-card h1{font-size:36px;font-weight:700;letter-spacing:-.03em;text-align:center;line-height:1.06}
.su-sub{margin-top:13px;font-size:15.5px;line-height:1.5;color:var(--text-muted);text-align:center;text-wrap:pretty}
.su-sub b{color:var(--text);font-weight:600}
/* Poppins, not DM Sans bold: at 14px the body face makes `l` and `i` near-identical, and this
   is the one string on the page a user has to read character by character to confirm. */
.su-email{display:inline-block;font-family:var(--font-heading);font-weight:600;font-size:14px;letter-spacing:.005em;white-space:nowrap}

/* ---------- panels ---------- */
.su-panel{display:none}
.su-panel.on{display:block}

/* ---------- oauth ---------- */
.su-oauth{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.su-oauth .btn{width:100%;height:50px;font-size:15px;font-weight:600}
.su-oauth .glyph{width:18px;height:18px;flex:none;display:grid;place-items:center}
.ms-glyph{width:15px;height:15px;display:grid;grid-template-columns:1fr 1fr;gap:1.5px}
.ms-glyph i{display:block}
.ms-glyph i:nth-child(1){background:#f25022}.ms-glyph i:nth-child(2){background:#7fba00}.ms-glyph i:nth-child(3){background:#00a4ef}.ms-glyph i:nth-child(4){background:#ffb900}

.su-or{display:flex;align-items:center;gap:14px;margin:26px 0 24px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.su-or::before,.su-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- fields ---------- */
.su-fields{display:grid;gap:16px}
.su-fields--2{grid-template-columns:1fr 1fr;gap:14px 18px;align-items:start}
.su-fields--2 .su-submit{grid-column:1/-1}
.su-f{display:grid;gap:7px}
.su-f label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-faint)}
.su-f .wrapped{position:relative}
.su-f .input{height:50px}
.su-f .input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
.su-f .input[type=password],.su-f .input.has-btn{padding-right:52px}
.su-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:var(--text-faint);transition:color .18s,background .18s}
.su-reveal:hover{color:var(--text-muted);background:var(--bg-2)}
.su-hint{font-size:12.5px;line-height:1.4;color:var(--text-faint);text-wrap:pretty}
/* The email field carries no standing hint, so its slot must not reserve a row until a
   validation message fills it — otherwise the two columns sit at different heights. */
.su-hint:empty{display:none}
/* Client-side validation failures land here rather than in the top alert, which the README
   reserves for server-returned errors. */
.su-hint--err{color:var(--red)}

.su-submit{width:100%;height:52px;margin-top:10px;font-size:16px}
.su-ssolink{margin-top:16px;text-align:center;font-size:13.5px;font-weight:600}
.su-fine{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:12.5px;line-height:1.6;color:var(--text-faint);text-align:center;text-wrap:pretty}
.su-fine a{color:var(--text-muted);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.su-fine a:hover{color:var(--text)}
.su-alt{margin-top:14px;text-align:center;font-size:14px;color:var(--text-muted)}
.su-alt a{font-weight:600}
.su-alt a:hover{text-decoration:underline}

/* ---------- inline alerts ---------- */
.su-err{display:none;align-items:flex-start;gap:10px;margin-top:22px;padding:13px 15px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--red) 9%,transparent);border-left:3px solid var(--red);font-size:13.5px;line-height:1.5;color:var(--text);text-wrap:pretty}
.su-err.on{display:flex}
.su-err svg{flex:none;margin-top:1px;color:var(--red)}
.su-err a{font-weight:700;color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px}
.su-card.is-err .input[data-errfield]{border-color:color-mix(in srgb,var(--red) 55%,var(--border))}

/* Neutral confirmation ("code sent", "you're on the list"). Not comped — the README lists it
   as production-needed. Blue, deliberately NOT green: orange/yellow/green are the MooseScore
   ramp and are reserved for live data, and the amber capacity badge is this page's one
   sanctioned exception. Same geometry as .su-err so the card does not jump between them. */
.su-ok{display:none;align-items:flex-start;gap:10px;margin-top:22px;padding:13px 15px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--blue) 8%,var(--surface));border-left:3px solid var(--blue-on-surface);font-size:13.5px;line-height:1.5;color:var(--text);text-wrap:pretty}
.su-ok.on{display:flex}
.su-ok svg{flex:none;margin-top:1px;color:var(--blue-on-surface)}

/* ---------- verify: 6-digit code ---------- */
.su-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:28px auto 0;max-width:420px}
.su-code input{width:100%;min-width:0;height:66px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-soft);text-align:center;font-family:var(--font-heading);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);transition:border-color .18s,box-shadow .18s,background .18s}
.su-code input:focus{outline:none;border-color:var(--blue-on-surface);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
.su-card.is-err .su-code input{border-color:color-mix(in srgb,var(--red) 55%,var(--border))}
.su-links{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.su-links .sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}
.su-links a:hover{text-decoration:underline}

/* ---------- badges, sso, capacity ---------- */
.su-icon{width:52px;height:52px;border-radius:15px;margin:0 auto 20px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue-on-surface)}
.su-icon--warn{background:color-mix(in srgb,var(--yellow-deep) 15%,transparent);color:var(--yellow-deep)}
.su-body{margin-top:14px;font-size:15px;line-height:1.6;color:var(--text-muted);text-align:center;text-wrap:pretty;max-width:460px;margin-inline:auto}
.su-actions{margin:26px auto 0;display:grid;gap:10px;max-width:300px}
.su-actions .btn{width:100%;height:50px}
/* display:flex + margin-inline:auto, not text-align: an inline-level button will not centre. */
.su-panel[data-panel=verify] .su-submit,.su-wait{display:flex;max-width:420px;margin-inline:auto}
.su-wait{margin-top:24px;display:grid;gap:10px}
.su-wait .input{height:50px}
.su-wait .btn{width:100%;height:50px}

/* ---------- submitting state ---------- */
/* Not comped; README says to use site convention. The convention this inherited from — the
   early-access modal in app.js — was removed at launch, but the pattern it set is what the
   rest of the site still does: disable the control and swap its label to a pending word. No
   spinner asset exists in this codebase, and inventing one here would be a new pattern on
   one page. */
.su-card button[disabled],.su-card .btn[disabled]{opacity:.6;cursor:default;pointer-events:none}

@media (max-width:680px){
  .su-oauth,.su-fields--2{grid-template-columns:1fr}
  .su-card{padding:40px 32px 30px}
}
@media (max-width:560px){
  .su{padding:104px 0 72px}
  .su-card{padding:30px 22px 24px;border-radius:var(--r-md)}
  .su-card h1{font-size:27px}
  .su-code{gap:6px}
  .su-code input{height:52px;font-size:20px}
  .su-oauth .btn,.su-submit,.su-actions .btn,.su-wait .btn{height:48px}
}