@layer utilities {

  /* Visually hidden but still present for screen readers and label clicks
     (e.g. the file input behind the "upload a document" button). */
  .for-screen-reader {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Native app (Hotwire Native) visibility toggles.
     `data-platform~="native"` is set on <body> for requests coming from the
     native WebView, so web chrome the native shell already provides can opt out. */
  .hide-on-native {
    [data-platform~="native"] & {
      display: none;
    }
  }

}