.pw-form-field {
  margin-bottom: var(--pw-space-4);
}

.pw-form-field label {
  display: block;
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  margin-bottom: var(--pw-space-1);
}

.pw-form-field label[data-required]::after {
  content: " *";
  color: var(--pw-color-status-error-fg);
}

.pw-form-field__hint {
  font-size: var(--pw-text-sm);
  color: var(--pw-color-text-muted);
  margin: 0 0 var(--pw-space-1) 0;
}

/* :where() drops the input negation-chain specificity to zero so this rule
   sits at (0,1,1). select/textarea reach (0,1,1) by the normal class+element
   count without needing :where(). The .pw-form-field--invalid override at
   (0,2,1) wins over both, no source-order dependence. The negation excludes
   button-type inputs in case a caller passes a submit/reset inside the block
   (FormActionsComponent owns those). */
.pw-form-field__input input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"])),
.pw-form-field__input select,
.pw-form-field__input textarea {
  display: block;
  width: 100%;
  font-family: var(--pw-font-sans);
  font-size: var(--pw-text-base);
  padding: var(--pw-space-2) var(--pw-space-3);
  border: 1px solid var(--pw-color-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-color-input-bg);
  color: var(--pw-color-text);
  margin-bottom: 0;
  transition: border-color 0.15s;
}

.pw-form-field__input input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"])):focus,
.pw-form-field__input select:focus,
.pw-form-field__input textarea:focus {
  outline: none;
  border-color: var(--pw-color-orange-base);
  box-shadow: 0 0 0 3px var(--pw-color-focus-ring);
}

/* Error state — wins over the base input rule at (0,2,1) vs (0,1,1). The
   .pw-form-field--invalid class on the root drives the visual, so the rule
   matches whether Rails injects a <div class="field_with_errors"> around
   the input or not (the input remains a descendant either way). */
.pw-form-field--invalid .pw-form-field__input input,
.pw-form-field--invalid .pw-form-field__input select,
.pw-form-field--invalid .pw-form-field__input textarea {
  border-color: var(--pw-color-status-error-fg);
  background: var(--pw-color-status-error-bg);
}

.pw-form-field--invalid .pw-form-field__input input:focus,
.pw-form-field--invalid .pw-form-field__input select:focus,
.pw-form-field--invalid .pw-form-field__input textarea:focus {
  border-color: var(--pw-color-status-error-fg);
  box-shadow: 0 0 0 3px var(--pw-color-status-error-focus);
}

.pw-form-field__errors {
  margin-top: var(--pw-space-1);
}

.pw-form-field__errors p {
  font-size: var(--pw-text-sm);
  color: var(--pw-color-status-error-fg);
  margin: 0;
}