Draw the section navigation without Tailwind

Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/section-nav.css

@@ -0,0 +1,70 @@
+/*
+ * <x-section-nav>: the navigation inside one area of an application — M3's secondary tabs from
+ * `medium` (600px), five or more of them the scrollable tab bar M3's own accessibility page
+ * blesses rather than a grid that would break the tab bar's divider and strand the upper rows'
+ * indicators against nothing (docs/audits/m3-alignment/navigation.md N-16); below `medium`, where a
+ * row of them never fits, a button naming the current section opens the same list as a menu.
+ *
+ *   [data-md-section-nav]                min-inline-size: 0
+ *     [data-md-section-nav-picker]       hidden from medium
+ *       [data-md-section-nav-trigger]    48px, an outlined field-like button
+ *         [data-md-section-nav-trigger-label]  the current section's title, truncated
+ *     nav                                hidden below medium
+ *       [data-md-tabs-bar]               tabs.css, reused whole
+ *
+ * Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
+ * `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
+ * `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
+ * `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
+ * `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
+ * — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
+ * for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
+ * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './tabs.css';
+@import './icon.css';
+@import './menu.css';
+@import './menu-item.css';
+@import './badge.css';
+
+@layer material.components {
+    [data-md-section-nav] {
+        min-inline-size: 0;
+    }
+
+    [data-md-section-nav-picker] {
+        @media (width >= 600px) {
+            display: none;
+        }
+    }
+
+    [data-md-section-nav] > nav {
+        @media (width < 600px) {
+            display: none;
+        }
+    }
+
+    [data-md-section-nav-trigger] {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        block-size: var(--md-sys-measurement-space600);
+        inline-size: min(320px, calc(100vw - 32px));
+        cursor: pointer;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-xs);
+        padding-inline: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-section-nav-trigger-label] {
+        min-inline-size: 0;
+        flex: 1 1 0%;
+    }
+
+    [data-md-section-nav] [data-md-tabs-bar] > li {
+        min-inline-size: 0;
+    }
+}