/* Explicit frames share the same draggable rail across the POS. Their only
   scroll container is the marked child; headers and actions stay outside. */
.pos-touch-scroll-frame { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.pos-touch-scroll-frame > [data-touch-scrollbar] { flex: 1 1 auto; min-width: 0; min-height: 0; }
.pos-touch-scroll-frame > .has-touch-scrollbar { scrollbar-width: none; scrollbar-gutter: auto; }
.pos-touch-scroll-frame > .has-touch-scrollbar::-webkit-scrollbar { display: none; }
.pos-touch-scroll-frame > .pos-touch-scrollbar { flex-shrink: 0; }
.pos-touch-scrollbar { position: relative; flex: 0 0 44px; width: 44px; min-height: 0; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.pos-touch-scrollbar[hidden] { display: none; }
.pos-touch-scrollbar-thumb { position: absolute; top: 4px; left: 8px; right: 8px; height: 56px; border-radius: var(--ui-radius-dialog); background: color-mix(in srgb, var(--green) 48%, transparent); pointer-events: none; transition: background-color 120ms ease; }
.pos-touch-scrollbar:is(:hover, :focus-visible) .pos-touch-scrollbar-thumb { background: color-mix(in srgb, var(--green) 66%, transparent); }
.pos-touch-scrollbar.is-dragging { cursor: grabbing; }
.pos-touch-scrollbar.is-dragging .pos-touch-scrollbar-thumb { background: color-mix(in srgb, var(--green) 82%, transparent); }
.pos-touch-scrollbar:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .pos-touch-scrollbar-thumb { transition: none; }
}
@media (forced-colors: active) {
  .pos-touch-scrollbar-thumb { background: ButtonText; forced-color-adjust: none; }
}