/* ============================================================
 * _form.css — reusable form primitives.
 * Used by auth pages, settings, billing, bot config, etc.
 * Imported BEFORE feature-specific stylesheets.
 * ============================================================ */

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

.field label {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--fg);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="search"],
.field textarea,
.field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-size: var(--fs-16);   /* >=16 to prevent iOS zoom */
  transition: border-color var(--dur-fast) var(--easing);
  font-family: inherit;
}
.field textarea {
  min-height: calc(var(--space-7) * 2);
  resize: vertical;
}
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--border-strong); }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-faint);
}

.field-help {
  font-size: var(--fs-12);
  color: var(--fg-faint);
}

.field-error {
  font-size: var(--fs-12);
  color: var(--danger);
  display: none;
}
.field[data-state="error"] .field-error { display: block; }

/* --- Password strength meter --- */

.password-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: var(--space-1);
}
.password-strength span {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  transition: background var(--dur-fast) var(--easing);
}
.password-strength[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.password-strength[data-score="2"] span:nth-child(-n+2) { background: var(--warning); }
.password-strength[data-score="3"] span:nth-child(-n+3) { background: var(--accent); }
.password-strength[data-score="4"] span:nth-child(-n+4) { background: var(--success); }

/* --- Checkbox / Radio --- */

.checkbox,
.radio {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-14);
  color: var(--fg-muted);
}
.checkbox input,
.radio input {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.checkbox a, .radio a { color: var(--link); }

/* --- Inline status banner (forms-wide) --- */

.form-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  display: none;
}
.form-banner[data-kind="error"] {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  display: block;
}
.form-banner[data-kind="info"] {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  display: block;
}
.form-banner[data-kind="success"] {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
  display: block;
}

/* --- Field-row (label + input on the same line on desktop) --- */

@media (min-width: 720px) {
  .field-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    align-items: start;
  }
}