From db10bfbbca274f3a2db0c96adbac45a1a2540e4f Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 25 Sep 2026 00:05:31 +0200
Subject: [PATCH] feat(design): the header search is a 40 glass pill; a wrapper
 field dims for its input only (E28 S3c)

---
 docs/DESIGN.md                                |  6 +++-
 frontend/src/components/PlexPlayer.tsx        |  6 ++--
 frontend/src/components/PlexSearchBox.tsx     |  2 +-
 frontend/src/components/SearchBar.tsx         | 19 ++++++++----
 frontend/src/components/UpNextCard.tsx        |  4 +--
 frontend/src/components/VideoCard.tsx         |  6 ++--
 frontend/src/components/VideoInfoCard.tsx     |  6 ++--
 .../src/components/plexPlayerControls.tsx     |  2 +-
 frontend/src/components/ui/Button.tsx         | 12 ++++----
 frontend/src/components/ui/CommandPalette.tsx |  4 +--
 frontend/src/components/ui/IconButton.tsx     | 11 +++----
 frontend/src/components/ui/Input.dom.test.tsx | 10 +++++++
 frontend/src/components/ui/fieldStyles.ts     | 29 ++++++++++++++-----
 13 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index b8c8c232..0a235778 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -112,7 +112,8 @@ The chosen rendering of each rule is in the lab under "Decided". The primitives
   the same 28, so the row lines up. Nothing goes under 24 (WCAG 2.5.8); touch grows it to 44 (A3).
 - **Icon buttons (A2):** two sizes (28 / 32), r8: the smaller in rows and dense toolbars, the larger on its own. On a
   picture, a round, dark translucent button, readable on any thumbnail. Round means "floats over something":
