diff --git a/src/App.svelte b/src/App.svelte
index f9c5d80..3426022 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -26,6 +26,7 @@
         refreshLibrary,
         refreshPlaylists,
         refreshRecents,
+        restoreSession,
     } from "./lib/state.svelte.js";
     import { floatScroll } from "./lib/scrollbar.js";
 
@@ -60,6 +61,10 @@
     refreshLibrary();
     refreshPlaylists();
     refreshRecents();
+    // Last, and after initEvents: the restore asks the audio thread what it is
+    // doing, and re-opens the page the last session was on. See the session
+    // section at the foot of state.svelte.js.
+    void restoreSession();
 
 </script>
 
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index dc6981c..5938075 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -11,9 +11,7 @@
         refreshRecents,
         toggleSidebar,
         goToView,
-        openCatalogAlbum,
-        openAlbumByName,
-        openLibraryAlbum,
+        openRecentAlbum,
         getArt,
     } from "../lib/state.svelte.js";
     import * as api from "../lib/api.js";
@@ -139,34 +137,6 @@
         return !!a.art_path && a.art_path === playingArt;
     }
 
-    async function openRecent(a) {
-        if (a.kind === "catalog" && a.catalog_album_id) {
-            // The catalog page, not the old library album view — streamed
-            // records live in the catalog. The seed paints title/artist/cover
-            // immediately instead of flashing a skeleton.
-            openCatalogAlbum(a.catalog_album_id, {
-                seed: {
-                    id: a.catalog_album_id,
-                    title: a.title,
-                    artist: a.artist,
-                    cover: a.art_url ?? null,
-                },
-            });
-            return;
-        }
-        // A library row has no catalog id to open with — local albums carry no
-        // catalog identity at all (`albums.mbid` is null and never surfaced) —
-        // so the record is resolved by artist + title, where BOTH must match
-        // normalized or nothing opens. That namesake guard lives in
-        // openAlbumByName and is the reason this can't just take a first hit.
-        //
-        // Either way it is the SAME album page: a record no catalog has (Panda
-        // Bear's "A ? of WHEN", verified live) opens from the library's own
-        // data instead. There is no second album view to fall back to.
-        if (await openAlbumByName(a.artist, a.title)) return;
-        void openLibraryAlbum(a.album_id);
-    }
-
     $effect(() => {
         if (!recentsStore.loaded) refreshRecents();
     });
@@ -261,7 +231,7 @@
                     class="rec"
                     class:on={isPlaying(row.album)}
                     title="{row.album.title} — {row.album.artist}"
-                    onclick={() => openRecent(row.album)}
+                    onclick={() => openRecentAlbum(row.album)}
                 >
                     {#if coverOf(row.album)}
                         <img src={coverOf(row.album)} alt="" draggable="false" />
diff --git a/src/components/TitleBar.svelte b/src/components/TitleBar.svelte
index 756248e..bbcd5d3 100644
--- a/src/components/TitleBar.svelte
+++ b/src/components/TitleBar.svelte
@@ -3,13 +3,24 @@
         app,
         ui,
         downloads,
+        catalog,
+        recentsStore,
         catalogGo,
+        catalogSearchIdentityAlbums,
+        catalogTrackOwnership,
+        recentSearches,
+        searchNetworkFor,
         openCatalogArtist,
+        openCatalogAlbum,
+        openRecentAlbum,
         warmCatalogArtist,
         cancelCatalogArtistWarmup,
         streamSong,
         streamCatalogAlbum,
+        getArt,
+        gridCover,
     } from "../lib/state.svelte.js";
+    import { floatScroll } from "../lib/scrollbar.js";
     import * as api from "../lib/api.js";
     import Icon from "./Icon.svelte";
 
@@ -76,36 +87,157 @@
         }
     });
 
-    // ---- live search suggestions (Spotify-style dropdown) ----
+    // ---- live search suggestions ------------------------------------------
+    // The typeahead has three faces, all of them designed (see the prototype at
+    // research/search-redesign/PROTOTYPE-search.html):
+    //
+    //   typing        grouped Artists / Albums / Songs, each section under a
+    //                 hairline rule with its total; the keyboard selection
+    //                 carries a 3px accent edge so arrowing through it reads.
+    //   focused, empty  your recent searches and what you were last playing.
+    //   no matches    it does NOT vanish — a catalogue miss can still succeed
+    //                 on the Soulseek network, and it offers that.
+    //
+    // It is deliberately WIDER than the field (left/right: -70px, ~500px): at
+    // the field's own width real record titles truncated in every group.
     let sugg = $state(null); // last catalogSearch results for the dropdown
     let suggOpen = $state(false);
-    let hi = $state(-1); // highlighted row index, -1 = none
+    let focused = $state(false);
+    // The keyboard selection is held as the row's KEY, not its index. The
+    // MusicBrainz supplement lands ~600ms after the rest and re-orders the album
+    // group; an index would then point at a different record than the one the
+    // accent edge is drawn on, and Enter would open that one. `null` = the
+    // footer, which is what Enter does by default.
+    let hiKey = $state(null);
     let suggSeq = 0;
     let debounceTimer = null;
+    let mbTimer = null;
+    let mbExtras = $state([]);
+    let owned = $state({});
+    // Keyed by artist AND query: the extras are deduped against the album list
+    // they were computed for, and a different query has a different one. The
+    // MusicBrainz traffic behind this is cached backend-side per artist, so a
+    // repeat costs nothing.
+    const mbCache = new Map();
+    const MB_CACHE_MAX = 32;
 
