android: the page ends at the clock — the bars go, the hero keeps the top edge

The bar was anonymous until you scrolled, then faded in carrying the title the
page already had in 27px type two centimetres below it. Kyle's rule for what
replaces it: the page is cut off where it meets the Android status bar and
dissolves there, and — the part that decides the whole shape of this —
**backgrounds may pass under the clock, words may not**.

A mask on the scroller cannot tell a photograph from a sentence. It takes both.
So the artist hero is painted twice: the page's own copy inside the masked
scroller, cut away in that band with everything else, and a second copy behind
the scroller (heroart.svelte.js), unmasked, showing through exactly where the
mask took the first one away. Same image, same box, same focal point, same
scale, offset by the same scroll — one picture to the eye, and only the name
dissolves. The second copy carries `overflow: hidden` for the same reason .hero
does: without it the 1.04 scale renders 268px in a 258px box and five pixels of
photograph appear under the hero's foot, below the black the scrim fades to.

That also retires an attempt that did not survive contact. The mask first
stepped aside for the hero on a scroll-driven `--fade-on`, which meant
rebuilding a mask-image on the scroller every frame; measured at 60 Hz median
and p90 either way, but it is work for nothing, and the flip that replaced it
put the artist's name out of existence in one step. With the photograph
protected by being OUTSIDE the mask, neither is needed: the mask is a constant
and nothing recomputes it.

No page has a bar now. A tab page's ⋯ — which is the app's own menu, the queue
and the sleep timer and Settings — moved beside that page's own large title in
`.phead`; Search and You grew the row they did not have, Community kept the one
it had. A pushed page floats a back chevron and a ⋯ over the page instead, on
flat discs with no backdrop blur, because the bar's own note records what three
blurred bands did to a 60 Hz scroll on the Pixel 6a and these would have been a
fourth.

Three numbers now come from one place. `--chrome-d` and `--chrome-gap` are the
disc and its margin; `.screen.has-chrome` reserves exactly that much at the top
of a pushed page, and `--fade-top` reaches exactly the chrome's foot. They were
independent for one build and it showed immediately: the page began underneath
its own buttons, so "Transfers" sat behind the back chevron before you had
scrolled at all, and the fade stopped 17px short of the discs so they stood on
crisp text and a record's floating ⋯ landed on a track row's own ⋯.

The walk followed. Nineteen steps reached a page's overflow through
`.gbar .iconbtn`, which now matches nothing: the four on a tab page go to
`.phead .iconbtn.muted`, the rest to `.fchrome.more`, and the album's back
chevron to `.fchrome.back`. The `title` field read the bar's own text, which is
a worse source than it looks — it only existed when chrome happened to be
drawn. The screen carries its meta as data attributes now and the three probes
read those, spelled exactly as `.gb-t`'s textContent was (the title, then the
kicker when it differs) so every expectation written against it still holds.

Checked on the device rather than argued: no `.gbar` and no `.gb-t` anywhere,
`.phead .iconbtn.muted` present on all four tab pages and opening "SoulStream ·
Queue · Sleep timer · Settings", both `.fchrome` controls present on a record,
and the title probe answering "Random Access MemoriesDaft Punk".

One thing this leaves, and it is a real cost rather than an oversight: a tab
page's ⋯ scrolls away with its header. The bar used to carry it the whole way
down, so on Home the sleep timer now wants a scroll back to the top.

src/mobile/Mobile.svelte

@@ -16,6 +16,7 @@
     import Sheet from "./Sheet.svelte";
     import HalfSheet from "./HalfSheet.svelte";
     import Viewer from "./Viewer.svelte";
+    import { heroArt } from "./heroart.svelte.js";
     import SyncRoom from "./SyncRoom.svelte";
     import Home from "./screens/Home.svelte";
     import Search from "./screens/Search.svelte";
@@ -121,6 +122,10 @@
        reading. A pushed page has one because it carries the back chevron,
        and it is static — there and titled from the first frame. */
     const showBar = $derived(!root);
+    /* A hero page paints its picture a second time behind the scroller
+       (heroart.svelte.js): the mask cuts the page where it meets the clock,
+       and that copy fills the cut back in — so the photograph passes under
+       the status bar and the name does not. The mask itself never moves. */
     const playing = $derived(player.status === "playing" || player.status === "buffering");
     const played = $derived(player.duration ? Math.min(1, player.position / player.duration) : 0);
 
