Dashboard name pill opaque: the look's card colour with a hairline border, no blur

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016ezWcLmBCtTVKFPxfdK2MK

docs/interface/dashboards.md

@@ -300,7 +300,7 @@ look's muted text colour.
 | Not wired | the problem, at 17, muted, in the middle; a ring type draws no ring |
 | Any other type | its rectangular body, without a card, from y = c − 64 to c + S/(2√2), x = c ± S/(2√2) (Knob: 53–307 × 116–307) |
 | Page dots | one per face, from two faces: dots 6 across on targets 16 apart (closer when more than 128 wide would be needed), centred at y = S − 12; the current one in the text colour, the others muted at half opacity |
-| Dashboard name | a pill centred at (c, c), 56 high and fully round, 20 padding either side: the icon 24, 10, and the title at 24, medium, cut with an ellipsis; at most 280 wide, on the frosted surface, the face visible around it; for 1000 ms |
+| Dashboard name | a pill centred at (c, c), 56 high and fully round, 20 padding either side: the icon 24, 10, and the title at 24, medium, cut with an ellipsis; at most 280 wide, on the look's card colour, opaque, with a hairline border in `--border` (no blur), the face visible around it; for 1000 ms |
 | Paging | faces slide sideways, dashboards up and down; see [Motion](#motion) |
 | Locked | controls do nothing and read as disabled; the ring at 0.45 opacity. **Read-only** in the gap line's place (centred at y = S − 28): a lock glyph 15 and the word at 15, 6 apart, muted. A face whose gap line is in use leads that line with the lock glyph instead. Nothing is drawn outside the circle |
 

frontend/src/components/Dashboard/RoundFace.tsx

@@ -354,14 +354,15 @@ export function RoundPanel({
   )
 }
 
-/** A dashboard's icon and title, on the frosted surface: what a panel shows
- *  for a moment of a dashboard it has just landed on. */
+/** A dashboard's icon and title: what a panel shows for a moment of a
+ *  dashboard it has just landed on. Opaque, so the face under it does not
+ *  read through the name. */
 function NamePill({ dashboard }: { dashboard: Dashboard }) {
   const Glyph = resolveIcon(dashboard.icon ?? "")
   return (
     <output
       data-testid="dashboard-announce"
-      className="flex h-14 max-w-[280px] items-center gap-2.5 rounded-full border border-border bg-card/80 px-5 font-medium shadow-e2 backdrop-blur-md"
+      className="flex h-14 max-w-[280px] items-center gap-2.5 rounded-full border border-border bg-card px-5 font-medium text-card-foreground shadow-e2"
       style={{ fontSize: 24 }}
     >
       {Glyph ? <Glyph className="size-6 shrink-0" aria-hidden /> : null}