/* Shared form layouts and controls. */
.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.form-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-4xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.form-card-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.form-card-title {
  font-size: var(--font-4xl);
  font-weight: var(--font-extrabold);
  margin: 0 0 var(--space-2) 0;
  color: var(--text-strong);
}

.form-card-subtitle {
  font-size: var(--font-lg);
  color: var(--text-secondary);
  margin: 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-weight: var(--font-semibold);
  font-size: var(--font-base);
  color: var(--text-strong);
}

.form-input {
  --form-focus-ring: var(--control-focus-ring);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-base);
  line-height: var(--line-normal);
  background: var(--control-bg);
  color: var(--text-strong);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

textarea.form-input { resize: vertical; }
.form-input::placeholder { color: var(--control-placeholder); }
.form-input:hover:where(:not(:disabled):not([readonly])) { border-color: var(--border-secondary); }
.form-input:focus {
  outline: none;
  border-color: var(--control-focus-border);
  box-shadow: 0 0 0 3px var(--form-focus-ring);
}
.form-input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-input[readonly] { background: var(--surface-muted); cursor: default; }
.form-input[aria-invalid="true"],
.form-input:user-invalid {
  --form-focus-ring: var(--danger-bg);
  border-color: var(--status-danger-border);
}

.form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-strong) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--control-bg) inset !important;
}
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--control-bg) inset, 0 0 0 3px var(--form-focus-ring) !important;
}

.form-grid { display: grid; gap: var(--space-4); }
.form-help { margin: 0; font-size: var(--font-sm); color: var(--text-muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.form-actions .btn { flex: 1; white-space: normal; }
.required { color: var(--status-danger-icon-color); }

@media (max-width: 768px) {
  .form-card { padding: var(--space-6); }
  .form-card-title { font-size: var(--font-3xl); }
  .form-actions { flex-direction: column-reverse; }
}

@supports (-webkit-touch-callout: none) {
  :root body .form-input { font-size: 16px; }
}
@media (prefers-contrast: more) {
  .form-input { border-width: 3px; }
}