details {
  &[open] {
    > summary::before {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 80;
      display: block;
      cursor: default;
      content: " ";
      background: rgba(0, 0, 0, 0);
    }

    /* daisyUI shrinks a pressed .btn, and a scale makes the summary the
       containing block of the fixed overlay above: pressing outside would
       collapse the overlay onto the button before the click lands, so the
       dropdown would never close. */
    > summary {
      scale: none !important;
    }
  }

  /* FlyOnUI hides .dropdown-menu (opacity: 0, z-index: 10) until its own JS
     opens it; a <details> opens through the browser, and its menu has to sit
     above the summary overlay (z-index: 80) to stay clickable. This file is
     served outside any @layer, so it wins over FlyOnUI's layered rule. */
  > .dropdown-menu {
    position: absolute;
    z-index: 100;
    opacity: 1;
  }

  > summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }
}