Flush tile grid + macOS-style seam pill for resizing adjacent tiles

Tiles now sit with zero gap (their 1px borders are the only seam) and the
grid runs edge to edge. Wherever two tiles share a vertical edge, an
invisible strip sits on the seam; hovering reveals a small grab pill
(split-view style) and dragging it moves the shared edge, trading width
between the two tiles. The combined span is preserved, both tiles' min
sizes are honored, and a third tile sitting behind part of the seam
blocks the drag instead of being overlapped. Pills hide during tile
drags/resizes and rebuild for the new geometry on release; seam sizes
persist with the layout. Also fixes cellMetrics treating a 0px grid gap
as falsy and falling back to 10px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH

public/style.css

@@ -14,7 +14,7 @@
   --warn: #f0b429;
   /* grid geometry (shell.js reads these) */
   --cell-h: 72px;
-  --gap: 10px;
+  --gap: 0px; /* tiles sit flush; their 1px borders are the only seam */
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -138,7 +138,6 @@ button { font-family: inherit; }
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--gap);
   overscroll-behavior: contain;
 }
 
@@ -277,6 +276,41 @@ button { font-family: inherit; }
   border-radius: 0 0 3px 0;
 }
 
+/* ── seam divider between adjacent tiles ───────────────────────────── */
+
+/* When two tiles share a vertical edge, an invisible strip sits on the seam;
+   hovering reveals a small macOS-split-view-style grab pill. Dragging it
+   trades width between the two tiles. */
+.tile-divider {
+  position: absolute;
+  width: 14px;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.tile-divider::after {
+  content: "";
+  width: 5px;
+  height: 44px;
+  max-height: 55%;
+  border-radius: 999px;
+  background: var(--muted);
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+
+.tile-divider:hover::after { opacity: 0.7; }
+.tile-divider.active::after { opacity: 1; background: var(--text); }
+
+/* Hide the pills while a tile itself is being moved or corner-resized —
+   they're rebuilt for the new geometry on release. */
+#grid.no-dividers .tile-divider { display: none; }
+
 /* status message a module can show while degraded (also used by the shell
    when a module fails to load) */
 .tile-msg {