/* The sign-up page, in the sign-in page's Lantern look (login-lantern.css, lantern-gate.css): a longer form in the same card. */

.signup .gate-in { max-width: 28rem; margin-inline: auto; }
.signup .gate { align-self: start; }
.signup form { margin-top: 1.5rem; }
.field { margin-top: 1.15rem; min-width: 0; }
.field:first-child { margin-top: 0; }
.opt { margin-left: 0.3rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0.06em; }

/* the one wanted click: blue while the form cannot be sent, green once the address and the name are good (as /login does with its address) */
.signup:has(#f-signup:valid) #f-signup .go {
  background: var(--go);
  border-color: var(--go);
  color: var(--on-go);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.2), 0 8px 24px rgba(61, 220, 151, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .signup:has(#f-signup:valid) #f-signup .go:hover { background: var(--go-lit); border-color: var(--go-lit); }
}

.alt { margin-top: 1.3rem; color: var(--ink-dim); font-size: 0.95rem; }
.alt a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.2rem; color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.go-link { text-decoration: none; }