docs(design): add tabs / inline banners / compact-table-density to DESIGN.md

Adds:
- Navigation > Sub-page tabs subsection (tab-underline recipes, count pill, ARIA)
- Data Tables: row min-height 44px -> 32px + WCAG SC 2.5.5 rationale
- Toast Notifications > Inline Banners subsection (4 variants table)
Also adds Sprint 11 entry to CHANGELOG.md.

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

DESIGN.md

@@ -216,11 +216,23 @@ Shadows (`box-shadow`) are not used anywhere.
 - Text `{colors.slab-text}`, caption-md, `rounded-none`
 - Active state: 2px primary bottom border
 
+#### Sub-page tabs
+
+Used inside pages that need content partitioning without a URL change (e.g. EngagementDetailPage: Schedule / Description / Simulations).
+
+- **Container**: `flex items-end border-b border-hairline gap-xs` — sits on the `{colors.hairline}` bottom line.
+- **`.tab-underline`**: `text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink px-xs`. Hover is **instant** — no `transition-*`.
+- **`.tab-underline-active`**: `text-primary border-primary` — 2px primary underline, primary text.
+- **Count pill** (optional, e.g. simulation count): `.tab-count-pill` — `rounded-pill bg-cloud text-graphite text-[11px] px-xs py-0 font-mono`. `rounded-pill` is the documented exception.
+- **Active count pill**: `.tab-count-pill-active` — `bg-primary-soft text-primary`.
+- ARIA: `role="tablist"` on container; `role="tab"` + `aria-selected` on each button.
+
 ### Data Tables
 
 - `table-layout: fixed`, `word-break: break-word`
 - Header row: background `{colors.cloud}`, `body-emphasis` text, 1px `{colors.hairline}` bottom border
-- Data cells: 44px min-height, 1px `{colors.hairline}` bottom border
+- Data cells: **32px min-height** (compact density, all surfaces). Class: `.table-compact`.
+  - **WCAG SC 2.5.5 tradeoff**: the recommended 44×44px touch target is intentionally not met on data rows. Mimic is a BAS operator console used at desktop on mouse/keyboard — density and scanability take priority over touch target size. Action buttons within rows retain icon ≥ 24px with adequate padding to preserve a usable hit area.
 - ID / date / technique columns: `font-mono`
 - Zebra striping optional — use `{colors.cloud}` for odd rows if table is wide
 
@@ -229,6 +241,23 @@ Shadows (`box-shadow`) are not used anywhere.
 - Angular (`rounded-none`), 4px left border strip in semantic color (success/warn/bloom-deep/primary)
 - Background `{colors.paper}`, 1px `{colors.hairline}` border
 
+#### Inline Banners
+
+For persistent in-page status messages (not ephemeral toasts). Use `<AlertBanner variant="...">` component.
+
+Four variants — all share: `bg-paper border border-hairline border-l-4 rounded-none px-md py-sm flex items-start gap-sm`.
+
+| Variant | Left strip color | ARIA role | Lucide icon |
+|---------|-----------------|-----------|-------------|
+| `error` | `border-l-bloom-deep` | `role="alert"` | `AlertCircle` |
+| `warn` | `border-l-warn` | `role="alert"` | `AlertTriangle` |
+| `success` | `border-l-success` | `role="status"` | `CheckCircle` |
+| `info` | `border-l-primary` | `role="status"` | `Info` |
+
+- Icon: Lucide at `size={16}`, `aria-hidden`, `mt-[2px] shrink-0` for baseline alignment.
+- No shadow, no rounded corners, no transition.
+- Optional `title` prop renders as `font-medium text-ink` above the message body.
+
 ---
 
 ## Do's and Don'ts