the search panel detaches and frosts: 46px down, blur(40), and the rest of the acrylic recipe

Three rounds with Kyle's eyes on it, one rule each:

DETACH. The dropdown's top edge used to ride the exact line where the
content pane begins ("completely lined up with the main window") — and the
first fix, 38px, left the two edges within 4px, a near-miss that read
sloppier than either aligned or apart. 46px, tuned live over the album
page (38/42/46, OS captures), lands the panel ~9px below the pane line
with a 15px seam of bar under the pill.

FROST, not smoke. Plain rgba(0,0,0,0.72) ghosted the page's display-size
heading through razor-sharp; blur(18) blurred it but left it READABLE — a
blur only defeats text once its radius reaches the glyph scale, and page
headings here are ~40px tall. Now blur(40px) saturate(1.3) contrast(0.85)
over 0.55 smoke: the contrast compression is the other half of why real
acrylic is unreadable.

Why backdrop-filter is legal on THIS surface when the bars had to grow
periscopes: the filter black-flattens only the frost fraction of its
backdrop, and this panel is deliberately dark — where page content sits
behind it the content blurs into proper fog, and where bare frost shows
the flatten lands within a couple points of the plain-smoke look it
replaced. The bars failed because they wanted to SHOW the frost; this
panel wants to bury it.

NOISE + SHEEN. Over the hero's dark side the blur had nothing to re-emit
and the panel sat flat dead next to its lively half ("only half of it
seems fine"). Real acrylic never dies over black because blur is only half
its recipe — a 4.5% monochrome turbulence and a faint top sheen finish it,
so both halves read as one brushed material whatever is behind.

Interior chrome joins the glass vocabulary (hover rows, count pill,
chips, hairlines, SAVED tag, cover placeholders), and the old
keep-menus-opaque call is overridden for this menu alone —
Playlists/Playlist keep theirs.

src/components/TitleBar.svelte

@@ -735,7 +735,14 @@
        (`use:floatScroll`), which is invisible at rest. */
     .suggest {
         position: absolute;
-        top: 30px;
+        /* Detached from the pill on purpose (Kyle, 2026-08-31): the pill's
+           box ends at 31px, so this leaves a 15px seam of bar showing between
+           field and panel instead of the two reading as one welded block —
+           and, the actual complaint, the panel's top edge lands ~9px BELOW
+           the content pane's top line instead of riding the same rule (38px
+           put the two edges within 4px and read as accidental alignment;
+           tuned live over the album page, 38/42/46, OS shots). */
+        top: 46px;
         left: -70px;
         right: -70px;
         display: flex;
@@ -1033,8 +1040,76 @@
     :global(:root.glass) .kb {
         background: var(--glass-hover);
     }
-    /* The suggestions dropdown and everything inside it stay OPAQUE on
+    /* The suggestions dropdown under glass (Kyle, 2026-08-31 — overriding
-       purpose — it is a menu, and a menu has to stay readable over whatever
+       the earlier keep-menus-opaque call for THIS menu; Playlists/Playlist
-       page it lands on. Same call as Playlists/Playlist, and the Settings
+       keep theirs): dark FROSTED glass — real backdrop-filter plus a lighter
-       copy for this mode says so out loud. */
+       smoke. Plain smoke alone shipped first and Kyle bounced it ("full
+       transparent, not acrylic/blurred"): the page heading ghosted through
+       razor-sharp.
+
+       Why this surface may use backdrop-filter when the bars could not (the
+       black-flatten trap, see NowPlaying's head-periscope note): the filter
+       black-flattens only the FROST fraction of its backdrop, and this panel
+       is deliberately dark. Where page content sits behind it — the usual
+       case at the top of a page — the content blurs properly into fog;
+       where bare frost shows, the flatten just lands within a couple points
+       of the plain-smoke look this replaces (~0.92 black net), i.e. the
+       failure mode IS the previous design, not a visible slab. The bars
+       failed because they wanted to SHOW the frost; this panel wants to
+       bury it. */
+    /* blur(40): the first cut shipped blur(18) and Kyle could still READ the
+       album page's display-size heading through it — a blur only defeats
+       text once its radius reaches the glyph scale, and page headings here
+       are ~40px tall. contrast(0.85) compresses what survives (real acrylic
+       flattens contrast too; that is half of why you cannot read through
+       it). Tuned live over the artist page, 40/0.85/0.55 vs 56/0.78/0.6 —
+       the heavier mix read deader, not frostier.
+
+       The NOISE + SHEEN layers are the rest of the Windows acrylic recipe,
+       and they are what keeps the panel from reading as two materials
+       (Kyle, 2026-08-31: "only half of it seems fine"). The filter can only
+       re-emit light the page gives it: over the hero's bright side the fog
+       glows, over its dark side blur has nothing to show and the panel sat
+       flat dead — and on unpainted pages the frost fraction black-flattens
+       to the same flatness. Real acrylic never goes dead over black because
+       it composites a noise texture and tint over the blur; the fine
+       monochrome turbulence (4.5%) and the faint top sheen do that here, so
+       both halves read as one brushed material whatever is behind. */
+    :global(:root.glass) .suggest {
+        background-color: rgba(0, 0, 0, 0.55);
+        background-image:
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
+            linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0.055),
+                rgba(255, 255, 255, 0.015) 34%,
+                rgba(255, 255, 255, 0) 62%
+            );
+        backdrop-filter: blur(40px) saturate(1.3) contrast(0.85);
+        -webkit-backdrop-filter: blur(40px) saturate(1.3) contrast(0.85);
+        box-shadow:
+            var(--glass-ring),
+            0 10px 32px rgba(0, 0, 0, 0.55);
+    }
+    /* Interior chrome joins the white-veil glass vocabulary; the solid
+       tokens it uses otherwise are opaque and would float as mini-slabs on
+       the smoked sheet. */
+    :global(:root.glass) .sg:hover,
+    :global(:root.glass) .sg.on,
+    :global(:root.glass) .sg-h .c,
+    :global(:root.glass) .sg img,
+    :global(:root.glass) .sg-img,
+    :global(:root.glass) .rc {
+        background: var(--glass-hover);
+    }
+    :global(:root.glass) .rc:hover,
+    :global(:root.glass) .own {
+        background: var(--glass-press);
+    }
+    :global(:root.glass) .sg-h .line {
+        background: var(--glass-hairline);
+    }
+    :global(:root.glass) .sg-ft {
+        border-top-color: var(--glass-hairline);
+    }
 </style>