Read only "machine name" field appears and disappears within certain admin pages, causing layout shift

Problem/Motivation

On certain pages including /admin/structure/menu/manage/admin and /admin/structure/types/add, the machine name field appears, and then is immediately hidden by JavaScript.

Sometimes this field is read only (like on the menu pages) and sometimes its editable (like on the add content type page), and is populated by JavaScript (via machine-name.js). Note that when this is the case, if the form is submitted with a duplicate machine name the field should become visible.

Steps to reproduce

Navigate to /admin/structure/menu/manage/admin and /admin/structure/types/add and notice the layout shift.

Proposed resolution

Use modern CSS including :has() and the at-media scripting feature to reduce the layout shift.

Note the JS that does the hiding is at https://git.drupalcode.org/project/drupal/-/blob/11.x/core/misc/machine-.... In the MR below, I've used CSS :has() to hide the same selectors that the JS affects. I've also modified the selector so that it doesn't do any hiding if the form item is in an error state, which happens when a duplicate content type is created (example, try to create another content type called article and the field will appear)

Remaining tasks

do it, review it, commit it.