/* Styles scoped exclusively to LoginFormPlugster.
   Only what Tailwind cannot do: dynamic .is-invalid state. */

[data-controller-name="LoginFormPlugster"] [data-outlet-id="emailInput"].is-invalid,
[data-controller-name="LoginFormPlugster"] [data-outlet-id="codeInput"].is-invalid {
  border-color: #ef4444;
}

[data-controller-name="LoginFormPlugster"] [data-outlet-id="emailInput"].is-invalid:focus,
[data-controller-name="LoginFormPlugster"] [data-outlet-id="codeInput"].is-invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.2);
}