/* SLE-T7-forms — canonical form-control visuals.
 *
 * Input, textarea, select base styles + label + error/help-text states.
 * Pairs with @suite/lib/form-validation JS (FN-1-4) for on-blur + on-input
 * validation states.
 *
 * Depends on tokens.css.
 */

/* Form field wrapper. */
.fm-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.fm-field label,
.fm-label {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--bk);
  line-height: 1.3;
}

/* Required marker. */
.fm-field label[data-required]::after,
.fm-label[data-required]::after {
  content: ' *';
  color: var(--red);
}

/* Inputs. */
.fm-field input[type='text'],
.fm-field input[type='email'],
.fm-field input[type='tel'],
.fm-field input[type='url'],
.fm-field input[type='number'],
.fm-field input[type='date'],
.fm-field input[type='time'],
.fm-field input[type='password'],
.fm-field input[type='search'],
.fm-field textarea,
.fm-field select {
  font-family: var(--sans);
  font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--g2);
  background: var(--white);
  color: var(--bk);
  line-height: 1.4;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 36px;
}

.fm-field textarea {
  min-height: 80px;
  resize: vertical;
}

/* Explicit class — for inputs not wrapped in .fm-field. */
.fm-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--g2);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  background: var(--white);
  color: var(--bk);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* Intentional box-shadow halo paired with `outline: none` — the inner-border
 * + outer halo treatment is specific to .fm-input and opts out of the global
 * outline-based focus ring in focus-rings.css. */
.fm-input:focus {
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgb(var(--y-rgb) / 0.2);
}
textarea.fm-input {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.fm-field input:hover:not(:disabled):not([readonly]),
.fm-field textarea:hover:not(:disabled):not([readonly]),
.fm-field select:hover:not(:disabled):not([readonly]) {
  border-color: var(--g3);
}

/* Validation states (set by form-validation JS via data-state attribute). */
.fm-field input[data-state='error'],
.fm-field textarea[data-state='error'],
.fm-field select[data-state='error'],
.fm-field input.fm-invalid,
.fm-field textarea.fm-invalid,
.fm-field select.fm-invalid {
  border-color: var(--red);
}

.fm-field input[data-state='success'],
.fm-field textarea[data-state='success'],
.fm-field select[data-state='success'] {
  border-color: var(--green);
}

/* Help text + error message. */
.fm-help {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--g4);
  line-height: 1.3;
}

.fm-error {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--fg-error);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* Disabled. */
.fm-field input:disabled,
.fm-field textarea:disabled,
.fm-field select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--g1);
}

/* Read-only. */
.fm-field input[readonly],
.fm-field textarea[readonly] {
  background: var(--g1);
  cursor: default;
}

/* Checkbox + radio. */
.fm-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--bk);
  cursor: pointer;
}
.fm-check input[type='checkbox'],
.fm-check input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--y);
  cursor: pointer;
}

/* Pairs with @suite/lib/form-validation (shared/utils/form-validation.js).
 * The JS sets [data-state='error'/'success'] on inputs and writes
 * class='fm-error' / class='fm-help' on sibling feedback elements.
 * The modern [data-state] + .fm-invalid + .fm-error + .fm-help rules
 * above are the canonical runtime contract with the shared JS module. */

/* iOS Safari zoom-on-focus defence — Mobile Safari zooms the viewport
 * when a tapped input's font-size is < 16px. The default --fs-md (14px)
 * triggers this; bump to 16px on phone viewports. Desktop keeps the
 * dense 14px reading size.
 *
 * Aligned to Camp v2 Style Guide §19 phone breakpoint (2026-06-02 sweep). */
@media (max-width: 639px) {
  .fm-field input[type='text'],
  .fm-field input[type='email'],
  .fm-field input[type='tel'],
  .fm-field input[type='url'],
  .fm-field input[type='number'],
  .fm-field input[type='date'],
  .fm-field input[type='time'],
  .fm-field input[type='password'],
  .fm-field input[type='search'],
  .fm-field textarea,
  .fm-field select,
  .fm-input,
  textarea.fm-input {
    font-size: 16px;
  }
}