/* Sticky horizontal scrollbar for a wide scroll container (ISH-794).
 *
 * Built for sales-pipeline.html's Kanban board, which scrolls sideways at every viewport by
 * design: ISH-493 pinned the stage columns at a 615px minimum instead of letting them narrow,
 * and ISH-613's fourth column deepened that trade. The board's *own* scrollbar sits at the
 * bottom edge of the board element — under the tallest stage column, which on a normal page is
 * well below the fold — so the only control for a scroll that every user needs was off-screen
 * until they scrolled the whole page past the columns.
 *
 * This is a proxy bar, not a second scroller: the rail holds a spacer as wide as the board's
 * scrollWidth and js/board-scroll-rail.js mirrors scrollLeft between the two, so dragging the
 * rail scrolls the board and scrolling the board tracks the rail. `position: sticky; bottom: 0`
 * keeps it against the bottom of the viewport for as long as the shell is on screen.
 *
 * ⚠️ The alternative considered and rejected: giving the board a viewport-bounded height
 * (`max-height: calc(100vh - …)`) so its own bar is always in view. That is CSS-only and needs
 * no JS, but it moves the board's vertical scroll inside the board — nested scrolling, a
 * dead page scrollbar, and a magic number for the header/toolbar height that goes stale the
 * first time the toolbar wraps. This keeps page scrolling exactly as it was.
 */

/* Deliberately carries no positioning, no overflow and no height. It exists only to be the
 * sticky rail's containing block, i.e. the box the rail is pinned inside; the rail shows while
 * this element's bottom edge is below the viewport's. ⚠️ An `overflow` value of any kind here
 * (including `clip`) makes this the rail's scrollport and the sticky behaviour silently stops. */
.board-scroll-shell {
}

.board-scroll-rail {
  position: sticky;
  bottom: 0;
  /* Above the cards it floats over, below .top-nav (100) and css/portal-rail.css (110). */
  z-index: 5;
  overflow-x: auto;
  /* The track is 1px tall; without this a sub-pixel rounding gives it a vertical bar too. */
  overflow-y: hidden;
  /* Opaque, with a hairline: the bar overlays the bottom of the board, and a transparent
   * strip would render card edges through the middle of the scrollbar track. */
  background: var(--page-bg);
  border-top: 1px solid var(--border-light);
  padding: 0.3rem 0 0.15rem;
}

/* Hidden by a class, not the `hidden` attribute: `[hidden]` loses to any `display` an element
 * has of its own, which has produced three separate "the page won't load" bugs in this repo. */
.board-scroll-rail.is-off {
  display: none;
}

/* Sized by js/board-scroll-rail.js to the board's scrollWidth — that width is the whole
 * mechanism, and 1px of height is what stops the rail being a second visible row. */
.board-scroll-rail-track {
  height: 1px;
}

/* ⚠️ macOS (and iOS) default to *overlay* scrollbars: invisible until a scroll is already
 * under way, which is exactly the affordance this component exists to provide — a bar that
 * only appears once you have found another way to scroll is no better than the off-screen one
 * it replaced. Declaring ::-webkit-scrollbar at all opts the element out of overlay behaviour
 * in Chrome and Safari, and `-webkit-appearance: none` is what drops the platform bar so the
 * height and colours below apply. **Do not add `scrollbar-width` or `scrollbar-color` to
 * .board-scroll-rail**: from Chrome 121 the standard properties win over these pseudo-elements,
 * so setting either one hands the bar back to the platform and re-hides it.
 *
 * Accepted limitation: Firefox implements none of this and honours the OS auto-hide setting,
 * so on a Mac the thumb there can still fade out. This app is Chrome-only in practice (Google
 * OAuth restricted to @isheepdog.com, and the Playwright suite runs Chromium), and Firefox
 * still gains the sticky rail — its bar appears at the bottom of the viewport on the first
 * scroll gesture rather than at the bottom of the board. */
.board-scroll-rail::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 10px;
}

.board-scroll-rail::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 5px;
}

/* --text-secondary, not the --text-label grey the rest of this page's chrome uses: #999999 on
 * the --border-light track measures 2.3:1, under WCAG 1.4.11's 3:1 for a UI control, and a
 * scrollbar nobody can pick out of its groove fails for the same reason an auto-hidden one
 * does. #4b5563 measures 6.1:1. (Chrome's own default thumb is lower-contrast than either —
 * matching it would be matching the problem.) */
.board-scroll-rail::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 5px;
  /* Inset the thumb inside the track so the groove reads as a groove. */
  border: 2px solid var(--page-bg);
}

.board-scroll-rail::-webkit-scrollbar-thumb:hover {
  background: var(--text);
}