Make the rail header FAB's collapsed shape win by specificity

Plan step 37 review. The collapsed rail FAB's gap and minimum width tied
with fab.css's extended-size and collapse-on-scroll rules at three
attributes and won only by coming after them. A deduplicating bundle
keeps that order (navigation-rail.css imports fab.css), but a build that
repeats a shared stylesheet need not: all.css imports fab.css again after
the scaffold has reached the rail, and the Workbench's Tailwind entry
inlines every occurrence. Doubling [data-md-extended] settles it by
specificity, as the flat shadow already was, so the order no longer
matters.

A scan of every component and layout stylesheet pair for same-layer,
same-property ties on a shared hook found no other override that relies
on order: the remaining ties are on mutually exclusive elements or sit
behind an import edge.

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

resources/css/components/navigation-rail.css

@@ -47,10 +47,10 @@
  *
  * The rail-header FAB rules at the end draw M3's nested-FAB elevation (level 0, not a standalone
  * FAB's 3 — N-03) and morph it into an extended FAB as the rail opens, rather than swapping two by
- * `display` (N-23). Both sit in this file's own `material.components` layer: the flat shadow
+ * `display` (N-23). Both sit in this file's own `material.components` layer and win by specificity
- * outranks fab.css's resting and hover shadows by specificity, and the collapsed FAB's `gap` and
+ * alone, whichever copy of fab.css a build places last: the flat shadow outranks fab.css's resting
- * minimum width, which tie with fab.css's extended-size rules, win by coming after them — this file
+ * and hover shadows, and the collapsed FAB's `gap` and minimum width outrank fab.css's extended-size
- * imports fab.css, so a bundle always places fab.css first.
+ * and collapse-on-scroll rules, which would otherwise tie with them.
  *
  * The destination item, its indicator and its state layer are navigation-rail-item.css and
  * navigation-item.css (shared with the bar's item); a section's heading is
@@ -965,7 +965,10 @@
         }
     }
 
-    [data-md-navigation-rail-header] [data-md-fab][data-md-extended] {
+    /* `[data-md-extended]` doubled for the same reason as the shadow's `[data-md-fab]` above: it
+       outranks fab.css's `[data-md-fab][data-md-extended][data-md-size]` gap and its collapsed
+       collapse-on-scroll FAB's minimum width, three attributes each. */
+    [data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended] {
         &:where(
             [data-md-navigation-rail='collapsed'],
             [data-md-navigation-rail='collapsed'] *,

tests/Feature/Components/NavigationRailTest.php

@@ -187,7 +187,7 @@ it('flattens a FAB nested in the rail header and morphs its label', function ()
 
     expect($css->declarations("[data-md-navigation-rail-header] [data-md-fab] > span:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )"))
         ->toBe(['max-width' => '0', 'opacity' => '0'])
-        ->and($css->declarations("[data-md-navigation-rail-header] [data-md-fab][data-md-extended]:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )"))
+        ->and($css->declarations("[data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended]:where( [data-md-navigation-rail='collapsed'], [data-md-navigation-rail='collapsed'] *, [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]), [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *, [data-md-navigation-rail='modal']:not([data-md-open]), [data-md-navigation-rail='modal']:not([data-md-open]) * )"))
         ->toBe(['min-inline-size' => '0', 'aspect-ratio' => '1', 'gap' => '0']);
 });