/* APSNY Story mobile edge-to-edge v1
   Loaded as a separate reversible layer. No desktop geometry is changed. */
@media (max-width: 768px) {
  :root { --apsny-story-mobile-gutter: 6px; }

  /* Editor/viewer stage wrappers used across current and legacy Story layouts. */
  .story-stage,
  .story-stage-wrap,
  .story-stage-shell,
  .story-preview,
  .story-preview-wrap,
  .story-preview-shell,
  .story-frame,
  .story-frame-wrap,
  .story-frame-shell,
  .story-slide,
  .story-slide-wrap,
  .story-media-wrap,
  .story-media-shell,
  #storyStage,
  #storyPreview,
  #storyFrame,
  #storySlide {
    width: calc(100vw - (var(--apsny-story-mobile-gutter) * 2)) !important;
    max-width: calc(100vw - (var(--apsny-story-mobile-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Let the actual Story photo/video fill that enlarged stage. */
  .story-stage > img,
  .story-stage > video,
  .story-stage-wrap img,
  .story-stage-wrap video,
  .story-preview > img,
  .story-preview > video,
  .story-preview-wrap img,
  .story-preview-wrap video,
  .story-frame > img,
  .story-frame > video,
  .story-frame-wrap img,
  .story-frame-wrap video,
  .story-slide > img,
  .story-slide > video,
  .story-media-wrap > img,
  .story-media-wrap > video,
  #storyStage > img,
  #storyStage > video,
  #storyPreview > img,
  #storyPreview > video,
  #storyFrame > img,
  #storyFrame > video {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Live selector extension generated during install. */
@media (max-width: 768px) {
  .stories-viewer-stage {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .stories-viewer-stage > img, .stories-viewer-stage > video {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}