/* Single-column form pages: account setup and the temporary login. */

.form-page {
  max-width: 560px;
}

.form-page h1 {
  font-size: var(--text-2xl);
}

.form-page .lead {
  font-size: var(--text-base);
}

.form-step:focus {
  outline: none;
}

.form-step__progress {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.form-fields {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  resize: vertical;
}

.field input[type="file"] {
  min-height: 0;
  padding: var(--space-2);
}

.field__help {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field input::placeholder {
  color: var(--color-text-subtle);
}

.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  color: var(--color-danger-text);
  font-size: var(--text-sm);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.restriction {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.restriction dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-subtle);
}

.restriction dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  .form-actions .button {
    flex: 1 1 100%;
    white-space: normal;
  }
}