From 73f33a7b898e76cde33e31b8f991f6dde0615ca1 Mon Sep 17 00:00:00 2001
From: Andrei Josan <josan@adobe.com>
Date: Tue, 21 Apr 2026 18:42:58 +0300
Subject: [PATCH] chore: report UI follow-ups and project notes

- PROJECT.md: documentation updates
- report-ai-visibility: CSS refinements
- report-download, report-hero: CSS adjustments
- package-lock: dependency lockfile sync

Made-with: Cursor
---
 PROJECT.md                                    |   4 +-
 .../report-ai-visibility.css                  | 108 ++++++++++++++----
 blocks/report-download/report-download.css    |  25 ++--
 blocks/report-hero/report-hero.css            |  33 +-----
 package-lock.json                             |   4 +-
 5 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/PROJECT.md b/PROJECT.md
index 6ede860..00a5621 100644
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -50,10 +50,10 @@ A tabbed carousel with three persona views — Executive overview, Marketer insi
 A split layout with a heading, description, and download CTA on the left, and an interactive PDF card preview on the right. The card has a red patterned background, the report title, and hover effects. Shows metadata (last updated date, page count). PDF title text is resolved from the block row markup (including nested links).
 
 ### report-ai-visibility
-Summit “LLM visibility” / “Performance insights” experience: stat cards, platform coverage pills, side-by-side comparison panels with charts (horizontal bars, platform bars, score tables, big figures). Horizontal bars support count vs percent display (authoring flags `|percent` / `|count`, or inferred share-style totals), and can show platform favicons when labels match known brands. Gap, key insight, and CTA rows render below the panels; the CTA copies from the authored block cells. An empty shell section next to the block hosts the nested **report-scores** page-performance cards (no extra grid padding in that shell).
+Summit “LLM visibility” / “Performance insights” experience: stat cards, platform coverage pills, side-by-side comparison panels with charts (horizontal bars, platform bars, score tables, big figures). Horizontal bars support count vs percent display (authoring flags `|percent` / `|count`, or inferred share-style totals), and can show platform favicons when labels match known brands. Gap, key insight, and CTA rows render below the panels; the CTA copies from the authored block cells. An empty shell section next to the block hosts the nested **report-scores** page-performance cards (no extra grid padding in that shell). In that shell, **report-scores** summary pills (good / needs work / poor counts) are moved into the shell’s `.rav-section-head` so they sit on the same row as the “Performance insights” title.
 
 ### report-scores
-Page performance cards (URL, score meter, metrics) used inside the AI visibility performance shell and elsewhere. Card grid and meters are scoped under `.report-scores`.
+Page performance cards (URL, score meter, metrics) used inside the AI visibility performance shell and elsewhere. Card grid and meters are scoped under `.report-scores`. When embedded in the performance insights empty shell, the top summary pill strip is repositioned next to the section title (see **report-ai-visibility**).
 
 ### header
 Fetches nav content and renders the Adobe logo, site title ("Adobe Summit Portal"), a help icon button, and a dark mode toggle button (half-moon icon) on the right edge. Preference is persisted in localStorage.
