/* iOS scroll-chain absorber for the slide-over.

   iOS picks a scroll target at gesture start and skips scrollers that cannot
   move in the drag direction; when nothing qualifies it rubber-bands the
   whole PWA viewport, where `overscroll-behavior` is ignored. The same
   happens to leftover momentum when a hard fling runs an inner scroller
   (e.g. a number wheel) into its edge — after the finger lifts, no touch
   guard can intervene.

   The absorber stays scrollable by exactly 1px at all times, so it always
   qualifies as the scroll target for anything chaining out of the drawer —
   and on a genuinely scrollable element `overscroll-behavior: none` IS
   honored, terminating the chain before it reaches the viewport. The sticky
   content layer pins the visible drawer so the 1px of travel never shows.
   (Technique: github.com/stripearmy/react-ios-scroll-lock) */
.slide-over-absorber {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
}

.slide-over-absorber::-webkit-scrollbar {
  display: none;
}

.slide-over-absorber-inner {
  height: calc(100% + 1px);
}

.slide-over-absorber-content {
  position: sticky;
  top: 0;
  bottom: 0;
  height: calc(100% - 1px);
}

/* A .sheet-action floats over the drawer's content, pinned to the bottom-right
   corner — the close button's counterpart. Outside a drawer the same markup
   simply sits where the page put it (the preview's title row). */
.slide-over-absorber-content .sheet-action {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: 1rem;
  z-index: 10;
}

/* Content that also renders as a full screen brings its own dismiss and marks
   it .sheet-dismiss: inside a drawer the chrome's top-right close button takes
   over, so the content's copy disappears rather than doubling up. */
.slide-over-absorber-content .sheet-dismiss {
  display: none;
}

/* The preview's own controls — bookmark, the editing trio — float over the
   drawer from the bottom-left corner, the add button's mirror, instead of
   sitting in the flow where they'd collide with it. Outside a drawer they
   stay hidden: the full screens carry the same controls in the action bar,
   and toggling by placement keeps them independent of how the frame's
   content was fetched. */
.sheet-actions {
  display: none;
}

.slide-over-absorber-content .sheet-actions {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* One circle for every floating control: the bookmark ships small for list
   rows and the trio grows labels on wide screens — floating together they
   all take the same icon circle. (Unlayered, so it outranks the button
   utilities; .sr-only keeps each button its accessible name.) */
.slide-over-absorber-content .sheet-actions .btn {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.slide-over-absorber-content .sheet-actions .btn > :not(img):not(svg):not(.sr-only) {
  display: none;
}

.slide-over-absorber-content .sheet-actions .btn img,
.slide-over-absorber-content .sheet-actions .btn svg {
  width: 1.25rem;
  height: 1.25rem;
}