Genericise template stories, fix TopBar icons, and add DetailPage

Replace domain-specific (education/PDP) recipe stories with generic
content. Fix TopBar action buttons using properly styled light-on-dark
buttons instead of invisible IconButton tertiary. Use the real NSW
waratah SVG logo. Add shared _story-helpers for TopBar actions and logo.
Add DetailPage template for single-record/profile/document views with
constrained width and tab support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

DESIGN.md

@@ -1069,6 +1069,29 @@ import { FormPage } from '@/components/templates/FormPage'
 </FormPage>
 ```
 
+#### DetailPage
+
+Single-column detail view for records, profiles, or documents. Constrained width for readability.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `header` | `ReactNode` | — | PageHeader or custom header |
+| `actions` | `ReactNode` | — | Action bar below header (e.g. tabs, buttons) |
+| `maxWidth` | `'md' \| 'lg' \| 'xl' \| 'full'` | `'xl'` | Content area max width |
+| `children` | `ReactNode` | — | **Required.** Page content |
+
+```tsx
+import { DetailPage } from '@/components/templates/DetailPage'
+
+<DetailPage
+  header={<PageHeader title="Alex Chen" subtitle="Senior Engineer" />}
+  actions={<Tabs value={tab} onChange={setTab}><TabList><Tab value="overview">Overview</Tab></TabList></Tabs>}
+  maxWidth="lg"
+>
+  <Card><CardContent>Detail content</CardContent></Card>
+</DetailPage>
+```
+
 ---
 
 ## Do's and Don'ts