/* Form pieces built on ds.css tokens. ds.css ships no components. */
.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.signup-row input,
.signup-row button {
  height: 2.5rem; /* 40px, on the 4px grid */
  padding: 0 calc(var(--ds-space-3) - var(--ds-hairline));
  border: var(--ds-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius);
  line-height: var(--ds-leading-tight);
}

.signup-row input {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--ds-background);
  /* 16px text so iOS doesn't zoom on focus */
  font-size: var(--ds-text-base);
}

.signup-row input::placeholder {
  color: var(--ds-muted-foreground);
}

.signup-row input[aria-invalid="true"] {
  border-color: var(--ds-foreground);
}

.signup-row button {
  flex: 0 0 auto;
  border-color: var(--ds-foreground);
  background: var(--ds-foreground);
  color: var(--ds-background);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
}

.signup-row button:hover {
  background: color-mix(in oklab, var(--ds-foreground) 85%, var(--ds-background));
}

.signup-row button:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 400px) {
  .signup-row button {
    flex-basis: 100%;
  }
}

#signup-status[data-state="error"] {
  color: var(--ds-foreground);
}

#signup-status[data-state="success"] {
  color: var(--ds-foreground);
}

/* Honeypot: off-screen for people, still in the form for bots */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}