nav: shrink home SVG to 14px so pill matches numbered-pill height

Author: jdalton

scripts/walkthrough.mts

@@ -602,7 +602,7 @@ async function generate(
     ) {
       html = html.replace(
         '<div class="part-nav">',
-        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough index" title="Back to index"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg></a>',
+        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough index" title="Back to index"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg></a>',
       )
     }
 

walkthrough-overrides.css

@@ -701,16 +701,16 @@ body.wt-ready .topbar-actions {
  * reads as a distinct category ("root" vs "children"). Tooltip
  * (title attribute on the anchor) carries the label for keyboard /
  * screen-reader users; visual users read the glyph. */
+/* Home-link pill matches the numbered part-pill footprint exactly —
+ * same padding (4px 10px from the upstream .part-nav rule) and the
+ * inline-flex + line-height:1 combo makes the 14px SVG land in the
+ * same pill height as the 12px text labels. */
 .topbar .part-nav a.wt-home-link {
   border-color: rgba(255, 255, 255, 0.55) !important;
   margin-right: 8px;
-  /* Tighten padding so the inline SVG icon sits at the same visual
-   * height as the numbered pill labels — the icon's 16px square
-   * otherwise runs taller than the text row. */
   display: inline-flex;
   align-items: center;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  line-height: 1;
 }
 .topbar .part-nav a.wt-home-link svg {
   display: block;