/* Tablet/touch desktop presentation for the five primary mobile routes.
 * Load after mobile-ui-v25.css. No route behavior or scroll owner changes.
 */
@media (min-width: 481px) {
  /* Some legacy fixed layers, including the receive dialog, consume this
   * gutter. Percentage sizing uses the layout viewport without its scrollbar. */
  html[data-sgc-mobile-primary-v25="1"]:not(.mobile-canvas-desktop) {
    --mobile-canvas-gutter: max(0px, calc((100% - var(--mobile-canvas-width, 480px)) / 2));
  }

  /* A classic vertical scrollbar makes 100vw 15px wider than the fixed
   * positioning area. Center the menu by its actual containing block. */
  html[data-sgc-mobile-primary-v25="1"]:not(.mobile-canvas-desktop) body.sgc-fixed-menu-route-v1 .sgc-fixed-menu-v1 {
    right: auto !important;
    left: 50% !important;
    width: min(var(--mobile-canvas-width, 480px), 100%) !important;
    max-width: var(--mobile-canvas-width, 480px) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Home and My are already centered by mobile-ui-v25.css. Record's native
   * route needs the same canvas, including its independently fixed header. */
  html[data-sgc-mobile-route-v25="record"]:not(.mobile-canvas-desktop) body uni-page[data-page="pages/detail/detail"] .detail {
    max-width: var(--mobile-canvas-width, 480px);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-sgc-mobile-route-v25="record"]:not(.mobile-canvas-desktop) body uni-page[data-page="pages/detail/detail"] .u-navbar-fixed {
    right: auto !important;
    left: 50% !important;
    width: min(var(--mobile-canvas-width, 480px), 100%) !important;
    max-width: var(--mobile-canvas-width, 480px) !important;
    transform: translateX(-50%) !important;
  }

  /* The existing 430px receive card stays centered on PC. On touch tablets,
   * its original right margin of zero would pin it to the page edge. */
  html[data-sgc-mobile-route-v25="receive"]:not(.mobile-canvas-desktop) body uni-page[data-page="pages/order/order"] .order_container.receive-page-sync-v15 {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The customer-service page is fixed; center its own surface rather than
   * changing its inner message scroller or composer. */
  html[data-sgc-mobile-route-v25="service"]:not(.mobile-canvas-desktop) body .feature-page.feature-service-page[data-sgc-service-module-v1="true"] {
    right: auto !important;
    left: 50% !important;
    width: min(var(--mobile-canvas-width, 480px), 100%) !important;
    max-width: var(--mobile-canvas-width, 480px) !important;
    transform: translateX(-50%) !important;
  }
}