/* Signup form component: the closing-section form, its error line and the optional step 2.
   Follows the Agerius design system: a clear visible label, a strong black border, a System Blue
   focus ring, and validation that explains how to fix the problem. Tokens only. */

/* The form is a light panel, so the primary (ink) button and paper fields are always legible,
   including inside the dark closing section. */
.signup, .profile { padding: 22px; border: 2px solid var(--ag-paper); background: var(--color-surface); color: var(--color-text); }
.signup { position: relative; display: grid; gap: var(--space-2); }
.signup-row { display: flex; gap: var(--space-3); }
.signup-row .field { flex: 1; min-width: 0; }
.signup .btn { flex: none; }

.field-label { display: block; color: var(--color-text); font: 750 var(--text-xs)/1.3 var(--font-mono); letter-spacing: var(--tracking-system); text-transform: uppercase; }
.field {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: var(--border-standard); border-radius: var(--radius-none);
  background: var(--ag-paper); color: var(--color-text);
  font-family: var(--font-mono); font-size: var(--text-md);
  box-shadow: inset 4px 4px 0 rgba(17, 18, 15, .07);
}
.field::placeholder { color: var(--color-text-muted); opacity: 1; }
.field:focus { outline: 4px solid var(--color-info); outline-offset: 2px; }
.field[aria-invalid='true'] { border-color: var(--color-critical); box-shadow: inset 4px 4px 0 rgba(255, 54, 92, .16); }

/* Honeypot: present for bots, invisible and unreachable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.turnstile { margin-top: var(--space-3); }
.turnstile:empty { display: none; }

/* Validation: text says what to do; the red rule is the status, never the only signal. */
.form-error { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 4px solid var(--color-critical); font-weight: 700; }

.success { display: none; align-items: center; min-height: 64px; padding: 15px 20px; border: var(--border-standard); border-color: var(--color-success); color: var(--color-success); font-weight: 700; }
.signup-note { margin: var(--space-4) 0 0; }

/* Step 2 (optional) */
.profile { margin-top: var(--space-5); }
.profile h3 { margin: 0 0 var(--space-1); }
.profile .profile-lede { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-md); }
.profile .form-error { color: var(--color-text); font-size: var(--text-md); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.profile-grid .full { grid-column: 1 / -1; }
.profile label { display: grid; gap: 6px; color: var(--color-text); font: 750 var(--text-xs)/1.3 var(--font-mono); letter-spacing: var(--tracking-system); text-transform: uppercase; }
.profile .field { font-size: var(--text-md); letter-spacing: 0; text-transform: none; }
.profile textarea.field { min-height: 96px; padding: var(--space-3) 14px; resize: vertical; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.profile-skip { padding: var(--space-2) 2px; border: 0; background: none; color: var(--color-text); font: 700 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-system); text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; cursor: pointer; }
.profile-done { margin: var(--space-4) 0 0; color: var(--color-success); font-weight: 700; }

@media (max-width: 680px) {
  .signup-row { flex-direction: column; }
  .signup .btn { width: 100%; }
  .profile { padding: 18px 16px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-actions .btn { width: 100%; }
}