panel-redesign: Sign out takes the menu's hover tint

Follows the design: commit before it. panel.css gains the same four rules
theme.css did (TestPanelCSSIsTheMockupStylesheet holds them equal): the form
stretches the button across the user menu and the button is handed Bulma's
hover / focus / active variables. layout.html already had the form; only its
comment changes.

Checked in the browser on the kit page at 1440: Sign out is as wide as
Account and Help (147 px, 36 px tall), shows the pointer cursor, and is
tinted under the pointer like they are.

go test ./internal/web/...
ok  	github.com/mixeme/selfpost/internal/web
ok  	github.com/mixeme/selfpost/internal/web/auth
ok  	github.com/mixeme/selfpost/internal/web/handlers
ok  	github.com/mixeme/selfpost/internal/web/validate
ok  	github.com/mixeme/selfpost/internal/web/view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -25,6 +25,9 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
   footer) and the signed-out screen; `GET /server/components` (global role)
   renders every partial in every state. `@kit` is off the ratchet: the kit
   is held to the design contract from here on.
+- panel-redesign (design): Sign out in the user menu is a POST form in the
+  mockups too, and its button takes the same hover, focus and press tint as
+  Account and Help (owner, 2026-10-09).
 
 ### Changed
 

internal/web/view/static/panel.css

@@ -121,6 +121,14 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
 .navbar.is-primary .navbar-dropdown .navbar-item .ti { margin-right: .6rem; color: var(--sp-muted); }
 .navbar.is-primary .navbar-dropdown .navbar-item.is-active { color: var(--sp-brick); font-weight: 600; background: var(--sp-brick-tint); }
 .navbar.is-primary .navbar-dropdown .navbar-item.is-active .ti { color: var(--sp-brick); }
+/* Sign out is a POST, so it is a form with a button rather than a link. Bulma
+   tints only a.navbar-item; the button is handed the same variables, and the
+   form stretches it across the menu, so it answers the pointer, the keyboard
+   and a press exactly like the entries above it. */
+.navbar-dropdown form { display: flex; }
+.navbar-dropdown button.navbar-item { flex: 1; cursor: pointer; }
+.navbar-dropdown button.navbar-item:hover, .navbar-dropdown button.navbar-item:focus { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta); }
+.navbar-dropdown button.navbar-item:active { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-active-background-l-delta); }
 .navbar.is-primary .sp-current > .navbar-link, .navbar.is-primary a.navbar-item.sp-current { background: rgb(0 0 0 / .18); }
 /* The header is built like the mark: a brick field, then the stamp's paper
    margin, and the perforation runs along the outer edge of that margin — round

internal/web/view/templates/layout.html

@@ -127,9 +127,9 @@
             {{/* Signing out is a POST (the handler answers nothing else), so it
                  stays a form that works without scripts. The submit button
                  carries navbar-item: Bulma resets a button to plain text, so
-                 it takes the dropdown's entry styling like the links around it
+                 it takes the dropdown's entry styling like the links around
-                 (only Bulma's hover tint, which it gives to a.navbar-item
+                 it, and panel.css hands it the hover tint Bulma gives to
-                 alone, is missing). */}}
+                 a.navbar-item alone. */}}
             <form method="post" action="/logout"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>