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

Commencez par comparer la spécificité et l’ordre d’émission des règles dans _mdc-text-field-structure-overrides.scss et _form-field-theme.scss, en particulier pour .mdc-notched-outline__notch. Vérifiez le contexte de chargement de form-field.mjs dans Chrome et confirmez que l’état hover d’erreur ne dessine plus de bordure gauche à travers l’encoche.

Rédigé par le modèle d'indexation à partir du texte de l'issue.