design: Sign out is a POST form in the mockups, tinted like the links

Owner's instruction (2026-10-09): in the kit Sign out had no hover tint and
stood out among Account and Help. The cause was in the design, not in the
implementation: the mockups drew Sign out as a link, the panel signs out
with a POST, and Bulma tints only a.navbar-item.

  - build.py: Sign out is a form with a submit button carrying navbar-item,
    as the real shell has to write it; all pages rebuilt.
  - theme.css: the form stretches the button across the menu and the button
    is handed Bulma's own hover / focus / active variables, so it answers
    like the entries above it. No width, no colour of its own.

check.py: 32 screens, 48 sp- classes, 0 violation(s); outlines.json unchanged.

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

docs/assets/panel-redesign/panel/account.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/backup.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/build.py

@@ -81,7 +81,9 @@ def navbar(section, page):
             '            <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>',
             '            <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>',
             '            <hr class="navbar-divider">',
-            '            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>',
+            # Signing out changes state, so it is a POST: a form with a button, not a link.
+            '            <form method="post" action="login.html"><button type="submit" class="navbar-item">'
+            '<i class="ti ti-logout"></i>Sign out</button></form>',
             '          </div>', '        </div>', '      </div>', '    </div>', '  </div>', '</nav>',
             '<div class="sp-perf" aria-hidden="true"></div>']
     return "\n".join(out)

docs/assets/panel-redesign/panel/components.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/dmarc-domain.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/dmarc-report.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/dmarc.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/health.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/help.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-domain-delete.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-domain.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-domains.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-filter-lists.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-log.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-quarantine-message.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-quarantine.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/in-queue.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-app-created.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-app.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-domain-delete.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-domain-settings.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-domain.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-domains.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-log.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-message.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/out-queue.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/overview.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/preflight.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/settings.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/system-log.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/theme.css

@@ -64,6 +64,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

docs/assets/panel-redesign/panel/user-delete.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/user.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>

docs/assets/panel-redesign/panel/users.html

@@ -54,7 +54,7 @@
             <a class="navbar-item" href="account.html"><i class="ti ti-key"></i>Account</a>
             <a class="navbar-item" href="help.html"><i class="ti ti-help"></i>Help</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" href="login.html"><i class="ti ti-logout"></i>Sign out</a>
+            <form method="post" action="login.html"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
           </div>
         </div>
       </div>