Lay out the section nav's list items as flex rows again

Plan step 36, navigation review. The rewrite kept `min-w-0` from the
view's `<li class="flex min-w-0">` but dropped `flex`, so tabs.css's
`li > [data-md-tab] { flex: 1 1 0% }` no longer applied inside the
section nav. The header also called body-large "the tab bar's own"
type, which is title-small.

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

resources/css/components/section-nav.css

@@ -15,10 +15,11 @@
  * 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
+ * this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
+ * applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
+ * direct children of the bar, never 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
+ * for everywhere, in 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).
  */
 
@@ -65,6 +66,7 @@
     }
 
     [data-md-section-nav] [data-md-tabs-bar] > li {
+        display: flex;
         min-inline-size: 0;
     }
 }