From 5c5c7b40a976f3f04f787b0988250a2bd7bfb9f0 Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <hello@fromaitochitta.com>
Date: Fri, 8 May 2026 20:27:02 +0200
Subject: [PATCH] =?UTF-8?q?refactor(ms-ai-architect):=20playground=20v1.14?=
 =?UTF-8?q?.0=20sesjon=204=20=E2=80=94=20compliance/govern=20til=20DS-konv?=
 =?UTF-8?q?ensjon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- renderAiActPyramid: 2x <aside class="card"> (rolle/begrunnelse + obligations)
  med <dl class="adr-meta"> og <ol class="stack-sm"> erstatter .report-meta-wrapper
- renderRequirements: outer .report-meta fjernet, bruker <div class="stack-sm">
- renderConformity: timeline standalone i <section class="aiact-timeline-section">
- renderTransparency/renderFria/renderReview: verifisert (DS allerede riktig)
- Slettet .report-meta-CSS-blokk (~14 linjer) + .aiact-timeline + .suppressed-panel +
  .kanban-board + .report-meta fra defensiv layout
- La til .adr-meta-grid + .aiact-timeline-section konsolidert med findings-section
- Style-blokk: 188 -> 178 effektive linjer

Refs V1.14.0-AUDIT.local.md sub-batch A.
---
 .../ms-ai-architect-playground.html           | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
index 304dfe3..e59b898 100644
--- a/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
@@ -190,24 +190,14 @@
     .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; } }
-    .findings-section, .small-multiples-section { margin-block: var(--space-5); }
-    .findings-section > h3, .small-multiples-section > h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
+    .findings-section, .small-multiples-section, .aiact-timeline-section { margin-block: var(--space-5); }
+    .findings-section > h3, .small-multiples-section > h3, .aiact-timeline-section > h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
     .findings__items--standalone { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
 
-    /* v1.13.1 fix (B7): .report-meta er ikke definert i vendored DS — vi bruker
-       <section class="report-meta"> som outer-wrapper i flere rendrere. Browser-
-       defaults for <dl><dd><ul> gir uforutsigbare indents (Forpliktelser-bullet-
-       liste i renderAiActPyramid, expansion__body-dl i renderRequirements).
-       Lokal reset gir konsistent venstre-justering uavhengig av nestelse.
-       MERKNAD: .report-meta-mønsteret fjernes i sesjon 4 (V1.14.0) — erstattes
-       av <aside class="card"> + <dl class="adr-meta"> per renderer. */
-    .report-meta { display: block; margin-block: var(--space-4); }
-    .report-meta > h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
-    .report-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
-    .report-meta dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
-    .report-meta dd { margin: 0; color: var(--color-text-primary); }
-    .report-meta > ul { padding-left: var(--space-5); margin: 0; }
-    .report-meta > ul > li { margin-bottom: var(--space-1); color: var(--color-text-primary); }
+    /* v1.14.0 sesjon 4: .adr-meta erstatter .report-meta dl-pattern. Brukes i renderAdr og renderAiActPyramid. */
+    .adr-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
+    .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:
@@ -219,11 +209,11 @@
        seksjoner som kan ha overflow-issues mot foregående grid-elementer
        (.small-multiples, .kanban-board, .mat-ladder). Sikrer eksplisitt
        block-flow + clear så de ikke leker grid-celler eller flyter.
-       v1.14.0 sesjon 3: .top-risks fjernet (ligger nå i .card med riktig DS block-flow). */
-    .suppressed-panel,
+       v1.14.0 sesjon 3: .top-risks fjernet (ligger nå i .card med riktig DS block-flow).
+       v1.14.0 sesjon 4: .aiact-timeline + .kanban-board + .report-meta + .suppressed-panel
+       fjernet (kanban-board → aiact-timeline-section / details.suppressed-panel stacker
+       naturlig som block-level <section>/<details>; .report-meta-mønsteret er borte). */
     .phase-detail,
-    .aiact-timeline,
-    .kanban-board + .report-meta,
     .mat-ladder + .phase-detail,
     .phase-detail + .phase-detail { display: block; clear: both; width: 100%; }
     .phase-detail { margin-top: var(--space-5); }
@@ -3468,15 +3458,23 @@
                '</details>';
       }).join('') + '</div>';
 
+      // v1.14.0 sesjon 4: <aside class="card"> med <dl class="adr-meta"> for rolle/begrunnelse
+      // og <ol class="stack-sm"> for obligations. Erstatter tidligere .report-meta-wrapper.
+      const meta = '<aside class="card">' +
+        '<h3>Rolle og begrunnelse</h3>' +
+        '<dl class="adr-meta">' +
+          '<dt>Rolle</dt><dd>' + escapeHtml(data.role || '—') + '</dd>' +
+          (data.reasoning ? '<dt>Begrunnelse</dt><dd>' + escapeHtml(data.reasoning).slice(0, 800) + '</dd>' : '') +
+        '</dl>' +
+      '</aside>';
       const obligationsHtml = (data.obligations || []).length
-        ? '<section class="report-meta"><h4>Forpliktelser</h4><ul>' +
-            data.obligations.map(function (o) { return '<li>' + escapeHtml(o) + '</li>'; }).join('') +
-          '</ul></section>'
+        ? '<aside class="card">' +
+            '<h3>Forpliktelser</h3>' +
+            '<ol class="stack-sm">' +
+              data.obligations.map(function (o) { return '<li>' + escapeHtml(o) + '</li>'; }).join('') +
+            '</ol>' +
+          '</aside>'
         : '';
-      const meta = '<section class="report-meta"><dl>' +
-        '<dt>Rolle</dt><dd>' + escapeHtml(data.role || '—') + '</dd>' +
-        (data.reasoning ? '<dt>Begrunnelse</dt><dd>' + escapeHtml(data.reasoning).slice(0, 800) + '</dd>' : '') +
-        '</dl></section>';
       const body = '<div class="pyramide">' + tiersHtml + '</div>' + tierDescsHtml + meta + obligationsHtml;
       slot.innerHTML = renderPageShell({
         eyebrow: 'KLASSIFISERING',
@@ -3540,9 +3538,9 @@
                '</div>';
       }).join('') : '';
 
-      // v1.13.0 fix (B1): bytt .findings-outer til .report-meta-wrapper
-      // (DS' .findings er grid 360px+1fr, klemmer expansion-list til 360px).
-      const body = cardsHtml + (expansionsHtml ? '<section class="report-meta">' + expansionsHtml + '</section>' : '');
+      // v1.14.0 sesjon 4: stack-sm rundt expansion-list (etter B-DS-2 fix gir
+      // expansion__title-main/sub display: block, så vertikal stacking er ren).
+      const body = cardsHtml + (expansionsHtml ? '<div class="stack-sm">' + expansionsHtml + '</div>' : '');
       slot.innerHTML = renderPageShell({
         eyebrow: 'KRAV',
         title: data.title || 'AI Act-krav per risiko og rolle',
@@ -3654,8 +3652,10 @@
                    '</div>' +
                  '</div>';
         }).join('');
+        // v1.14.0 sesjon 4: timeline-section standalone (uten .report-meta-wrapper).
         timelineHtml =
-          '<section class="report-meta"><h4>Frister</h4>' +
+          '<section class="aiact-timeline-section">' +
+            '<h3>Frister</h3>' +
             '<div class="aiact-timeline">' +
               '<div class="aiact-timeline__track">' +
                 '<div class="aiact-timeline__progress" style="width: 0%"></div>' +