@motion-proto/live-tokens 0.94.3 → 0.95.0

package/src/demo/DemoBar.svelte

@@ -40,11 +40,13 @@
      sections beneath it. The right side stays empty for the editor's collapsed
      toggle, which pins top-right. */
   .bar {
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin-inline: auto;
-    padding: var(--space-12) var(--space-32);
+    padding-block: var(--space-12);
+    padding-inline: var(--columns-margin);
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
+    grid-template-columns: repeat(var(--columns-count), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
   }
 
@@ -57,20 +59,36 @@
     row-gap: var(--space-8);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .pickers {
       grid-column: 1 / -1;
     }
   }
 
   /* No room beside the editor's toggle on a phone, so the pickers sit in the
-     page below it and scroll away. */
+     page below it and scroll away, clearing the toggle only when it rests in
+     the top band. */
   @media (max-width: 600px) {
     .demo-bar {
       position: static;
     }
     .bar {
-      padding: var(--space-64) var(--space-16) 0;
+      padding-block: max(var(--space-16), calc(var(--lt-pill-clearance, 0px) + var(--space-8))) var(--space-16);
+    }
+    /* Side by side, each label over a trigger that fills its half. */
+    .pickers {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: var(--space-12);
+    }
+    .pickers :global(.chrome-select) {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-space-4);
+    }
+    .pickers :global(.chrome-select-trigger) {
+      width: 100%;
+      min-width: 0;
     }
   }
 </style>

package/src/demo/FloatingTokenTags.css

@@ -79,8 +79,10 @@
 
 .ftt-string {
   stroke: var(--ftt-contrast-color);
+  fill: none;
   stroke-width: 2;
   stroke-linecap: round;
+  stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
   opacity: var(--ftt-string-opacity);
   transition: opacity 150ms ease, stroke 150ms ease;
@@ -124,8 +126,9 @@
 
 /* --- Floating tag wrapper ------------------------------------------------- */
 .ftt-float {
+  --ftt-shift-x: -50%;
   position: absolute;
-  translate: -50% -50%;
+  translate: var(--ftt-shift-x) -50%;
   rotate: var(--ftt-rot, 0deg);
   animation: ftt-bob var(--ftt-bob-duration, 7s) ease-in-out infinite;
   z-index: 4;
@@ -134,7 +137,7 @@
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-  width: 14rem;
+  width: max-content;
 }
 
 /* Lift open tag so its dropdown paints over sibling tags. */
@@ -159,8 +162,8 @@
 }
 
 @keyframes ftt-bob {
-  0%, 100% { translate: -50% -50%; }
-  50%      { translate: -50% calc(-50% + var(--ftt-bob-distance, -8px)); }
+  0%, 100% { translate: var(--ftt-shift-x) -50%; }
+  50%      { translate: var(--ftt-shift-x) calc(-50% + var(--ftt-bob-distance, -8px)); }
 }
 
 /* --- Property label paired with each tag ---------------------------------- */
@@ -272,6 +275,32 @@
   z-index: 10;
 }
 