diff --git a/blocks/report-ai-visibility/report-ai-visibility.css b/blocks/report-ai-visibility/report-ai-visibility.css
index d21c8d7..0abf5a1 100644
--- a/blocks/report-ai-visibility/report-ai-visibility.css
+++ b/blocks/report-ai-visibility/report-ai-visibility.css
@@ -107,35 +107,37 @@
 @media (width >= 1000px) {
   .report-ai-visibility .rav-stats-story-row {
     display: grid;
-    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+    grid-template-columns: repeat(1, 1fr);
     align-items: stretch;
-    gap: 16px;
-    padding: 16px;
+    gap: 0;
+    padding: 0;
     box-sizing: border-box;
   }
 
   .report-ai-visibility .rav-stats-story-row > .rav-stats {
     display: flex;
-    flex-direction: column;
+    flex-flow: row nowrap;
     padding: 0;
-    border: 1px solid light-dark(rgb(233 233 233), rgb(50 50 50));
-    border-radius: 16px;
-    background: light-dark(#fff, #1a1a1a);
-    box-shadow: var(--rpt-card-shadow);
-    overflow: hidden;
+    border: none;
+    border-bottom: 2px solid light-dark(rgb(243 243 243 / 100%), #444);
+    border-image: none;
+    border-radius: 0;
+    background: unset;
+    box-shadow: none;
+    overflow: visible;
   }
 
   .report-ai-visibility .rav-stats-story-row > .rav-stats > .rav-stat-card {
     flex: 1 1 0;
     justify-content: center;
-    border-right: none;
-    border-bottom: 1px solid var(--rpt-border);
-    padding: 14px 24px;
+    border: none;
+    border-right: 1px solid rgb(0 0 0 / 8%);
+    padding: 20px 24px;
     gap: 2px;
   }
 
   .report-ai-visibility .rav-stats-story-row > .rav-stats > .rav-stat-card:last-child {
-    border-bottom: none;
+    border-right: none;
   }
 
   .report-ai-visibility .rav-stats-story-row .rav-stat-value {
@@ -150,6 +152,11 @@
     height: 100%;
     padding: 24px 28px;
     justify-content: center;
+    box-shadow: none;
+    border-radius: 0;
+    border: none;
+    border-image: none;
+    border-bottom: 2px solid light-dark(rgb(243 243 243 / 100%), #444);
   }
 
   /* Inside the paired row the lone story panel should fill its half, not shrink to 50%. */
@@ -228,6 +235,11 @@
   border-image: none;
 }
 
+/* Two `.rav-panels` shells merged into one outer (see report-ai-visibility.js) */
+.report-ai-visibility .rav-panels-outer > .rav-panels + .rav-panels {
+  margin-top: 20px;
+}
+
 .report-ai-visibility .rav-panels {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -286,7 +298,7 @@
 }
 
 .report-ai-visibility .rav-panel-title {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--rpt-text-heading, var(--color-text-heading));
   margin: 0 0 -4px;
@@ -311,7 +323,7 @@
   color: light-dark(rgb(80 80 80 / 100%), #ccc);
   margin: 0;
   padding-top: 10px;
-  border-top: 1px solid var(--rpt-border, var(--color-border));
+  border-top: none;
   line-height: 1.5;
   font-style: italic;
 }
@@ -515,6 +527,7 @@
 
 /* ── Metric strip ─────────────────────────────────────────────────────────── */
 .report-ai-visibility .rav-metric-strip {
+  box-sizing: border-box;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -525,11 +538,12 @@
 }
 
 .report-ai-visibility .rav-ms-row {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 0;
   padding: 12px 16px;
-  align-items: center;
   border-bottom: 1px solid light-dark(#e5e7eb, #444);
 }
 
@@ -539,18 +553,18 @@
 
 .report-ai-visibility .rav-ms-label {
   font-size: 13px;
-  color: light-dark(#4b5563, #9ca3af);
+  color: light-dark(#505050, #9ca3af);
 }
 
 .report-ai-visibility .rav-ms-value {
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 24px;
+  font-weight: 800;
   color: light-dark(#111, #f9fafb);
 }
 
 .report-ai-visibility .rav-ms-note {
   font-size: 11px;
-  color: light-dark(#9ca3af, #6b7280);
+  color: light-dark(#7a7a7a, #6b7280);
 }
 
 /* ── Recommendation list ──────────────────────────────────────────────────── */
@@ -704,7 +718,8 @@
   display: block;
 }
 
-.report-ai-visibility #discover-adobe-llm-optimizer {
+.report-ai-visibility #discover-adobe-llm-optimizer,
+.report-ai-visibility #visit-your-adobe-llm-optimizer-dashboard-to-learn-more {
   font-size: 20px;
   margin-bottom: 8px;
 }
@@ -890,6 +905,17 @@
     flex-wrap: nowrap;
   }
 
+  .report-ai-visibility.rav-empty-shell .rav-section-head {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: 10px;
+  }
+
+  .report-ai-visibility.rav-empty-shell .rav-section-head .rsc-summary-pills {
+    flex-basis: 100%;
+    justify-content: flex-end;
+  }
+
   .report-ai-visibility .rav-section-title {
     font-size: 16px;
   }
@@ -954,7 +980,7 @@
   }
 
   .report-ai-visibility .rav-panels-outer {
-    padding: 12px;
+    padding: 20px 12px 12px;
   }
 
   .report-ai-visibility .rav-panels {
@@ -1010,6 +1036,38 @@
   }
 }
 
+/* Performance insights shell: --rsc-* tokens for summary pills hoisted into .rav-section-head
+   (they are no longer descendants of .report-scores where those vars are defined). */
+.report-ai-visibility.rav-empty-shell {
+  --rsc-poor: light-dark(#d93025, #f87171);
+  --rsc-poor-bg: light-dark(#fde8e6, rgb(239 68 68 / 14%));
+  --rsc-warning: light-dark(#b86e00, #fbbf24);
+  --rsc-warning-bg: light-dark(#fff4e0, rgb(245 158 11 / 14%));
+  --rsc-good: light-dark(#1e9029, #4ade80);
+  --rsc-good-bg: light-dark(#e7f6ea, rgb(34 197 94 / 14%));
+  --rsc-surface: var(--rpt-surface, light-dark(#fff, #1a1a1a));
+  --rsc-surface-2: light-dark(#fafafa, #222);
+  --rsc-border: light-dark(#e9e9e9, #333);
+  --rsc-text-muted: light-dark(#5a5a5a, #a8a8a8);
+  --rsc-text-faint: light-dark(#7a7a7a, #888);
+  --rsc-red: var(--rpt-red, #e60000);
+  --rsc-red-bg: light-dark(#fff0f0, rgb(230 0 0 / 12%));
+}
+
+/* Performance insights shell: summary pills live in the section head, right of the title */
+.report-ai-visibility.rav-empty-shell .rav-section-head {
+  justify-content: space-between;
+}
+
+.report-ai-visibility.rav-empty-shell .rav-section-head .rsc-summary-pills {
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.report-ai-visibility.rav-empty-shell .rav-section-title {
+  min-width: 0;
+}
+
 /* Page performance cards (report-scores) nested under Performance insights shell */
 .report-ai-visibility.rav-empty-shell .rav-panels-outer > .report-scores {
   width: 100%;
diff --git a/blocks/report-download/report-download.css b/blocks/report-download/report-download.css
index 708f61d..1b517d4 100644
--- a/blocks/report-download/report-download.css
+++ b/blocks/report-download/report-download.css
@@ -6,8 +6,8 @@
 }
 
 .report-download {
-  background: light-dark(#f5f5f5, #2a2a2a);
-  color: light-dark(#1a1a1a, #e5e5e5);
+  background: light-dark(#fff, #2a2a2a);
+  color: light-dark(rgba(26, 26, 26, 1), #e5e5e5);
   display: grid;
   grid-template-columns: 1fr;
   gap: 48px;
@@ -238,7 +238,7 @@
 
 .report-download .rd-methodology-heading {
   font-size: 22px;
-  font-weight: 800;
+  font-weight: 700;
   color: light-dark(#1a1a1a, #fff);
   margin: 0;
   line-height: 1.2;
@@ -259,10 +259,10 @@
 }
 
 .report-download .rd-pillar {
-  background: light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 4%));
-  border: 1px solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
+  background: light-dark(rgb(248 248 248), rgb(255 255 255 / 4%));
+  border: none;
   border-radius: 12px;
-  padding: 20px;
+  padding: 20px 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -309,7 +309,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: light-dark(rgb(0 0 0 / 65%), rgb(255 255 255 / 65%));
-  margin: 8px 0 0;
+  margin: 8px 0 -8px;
 }
 
 .report-download .rd-methodology-steps {
@@ -325,10 +325,11 @@
 .report-download .rd-step {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  background: light-dark(rgb(0 0 0 / 3%), rgb(255 255 255 / 4%));
-  border: 1px solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
+  gap: 16px;
+  margin-block: 0;
+  padding: 20px 24px;
+  background: light-dark(rgb(248 248 248), rgb(255 255 255 / 4%));
+  border: none;
   border-radius: 12px;
 }
 
@@ -349,7 +350,7 @@
   font-size: 14px;
   font-weight: 700;
   color: light-dark(#1a1a1a, #fff);
-  margin: 0;
+  margin: 0 0 8px;
   line-height: 1.25;
 }
 
diff --git a/blocks/report-hero/report-hero.css b/blocks/report-hero/report-hero.css
index 1bbee75..1ce249e 100644
--- a/blocks/report-hero/report-hero.css
+++ b/blocks/report-hero/report-hero.css
@@ -291,7 +291,6 @@ body:has(.report-hero.insight) main {
   gap: 10px;
   margin-top: auto;
   padding-top: 16px;
-  border-top: 1px solid rgb(255 255 255 / 18%);
 }
 
 .report-hero.insight .rh-insight-text .rh-insight-meta .rh-insight-badge {
@@ -399,13 +398,13 @@ body:has(.report-hero.insight) main {
     display: flex;
     align-items: flex-start;
     justify-content: flex-end;
-    padding: 32px 64px 0 0;
+    padding: 48px 64px 0 0;
     overflow: hidden;
   }
 
   .report-hero.insight .rh-insight-image picture {
     display: block;
-    border-radius: 8px 8px 0 0;
+    border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
     width: 400px;
@@ -788,34 +787,6 @@ body:has(.report-hero.insight) main {
     font-weight: 400;
   }
 
-  .report-hero.insight .rh-insight-badge {
-    font-size: 13px;
-    font-weight: 500;
-    padding: 8px 14px 8px 12px;
-    margin-top: 12px;
-    gap: 8px;
-    border-radius: 999px;
-    background: rgb(0 0 0 / 28%);
-    border: 1px solid rgb(255 255 255 / 28%);
-    color: #fff;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
-    transition: background 160ms ease, transform 160ms ease;
-  }
-
-  .report-hero.insight .rh-insight-badge:hover,
-  .report-hero.insight .rh-insight-badge:focus-visible {
-    background: rgb(0 0 0 / 38%);
-  }
-
-  .report-hero.insight .rh-insight-badge:active {
-    transform: scale(0.98);
-  }
-
-  .report-hero.insight .rh-insight-badge-icon {
-    width: 14px;
-    height: 14px;
-  }
-
   .report-hero.insight > .rh-insight-bg-svg {
     display: block;
     top: auto;
diff --git a/package-lock.json b/package-lock.json
index 8edd129..b12f52d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "nx-boilerplate",
+  "name": "author-kit",
   "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "nx-boilerplate",
+      "name": "author-kit",
       "version": "1.3.0",
       "license": "Apache License 2.0",
       "dependencies": {