-  on media, or the one floating button over the page (back to top, a 48 glass circle, the FAB). A text
+  on media, or the one floating button over the page (back to top, a 48 glass circle, the FAB); a button
+  inside a pill field is round too, so the radii nest. A text
   button on a picture is a pill (the card's Resume in the accent, From the start dark translucent, C5), and
   the one 48px glyph is the Play in the middle of a not-started card (C5).
 - **Touch (A3):** on a coarse pointer every control primitive (`Button`, `SegmentedToggle`, `FilterSelect`,
@@ -123,6 +124,8 @@ The chosen rendering of each rule is in the lab under "Decided". The primitives
   `color-mix(in srgb, var(--fg) 55%, var(--bg))`, ≥ 3:1 against the page in every scheme and mode; focus
   turns it into a 2px accent edge, `invalid` into the danger edge. A form field is r8 at the `md` height
   (32); a toolbar search, a field in a popover or an inline rename is `sm` (28), the toolbar search a pill;
+  the page's one hero field is `lg` (40): the header search, a glass pill floating over the page (the
+  YouTube/Gmail shape), and the command palette's field;
   a field in a table row or the pager `xs` (24); an inline rename of a page title keeps the heading's type
   (`heading`). Text is 1rem and the box 44 on a coarse pointer. [WCAG 1.4.11]
 - **Dropdown trigger (A5):** `ui/SelectTrigger`. A pill in a toolbar (where the pill means "a filter or a
@@ -335,5 +338,6 @@ Wherever there is text, the user can select it and copy it, and no click action
 | 2026-09-24 | Glass tuner                 | Retired; the schemes are the only colour choice                                                                                                                    | Keep it with ranges clamped to the rules                                                              | Free tuning is the drift the constitution exists to stop (owner)                                                                                                     |
 | 2026-09-24 | Matrix toned down           | Moss #86a05a at Midnight's lightness, near-neutral greys; every white-on-accent part → `--accent-fg`                                                               | The B2 lime #a3e635                                                                                   | The owner found the lime neon and tiring; it was the loudest accent (L 0.85, C 0.21), and fixed white parts sat on it at 1.5:1                                       |
 | 2026-09-24 | Field primitives            | `Input` / `Textarea` / `InnerInput` + `fieldClass`, `SelectTrigger`, the native controls; the lint rule "no raw `<input>`"                                         | `inputCls` and ~40 hand-styled boxes                                                                  | Six edges, four radii and two focus looks for one control; the ≥ 3:1 edge held nowhere                                                                               |
+| 2026-09-25 | Header search               | A 40 glass pill with the field edge (`lg`); what sits inside it is round                                                                                           | 44, r16, a glass box with a faint edge                                                                | The one rounded box among pills, and its edge under 3:1; the hero search is the YouTube/Gmail pill                                                                   |
 | 2026-09-24 | Chip family                 | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/"                           | Five chip geometries in five files                                                                    | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide                            |
 | 2026-09-24 | Button families             | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5)                                       | Every button hand-painted                                                                             | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it                                                   |
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx
index f869c1d9..9b0324ef 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/components/PlexPlayer.tsx
@@ -1237,7 +1237,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
           <IconButton
             variant="overlay"
             size="player"
-            onMedia
+            round
             onClick={handleBack}
             label={t("plex.player.back")}
           >
@@ -1485,7 +1485,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                 <IconButton
                   variant="overlay"
                   size="player"
-                  onMedia
+                  round
                   ref={tracksTriggerRef}
                   onClick={() => setTracksOpen((o) => !o)}
                   aria-expanded={tracksOpen}
@@ -1555,7 +1555,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                 <IconButton
                   variant="overlay"
                   size="player"
-                  onMedia
+                  round
                   ref={menuTriggerRef}
                   onClick={() => setMenuOpen((o) => !o)}
                   aria-expanded={menuOpen}
diff --git a/frontend/src/components/PlexSearchBox.tsx b/frontend/src/components/PlexSearchBox.tsx
index 5f757fef..28a156a6 100644
--- a/frontend/src/components/PlexSearchBox.tsx
+++ b/frontend/src/components/PlexSearchBox.tsx
@@ -118,7 +118,7 @@ export default function PlexSearchBox() {
       leading={
         <ActionMenu
           ariaLabel={t("plex.searchField.aria")}
-          className="min-w-0 shrink inline-flex items-center gap-1 rounded-lg px-2 h-7 text-xs font-medium text-muted transition hover:text-fg hover:bg-border/50"
+          className="min-w-0 shrink inline-flex items-center gap-1 rounded-full px-2 h-7 text-xs font-medium text-muted transition hover:text-fg hover:bg-border/50"
           trigger={
             <>
               <span className="min-w-0 max-w-28 truncate">{pillLabel}</span>
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index bc7ddf3e..c19207a9 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import {
   useRef,
   type FocusEventHandler,
@@ -12,10 +13,12 @@ import { PaletteKeycap } from "./PaletteLauncher";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import { InnerInput } from "./ui/Input";
+import { fieldClass } from "./ui/fieldStyles";
 
 // The floating search pill in the top header. One component for every module that searches
-// (feed, Plex, channels, playlists): a glass rounded box with a search icon, the input, a
-// clear button, and a "Go" trigger (Enter also fires it). The feed passes its live-YouTube
+// (feed, Plex, channels, playlists): a 40px glass pill with the A4 field edge (the page's one hero
+// field, the YouTube/Gmail shape), holding a search icon, the input, a clear button and a "Go"
+// trigger (Enter also fires it). What sits inside the pill is round too, so the radii nest. The feed passes its live-YouTube
 // escalation as the Go action; the other modules filter as you type and Go just commits/blurs.
 //
 // Optional slots keep the box reusable while letting one module enrich it: `leading` replaces the
@@ -72,10 +75,15 @@ export default function SearchBar({
   // small pills (module name + Plex scope toggle / feed sync chip) share the line above it.
   return (
     <div className="pointer-events-auto relative flex-1 min-w-0 max-w-xl @min-[420px]/appmain:min-w-[15rem] @max-[640px]/appmain:order-last @max-[640px]/appmain:basis-full">
-      <div className="h-11 pl-3 pr-2 rounded-2xl glass-menu flex items-center gap-2 focus-within:outline-2 focus-within:outline-accent/60 focus-within:outline-offset-2">
+      {/* `free` + its own padding: the Go button sits 6px in from the pill's end, not a field's 12. */}
+      <div
+        className={clsx(
+          fieldClass({ size: "free", pill: true, floating: true }),
+          "flex h-10 items-center gap-2 pr-1.5 pl-3 text-sm pointer-coarse:text-base",
+        )}
+      >
         {leading ?? <Search className="w-4 h-4 shrink-0 text-muted" />}
         <InnerInput
-          className="text-sm"
           {...inputProps}
           ref={inputRef}
           value={value}
@@ -94,7 +102,7 @@ export default function SearchBar({
           placeholder={placeholder}
         />
         {value && (
-          <IconButton onClick={() => onChange("")} label={t("header.clearSearch")}>
+          <IconButton round onClick={() => onChange("")} label={t("header.clearSearch")}>
             <X />
           </IconButton>
         )}
@@ -102,6 +110,7 @@ export default function SearchBar({
         {onGo && (
           <Button
             size="sm"
+            round
             onClick={fire}
             disabled={goDisabled}
             title={goTitle ?? goLabel ?? t("header.goTip")}
diff --git a/frontend/src/components/UpNextCard.tsx b/frontend/src/components/UpNextCard.tsx
index 720285fd..abc0b747 100644
--- a/frontend/src/components/UpNextCard.tsx
+++ b/frontend/src/components/UpNextCard.tsx
@@ -86,7 +86,7 @@ export function UpNextCard({
         <div className="truncate text-sm font-semibold leading-tight">{heading || "…"}</div>
         {sub && <div className="truncate text-xs text-white/60">{sub}</div>}
         <div className="mt-auto flex items-center gap-2 pt-2.5">
-          <Button size="sm" onMedia onClick={onAdvance} className="text-xs font-semibold">
+          <Button size="sm" round onClick={onAdvance} className="text-xs font-semibold">
             <span className="relative grid h-5.5 w-5.5 flex-none place-items-center">
               <svg viewBox="0 0 24 24" className="absolute inset-0 -rotate-90">
                 <circle
@@ -117,7 +117,7 @@ export function UpNextCard({
           <Button
             variant="overlay"
             size="sm"
-            onMedia
+            round
             onClick={onCancel}
             className="border border-white/25 text-xs"
           >
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index 0eb9258c..20470938 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -280,7 +280,7 @@ function Thumb({
                 <IconButton
                   variant="primary"
                   size="md"
-                  onMedia
+                  round
                   onClick={open(null)}
                   label={t("card.continue")}
                   title={t("card.continueTitle")}
@@ -290,7 +290,7 @@ function Thumb({
               ) : (
                 <Button
                   size="sm"
-                  onMedia
+                  round
                   onClick={open(null)}
                   title={t("card.continueTitle")}
                   icon={<Play className="fill-current" />}
@@ -335,7 +335,7 @@ function Thumb({
       {/* Hover infobox trigger (E8·S3), docked bottom-left so it clears the centered play overlay, the
           corner badges (saved / stream, top corners) and the duration (bottom-right). Revealed with the
           rest of the hover chrome, dropped on touch. */}
-      <VideoInfoCard video={video} onMedia className={INFO_OVERLAY} />
+      <VideoInfoCard video={video} round className={INFO_OVERLAY} />
       {/* Resume progress bar (sits at the very bottom, under the duration badge). */}
       {pct > 0 && (
         <div className="absolute bottom-0 left-0 right-0 h-1 bg-black/40">
diff --git a/frontend/src/components/VideoInfoCard.tsx b/frontend/src/components/VideoInfoCard.tsx
index 1433609d..d8459d38 100644
--- a/frontend/src/components/VideoInfoCard.tsx
+++ b/frontend/src/components/VideoInfoCard.tsx
@@ -32,12 +32,12 @@ import { IconButton } from "./ui/IconButton";
 // so the trigger deliberately lives OUTSIDE it.
 export default function VideoInfoCard({
   video,
-  onMedia = false,
+  round = false,
   className,
 }: {
   video: Video;
   /** The trigger sits on the thumbnail: the round, dark translucent IconButton (A2). */
-  onMedia?: boolean;
+  round?: boolean;
   /** Trigger placement + hover-reveal. The reveal/touch-suppression rules live with the host, which
    *  knows its surface (overlay vs inline); the skin is the IconButton's. */
   className?: string;
@@ -95,7 +95,7 @@ export default function VideoInfoCard({
   return (
     <>
       <IconButton
-        variant={onMedia ? "media" : "ghost"}
+        variant={round ? "media" : "ghost"}
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         // The overlay trigger sits inside the thumbnail's <a> (like the play buttons), so a click must
diff --git a/frontend/src/components/plexPlayerControls.tsx b/frontend/src/components/plexPlayerControls.tsx
index 00c7f190..d7e1938b 100644
--- a/frontend/src/components/plexPlayerControls.tsx
+++ b/frontend/src/components/plexPlayerControls.tsx
@@ -138,7 +138,7 @@ export function Ctrl({
       <IconButton
         variant="overlay"
         size="player"
-        onMedia
+        round
         noTitle
         onClick={onClick}
         disabled={disabled}
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 72cd7dfb..0bb410d9 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -69,7 +69,8 @@ const PRESSED =
 // B1, the whole ladder: explicit heights, so a toolbar's `sm` button, search pill, dropdown trigger and
 // small icon button all line up at 28. A call site picks a rung; it does not invent one. rem-derived, so
 // the Settings text-size slider (--font-scale) grows the box with the label. A1: r8 on every rung; a
-// button on a picture is a pill instead (A2: round means "on media", and nothing else).
+// button on a picture, or nested in a pill (the header search's Go), is a pill instead (A2: round
+// means "floats over something", and a pill's inner button follows its radius).
 const SIZES: Record<ButtonSize, string> = {
   xs: "h-6 px-2 text-xs gap-1 whitespace-nowrap",
   sm: "h-7 px-2.5 text-sm gap-1.5 whitespace-nowrap",
@@ -97,8 +98,9 @@ interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   /** A toggle: sets aria-pressed and paints the pressed state (the solid accent). */
   pressed?: boolean;
-  /** Sits on a picture (a thumbnail, a poster): the pill shape. Implied by the `media` variant. */
-  onMedia?: boolean;
+  /** Sits on a picture (a thumbnail, a poster) or inside a pill field: the pill shape. Implied by the
+   *  `media` variant. */
+  round?: boolean;
   fullWidth?: boolean;
 }
 
@@ -119,7 +121,7 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonOwnProps>(function Button
     label,
     loading = false,
     pressed,
-    onMedia = false,
+    round = false,
     fullWidth = false,
     className,
     children,
@@ -158,7 +160,7 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonOwnProps>(function Button
         VARIANTS[variant],
         pressed !== undefined && PRESSED,
         SIZES[resolvedSize],
-        resolvedSize !== "none" && (onMedia || variant === "media" ? "rounded-full" : "rounded-lg"),
+        resolvedSize !== "none" && (round || variant === "media" ? "rounded-full" : "rounded-lg"),
         touchTarget && "touch-target",
         fullWidth && "w-full",
         className,
diff --git a/frontend/src/components/ui/CommandPalette.tsx b/frontend/src/components/ui/CommandPalette.tsx
index 29751e2f..db0aff29 100644
--- a/frontend/src/components/ui/CommandPalette.tsx
+++ b/frontend/src/components/ui/CommandPalette.tsx
@@ -194,9 +194,7 @@ function CommandPaletteBody({ onClose, groups }: { onClose: () => void; groups:
 
   return (
     <Modal title={t("palette.title")} onClose={onClose} maxWidth="max-w-xl" placement="top">
-      <div
-        className={clsx(fieldClass({ size: "free" }), "flex h-10 items-center gap-2 px-3 text-sm")}
-      >
+      <div className={clsx(fieldClass({ size: "lg" }), "flex items-center gap-2")}>
         <Search className="w-4 h-4 shrink-0 text-muted" />
         <InnerInput
           autoFocus
diff --git a/frontend/src/components/ui/IconButton.tsx b/frontend/src/components/ui/IconButton.tsx
index 5b670bd9..499a7b42 100644
--- a/frontend/src/components/ui/IconButton.tsx
+++ b/frontend/src/components/ui/IconButton.tsx
@@ -6,7 +6,8 @@ import { FocusSafeButton } from "./FocusSafeButton";
 
 // A button that is only a glyph (docs/DESIGN.md A2): two sizes, r8, and a name it cannot ship without
 // (`label` is required: it is the accessible name and the tooltip). On a picture it is round and dark
-// translucent (`media`), readable on any thumbnail; round means "on media" and nothing else. The glyph
+// translucent (`media`), readable on any thumbnail; round means "floats over something" (media, or a
+// pill field it sits inside — `round`), and nothing else. The glyph
 // is sized here, so a row of them never mixes 14 and 16px icons.
 
 type IconButtonVariant =
@@ -67,8 +68,8 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
   size?: IconButtonSize;
   /** A toggle: sets aria-pressed and tints the glyph with the accent. */
   pressed?: boolean;
-  /** Sits on a picture: round (A2). Implied by the `media` variant. */
-  onMedia?: boolean;
+  /** Sits on a picture or inside a pill field: round (A2). Implied by the `media` variant. */
+  round?: boolean;
   /** Busy: a spinner replaces the glyph, and the button is unavailable without losing the focus. */
   loading?: boolean;
   /** Leave the tooltip to a richer one the caller renders (a `Tooltip` around the button). */
@@ -82,7 +83,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
     variant = "ghost",
     size = "sm",
     pressed,
-    onMedia = false,
+    round = false,
     loading = false,
     noTitle = false,
     type,
@@ -102,7 +103,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       className={clsx(
         "inline-grid shrink-0 place-items-center transition touch-target aria-expanded:text-accent disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
         VARIANTS[variant],
-        onMedia || variant === "media" ? "rounded-full" : "rounded-lg",
+        round || variant === "media" ? "rounded-full" : "rounded-lg",
         pressed !== undefined && PRESSED,
         SIZES[size],
         className,
diff --git a/frontend/src/components/ui/Input.dom.test.tsx b/frontend/src/components/ui/Input.dom.test.tsx
index 61ec3530..f069bd1c 100644
--- a/frontend/src/components/ui/Input.dom.test.tsx
+++ b/frontend/src/components/ui/Input.dom.test.tsx
@@ -4,6 +4,7 @@
 // back values, and the dropdown trigger by context.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { fieldClass } from "./fieldStyles";
 import { Input, Textarea } from "./Input";
 import { CheckRow, Slider } from "./NativeControls";
 import { SelectTrigger } from "./SelectTrigger";
@@ -29,6 +30,15 @@ describe("Input", () => {
     expect(search.getAttribute("aria-invalid")).toBe("true");
   });
 
+  it("dims a wrapper frame for its disabled FIELD, never for a disabled button beside it", () => {
+    // The header search holds a Go button that is disabled while the query is empty; a bare
+    // `has-disabled:` faded the whole search box to 50% on the feed.
+    const frame = fieldClass({ size: "free", pill: true, floating: true });
+    expect(frame).not.toMatch(/(^| )has-disabled:/);
+    expect(frame).not.toMatch(/(^| )has-aria-invalid:/);
+    expect(frame).toContain("has-[input:disabled]:opacity-50");
+  });
+
   it("lets a caller lay it out but not re-paint its edge", () => {
     render(<Textarea aria-label="body" className="w-full" />);
     const body = screen.getByRole("textbox", { name: "body" });
diff --git a/frontend/src/components/ui/fieldStyles.ts b/frontend/src/components/ui/fieldStyles.ts
index 26039608..1c80e27d 100644
--- a/frontend/src/components/ui/fieldStyles.ts
+++ b/frontend/src/components/ui/fieldStyles.ts
@@ -6,6 +6,7 @@ import clsx from "clsx";
 // itself. Its own file so `Input.tsx` exports components only (react-refresh).
 
 export type FieldSize =
+  | "lg" // 40 — the page's one hero field: the header search, the command palette
   | "md" // 32 — a form field, lines up with a `md` Button
   | "sm" // 28 — a toolbar search, a field in a popover or an inline rename, lines up with the toolbar row
   | "xs" // 24 — inside a table row or a pager
@@ -15,6 +16,7 @@ export type FieldSize =
 // On a coarse pointer the text is 1rem, so a tablet browser does not zoom the page on focus (not on a
 // heading, whose type is already larger).
 const SIZES: Record<FieldSize, string> = {
+  lg: "h-10 px-3 text-sm pointer-coarse:text-base",
   md: "h-8 px-3 text-sm pointer-coarse:text-base",
   sm: "h-7 px-2.5 text-sm pointer-coarse:text-base",
   xs: "h-6 px-2 text-xs pointer-coarse:text-base",
@@ -24,18 +26,31 @@ const SIZES: Record<FieldSize, string> = {
 
 // The edge is --edge-strong (the fg mixed 55% into the bg, ≥ 3:1 on every scheme — WCAG 1.4.11); focus
 // turns it into a 2px accent edge (the border plus a 1px ring), the outlined-field convention. Invalid
-// is the danger edge, focused or not. On a coarse pointer the box grows to the 44 touch target.
+// is the danger edge, focused or not. A wrapper frame keys both states to its own INPUT, not to any
+// descendant: the header search's Go button is disabled while the query is empty, and a bare
+// `has-disabled:` faded the whole box. On a coarse pointer the box grows to the 44 touch target.
 const BASE =
-  "min-w-0 border edge-strong bg-transparent text-fg placeholder:text-muted transition-colors " +
+  "min-w-0 border edge-strong text-fg placeholder:text-muted transition-colors " +
   "focus-within:border-accent focus-within:ring-1 focus-within:ring-accent focus-within:outline-hidden " +
-  "aria-invalid:border-danger aria-invalid:ring-danger has-aria-invalid:border-danger has-aria-invalid:ring-danger " +
-  "disabled:cursor-not-allowed disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:opacity-50 " +
+  "aria-invalid:border-danger aria-invalid:ring-danger " +
+  "has-[input[aria-invalid=true]]:border-danger has-[input[aria-invalid=true]]:ring-danger " +
+  "disabled:cursor-not-allowed disabled:opacity-50 " +
+  "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 " +
   "pointer-coarse:min-h-(--touch-target)";
 
+// `floating`: the field hovers over the scrolling page (the header search), so it keeps the glass-menu
+// surface under its edge instead of a see-through one (A2: what floats over content is glass). The
+// shadow is a utility so the focus ring's box-shadow composes with it instead of dropping it.
 export function fieldClass({
   size = "md",
   pill = false,
-}: { size?: FieldSize; pill?: boolean } = {}) {
-  // A4: a toolbar search is a pill; every other field r8.
-  return clsx(BASE, SIZES[size], pill ? "rounded-full" : "rounded-lg");
+  floating = false,
+}: { size?: FieldSize; pill?: boolean; floating?: boolean } = {}) {
+  // A4: a search is a pill; every other field r8.
+  return clsx(
+    BASE,
+    SIZES[size],
+    pill ? "rounded-full" : "rounded-lg",
+    floating ? "glass-menu shadow-[0_18px_44px_-16px_rgba(0,0,0,0.6)]" : "bg-transparent",
+  );
 }