feat(ui): the full-screen now playing a phone needs

Plan 016 B2, phase 2. Phase 1 took the seek bar and the volume out of
the phone's bottom bar -- 4px of height is not a thumb target, and a
phone's volume belongs to its hardware keys -- and promised them a
full-screen view. This is it, reached from a button over the mini
player's cover art.

**It composes the transport rather than reimplementing it.** The same
`seek-bar`, `player-controls` and `volume-control` the desktop bar
uses; a phone layout that copies them is a second transport to fix
every bug in, and the seek bar in particular carries interpolation
rules that took a plan of their own to get right. The seek bar
thickens its own track below the breakpoint, in its own stylesheet,
because the track size lives on a wa-slider inside its shadow root
where a custom property from the host cannot reach.

**It is a detail view, not a primary one.** It is somewhere you go and
come back from, so index.ts pushes the current view and Back pops it --
which is also why it is not a fifth tab: a tab you cannot leave by
pressing it again is not a tab.

Two things came from reading a screenshot rather than from a failing
test, and both were invisible to assertions that were individually
correct.

**The mini player was still under the full-screen view**, repeating it
in 4em of an 844px phone. index.css hides the bottom bar while
`#main-content[data-active-view="now-playing"]`, through `:has()`
rather than a class toggled from index.ts, because the active view is
already published as an attribute. That takes the queue button with it,
so the view carries its own.

**And phase 1's shell rules had never applied.** A media query adds no
specificity, and the phone block sat above the plain rules it meant to
override, so at 390px the header kept its 2em gutters (32px), its 16px
gap and its 24px title, and the bottom bar kept a fixed 320px first
column. Nothing failed: the shell fits because of `min-width: 0` and
each component's own media query, which live in their own stylesheets
and have no later rule to lose to -- so what was dead was exactly the
cosmetic half no assertion looks at. The phone rules are one section at
the end of the file now, and it says why it is last. Measured after:
12px, 8px, 17.6px, `154px 187px 33px`.

frontend/index.css

@@ -41,79 +41,7 @@ body {
     overflow-y: hidden;
 }
 
