Teach the ink classes and lines on the Colour page again

Plan step 38 review: the Colour section dropped its "Ink and lines"
group with the retired Tailwind ink names and put nothing in its
place, so no page showed the md-ink-* classes that replaced them or
how to draw a line. A new "Ink and lines" example writes md-ink,
md-ink-variant and md-ink-quiet with their roles, the state inks, and
a line as <x-divider> and an edge as <x-surface outlined>.

Doc comments teach too: the Icons intro showed optical="20" alone for
a 20px icon, where <x-icon size="20"> picks the cut itself; icon's
header still spoke of a caller's size-5 class, the navigation rail's
usage wrapped it in flex/min-w-0 utilities, and the menu item's
icon-class example named a Tailwind-style text- class.

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

resources/views/components/icon.blade.php

@@ -8,9 +8,8 @@
      falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
      symbol so its strokes look equally heavy at every size, which means an icon drawn at
      20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
-     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
-     size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
-     with it; the components that size their own icons do that for you.
+     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). `size` makes that
+     choice for you; `optical` is for an icon sized some other way, by the caller's own CSS.
 
      Decorative by default and hidden from screen readers, because nearly every icon sits
      beside words that already say what it means. Pass `label` when the icon alone carries
@@ -19,9 +18,8 @@
      `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
      from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
      resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
-     unless `optical` says otherwise, which is M3's rule. A size class from the caller still
-     works while the components that pass one are rewritten (plan step 36): a utility outranks
-     the package's layer.
+     unless `optical` says otherwise, which is M3's rule. A caller's unlayered class or `style`
+     setting a width and height still outranks the package's layer.
 
      `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
      as M3's bidirectionality rules ask; symbols that mean the same in both directions do not

resources/views/components/menu-item.blade.php

@@ -30,9 +30,9 @@
      come back to the item, and Escape closes nothing more.
 
      `icon-class` is for an icon whose colour means something of its own, a sport's glyph in the
-     sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon over the ink
-     this file gives it, because a caller's unlayered class always outranks the package's layer —
-     except a disabled item's icon, which stays disabled regardless.
+     sport's colour (`icon-class="sport-run"`, the application's own class). A colour there paints
+     the icon over the ink this file gives it, because a caller's unlayered class always outranks
+     the package's layer — except a disabled item's icon, which stays disabled regardless.
 
      48px tall (M3's published row height wins over SegmentedMenuTokens' own 44dp, ACT-28),
      body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive spacing,

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

@@ -1,9 +1,9 @@
 {{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider
      window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width pill).
 
-         <div class="flex min-h-dvh">
+         <x-row align="stretch" style="min-height: 100dvh">
              <x-navigation-rail mode="collapsible">
-                 <x-slot:brand><span class="type-title-lg">Mail</span></x-slot:brand>
+                 <x-slot:brand><span class="md-type-title-lg">Mail</span></x-slot:brand>
                  <x-slot:header>
                      <x-fab label="Compose" icon="edit" />
                  </x-slot:header>
@@ -18,8 +18,8 @@
                  </x-slot:footer>
              </x-navigation-rail>
 
-             <main class="min-w-0 flex-1">…</main>
-         </div>
+             <main style="flex: 1; min-width: 0">…</main>
+         </x-row>
 
      `mode` says what decides its width:
      - `collapsed` — always collapsed; `expanded` — always expanded.