bucket-bar: hide scrollbar, soft edge fades, wheel-to-scroll

The horizontal scrollbar on the bucket row was ugly and
inconsistent with the rest of the app's scrollbar-less panels. Hide
it, redirect vertical wheel over the bar to horizontal scroll, and
surface overflow with soft bg-coloured gradients on whichever side
has more content off-screen: right only while anchored at the
start, both in the middle, left only at the end.

Fade overlays live on #bucket-row (parent) as pseudo-elements with
pointer-events:none, rather than mask-image on the bar itself — a
mask would also clip super-bucket popovers that are intentionally
rendered inside #bucket-bar for the collab MutationObserver.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/css/style.css

@@ -780,6 +780,50 @@ body.detail-image-fs-open { overflow: hidden; }
     background: color-mix(in srgb, var(--t-accent) 12%, transparent) !important;
 }
 
+/* Bucket bar: no visible scrollbar, soft edge fades when the row
+   overflows so the user knows there's more off-screen. Fade is
+   implemented via absolutely-positioned overlay pseudo-elements on
+   #bucket-row (parent) rather than mask-image on the bar itself,
+   because mask-image would also clip super-bucket popovers rendered
+   inside the bar. Overlays use pointer-events:none so clicks pass
+   through to the tabs underneath. */
+#bucket-bar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+}
+#bucket-bar::-webkit-scrollbar { display: none; }
+
+#bucket-row::before,
+#bucket-row::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 32px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 2;
+}
+#bucket-row::before {
+    left: 24px;  /* matches .px-6 = 24px on #bucket-row */
+    background: linear-gradient(to right, var(--t-bg) 0%, transparent 100%);
+}
+#bucket-row::after {
+    /* Stop at the right edge of #bucket-bar (before the toolbar
+       toggles). The toolbar is flex-0, bar is flex-1 — the easiest
+       way is to inset the overlay by the total width of the toolbar
+       via a right offset that the JS writes. Defaults to 24px (the
+       .px-6 pad) and the JS overrides with the real value. */
+    right: var(--bucket-row-right-inset, 24px);
+    background: linear-gradient(to left, var(--t-bg) 0%, transparent 100%);
+}
+#bucket-row.fade-left::before,
+#bucket-row.fade-both::before { opacity: 1; }
+#bucket-row.fade-right::after,
+#bucket-row.fade-both::after  { opacity: 1; }
+
 /* Unread dot on the fixed `all` bucket-tab — appears when new cards
    arrive while the user is viewing a different bucket. Cleared the
    moment the user navigates back to all (renderBoard drains the