/* Dark, surface-toned shadows indicate continuing content without consuming
   space or intercepting input. Panels can override the shared shadow color. */
.scroll-cues[data-scrollable=true] { isolation: isolate; }
.scroll-cues[data-scrollable=true]::before,
.scroll-cues[data-scrollable=true]::after {
  content: ''; display: block; position: sticky; z-index: 2;
  flex: 0 0 0; height: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--interaction-duration, 180ms) var(--interaction-ease, ease-out);
}
.scroll-cues[data-scrollable=true]::before { top: 0; box-shadow: 0 5px 12px 7px var(--scroll-cue-color); }
.scroll-cues[data-scrollable=true]::after { bottom: 0; box-shadow: 0 -5px 12px 7px var(--scroll-cue-color); }
.scroll-cues[data-scroll-above=true]::before,
.scroll-cues[data-scroll-below=true]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cues::before, .scroll-cues::after { transition: none; }
}