bug(form-field): red border-left leaking over .mdc-notched-outline__notch

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The mat input form label sometimes has a border on the left when the form field is in a error state and is empty so the label is not floating and the hover state is active.


The border color from:
```
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: var(--mdc-outlined-text-field-error-hover-outline-color);
}
```
With a specificity of `Specificity: (0,7,0)` is taking priority over:
```
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
border-left: 1px solid transparent;
}
```
With it's specificity of `Specificity: (0,7,0)`.

The note on the `.mdc-notched-outline__notch` class suggests this is sufficient.
https://github.com/crisbeto/material2/blob/e8b0f416cc714c1922118d7f40b706f37793fb01/src/material/form-field/_mdc-text-field-structure-overrides.scss#L162
```
// Note: class name is repeated to achieve sufficient specificity over the various MDC states.
```

But it may not be. If I add one more `.mat-mdc-form-field`, then the rule's specificity `Specificity: (0,8,0)` is sufficient to bring the style rule above the other, which solves my issue

### Reproduction

I'm having trouble recreating the issue in a stack blitz. I think it is happening due to the order of module loading or the order the scss gets compiled to css, and thus the order that the styles get placed in the DOM. When I try to set it up in a stack blitz, the order of the two rules is reversed. I'm not sure what we could be doing to make the `form-field.mjs` load before the `_form-field-theme.scss`/`_mdc-text-field-structure-overrides.scss`

### Expected Behavior

no border left on .mdc-notched-outline__notch

### Actual Behavior

Some blead through of error-border on .mdc-notched-outline__notch

### Environment

- Angular: 16.2.10
- CDK/Material: 16.2.10 (still an issue after upgrading to 17)
- Browser(s): Chrome 120.0.6099.200 (not an issue on firefox)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Inizia confrontando la specificità e l’ordine di emissione delle regole in _mdc-text-field-structure-overrides.scss e _form-field-theme.scss, soprattutto per .mdc-notched-outline__notch. Controlla il contesto di caricamento di form-field.mjs in Chrome e conferma che lo stato hover di errore non disegni più un bordo sinistro attraverso la tacca.

Scritto dal modello di indicizzazione a partire dal testo della issue.