+/* --- Stacked layout ------------------------------------------------------ */
+/* Narrow stage: tags hang in a column left of the box and the strings elbow
+   into its top and bottom edges. `left` positions each tag's left edge. */
+.ftt-stacked .ftt-box {
+  left: auto;
+  right: 0;
+  translate: 0 -50%;
+  width: 10rem;
+  padding: 0.75rem 1rem;
+}
+
+.ftt-stacked .ftt-float {
+  --ftt-shift-x: 0%;
+  rotate: 0deg;
+  align-items: flex-start;
+}
+
+.ftt-stacked .ftt-float-property {
+  padding-left: 0.75rem;
+}
+
+.ftt-stacked .ftt-dropdown-wrap {
+  left: 0;
+  translate: none;
+}
+
 /* --- Reduced motion ------------------------------------------------------- */
 @media (prefers-reduced-motion: reduce) {
   .ftt-float {

package/src/demo/FloatingTokenTags.svelte

@@ -18,6 +18,10 @@
     /** Tag center, in % of the stage. */
     top: number;
     left: number;
+    /** Stacked layout for a stage narrower than `NARROW_STAGE_PX`: tags form a
+     *  column left of the box, `left` is the tag's left edge, and the string
+     *  elbows into `anchor`. Nest anchors so higher tags land further right. */
+    narrow?: { top: number; left: number; anchor: Anchor };
     /** Bob delay, seconds. Negative values offset the start. */
     delay?: number;
     /** Static tilt, degrees. */
@@ -34,6 +38,7 @@
 
 <script lang="ts">
   import MenuSelect from '../system/components/MenuSelect.svelte';
+  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { contrastTokenForBackground } from '../system/backdrop';
   // `.ftt-tag` is hand-rolled (not Badge) so editing badge-* tokens doesn't
@@ -72,6 +77,7 @@
       icon: 'fas fa-fill-drip',
       label: '--surface-brand-high',
       top: 15, left: 20, delay: 0,    rotate: 3,
+      narrow: { top: 6,  left: 0,  anchor: { side: 'top', pos: 90 } },
       anchor: { side: 'inside', x: 10, y: 40 },
       controls: 'surface',
       placement: 'top',
@@ -81,6 +87,7 @@
       icon: 'fas fa-font',
       label: '--font-display',
       top: 5, left: 45, delay: -0.9, rotate: 2,
+      narrow: { top: 20, left: 5,  anchor: { side: 'top', pos: 64 } },
       anchor: { side: 'inside', x: 78, y: 28 },
       controls: 'font-family',
       placement: 'top',
@@ -89,6 +96,7 @@
       icon: 'fa-solid fa-bezier-curve',
       label: '--radius-2xl',
       top: 23, left: 75, delay: -1.8, rotate: 2,
+      narrow: { top: 34, left: 10, anchor: { side: 'top', pos: 38 } },
       anchor: { side: 'top', pos: 100 },
       controls: 'radius',
       placement: 'top',
@@ -97,6 +105,7 @@
       icon: 'fas fa-paint-roller',
       label: '--border-brand-strong',
       top: 79, left: 72, delay: -3.6, rotate: -2,
+      narrow: { top: 82, left: 8,  anchor: { side: 'bottom', pos: 84 } },
       anchor: { side: 'bottom', pos: 75 },
       controls: 'border-color',
       placement: 'top',
@@ -105,6 +114,7 @@
       icon: 'fas fa-grip-lines',
       label: '--border-width-3',
       top: 79, left: 28, delay: -5.2, rotate: -4,
+      narrow: { top: 66, left: 3,  anchor: { side: 'bottom', pos: 44 } },
       anchor: { side: 'bottom', pos: 25 },
       controls: 'border-width',
       placement: 'top',
@@ -138,8 +148,17 @@
   const DRAG_THRESHOLD_PX = 4;
   const dragStart = { px: 0, py: 0, tagIdx: -1, moved: false };
 
-  function tagTop(i: number): number  { return dragOverrides[i]?.top  ?? tags[i].top; }
-  function tagLeft(i: number): number { return dragOverrides[i]?.left ?? tags[i].left; }
+  const NARROW_STAGE_PX = 480;
+  let stageWidth = $state(0);
+  const stacked = $derived(
+    stageWidth > 0 && stageWidth < NARROW_STAGE_PX && tags.every(t => t.narrow),
+  );
+
+  function home(i: number): { top: number; left: number; anchor: Anchor } {
+    return (stacked && tags[i].narrow) || tags[i];
+  }
+  function tagTop(i: number): number  { return dragOverrides[i]?.top  ?? home(i).top; }
+  function tagLeft(i: number): number { return dragOverrides[i]?.left ?? home(i).left; }
 
   type BallState = { startedAt: number; duration: number; pendingValue: string };
   const ballStates = new SvelteMap<number, BallState>();
@@ -147,34 +166,38 @@
   const ballEls: HTMLSpanElement[] = $state([]);
 
   let stageEl: HTMLDivElement | undefined = $state();
+  let svgEl: SVGSVGElement | undefined = $state();
   let boxEl: HTMLDivElement | undefined = $state();
   const tagEls: HTMLSpanElement[] = $state([]);
-  const lineEls: SVGLineElement[] = $state([]);
+  const pathEls: SVGPathElement[] = $state([]);
   const knotEls: HTMLSpanElement[] = $state([]);
 
-  function anchorPoint(
-    anchor: Anchor,
-    cx = 50,
-    cy = 50,
-    w = boxSize.w,
-    h = boxSize.h,
-  ): { x: number; y: number } {
-    const halfW = w / 2, halfH = h / 2;
+  type Rect = { x: number; y: number; w: number; h: number };
+
+  function anchorPoint(anchor: Anchor, box: Rect): { x: number; y: number } {
     if (anchor.side === 'inside') {
-      return {
-        x: cx - halfW + (anchor.x / 100) * w,
-        y: cy - halfH + (anchor.y / 100) * h,
-      };
+      return { x: box.x + (anchor.x / 100) * box.w, y: box.y + (anchor.y / 100) * box.h };
     }
     const t = anchor.pos / 100;
     switch (anchor.side) {
-      case 'top':    return { x: cx - halfW + t * w, y: cy - halfH };
-      case 'bottom': return { x: cx - halfW + t * w, y: cy + halfH };
-      case 'left':   return { x: cx - halfW,         y: cy - halfH + t * h };
-      case 'right':  return { x: cx + halfW,         y: cy - halfH + t * h };
+      case 'top':    return { x: box.x + t * box.w, y: box.y };
+      case 'bottom': return { x: box.x + t * box.w, y: box.y + box.h };
+      case 'left':   return { x: box.x,             y: box.y + t * box.h };
+      case 'right':  return { x: box.x + box.w,     y: box.y + t * box.h };
     }
   }
 
+  const ELBOW_RADIUS_PX = 14;
+  const px = (n: number) => n.toFixed(2);
+
+  // Runs level out of the tag, then turns through a rounded corner into the box.
+  function elbowPath(x1: number, y1: number, x2: number, y2: number): string {
+    const sx = Math.sign(x2 - x1), sy = Math.sign(y2 - y1);
+    const r = Math.min(ELBOW_RADIUS_PX, Math.abs(x2 - x1), Math.abs(y2 - y1));
+    return `M${px(x1)} ${px(y1)} H${px(x2 - sx * r)} `
+      + `Q${px(x2)} ${px(y1)} ${px(x2)} ${px(y1 + sy * r)} V${px(y2)}`;
+  }
+
   // Reads `boxValues` (not `currentValues`) so the box repaints at impact.
   function resolveControl(name: TagControl): string | undefined {
     const idx = tags.findIndex(t => t.controls === name);
@@ -216,31 +239,35 @@
 
   // Kite strings and energy balls are recomputed each frame from the box's
   // measured rect so intrinsic sizing drives anchor placement.
+  let lastViewBox = '';
   function syncFrame() {
-    if (!stageEl) return;
+    if (!stageEl || !svgEl || !boxEl) return;
     syncConnectorContrast();
     syncBoxLabelContrast();
     const stageRect = stageEl.getBoundingClientRect();
     if (stageRect.width === 0 || stageRect.height === 0) return;
 
-    let boxCx = 50, boxCy = 50;
-    let boxW = boxSize.w, boxH = boxSize.h;
-    if (boxEl) {
-      const br = boxEl.getBoundingClientRect();
-      if (br.width > 0 && br.height > 0) {
-        boxCx = ((br.left + br.width / 2) - stageRect.left) / stageRect.width * 100;
-        boxCy = ((br.top  + br.height / 2) - stageRect.top)  / stageRect.height * 100;
-        boxW  = (br.width  / stageRect.width)  * 100;
-        boxH  = (br.height / stageRect.height) * 100;
-      }
+    // A pixel viewBox keeps the elbow corners round on any stage aspect.
+    const viewBox = `0 0 ${px(stageRect.width)} ${px(stageRect.height)}`;
+    if (viewBox !== lastViewBox) {
+      svgEl.setAttribute('viewBox', viewBox);
+      lastViewBox = viewBox;
     }
 
+    const br = boxEl.getBoundingClientRect();
+    const box: Rect = {
+      x: br.left - stageRect.left,
+      y: br.top - stageRect.top,
+      w: br.width,
+      h: br.height,
+    };
+
     const now = performance.now();
 
     for (let i = 0; i < tags.length; i++) {
       const tagEl = tagEls[i];
-      const lineEl = lineEls[i];
-      if (!tagEl || !lineEl) continue;
+      const pathEl = pathEls[i];
+      if (!tagEl || !pathEl) continue;
 
       // Tag endpoint: center of the pill's rounded cap on the box-facing side.
       const pill = tagEl.querySelector('.ftt-tag') as HTMLElement | null;
@@ -254,23 +281,19 @@
         radius = Math.min(raw, r.height / 2);
       }
 
-      const onRight = tags[i].left > 50;
-      const px = onRight ? r.left + radius : r.right - radius;
-      const py = r.top + r.height / 2;
-
-      const x1 = (px - stageRect.left) / stageRect.width * 100;
-      const y1 = (py - stageRect.top)  / stageRect.height * 100;
-
-      lineEl.setAttribute('x1', x1.toFixed(3));
-      lineEl.setAttribute('y1', y1.toFixed(3));
+      const capOnRight = stacked || tagLeft(i) <= 50;
+      const x1 = (capOnRight ? r.right - radius : r.left + radius) - stageRect.left;
+      const y1 = r.top + r.height / 2 - stageRect.top;
 
-      const a = anchorPoint(tags[i].anchor, boxCx, boxCy, boxW, boxH);
-      lineEl.setAttribute('x2', a.x.toFixed(3));
-      lineEl.setAttribute('y2', a.y.toFixed(3));
+      const a = anchorPoint(home(i).anchor, box);
+      pathEl.setAttribute(
+        'd',
+        stacked ? elbowPath(x1, y1, a.x, a.y) : `M${px(x1)} ${px(y1)} L${px(a.x)} ${px(a.y)}`,
+      );
       const knotEl = knotEls[i];
       if (knotEl) {
-        knotEl.style.left = `${a.x.toFixed(3)}%`;
-        knotEl.style.top  = `${a.y.toFixed(3)}%`;
+        knotEl.style.left = `${px(a.x)}px`;
+        knotEl.style.top  = `${px(a.y)}px`;
       }
 
       const ballEl = ballEls[i];
@@ -290,13 +313,10 @@
         triggerBloop();
         continue;
       }
-      const x2 = parseFloat(lineEl.getAttribute('x2') || '0');
-      const y2 = parseFloat(lineEl.getAttribute('y2') || '0');
       const eased = 1 - Math.pow(1 - t, 3);
-      const bx = x1 + (x2 - x1) * eased;
-      const by = y1 + (y2 - y1) * eased;
-      ballEl.style.left = `${bx.toFixed(3)}%`;
-      ballEl.style.top  = `${by.toFixed(3)}%`;
+      const p = pathEl.getPointAtLength(pathEl.getTotalLength() * eased);
+      ballEl.style.left = `${px(p.x)}px`;
+      ballEl.style.top  = `${px(p.y)}px`;
       ballEl.style.opacity = '1';
     }
   }
@@ -307,6 +327,7 @@
       syncFrame();
       rafId = requestAnimationFrame(loop);
     };
+    untrack(syncFrame);
     rafId = requestAnimationFrame(loop);
     return () => cancelAnimationFrame(rafId);
   });
