fix charts, update html embed and responsive image description background, fix pdf generation

app/src/components/HtmlEmbed.astro

@@ -75,7 +75,13 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     font-weight: 600; 
     font-size: 0.95rem; 
     color: var(--text-color);
-    margin: 0 0 6px 0;
+    margin: 0;
+    padding: var(--spacing-1);
+    background: var(--page-bg);
+    position: relative;
+    z-index: var(--z-elevated);
+    display: block;
+    width: 100%;
   }
   .html-embed__card {
     background: var(--code-bg);
@@ -92,7 +98,13 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
     text-align: left; 
     font-size: 0.9rem; 
     color: var(--muted-color); 
-    margin: 6px 0 0 0; 
+    margin: 0; 
+    padding: var(--spacing-1);
+    background: var(--page-bg);
+    position: relative;
+    z-index: var(--z-elevated);
+    display: block;
+    width: 100%;
   }
   /* Plotly – fragments & controls */
   .html-embed__card svg text { fill: var(--text-color) !important; }

app/src/components/ResponsiveImage.astro

@@ -169,6 +169,7 @@ const dataDownloadable = (downloadable === true || (imgProps as any)['data-downl
 
   figure { margin: var(--block-spacing-y) 0; }
   figcaption { text-align: left; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
+  figcaption { background: var(--page-bg); position: relative; z-index: var(--z-elevated); display: block; width: 100%; }
   .image-credit { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-color); }
   .image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
 

app/src/content/embeds/against-baselines-deduplicated.html

@@ -171,6 +171,10 @@
 
       // Add marker definitions for different shapes
       const defs = svg.append('defs');
+      // Clip-path to constrain drawing to chart area
+      const clipId = `clip-${Math.random().toString(36).slice(2)}`;
+      const clipPath = defs.append('clipPath').attr('id', clipId);
+      const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', 0);
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
@@ -183,6 +187,10 @@
       const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
+      // Apply clipping to plotted elements (areas, lines, points)
+      gAreas.attr('clip-path', `url(#${clipId})`);
+      gLines.attr('clip-path', `url(#${clipId})`);
+      gPoints.attr('clip-path', `url(#${clipId})`);
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -310,6 +318,9 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
+        // Update clip rect to match inner plotting area
+        clipRect.attr('width', innerWidth).attr('height', innerHeight);
+
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);