feat(ms-ai-architect): playground v1.14.0 — root-cause refaktor mot 10+ visuelle bugs

DS-konvensjon-adopsjon på 14 renderere over 6 sesjoner. Etter v1.13.0/.1
patchet 10+ symptomatiske visuelle bugs (191 linjer lokal CSS, 21
fix-kommentarer), grep v1.14.0 root-cause via DS v0.4.0 + per-renderer
refaktor.

Sesjon 2 — DS v0.4.0:
- B-DS-1: kanban-card word-break (break-all → break-word)
- B-DS-2: expansion title-main/sub display:block (var inline)
- B-DS-3: matrix-bubble cursor + hover/focus

Sesjon 3 — risk-renderere til DS-summary-grid + ros-layout
(renderDpia, renderSecurity, renderRos)

Sesjon 4 — 6 compliance/govern-renderere bytter .report-meta-wrapper
mot DS-konvensjon (renderAiActPyramid, renderRequirements,
renderConformity, renderTransparency, renderFria, renderReview)

Sesjon 5 — phase-renderere til expansion-list per fase
(renderMigrate, renderPoc — slett .phase-detail-CSS)

Sesjon 5b — lavt-scope renderer-fixes:
- renderCost: ekstraher .monthly fra p50/p90-objekter
  (key-stats viste \"[object Object]\")
- renderCompare: distinctive-token-matching erstatter firstWord-heuristikk
- renderUtredning: droppet misvisende role=\"tab\"

Sesjon 6 — ship: kommentar-kompaksjon (145 → 122 linjer), 24 screenshots
regenerert til v1.14.0/, dokumentasjon (3 nivåer), versjonsbump,
mellomfiler slettet.

Lokal style-blokk: 191 → 122 effektive linjer (~36% reduksjon)
DS bumpet til v0.4.0 (delt mellom plugins, andre re-syncer på eget tempo)
17 renderere PASS visuell QA mot demo-data i begge themes
219 plugin-validering, 272 E2E playground, 7 migrations PASS

Refs V1.14.0-PLAN + V1.14.0-AUDIT (slettet ved ship per plan).

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

@@ -45,9 +45,7 @@
   <style>
     main#app { min-height: 100vh; padding: 0; }
 
-    /* Hidden-attribute respekt. Vendored .error-summary, .modal-backdrop osv.
-       setter eksplisitt display, som overstyrer HTMLs default [hidden] {display:none}.
-       Globalt override slik at hidden-attributt faktisk skjuler elementet. */
+    /* Hidden-attribute respekt: vendored DS setter eksplisitt display, overstyrer HTMLs [hidden]. */
     [hidden] { display: none !important; }
 
     /* .app-shell + .app-shell--wide hentet fra vendored DS v0.3 (tier3-supplement section 25) */
@@ -129,13 +127,9 @@
     /* .card + .card__* hentet fra vendored DS (base.css + tier3-supplement). */
     .catalog-tool-notice { padding: var(--space-2) var(--space-3); background: var(--color-bg-soft); border-left: 3px solid var(--color-primary-500); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
 
-    /* Foundation .page__*, .key-stats, .key-stat--{level} hentet fra vendored DS (tier3-supplement section 14-15).
-       .top-risks*, .top-risk*, .recommendation-card* hentet fra DS section 18-19.
-       .pair-before-after*, .pyramide-tier-detail*, .tab-list/.tab/.tab-panel også fra DS. */
+    /* Foundation patterns (page__*, key-stats, top-risks, recommendation-card, pair-before-after, pyramide-tier-detail, tab-list) hentet fra vendored DS. */
 
-    /* .verdict-pill: plugin-domain semantikk (go/block/approved/allow/warning/n-a) — distinkt fra
-       DS .verdict-pill-lg (severity-band: critical/high/medium/low/positive). Domain-pillen brukes
-       av architect-rapporter for GO/BLOCK-beslutninger; severity-pillen brukes for risiko-band. */
+    /* .verdict-pill: plugin-domain semantikk (go/block/approved/allow/warning/n-a) — distinkt fra DS .verdict-pill-lg (severity-band). */
     .verdict-pill { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0; }
     .verdict-pill[data-verdict="go"],
     .verdict-pill[data-verdict="approved"],
@@ -146,20 +140,17 @@
     .verdict-pill[data-verdict="failed"] { background: var(--color-severity-critical); color: var(--color-severity-critical-on); }
     .verdict-pill[data-verdict="n-a"] { background: var(--color-bg-soft); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); }
 
-    /* .scenario-card[data-status="met/partial/missing"]: plugin-spesifikke 3-stadie-status —
-       DS har kun "winner". Beholdt for AI Act / cost-distribution / capability-matrix-renderers. */
+    /* .scenario-card[data-status]: plugin-spesifikke 3-stadie-status — DS har kun "winner". Brukt i AI Act / cost / capability-matrix. */
     .scenario-card[data-status="met"]     { border-left: 4px solid var(--color-state-success); }
     .scenario-card[data-status="partial"] { border-left: 4px solid var(--color-severity-medium); }
     .scenario-card[data-status="missing"] { border-left: 4px solid var(--color-severity-critical); }
 
-    /* AI Act-pyramide-overrides: bumpe label-font så tier-tekst ikke klippes,
-       sikre tilstrekkelig parent-bredde (DS-default har ingen min-width). */
+    /* AI Act-pyramide-overrides: bumpe label-font så tier-tekst ikke klippes, sikre tilstrekkelig parent-bredde. */
     .pyramide { min-width: 480px; max-width: 100%; }
     .pyramide__tier { font-size: var(--font-size-md); padding: var(--space-3) var(--space-4); }
     @media (max-width: 560px) { .pyramide { min-width: 0; } .pyramide__tier { font-size: var(--font-size-sm); padding: 8px 12px; } }
 
-    /* .read-more-block + .suppressed-panel: native <details>-baserte mønstre — distinkte fra
-       DS .read-more og .suppressed (som bruker JS-toggled aria-expanded). */
+    /* .read-more-block + .suppressed-panel: native <details>-baserte mønstre — distinkte fra DS .read-more / .suppressed (JS-toggled). */
     .read-more-block { margin: var(--space-2) 0; }
     .read-more-block summary { cursor: pointer; color: var(--color-text-link); font-weight: var(--font-weight-medium); }
     .suppressed-panel { margin: var(--space-4) 0 0 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-soft); border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-md); opacity: 0.85; }
