Key the views on M3's window size classes, not Tailwind's

Plan step 15. Every `sm:`/`md:`/`lg:`/`xl:` in the components, the showcase
(sections, layout, shell) and the pagination and error views becomes the M3
window size class the audits' breakpoint maps prescribe: the full-screen
dialog, the FAB, the snackbar's width, `radio inline`, the section picker and
the page numbers move from 640px to `medium` (600px, M3's compact boundary,
N-07 / C-07 / IN-28); `button responsive` moves from 1024px to `expanded`
(840px); `section-nav`'s grid-to-row switch from 1280px to `large` (1200px,
N-07); and `drawer pane` from 1280px to `expanded`, where M3 shows two panes
for list-detail (C-07). The pane's default width is now 360dp, M3's fixed
supporting pane at expanded.

Showcase example grids take two columns from `medium` and three or more from
`expanded`; the showcase's own theme picker swaps at `expanded`, the nearest
class boundary to the 768px it used (no M3 rule applies to it).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/colour.blade.php

@@ -38,7 +38,7 @@
         <x-showcase::example :$title :$code />
     @endforeach
 
-    <div class="grid gap-4 lg:grid-cols-2">
+    <div class="grid gap-4 expanded:grid-cols-2">
         @foreach (['light', 'dark'] as $theme)
             <div data-theme="{{ $theme }}" class="space-y-6 rounded-corner-lg bg-surface p-4 text-on-surface">
                 <h3 class="type-title-md capitalize">{{ $theme }}</h3>
@@ -47,7 +47,7 @@
                     <div class="space-y-2">
                         <h4 class="type-label-lg text-on-surface-variant">{{ $group }}</h4>
 
-                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                        <div class="grid grid-cols-2 gap-2 medium:grid-cols-3">
                             @foreach ($roles as $role)
                                 <div class="flex items-center gap-2">
                                     <span @class(['size-8 shrink-0 rounded-corner-sm border border-outline-variant', $role])></span>