/* The custom rail stays visible even on systems that auto-hide native scrollbars.
   It sits below dialogs and above the data grid, aligned with the table viewport. */
.pinned-scrollbar {
  position: fixed;
  z-index: 17;
  bottom: 0;
  box-sizing: border-box;
  height: 16px;
  padding: 3px 7px 4px;
  border: 1px solid var(--b-100);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--bg);
  box-shadow: 0 -3px 10px color-mix(in srgb, var(--fg-2) 3.9%, transparent);
}
.pinned-scrollbar[hidden] { display: none; }
.pinned-scrollbar-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.pinned-scrollbar-track:focus-visible { outline: 2px solid var(--b-400); outline-offset: 2px; }
.pinned-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 36px;
  border: 1px solid var(--subtle);
  border-radius: inherit;
  background: var(--line-strong);
  cursor: grab;
}
.pinned-scrollbar-thumb:hover, .pinned-scrollbar.is-dragging .pinned-scrollbar-thumb { border-color: var(--subtle); background: var(--b-400); }
.pinned-scrollbar.is-dragging, .pinned-scrollbar.is-dragging .pinned-scrollbar-thumb { cursor: grabbing; }
.board-card .table-wrap.pinned-scroll-source { scrollbar-width: none; }
.board-card .table-wrap.pinned-scroll-source::-webkit-scrollbar { height: 0; }
@media (max-width: 760px) {
  .pinned-scrollbar { bottom: calc(var(--mobile-nav-height, 68px) + env(safe-area-inset-bottom)); height: 18px; }
  .pinned-scrollbar-track { height: 10px; }
}