-/* ---------------------------------------------------------------
-   The phone shell (plan 016 B2).
 
-   600px, not the sidebar's 900: 900 is a *laptop* and the response to
-   it is a narrower sidebar, which is still a sidebar.  Below 600 there
-   is no room for one at all -- 360px of viewport over a 200px nav is
-   not a layout -- so the navigation moves to the bottom, where a thumb
-   is, and the eleven-item list moves into `bottom-nav`'s drawer.
-
-   The grid loses its sidebar column rather than hiding the element in
-   place: a named area with nothing in it still reserves its track.
-   --------------------------------------------------------------- */
-@media (max-width: 599px) {
-    body {
-        grid-template:
-            "top-bar" 3.25em
-            "main-panel" 1fr
-            "bottom-bar" auto
-            "bottom-nav" auto
-            / 1fr;
-        /* Nothing may scroll sideways here.  On a desktop the shell is
-           allowed to overflow a zoomed-in window (a11y.21 above); a
-           phone *is* the small viewport, so the shell has to fit it. */
-        overflow-x: hidden;
-    }
-
-    body div.sidebar {
-        display: none;
-    }
-
-    bottom-nav {
-        grid-area: bottom-nav;
-    }
-
-    /* The 2em gutters are half a thumb each at this width, and the
-       subtitle is already gone from 900 down.
-
-       `min-width: 0` is the load-bearing half. A grid item's implicit
-       minimum is `auto` -- its content -- so a header whose children
-       ask for 580px makes the *body* 580px wide inside a 360px
-       viewport, and `overflow-x: hidden` then hides the right-hand
-       third of the app rather than fitting it. Every box between the
-       viewport and the content that must shrink needs this. */
-    .top-bar {
-        padding-left: 0.75em;
-        padding-right: 0.75em;
-        gap: 0.5em;
-        min-width: 0;
-        overflow: hidden;
-    }
-
-    .content-area,
-    .main-panel,
-    .bottom-bar {
-        min-width: 0;
-    }
-
-    .title {
-        font-size: 1.1em;
-    }
-
-    /* The search box is the one header control worth its width; the
-       library filter is a rarely-changed setting and reachable from
-       the drawer's Settings. */
-    .top-bar library-filter {
-        display: none;
-    }
-
-    .top-bar search-bar {
-        flex: 1 1 auto;
-        min-width: 0;
-    }
-}
 
 /* Above the phone breakpoint the tab bar does not exist.  It is in the
    markup unconditionally and eagerly, for the reason notification-host
@@ -214,20 +142,7 @@ body div.sidebar {
     contain: layout style paint;
 }
 
-/* The transport at phone width: art, title and the controls, with the
-   seek bar and volume dropped by the components that own them.  The
-   desktop's three fixed columns start with a 320px now-playing, which
-   at 360px of viewport leaves the controls 40px. */
-@media (max-width: 599px) {
-    .bottom-bar {
-        grid-template-columns: minmax(0, 1fr) auto auto;
-        gap: 0.25em;
-    }
 
-    .bottom-bar audio-player {
-        margin: 0.25em;
-    }
-}
 
 .bottom-bar {
     grid-area: bottom-bar;
@@ -340,3 +255,110 @@ body div.sidebar {
     pointer-events: none !important;
     contain: strict !important;
 }
+
+
+/* ===================================================================
+   The phone shell (plan 016 B2).
+
+   **This section is last on purpose.** A media query adds no
+   specificity, so `@media (max-width: 599px) { .title { … } }` placed
+   above the plain `.title` rule loses to it -- which is exactly what
+   happened when this landed in the middle of the file: the header kept
+   its 2em gutters, its 16px gap and its 24px title on a 390px phone,
+   and every one of these declarations was dead. Nothing failed,
+   because the shell fits for a different reason (the `min-width: 0`
+   below and each component's own media query), so a screenshot was
+   what caught it.
+
+   600px, not the sidebar's 900: 900 is a *laptop* and the response to
+   it is a narrower sidebar, which is still a sidebar. Below 600 there
+   is no room for one at all -- 360px of viewport over a 200px nav is
+   not a layout -- so the navigation moves to the bottom, where a thumb
+   is, and the eleven-item list moves into `bottom-nav`'s drawer.
+   =================================================================== */
+@media (max-width: 599px) {
+    body {
+        grid-template:
+            "top-bar" 3.25em
+            "main-panel" 1fr
+            "bottom-bar" auto
+            "bottom-nav" auto
+            / 1fr;
+        /* Nothing may scroll sideways here.  On a desktop the shell is
+           allowed to overflow a zoomed-in window (a11y.21 above); a
+           phone *is* the small viewport, so the shell has to fit it. */
+        overflow-x: hidden;
+    }
+
+    body div.sidebar {
+        display: none;
+    }
+
+    bottom-nav {
+        grid-area: bottom-nav;
+    }
+
+    /* The 2em gutters are half a thumb each at this width, and the
+       subtitle is already gone from 900 down.
+
+       `min-width: 0` is the load-bearing half. A grid item's implicit
+       minimum is `auto` -- its content -- so a header whose children
+       ask for 580px makes the *body* 580px wide inside a 360px
+       viewport, and `overflow-x: hidden` then hides the right-hand
+       third of the app rather than fitting it. Every box between the
+       viewport and the content that must shrink needs this. */
+    .top-bar {
+        padding-left: 0.75em;
+        padding-right: 0.75em;
+        gap: 0.5em;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .content-area,
+    .main-panel,
+    .bottom-bar {
+        min-width: 0;
+    }
+
+    .title {
+        font-size: 1.1em;
+    }
+
+    /* The search box is the one header control worth its width; the
+       library filter is a rarely-changed setting and reachable from
+       the drawer's Settings. */
+    .top-bar library-filter {
+        display: none;
+    }
+
+    /* The full-screen now-playing view *is* the transport, so the bar
+       repeating it underneath is 4em of a small screen spent saying
+       the same thing twice -- visible in a screenshot, invisible to
+       every assertion about either one.
+
+       `:has()` rather than a class toggled from index.ts: which view
+       is showing is already published as an attribute, and a second
+       expression of the same fact is a second thing to keep in step.
+       The view carries its own queue button, because this is where
+       that one lived. */
+    body:has(#main-content[data-active-view="now-playing"]) .bottom-bar {
+        display: none;
+    }
+
+    .top-bar search-bar {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+}
+
+@media (max-width: 599px) {
+    .bottom-bar {
+        grid-template-columns: minmax(0, 1fr) auto auto;
+        gap: 0.25em;
+    }
+
+    .bottom-bar audio-player {
+        margin: 0.25em;
+    }
+}