Add the foundation stylesheet, written without Tailwind

Plan step 33. foundation.css is the one required import: the full
material layer statement, then plain imports of its parts, each opening
with the same statement.

- foundation/reset.css (material.reset): Tailwind 4's preflight rule for
  rule, with M3's on-surface-variant placeholder and no typeface.
- foundation/hidden.css: [hidden] and [x-cloak], outside every layer.
- foundation/tokens.css (material.tokens): the token files.
- foundation/base.css (material.base): the page's surface, ink and
  brand typeface, and the font face.
- foundation/interaction.css (material.base): md-state-layer,
  md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the
  utilities; md-state-layer also takes data-md-dragged, and
  md-touch-target is 48px (space600) where the utility reads 3rem.

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

resources/css/foundation/interaction.css

@@ -0,0 +1,111 @@
+/*
+ * The interaction classes every interactive component shares, and an application's own control
+ * can use: M3's state layer, its focus indicator, its minimum target, and a link in running text.
+ *
+ * `md-state-layer` lays the content colour over an element at M3's state opacities
+ * (tokens/state.css): hover 8%, focus and press 10%, dragged 16%. Hover only where the pointer
+ * can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` (or the
+ * older `data-dragged`) on the element draws the dragged layer; a disabled element has none. The
+ * layer is a ::before, so the element becomes `position: relative` and `isolation: isolate`.
+ *
+ * `md-focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
+ * focus. The site gives no thickness or offset; the values are @material/web's focus ring tokens
+ * (Apache-2.0, © Google LLC).
+ *
+ * `md-touch-target` extends an element's pointer target to M3's 48×48 minimum without changing
+ * what is drawn: a ::after centred on it, at least `space600` (48px) each way. M3 gives the web
+ * target as "48 × 48 CSS pixels", so the size is px and does not grow with the text. It is
+ * `::after`-based, so a component that already draws with ::after wraps its control in an element
+ * carrying it.
+ *
+ * `md-link` is a link in running text: underlined in the colour of the words around it, because
+ * M3 never lets colour alone mark a link (docs/reference/m3/styles.md § Typography); give it
+ * `md-ink-primary` where it should also read as primary.
+ *
+ * The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities
+ * (tokens/utilities.css) the components still written in Tailwind use; `md-touch-target` alone
+ * differs, in px where the utility reads 3rem. In `material.base`, so a component's own rules,
+ * the text classes and an application's rules all outrank them.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.base {
+    .md-state-layer {
+        position: relative;
+        isolation: isolate;
+
+        &::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::before {
+            opacity: var(--md-sys-state-focus-state-layer-opacity);
+        }
+
+        &:active::before {
+            opacity: var(--md-sys-state-pressed-state-layer-opacity);
+        }
+
+        &:is([data-md-dragged], [data-dragged])::before {
+            opacity: var(--md-sys-state-dragged-state-layer-opacity);
+        }
+
+        &:disabled::before,
+        &[aria-disabled='true']::before {
+            display: none;
+        }
+    }
+
+    .md-focus-ring {
+        outline: none;
+
+        &:focus-visible {
+            outline: 3px solid var(--md-sys-color-secondary);
+            outline-offset: 2px;
+        }
+    }
+
+    .md-touch-target {
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            min-width: var(--md-sys-measurement-space600);
+            min-height: var(--md-sys-measurement-space600);
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .md-link {
+        cursor: pointer;
+        text-decoration-line: underline;
+        text-decoration-thickness: from-font;
+        text-underline-offset: 0.15em;
+        border-radius: var(--md-sys-shape-corner-xs);
+
+        &:focus-visible {
+            outline: 3px solid var(--md-sys-color-secondary);
+            outline-offset: 2px;
+        }
+    }
+}