.modal {
  position: fixed;
  inset: 0;            /* shorthand for top/right/bottom/left */
  width:  100%;
  height: 100%;
  background-color: var(--modal-bg);
  backdrop-filter: blur(4px);              /* <-- this adds the blur */
  -webkit-backdrop-filter: blur(4px);      /* for Safari */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--modal-offset);    /* push popup below header */
  padding-bottom: 1rem;
  z-index: 10;
  overflow: auto;
  pointer-events: auto; /* ensure it catches clicks */
  overscroll-behavior: none;

}

.modal.invisible {
  display: none;
  /* and if you still want to guard against click‐through: */
  pointer-events: none;
}