Menubar handle wraps the ProdDash logo as a translucent pill

The show/hide handle is now the logo itself: a translucent accent pill
wrapped around "ProdDash" at the left of the bar, centred on the text, with
"Dash" in the background colour so it reads as a cutout inside the green.
The pill is far less opaque than the old solid tab (38% idle, brighter on
hover). When the bar hides, the text folds away and the pill shrinks to a
slim lip at the top-left edge, exactly where the old tab sat. An invisible
in-flow twin of the logo keeps the bar's layout unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH

public/index.html

@@ -15,7 +15,8 @@
 </head>
 <body>
   <header id="topbar">
-    <span id="brand">Prod<span class="accent">Dash</span></span>
+    <!-- invisible twin of the logo: holds its place in the bar; the real logo is the handle below -->
+    <span id="brand" class="brand-spacer" aria-hidden="true">Prod<span class="accent">Dash</span></span>
 
     <span class="spacer"></span>
 
@@ -50,7 +51,7 @@
     </a>
   </header>
 
-  <button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar"></button>
+  <button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar">Prod<span class="accent">Dash</span></button>
 
   <main id="gridwrap">
     <div id="grid">