@@ -334,10 +339,18 @@
 
     <div class="pane">
         <div class="viewport">
+            {#if meta.hero && heroArt.src}
+                <div class="hero-behind" aria-hidden="true" style:--hero-shift="{-scrolled}px">
+                    <i style:background-image={`url("${heroArt.src}")`}></i>
+                </div>
+                <div class="hero-wash" aria-hidden="true"></div>
+            {/if}
             {#key nav.seq}
                 <div
                     class="screen tr-{nav.tr} stagger"
-                    class:under-bar={!root && !meta.hero && !meta.flush}
+                    class:has-chrome={!root && !meta.hero && !meta.flush}
+                    data-title={meta.title}
+                    data-kicker={meta.kicker && meta.kicker !== meta.title ? meta.kicker : ""}
                     class:has-hero={meta.hero}
                     bind:this={screenEl}
                     onscroll={(e) => { scrolled = e.currentTarget.scrollTop; }}
@@ -383,14 +396,11 @@
             {/key}
         </div>
 
-        <!-- the bar a pushed page carries: back, the title, and the page's ⋯.
-             A tab page has none — see showBar. -->
+        <!-- no bar on any screen. A pushed page floats its two controls over
+             the page instead; the title is the page's own, in 27px type. -->
         {#if showBar}
-            <div class="gbar">
-                <button class="iconbtn" onclick={back} aria-label="Back"><Icon name="chevron-left" size={24} /></button>
-                <span class="gb-t">{meta.title}{#if meta.kicker && meta.kicker !== meta.title}<small>{meta.kicker}</small>{/if}</span>
-                <button class="iconbtn muted" onclick={() => openHalf("more")} aria-label="More"><Icon name="more" size={21} /></button>
-            </div>
+            <button class="fchrome back" onclick={back} aria-label="Back"><Icon name="chevron-left" size={24} /></button>
+            <button class="fchrome more" onclick={() => openHalf("more")} aria-label="More"><Icon name="more" size={21} /></button>
         {/if}
     </div>
 

src/mobile/heroart.svelte.js

@@ -0,0 +1,12 @@
+/* The artist hero's picture, published for the copy that lives BEHIND the
+   scroller.
+
+   The page meets the Android status bar and is cut off there — but the rule is
+   that backgrounds may pass under the clock and words may not, and a mask on
+   the scroller cannot tell a photograph from a sentence: it takes both. So the
+   hero is painted twice. The page's own copy is inside the masked scroller and
+   is cut away in that band along with everything else; this one sits behind
+   the scroller, unmasked, and shows through exactly where the mask took the
+   first copy away. Same image, same box, same scale, offset by the same
+   scroll — so the two are one picture, and only the name dissolves. */
+export const heroArt = $state({ src: "" });

src/mobile/mobile.css

@@ -62,6 +62,16 @@
     --inset-left: env(safe-area-inset-left, 0px);
     --inset-right: env(safe-area-inset-right, 0px);
     --top-h: calc(var(--bar-h) + var(--inset-top));
+    /* The floating chrome a pushed page carries: a 38px disc, 6px below the
+       status bar. Both the reserve at the top of a page and the fade are
+       measured from these, so none of the three can drift apart. */
+    --chrome-d: 38px;
+    --chrome-gap: 6px;
+    /* How far the page takes to disappear where it meets the status bar.
+       It has to reach the FOOT of the chrome: any shallower and the chevron
+       and the ⋯ stand on crisp text, which is how the page's ⋯ came to sit
+       on a track row's own ⋯. Two extra pixels so it finishes just clear. */
+    --fade-top: calc(var(--chrome-gap) + var(--chrome-d) + 2px);
 
     /* ── motion: real springs, sampled ────────────────────────────────────
        Material 3 Expressive specifies motion as springs; CSS takes a sampled

src/mobile/screens/Artist.svelte

@@ -17,6 +17,7 @@
     import { openUrl } from "@tauri-apps/plugin-opener";
     import { albumsBy, tracksOf, isFollowed, toggleFollow } from "../lib.svelte.js";
     import { art, wantArt } from "../art.svelte.js";
+    import { heroArt } from "../heroart.svelte.js";
     import { player, playEntries, playAlbum } from "../player.svelte.js";
     import { push, openHalf } from "../nav.svelte.js";
     import { catalog, lookupArtist, artistKey, fans, yearOf, looseTitle, loadExtras, loadPopular, loadHeroSeed, loadOverview, picture } from "../catalog.svelte.js";
@@ -78,6 +79,8 @@
     $effect(() => { const id = artistId; if (id != null) untrack(() => { loadPopular(id); loadHeroSeed(id); loadOverview(id); }); });
     const seedSrc = $derived(seedPath ? art[seedPath] : "");
     const heroSrc = $derived(heroUrl ? art[heroUrl] : "");
+    /* the copy behind the scroller, which is the one allowed under the clock */
+    $effect(() => { heroArt.src = heroSrc || seedSrc || ""; return () => { heroArt.src = ""; }; });
     const extras = $derived(artistId != null ? catalog.extras[artistId] ?? null : null);
     const socials = $derived(page?.socials?.length ? page.socials : (extras?.socials ?? []));
 

src/mobile/shell.css

@@ -83,11 +83,17 @@
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
     padding-top: var(--inset-top);
+    /* The page is cut off at the status bar: it fades out into the ground
+       over --fade-top rather than sliding under the clock. Pinned to the
+       scroller's box, not to its content, so it never moves and costs no
+       layout — and at rest it hides nothing, because padding-top has
+       already put the first pixel below it. */
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--inset-top), #000 calc(var(--inset-top) + var(--fade-top)), #000 100%);
+    mask-image: linear-gradient(to bottom, transparent 0, transparent var(--inset-top), #000 calc(var(--inset-top) + var(--fade-top)), #000 100%);
 }
 .screen::-webkit-scrollbar { width: 0; display: none; }
 /* a pushed screen whose content starts at the very top must clear the bar;
    heroes bleed behind it and the record head has its own clearance */
-.screen.under-bar { padding-top: var(--top-h); }
 /* the pad that clears the mini player + nav bar */
 .endpad { height: calc(var(--nav-h) + var(--inset-bottom) + 24px); }
 .has-mini .endpad { height: calc(var(--mini-h) + var(--nav-h) + var(--inset-bottom) + 16px); }
@@ -98,47 +104,28 @@
    and no room for a hierarchy trail, so the trail collapses to a KICKER
    under the title, and the arrows to one chevron that only appears when
    there is somewhere to go back to. It runs up under the status bar. */
-.gbar {
+/* The chrome a pushed page carries once the bar is gone: a back chevron and
+   the page's ⋯, floating over the artwork with nothing behind them but their
+   own disc. No backdrop blur — the bar's own note measured what three blurred
+   bands did to a scroll on the Pixel 6a, and these would be a fourth. */
+.fchrome {
     position: absolute;
-    top: 0; left: 0; right: 0;
-    z-index: 40;
-    height: var(--top-h);
-    padding: var(--inset-top) 8px 0 6px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    /* SOLID by default on the phone. The desktop's glass — the 28% tint over
-       a 12px backdrop blur — was measured on the Pixel 6a (tests/mobile/
-       perf.mjs): every backdrop blur re-blurs its band on every frame that
-       scrolls or animates under it, and the three of them (this bar, the mini
-       bar, the nav) turned a 60 Hz scroll into 30 Hz and dropped every other
-       frame of the player's opening. The blur is a switch (You → Appearance →
-       Glass) so the two can be compared; the design was built to stand on
-       the solid floor first. */
-    background: rgba(18, 18, 22, 0.92);
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-html[data-glass="blur"] .gbar { background: rgba(20, 20, 24, 0.28); backdrop-filter: blur(12px) saturate(1.7); -webkit-backdrop-filter: blur(12px) saturate(1.7); }
-html[data-material="solid"] .gbar { background: rgba(24, 24, 24, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
-.gbar .gb-t {
-    font-size: 15px;
-    font-weight: 800;
-    letter-spacing: -0.2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-    flex: 1;
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
-}
-.gbar .gb-t small {
-    display: block;
-    font-size: 10.5px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.55);
-    letter-spacing: 0.2px;
-    margin-top: -1px;
+    top: calc(var(--inset-top) + var(--chrome-gap));
+    z-index: 45;
+    width: var(--chrome-d);
+    height: var(--chrome-d);
+    padding: 0;
+    border: 0;
+    border-radius: var(--r-pill);
+    display: grid;
+    place-items: center;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.46);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.35);
 }
+.fchrome:active { background: rgba(0, 0, 0, 0.62); }
+.fchrome.back { left: calc(10px + var(--inset-left)); }
+.fchrome.more { right: calc(10px + var(--inset-right)); color: rgba(255, 255, 255, 0.82); }
 
 /* the round chrome button — the desktop bar's .arrow at touch size */
 .iconbtn {
@@ -568,8 +555,8 @@ html[data-material="solid"] .card, html[data-material="solid"] .group { backgrou
 /* ── the artist hero ──────────────────────────────────────────────────────
    The desktop hero is a wide banner beside the identity block. A phone has
    no beside, so the portrait goes full-bleed and the name sits ON it. */
-.hero { position: relative; height: 300px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: -6px; }
-.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center 22%; transform: scale(1.04); }
+.hero { position: relative; height: 258px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: -6px; }
+.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center 24%; transform: scale(1.04); }
 /* the blurred SEED: the picture the library already has, soft and
    oversized, until a sharp one exists */
 .hero-img.seed { filter: blur(16px) saturate(1.15); transform: scale(1.12); }
@@ -579,6 +566,43 @@ html[data-material="solid"] .card, html[data-material="solid"] .group { backgrou
     from { opacity: 0; filter: blur(16px) saturate(1.15); transform: scale(1.12); }
     to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.04); }
 }
+/* The hero's picture again, behind the scroller and outside its mask, so the
+   photograph is allowed under the clock while the words are not. Its geometry
+   has to match .hero/.hero-img exactly — 258px tall, the same 24% focal point,
+   the same 1.04 scale — or the seam shows. */
+.hero-behind {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 258px;
+    z-index: 0;
+    pointer-events: none;
+    /* the clip .hero gives its own picture; without it the 1.04 below renders
+       268px in a 258px box and five pixels of photograph appear under the
+       hero's foot, below the black the scrim fades to */
+    overflow: hidden;
+    transform: translateY(var(--hero-shift, 0px));
+}
+.hero-behind i {
+    position: absolute;
+    inset: 0;
+    display: block;
+    background-size: cover;
+    background-position: center 24%;
+    transform: scale(1.04);
+}
+/* the clock's own backing, pinned where the clock is rather than to the photo */
+.hero-wash {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: calc(var(--inset-top) + 26px);
+    z-index: 2;
+    pointer-events: none;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.47), transparent);
+}
 .hero-scrim {
     position: absolute;
     inset: 0;
@@ -1207,6 +1231,12 @@ html[data-material="solid"] .peer { background: var(--bg-elevated); box-shadow:
 .countline { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad) 10px; }
 /* a hero bleeds up under the status bar; the scrim keeps the chrome legible */
 .screen.has-hero { padding-top: 0; }
+/* A pushed page starts BELOW the floating chevron and ⋯, or its first line is
+   under a button — which is what the bar's own padding used to prevent. Sized
+   to the chrome that is there now: the inset, its 6px of top margin, the 38px
+   disc, and 8px of air under it. A hero page is the exception and keeps none,
+   because its photograph is meant to be behind them. */
+.screen.has-chrome { padding-top: calc(var(--inset-top) + var(--chrome-gap) + var(--chrome-d) + 8px); }
 /* not a stray: `.lane` is width: 100%, and the mini bar's lane is ALSO
    positioned with both left: 16px and right: 16px — an over-constrained
    absolute box drops `right`, so without this it comes out 32px wider than
@@ -1434,7 +1464,6 @@ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="
    left/right and .toast's left/right to win at equal specificity. */
 
 /* the side insets: the cutout and the gesture pill, from the edges */
-.gbar { padding-left: calc(6px + var(--inset-left)); padding-right: calc(8px + var(--inset-right)); }
 .nav { padding-left: var(--inset-left); padding-right: var(--inset-right); }
 .mini { left: calc(8px + var(--inset-left)); right: calc(8px + var(--inset-right)); }
 .screen { padding-left: var(--inset-left); padding-right: var(--inset-right); }