growth until hit maximum feature bloat, now decoupling into TweakDrag new plugin

Asset/css/shrink-vertically.css

@@ -49,6 +49,28 @@
     height: 1px;
 }
 
+/*
+ * Make the top scrollbar thick enough to grab easily (touch / big fingers).
+ * WebKit/Blink (most desktop browsers and mobile Chrome/Safari) let us size the
+ * scrollbar; styling the thumb/track is needed for it to stay visible once customised.
+ * Thickness comes from the --sv-bar-size variable (Settings -> Shrink Vertically),
+ * injected in the page head; falls back to 25px. Chromium/WebKit only (Chrome/Edge/
+ * Safari, mobile Chrome/Safari); Firefox ignores ::-webkit-scrollbar and keeps its
+ * default thin bar -- accepted for now.
+ */
+.sv-top-scroll::-webkit-scrollbar {
+    height: var(--sv-bar-size, 25px);
+}
+
+.sv-top-scroll::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.sv-top-scroll::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: 6px;
+}
+
 /*
  * Click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
  * "Drag the board background to scroll" setting is enabled). The .sv-drag-scroll class
@@ -69,3 +91,12 @@
     cursor: grabbing !important;
     user-select: none !important;
 }
+
+/*
+ * Wider gutter between board columns is applied conditionally from
+ * Template/layout/variable.php (only when the "Widen the gap between columns" setting is
+ * on), using border-spacing with the --sv-bar-size value. border-spacing is the natural
+ * control for the gap between table columns: it spreads them without shrinking the cards
+ * and keeps each column header aligned with its task list. It is not in this static
+ * stylesheet so it can be toggled per the setting.
+ */