/* Native modal backdrop must cover the unsafe sensor/home-indicator bands too.
   Keep one scrim, its existing material and its existing fade owner. */
.site-nav-dialog::backdrop {
  position: fixed;
  inset: calc(0px - env(safe-area-inset-top, 0px))
    calc(0px - env(safe-area-inset-right, 0px))
    calc(0px - env(safe-area-inset-bottom, 0px))
    calc(0px - env(safe-area-inset-left, 0px));
}

/* showModal() can give the first link an automatic focus ring on iOS even
   after a tap. Keyboard input removes this class in the shared controller. */
body.qp-page .site-nav-dialog.is-pointer-opening .main-nav :focus {
  outline: none;
}

@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
  /* Use the whole visible path: fast ease-out hid it within the first 60ms. */
  body.qp-page #site-header.has-scroll-behavior .site-nav-rail-actions {
    transition: transform 360ms linear;
  }

  body.qp-page #site-header.has-scroll-behavior.is-scroll-hidden .site-nav-rail-actions {
    opacity: 1;
    transform: translateX(calc(100% + max(12px, env(safe-area-inset-right, 0px))));
  }

  body.qp-page .site-nav-dialog[data-navigation-layout="rail"]::backdrop {
    transition-duration: 280ms;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  body.qp-page #site-header.has-scroll-behavior.is-scroll-hidden .site-nav-rail-actions {
    transform: translateX(calc(100% + max(6px, env(safe-area-inset-right, 0px))));
  }
}

@media (max-width: 600px) {
  /* Only the single-capsule layout. Percentage follows its actual own height,
     including pages with no second action; never reserve extra page space. */
  body.qp-page :is(#site-header, .site-nav-dialog) .site-nav-rail-actions {
    translate: 0 50%;
  }
}