fix(hub): give the Music flat list its own look instead of Videos' reskin

Two complaints against real use: the artist -> album -> track hierarchy
was invisible (every depth sat flush left, distinguishable only by which
chevron happened to be open — Videos' own flat list never needed more
than one level, so there was nothing to reuse for this), and a filled-in
album unfolded into a wall of identical little icon-box squares, one per
track, carrying no information a track row can actually use (unlike
Videos' per-episode thumbnail).

Track rows now reuse Mode A's own numbered tracklist style
(.music-track-row: number, title, duration, no icon box) instead of
Videos' boxy thumb-slot row. A folder's expanded contents get wrapped in a
new .music-flat-children indent + rule line, so nesting reads as visible
steps into the tree rather than same-level siblings. Folder rows
(artist/album headers) still reuse Videos' flat-row style, which fits them
fine — this is not a wholesale rewrite, only what didn't actually work.

1 files changed, 28 insertions, 3 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 42cfcf9..38c38c8 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2690,9 +2690,13 @@ a.transfer-name {
    Reuses .video-overlay/.video-top-bar/.video-title/.video-close, .tb-btn/
    .tb-search, .video-flat-list/.video-flat-row/.video-flat-info/
    .video-flat-title/.video-flat-sub/.video-flat-folder/.video-flat-chevron
-   and .video-thumb-empty as-is — only what's genuinely different from
-   Videos (album art is square, not 2:3; there is a persistent player bar;
-   grouping is artist -> album, not movie/show) gets its own rule below. */
+   and .video-thumb-empty as-is for a *folder* row (artist/album headers) —
+   that part of Videos' flat list genuinely fits. A *track* row does not:
+   it reuses .music-track-row (Mode A's own tracklist style) instead, and
+   the tree gets its own .music-flat-children for indent/nesting, which
+   Videos' single-level flat list never needed. Also genuinely different
+   from Videos: album art is square, not 2:3; there is a persistent player
+   bar; grouping is artist -> album, not movie/show. */
 
 .music-artist-section { margin-bottom: 22px; }
 .music-artist-heading {
@@ -2846,6 +2850,27 @@ a.transfer-name {
   border-radius: 4px;
   border: 1px solid var(--border);
 }
+/* A folder's expanded contents — artist -> album -> track. Videos' own flat
+   list never needed this (one level, folders of episodes, no further
+   nesting) so there was nothing to reuse: every depth used to sit flush
+   left, indistinguishable from its parent except by which chevron happened
+   to be open. The rule line gives the eye a rail to follow down the tree;
+   it nests for free (each level wraps its own children in one more of
+   these), so an artist with a real album inside it reads as two visible
+   steps in, not one. */
+.music-flat-children {
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 2px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+/* A touch tighter vertically than Mode A's tracklist rows
+   (.music-track-row, reused as the base) — this one already sits behind
+   up to two levels of indent, so it gives a little of its own padding
+   back rather than compounding with the rail. */
+.music-flat-track { padding: 5px 8px; }
 
 /* ── Persistent player bar (docs/musicbay.md §2.3) ────────────────────────
    `position: sticky`, not `fixed` — deliberately: CLAUDE.md's own history