Centre the app bar's headline on a grid and curve its search bar

The centred headline was absolutely positioned 56px in from each edge — room for
exactly one of M3's two trailing icon buttons, so a long title ellipsised behind
them. It is now the middle column of a three-column row and shrinks against
whatever is really beside it. The search container follows M3's curve, filling
the row to 312dp and then only half of what is left, so the showcase drops the
hand-written max-width it had been working around it with.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-09, N-11).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/Components/AppBarTest.php

@@ -69,6 +69,17 @@ it('draws floating and docked toolbars', function () {
         ->not->toContain('data-toolbar-group');
 });
 
+it('centres a headline on a three-column row and curves the search container', function () {
+    $css = file_get_contents(__DIR__.'/../../../resources/css/components/app-bar.css');
+
+    expect($css)
+        // Not a fixed 56px inset, which fits exactly one of M3's two trailing buttons (N-11).
+        ->not->toContain('inset-inline: 3.5rem;')
+        ->toMatch('/\[data-variant="center"\] \[data-app-bar-row\] \{\s+display: grid;\s+grid-template-columns: 1fr auto 1fr;/')
+        // 312dp, then half of what is left (N-09).
+        ->toContain('max-width: calc(19.5rem + (100% - 19.5rem) / 2);');
+});
+
 it('keeps a toolbar at the bottom clear of the navigation bar', function () {
     $css = file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css');