fix(story): collapse evidence callouts

Author: sankalpgambhir

src/main.js

@@ -495,18 +495,24 @@ function renderStoryEvidenceCallout(container, callout) {
   container.hidden = !callout;
   if (!callout) return;
 
+  container.tabIndex = 0;
+
   const label = document.createElement("p");
   label.className = "story-evidence-callout__label";
   label.textContent = callout.label;
 
+  const content = document.createElement("div");
+  content.className = "story-evidence-callout__content";
+
   const title = document.createElement("h3");
   title.textContent = callout.title;
 
   const body = document.createElement("p");
   body.className = "story-evidence-callout__body";
   body.textContent = callout.body;
 
-  container.append(label, title, body);
+  content.append(title, body);
+  container.append(label, content);
 
   if (!callout.stats?.length) return;
   const statList = document.createElement("div");
@@ -516,7 +522,7 @@ function renderStoryEvidenceCallout(container, callout) {
     badge.textContent = stat;
     statList.append(badge);
   }
-  container.append(statList);
+  content.append(statList);
 }
 
 /**

src/story.css

@@ -474,9 +474,12 @@
   right: 22px;
   z-index: 3;
   display: grid;
-  gap: 10px;
-  width: min(320px, calc(100% - 44px));
-  padding: 16px;
+  gap: 0;
+  width: min(176px, calc(100% - 44px));
+  max-width: min(320px, calc(100% - 44px));
+  max-height: 48px;
+  overflow: hidden;
+  padding: 13px 14px 12px;
   border: 1px solid rgba(111, 161, 255, 0.32);
   border-radius: var(--radius-md);
   background:
@@ -487,13 +490,35 @@
     0 18px 50px rgba(0, 0, 0, 0.42);
   backdrop-filter: blur(18px) saturate(140%);
   -webkit-backdrop-filter: blur(18px) saturate(140%);
-  pointer-events: none;
+  pointer-events: auto;
+  transition:
+    width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    padding 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    border-color 200ms ease,
+    box-shadow 200ms ease;
 }
 
 .story-evidence-callout[hidden] {
   display: none;
 }
 
+.story-evidence-callout:hover,
+.story-evidence-callout:focus-within {
+  width: min(320px, calc(100% - 44px));
+  max-height: 280px;
+  padding: 16px;
+  border-color: rgba(111, 161, 255, 0.5);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.08) inset,
+    0 24px 54px rgba(0, 0, 0, 0.46);
+}
+
+.story-evidence-callout:focus-visible {
+  outline: 2px solid rgba(111, 161, 255, 0.6);
+  outline-offset: 4px;
+}
+
 .map-tooltip {
   position: absolute;
   z-index: 6;
@@ -569,10 +594,34 @@
 .story-evidence-callout__label {
   margin: 0;
   color: var(--accent);
-  font-size: 0.66rem;
+  font-size: 0.7rem;
   font-weight: 850;
   letter-spacing: 0.16em;
   text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.story-evidence-callout__content {
+  display: grid;
+  gap: 10px;
+  max-height: 0;
+  margin-top: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition:
+    max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    margin-top 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 180ms ease,
+    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.story-evidence-callout:hover .story-evidence-callout__content,
+.story-evidence-callout:focus-within .story-evidence-callout__content {
+  max-height: 220px;
+  margin-top: 10px;
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .story-evidence-callout h3 {
@@ -697,8 +746,19 @@ footer {
     top: auto;
     right: auto;
     width: auto;
+    max-width: none;
+    max-height: none;
     margin: 0 18px 18px;
     pointer-events: auto;
+    overflow: visible;
+  }
+
+  .story-evidence-callout__content {
+    max-height: none;
+    margin-top: 10px;
+    overflow: visible;
+    opacity: 1;
+    transform: none;
   }
 
   .story-step {