Say how the rail's FAB overrides win, and that rail-collapsed: is gone

Plan step 36, navigation review. navigation-rail.css claimed each FAB
override beats fab.css by specificity alone; the collapsed FAB's gap
and minimum width tie with fab.css's extended-size rules and win by
order, which the file's own import of fab.css guarantees. The rail
view pointed at one file for the collapsed conditions that four files
write out. UPGRADE.md now says applications lose the `rail-collapsed:`
variant the development skill used to teach.

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

UPGRADE.md

@@ -106,7 +106,8 @@ over a colour, use the role directly.
 - `<x-app-shell>` is renamed `<x-scaffold>`, with no alias; it is a column with a nested row
   and gains `banner` and `fab` slots. `<x-navigation-rail>`'s `header` slot takes one
   `<x-fab label icon>` that morphs (replace the two-FAB `rail-collapsed:` swap); new `divider`
-  and `fill` props. `data-app-shell`, `data-app-shell-bar`, `data-app-shell-actions` and
+  and `fill` props. The `rail-collapsed:` variant is gone: style a rail's collapsed shape in the
+  application's CSS with the conditions `resources/css/components/navigation-rail.css` lists. `data-app-shell`, `data-app-shell-bar`, `data-app-shell-actions` and
   `data-app-shell-banner` are `data-md-scaffold`, `data-md-scaffold-bar`, `data-md-scaffold-actions`
   and `data-md-scaffold-banner`; the skip link is `data-md-skip-link`.
 - `<x-icon optical="20">` selects the optical-size-20 cut; the components pass it for their own

resources/css/components/navigation-rail.css

@@ -47,9 +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 now sit in this file's own `material.components` layer, like toolbar.css's
+ * `display` (N-23). Both sit in this file's own `material.components` layer: the flat shadow
- * FAB override, because each only overrides the single declaration fab.css puts on `[data-md-fab]`
+ * outranks fab.css's resting and hover shadows by specificity, and the collapsed FAB's `gap` and
- * itself, with a more specific selector that always wins without needing to sit outside the layer.
+ * minimum width, which tie with fab.css's extended-size rules, win by coming after them — this file
+ * imports fab.css, so a bundle always places fab.css first.
  *
  * 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
@@ -887,8 +888,8 @@
      * A FAB in the rail's header rests at elevation 0, not the 3 a standalone FAB has
      * (§ Navigation Rail/Behaviour: "when nested within another component, such as the navigation
      * rail, the FAB's resting elevation should be level 0" — N-03). The doubled `[data-md-fab]`
-     * attribute only adds specificity to beat fab.css's own single-attribute selector reliably,
+     * attribute only adds specificity, over fab.css's `[data-md-fab]:hover` too, as
-     * exactly as `[data-md-navigation-rail-item][data-md-navigation-rail-item]::before`
+     * `[data-md-navigation-rail-item][data-md-navigation-rail-item]::before`
      * (navigation-rail-item.css) does for the same reason.
      */
     [data-md-navigation-rail-header] [data-md-fab][data-md-fab],

resources/views/components/navigation-rail.blade.php

@@ -48,8 +48,9 @@
      Anything else inside can take both shapes by matching the rail's own state directly, the same
      selectors resources/css/components/navigation-rail.css uses for every branch of "collapsed" —
      `data-md-navigation-rail`'s value, `:not([data-md-open])`, and the window band each mode
-     collapses in; that file is the one place the numbers need to stay right, rather than a
+     collapses in (its header lists them). Every rule in the package that draws a collapsed shape
-     Tailwind variant repeating them. Nothing that shows while collapsed may be wider than 96px.
+     writes them out, and tests/Feature/Components/NavigationRailTest.php keeps each copy to the same
+     conditions. Nothing that shows while collapsed may be wider than 96px.
 
      Props: `label` names the landmark ("Main"); `width` is the expanded width (`256px`, held
      between M3's 220 and 360dp) — or the word `narrow`, M3's other *collapsed* width