/* Native overlay scrollbars do not honor scrollbar-gutter. Card reading
   areas need real padding too. Extend into the existing outer inset so the
   text stays aligned with the shared header/footer on touch devices. */
[data-feed-scroll] {
  scrollbar-gutter: stable both-edges;
  padding-inline: 8px;
}
[data-feed-scroll]:not(.discussion-card__author) { margin-inline: -8px; }

/* Panels/editors already provide at least 12px of inner padding. Keep that
   clearance and reserve symmetric classic gutters to avoid off-center text
   or layout jumps when a scrollbar appears. Never style provider iframes. */
:is(.sheet__body, .comments-sheet__list, .saved-sheet__list,
    .live-room__messages, .programming-card__code,
    .infographic-reader__viewport, .tutor-status, .content--journey-end) {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scroll-padding-block: 12px;
}

/* Native zoom keeps the committed card in place and lets a finger pan the
   magnified viewport. Its actual scale remains under the user's control. */
/* Overscroll containment at either the feed or root would swallow native
   viewport panning even though touch-action allows it. Enable the chain only
   while magnified; keep the card's actual scrolling position pinned. */
.has-feed-zoom, .has-feed-zoom body { overscroll-behavior: auto; }
.feed.has-swipe.is-zoomed { overflow-y: hidden; overscroll-behavior: auto; scroll-snap-type: none; cursor: auto; }
.feed.has-swipe.is-zoomed:not(.is-navigation-locked),
.feed.has-swipe.is-zoomed:not(.is-navigation-locked) :is([data-feed-scroll], .content, .content > article) {
  touch-action: pan-x pan-y pinch-zoom;
}