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>

src/components/templates/DetailPage/DetailPage.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface DetailPageProps extends HTMLAttributes<HTMLDivElement> {
+  /** PageHeader or custom header section */
+  header?: ReactNode
+  /** Action bar below the header (e.g. tabs, buttons) */
+  actions?: ReactNode
+  /** Single-column content area (max-w constrained for readability) */
+  children: ReactNode
+  /** Max width of the content area */
+  maxWidth?: 'md' | 'lg' | 'xl' | 'full'
+}
+
+const maxWidthStyles = {
+  md: 'max-w-2xl',
+  lg: 'max-w-3xl',
+  xl: 'max-w-5xl',
+  full: '',
+}
+
+export const DetailPage = forwardRef<HTMLDivElement, DetailPageProps>(
+  ({ header, actions, maxWidth = 'xl', className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        {header}
+
+        {actions && (
+          <div className="flex items-center gap-4 border-b border-border px-6 py-3">
+            {actions}
+          </div>
+        )}
+
+        <div className="flex-1 p-6">
+          <div className={cn(maxWidthStyles[maxWidth])}>
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  },
+)
+DetailPage.displayName = 'DetailPage'