/* Standardize the mobile rails across the application. Section backgrounds can
   remain edge-to-edge, while their content and popup surfaces keep a clear,
   consistent 10px breathing room on both sides of the viewport. */
@media (max-width:700px){
  :root{
    --page-gutter:10px;
    --mobile-edge-gutter:10px;
  }

  /* Shared page sections use the same token as their inner content wrappers. */
  main > section.section-wrap,
  main > .deals-page.section-wrap,
  .upload-section > .section-wrap,
  .coffee-hub.section-wrap,
  .deals-section > .section-wrap,
  .taste-section > .section-wrap{
    padding-inline:10px!important;
  }

  /* Profile/public-profile content rails and their loading states. */
  .public-profile-page :is(.public-profile-identity,.public-profile-share-row,.public-profile-about,.public-profile-overview-card,.public-profile-settings,.public-profile-beans,.public-profile-equipment,.public-profile-gallery,.public-profile-coffee-corner,#publicProfileStatus),
  .site-skeleton-host#profile :is(.site-skeleton-profile--private,.site-skeleton-profile--public),
  .site-skeleton-host.public-profile-page .site-skeleton-profile--public{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* Keep profile identity/about content on the same rail as every other card. */
  body.profile-page .profile-identity-card .profile-identity-lower{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
  }

  /* All app bottom sheets use the same viewport rail. The backdrop remains
     full-screen; only the dialog surface is inset. */
  .kalimera-responsive-overlay{
    inset-inline:10px!important;
    width:auto!important;
    max-width:none!important;
    margin-inline:0!important;
  }

  .profile-section-nav-dialog{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  .kalimera-responsive-overlay > :is(.kalimera-overlay-surface,.profile-avatar-dialog-card,.bug-report-card,.profile-discard-card){
    width:100%;
  }

  /* Legacy modal wrappers that do not use the shared responsive-overlay class. */
  :is(.privacy-preferences-dialog,.shelf-dialog,.daily-streak-calendar-dialog,.profile-bean-wallet-dialog,.profile-preset-name-dialog,.profile-preset-delete-dialog){
    width:calc(100vw - 20px)!important;
    max-width:none!important;
  }
  :is(.privacy-preferences-dialog,.shelf-dialog,.daily-streak-calendar-dialog,.profile-bean-wallet-dialog,.profile-preset-name-dialog,.profile-preset-delete-dialog) > :is(.privacy-preferences-card,.shelf-dialog-card,.daily-streak-calendar-card,.profile-bean-wallet-card,.profile-preset-name-card,.profile-preset-delete-card){
    width:100%;
  }

  /* Preserve the intentional full-screen photo viewer; its controls already
     provide their own safe-area spacing. */
  :is(#lightbox,#mediaPreview,.admin-image-viewer){
    --mobile-edge-gutter:10px;
  }
}