@scope (visually-hidden-ui) {
  /* Canonical sr-only pattern — content available to assistive tech but
     not painted. Avoid `display: none` (removes from a11y tree) and
     `visibility: hidden` (removes too).

     - position:absolute + clip-path:inset(100%) — hides without affecting
       layout, with the clip-path doing the real visual removal
     - width/height/padding/margin:0 — prevents layout impact
     - white-space:nowrap — keeps multi-word strings on one line so the
       clip works (a wrapping span can break the technique on some UAs)
     - overflow:hidden + border:0 — belt-and-suspenders for cross-UA
   */
  :scope {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