-    const suggRows = $derived.by(() => {
-        if (!sugg) return [];
-        const rows = [];
-        for (const a of sugg.artists.slice(0, 2)) {
-            rows.push({ kind: "artist", label: a.name, sub: "Artist", img: a.picture, round: true, data: a });
+    const recentQueries = $derived(recentSearches(catalog.query, 4));
+    const jumpBackIn = $derived(recentsStore.albums.slice(0, 3));
+    let recentArt = $state({});
+    $effect(() => {
+        for (const a of jumpBackIn) {
+            const p = a.art_path;
+            if (!p || recentArt[p] !== undefined) continue;
+            recentArt[p] = null;
+            getArt(p)
+                .then((u) => (recentArt[p] = u))
+                .catch(() => {});
         }
-        for (const al of sugg.albums.slice(0, 3)) {
-            const year = al.release_date ? ` · ${al.release_date.slice(0, 4)}` : "";
-            rows.push({ kind: "album", label: al.title, sub: `Album · ${al.artist}${year}`, img: al.cover, round: false, data: al });
-        }
-        for (const t of sugg.tracks.slice(0, 4)) {
-            rows.push({ kind: "track", label: t.title, sub: `Song · ${t.artist}`, img: t.cover, round: false, data: t });
-        }
-        return rows;
     });
+    const recentCover = (a) => a.art_url ?? (a.art_path ? recentArt[a.art_path] : null);
+
+    /** Records only MusicBrainz carries are merged into Albums with no badge and
+     *  no section of their own, exactly as on the results page — and the merged
+     *  list is sorted newest-first, or a four-row slice would never reach them. */
+    const suggAlbums = $derived(
+        [...(sugg?.albums ?? []), ...mbExtras].sort((a, b) =>
+            (b.release_date ?? "").localeCompare(a.release_date ?? ""),
+        ),
+    );
+
+    const suggGroups = $derived.by(() => {
+        if (!sugg) return [];
+        const groups = [];
+        if (sugg.artists.length) {
+            groups.push({
+                label: "Artists",
+                count: sugg.artists.length,
+                rows: sugg.artists.slice(0, 2).map((a) => ({
+                    kind: "artist",
+                    key: `artist:${a.id}`,
+                    label: a.name,
+                    sub: a.fans ? `Artist · ${fmtFans(a.fans)} fans` : "Artist",
+                    img: a.picture,
+                    round: true,
+                    data: a,
+                })),
+            });
+        }
+        if (suggAlbums.length) {
+            groups.push({
+                label: "Albums",
+                count: suggAlbums.length,
+                rows: suggAlbums.slice(0, 4).map((al) => ({
+                    kind: "album",
+                    key: `album:${al.id}`,
+                    label: al.title,
+                    sub: [al.release_date?.slice(0, 4), al.artist].filter(Boolean).join(" · "),
+                    img: al.cover,
+                    round: false,
+                    data: al,
+                })),
+            });
+        }
+        if (sugg.tracks.length) {
+            groups.push({
+                label: "Songs",
+                count: sugg.tracks.length,
+                rows: sugg.tracks.slice(0, 3).map((t) => ({
+                    kind: "track",
+                    key: `track:${t.id}`,
+                    label: t.title,
+                    sub: `${t.artist} · ${t.album}`,
+                    dur: fmtDuration(t.duration_secs),
+                    img: t.cover,
+                    round: false,
+                    data: t,
+                })),
+            });
+        }
+        return groups;
+    });
+
+    /** Flat, in visual order — what the arrow keys walk. */
+    const suggRows = $derived(suggGroups.flatMap((g) => g.rows));
+
+    /** Which of the three panels is on screen. */
+    const suggMode = $derived.by(() => {
+        if (!suggOpen) return null;
+        if (!searchText.trim()) {
+            return recentQueries.length || jumpBackIn.length ? "empty" : null;
+        }
+        if (!sugg) return null;
+        return suggRows.length ? "list" : "none";
+    });
+
+    const fmtFans = (n) => {
+        if (n == null) return null;
+        if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}M`;
+        if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+        return String(n);
+    };
+    const fmtDuration = (s) =>
+        s == null ? "" : `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
 
     function onSearchInput() {
         clearTimeout(debounceTimer);
+        clearTimeout(mbTimer);
         cancelCatalogArtistWarmup();
         const q = searchText.trim();
+        if (!q) {
+            // An emptied field falls back to the recent panel rather than
+            // closing: the reader is still in the field, still searching.
+            suggSeq += 1;
+            sugg = null;
+            mbExtras = [];
+            hiKey = null;
+            suggOpen = focused;
+            return;
+        }
         if (q.length < 2) {
             suggOpen = false;
             sugg = null;
+            mbExtras = [];
             return;
         }
         debounceTimer = setTimeout(async () => {
@@ -115,38 +247,94 @@
                 // Ignore stale responses and results for superseded queries.
                 if (seq !== suggSeq || searchText.trim() !== q) return;
                 sugg = res;
-                hi = -1;
+                mbExtras = [];
+                hiKey = null;
                 suggOpen = true;
                 // The first artist is overwhelmingly the next click. Warm its
                 // one-round-trip overview and art resolver while the user is
                 // still reading the dropdown; keyed caches share the work.
                 if (res.artists?.[0]) warmCatalogArtist(res.artists[0]);
+                void markOwned(res.tracks, seq);
+                scheduleMbSupplement(res, q, seq);
             } catch {
                 // backend unavailable — no suggestions
             }
         }, 250);
     }
 
+    async function markOwned(tracks, seq) {
+        try {
+            const map = await catalogTrackOwnership(tracks);
+            if (seq === suggSeq) owned = map;
+        } catch {
+            owned = {};
+        }
+    }
+
+    /** The MusicBrainz supplement is NOT fetched per keystroke. It waits for the
+     *  same 600ms of the artist staying the top hit that the artist warm-up
+     *  waits for, so live-search churn can never pace-probe MusicBrainz. */
+    function scheduleMbSupplement(res, query, seq) {
+        const seed = res?.artists?.[0];
+        if (seed?.id == null) return;
+        const key = `${seed.id}|${query}`;
+        mbTimer = setTimeout(() => {
+            if (seq !== suggSeq) return;
+            if (!mbCache.has(key)) {
+                mbCache.set(
+                    key,
+                    catalogSearchIdentityAlbums(seed, res.albums).catch(() => []),
+                );
+                // A long typing session would otherwise grow this without end.
+                while (mbCache.size > MB_CACHE_MAX) {
+                    mbCache.delete(mbCache.keys().next().value);
+                }
+            }
+            mbCache.get(key).then((extras) => {
+                if (seq === suggSeq && extras.length) mbExtras = extras;
+            });
+        }, 600);
+    }
+
     function closeSuggest() {
         suggOpen = false;
-        hi = -1;
+        hiKey = null;
     }
 
     function pickRow(row) {
         closeSuggest();
         cancelCatalogArtistWarmup();
         if (row.kind === "artist") openCatalogArtist(row.data.id, row.data);
-        else if (row.kind === "album") streamCatalogAlbum(row.data);
-        else {
-            const t = row.data;
-            streamSong(t.artist, t.title, {
-                cover: t.cover,
-                trackId: t.id,
-                albumId: t.album_id,
-                album: t.album || null,
-                expectSecs: t.duration_secs ?? null,
+        else if (row.kind === "album") {
+            // Clicking a row GOES there; the play button on the row plays it.
+            const al = row.data;
+            openCatalogAlbum(al.id, {
+                seed: { id: al.id, title: al.title, artist: al.artist, cover: al.cover ?? null },
             });
-        }
+        } else playTrack(row.data);
+    }
+
+    function playTrack(t) {
+        streamSong(t.artist, t.title, {
+            cover: t.cover,
+            trackId: t.id,
+            albumId: t.album_id,
+            album: t.album || null,
+            expectSecs: t.duration_secs ?? null,
+        });
+    }
+
+    function playRow(row) {
+        closeSuggest();
+        cancelCatalogArtistWarmup();
+        if (row.kind === "album") streamCatalogAlbum(row.data);
+        else if (row.kind === "track") playTrack(row.data);
+    }
+
+    function pickQuery(q) {
+        closeSuggest();
+        searchText = q;
+        catalogGo(q);
     }
 
     function searchKeydown(e) {
@@ -154,15 +342,18 @@
             if (e.key === "Escape") closeSuggest();
             return;
         }
+        // A row that has since left the list reads as "no selection", so the
+        // arrows resume from the top rather than from a place that is gone.
+        const at = suggRows.findIndex((r) => r.key === hiKey);
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            hi = (hi + 1) % suggRows.length;
+            hiKey = suggRows[(at + 1) % suggRows.length].key;
         } else if (e.key === "ArrowUp") {
             e.preventDefault();
-            hi = hi <= 0 ? suggRows.length - 1 : hi - 1;
-        } else if (e.key === "Enter" && hi >= 0) {
+            hiKey = suggRows[at <= 0 ? suggRows.length - 1 : at - 1].key;
+        } else if (e.key === "Enter" && at >= 0) {
             e.preventDefault();
-            pickRow(suggRows[hi]);
+            pickRow(suggRows[at]);
         } else if (e.key === "Escape") {
             closeSuggest();
         }
@@ -170,17 +361,33 @@
 
     function searchFocusOut(e) {
         // Keep the panel open while focus moves within the search form.
-        if (!e.currentTarget.contains(e.relatedTarget)) closeSuggest();
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            focused = false;
+            closeSuggest();
+        }
+    }
+
+    function searchFocus() {
+        focused = true;
+        // Returning to the field re-opens what it last had to say.
+        if (!searchText.trim()) suggOpen = recentQueries.length > 0 || jumpBackIn.length > 0;
+        else if (sugg && searchText.trim().length >= 2) suggOpen = true;
     }
 
     function submitSearch(e) {
-        e.preventDefault();
+        e?.preventDefault();
         clearTimeout(debounceTimer);
+        clearTimeout(mbTimer);
         suggSeq += 1; // cancel any in-flight suggestion fetch
         closeSuggest();
         catalogGo(searchText);
     }
 
+    function networkSearch() {
+        closeSuggest();
+        searchNetworkFor(searchText);
+    }
+
     async function syncMaximized() {
         try {
             maximized = await api.win.isMaximized();
@@ -223,6 +430,9 @@
     </div>
     <!-- The Soulseek status lives in the sidebar's glass bar now: it is an
          account presence, and it belongs next to the library it feeds. -->
+    <!-- The dropdown is a CHILD of the field, not of the titlebar: it is
+         positioned against the field's own box (left/right: -70px). Parented to
+         the bar it rendered 1223px wide. -->
     <form class="bar-search" onsubmit={submitSearch} onfocusout={searchFocusOut}>
         <Icon name="search" size={13} />
         <input
@@ -231,43 +441,130 @@
             bind:value={searchText}
             oninput={onSearchInput}
             onkeydown={searchKeydown}
-            onfocus={() => { if (sugg && searchText.trim().length >= 2) suggOpen = true; }}
+            onfocus={searchFocus}
             spellcheck="false"
         />
-        {#if suggOpen && suggRows.length > 0}
+        {#if focused}
+            <span class="kb" aria-hidden="true">↵</span>
+        {/if}
+        {#if suggMode}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="suggest" onmousedown={(e) => e.preventDefault()}>
-                {#each suggRows as row, i (row.kind + row.data.id)}
+            <div class="suggest" use:floatScroll onmousedown={(e) => e.preventDefault()}>
+                {#if suggMode === "empty"}
+                    {#if recentQueries.length}
+                        <div class="sg-h">Recent<span class="line"></span></div>
+                        <div class="chiprow">
+                            {#each recentQueries as q (q)}
+                                <button type="button" class="rc" onclick={() => pickQuery(q)}>
+                                    <Icon name="search" size={11} />{q}
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
+                    {#if jumpBackIn.length}
+                        <div class="sg-h">Jump back in<span class="line"></span></div>
+                        {#each jumpBackIn as a (a.kind === "catalog" ? `c:${a.catalog_album_id}` : `l:${a.album_id}`)}
+                            <button
+                                type="button"
+                                class="sg"
+                                onclick={() => {
+                                    closeSuggest();
+                                    openRecentAlbum(a);
+                                }}
+                            >
+                                {#if recentCover(a)}
+                                    <img src={recentCover(a)} alt="" draggable="false" />
+                                {:else}
+                                    <span class="sg-img placeholder"><Icon name="disc" size={13} /></span>
+                                {/if}
+                                <span class="sg-text">
+                                    <span class="t">{a.title}</span>
+                                    <span class="s">{a.artist}</span>
+                                </span>
+                            </button>
+                        {/each}
+                    {/if}
+                {:else if suggMode === "none"}
+                    <!-- Never a vanishing panel: the network is still an answer. -->
+                    <div class="nomatch">
+                        <div class="nomatch-h">No quick matches</div>
+                        <div class="nomatch-s">
+                            Nothing in the catalogue starts with “{searchText.trim()}”.
+                        </div>
+                    </div>
+                    <button type="button" class="sg-ft" onclick={networkSearch}>
+                        <Icon name="globe" size={13} strokeWidth={1.8} />
+                        <span>Search the network for files</span>
+                        <span class="kb">↵</span>
+                    </button>
+                {:else}
+                    {#each suggGroups as group (group.label)}
+                        <div class="sg-h">
+                            {group.label}<span class="c">{group.count}</span><span class="line"
+                            ></span>
+                        </div>
+                        {#each group.rows as row (row.key)}
+                            <button
+                                type="button"
+                                class="sg"
+                                class:on={row.key === hiKey}
+                                onmouseenter={() => (hiKey = row.key)}
+                                onclick={() => pickRow(row)}
+                            >
+                                {#if row.img}
+                                    <img
+                                        class:round={row.round}
+                                        src={gridCover(row.img)}
+                                        alt=""
+                                        draggable="false"
+                                    />
+                                {:else}
+                                    <span class="sg-img placeholder" class:round={row.round}>
+                                        <Icon name="music" size={13} />
+                                    </span>
+                                {/if}
+                                <span class="sg-text">
+                                    <span class="t">
+                                        {row.label}
+                                        {#if row.kind === "track" && owned[row.data.id]}
+                                            <span class="own">SAVED</span>
+                                        {/if}
+                                    </span>
+                                    <span class="s">{row.sub}</span>
+                                </span>
+                                {#if row.dur}
+                                    <span class="d">{row.dur}</span>
+                                {/if}
+                                {#if row.kind !== "artist"}
+                                    <!-- Hover swaps the duration for this. -->
+                                    <span
+                                        class="play"
+                                        role="button"
+                                        tabindex="-1"
+                                        aria-hidden="true"
+                                        onclick={(e) => {
+                                            e.stopPropagation();
+                                            playRow(row);
+                                        }}
+                                        onkeydown={() => {}}
+                                    >
+                                        <Icon name="play" size={11} />
+                                    </span>
+                                {/if}
+                            </button>
+                        {/each}
+                    {/each}
                     <button
                         type="button"
-                        class="sugg-row"
-                        class:active={i === hi}
-                        onmouseenter={() => (hi = i)}
-                        onclick={() => pickRow(row)}
+                        class="sg-ft"
+                        class:on={hiKey === null}
+                        onclick={() => submitSearch()}
                     >
-                        {#if row.img}
-                            <img class="sugg-img" class:round={row.round} src={row.img} alt="" draggable="false" />
-                        {:else}
-                            <div class="sugg-img placeholder" class:round={row.round}>
-                                <Icon name="music" size={13} />
-                            </div>
-                        {/if}
-                        <span class="sugg-text">
-                            <span class="sugg-label">{row.label}</span>
-                            <span class="sugg-sub">{row.sub}</span>
-                        </span>
-                        {#if row.kind !== "artist"}
-                            <span class="sugg-play"><Icon name="play" size={12} /></span>
-                        {/if}
+                        <Icon name="search" size={13} />
+                        <span>See all results for “{searchText.trim()}”</span>
+                        <span class="kb">↵</span>
                     </button>
-                {/each}
-                <button type="button" class="sugg-row all" class:active={hi === -1} onclick={submitSearch}>
-                    <span class="sugg-all-icon"><Icon name="search" size={13} /></span>
-                    <span class="sugg-text">
-                        <span class="sugg-label">See all results for “{searchText.trim()}”</span>
-                        <span class="sugg-sub">Enter</span>
-                    </span>
-                </button>
+                {/if}
             </div>
         {/if}
     </form>
@@ -381,8 +678,19 @@
         color: var(--text-muted);
     }
 
+    /* The ONE change to the field: the focus ring was `--text-muted`, which
+       read as a dead grey border rather than as the field being live. It is the
+       accent now, and a ↵ hint appears beside the caret to say what Enter does.
+       Every other measurement above is untouched. */
+    .bar-search {
+        outline: 1px solid transparent;
+        transition:
+            outline-color 0.18s,
+            color 0.18s;
+    }
+
     .bar-search:focus-within {
-        outline: 1px solid var(--text-muted);
+        outline: 1px solid var(--accent);
         color: var(--text-secondary);
     }
 
@@ -400,12 +708,28 @@
         color: var(--text-muted);
     }
 
+    .kb {
+        font-size: 9px;
+        font-weight: 800;
+        padding: 1px 5px;
+        border-radius: 3px;
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+        flex: none;
+    }
+
     /* ---- live suggestions dropdown ---- */
+    /* Wider than the field on both sides: at the field's own 360px, real record
+       titles ("Superman (Garage Practice) / The BBC Tracks / …") truncated in
+       every group. This is the one place the old -8px rule is deliberately
+       broken. Capped in height because the full grouped list is taller than the
+       window; the overflow is the app's own floating overlay bar
+       (`use:floatScroll`), which is invisible at rest. */
     .suggest {
         position: absolute;
         top: 30px;
-        left: -8px;
-        right: -8px;
+        left: -70px;
+        right: -70px;
         display: flex;
         flex-direction: column;
         padding: 6px;
@@ -413,101 +737,209 @@
         background: var(--bg-elevated);
         box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
         z-index: 50;
+        max-height: 420px;
+        overflow-y: auto;
+        animation: ddin 0.17s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    @keyframes ddin {
+        from {
+            opacity: 0;
+            transform: translateY(-6px) scale(0.985);
+        }
+        to {
+            opacity: 1;
+            transform: none;
+        }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .suggest {
+            animation: none;
+        }
     }
 
-    .sugg-row {
+    /* A section header: name, its total, and a hairline running to the edge. */
+    .sg-h {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 9px;
+        font-weight: 900;
+        letter-spacing: 0.13em;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        padding: 7px 8px 4px;
+    }
+    .sg-h .c {
+        background: var(--bg-highlight);
+        border-radius: 99px;
+        padding: 1px 6px;
+        font-size: 8.5px;
+        letter-spacing: 0.04em;
+    }
+    .sg-h .line {
+        flex: 1;
+        height: 1px;
+        background: var(--border);
+    }
+
+    .sg {
         display: flex;
         align-items: center;
         gap: 10px;
         width: 100%;
         padding: 5px 8px;
-        border-radius: 7px;
+        border-radius: 6px;
+        position: relative;
         text-align: left;
         color: var(--text-primary);
     }
-
-    .sugg-row.active {
+    .sg:hover,
+    .sg.on {
         background: var(--bg-highlight);
     }
-
-    .sugg-img {
-        width: 30px;
-        height: 30px;
+    /* The keyboard selection carries an accent edge, so arrowing down the list
+       is legible as a *selection* rather than as another hover. */
+    .sg.on::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 6px;
+        bottom: 6px;
+        width: 3px;
+        border-radius: 2px;
+        background: var(--accent);
+    }
+    .sg img,
+    .sg-img {
+        width: 32px;
+        height: 32px;
         border-radius: 4px;
         object-fit: cover;
-        flex-shrink: 0;
+        flex: none;
         background: var(--bg-highlight);
     }
-
-    .sugg-img.round {
+    .sg img.round,
+    .sg-img.round {
         border-radius: 50%;
     }
-
-    .sugg-img.placeholder {
+    .sg-img.placeholder {
         display: grid;
         place-items: center;
         color: var(--text-muted);
     }
-
-    .sugg-text {
+    .sg-text {
         display: flex;
         flex-direction: column;
         min-width: 0;
         flex: 1;
     }
-
-    .sugg-label {
-        font-size: 12px;
+    .sg .t {
+        font-size: 12.5px;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        gap: 6px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .sugg-sub {
-        font-size: 11px;
+    .sg .s {
+        font-size: 10.5px;
         color: var(--text-muted);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .sugg-play {
-        display: grid;
-        place-items: center;
+    .sg .d {
+        font-size: 10.5px;
+        color: var(--text-muted);
+        margin-left: auto;
+        flex: none;
+    }
+    /* Hover swaps the duration for the thing you actually want at that moment. */
+    .sg .play {
         width: 22px;
         height: 22px;
         border-radius: 50%;
-        color: var(--text-muted);
-        opacity: 0;
-        flex-shrink: 0;
+        background: var(--accent);
+        color: #000;
+        display: none;
+        place-items: center;
+        flex: none;
+        margin-left: auto;
+        cursor: pointer;
+    }
+    .sg:hover .play,
+    .sg.on .play {
+        display: grid;
+    }
+    .sg:hover .d,
+    .sg.on .d {
+        display: none;
+    }
+    .own {
+        font-size: 8px;
+        font-weight: 900;
+        letter-spacing: 0.06em;
+        padding: 1px 5px;
+        border-radius: 3px;
+        background: var(--bg-press);
+        color: var(--text-secondary);
+        flex: none;
     }
 
-    .sugg-row:hover .sugg-play,
-    .sugg-row.active .sugg-play {
-        opacity: 1;
-        color: var(--text-primary);
-    }
-
-    .sugg-row.all {
-        margin-top: 2px;
-        border-top: 1px solid var(--bg-highlight);
-        border-radius: 0 0 7px 7px;
+    .sg-ft {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        width: 100%;
+        padding: 7px 8px;
+        margin-top: 4px;
+        border-top: 1px solid var(--border);
+        font-size: 11.5px;
+        font-weight: 800;
         color: var(--text-secondary);
     }
-
-    .sugg-row.all.active,
-    .sugg-row.all:hover {
-        background: var(--bg-highlight);
-        color: var(--text-primary);
+    .sg-ft:hover,
+    .sg-ft.on {
+        color: #fff;
+    }
+    .sg-ft .kb {
+        margin-left: auto;
     }
 
-    .sugg-all-icon {
-        display: grid;
-        place-items: center;
-        width: 30px;
-        height: 30px;
-        flex-shrink: 0;
+    .chiprow {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 2px 6px 6px;
+    }
+    .rc {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 9px;
+        border-radius: 99px;
+        background: var(--bg-highlight);
+        font-size: 11px;
+        font-weight: 700;
+        margin: 2px;
+    }
+    .rc:hover {
+        background: var(--bg-press);
+    }
+
+    .nomatch {
+        padding: 18px 10px;
+        text-align: center;
+    }
+    .nomatch-h {
+        font-size: 12px;
+        font-weight: 800;
+    }
+    .nomatch-s {
+        font-size: 11px;
         color: var(--text-muted);
+        margin-top: 3px;
     }
 
     .controls {
diff --git a/src/lib/api.js b/src/lib/api.js
index bdb2f03..670c5aa 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -77,6 +77,10 @@ export const playLocal = (path, duration) => invoke("play_local", { path, durati
 export const preloadLocal = (path, duration) => invoke("preload_local", { path, duration });
 export const playerControl = (action, value, rate) =>
     invoke("player_control", { action, value: value ?? null, rate: rate ?? null });
+// What the audio thread is doing right now. The webview only ever learns about
+// playback from events, so after a reload this is the only way to find out that
+// audio is still running — see `restoreSession`.
+export const playerState = () => invoke("player_state");
 export const waveform = (path, buckets) => invoke("waveform", { path, buckets });
 export const libraryAlbums = () => invoke("library_albums");
 export const albumTracks = (albumId) => invoke("album_tracks", { albumId });
@@ -149,6 +153,15 @@ export const catalogArtistPopular = (artistId) =>
 export const pickArtistHero = (artistId) => invoke("pick_artist_hero", { artistId });
 export const clearArtistHero = (artistId) => invoke("clear_artist_hero", { artistId });
 export const catalogRelated = (artistId) => invoke("catalog_related", { artistId });
+// Deferred Last.fm pass for search results: `tracks` is [{ artistId, title }]
+// and the answer comes back in the same order. Kept OUT of catalog_search,
+// which the typeahead calls per keystroke and which must never wait on
+// MusicBrainz's 1 req/s gate.
+export const catalogTrackListeners = (tracks) =>
+    invoke("catalog_track_listeners", { tracks });
+// Genres + Last.fm totals for the search hero's artist. Deferred, like the rest.
+export const catalogArtistProfile = (artistId) =>
+    invoke("catalog_artist_profile", { artistId });
 export const catalogAlbum = (albumId) => checkedAlbumPayload(albumId);
 export const catalogAlbumInfo = (artistId, artist, title) =>
     invoke("catalog_album_info", { artistId: artistId ?? null, artist, title });
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index 1dbb558..b385a6b 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -6,6 +6,7 @@ import {
     recordVisit,
     refreshVisit,
     captureScroll,
+    restoreScroll,
     goBack,
     goForward,
     goToCrumb,
@@ -823,6 +824,9 @@ export async function refreshLibrary() {
         // Artist/art refreshes replace files at the same cached path. Drop
         // data-URL entries so the webview fetches the newly resized image.
         artCache.clear();
+        // Saving a song adds tracks to an album this map has already answered
+        // for; a stale answer would leave the new SAVED badge off until reload.
+        libraryAlbumTitles.clear();
         libraryStore.albums = await api.libraryAlbums();
         libraryStore.loaded = true;
         window.__libErr = null;
@@ -860,6 +864,36 @@ export const catalog = $state({
     albumSeed: null, // { cover, title, artist, kind } | null
     pendingTrackId: null, // a track to scroll to/flash on the album page
     error: "",
+    // ---- search page supplements ------------------------------------------
+    // Three things the results page shows that a Deezer search does not
+    // return. Each lands on its own schedule and each is additive: the page
+    // is complete without any of them, and none of them ever re-orders or
+    // removes a row that is already on screen.
+    //
+    // Records only MusicBrainz knows about (Death Grips' Exmilitary, MBV's
+    // Loveless). Merged into Albums with no badge and no section of their
+    // own — see `catalogSearchIdentityAlbums`.
+    searchAlbumExtras: [],
+    // { [albumId]: "YYYY-MM-DD" }. Deezer's album SEARCH carries no release
+    // dates at all — 0 of 12 on a live "panda bear" — while the MusicBrainz
+    // supplement carries one for every row. Sorting the merged list by date
+    // without this therefore did the exact opposite of what it was for: every
+    // supplemented record floated above every result Deezer actually returned,
+    // and provenance decided position again. The dates come from the artist
+    // OVERVIEW, which `warmCatalogArtist` already fetches on every search, so
+    // this costs nothing.
+    searchAlbumDates: {},
+    // { [trackId]: listeners } — Last.fm counts for the top artist's songs,
+    // lifted from the same command the artist page's Popular list uses.
+    searchListeners: {},
+    // { [trackId]: true } for result songs already saved in the library.
+    searchOwned: {},
+    // { listeners, plays, tags } for the artist the hero is about.
+    searchArtistProfile: null,
+    // The hero album's own page — its real tracklist and headline totals. Only
+    // fetched when an ALBUM is the top result, which is the only time the hero
+    // has anything to do with it.
+    searchAlbumPage: null,
 });
 let artistPageRequest = 0;
 let artistWarmGeneration = 0;
@@ -1341,10 +1375,23 @@ export async function catalogGo(query) {
     catalog.results = null;
     catalog.loading = true;
     catalog.error = "";
+    catalog.searchAlbumExtras = [];
+    catalog.searchAlbumDates = {};
+    catalog.searchListeners = {};
+    catalog.searchOwned = {};
+    catalog.searchArtistProfile = null;
+    catalog.searchAlbumPage = null;
     try {
         const results = await api.catalogSearch(q);
         if (request !== catalogSearchRequest) return;
         catalog.results = results;
+        // Only a query that found something is worth offering back, or learning
+        // as a correctly-spelled name — see `recentSearches`.
+        if (results?.artists?.length || results?.albums?.length || results?.tracks?.length) {
+            fruitfulSearches.add(q);
+        } else {
+            fruitfulSearches.delete(q);
+        }
         for (const artist of results?.artists ?? []) rememberArtistSeed(artist);
         // Search results are normally read for a moment before the first artist
         // is opened. Spend that otherwise-idle time warming its identity/art
@@ -1354,6 +1401,14 @@ export async function catalogGo(query) {
         if (likelyArtistId != null) {
             warmCatalogArtist(results.artists[0]);
         }
+        // Every supplement is fired AFTER the results are on screen and none is
+        // awaited: the page must never wait on MusicBrainz's 1 req/s gate or on
+        // Last.fm to paint what Deezer already answered.
+        const stillCurrent = () => request === catalogSearchRequest;
+        void applySearchAlbumDates(results, stillCurrent);
+        void applySearchIdentityAlbums(results, stillCurrent);
+        void applySearchListeners(results, stillCurrent);
+        void applySearchOwnership(results, stillCurrent);
     } catch (e) {
         if (request === catalogSearchRequest) catalog.error = String(e);
     } finally {
@@ -1361,6 +1416,288 @@ export async function catalogGo(query) {
     }
 }
 
+/* The two hero supplements. Both are driven by the VIEW rather than fired from
+ * `catalogGo`, because only the view knows which kind won the hero — and each
+ * costs a rate-limited lookup that would be wasted on the other two kinds. The
+ * ranking rule stays in one place instead of being mirrored here. */
+let searchProfileRequest = 0;
+/** Genres + Last.fm totals for an ARTIST hero. */
+export async function loadSearchArtistProfile(artistId) {
+    const request = ++searchProfileRequest;
+    catalog.searchArtistProfile = null;
+    if (artistId == null) return;
+    try {
+        const profile = await api.catalogArtistProfile(artistId);
+        if (request === searchProfileRequest) catalog.searchArtistProfile = profile;
+    } catch {
+        // The hero reads fine on Deezer's own two figures alone.
+    }
+}
+
+let searchAlbumPageRequest = 0;
+/** The real tracklist and headline totals for an ALBUM hero. The search's own
+ *  track results are a different list entirely — they are what matched the
+ *  query, not what is on the record. */
+export async function loadSearchAlbumPage(albumId) {
+    const request = ++searchAlbumPageRequest;
+    catalog.searchAlbumPage = null;
+    if (albumId == null) return;
+    try {
+        const page = await api.catalogAlbum(albumId);
+        if (request === searchAlbumPageRequest) catalog.searchAlbumPage = page;
+    } catch {
+        // Falls back to the matched songs, which is what it showed before.
+    }
+}
+
+/** Hand the query off to the Soulseek network file search.
+ *
+ * A catalogue miss is not the end of the road in a Soulseek client — the
+ * network routinely carries what no catalogue lists — so every dead end on the
+ * results page offers this rather than nothing. */
+export async function searchNetworkFor(query) {
+    const q = (query ?? "").trim();
+    if (!q) return;
+    // Seeded before the view swaps: Search.svelte reads `search.query` once, at
+    // mount, to show what it is looking for.
+    search.query = q;
+    goToView("search");
+    if (app.connection !== "online") {
+        app.showLogin = true;
+        return;
+    }
+    try {
+        await runSearch(q);
+    } catch (err) {
+        app.loginError = String(err);
+        app.showLogin = true;
+    }
+}
+
+/** The records a Deezer SEARCH cannot see, for the artist a search is about.
+ *
+ * Deezer's search index is not a discography: Death Grips' Exmilitary, My
+ * Bloody Valentine's Loveless and half of Panda Bear's early run are simply
+ * absent from it. The artist page already solves this — it merges a
+ * MusicBrainz supplement over the Deezer list — so the results page runs the
+ * SAME merge (`mergeArtistIdentity`) rather than a second, disagreeing one.
+ *
+ * Returns only the rows the merge INJECTED, so the caller can fold them into
+ * the album list it already has. The albums handed in are narrowed to the top
+ * artist's own first: an MB release group belongs to that artist, and letting
+ * a namesake's row block one would delete a real record from the page.
+ */
+export async function catalogSearchIdentityAlbums(seedArtist, searchAlbums) {
+    const name = seedArtist?.name ?? "";
+    if (seedArtist?.id == null || !name) return [];
+    const identity = await api.catalogArtistIdentity(seedArtist.id, name);
+    if (!identity?.albums?.length) return [];
+    const key = catNorm(name);
+    const mine = (searchAlbums ?? []).filter((a) => catNorm(a?.artist) === key);
+    const merged = mergeArtistIdentity(
+        { artist: { name }, albums: mine, socials: [], typeHints: [] },
+        identity,
+    );
+    const known = new Set(mine.map((a) => a?.id));
+    return (merged?.albums ?? []).filter((a) => a && !known.has(a.id));
+}
+
+/** Release dates for the albums a search returned.
+ *
+ * `/search/album` omits `release_date` entirely; `/artist/{id}/albums` — which
+ * the artist OVERVIEW wraps, and which `warmCatalogArtist` has already asked
+ * for by the time this runs — carries one for every release. Matched by album
+ * id, so this is a lookup and never a title guess. Albums by an artist other
+ * than the one searched for keep no date, and simply show none.
+ */
+/** At most this many artists get a discography lookup for their dates. An
+ *  album-title query returns rows from tribute bands, karaoke acts and piano
+ *  covers; only the acts that actually hold several rows here are worth one. */
+const ALBUM_DATE_ARTIST_BUDGET = 3;
+
+async function applySearchAlbumDates(results, active) {
+    const undated = (results?.albums ?? []).filter((a) => a?.id != null && !a.release_date);
+    if (!undated.length) return;
+    // Grouped by the album's OWN artist rather than by the search's top artist.
+    // Deezer's ARTIST search answers nothing at all for "weezer blue album", so
+    // keying this on `results.artists[0]` left every row on an album-title
+    // query dateless — which is what showed "Weezer · — · 10 tracks".
+    const byArtist = new Map();
+    for (const album of undated) {
+        const key = catNorm(album.artist);
+        if (!key) continue;
+        if (!byArtist.has(key)) byArtist.set(key, { name: album.artist, rows: [] });
+        byArtist.get(key).rows.push(album);
+    }
+    const groups = [...byArtist.values()]
+        .sort((a, b) => b.rows.length - a.rows.length)
+        .slice(0, ALBUM_DATE_ARTIST_BUDGET);
+    const dates = {};
+    await Promise.all(
+        groups.map(async (group) => {
+            try {
+                const seed = await resolveArtistSeedByName(group.name);
+                if (seed?.id == null || !active()) return;
+                const overview = await getCatalogArtistOverview(seed.id);
+                if (!active()) return;
+                const byId = new Map();
+                const byTitle = new Map();
+                for (const album of overview?.albums ?? []) {
+                    if (album?.id == null || !album.release_date) continue;
+                    byId.set(String(album.id), album.release_date);
+                    // First listing wins: the discography arrives newest-first,
+                    // and the original pressing is the date a card should show.
+                    const key = normText(album.title);
+                    if (key && !byTitle.has(key)) byTitle.set(key, album.release_date);
+                }
+                for (const row of group.rows) {
+                    // A search hit and the same record in the artist's own
+                    // discography are frequently DIFFERENT Deezer ids — two
+                    // pressings of one album — so an id miss falls back to the
+                    // title. Safe here by construction: the only titles in play
+                    // are this one artist's own.
+                    const date =
+                        byId.get(String(row.id)) ?? byTitle.get(normText(row.title));
+                    if (date) dates[String(row.id)] = date;
+                }
+            } catch {
+                // One artist failing to date does not stop the others.
+            }
+        }),
+    );
+    if (!active() || !Object.keys(dates).length) return;
+    catalog.searchAlbumDates = dates;
+}
+
+async function applySearchIdentityAlbums(results, active) {
+    const seed = results?.artists?.[0];
+    if (!seed) return;
+    try {
+        let extras = await catalogSearchIdentityAlbums(seed, results.albums);
+        // A COLD MusicBrainz call answers with nothing under per-IP contention,
+        // and "no albums" is indistinguishable from "this artist has none". One
+        // delayed retry, exactly as the artist page's identity pass does — for a
+        // genuinely album-less artist both calls answer from the URL caches, so
+        // the retry costs the delay and no MusicBrainz traffic.
+        if (!extras.length) {
+            await new Promise((resolve) => setTimeout(resolve, 8000));
+            if (!active()) return;
+            extras = await catalogSearchIdentityAlbums(seed, results.albums);
+        }
+        if (!active() || !extras.length) return;
+        catalog.searchAlbumExtras = extras;
+    } catch {
+        // Best-effort supplement: the Deezer list is a complete page without it.
+    }
+}
+
+/** Last.fm listener counts for the result songs.
+ *
+ * Search results carry no counts — `catalog_search` is three Deezer calls and
+ * nothing else, deliberately, because the typeahead calls it per keystroke.
+ * The counts are a separate, deferred pass over EVERY row, resolved per
+ * performing artist by that row's own Deezer artist id (see
+ * `MetadataClient::track_listeners`). A row the backend has no count for keeps
+ * `null` — a dash in the UI, never a fabricated zero.
+ *
+ * An earlier version asked only the TOP artist's popular list and matched
+ * titles against it. That left every row credited to somebody else blank —
+ * Daft Punk's "Doin' it Right (feat. Panda Bear)" showed a dash on a Panda Bear
+ * search while the album page showed its 464k listeners.
+ */
+async function applySearchListeners(results, active) {
+    const tracks = results?.tracks ?? [];
+    if (!tracks.length) return;
+    try {
+        const counts = await api.catalogTrackListeners(
+            tracks.map((t) => ({ artistId: t.artist_id ?? null, title: t.title })),
+        );
+        if (!active() || !Array.isArray(counts)) return;
+        const out = {};
+        tracks.forEach((t, i) => {
+            if (counts[i] != null) out[t.id] = counts[i];
+        });
+        if (!active() || !Object.keys(out).length) return;
+        catalog.searchListeners = out;
+    } catch {
+        // No counts is a page without bars, not a broken page.
+    }
+}
+
+const libraryAlbumTitles = new Map(); // library album id -> Promise<Set<normTitle>>
+
+/** Which of these catalog songs are already saved, as `{ [trackId]: true }`.
+ *
+ * Ownership is per TRACK and the library index is per album, so this walks only
+ * the library albums whose artist appears in the list — usually none, at most a
+ * handful — and memoizes each album's tracklist for the session. Shared by the
+ * results page and the typeahead so one SAVED badge cannot contradict another.
+ */
+export async function catalogTrackOwnership(tracks) {
+    const rows = tracks ?? [];
+    if (!rows.length || !libraryStore.albums.length) return {};
+    const wanted = new Set(rows.map((t) => normText(t?.artist)).filter(Boolean));
+    const albums = libraryStore.albums.filter((al) => wanted.has(normText(al.artist)));
+    if (!albums.length) return {};
+    const titlesByArtist = new Map();
+    await Promise.all(
+        albums.map(async (al) => {
+            if (!libraryAlbumTitles.has(al.id)) {
+                libraryAlbumTitles.set(
+                    al.id,
+                    api
+                        .albumTracks(al.id)
+                        .then((r) => new Set(r.map((row) => normText(row.title || ""))))
+                        .catch(() => new Set()),
+                );
+            }
+            const titles = await libraryAlbumTitles.get(al.id);
+            const key = normText(al.artist);
+            if (!titlesByArtist.has(key)) titlesByArtist.set(key, new Set());
+            const into = titlesByArtist.get(key);
+            for (const t of titles) into.add(t);
+        }),
+    );
+    const out = {};
+    for (const t of rows) {
+        if (titlesByArtist.get(normText(t?.artist))?.has(normText(t?.title))) out[t.id] = true;
+    }
+    return out;
+}
+
+async function applySearchOwnership(results, active) {
+    try {
+        const owned = await catalogTrackOwnership(results?.tracks);
+        if (!active() || !Object.keys(owned).length) return;
+        catalog.searchOwned = owned;
+    } catch {
+        // No badge is a fine answer; a wrong badge is not.
+    }
+}
+
+/** Queries that actually found something this session.
+ *
+ * History alone is the wrong list to offer back: a typo you made two minutes
+ * ago is in it, and re-running a known miss is not a suggestion. It is also the
+ * wrong vocabulary for the results page's spelling correction, which would
+ * otherwise learn the misspelling as a word and stop correcting it. */
+const fruitfulSearches = new Set();
+
+/** The searches you ran this session that returned something, newest first —
+ *  read out of the app's own history rather than a second store, and never
+ *  written to disk. */
+export function recentSearches(exclude = "", limit = 6) {
+    const out = [];
+    for (let i = nav.stack.length - 1; i >= 0 && out.length < limit; i--) {
+        const e = nav.stack[i];
+        if (e.view !== "catalog" || !e.query) continue;
+        if (e.query === exclude || out.includes(e.query)) continue;
+        if (!fruitfulSearches.has(e.query)) continue;
+        out.push(e.query);
+    }
+    return out;
+}
+
 /** Open an artist as a four-stage page: synchronous identity shell, fast
  * Deezer overview, independent provider artwork, then exhaustive refinement.
  * Every ID gets a shell; known search/discovery seeds add the name + blurred
@@ -2617,6 +2954,42 @@ export async function openAlbumByName(artist, title, opts = {}) {
     }
 }
 
+/** Open a row from the recently-played list.
+ *
+ * Shared, because two surfaces show that list — the sidebar's history and the
+ * search page's "Jump back in" — and the rules below are identity rules. A
+ * second copy would be a second opinion about which record a history row is,
+ * which is exactly the mistake the namesake guard in `openAlbumByName` exists
+ * to prevent.
+ */
+export async function openRecentAlbum(a) {
+    if (a?.kind === "catalog" && a.catalog_album_id) {
+        // The catalog page, not the old library album view — streamed records
+        // live in the catalog. The seed paints title/artist/cover immediately
+        // instead of flashing a skeleton.
+        openCatalogAlbum(a.catalog_album_id, {
+            seed: {
+                id: a.catalog_album_id,
+                title: a.title,
+                artist: a.artist,
+                cover: a.art_url ?? null,
+            },
+        });
+        return;
+    }
+    // A library row has no catalog id to open with — local albums carry no
+    // catalog identity at all (`albums.mbid` is null and never surfaced) — so
+    // the record is resolved by artist + title, where BOTH must match
+    // normalized or nothing opens. That namesake guard lives in
+    // openAlbumByName and is the reason this can't just take a first hit.
+    //
+    // Either way it is the SAME album page: a record no catalog has (Panda
+    // Bear's "A ? of WHEN", verified live) opens from the library's own data
+    // instead. There is no second album view to fall back to.
+    if (await openAlbumByName(a.artist, a.title)) return;
+    void openLibraryAlbum(a.album_id);
+}
+
 /** Save the file(s) you're already streaming into the library — no re-search,
  * no re-source. `scope`: "track" (current) or "album" (all streamed tracks in
  * the queue). Downloads the KNOWN peer file(s) directly (skipping the search
@@ -4226,6 +4599,11 @@ export const player = $state({
     waveform: [],
     // Which catalog entity is playing (drives now-playing badges).
     catalogRef: { albumId: null, trackId: null },
+    // True for a track restored from the last session whose AUDIO did not
+    // survive — an app restart rather than a page reload. The transport reads
+    // "paused", but there is nothing loaded to resume, so play has to re-source
+    // it from the queue. See `resumePlayback`.
+    needsResource: false,
 });
 
 // Adaptive accent theme, derived from the playing track's album art.
@@ -4559,9 +4937,15 @@ export function initEvents() {
                 player.scrubbing = false;
                 player.error = "";
                 break;
-            case "playing":
+            case "playing": {
                 player.status = "playing";
+                // A track re-sourced by a session restore starts at zero; put
+                // the reader back where they were. Taken exactly once, so an
+                // ordinary resume later in the same track is unaffected.
+                const seekTo = takeResumeSeek();
+                if (seekTo != null) api.playerControl("seek", seekTo);
                 break;
+            }
             case "paused":
                 player.status = "paused";
                 listenFlush();
@@ -5286,10 +5670,224 @@ export async function runSearch(query) {
 // instance of this module (?t=-stamped vs bare), so a probe that imports by
 // URL may read/mutate a phantom copy while the app runs another. Probes must
 // use this global instead of importing.
+/* ------------------------------------------------------------------ session
+ * Where you were, and what you were listening to, across a reload.
+ *
+ * The audio thread outlives the webview. A dev reload — or a crash, or a
+ * WebView2 restart — leaves it playing while the page comes back with an empty
+ * store, so the player bar drew a MOVING scrubber under the words "Nothing
+ * playing" and the sidebar showed nothing playing either: position events kept
+ * arriving, but `status`, `track` and `queue` had gone with the page.
+ *
+ * Two halves, and they have different owners:
+ *
+ *   TRANSPORT  — playing/paused and the position — belongs to the audio thread,
+ *                and is asked for at boot (`api.playerState`). Never guessed
+ *                from the snapshot: only the audio thread knows whether the
+ *                sound survived.
+ *   EVERYTHING ELSE — which song, the queue around it, where you had navigated
+ *                to and how far down the page — is the frontend's own and is
+ *                the part worth writing down.
+ *
+ * `app_status` already recovers the Soulseek connection this way at boot; this
+ * is the same repair for playback and navigation.
+ */
+const SESSION_KEY = "soulstream.session.v1";
+/** Crumbs kept. The trail only ever renders a handful; the rest is history for
+ *  the back arrow, and 60 entries of it is not worth the quota. */
+const SESSION_NAV_MAX = 20;
+const SESSION_TICK_MS = 3000;
+/** Position moves constantly and is not part of the change signature, so a
+ *  long-playing track still gets its progress written down periodically. */
+const SESSION_MAX_STALE_MS = 12_000;
+
+let sessionRestoring = false;
+let sessionSignature = "";
+let sessionWrittenAt = 0;
+
+/** A crumb, minus anything that would be silly to store. `art` is frequently a
+ *  data: URL for library records — megabytes each, and they re-resolve from the
+ *  art cache on their own. */
+function packCrumb(entry) {
+    if (!entry) return null;
+    const art = typeof entry.art === "string" && entry.art.startsWith("data:") ? null : entry.art;
+    return { ...entry, art };
+}
+
+function writeSession() {
+    if (sessionRestoring) return;
+    try {
+        // Puts the reader's scroll position on the entry they are standing on,
+        // which is the same thing the back arrow relies on.
+        captureScroll();
+        const snapshot = {
+            v: 1,
+            view: ui.view,
+            albumId: ui.albumId,
+            playlistId: ui.playlistId,
+            nav: {
+                stack: nav.stack.slice(-SESSION_NAV_MAX).map(packCrumb),
+                origin: packCrumb(nav.origin),
+            },
+            player: {
+                queue: player.queue,
+                queueIndex: player.queueIndex,
+                track: player.track,
+                position: player.position,
+                duration: player.duration,
+                catalogRef: player.catalogRef,
+                shuffle: player.shuffle,
+                repeat: player.repeat,
+                volume: player.volume,
+                muted: player.muted,
+            },
+        };
+        localStorage.setItem(SESSION_KEY, JSON.stringify(snapshot));
+        sessionWrittenAt = Date.now();
+    } catch {
+        // Quota, or a profile with storage disabled. The session is a
+        // convenience; nothing downstream may depend on it having been written.
+    }
+}
+
+/** Cheap "has anything worth saving changed" probe, run on a timer rather than
+ *  from a reactive effect: the alternative is subscribing to a store that ticks
+ *  five times a second, and the only field that does is deliberately excluded. */
+function sessionTick() {
+    if (sessionRestoring) return;
+    const signature = [
+        ui.view, ui.albumId, ui.playlistId, nav.stack.length,
+        player.status, player.queueIndex, player.queue.length,
+        player.shuffle, player.repeat, player.volume, player.muted,
+    ].join("|");
+    const stale = player.status !== "idle" && Date.now() - sessionWrittenAt > SESSION_MAX_STALE_MS;
+    if (signature === sessionSignature && !stale) return;
+    sessionSignature = signature;
+    writeSession();
+}
+
+/** Re-source a track that was restored without its audio — an app restart,
+ *  where the queue survived in the snapshot but the sound did not. Resuming a
+ *  live track is the ordinary path and goes straight through. */
+let resumeSeekSecs = null;
+export function resumePlayback() {
+    if (player.status === "paused" && !player.needsResource) {
+        api.playerControl("resume");
+        return;
+    }
+    const index = player.queueIndex;
+    if (index < 0 || index >= player.queue.length) return;
+    // Pick the track up where it was left rather than at zero; applied once the
+    // audio thread reports it is actually playing (see the `playing` case).
+    resumeSeekSecs = player.position > 1 ? player.position : null;
+    player.needsResource = false;
+    playQueueIndex(index);
+}
+
+/** Consumed by the player-event handler the first time a restored track
+ *  reaches `playing`. */
+export function takeResumeSeek() {
+    const secs = resumeSeekSecs;
+    resumeSeekSecs = null;
+    return secs;
+}
+
+/**
+ * Put back what the last page left behind. Called once at boot, after the
+ * stores exist.
+ */
+export async function restoreSession() {
+    let saved = null;
+    try {
+        saved = JSON.parse(localStorage.getItem(SESSION_KEY) ?? "null");
+    } catch {
+        saved = null;
+    }
+    if (!saved || saved.v !== 1) {
+        setInterval(sessionTick, SESSION_TICK_MS);
+        return;
+    }
+    sessionRestoring = true;
+    try {
+        // THE AUDIO THREAD IS THE AUTHORITY. A reload finds it still playing; a
+        // restart finds it idle, and the snapshot's own status would be a lie.
+        let transport = null;
+        try {
+            transport = await api.playerState();
+        } catch {
+            // Not running under Tauri, or IPC not up yet: treat as idle.
+        }
+        const saveState = saved.player ?? {};
+        if (typeof saveState.volume === "number") player.volume = saveState.volume;
+        player.muted = !!saveState.muted;
+        player.shuffle = !!saveState.shuffle;
+        player.repeat = saveState.repeat ?? "off";
+
+        const item = saveState.queue?.[saveState.queueIndex] ?? null;
+        if (item && saveState.track) {
+            player.queue = saveState.queue;
+            player.queueIndex = saveState.queueIndex;
+            player.track = saveState.track;
+            player.duration = saveState.duration ?? null;
+            player.catalogRef = saveState.catalogRef ?? { albumId: null, trackId: null };
+            const live = transport && transport.status !== "idle";
+            player.status = live ? transport.status : "paused";
+            player.position = live ? (transport.position ?? 0) : (saveState.position ?? 0);
+            if (live && transport.duration != null) player.duration = transport.duration;
+            // Nothing is loaded in the audio thread, so the play button has to
+            // re-source rather than resume — see `resumePlayback`.
+            player.needsResource = !live;
+            // The bar's artwork and the app accent follow the track exactly as
+            // they would had it just been started.
+            if (item.stream) setAccentFromArtUrl(item.artUrl ?? null);
+            else setAccentFromArt(item.art ?? null);
+        }
+
+        // Where you were. The trail and the history arrows are restored first so
+        // that re-opening the page finds its own crumb already on top —
+        // `recordVisit` then updates it in place instead of pushing a duplicate.
+        const stack = (saved.nav?.stack ?? []).filter((e) => e && e.key);
+        if (stack.length) {
+            nav.stack = stack;
+            nav.future = [];
+            nav.origin = saved.nav?.origin ?? null;
+            ui.albumId = saved.albumId ?? null;
+            ui.playlistId = saved.playlistId ?? null;
+            const here = stack[stack.length - 1];
+            try {
+                await openEntry(here);
+            } catch {
+                ui.view = saved.view ?? "home";
+            }
+            // Back where the reader was on the page, once it has height to
+            // scroll — the same staged restore the back arrow uses.
+            const target = here.scroll ?? 0;
+            if (target > 0) {
+                requestAnimationFrame(() =>
+                    restoreScroll(document.querySelector(".content"), target),
+                );
+            }
+        } else if (saved.view) {
+            ui.view = saved.view;
+        }
+    } finally {
+        sessionRestoring = false;
+        sessionSignature = "";
+        setInterval(sessionTick, SESSION_TICK_MS);
+        // A reload is the case this whole thing exists for, and it is the one
+        // moment the position is exactly known.
+        if (typeof window !== "undefined") {
+            window.addEventListener("beforeunload", writeSession);
+        }
+    }
+}
+
 if (import.meta.env.DEV) {
     globalThis.__soulstream = {
-        app, ui, player, catalog, resolver,
+        app, ui, player, catalog, resolver, nav,
+        libraryStore, recentsStore,
         streamCatalogAlbum, streamSong, openCatalogArtist,
+        catalogGo, refreshLibrary, refreshRecents,
         autoConnect, refreshSourcePrefs, _sourceAudit, sourcePrefs,
     };
 }
diff --git a/src/views/CatalogSearch.svelte b/src/views/CatalogSearch.svelte
index dd57b73..508a282 100644
--- a/src/views/CatalogSearch.svelte
+++ b/src/views/CatalogSearch.svelte
@@ -1,18 +1,536 @@
 <script>
+    // The results page.
+    //
+    // Its shape is not invented here — it is the interactive prototype at
+    // research/search-redesign/PROTOTYPE-search.html, which is the signed-off
+    // spec and which carries every state below as a working screen. Three
+    // things about the layout are load-bearing and are commented where they
+    // happen: the colour wash is anchored to the TOP OF THE PANE and runs
+    // behind the glass bar, the gap under the bar is PADDING on this root (a
+    // margin on the hero collapses out and drags the wash down with it), and
+    // the overlay scrollbar is the app's own — the pane already carries
+    // `use:floatScroll` and the bar already carries `data-scrollhead`.
     import {
         catalog,
+        recentsStore,
+        libraryStore,
         openCatalogArtist,
+        openCatalogAlbum,
+        openArtistByName,
+        openAlbumByName,
+        openRecentAlbum,
+        resolveArtistSeedByName,
+        catalogGo,
+        navBack,
+        recentSearches,
+        searchNetworkFor,
+        loadSearchArtistProfile,
+        loadSearchAlbumPage,
         streamSong,
         saveSong,
         streamCatalogAlbum,
         saveCatalogAlbum,
-        resolver,
+        libraryHasAlbum,
+        goToView,
         player,
         artBroken,
         markArtBroken,
+        getArt,
+        getCatalogArt,
+        gridCover,
+        tinyCover,
     } from "../lib/state.svelte.js";
+    import { canGoBack } from "../lib/navigation.svelte.js";
+    import { accentFromImage } from "../lib/color.js";
+    import { listenerPeak, listenerShare } from "../lib/listenerBars.js";
     import Icon from "../components/Icon.svelte";
 
+    const TABS = ["All", "Songs", "Albums", "Artists", "In your library"];
+
+    // ---- how much the "All" tab shows -------------------------------------
+    // Sized to the window rather than to a constant: a fixed count leaves a wide
+    // window with a half-empty album row and a narrow one with a cramped list.
+    //
+    // The albums column is MEASURED (`bind:clientWidth` below) rather than
+    // derived from the pane width and the `1.25fr 1fr` split — that split is a
+    // CSS detail this script has no business re-deriving, and a measurement
+    // cannot drift out of agreement with it. `.cols > *` carries `min-width: 0`
+    // so the fractional tracks never widen to fit their content, which is what
+    // keeps this from feeding back into itself: the counts change the column's
+    // HEIGHT, never its width.
+    //
+    // Rows, not a raw count, so the grid is always whole rows and never ends on
+    // a ragged half-row. Songs get the same number, because a song row is
+    // roughly a third of a cover row's height and the two columns then come out
+    // level at every width measured.
+    const GRID_TILE = 124;
+    const GRID_GAP = 16;
+    let albumColWidth = $state(0);
+    /** Whole 124px tracks that fit the albums column. 4 until it is measured —
+     *  the common case, so the first paint rarely has to correct itself. */
+    const albumCols = $derived(
+        albumColWidth > 0
+            ? Math.max(1, Math.floor((albumColWidth + GRID_GAP) / (GRID_TILE + GRID_GAP)))
+            : 4,
+    );
+    /** A third row only when the window is tall enough to show one — below that
+     *  it would sit under the fold and only lengthen the scroll. */
+    let windowHeight = $state(1000);
+    const gridRows = $derived(windowHeight >= 1080 ? 3 : 2);
+    const allAlbums = $derived(albumCols * gridRows);
+    // Floored, because a cover row is roughly three song rows tall: at the
+    // narrowest window two album columns still make a 399px block, and the four
+    // songs beside it left the left column visibly short.
+    const allSongs = $derived(Math.max(5, albumCols * gridRows));
+
+    let tab = $state("All");
+    /** A new query is a new page — it starts on All, whatever the last one
+     *  was filtered to. Keyed on the query rather than on `results`, which is
+     *  replaced twice per search (null, then the payload). */
+    let tabFor = null;
+    $effect(() => {
+        if (catalog.query !== tabFor) {
+            tabFor = catalog.query;
+            tab = "All";
+        }
+    });
+
+    const results = $derived(catalog.results);
+    const artists = $derived(results?.artists ?? []);
+    const tracks = $derived(results?.tracks ?? []);
+
+    /** A release's date. Deezer's album SEARCH carries none, so the artist
+     *  overview backfills them by id — see `catalog.searchAlbumDates`. */
+    const dateOf = (al) =>
+        al?.release_date ?? catalog.searchAlbumDates[String(al?.id)] ?? null;
+
+    // Records only MusicBrainz knows about are folded in with no badge, no tag
+    // and no section of their own — the decision was that provenance is not the
+    // reader's problem. Sorting the merged list newest-first is what makes that
+    // true: appended, the supplement sits in a tail nothing ever scrolls to.
+    //
+    // Deezer also returns the same record twice when it carries two pressings
+    // of it (two "Person Pitch" rows, same day, on a live search). Same title,
+    // same date and same kind IS the same record, so only the first is kept —
+    // the narrowest rule that removes the visible duplicate without ever
+    // folding a single into the album it shares a name with.
+    const albums = $derived.by(() => {
+        const merged = [...(results?.albums ?? []), ...catalog.searchAlbumExtras];
+        const seen = new Set();
+        const unique = [];
+        for (const al of merged) {
+            const date = dateOf(al);
+            const key = date
+                ? `${norm(al.title)}|${date}|${al.record_type ?? "album"}`
+                : null;
+            if (key && seen.has(key)) continue;
+            if (key) seen.add(key);
+            unique.push(al);
+        }
+        return unique.sort((a, b) => (dateOf(b) ?? "").localeCompare(dateOf(a) ?? ""));
+    });
+
+    const nothing = $derived(
+        Boolean(results) && !artists.length && !albums.length && !tracks.length,
+    );
+    const firstVisit = $derived(!results && !catalog.loading && !catalog.error);
+    /** No top result to take a colour from: the wash goes neutral rather than
+     *  keeping the last query's hue. */
+    const colourless = $derived(firstVisit || nothing || Boolean(catalog.error));
+
+    // ---- the top result ---------------------------------------------------
+    // Not always an artist, and NOT decided by kind precedence. Each kind puts
+    // up its most popular exact match and the most popular of those wins.
+    //
+    // Popularity is Deezer's own, and taken at FIRST PAINT so the hero is
+    // decided once and never swaps: `fans` for an artist, `rank` (0–1,000,000)
+    // for a song, and for an album the rank of its best-known song, since
+    // Deezer scores no albums. Last.fm listeners would be the better measure
+    // but they land a beat later, and a hero that changes identity under the
+    // reader is worse than one ranked slightly coarsely.
+    //
+    // The scales are made comparable by ranking each candidate WITHIN its own
+    // result list rather than against the others — a raw fans-vs-rank
+    // comparison would hand "panda bear" to a Daft Punk song, because a track
+    // rank of 700k dwarfs an artist's 27k fans while meaning something else
+    // entirely. What actually decides it is how dominant a candidate is among
+    // its own kind, with an exact name match as the entry fee.
+    const norm = (s) => (s ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
+    const rankOf = (t) => t?.rank ?? 0;
+    const top = $derived.by(() => {
+        const q = norm(catalog.query);
+        if (!q) return null;
+        const exact = (s) => norm(s) === q;
+
+        // The most popular exact match of each kind.
+        const artist = artists.filter((a) => exact(a.name)).sort((a, b) => (b.fans ?? 0) - (a.fans ?? 0))[0] ?? null;
+        const song = tracks.filter((t) => exact(t.title)).sort((a, b) => rankOf(b) - rankOf(a))[0] ?? null;
+        // An album is scored by its best-known song. A one-track "album" is a
+        // single: it may still win, but only on the strength of that song, not
+        // merely by being an album — which is how Toto's 1-track "Hash Pipe"
+        // was beating Weezer's.
+        const albumRank = (al) =>
+            Math.max(0, ...tracks.filter((t) => t.album_id === al.id).map(rankOf));
+        const album =
+            (results?.albums ?? [])
+                .filter((al) => exact(al.title))
+                .sort((a, b) => albumRank(b) - albumRank(a))[0] ?? null;
+
+        // Each candidate scores as a SHARE OF ITS OWN KIND'S LEADER, never as a
+        // raw number. Fans and rank measure different things on different
+        // scales: compared directly, Owl City's "Panda Bear" (a track rank in
+        // the hundreds of thousands) beats the band Panda Bear (27k fans) and
+        // takes the hero on their own name. As shares, the band is the #1
+        // artist the search returned (1.0) and the song is well down its own
+        // list, so the band wins — which is the whole point.
+        const maxFans = Math.max(1, ...artists.map((a) => a.fans ?? 0));
+        const maxRank = Math.max(1, ...tracks.map(rankOf));
+        const candidates = [
+            artist && { kind: "artist", data: artist, score: (artist.fans ?? 0) / maxFans, tie: 3 },
+            album && { kind: "album", data: album, score: albumRank(album) / maxRank, tie: 2 },
+            song && { kind: "song", data: song, score: rankOf(song) / maxRank, tie: 1 },
+        ].filter(Boolean);
+
+        if (candidates.length) {
+            // An outright tie — both kinds lead their own list, as "buddy holly"
+            // does — falls back to artist → album → song, the order of how much
+            // a page can say about the thing you named.
+            candidates.sort((a, b) => b.score - a.score || b.tie - a.tie);
+            return candidates[0];
+        }
+        // Nothing named the query outright — fall back to each list's own most
+        // popular entry, in the same order.
+        if (artists.length) return { kind: "artist", data: artists[0] };
+        if (results?.albums?.length) return { kind: "album", data: results.albums[0] };
+        if (tracks.length) return { kind: "song", data: [...tracks].sort((a, b) => rankOf(b) - rankOf(a))[0] };
+        return null;
+    });
+
+    const topArt = $derived(
+        top?.kind === "artist" ? (top.data.picture ?? null) : (top?.data.cover ?? null),
+    );
+
+    // Only the kind that actually won the hero pays for its supplement. A SONG
+    // loads its record too: the rest of that record is what its right-hand
+    // panel falls back to when the results hold no other song by the artist.
+    $effect(() => {
+        if (top?.kind === "artist") loadSearchArtistProfile(top.data.id);
+        else if (top?.kind === "album") loadSearchAlbumPage(top.data.id);
+        else if (top?.kind === "song") loadSearchAlbumPage(top.data.album_id ?? null);
+    });
+
+    /** MusicBrainz's genre tags for the hero artist, at most four — past that
+     *  they stop describing and start listing. */
+    const heroTags = $derived((catalog.searchArtistProfile?.tags ?? []).slice(0, 4));
+    /** The hero record's own page: its real tracklist, and its Last.fm totals.
+     *  For a song hero that is the record the song is ON. */
+    const heroAlbumId = $derived(
+        top?.kind === "album" ? top.data.id : top?.kind === "song" ? top.data.album_id : null,
+    );
+    const heroAlbum = $derived(
+        heroAlbumId != null && catalog.searchAlbumPage?.album?.id === heroAlbumId
+            ? catalog.searchAlbumPage
+            : null,
+    );
+    const heroAlbumRuntime = $derived.by(() => {
+        const secs = (heroAlbum?.tracks ?? []).reduce((t, x) => t + (x.duration_secs ?? 0), 0);
+        if (!secs) return null;
+        const m = Math.round(secs / 60);
+        return m >= 60 ? `${Math.floor(m / 60)}h ${m % 60}m` : `${m} min`;
+    });
+    /** The newest record by the hero artist — "latest release" is the other
+     *  question a search about an artist is actually asking. */
+    /** The record's own tracks, dressed with its cover and title. */
+    const recordRows = (limit, skipId = null) =>
+        (heroAlbum?.tracks ?? [])
+            .filter((t) => t.id !== skipId)
+            .slice(0, limit)
+            .map((t) => ({
+                ...t,
+                cover: heroAlbum.album?.cover ?? null,
+                album: heroAlbum.album?.title ?? "",
+            }));
+
+    /** What the hero's right-hand panel lists, and what it calls itself. */
+    const heroRows = $derived.by(() => {
+        if (top?.kind === "album") {
+            const own = recordRows(3);
+            if (own.length) return own;
+        }
+        if (top?.kind === "song") {
+            // "More from X" has to mean OTHER songs BY X. A song query returns
+            // mostly the same recording again — remixes, live cuts, soundtrack
+            // placements — and other artists' covers, so this drops anything
+            // whose title merely EXTENDS the hero's ("Hash Pipe (The Jimmy Pop
+            // Remix)") and anything credited elsewhere. Left unfiltered the
+            // panel read "Hash Pipe / Hash Pipe / Hash Pipe".
+            const same = norm(top.data.title);
+            const artistKey = norm(top.data.artist);
+            const others = tracks
+                .filter(
+                    (t) =>
+                        t.id !== top.data.id
+                        && norm(t.artist) === artistKey
+                        && !norm(t.title).startsWith(same),
+                )
+                .slice(0, 3);
+            // Nothing else by them in these results — so show the record the
+            // song is on instead, which is always something and always related.
+            return others.length ? others : recordRows(3, top.data.id);
+        }
+        return tracks.slice(0, 3);
+    });
+
+    /** The newest record by the hero artist — the other thing a search about an
+     *  artist is asking. */
+    const latestRelease = $derived(
+        top?.kind === "artist"
+            ? (albums.find((al) => norm(al.artist) === norm(top.data.name)) ?? null)
+            : null,
+    );
+
+    /** The panel names what it is actually showing — a song hero falls back to
+     *  its record's tracks, and calling those "More from X" would be a lie. */
+    const heroPanelLabel = $derived.by(() => {
+        if (top?.kind === "album") return "On this record";
+        if (top?.kind !== "song") return "Top tracks";
+        const fromRecord = heroRows.length && heroRows[0]?.album === heroAlbum?.album?.title;
+        return fromRecord ? "On this record" : `More from ${top.data.artist}`;
+    });
+
+    // The hero artist's own portrait for the byline, resolved through the SAME
+    // helper the album page uses, so the two bylines can never stand in
+    // different faces for one name.
+    let bylineSeed = $state(null);
+    let bylineFor = null;
+    $effect(() => {
+        const name = top && top.kind !== "artist" ? (top.data.artist ?? "") : "";
+        if (!name || name === bylineFor) return;
+        bylineFor = name;
+        bylineSeed = null;
+        let stale = false;
+        resolveArtistSeedByName(name).then((seed) => {
+            if (!stale && bylineFor === name) bylineSeed = seed;
+        });
+        return () => {
+            stale = true;
+        };
+    });
+    const bylinePicture = $derived(bylineSeed?.picture ?? null);
+
+    // ---- the wash's colour ------------------------------------------------
+    // Extracted from the TOP RESULT's own artwork with the app's own
+    // accentFromImage, so the page is tinted by what the search was about and
+    // differs per query. Scoped to this page: --accent everywhere else keeps
+    // following the playing track, exactly as on the album page.
+    //
+    // A desaturated cover yields accentFromImage's deliberate silver rather
+    // than an invented hue (my bloody valentine → #bbb4b4). That is the
+    // function's neutral guard doing its job and is left alone here.
+    let accent = $state(null); // { accent, hover } | null
+    $effect(() => {
+        const source = topArt;
+        if (!source || artBroken[source]) {
+            accent = null;
+            return;
+        }
+        let stale = false;
+        (async () => {
+            try {
+                // Palette extraction needs colour distribution, not resolution:
+                // sample the CDN's tiny variant rather than proxying a 1000px
+                // portrait through base64 for it.
+                const dataUrl = await getCatalogArt(tinyCover(source) ?? source);
+                const colors = dataUrl ? await accentFromImage(dataUrl) : null;
+                if (!stale) accent = colors;
+            } catch {
+                if (!stale) accent = null;
+            }
+        })();
+        return () => {
+            stale = true;
+        };
+    });
+
+    const NEUTRAL_WASH = "#2a2a32";
+    const pageStyle = $derived(
+        accent && !colourless
+            ? `--accent:${accent.accent};--accent-hover:${accent.hover};--wash:${accent.accent};`
+            : `--wash:${NEUTRAL_WASH};`,
+    );
+
+    // ---- listener weight --------------------------------------------------
+    // The curve is `listenerBars.js` — shared with the album page and the
+    // artist page's expander, so no two surfaces can disagree about how big a
+    // record's hit was. Peak is taken over the rows actually on screen.
+    const listenersOf = (t) => catalog.searchListeners[t.id] ?? null;
+    const countPeak = $derived(listenerPeak(tracks.map((t) => ({ listeners: listenersOf(t) }))));
+    const showCounts = $derived(countPeak > 0);
+    const barWidth = (t) => listenerShare(listenersOf(t), countPeak);
+    const fmtCount = (n) => (n == null ? "—" : n.toLocaleString());
+
+    // Sort is Listeners by default — the counts are what the bars are for. A
+    // song Last.fm has never seen keeps its relevance position underneath the
+    // ranked ones rather than sinking to a fabricated zero, which is the same
+    // rule the backend's own Popular ordering uses.
+    let sortBy = $state("Listeners");
+    const sortedTracks = $derived.by(() => {
+        if (sortBy !== "Listeners" || !showCounts) return tracks;
+        return tracks
+            .map((t, i) => [t, i])
+            .sort(([a, ai], [b, bi]) => {
+                const la = listenersOf(a);
+                const lb = listenersOf(b);
+                if (la != null && lb != null) return lb - la || ai - bi;
+                if (la != null) return -1;
+                if (lb != null) return 1;
+                return ai - bi;
+            })
+            .map(([t]) => t);
+    });
+
+    // ---- what you already own ---------------------------------------------
+    const ownedTracks = $derived(sortedTracks.filter((t) => catalog.searchOwned[t.id]));
+    const ownedAlbums = $derived(
+        libraryStore.albums.length
+            ? albums.filter((al) => libraryHasAlbum(al.artist, al))
+            : [],
+    );
+    const libraryEmpty = $derived(!ownedTracks.length && !ownedAlbums.length);
+
+    // ---- tab availability -------------------------------------------------
+    // A tab with nothing behind it goes dim and unclickable rather than opening
+    // a blank heading. "In your library" is deliberately NOT dimmed on an empty
+    // library: owning none of a real result set is its own answer, and it has
+    // its own screen saying so.
+    const dimmed = $derived(
+        nothing || catalog.error
+            ? new Set(TABS.filter((t) => t !== "All"))
+            : new Set([
+                  ...(tracks.length ? [] : ["Songs"]),
+                  ...(albums.length ? [] : ["Albums"]),
+                  ...(artists.length ? [] : ["Artists"]),
+              ]),
+    );
+
+    /** When exactly one kind matched, the All tab drops the two-column split —
+     *  a single list has no business being stretched across 2000px — and says
+     *  in one line what is missing, instead of leaving empty headings. */
+    const kindsPresent = $derived(
+        [
+            tracks.length ? "Songs" : null,
+            albums.length ? "Albums" : null,
+            artists.length ? "Artists" : null,
+        ].filter(Boolean),
+    );
+    const soleKind = $derived(
+        Boolean(results) && kindsPresent.length === 1 ? kindsPresent[0] : null,
+    );
+    const missingLine = $derived.by(() => {
+        if (!soleKind) return "";
+        const missing = ["Artists", "Albums", "Songs"]
+            .filter((k) => k !== soleKind)
+            .map((k) => k.toLowerCase());
+        return `No ${missing[0]} or ${missing[1]} matched — only ${soleKind.toLowerCase()}.`;
+    });
+
+    const kindCount = (kind) =>
+        kind === "Songs" ? tracks.length : kind === "Albums" ? albums.length : artists.length;
+
+    // ---- the empty page ---------------------------------------------------
+    // Recent searches come out of the app's own history rather than a second
+    // store — the same entries the glass bar's back arrow walks. `recentSearches`
+    // reads `nav.stack` itself, and reading it inside this derived is what
+    // subscribes to it.
+    const recentQueries = $derived(recentSearches(catalog.query));
+
+    // ---- a spelling correction, when one is obvious -----------------------
+    // There is no spell-checker here and no provider endpoint for one, so the
+    // vocabulary is the only trustworthy one available offline: names the user
+    // demonstrably knows — their own library, and the searches that already
+    // worked this session. A typed word is corrected only when a real name is
+    // within two edits of it, and the suggestion is dropped entirely when
+    // nothing is close. A wrong guess is worse than no guess.
+    const spellingVocabulary = $derived.by(() => {
+        const words = new Set();
+        const add = (text) => {
+            for (const w of (text ?? "").toLowerCase().split(/[^a-z0-9']+/)) {
+                if (w.length >= 3) words.add(w);
+            }
+        };
+        for (const al of libraryStore.albums) {
+            add(al.artist);
+            add(al.title);
+        }
+        for (const q of recentQueries) add(q);
+        return [...words];
+    });
+    const didYouMean = $derived.by(() => {
+        if (!nothing) return null;
+        const typed = catalog.query.trim().split(/\s+/);
+        if (!typed.length || !spellingVocabulary.length) return null;
+        let corrected = false;
+        const fixed = typed.map((word) => {
+            const lower = word.toLowerCase();
+            if (lower.length < 3 || spellingVocabulary.includes(lower)) return word;
+            let best = null;
+            let bestDist = 3; // strictly within two edits
+            for (const candidate of spellingVocabulary) {
+                const d = editDistance(lower, candidate, bestDist);
+                if (d < bestDist) {
+                    bestDist = d;
+                    best = candidate;
+                }
+            }
+            if (!best) return word;
+            corrected = true;
+            return best;
+        });
+        return corrected ? fixed.join(" ") : null;
+    });
+    /** Levenshtein, abandoned as soon as every cell exceeds `limit`. */
+    function editDistance(a, b, limit) {
+        if (Math.abs(a.length - b.length) >= limit) return limit;
+        const prev = Array.from({ length: b.length + 1 }, (_, i) => i);
+        for (let i = 1; i <= a.length; i++) {
+            let diag = prev[0];
+            prev[0] = i;
+            let row = i;
+            for (let j = 1; j <= b.length; j++) {
+                const tmp = prev[j];
+                prev[j] = Math.min(
+                    prev[j] + 1,
+                    prev[j - 1] + 1,
+                    diag + (a[i - 1] === b[j - 1] ? 0 : 1),
+                );
+                diag = tmp;
+                row = Math.min(row, prev[j]);
+            }
+            if (row >= limit) return limit;
+        }
+        return prev[b.length];
+    }
+    const jumpBackIn = $derived(recentsStore.albums.slice(0, 5));
+
+    // Library rows carry an art PATH that has to go through the art cache;
+    // catalog rows already have a URL. Same split as the sidebar's history.
+    let recentArt = $state({});
+    $effect(() => {
+        for (const a of jumpBackIn) {
+            const p = a.art_path;
+            if (!p || recentArt[p] !== undefined) continue;
+            recentArt[p] = null;
+            getArt(p)
+                .then((u) => (recentArt[p] = u))
+                .catch(() => {});
+        }
+    });
+    const recentCover = (a) => a.art_url ?? (a.art_path ? recentArt[a.art_path] : null);
+
+    // ---- actions ----------------------------------------------------------
+    const nowPlaying = (kind, id) =>
+        player.status !== "idle" && player.catalogRef[kind] === id;
+
     const playSong = (t) =>
         streamSong(t.artist, t.title, {
             cover: t.cover,
@@ -21,18 +539,28 @@
             album: t.album || null,
             expectSecs: t.duration_secs ?? null,
         });
-    const nowPlaying = (kind, id) =>
-        player.status !== "idle" && player.catalogRef[kind] === id;
 
-    const top = $derived(catalog.results?.artists[0] ?? null);
-    const artists = $derived(catalog.results?.artists.slice(0, 6) ?? []);
-    const albums = $derived(catalog.results?.albums.slice(0, 6) ?? []);
-    const tracks = $derived(catalog.results?.tracks.slice(0, 5) ?? []);
+    const openAlbum = (al) =>
+        openCatalogAlbum(al.id, {
+            seed: { id: al.id, title: al.title, artist: al.artist, cover: al.cover ?? null },
+        });
+
+    /** The hero's Play for an artist top result: their best-known song in the
+     *  results, which is what the panel beside it is already listing. */
+    const playArtist = () => {
+        const t = tracks.find((x) => norm(x.artist) === norm(top?.data?.name)) ?? tracks[0];
+        if (t) playSong(t);
+    };
+
+    /** "Clear search" on a dead end: go back to wherever the search was
+     *  launched from, rather than to some third place the reader never asked
+     *  for. Only a search that began the session has nowhere to return to. */
+    const leaveSearch = () => (canGoBack() ? navBack() : goToView("home"));
 
     let saved = $state({});
 
-    // A failed save flashes ✗ on the button (the resolver banner up top is
-    // easy to miss) before returning to the idle icon.
+    // A failed save flashes ✗ on the button (the resolver banner in the glass
+    // bar is easy to miss) before returning to the idle icon.
     function flagSaveError(key) {
         saved[key] = "err";
         setTimeout(() => {
@@ -54,440 +582,1716 @@
         else flagSaveError(`a${al.id}`);
     }
 
+    const saveIcon = (key) =>
+        saved[key] === "ok" ? "check" : saved[key] === "err" ? "x" : "download";
+
+    // ---- formatting -------------------------------------------------------
     function fmtDuration(s) {
         if (s == null) return "";
         return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
     }
-
-    function albumMeta(album) {
-        const year = album.release_date?.slice(0, 4);
-        const type = album.record_type ? album.record_type[0].toUpperCase() + album.record_type.slice(1) : "Album";
-        return [year, type].filter(Boolean).join(" · ");
+    const yearOf = (a) => dateOf(a)?.slice(0, 4) ?? "";
+    function albumMeta(al) {
+        const type = al.record_type
+            ? al.record_type[0].toUpperCase() + al.record_type.slice(1)
+            : "Album";
+        return [yearOf(al), type].filter(Boolean).join(" · ");
     }
+    const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+    const fmtFans = (n) => {
+        if (n == null) return null;
+        if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1)}M`;
+        if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+        return String(n);
+    };
 </script>
 
-<div class="catalog">
+<svelte:window bind:innerHeight={windowHeight} />
+
+<!-- The wash is anchored to THIS element's top edge, and this element begins
+     at the very top of the scroll pane (the glass bar cancels the pane's top
+     padding for what follows it — see App.svelte). So the colour starts at the
+     window's edge and the bar frosts over colour rather than over black.
+
+     The gap between the bar and the hero is the padding-top below. It may NOT
+     become a margin on the hero: a top margin on the first in-flow child
+     collapses out of a padding-less wrapper and drags the wrapper's own top
+     edge down with it — taking the absolutely-positioned wash along, so the
+     colour ends up starting at the artist card. That cost three rounds. -->
+<div class="catalog" style={pageStyle}>
+    <div class="wash"></div>
+
     {#if catalog.loading}
-        <p class="hint">Searching the catalog for “{catalog.query}”…</p>
-    {:else if catalog.error}
-        <p class="hint">Catalog search failed: {catalog.error}</p>
-    {:else if !catalog.results}
-        <p class="hint">Search for an artist, album or song above.</p>
-    {:else}
-        {#if resolver.active}
-            <p class="resolving"><span class="pulse">●</span> {resolver.label} — finding the best source…</p>
-        {:else if resolver.error}
-            <p class="resolving error">{resolver.error}</p>
-        {/if}
-        <div class="lead">
-            {#if top}
-                <section class="top-result">
-                    <h2>Top result</h2>
-                    <button class="top-card" onclick={() => openCatalogArtist(top.id, top)}>
-                        {#if top.picture}
-                            <img class="round" src={top.picture} alt="" draggable="false" />
-                        {:else}
-                            <div class="round placeholder"><Icon name="music" size={26} /></div>
-                        {/if}
-                        <div class="top-name">{top.name}</div>
-                        <span class="badge">ARTIST</span>
-                    </button>
-                </section>
-            {/if}
-            {#if tracks.length > 0}
-                <section class="songs">
-                    <h2>Songs</h2>
-                    <div class="song-list">
-                        {#each tracks as t (t.id)}
-                            <div
-                                class="song"
-                                class:now={nowPlaying("trackId", t.id)}
-                                role="button"
-                                tabindex="0"
-                                title="Play — streams from the best source"
-                                onclick={() => playSong(t)}
-                                onkeydown={(e) => e.key === "Enter" && playSong(t)}
-                            >
-                                {#if t.cover && !artBroken[t.cover]}
-                                    <img class="mini-cover" src={t.cover} alt="" draggable="false" onerror={() => markArtBroken(t.cover)} />
-                                {:else}
-                                    <div class="mini-cover placeholder"></div>
-                                {/if}
-                                <div class="song-info">
-                                    <div class="song-title">
-                                        {#if nowPlaying("trackId", t.id)}<span class="eq">♫</span>{/if}
-                                        {t.title}
-                                    </div>
-                                    <div class="song-sub">{t.artist} · {t.album}</div>
-                                </div>
-                                <span class="dur">{fmtDuration(t.duration_secs)}</span>
-                                <button
-                                    class="mini-btn play"
-                                    title="Play"
-                                    onclick={(e) => { e.stopPropagation(); playSong(t); }}
-                                ><Icon name="play" size={13} /></button>
-                                <button
-                                    class="mini-btn"
-                                    title="Save to library"
-                                    onclick={(e) => { e.stopPropagation(); saveTrack(t); }}
-                                ><Icon name={saved[`t${t.id}`] === "ok" ? "check" : saved[`t${t.id}`] === "err" ? "x" : "download"} size={13} /></button>
-                            </div>
-                        {/each}
+        <!-- The skeleton keeps the loaded page's geometry — hero block, chips,
+             two columns — so nothing jumps when the results land. No spinner. -->
+        <div class="hero skeleton">
+            <div class="hero-in">
+                <div class="card sk"></div>
+                <div class="hero-text">
+                    <div class="sk" style="width:120px;height:11px"></div>
+                    <div class="sk" style="width:260px;height:34px;margin-top:12px"></div>
+                    <div class="sk" style="width:190px;height:13px;margin-top:12px"></div>
+                    <div
+                        class="sk"
+                        style="width:230px;height:34px;margin-top:16px;border-radius:99px"
+                    ></div>
+                </div>
+            </div>
+        </div>
+        <div class="chips">
+            {#each TABS as t (t)}
+                <span class="chip" class:on={t === "All"}>{t}</span>
+            {/each}
+        </div>
+        <div class="cols">
+            <div>
+                <div class="shd"><div class="sk" style="width:90px;height:15px"></div></div>
+                {#each [0, 1, 2, 3, 4] as i (i)}
+                    <div class="srow sk-row">
+                        <span></span>
+                        <span class="sk" style="width:36px;height:36px;border-radius:5px"></span>
+                        <span class="sk" style="height:12px;width:{55 + ((i * 37) % 30)}%"></span>
+                        <span></span>
+                        <span></span>
+                        <span class="sk" style="width:28px;height:10px"></span>
                     </div>
-                </section>
+                {/each}
+            </div>
+            <div>
+                <div class="shd"><div class="sk" style="width:80px;height:15px"></div></div>
+                <div class="grid">
+                    {#each [0, 1, 2, 3] as i (i)}
+                        <div>
+                            <div class="sk" style="aspect-ratio:1;border-radius:8px"></div>
+                            <div class="sk" style="height:11px;margin-top:9px;width:80%"></div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {:else if catalog.error}
+        <!-- Never "no results": the answer is UNKNOWN, not empty. -->
+        <div class="chips">
+            {#each TABS as t (t)}
+                <span class="chip" class:on={t === "All"} class:dim={t !== "All"}>{t}</span>
+            {/each}
+        </div>
+        <div class="empty anim">
+            <div class="glyph warn"><Icon name="alert" size={24} strokeWidth={1.8} /></div>
+            <h4>Couldn't reach the catalogue</h4>
+            <p class="warn">
+                The search provider didn't answer. This isn't “no results” — we don't know
+                what's out there right now.
+            </p>
+            <div class="cta">
+                <button class="btn-primary" onclick={() => catalogGo(catalog.query)}>
+                    Try again
+                </button>
+                <button class="btn-ghost" onclick={() => searchNetworkFor(catalog.query)}>
+                    <Icon name="globe" size={14} strokeWidth={1.8} /> Search the network instead
+                </button>
+            </div>
+            <div class="hints">
+                · If this keeps happening the provider's daily quota may be spent — it resets
+                on its own.
+            </div>
+        </div>
+    {:else if firstVisit}
+        <div class="empty anim first">
+            <div class="glyph"><Icon name="search" size={24} strokeWidth={1.8} /></div>
+            <h4>Search SoulStream</h4>
+            <p>
+                Find artists, albums and songs across the catalogue — then stream or save them
+                from the network.
+            </p>
+        </div>
+        <div class="measure anim">
+            {#if recentQueries.length}
+                <div class="shd"><h3>Recent searches</h3></div>
+                <div class="chips flush">
+                    {#each recentQueries as q (q)}
+                        <button class="chip" onclick={() => catalogGo(q)}>{q}</button>
+                    {/each}
+                </div>
+            {/if}
+            {#if jumpBackIn.length}
+                <div class="shd"><h3>Jump back in</h3></div>
+                <div class="grid">
+                    {#each jumpBackIn as a (a.kind === "catalog" ? `c:${a.catalog_album_id}` : `l:${a.album_id}`)}
+                        <button class="albumcard" onclick={() => openRecentAlbum(a)}>
+                            <div class="cover-wrap">
+                                {#if recentCover(a)}
+                                    <img
+                                        class="cover"
+                                        src={recentCover(a)}
+                                        alt=""
+                                        draggable="false"
+                                    />
+                                {:else}
+                                    <div class="cover placeholder"><Icon name="disc" size={26} /></div>
+                                {/if}
+                            </div>
+                            <div class="ac-title ell">{a.title}</div>
+                            <div class="ac-sub ell">{a.artist}</div>
+                        </button>
+                    {/each}
+                </div>
             {/if}
         </div>
-
-        {#if artists.length > 0}
-            <h2>Artists</h2>
-            <div class="artist-row">
-                {#each artists as a (a.id)}
-                    <button class="artist" onclick={() => openCatalogArtist(a.id, a)}>
-                        {#if a.picture}
-                            <img class="round sm" src={a.picture} alt="" draggable="false" />
+    {:else if nothing}
+        <div class="chips">
+            {#each TABS as t (t)}
+                <span class="chip" class:on={t === "All"} class:dim={t !== "All"}>{t}</span>
+            {/each}
+        </div>
+        <div class="empty anim">
+            <div class="glyph"><Icon name="search" size={24} strokeWidth={1.8} /></div>
+            <h4>Nothing matched “{catalog.query}”</h4>
+            <p>No artist, album or song in the catalogue goes by that name.</p>
+            {#if didYouMean}
+                <div class="didyoumean">
+                    Did you mean
+                    <button onclick={() => catalogGo(didYouMean)}>{didYouMean}</button>?
+                </div>
+            {/if}
+            <div class="cta">
+                <!-- A catalogue miss can still succeed on the network. This is a
+                     Soulseek client; a dead end here is never the whole answer. -->
+                <button class="btn-primary" onclick={() => searchNetworkFor(catalog.query)}>
+                    <Icon name="globe" size={14} strokeWidth={1.8} /> Search the network for files
+                </button>
+                <button class="btn-ghost" onclick={leaveSearch}>Clear search</button>
+            </div>
+            <div class="hints">
+                · Catalogue search matches names, not lyrics — try the artist or record title.<br
+                />· Very new or self-released records may not be catalogued yet; the network
+                search often still finds them.
+            </div>
+        </div>
+    {:else}
+        <!-- The hero is static across a tab change (only the body below it
+             fades), and the library filter has no "top result" at all — it is a
+             filter over what you own, so it opens straight onto its headings. -->
+        {#if top && tab !== "In your library"}
+            <div class="hero">
+                {#if topArt && !artBroken[topArt]}
+                    <div class="hero-bg" style="background-image:url('{gridCover(topArt)}')"></div>
+                {/if}
+                <div class="hero-tint"></div>
+                <div class="hero-grain"></div>
+                <div class="hero-in">
+                    <button
+                        class="card"
+                        title={top.kind === "artist" ? "Open artist" : "Open album"}
+                        onclick={() =>
+                            top.kind === "artist"
+                                ? openCatalogArtist(top.data.id, top.data)
+                                : top.kind === "album"
+                                  ? openAlbum(top.data)
+                                  : top.data.album_id && openCatalogAlbum(top.data.album_id)}
+                    >
+                        {#if topArt && !artBroken[topArt]}
+                            <img
+                                src={gridCover(topArt)}
+                                alt=""
+                                draggable="false"
+                                onerror={() => markArtBroken(topArt)}
+                            />
                         {:else}
-                            <div class="round sm placeholder"><Icon name="music" size={20} /></div>
+                            <span class="placeholder">
+                                <Icon name={top.kind === "artist" ? "music" : "disc"} size={34} />
+                            </span>
                         {/if}
-                        <div class="artist-name">{a.name}</div>
                     </button>
-                {/each}
+
+                    <div class="hero-text">
+                        {#if top.kind === "artist"}
+                            <div class="kicker">Top result · Artist</div>
+                            <div class="hero-name">{top.data.name}</div>
+                            <div class="stats">
+                                {#if fmtFans(top.data.fans)}
+                                    <span><b>{fmtFans(top.data.fans)}</b><i>fans</i></span>
+                                {/if}
+                                <span><b>{albums.length}</b><i>releases</i></span>
+                                {#if catalog.searchArtistProfile?.listeners}
+                                    <span
+                                        ><b>{fmtFans(catalog.searchArtistProfile.listeners)}</b><i
+                                            >listeners</i
+                                        ></span
+                                    >
+                                {/if}
+                                {#if catalog.searchArtistProfile?.plays}
+                                    <span
+                                        ><b>{fmtFans(catalog.searchArtistProfile.plays)}</b><i
+                                            >plays</i
+                                        ></span
+                                    >
+                                {/if}
+                            </div>
+                            {#if heroTags.length}
+                                <div class="tags">
+                                    {#each heroTags as tag (tag)}
+                                        <span class="tag">{tag}</span>
+                                    {/each}
+                                </div>
+                            {/if}
+                            <div class="actions">
+                                <button class="btn-primary" onclick={playArtist}>
+                                    <Icon name="play" size={13} /> Play
+                                </button>
+                                <button
+                                    class="btn-ghost"
+                                    onclick={() => openCatalogArtist(top.data.id, top.data)}
+                                >
+                                    Open artist
+                                </button>
+                            </div>
+                        {:else if top.kind === "album"}
+                            <div class="kicker">Top result · Album</div>
+                            <div class="hero-name">{top.data.title}</div>
+                            <!-- The artist is a link: an album you found by name
+                                 is very often the wrong way into the right
+                                 artist. -->
+                            <div class="hero-sub">
+                                {@render whoChip(top.data.artist)}
+                                {#if yearOf(top.data)}<span class="dot">·</span> {yearOf(top.data)}{/if}
+                                {#if top.data.track_count ?? heroAlbum?.tracks?.length}
+                                    <span class="dot">·</span>
+                                    {plural(top.data.track_count ?? heroAlbum.tracks.length, "track")}
+                                {/if}
+                                {#if heroAlbumRuntime}<span class="dot">·</span> {heroAlbumRuntime}{/if}
+                            </div>
+                            <!-- Runtime lives in the byline above, exactly as on
+                                 the album page; these are that page's own two
+                                 headline totals. -->
+                            {#if heroAlbum?.album_listeners || heroAlbum?.album_plays}
+                                <div class="stats">
+                                    {#if heroAlbum?.album_listeners}
+                                        <span
+                                            ><b>{fmtFans(heroAlbum.album_listeners)}</b><i
+                                                >listeners</i
+                                            ></span
+                                        >
+                                    {/if}
+                                    {#if heroAlbum?.album_plays}
+                                        <span
+                                            ><b>{fmtFans(heroAlbum.album_plays)}</b><i>plays</i></span
+                                        >
+                                    {/if}
+                                </div>
+                            {/if}
+                            <div class="actions">
+                                <button
+                                    class="btn-primary"
+                                    onclick={() => streamCatalogAlbum(top.data)}
+                                >
+                                    <Icon name="play" size={13} /> Play
+                                </button>
+                                <button class="btn-ghost" onclick={() => saveAlbum(top.data)}>
+                                    <Icon name={saveIcon(`a${top.data.id}`)} size={14} /> Save
+                                </button>
+                                <button class="btn-ghost" onclick={() => openAlbum(top.data)}>
+                                    Open album
+                                </button>
+                            </div>
+                        {:else}
+                            <div class="kicker">Top result · Song</div>
+                            <div class="hero-name">{top.data.title}</div>
+                            <!-- Both the artist and the record are links; a song
+                                 is the one result that is really about two other
+                                 things. -->
+                            <div class="hero-sub">
+                                {@render whoChip(top.data.artist)}
+                                {#if top.data.album}
+                                    <span class="dot">·</span>
+                                    <button
+                                        class="who"
+                                        onclick={() =>
+                                            top.data.album_id
+                                                ? openCatalogAlbum(top.data.album_id)
+                                                : openAlbumByName(top.data.artist, top.data.album)}
+                                    >
+                                        {#if top.data.cover && !artBroken[top.data.cover]}
+                                            <img
+                                                class="sq"
+                                                src={top.data.cover}
+                                                alt=""
+                                                draggable="false"
+                                            />
+                                        {:else}
+                                            <span class="who-dot sq" aria-hidden="true"
+                                                ><Icon name="disc" size={11} /></span
+                                            >
+                                        {/if}
+                                        {top.data.album}
+                                    </button>
+                                {/if}
+                                <span class="dot">·</span>
+                                {fmtDuration(top.data.duration_secs)}
+                            </div>
+                            {#if listenersOf(top.data) != null}
+                                <!-- The same curve the song rows use, at
+                                     headline size: says at a glance whether this
+                                     is the famous one or an obscure cover. -->
+                                <div class="meter" title="{listenersOf(top.data).toLocaleString()} Last.fm listeners">
+                                    <span class="meter-bar"
+                                        ><i style="width:{barWidth(top.data)}%"></i></span
+                                    >
+                                    <span class="meter-val"
+                                        >{listenersOf(top.data).toLocaleString()} listeners</span
+                                    >
+                                </div>
+                            {/if}
+                            <div class="actions">
+                                <button class="btn-primary" onclick={() => playSong(top.data)}>
+                                    <Icon name="play" size={13} /> Play
+                                </button>
+                                <button class="btn-ghost" onclick={() => saveTrack(top.data)}>
+                                    <Icon name={saveIcon(`t${top.data.id}`)} size={14} /> Save
+                                </button>
+                                {#if top.data.album_id}
+                                    <button
+                                        class="btn-ghost"
+                                        onclick={() => openCatalogAlbum(top.data.album_id)}
+                                    >
+                                        Go to album
+                                    </button>
+                                {/if}
+                            </div>
+                        {/if}
+                    </div>
+
+                    <!-- The hero's middle third. Empty at narrow widths, where
+                         the two flanking blocks already fill the card; at the
+                         widths where it used to be a thousand pixels of blurred
+                         wallpaper it answers the other two questions a search
+                         about an artist is asking — what's new, and how much of
+                         this do I already have. -->
+                    {#if top.kind === "artist" && latestRelease}
+                        <div class="mid">
+                            <button class="mini" onclick={() => openAlbum(latestRelease)}>
+                                {#if latestRelease.cover && !artBroken[latestRelease.cover]}
+                                    <img src={gridCover(latestRelease.cover)} alt="" draggable="false" />
+                                {:else}
+                                    <span class="mini-art placeholder"><Icon name="disc" size={20} /></span>
+                                {/if}
+                                <span class="mini-text">
+                                    <span class="mini-kicker">Latest release</span>
+                                    <span class="ell mini-title">{latestRelease.title}</span>
+                                    <span class="mini-sub">
+                                        {[yearOf(latestRelease), albumMeta(latestRelease).split(" · ").pop()]
+                                            .filter(Boolean)
+                                            .join(" · ")}
+                                    </span>
+                                </span>
+                            </button>
+                            {#if ownedAlbums.length}
+                                <button class="ownpill" onclick={() => (tab = "In your library")}>
+                                    <Icon name="library" size={12} strokeWidth={2} />
+                                    <b>{ownedAlbums.length}</b> of these in your library
+                                </button>
+                            {/if}
+                        </div>
+                    {/if}
+
+                    <!-- The first playable action needs no scrolling: three
+                         songs sit in the hero's own right third. Gone entirely
+                         when there is nothing honest to put in it — a "More
+                         from X" heading over someone else's songs is worse than
+                         no panel. -->
+                    {#if heroRows.length}
+                        <div class="inline-list">
+                            <div class="inline-label">
+                                {heroPanelLabel}
+                            </div>
+                            <!-- For an album that is its REAL tracklist, not the
+                                 songs that matched the query — those are a
+                                 different list, and "On this record" was
+                                 promising the first while showing the second. -->
+                            {#each heroRows as t (t.id)}
+                                <button class="inline-row" onclick={() => playSong(t)}>
+                                    {#if t.cover && !artBroken[t.cover]}
+                                        <img
+                                            src={t.cover}
+                                            alt=""
+                                            draggable="false"
+                                            onerror={() => markArtBroken(t.cover)}
+                                        />
+                                    {:else}
+                                        <span class="mini placeholder"><Icon name="music" size={12} /></span>
+                                    {/if}
+                                    <span class="inline-text">
+                                        <span class="ell inline-title">{t.title}</span>
+                                        {#if t.album}<span class="ell inline-sub">{t.album}</span>{/if}
+                                    </span>
+                                    <span class="inline-dur">{fmtDuration(t.duration_secs)}</span>
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
             </div>
         {/if}
 
-        {#if albums.length > 0}
-            <h2>Albums</h2>
-            <div class="album-row">
-                {#each albums as al (al.id)}
-                    <div class="album" class:now={nowPlaying("albumId", al.id)}>
-                        <div class="cover-wrap">
-                            {#if nowPlaying("albumId", al.id)}
-                                <span class="now-badge">♫</span>
-                            {/if}
-                            {#if al.cover && !artBroken[al.cover]}
-                                <img class="cover" src={al.cover} alt="" draggable="false" onerror={() => markArtBroken(al.cover)} />
-                            {:else}
-                                <div class="cover placeholder"><Icon name="disc" size={30} /></div>
-                            {/if}
-                            <div class="overlay">
-                                <button
-                                    class="act"
-                                    title="Play — streams from the best source"
-                                    onclick={() => streamCatalogAlbum(al)}
-                                ><Icon name="play" size={15} /></button>
-                                <button
-                                    class="act"
-                                    title="Save to library"
-                                    onclick={() => saveAlbum(al)}
-                                ><Icon name={saved[`a${al.id}`] === "ok" ? "check" : saved[`a${al.id}`] === "err" ? "x" : "download"} size={15} /></button>
+        <div class="chips">
+            {#each TABS as t (t)}
+                <button
+                    class="chip"
+                    class:on={t === tab}
+                    class:dim={dimmed.has(t)}
+                    disabled={dimmed.has(t)}
+                    onclick={() => (tab = t)}>{t}</button
+                >
+            {/each}
+        </div>
+
+        <!-- Keyed on the tab, so the body fades in on a switch. The hero above
+             is deliberately outside this: it does not re-animate. -->
+        {#key tab}
+            <div class="anim">
+                {#if tab === "Songs"}
+                    <div class="measure">
+                        <div class="shd">
+                            <h3>Songs</h3>
+                            <span class="count">{tracks.length}</span>
+                            {@render sortControl()}
+                        </div>
+                        {#each sortedTracks as t, i (t.id)}
+                            {@render songRow(t, i)}
+                        {/each}
+                    </div>
+                {:else if tab === "Albums"}
+                    <div class="shd">
+                        <h3>Albums</h3>
+                        <span class="count">{albums.length}</span>
+                    </div>
+                    <div class="grid wide">
+                        {#each albums as al (al.id)}
+                            {@render albumCard(al)}
+                        {/each}
+                    </div>
+                {:else if tab === "Artists"}
+                    <div class="shd">
+                        <h3>Artists</h3>
+                        <span class="count">{artists.length}</span>
+                    </div>
+                    <div class="grid wide">
+                        {#each artists as a (a.id)}
+                            {@render artistCard(a)}
+                        {/each}
+                    </div>
+                {:else if tab === "In your library"}
+                    {#if libraryEmpty}
+                        <!-- Deliberately distinct from a miss: the search worked,
+                             you just do not own any of it — so the way out is to
+                             drop the filter, not to search again. -->
+                        <div class="empty">
+                            <div class="glyph"><Icon name="library" size={24} strokeWidth={1.8} /></div>
+                            <h4>None of these are in your library</h4>
+                            <p>
+                                “{catalog.query}” matched {plural(tracks.length, "song")},
+                                {plural(albums.length, "album")} and
+                                {plural(artists.length, "artist")} in the catalogue — you haven't
+                                saved any of them yet.
+                            </p>
+                            <div class="cta">
+                                <button class="btn-primary" onclick={() => (tab = "All")}>
+                                    Show all results
+                                </button>
+                                <button class="btn-ghost" onclick={() => goToView("library")}>
+                                    Open Your Library
+                                </button>
                             </div>
                         </div>
-                        <div class="album-title" title={al.title}>{al.title}</div>
-                        <div class="album-sub">{albumMeta(al)}</div>
+                    {:else}
+                        <div class="cols">
+                            <div>
+                                {#if ownedTracks.length}
+                                    <div class="shd">
+                                        <h3>Songs</h3>
+                                        <span class="count">{ownedTracks.length}</span>
+                                    </div>
+                                    {#each ownedTracks as t, i (t.id)}
+                                        {@render songRow(t, i)}
+                                    {/each}
+                                {/if}
+                            </div>
+                            <div>
+                                {#if ownedAlbums.length}
+                                    <div class="shd">
+                                        <h3>Albums</h3>
+                                        <span class="count">{ownedAlbums.length}</span>
+                                    </div>
+                                    <div class="grid">
+                                        {#each ownedAlbums as al (al.id)}
+                                            {@render albumCard(al)}
+                                        {/each}
+                                    </div>
+                                {/if}
+                            </div>
+                        </div>
+                    {/if}
+                {:else if soleKind}
+                    <!-- Only one kind matched: no split, and one line naming what
+                         is missing. A list gets a readable measure; a grid gets
+                         the room the split was taking, exactly as on that kind's
+                         own tab. -->
+                    <div class:measure={soleKind === "Songs"}>
+                        <div class="shd">
+                            <h3>{soleKind}</h3>
+                            <span class="count">{kindCount(soleKind)}</span>
+                            {#if soleKind === "Songs"}{@render sortControl()}{/if}
+                        </div>
+                        {#if soleKind === "Songs"}
+                            {#each sortedTracks as t, i (t.id)}
+                                {@render songRow(t, i)}
+                            {/each}
+                        {:else if soleKind === "Albums"}
+                            <div class="grid wide">
+                                {#each albums as al (al.id)}
+                                    {@render albumCard(al)}
+                                {/each}
+                            </div>
+                        {:else}
+                            <div class="grid wide">
+                                {#each artists as a (a.id)}
+                                    {@render artistCard(a)}
+                                {/each}
+                            </div>
+                        {/if}
+                        <p class="missing">{missingLine}</p>
                     </div>
-                {/each}
+                {:else}
+                    <div class="cols">
+                        <div>
+                            {#if tracks.length}
+                                <div class="shd">
+                                    <h3>Songs</h3>
+                                    <span class="count">{tracks.length}</span>
+                                    {@render sortControl()}
+                                </div>
+                                {#each sortedTracks.slice(0, allSongs) as t, i (t.id)}
+                                    {@render songRow(t, i)}
+                                {/each}
+                            {/if}
+                        </div>
+                        <!-- Measured, not calculated: this is the box the album
+                             grid actually gets, so the count can never disagree
+                             with the CSS about how many covers fit. -->
+                        <div bind:clientWidth={albumColWidth}>
+                            {#if albums.length}
+                                <div class="shd">
+                                    <h3>Albums</h3>
+                                    <span class="count">{albums.length}</span>
+                                    <button class="seeall" onclick={() => (tab = "Albums")}>
+                                        SEE ALL
+                                    </button>
+                                </div>
+                                <div class="grid">
+                                    {#each albums.slice(0, allAlbums) as al (al.id)}
+                                        {@render albumCard(al)}
+                                    {/each}
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                    {#if artists.length}
+                        <div class="shd">
+                            <h3>Artists</h3>
+                            <span class="count">{artists.length}</span>
+                            <button class="seeall" onclick={() => (tab = "Artists")}>SEE ALL</button>
+                        </div>
+                        <div class="grid">
+                            {#each artists as a (a.id)}
+                                {@render artistCard(a)}
+                            {/each}
+                        </div>
+                    {/if}
+                {/if}
             </div>
-        {/if}
+        {/key}
     {/if}
 </div>
 
+<!-- The artist byline chip, lifted from the album page (`.who` there) rather
+     than restyled here: round portrait, name, and an underline only on hover.
+     A permanently-underlined link read as a dead border against the hero art. -->
+{#snippet whoChip(name)}
+    <button class="who" onclick={() => openArtistByName(name)}>
+        {#if bylinePicture}
+            <img src={bylinePicture} alt="" draggable="false" />
+        {:else}
+            <span class="who-dot" aria-hidden="true"><Icon name="users" size={11} /></span>
+        {/if}
+        {name}
+    </button>
+{/snippet}
+
+{#snippet sortControl()}
+    <!-- Only offered once there are counts to sort by. Without them "Listeners"
+         is an order that cannot be applied, and the control would be a lie. -->
+    {#if showCounts}
+        <button
+            class="sortby"
+            title="Order the songs by Last.fm listeners, or by how well they match the search"
+            onclick={() => (sortBy = sortBy === "Listeners" ? "Relevance" : "Listeners")}
+        >
+            SORT <b>{sortBy} ▾</b>
+        </button>
+    {/if}
+{/snippet}
+
+{#snippet songRow(t, i)}
+    <div
+        class="srow"
+        class:now={nowPlaying("trackId", t.id)}
+        class:has-count={showCounts}
+        role="button"
+        tabindex="0"
+        title="Play — streams from the best source"
+        onclick={() => playSong(t)}
+        onkeydown={(e) => e.key === "Enter" && playSong(t)}
+    >
+        <span class="n">
+            <span class="n-idx">{nowPlaying("trackId", t.id) ? "♫" : i + 1}</span>
+            <span class="n-play"><Icon name="play" size={11} /></span>
+        </span>
+        {#if t.cover && !artBroken[t.cover]}
+            <img src={t.cover} alt="" draggable="false" onerror={() => markArtBroken(t.cover)} />
+        {:else}
+            <span class="mini placeholder"><Icon name="music" size={14} /></span>
+        {/if}
+        <span class="srow-text">
+            <span class="ell srow-title">
+                {t.title}
+                {#if catalog.searchOwned[t.id]}<span class="own">SAVED</span>{/if}
+            </span>
+            <span class="ell srow-sub">{t.artist} · {t.album}</span>
+        </span>
+        {#if showCounts}
+            <!-- `nocount`, not `empty`: this page also has an `.empty` block for
+                 its empty STATES, and a bare `empty` here inherited its
+                 `padding: 64px 20px` — inflating an unknown-count bar to 128px
+                 and stretching the whole song row around it. -->
+            <span
+                class="lbar"
+                class:nocount={listenersOf(t) == null}
+                title={listenersOf(t) == null
+                    ? "No Last.fm listener count for this song"
+                    : `${listenersOf(t).toLocaleString()} Last.fm listeners`}
+            >
+                <i style="transform:scaleX({barWidth(t) / 100})"></i>
+                <span>{fmtCount(listenersOf(t))}</span>
+            </span>
+        {/if}
+        <button
+            class="sv"
+            title="Save to library"
+            onclick={(e) => {
+                e.stopPropagation();
+                saveTrack(t);
+            }}><Icon name={saveIcon(`t${t.id}`)} size={14} /></button
+        >
+        <span class="d">{fmtDuration(t.duration_secs)}</span>
+    </div>
+{/snippet}
+
+{#snippet albumCard(al)}
+    <div class="albumcard" class:now={nowPlaying("albumId", al.id)}>
+        <div class="cover-wrap">
+            <!-- The artwork itself opens the record; the overlay's own controls
+                 sit above it and are the only parts of it that take a click. -->
+            <button class="cover-btn" title={al.title} onclick={() => openAlbum(al)}>
+                {#if al.cover && !artBroken[al.cover]}
+                    <img
+                        class="cover"
+                        src={gridCover(al.cover)}
+                        alt=""
+                        draggable="false"
+                        onerror={() => markArtBroken(al.cover)}
+                    />
+                {:else}
+                    <span class="cover placeholder"><Icon name="disc" size={26} /></span>
+                {/if}
+            </button>
+            <div class="ov">
+                <button class="mini-act" title="Save to library" onclick={() => saveAlbum(al)}>
+                    <Icon name={saveIcon(`a${al.id}`)} size={14} />
+                </button>
+                <button
+                    class="fab"
+                    title="Play — streams from the best source"
+                    onclick={() => streamCatalogAlbum(al)}
+                >
+                    <Icon name="play" size={13} />
+                </button>
+            </div>
+        </div>
+        <button class="ac-title ell" onclick={() => openAlbum(al)}>{al.title}</button>
+        <div class="ac-sub ell">{albumMeta(al)}</div>
+    </div>
+{/snippet}
+
+{#snippet artistCard(a)}
+    <button class="artistcard" onclick={() => openCatalogArtist(a.id, a)}>
+        <div class="cover-wrap">
+            {#if a.picture && !artBroken[a.picture]}
+                <img
+                    class="cover"
+                    src={gridCover(a.picture)}
+                    alt=""
+                    draggable="false"
+                    onerror={() => markArtBroken(a.picture)}
+                />
+            {:else}
+                <div class="cover placeholder"><Icon name="music" size={26} /></div>
+            {/if}
+        </div>
+        <div class="ac-title ell">{a.name}</div>
+        <div class="ac-sub ell">{fmtFans(a.fans) ? `${fmtFans(a.fans)} fans` : "Artist"}</div>
+    </button>
+{/snippet}
+
 <style>
+    /* This page begins flush with the TOP of the scroll pane — the glass bar
+       cancels the pane's top padding — so the wash below can start at the
+       window's edge and run under the frost. The clearance under the bar is
+       PADDING here, never a margin on the hero (see the markup note). */
     .catalog {
+        position: relative;
+        padding-top: calc(var(--bar-h) + 20px);
+        padding-bottom: 26px;
+        /* Queried by the hero's middle third, which has to go on the width of
+           THIS element rather than the window's — see the @container rule at
+           `.mid`. Safe to contain: nothing under `.catalog` is fixed- or
+           sticky-positioned, and `.wash` already resolves against it. */
+        container-type: inline-size;
+    }
+
+    /* Bled out through the pane's own 28px side padding so the colour reaches
+       both edges of the pane, exactly like the glass bar's own bleed. */
+    .wash {
+        position: absolute;
+        left: -28px;
+        right: -28px;
+        top: 0;
+        height: 600px;
+        z-index: 0;
+        opacity: 0.6;
+        pointer-events: none;
+        background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--wash) 67%, transparent),
+            color-mix(in srgb, var(--wash) 27%, transparent) 34%,
+            transparent 92%
+        );
+    }
+
+    /* Everything else stands on the wash rather than under it. */
+    .catalog > :not(.wash) {
+        position: relative;
+        z-index: 1;
+    }
+
+    @keyframes fadein {
+        from {
+            opacity: 0;
+            transform: translateY(7px);
+        }
+        to {
+            opacity: 1;
+            transform: none;
+        }
+    }
+    .anim {
+        animation: fadein 0.26s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .anim {
+            animation: none;
+        }
+    }
+
+    /* ---- hero ---------------------------------------------------------- */
+    /* A floating rounded card, not an edge-to-edge band. No hairline ring:
+       a 1px inset white ring shows as grey ARCS on rounded dark artwork. */
+    .hero {
+        position: relative;
+        overflow: hidden;
+        border-radius: 18px;
+        min-height: 230px;
         display: flex;
-        flex-direction: column;
-        /* The glass bar cancels the pane's top padding so a page's artwork can
-           run underneath it, and each page under the bar hands that inset back.
-           Unlike the artist and album pages there is no hero here for the bar to
-           float over, so the results also have to CLEAR the bar's height —
-           without it the "Top result" heading sits under the frost at rest.
-           They still slide under it on scroll, which is what the frost is for.
-           See the note by BAR_VIEWS and --bar-h in App.svelte. */
-        padding-top: calc(var(--pane-pad) + var(--bar-h));
+        align-items: center;
+        padding: 22px 24px;
+        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
     }
-
-    .hint {
-        color: var(--text-secondary);
-        padding-top: 10vh;
-        text-align: center;
+    .hero.skeleton {
+        box-shadow: none;
+        background: rgba(255, 255, 255, 0.03);
     }
-
-    h2 {
-        font-size: 15px;
-        font-weight: 700;
-        margin: 20px 0 10px;
+    .hero-bg {
+        position: absolute;
+        inset: 0;
+        background-size: cover;
+        background-position: center;
+        filter: blur(30px) saturate(1.6) brightness(0.5);
+        /* Overscaled so the blur's soft edge never reaches the card's border. */
+        transform: scale(1.25);
     }
-
-    .lead {
-        display: grid;
-        grid-template-columns: 240px 1fr;
-        gap: 16px;
-        align-items: start;
+    .hero-tint {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            rgba(8, 8, 10, 0.9) 28%,
+            rgba(8, 8, 10, 0.4) 72%,
+            rgba(8, 8, 10, 0.78)
+        );
     }
-
-    .lead h2 {
-        margin-top: 0;
+    .hero-grain {
+        position: absolute;
+        inset: 0;
+        opacity: 0.055;
+        mix-blend-mode: overlay;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
     }
-
-    .top-card {
-        display: block;
+    .hero-in {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 24px;
         width: 100%;
-        text-align: left;
-        background: var(--bg-elevated);
-        border-radius: 8px;
-        padding: 16px;
-        transition: background 0.2s;
     }
-
-    .top-card:hover {
-        background: var(--bg-highlight);
+    /* Deezer artist pictures are 1000x1000 — the square card is native and
+       nothing is cropped to fit it. */
+    .card {
+        flex: none;
+        display: block;
+        border-radius: 12px;
+        overflow: hidden;
+        width: 150px;
+        height: 150px;
+        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
+        transition: transform var(--art-motion);
     }
-
-    .round {
-        width: 84px;
-        height: 84px;
-        border-radius: 50%;
+    .card:hover {
+        transform: scale(1.02);
+    }
+    .card img {
+        width: 100%;
+        height: 100%;
         object-fit: cover;
         display: block;
     }
-
-    .round.sm {
-        width: 90px;
-        height: 90px;
-        margin: 0 auto;
-    }
-
-    .placeholder {
+    .card .placeholder {
+        width: 100%;
+        height: 100%;
         display: grid;
         place-items: center;
         background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
         color: var(--text-muted);
     }
-
-    .top-name {
-        font-size: 17px;
-        font-weight: 700;
-        margin-top: 12px;
+    .hero-text {
+        min-width: 0;
     }
-
-    .badge {
-        display: inline-block;
-        margin-top: 8px;
-        background: var(--bg-highlight);
-        color: var(--text-secondary);
+    .kicker {
         font-size: 10px;
+        font-weight: 900;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: var(--accent);
+    }
+    .hero-name {
+        font-weight: 900;
+        letter-spacing: -1.2px;
+        line-height: 1.02;
+        font-size: 34px;
+    }
+    .hero-sub {
+        font-size: 12.5px;
+        color: var(--text-secondary);
         font-weight: 700;
-        letter-spacing: 0.06em;
-        padding: 4px 10px;
-        border-radius: 10px;
+        margin-top: 7px;
+    }
+    .stats {
+        display: flex;
+        gap: 15px;
+        margin-top: 8px;
+    }
+    .stats b {
+        font-size: 14px;
+        font-weight: 900;
+    }
+    .stats i {
+        font-style: normal;
+        font-size: 9.5px;
+        font-weight: 800;
+        letter-spacing: 0.1em;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        margin-left: 4px;
+    }
+    .actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 13px;
+        flex-wrap: wrap;
     }
 
-    .song-list {
-        background: var(--bg-elevated);
-        border-radius: 8px;
-        padding: 6px 8px;
-    }
-
-    .song {
+    /* Byline links, copied from CatalogAlbum's `.who` so a record's artist
+       looks the same wherever you meet it: a round portrait, the name, and an
+       underline only while hovered. An album gets the same chip with a
+       rounded-SQUARE thumb — the same round-artist / square-record distinction
+       the glass bar's crumbs already make. */
+    .hero-sub {
         display: flex;
         align-items: center;
-        gap: 11px;
-        padding: 6px;
-        border-radius: 5px;
+        gap: 0.5em;
+        flex-wrap: wrap;
+    }
+    .dot {
+        opacity: 0.5;
+    }
+    .who {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        font-weight: 800;
+        color: #fff;
+    }
+    .who img,
+    .who-dot {
+        width: 1.76em;
+        height: 1.76em;
+        border-radius: 50%;
+        object-fit: cover;
+        flex: none;
+    }
+    .who img.sq,
+    .who-dot.sq {
+        border-radius: 4px;
+    }
+    /* Held until the portrait resolves, so the byline never reflows and never
+       stands in a different picture for the artist. */
+    .who-dot {
+        display: grid;
+        place-items: center;
+        background: rgba(255, 255, 255, 0.12);
+        color: rgba(255, 255, 255, 0.5);
+    }
+    .who:hover {
+        text-decoration: underline;
     }
 
-    .song:hover {
-        background: var(--bg-highlight);
+    /* MusicBrainz's genre tags — what they sound like, which no number says. */
+    .tags {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        margin-top: 9px;
+    }
+    .tag {
+        font-size: 10.5px;
+        font-weight: 800;
+        padding: 3px 10px;
+        border-radius: 99px;
+        background: rgba(255, 255, 255, 0.07);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        color: var(--text-secondary);
+        /* Sentence case, not Title Case: MusicBrainz writes its tags lowercase,
+           and capitalising every word turns the real tag "rock and indie" into
+           "Rock And Indie". Needs the inline-block for ::first-letter to take. */
+        display: inline-block;
+    }
+    .tag::first-letter {
+        text-transform: uppercase;
     }
 
-    .mini-cover {
-        width: 34px;
+    /* Headline listener weight on a song hero: same curve as the rows below. */
+    .meter {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        margin-top: 11px;
+    }
+    .meter-bar {
+        width: 190px;
+        height: 8px;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+        flex: none;
+    }
+    .meter-bar i {
+        display: block;
+        height: 100%;
+        border-radius: 4px;
+        background: var(--accent);
+    }
+    .meter-val {
+        font-size: 11px;
+        font-weight: 800;
+        color: var(--text-secondary);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* ---- the hero's middle third ---------------------------------------- */
+    .mid {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 0 8px;
+    }
+    .mini {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 9px 12px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.055);
+        border: 1px solid rgba(255, 255, 255, 0.09);
+        max-width: 100%;
+        transition: background 0.16s;
+    }
+    .mini:hover {
+        background: rgba(255, 255, 255, 0.09);
+    }
+    .mini img,
+    .mini .mini-art {
+        width: 56px;
+        height: 56px;
+        border-radius: 7px;
+        object-fit: cover;
+        flex: none;
+    }
+    .mini-art.placeholder {
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+        color: var(--text-muted);
+    }
+    .mini-text {
+        min-width: 0;
+        display: block;
+    }
+    .mini-kicker {
+        display: block;
+        font-size: 9px;
+        font-weight: 900;
+        letter-spacing: 0.13em;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+    }
+    .mini-title {
+        display: block;
+        font-size: 13.5px;
+        font-weight: 800;
+        margin-top: 2px;
+    }
+    .mini-sub {
+        display: block;
+        font-size: 11px;
+        color: var(--text-muted);
+    }
+    .ownpill {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10.5px;
+        font-weight: 800;
+        padding: 4px 11px;
+        border-radius: 99px;
+        background: rgba(255, 255, 255, 0.09);
+        color: var(--text-secondary);
+        transition: background 0.16s;
+    }
+    .ownpill:hover {
+        background: rgba(255, 255, 255, 0.16);
+        color: #fff;
+    }
+    .ownpill b {
+        color: #fff;
+    }
+    /* The middle third goes when there is no room for it, and "room" is a
+       property of the PANE, not the window. The sidebar and the now-playing
+       rail take ~490px between them, so a 1504px window can hand this hero
+       1012px — a window-width query cannot see that, which is how the card
+       ended up sheared down to 26px of itself.
+
+       Measured on the Weezer hero at pane 1012:
+
+           48  .hero padding      150  .card, fixed
+           72  three 24px gaps    340  .inline-list at its min(36%, 340px) cap
+          360  .hero-text, natural width
+
+       `.mid` is the only flex item that grows, so it gets whatever is left:
+       pane − 610 − .hero-text. Its card stops reading below ~240px (56 art +
+       12 gap + 24 padding + ~150 of title, which ellipsises honestly), so the
+       cut-off is 610 + 360 + 240. Under it the two flanking blocks already
+       fill the hero on their own. */
+    @container (max-width: 1210px) {
+        .mid {
+            display: none;
+        }
+    }
+
+    .btn-primary {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
         height: 34px;
+        padding: 0 18px;
+        border-radius: 99px;
+        font-size: 12.5px;
+        font-weight: 800;
+        background: var(--accent);
+        color: #08080a;
+        transition: transform var(--art-motion);
+    }
+    .btn-primary:hover {
+        transform: scale(1.04);
+    }
+    .btn-ghost {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 34px;
+        padding: 0 15px;
+        border-radius: 99px;
+        font-size: 12px;
+        font-weight: 800;
+        border: 1px solid rgba(255, 255, 255, 0.28);
+        transition: 0.18s;
+    }
+    .btn-ghost:hover {
+        border-color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    /* The hero's right third: the first playable action, with no scrolling. */
+    .inline-list {
+        margin-left: auto;
+        width: min(36%, 340px);
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        flex: none;
+    }
+    .inline-label {
+        font-size: 9px;
+        font-weight: 900;
+        letter-spacing: 0.14em;
+        color: var(--text-secondary);
+        padding: 4px 8px;
+        text-transform: uppercase;
+    }
+    .inline-row {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        padding: 5px 8px;
+        border-radius: 6px;
+        width: 100%;
+    }
+    .inline-row:hover {
+        background: rgba(255, 255, 255, 0.11);
+    }
+    .inline-row img,
+    .inline-row .mini {
+        width: 28px;
+        height: 28px;
         border-radius: 4px;
         object-fit: cover;
-        flex-shrink: 0;
+        flex: none;
+    }
+    .inline-text {
+        min-width: 0;
+        flex: 1;
+        display: block;
+    }
+    .inline-title {
+        display: block;
+        font-size: 12px;
+        font-weight: 700;
+    }
+    .inline-sub {
+        display: block;
+        font-size: 10px;
+        color: var(--text-muted);
+    }
+    .inline-dur {
+        font-size: 10px;
+        color: var(--text-muted);
+        flex: none;
     }
 
-    .song-info {
-        flex: 1;
+    /* ---- filter chips --------------------------------------------------- */
+    .chips {
+        display: flex;
+        gap: 7px;
+        flex-wrap: wrap;
+        margin: 18px 0 2px;
+    }
+    .chips.flush {
+        margin-top: 0;
+    }
+    .chip {
+        padding: 5px 13px;
+        border-radius: 99px;
+        font-size: 12px;
+        font-weight: 800;
+        background: rgba(255, 255, 255, 0.055);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: var(--text-secondary);
+        transition: 0.16s;
+    }
+    .chip:hover:not(.dim) {
+        border-color: rgba(255, 255, 255, 0.3);
+        color: #fff;
+    }
+    .chip.on {
+        background: #fff;
+        color: #000;
+        border-color: #fff;
+    }
+    /* Dim and unclickable, never a blank heading. */
+    .chip.dim {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+
+    /* ---- section headings ----------------------------------------------- */
+    .shd {
+        display: flex;
+        align-items: baseline;
+        gap: 9px;
+        margin: 24px 0 10px;
+    }
+    .shd h3 {
+        font-size: 14.5px;
+        font-weight: 800;
+    }
+    .count {
+        font-size: 10.5px;
+        font-weight: 800;
+        color: var(--text-muted);
+        background: rgba(255, 255, 255, 0.06);
+        padding: 2px 8px;
+        border-radius: 99px;
+    }
+    .seeall,
+    .sortby {
+        margin-left: auto;
+        font-size: 10.5px;
+        font-weight: 800;
+        color: var(--text-secondary);
+    }
+    .seeall:hover,
+    .sortby:hover {
+        color: #fff;
+    }
+    .sortby b {
+        color: #fff;
+    }
+
+    /* One kind at a time gets a readable measure instead of stretching the
+       list across the whole pane. */
+    .measure {
+        max-width: 980px;
+    }
+    .missing {
+        margin-top: 18px;
+        font-size: 11.5px;
+        color: var(--text-muted);
+    }
+
+    .cols {
+        display: grid;
+        grid-template-columns: 1.25fr 1fr;
+        gap: 26px;
+        align-items: start;
+    }
+    /* Kills the automatic minimum on a fractional track, so each column is
+       exactly its share of the row and NOT "at least as wide as its widest
+       card". Two things depend on that: a long song title ellipsizes instead of
+       stretching the split, and the measured album-column width (which decides
+       how many covers to render) can never be pushed around by the covers
+       already in it. */
+    .cols > * {
         min-width: 0;
     }
 
-    .song-title {
-        font-size: 13px;
-        font-weight: 500;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .song-sub {
-        font-size: 11px;
-        color: var(--text-secondary);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .dur {
-        color: var(--text-muted);
-        font-size: 11px;
-        flex-shrink: 0;
-    }
-
-    .mini-btn {
-        color: var(--text-secondary);
-        flex-shrink: 0;
-    }
-
-    .mini-btn:hover {
-        color: var(--accent-hover);
-    }
-
-    .resolving {
-        color: var(--text-secondary);
-        font-size: 12px;
-        margin-bottom: 14px;
-    }
-
-    .resolving .pulse {
-        color: var(--accent);
-    }
-
-    .resolving.error {
-        color: #f15e6c;
-    }
-
-    .song {
+    /* ---- song rows ------------------------------------------------------ */
+    .srow {
+        display: grid;
+        grid-template-columns: 20px 36px 1fr auto auto;
+        align-items: center;
+        gap: 11px;
+        padding: 7px 9px;
+        border-radius: 7px;
         cursor: pointer;
     }
-
-    .song.now .song-title {
-        color: var(--accent-hover);
+    .srow.has-count {
+        grid-template-columns: 20px 36px 1fr auto auto auto;
     }
-
-    .eq {
-        color: var(--accent-hover);
-        margin-right: 3px;
+    .srow:hover {
+        background: rgba(255, 255, 255, 0.055);
     }
-
-    .album.now .cover {
-        outline: 2px solid var(--accent);
-    }
-
-    .now-badge {
-        position: absolute;
-        right: 7px;
-        bottom: 7px;
-        z-index: 1;
+    .n {
+        position: relative;
         display: grid;
         place-items: center;
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-        background: var(--accent);
-        color: #000;
-        font-size: 11px;
+        font-size: 11.5px;
+        color: var(--text-muted);
     }
-
-    .mini-btn.play {
-        color: var(--accent-hover);
+    .n-idx,
+    .n-play {
+        grid-area: 1 / 1;
     }
-
-    .act {
-        display: grid;
-        place-items: center;
+    .n-play {
+        opacity: 0;
+        color: #fff;
+    }
+    .srow:hover .n-idx {
+        opacity: 0;
+    }
+    .srow:hover .n-play {
+        opacity: 1;
+    }
+    .srow img,
+    .srow .mini {
         width: 36px;
         height: 36px;
-        border-radius: 50%;
-        background: var(--accent);
-        color: #000;
-        margin: 0 5px;
+        border-radius: 5px;
+        object-fit: cover;
     }
-
-    .act:hover {
-        background: var(--accent-hover);
-        transform: scale(1.06);
-    }
-
-    .artist-row,
-    .album-row {
+    .mini.placeholder {
         display: grid;
-        /* Fixed tracks — fluid minmax(...,1fr) sawtooths card widths while
-           the window or side panels resize (see Home.svelte). */
-        grid-template-columns: repeat(auto-fill, 124px);
+        place-items: center;
+        background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+        color: var(--text-muted);
+    }
+    .srow-text {
+        min-width: 0;
+        display: block;
+    }
+    .srow-title {
+        display: block;
+        font-size: 13px;
+        font-weight: 700;
+    }
+    .srow.now .srow-title {
+        color: var(--accent-hover);
+    }
+    .srow-sub {
+        display: block;
+        font-size: 11px;
+        color: var(--text-secondary);
+    }
+    .own {
+        font-size: 8px;
+        font-weight: 900;
+        letter-spacing: 0.06em;
+        padding: 1px 5px;
+        border-radius: 3px;
+        background: var(--bg-press);
+        color: var(--text-secondary);
+        margin-left: 6px;
+        vertical-align: 1px;
+    }
+    .d {
+        font-size: 11px;
+        color: var(--text-muted);
+        min-width: 32px;
+        text-align: right;
+        font-variant-numeric: tabular-nums;
+    }
+    .sv {
+        opacity: 0;
+        color: var(--text-secondary);
+        display: grid;
+        place-items: center;
+    }
+    .srow:hover .sv,
+    .srow:focus-within .sv {
+        opacity: 1;
+    }
+    .sv:hover {
+        color: var(--accent-hover);
+    }
+
+    /* Listener weight: the bar's LENGTH is the count, curved by
+       src/lib/listenerBars.js so one runaway hit cannot squash the rest of the
+       list into a sliver — the same curve the album page draws. */
+    .lbar {
+        width: 96px;
+        height: 17px;
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+        background: rgba(255, 255, 255, 0.07);
+        flex: none;
+    }
+    .lbar i {
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        background: var(--accent);
+        transform-origin: left;
+        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    /* A song Last.fm has no count for gets the dash and no paint at all — a
+       floor-width bar behind an em dash would read as a measured tiny value. */
+    .lbar.nocount i {
+        display: none;
+    }
+    .lbar span {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-size: 10.5px;
+        font-weight: 800;
+        font-variant-numeric: tabular-nums;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
+    }
+
+    /* ---- cards ---------------------------------------------------------- */
+    /* Fixed tracks, not `minmax(...,1fr)` — a fluid track sawtooths every card's
+       width while the window or the side panels resize, and this app animates
+       its grid columns for 280ms on every panel toggle. Same rule as Home and
+       the artist page. */
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, var(--tile, 124px));
         gap: 16px;
     }
+    /* One kind at a time: the tiles get the room the split was taking. */
+    .grid.wide {
+        --tile: 158px;
+    }
 
-    .artist {
+    .albumcard,
+    .artistcard {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        text-align: left;
+    }
+    .artistcard {
         text-align: center;
-        padding: 10px 6px;
-        border-radius: 8px;
-        transition: background 0.2s;
     }
-
-    .artist:hover {
-        background: var(--bg-highlight);
-    }
-
-    .artist-name {
-        font-size: 12px;
-        font-weight: 600;
-        margin-top: 8px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
     .cover-wrap {
         position: relative;
-    }
-
-    .cover {
         display: block;
+        width: 100%;
+        border-radius: 8px;
+        overflow: hidden;
+        transition: transform var(--art-motion);
+    }
+    .cover-btn {
+        display: block;
+        width: 100%;
+    }
+    .artistcard .cover-wrap {
+        border-radius: 10px;
+    }
+    .albumcard:hover .cover-wrap,
+    .artistcard:hover .cover-wrap {
+        transform: scale(var(--art-grow));
+    }
+    .cover {
         width: 100%;
         aspect-ratio: 1;
         object-fit: cover;
-        border-radius: 6px;
+        display: block;
+        background: #0d0d0f;
     }
-
-    .overlay {
+    .cover.placeholder {
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+        color: var(--text-muted);
+    }
+    .albumcard.now .cover-wrap {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+    }
+    /* Inert except for its own two controls, so the rest of the artwork keeps
+       opening the record even while the gradient is over it. */
+    .ov {
         position: absolute;
         inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(0, 0, 0, 0.55);
-        border-radius: 6px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 55%);
         opacity: 0;
-        transition: opacity 0.15s;
+        transition: opacity 0.18s;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        gap: 6px;
+        padding: 8px;
+        pointer-events: none;
     }
-
-    .cover-wrap:hover .overlay {
+    .ov button {
+        pointer-events: auto;
+    }
+    .albumcard:hover .ov,
+    .albumcard:focus-within .ov {
         opacity: 1;
     }
-
-    .album-title {
-        font-size: 12px;
-        font-weight: 600;
-        margin-top: 7px;
-        line-height: 1.25;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 6;
+    .fab {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--accent);
+        color: #08080a;
+        cursor: pointer;
     }
-
-    .album-sub {
-        font-size: 11px;
-        color: var(--text-secondary);
-        margin-top: 2px;
+    .mini-act {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        color: #fff;
+        cursor: pointer;
+    }
+    .mini-act:hover {
+        background: rgba(255, 255, 255, 0.16);
+    }
+    .ac-title {
+        display: block;
+        width: 100%;
+        font-size: 12.5px;
+        font-weight: 800;
+        margin-top: 8px;
+        text-align: inherit;
+    }
+    .albumcard .ac-title:hover {
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+    .ac-sub {
+        font-size: 10.5px;
+        color: var(--text-muted);
+    }
+    .ell {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
-    .album {
+    /* ---- empty / edge states -------------------------------------------- */
+    .empty {
         display: flex;
         flex-direction: column;
-        min-height: 245px;
+        align-items: center;
+        text-align: center;
+        padding: 64px 20px;
+        gap: 9px;
+    }
+    .empty.first {
+        padding-top: 44px;
+    }
+    .glyph {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.09);
+        color: var(--text-muted);
+    }
+    .glyph.warn {
+        color: #ffc46b;
+    }
+    .empty h4 {
+        font-size: 19px;
+        font-weight: 900;
+    }
+    .empty p {
+        font-size: 12.5px;
+        color: var(--text-secondary);
+        max-width: 440px;
+        line-height: 1.55;
+    }
+    .empty p.warn {
+        color: #ffc46b;
+    }
+    .didyoumean {
+        font-size: 12.5px;
+        color: var(--text-secondary);
+    }
+    .didyoumean button {
+        color: #fff;
+        font-weight: 800;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+    .cta {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .hints {
+        margin-top: 8px;
+        font-size: 11.5px;
+        color: var(--text-muted);
+        text-align: left;
+        line-height: 1.6;
+        max-width: 440px;
+    }
+
+    /* ---- skeleton ------------------------------------------------------- */
+    @keyframes shimmer {
+        0% {
+            background-position: -300px 0;
+        }
+        100% {
+            background-position: 300px 0;
+        }
+    }
+    .sk {
+        background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.05),
+            rgba(255, 255, 255, 0.1),
+            rgba(255, 255, 255, 0.05)
+        );
+        background-size: 300px 100%;
+        animation: shimmer 1.1s linear infinite;
+        border-radius: 6px;
+    }
+    /* The skeleton row holds the loaded row's full six-track grid, so the
+       columns do not move when the real rows arrive. */
+    .srow.sk-row {
+        cursor: default;
+        grid-template-columns: 20px 36px 1fr auto auto auto;
+    }
+    .srow.sk-row:hover {
+        background: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .sk {
+            animation: none;
+        }
+    }
+
+    @media (max-width: 1100px) {
+        .cols {
+            grid-template-columns: 1fr;
+        }
+        .inline-list {
+            display: none;
+        }
     }
 </style>