feat(playground-design-system): v0.3.0 — playground/report-page foundation primitives [skip-docs]

Hoists 13 generic CSS components (sections 13-25 in tier3-supplement) from
ms-ai-architect inline CSS to shared/ so all 5 plugin consumers get the same
vocabulary and visual signature.

Shared additions:
- .eyebrow utility, .page__* page-shell (header/title/eyebrow/lede/meta)
- .key-stats grid + .key-stat + severity modifiers (large tabular-nums values)
- .verdict-pill-lg 5-band extension (critical/high/medium/low/positive/n-a)
- .tab-list / .tab / .tab-panel generic tab-component
- .top-risks / .top-risk[data-severity] severity-ordered risk list
- .recommendation-card[data-severity] emphasized advisory callout
- .card__head/title/desc/id/meta/hint/actions/pill subcomponents
- .card--severity-{level} 4px left-border modifier
- Form patterns (.field-row, .field-label, .field-help, .multi-select,
  .checkbox-row, .required-mark)
- .stack-lg/.stack-md/.stack-sm vertical rhythm utilities
- .pyramide-tier-detail expandable details below pyramide
- .scenario-card-grid + .scenario-card[data-status="winner"] grid pattern
- .app-shell / .app-shell--wide / .app-shell--narrow page wrappers

Total: 567 new lines in tier3-supplement.css, 107 new selectors. Purely
additive — no existing selector changed or removed. v0.2 -> v0.3.
DS CHANGELOG.md updated with full v0.3 entry.

ms-ai-architect playground:
- Re-synced vendored DS to v0.3 (force flag — overwrites stale v0.2 vendor)
- Deleted 8 inline DUPLICATE definitions (.app-shell* + form patterns) now
  served by shared DS
- Inline <style> block: 210 -> 202 lines (start of multi-session refactor;
  remaining PARALLEL classes migrate in Session 2)

Tests: 215 + 201 + 70 + 7 = 493 PASS. No regressions.

Plugin user-facing docs (README, CLAUDE.md, marketplace landing) update in
Session 3 (Phase 9) when full v1.11.0 ships. This commit is internal
foundation work — DS CHANGELOG already documents the shared changes.

Session 1 of 3 in v1.11.0 design-system 100%-adoption refactor.
Plan: /Users/ktg/.claude/plans/jeg-skal-pr-ve-effervescent-token.md

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

plugins/ms-ai-architect/playground/ms-ai-architect-playground.html

@@ -49,8 +49,8 @@
        setter eksplisitt display, som overstyrer HTMLs default [hidden] {display:none}.
        Globalt override slik at hidden-attributt faktisk skjuler elementet. */
     [hidden] { display: none !important; }
-    .app-shell { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
-    .app-shell--wide { max-width: 1400px; }
+
+    /* .app-shell + .app-shell--wide hentet fra vendored DS v0.3 (tier3-supplement section 25) */
 
     /* Topbar — vises på alle surfaces unntatt onboarding (uten projekt-kontekst) */
     .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); position: sticky; top: 0; z-index: 10; }
@@ -68,13 +68,10 @@
     .onboarding-header p { color: var(--color-text-secondary); margin: 0; max-width: 60ch; }
     .onboarding-groups { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
     .onboarding-fields { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0; }
-    .field-row { display: flex; flex-direction: column; gap: 6px; }
-    .field-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
-    .field-help { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
-    .multi-select { display: flex; flex-direction: column; gap: 4px; border: 0; padding: 0; margin: 0; }
-    .checkbox-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--font-size-sm); padding: 4px 0; }
-    .checkbox-row input { margin: 0; }
-    .required-mark { color: var(--color-severity-critical); margin-left: 2px; }
+
+    /* Form-patterns (.field-row, .field-label, .field-help, .multi-select,
+       .checkbox-row, .required-mark) hentet fra vendored DS v0.3 (tier3-supplement section 21) */
+
     .onboarding-actions { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; flex-wrap: wrap; }
     .onboarding-help { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }