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

Bắt đầu bằng cách so sánh độ đặc hiệu và thứ tự phát ra của các rule trong _mdc-text-field-structure-overrides.scss và _form-field-theme.scss, đặc biệt là đối với .mdc-notched-outline__notch. Kiểm tra context tải form-field.mjs trong Chrome và xác nhận rằng trạng thái hover lỗi không còn vẽ đường viền bên trái xuyên qua notch.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.