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

首先比较 _mdc-text-field-structure-overrides.scss 和 _form-field-theme.scss 中规则的特异性和输出顺序，尤其是针对 .mdc-notched-outline__notch 的规则。检查 form-field.mjs 在 Chrome 中的加载上下文，并确认错误 hover 状态不再通过缺口绘制左边框。

由索引模型根据 Issue 内容生成。