android: the whole discography, on a page of its own

The artist page already filed every release the desktop's way, but it only
ever showed one category at a time and it showed all of it: no slice anywhere
in that grid, so an artist with 140 releases drew 140 cards. There is a page
now — All in front of the categories, a sort, a grouping by year, and the
editions opened in place under their own record, which is the part a flat
list loses — and the grid behind it stops at twelve with the way down under
it. It is the same classifier twice over the same cached albums, which the
desktop cannot do because its filing waits on a background description
harvest; the three things its own page has and this one does not — a
tracklist per record, an accent sampled per cover, the scroll-led banner —
are 140 calls and 140 decodes over mobile data for rows that are one tap
away, and ANDROID.md says so rather than leaving them looking forgotten.

The list caps at sixty with the rest a button away, before the grouping, so
the last year on screen can be a part of itself; under a name order By year
is not offered, because the years would repeat out of sequence. The mock
gains a 140-record artist so both caps are walked rather than argued about.

src/mobile/shell.css

@@ -1613,3 +1613,51 @@ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="
 }
 /* why the rows will not move while the filter has something in it */
 .pl-note { padding: 2px var(--pad) 8px; font-size: 12px; color: var(--text-muted); }
+
+/* ── the whole discography ───────────────────────────────────────────────
+   The artist page's "All". Nearly all of it is the app's own parts — .sec,
+   .segtabs, .row, .eds/.ed, .more-link, .btn — so what is here is the head,
+   the year written into the list where the desktop has a sticky rail, the
+   editions line under a record, and the editions themselves widened out of
+   the record page's 210px rail into the width this list already has. */
+.dg-head { display: flex; align-items: center; gap: 12px; padding: 12px var(--pad) 6px; }
+.dg-head .b { flex: 1; min-width: 0; }
+.dg-head .t { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dg-head .m { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
+.dg-por {
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex: none;
+    background: var(--surface);
+    box-shadow: var(--ring);
+    display: grid;
+    place-items: center;
+    color: var(--text-muted);
+}
+.dg-por img { width: 100%; height: 100%; object-fit: cover; }
+.dg-sec { padding-top: 12px; }
+/* the year. A phone list is read top to bottom, so the span the desktop's
+   rail jumps to is simply written into it. */
+.dg-group {
+    padding: 16px var(--pad) 5px;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.4px;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+.dg-group em { font-style: normal; font-weight: 650; letter-spacing: 0; color: var(--text-muted); }
+/* both of these line up under the row's TITLE, not under its cover: the
+   pad, the 46px cover and the row's 12px gap */
+.dg-eline {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 var(--pad) 9px calc(var(--pad) + 58px);
+    font-size: 12px;
+    font-weight: 750;
+    color: var(--accent-hover);
+}
+.dg-eds { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--pad) 12px calc(var(--pad) + 58px); }
+.dg-eds .ed { width: 100%; }