/* Form Inputs
 * Consistent styling for text inputs, selects, textareas, labels.
 * Uses native CSS features — no JavaScript for validation styling.
 */

label {
  display: block;
  font-weight: 500;
  margin-block-end: 0.25rem;
}

input:where([type="text"], [type="email"], [type="password"], [type="url"],
  [type="tel"], [type="number"], [type="search"], [type="date"],
  [type="datetime-local"], [type="time"]),
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.5em 0.75em;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: border-color 100ms ease;

  &:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 15%, transparent);
  }

  &::placeholder {
    color: var(--color-ink-muted);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

select {
  cursor: pointer;
}

/* Field group — label + input + optional hint/error */
.field {
  margin-block-end: var(--block-space);

  & .field__hint {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    margin-block-start: 0.25rem;
  }

  & .field__error {
    font-size: 0.875rem;
    color: var(--color-negative);
    margin-block-start: 0.25rem;
  }
}

/* Inline checkbox/radio */
.field--inline {
  display: flex;
  align-items: center;
  gap: var(--inline-space-s);

  & label {
    margin-block-end: 0;
    font-weight: normal;
  }

  & input {
    width: auto;
  }
}

/* Rails-generated error field wrapping */
.field_with_errors {
  & input, & textarea, & select {
    border-color: var(--color-negative);
  }
}