@@ -169,10 +160,7 @@
     .suppressed-panel__item { padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text-secondary); display: flex; gap: var(--space-3); align-items: baseline; }
     .suppressed-panel__id { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
 
-    /* v1.13.0 fix (B2): .report-table — DS har ikke implementert denne klassen, men
-       playground-rendrere bruker den i 6+ rapporter (Trusler, Kostnadsoversikt,
-       TCO, Risiko-tabell, Key Metrics). Lokal styling som komplementerer DS-tokens.
-       Speilet fra llm-security v7.6.1 commit f9b555a. */
+    /* v1.13.0 fix (B2): .report-table — DS har ikke denne klassen, brukt i 6+ rapporter. Speilet fra llm-security v7.6.1. */
     .report-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--font-size-sm); }
     .report-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--color-border-moderate); background: var(--color-bg-soft); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
     .report-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; color: var(--color-text-primary); }
@@ -180,13 +168,10 @@
     .report-table tbody tr:hover { background: var(--color-bg-soft); }
     .report-table code { font-family: var(--font-family-mono); font-size: 12px; background: var(--color-surface-sunken); padding: 1px 6px; border-radius: var(--radius-sm); }
 
-    /* v1.13.0 fix (B5): recommendation-card body kan inneholde lange single-line
-       tekster (URLer, owner-tags, dato). Tving word-wrap så grid-celle (auto + 1fr)
-       ikke skubber innhold utenfor viewport. */
+    /* v1.13.0 fix (B5): recommendation-card body — tving word-wrap for lange URLer/owner-tags i grid-celle. */
     .recommendation-card__body { overflow-wrap: anywhere; word-break: break-word; }
 
-    /* v1.14.0 sesjon 3: layout-utilities for risk-rapporter (renderDpia, renderSecurity, renderRos).
-       Speiler Anthropic-ref ros-lier-scenario. Hoist til DS i v1.15.0 hvis andre plugins trenger samme. */
+    /* v1.14.0 sesjon 3: layout-utilities for risk-rapporter (renderDpia/Security/Ros). Speiler Anthropic-ref ros-lier-scenario. Hoist til DS i v1.15.0. */
     .ros-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; margin-block: var(--space-5); }
     .summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: start; margin-block: var(--space-5); }
     @media (max-width: 980px) { .ros-layout, .summary-grid { grid-template-columns: 1fr; } }
@@ -199,17 +184,8 @@
     .adr-meta dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
     .adr-meta dd { margin: 0; color: var(--color-text-primary); }
 
-    /* B-DS-1, B-DS-2, B-DS-3 (v1.14.0 sesjon 2): tre lokal-overrides slettet.
-       Fixes nå i shared/playground-design-system/ v0.4.0:
-         - .kanban-card__name (break-word + overflow-wrap)
-         - .expansion__title-main/sub (display: block)
-         - .matrix__bubble (cursor + hover + focus) */
-
-    /* v1.14.0 sesjon 5: .phase-detail-CSS slettet — renderMigrate + renderPoc
-       bruker nå <div class="expansion">-list (DS-supplement) i stedet for det
-       lokale .phase-detail-mønsteret. v1.13.1-defensive layout-overrides for
-       .top-risks (sesjon 3), .aiact-timeline + .report-meta + .suppressed-panel
-       (sesjon 4) og .phase-detail (sesjon 5) er nå alle ute. */
+    /* B-DS-1/2/3 (sesjon 2): kanban-card-word-break, expansion-title-block, matrix-bubble-cursor — fix i shared/ DS v0.4.0. */
+    /* v1.14.0 sesjon 5: .phase-detail-CSS slettet (renderMigrate/Poc bruker DS expansion); v1.13.1-defensive overrides for top-risks/aiact-timeline/report-meta/suppressed-panel/phase-detail clear:both alle ute. */
   </style>
 </head>
 <body>