@@ -469,17 +490,16 @@
 
 <div
   class="ftt-stage"
+  class:ftt-stacked={stacked}
   bind:this={stageEl}
+  bind:clientWidth={stageWidth}
   style:--ftt-bob-duration="{duration}s"
   style:--ftt-bob-distance="{-distance}px"
 >
-  <svg class="ftt-strings" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-    {#each tags as tag, i (i)}
-      {@const a = anchorPoint(tag.anchor)}
-      <line
-        bind:this={lineEls[i]}
-        x1={tag.left} y1={tag.top}
-        x2={a.x}      y2={a.y}
+  <svg class="ftt-strings" bind:this={svgEl} aria-hidden="true">
+    {#each tags as _t, i (i)}
+      <path
+        bind:this={pathEls[i]}
         class="ftt-string"
         class:ftt-live={ballStates.has(i)}
       />
@@ -504,15 +524,8 @@
     >I'm a button</span>
   </div>
 
-  {#each tags as tag, i (i)}
-    {@const a = anchorPoint(tag.anchor)}
-    <span
-      bind:this={knotEls[i]}
-      class="ftt-knot"
-      style:left="{a.x}%"
-      style:top="{a.y}%"
-      aria-hidden="true"
-    ></span>
+  {#each tags as _t, i (i)}
+    <span bind:this={knotEls[i]} class="ftt-knot" aria-hidden="true"></span>
   {/each}
 
   {#each tags as _t, i (i)}

package/src/demo/Section.svelte

@@ -33,14 +33,8 @@
 
 <style>
   .demo-section {
-    grid-column: 2 / span 10;
+    grid-column: var(--kit-content);
     display: flex;
     flex-direction: column;
   }
-
-  @media (max-width: 960px) {
-    .demo-section {
-      grid-column: 1 / -1;
-    }
-  }
 </style>

package/src/demo/SourceLinks.svelte

@@ -48,9 +48,10 @@
 <style>
   .source-links {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-48);
-    flex: none;
+    column-gap: var(--space-48);
+    row-gap: var(--space-16);
   }
 
   .brand-link {
@@ -148,9 +149,9 @@
     font-size: var(--font-size-xl);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .source-links:not(.compact) {
-      gap: var(--space-24);
+      column-gap: var(--space-24);
     }
   }
 </style>

package/src/demo/TestingLoops.svelte

@@ -30,6 +30,13 @@
     if (id) document.getElementById(id)?.scrollIntoView({ block: 'start' });
   });
 
+  function armName(arm: { skills: boolean; lookup: boolean }) {
+    if (arm.skills && arm.lookup) return 'Skills and lookup';
+    if (arm.skills) return 'Skills only';
+    if (arm.lookup) return 'Lookup only';
+    return 'Neither';
+  }
+
   function jump(event: MouseEvent, id: string) {
     event.preventDefault();
     contentsOpen = false;
@@ -68,7 +75,7 @@
       <h2 id="skills-title">LiveTokens skills</h2>
       <div class="text-columns skills-overview">
         <div>
-          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the CLI verifies the code.</p>
+          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the checker verifies the code.</p>
           <p>The package includes eight skills, and one setup command copies them into your project.</p>
         </div>
         <ul class="skill-stack">
@@ -356,29 +363,27 @@
   <section class="chapter" id="measured-value" aria-labelledby="measured-value-title">
     <div class="chapter-body">
       <h2 id="measured-value-title">Measured value</h2>
-      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the CLI. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
+      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the lookup, the <code>live-tokens components</code> command that lists each component with its entry and props. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
       <div class="eval-results">
         <Table>
           <table aria-label="Eval arms">
             <thead>
               <tr>
-                <th scope="col">Skills</th>
-                <th scope="col">CLI</th>
-                <th scope="col">Requirements right</th>
+                <th scope="col">Arm</th>
+                <th scope="col">Accuracy</th>
                 <th scope="col">Turns</th>
                 <th scope="col">Seconds</th>
                 <th scope="col">Cost</th>
               </tr>
             </thead>
             <tbody>
-              {#each result.arms as arm (`${arm.skills}-${arm.cli}`)}
+              {#each result.arms as arm (`${arm.skills}-${arm.lookup}`)}
                 <tr>
-                  <td>{arm.skills ? 'Yes' : 'No'}</td>
-                  <td>{arm.cli ? 'Yes' : 'No'}</td>
-                  <td>{arm.rowsRight}</td>
-                  <td>{arm.turns}</td>
-                  <td>{arm.seconds}</td>
-                  <td>{arm.cost}</td>
+                  <td>{armName(arm)}</td>
+                  <td data-label="Accuracy">{arm.rowsRight}</td>
+                  <td data-label="Turns">{arm.turns}</td>
+                  <td data-label="Seconds">{arm.seconds}</td>
+                  <td data-label="Cost">{arm.cost}</td>
                 </tr>
               {/each}
             </tbody>
@@ -386,10 +391,10 @@
         </Table>
       </div>
       <ul class="eval-summary">
-        <li><strong>Turns:</strong> the skill saves turns only through the CLI command. Without the CLI, the skill arm takes as many turns as the agent with neither.</li>
-        <li><strong>Time and cost:</strong> the skills and the CLI each save time on their own, and together the run costs less than half as much as with neither.</li>
+        <li><strong>Turns:</strong> the skill saves turns only through the lookup. Without the lookup, the skill arm takes as many turns as the agent with neither.</li>
+        <li><strong>Time and cost:</strong> the skills and the lookup each save time on their own, and together the run costs less than half as much as with neither.</li>
         <li><strong>Accuracy:</strong> every arm scores about the same. The choices come from the entries in the component files.</li>
-        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the CLI; this time 2 of 3 did, so that arm varies from run to run.</li>
+        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the lookup; this time 2 of 3 did, so that arm varies from run to run.</li>
       </ul>
       <div class="text-columns">
         <div>
@@ -456,9 +461,11 @@
     display: grid;
     grid-template-columns: repeat(var(--columns-count), minmax(var(--space-0), 1fr));
     column-gap: var(--columns-gutter);
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin-inline: auto;
-    padding: var(--space-48) var(--space-32) var(--space-64);
+    padding-block: var(--space-48) var(--space-64);
+    padding-inline: var(--columns-margin);
     color: var(--text-primary);
   }
 
@@ -664,6 +671,16 @@
     width: auto;
   }
 
+  /* The panel's stage padding sized for a figure makes a one-line toggle a tall slab. */
+  .contents {
+    --panel-stage-padding: var(--space-4);
+    --panel-stage-inline-padding: var(--space-8);
+  }
+
+  .contents :global(.panel) {
+    justify-content: flex-start;
+  }
+
   .contents-body {
     width: 100%;
     min-width: var(--space-0);
@@ -775,6 +792,24 @@
     overflow-x: auto;
   }
 
+  /* A phone frame scrolls the diagram, and the default overlay bar is too thin
+     to signal it. The standard scrollbar-width has no length value, and setting
+     it would disable these pseudo-elements in Chromium. */
+  .figure-scroll::-webkit-scrollbar {
+    height: var(--space-32);
+  }
+
+  .figure-scroll::-webkit-scrollbar-track {
+    background: var(--surface-neutral-low);
+    border-radius: var(--radius-full);
+  }
+
+  .figure-scroll::-webkit-scrollbar-thumb {
+    background: var(--surface-neutral-higher);
+    border: var(--border-width-1) solid var(--border-neutral);
+    border-radius: var(--radius-full);
+  }
+
   /* Inside the figure's subgrid, so 1 / 7 lines up with the text column. */
   figcaption {
     grid-column: 1 / 7;
@@ -950,10 +985,16 @@
       display: block;
     }
 
+    /* The top leaves room for the fixed editor toolbar above the back link. */
     .loops {
-      grid-template-columns: minmax(var(--space-0), 1fr);
-      /* Leave room for the fixed editor toolbar above the back link. */
-      padding: var(--space-64) var(--space-20) var(--space-48);
+      padding-block: var(--space-64) var(--space-48);
+    }
+
+    /* Both outrank the 1023px block's `.chapter-body > *`, so without this
+       they keep the 2 / -2 inset the rest of the chapter drops. */
+    .chapter-body > h1,
+    .chapter-body > .eval-results {
+      grid-column: 1 / -1;
     }
 
     h1 {
@@ -972,5 +1013,73 @@
       padding-block: var(--space-32);
     }
 
+    /* A phone leaves too little width for side-by-side columns, so each row stacks into a card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper :is(table, tbody, tr, td)) {
+      display: block;
+      min-width: var(--space-0);
+    }
+
+    :is(.rule-group, .eval-results) :global(.table-wrapper thead) {
+      display: none;
+    }
+
+    /* The row's first cell takes the table's header style and captions the card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper td:first-child) {
+      border-right: none;
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+      background: var(--table-default-header-surface);
+      color: var(--table-default-header-text);
+      font-family: var(--table-default-header-font-family);
+      font-size: var(--table-default-header-font-size);
+      font-weight: var(--table-default-header-font-weight);
+      line-height: var(--table-default-header-line-height);
+      /* Half again as tall as a body row, so each card's caption marks a break between rules. */
+      padding-top: calc(var(--table-default-cell-padding-top, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+    }
+
+    .rule-group :global(.table-wrapper td:last-child) {
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) + 0.5lh);
+    }
+
+    .eval-results :global(.table-wrapper tr:not(:last-child) td:last-child) {
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+    }
+
+    /* Each rule stands as its own box: the wrapper hands its chrome to every row.
+       Visible overflow keeps the wrapper's scroll box from clipping each row's shadow. */
+    .rule-group :global(.table-wrapper) {
+      overflow: visible;
+      background: none;
+      border: none;
+      border-radius: var(--radius-none);
+      box-shadow: none;
+    }
+
+    .rule-group :global(.table-wrapper tbody) {
+      display: grid;
+      gap: var(--space-12);
+    }
+
+    .rule-group :global(.table-wrapper tr) {
+      overflow: hidden;
+      background: var(--table-default-surface);
+      border: var(--table-default-border-width) solid var(--table-default-border);
+      border-radius: var(--table-default-radius);
+      box-shadow: var(--table-default-shadow);
+    }
+
+    /* The hidden header row named these columns, so each value carries its own label. */
+    .eval-results :global(.table-wrapper td[data-label]) {
+      display: grid;
+      grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
+      column-gap: var(--space-12);
+      border-right: none;
+    }
+
+    .eval-results :global(.table-wrapper td[data-label]::before) {
+      content: attr(data-label);
+      font-weight: var(--table-default-header-font-weight);
+    }
   }
 </style>