Draw the FAB menu's trigger and items from the interaction classes

Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
The trigger button (fab-menu.css) and each item (fab-menu-item.css)
hand-rolled md-state-layer and md-focus-ring; both now render the classes
and keep only their own colour, shape and motion. Neither needs
md-touch-target: the trigger and every item draw at 56px.

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

resources/css/components/fab-menu-item.css

@@ -4,7 +4,9 @@
  *
  * FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
  * 8px between the icon and the label, 24px icons, full corner, elevation 3, `data-md-color`'s
- * container.
+ * container. It renders the foundation's `md-state-layer` and `md-focus-ring`
+ * (foundation/interaction.css); its 56px already meets M3's target, so it needs no
+ * `md-touch-target`.
  *
  * The entry is `@starting-style` on the item itself; the exit needs the state to be readable
  * while the popover is on its way out, which `[data-md-fab-menu-popover]:not(:popover-open) > *`
@@ -21,8 +23,6 @@
         --md-fab-menu-item-container: var(--md-sys-color-primary-container);
         --md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);
 
-        position: relative;
-        isolation: isolate;
         display: inline-flex;
         flex-shrink: 0;
         align-items: center;
@@ -38,7 +38,6 @@
         letter-spacing: var(--md-sys-typescale-title-md-tracking);
         font-variation-settings: normal;
         cursor: pointer;
-        outline: none;
         -webkit-user-select: none;
         user-select: none;
         translate: 0 0;
@@ -51,37 +50,6 @@
             var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default), linear, linear;
         transition-behavior: allow-discrete;
 
-        &::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            border-radius: inherit;
-            background-color: currentColor;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
-        }
-
-        @media (hover: hover) {
-            &:hover::before {
-                opacity: var(--md-sys-state-hover-state-layer-opacity);
-            }
-        }
-
-        &:focus-visible {
-            outline: 3px solid var(--md-sys-color-secondary);
-            outline-offset: 2px;
-        }
-
-        &:focus-visible::before {
-            opacity: var(--md-sys-state-focus-state-layer-opacity);
-        }
-
-        &:active::before {
-            opacity: var(--md-sys-state-pressed-state-layer-opacity);
-        }
-
         @starting-style {
             translate: 0 var(--md-sys-measurement-space100);
             opacity: 0;