/* mp-form, mp-field, mp-choice — forms. Contract: COMPONENTS.md §7.27.
   Field borders are stone (3:1, WCAG 1.4.11), darker than the prototype's hairline.
   WooCommerce classic fields arrive with our classes (woocommerce_form_field_args);
   what the filter cannot reach is aliased here (vendor-alias). */
@layer components {
  .mp-form {
    display: grid;
    gap: var(--mp-space-m);
    max-inline-size: var(--mp-w-form);
  }

  .mp-field,
  :where(.woocommerce, .woocommerce-page) .form-row, /* vendor-alias */
  .ff-el-group { /* vendor-alias */
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-2xs);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .mp-field__label,
  :where(.woocommerce, .woocommerce-page) .form-row > label, /* vendor-alias */
  .ff-el-input--label > label { /* vendor-alias */
    padding: 0;
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  :where(.woocommerce, .woocommerce-page) .form-row .required { /* vendor-alias */
    color: var(--mp-color-danger);
    text-decoration: none;
  }

  .mp-field__input,
  :where(.woocommerce, .woocommerce-page) :is(.input-text, select), /* vendor-alias */
  .ff-el-form-control { /* vendor-alias */
    inline-size: 100%;
    min-block-size: var(--mp-h-control);
    padding: 0 var(--mp-space-s);
    border: var(--mp-border) solid var(--mp-color-line-strong);
    border-radius: var(--mp-radius-sm);
    background-color: var(--mp-color-surface);
    color: var(--mp-color-text);
    font: var(--mp-weight-body) var(--mp-fs-base) / var(--mp-lh-tight) var(--mp-font-body); /* 16px: no iOS zoom */
    appearance: none;
    transition: border-color var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-field__input:hover { border-color: var(--mp-color-line-hover); }
  .mp-field__input::placeholder { color: var(--mp-color-text-2); }
  textarea.mp-field__input,
  :where(.woocommerce, .woocommerce-page) textarea.input-text, /* vendor-alias */
  textarea.ff-el-form-control { /* vendor-alias */
    min-block-size: calc(var(--mp-h-control) * 2.5);
    padding-block: var(--mp-space-s);
    line-height: var(--mp-lh-body);
    resize: vertical;
  }
  /* The select's chevron: two gradients in currentColor, no image, no literal colour. */
  select.mp-field__input,
  :where(.woocommerce, .woocommerce-page) select, /* vendor-alias */
  select.ff-el-form-control { /* vendor-alias */
    padding-inline-end: var(--mp-space-xl);
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      right calc(var(--mp-space-s) + var(--mp-space-3xs) * 1.5) center,
      right var(--mp-space-s) center;
    background-size: calc(var(--mp-space-3xs) * 1.5) calc(var(--mp-space-3xs) * 1.5);
    background-repeat: no-repeat;
  }
  .mp-field__input[aria-invalid="true"],
  .mp-field[aria-invalid="true"] .mp-field__input,
  :where(.woocommerce, .woocommerce-page) .woocommerce-invalid :is(.input-text, select), /* vendor-alias */
  .ff-el-is-error .ff-el-form-control { /* vendor-alias */
    border-color: var(--mp-color-danger);
  }
  .mp-field__input:disabled { background-color: var(--mp-color-surface-2); color: var(--mp-color-disabled); cursor: not-allowed; }

  .mp-field__hint,
  :where(.woocommerce, .woocommerce-page) .form-row .description, /* vendor-alias */
  .ff-el-help-message { /* vendor-alias */
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-xs);
    line-height: var(--mp-lh-snug);
  }
  .mp-field__error,
  .ff-el-is-error .text-danger { /* vendor-alias */
    display: flex;
    align-items: center;
    gap: var(--mp-space-2xs);
    color: var(--mp-color-danger);
    font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-snug) var(--mp-font-ui);
  }

  /* mp-choice: a 44px row with a drawn radio or checkbox. */
  .mp-choice,
  :where(.woocommerce, .woocommerce-page) .woocommerce-form__label-for-checkbox, /* vendor-alias */
  .ff-el-form-check-label { /* vendor-alias */
    display: flex;
    align-items: center;
    gap: var(--mp-space-xs);
    min-block-size: var(--mp-tap);
    color: var(--mp-color-text);
    font-size: var(--mp-fs-base);
    line-height: var(--mp-lh-snug);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
  }
  .mp-choice > input,
  :where(.woocommerce, .woocommerce-page) .woocommerce-form__label-for-checkbox > input, /* vendor-alias */
  .ff-el-form-check-input { /* vendor-alias */
    flex: none;
    inline-size: var(--mp-icon-s);
    block-size: var(--mp-icon-s);
    margin: 0;
    border: calc(var(--mp-border) * 2) solid var(--mp-color-line-strong);
    border-radius: var(--mp-radius-xs);
    background-color: var(--mp-color-surface);
    appearance: none;
    cursor: inherit;
    transition: background-color var(--mp-dur-fast) var(--mp-ease-out), box-shadow var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-choice > input[type="radio"],
  .ff-el-form-check-input[type="radio"] { border-radius: var(--mp-radius-round); } /* vendor-alias */
  .mp-choice > input:checked,
  :where(.woocommerce, .woocommerce-page) .woocommerce-form__label-for-checkbox > input:checked, /* vendor-alias */
  .ff-el-form-check-input:checked { /* vendor-alias */
    border-color: var(--mp-color-inverse);
    background-color: var(--mp-color-inverse);
    box-shadow: inset 0 0 0 var(--mp-space-3xs) var(--mp-color-surface);
  }
  .mp-choice > input:focus-visible {
    outline: var(--mp-focus-width) solid var(--mp-color-focus);
    outline-offset: var(--mp-focus-offset);
  }
  .mp-choice:has(:disabled) { color: var(--mp-color-disabled); cursor: not-allowed; }
}