/* Rose Bronze R8 — closed mobile drawer must not occupy any area beyond the viewport.
   Root cause (evidence/r8-overflow-qa/diagnosis.json): the closed .mobile-drawer was a visible,
   position:fixed box parked at right:-100% (e.g. 460→780px at 390px). It was the only unclipped box
   outside the viewport, and iOS Safari can let a fixed box beyond the right edge widen the pannable area.
   Fix: anchor it at right:0 and slide with transform; while closed it is visibility:hidden and, once the
   close transition ends, display:none, so at rest it has no box at all. The opening slide is kept with
   @starting-style. Engines without discrete transitions open and close instantly, still without overflow. */
.mobile-drawer {
  right: 0;
  transform: translateX(100%);
  visibility: hidden;
  display: none;
  transition:
    transform var(--transition-base),
    visibility 0s linear 0.35s,
    display 0s linear 0.35s allow-discrete;
}

.mobile-drawer.open {
  right: 0;
  display: flex;
  transform: none;
  visibility: visible;
  transition:
    transform var(--transition-base),
    visibility 0s linear 0s,
    display 0s linear 0s allow-discrete;
}

@starting-style {
  .mobile-drawer.open {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer.open {
    transition-delay: 0s;
  }
}