- The mobile nav toggle stayed visible on desktop because button.css's
  base rule (button:not(.icon-button), specificity 0-1-1) sets
  display:inline-flex, beating the bare-class .ad-doc-nav-toggle {
  display:none } (0-1-0). Matched specificity by targeting
  button.ad-doc-nav-toggle instead.
- The collapsed sidebar wrapped the (already button-styled) toggle in
  its own bordered/rounded box, nesting two card-like shapes. Moved the
  card treatment to the expanding nav panel itself so the collapsed
  state is just the toggle button.
- Kramdown's GFM parser defaults to GitHub's comment-style hard-wrap
  (every source newline becomes <br>), which turned every manually
  word-wrapped paragraph in the site into a choppy multi-line block.
  Disabled with hard_wrap: false.
- type="button" was on every button in the site, but nothing here is
  ever inside a <form> (checked), so it was inert boilerplate; removed
  it everywhere rather than defend against a scenario that doesn't
  occur in this codebase.

diff --git a/_components/button.md b/_components/button.md
index e249fe4..8c1a143 100644
--- a/_components/button.md
+++ b/_components/button.md
@@ -16,11 +16,11 @@ is destructive and irreversible only.
 <figure class="example">
 <figcaption>Variants</figcaption>
 <div>
-<button type="button">Cancel</button>
-<button type="button" data-variant="primary">Save</button>
-<button type="button" data-variant="dark">Finish setup</button>
-<button type="button" data-variant="ghost">Dismiss</button>
-<button type="button" data-variant="danger">Delete</button>
+<button>Cancel</button>
+<button data-variant="primary">Save</button>
+<button data-variant="dark">Finish setup</button>
+<button data-variant="ghost">Dismiss</button>
+<button data-variant="danger">Delete</button>
 </div>
 <details open><summary>Markup</summary>
 <pre><code>&lt;button type=&quot;button&quot;&gt;Cancel&lt;/button&gt;
@@ -39,9 +39,9 @@ grow a step of its own.
 <figure class="example">
 <figcaption>Sizes</figcaption>
 <div>
-<button type="button" data-variant="primary" data-size="sm">Small</button>
-<button type="button" data-variant="primary">Medium</button>
-<button type="button" data-variant="primary" data-size="lg">Large</button>
+<button data-variant="primary" data-size="sm">Small</button>
+<button data-variant="primary">Medium</button>
+<button data-variant="primary" data-size="lg">Large</button>
 </div>
 <details><summary>Markup</summary>
 <pre><code>&lt;button type=&quot;button&quot; data-variant=&quot;primary&quot; data-size=&quot;sm&quot;&gt;Small&lt;/button&gt;
@@ -58,8 +58,8 @@ disabled primary still reads as the primary.
 <figure class="example">
 <figcaption>States</figcaption>
 <div>
-<button type="button" data-variant="primary" disabled="">Disabled</button>
-<button type="button" aria-disabled="true">Not yet available</button>
+<button data-variant="primary" disabled="">Disabled</button>
+<button aria-disabled="true">Not yet available</button>
 </div>
 <details><summary>Markup</summary>
 <pre><code>&lt;button type=&quot;button&quot; data-variant=&quot;primary&quot; disabled=&quot;&quot;&gt;Disabled&lt;/button&gt;
@@ -86,7 +86,7 @@ button itself.
 <figure class="example">
 <figcaption>Icon</figcaption>
 <div>
-<button type="button" data-variant="primary">
+<button data-variant="primary">
   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
   New
 </button>
@@ -108,9 +108,9 @@ buttons, so it doubles as the styling hook — no wrapper class.
 <figcaption>Button group</figcaption>
 <div>
 <div role="group" aria-label="View">
-  <button type="button" data-size="sm">List</button>
-  <button type="button" data-size="sm">Board</button>
-  <button type="button" data-size="sm">Calendar</button>
+  <button data-size="sm">List</button>
+  <button data-size="sm">Board</button>
+  <button data-size="sm">Calendar</button>
 </div>
 </div>
 <details><summary>Markup</summary>
@@ -127,7 +127,7 @@ buttons, so it doubles as the styling hook — no wrapper class.
 <figure class="example">
 <figcaption>Block</figcaption>
 <div data-layout="stack">
-<button type="button" data-variant="primary" data-block>Take a photo</button>
+<button data-variant="primary" data-block>Take a photo</button>
 </div>
 <details><summary>Markup</summary>
 <pre><code>&lt;button type=&quot;button&quot; data-variant=&quot;primary&quot; data-block&gt;Take a photo&lt;/button&gt;</code></pre>
diff --git a/_components/card-row.md b/_components/card-row.md
index 3a6f34f..ebc73a5 100644
--- a/_components/card-row.md
+++ b/_components/card-row.md
@@ -40,8 +40,8 @@ a hover fill on its own; no `--clickable` modifier to remember.
 <figcaption>Clickable rows</figcaption>
 <div>
 <ul class="card" style="max-width: 22rem;">
-  <li><button type="button">Tax return 2025.pdf</button></li>
-  <li><button type="button">Warranty card.pdf</button></li>
+  <li><button>Tax return 2025.pdf</button></li>
+  <li><button>Warranty card.pdf</button></li>
 </ul>
 </div>
 <details><summary>Markup</summary>
diff --git a/_components/card.md b/_components/card.md
index 55016b2..e899101 100644
--- a/_components/card.md
+++ b/_components/card.md
@@ -39,8 +39,8 @@ it that has no element of its own to hang a selector on.
     <p style="margin:0; color: var(--ad-color-text-secondary); font-size: var(--ad-step--1);">Three people have called it "yellow" in review this month.</p>
   </div>
   <div class="card-footer">
-    <button type="button" data-variant="primary" data-size="sm">Approve</button>
-    <button type="button" data-variant="ghost" data-size="sm">Dismiss</button>
+    <button data-variant="primary" data-size="sm">Approve</button>
+    <button data-variant="ghost" data-size="sm">Dismiss</button>
   </div>
 </article>
 </div>
diff --git a/_components/dialog.md b/_components/dialog.md
index 2b17ca8..54388a0 100644
--- a/_components/dialog.md
+++ b/_components/dialog.md
@@ -27,8 +27,8 @@ pseudo-element only exists for a dialog shown modally.
     <header>Delete series?</header>
     <p>This removes all of its task history. This cannot be undone.</p>
     <footer>
-      <button type="button">Cancel</button>
-      <button type="button" data-variant="danger">Delete</button>
+      <button>Cancel</button>
+      <button data-variant="danger">Delete</button>
     </footer>
   </dialog>
 </div>
diff --git a/_components/icon-button.md b/_components/icon-button.md
index 1e7e9bf..333353a 100644
--- a/_components/icon-button.md
+++ b/_components/icon-button.md
@@ -20,13 +20,13 @@ sitting alone — `variant`/`size` mean different things for each — so
 <figure class="example">
 <figcaption>Variants</figcaption>
 <div>
-<button type="button" class="icon-button" aria-label="Delete">
+<button class="icon-button" aria-label="Delete">
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></svg>
 </button>
-<button type="button" class="icon-button" data-variant="outline" aria-label="Settings">
+<button class="icon-button" data-variant="outline" aria-label="Settings">
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3" /><path d="M12 2.5v3M12 18.5v3M3.6 7.2l2.6 1.5M17.8 15.3l2.6 1.5M3.6 16.8l2.6-1.5M17.8 8.7l2.6-1.5" /></svg>
 </button>
-<button type="button" class="icon-button" data-variant="accent" aria-label="Filter (active)">
+<button class="icon-button" data-variant="accent" aria-label="Filter (active)">
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16l-6 8v5l-4 2v-7z" /></svg>
 </button>
 </div>
@@ -48,9 +48,9 @@ sitting alone — `variant`/`size` mean different things for each — so
 <figure class="example">
 <figcaption>Sizes</figcaption>
 <div>
-<button type="button" class="icon-button" data-variant="outline" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
-<button type="button" class="icon-button" data-variant="outline" aria-label="Back"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
-<button type="button" class="icon-button" data-variant="outline" data-size="lg" aria-label="Back"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
+<button class="icon-button" data-variant="outline" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
+<button class="icon-button" data-variant="outline" aria-label="Back"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
+<button class="icon-button" data-variant="outline" data-size="lg" aria-label="Back"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
 </div>
 <details><summary>Markup</summary>
 <pre><code>&lt;button type=&quot;button&quot; class=&quot;icon-button&quot; data-variant=&quot;outline&quot; data-size=&quot;sm&quot; aria-label=&quot;Back&quot;&gt;&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.9&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M15 18l-6-6 6-6&quot; /&gt;&lt;/svg&gt;&lt;/button&gt;
@@ -67,7 +67,7 @@ An icon-only control almost always wants a [Tooltip](<%= relative_url('/componen
 <figcaption>With a tooltip</figcaption>
 <div>
 <span>
-  <button type="button" class="icon-button" aria-label="Delete" aria-describedby="icon-btn-tip">
+  <button class="icon-button" aria-label="Delete" aria-describedby="icon-btn-tip">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></svg>
   </button>
   <span role="tooltip" id="icon-btn-tip">Delete</span>
diff --git a/_components/tag.md b/_components/tag.md
index 7f03722..e8c7182 100644
--- a/_components/tag.md
+++ b/_components/tag.md
@@ -18,7 +18,7 @@ descendant selector `.tag button` — no class of its own.
 <span class="tag">category:appliance</span>
 <span class="tag">
   category:receipt
-  <button type="button" aria-label="Remove tag">×</button>
+  <button aria-label="Remove tag">×</button>
 </span>
 </div>
 <details open><summary>Markup</summary>
diff --git a/_components/toast.md b/_components/toast.md
index e01cc2c..ded42a9 100644
--- a/_components/toast.md
+++ b/_components/toast.md
@@ -21,8 +21,8 @@ anyway.
 <div>
 <div role="status">
   <span>Deleted "Call Mom"</span>
-  <button type="button">Undo</button>
-  <button type="button" aria-label="Dismiss">×</button>
+  <button>Undo</button>
+  <button aria-label="Dismiss">×</button>
 </div>
 </div>
 <details open><summary>Markup</summary>
@@ -41,7 +41,7 @@ anyway.
 <div>
 <div role="status">
   <span>Series created</span>
-  <button type="button" aria-label="Dismiss">×</button>
+  <button aria-label="Dismiss">×</button>
 </div>
 </div>
 <details><summary>Markup</summary>
diff --git a/_components/tooltip.md b/_components/tooltip.md
index 7753dd5..c31f62f 100644
--- a/_components/tooltip.md
+++ b/_components/tooltip.md
@@ -20,7 +20,7 @@ Hover or tab to the button below.
 <figcaption>Tooltip</figcaption>
 <div>
 <span>
-  <button type="button" class="icon-button" aria-label="Delete" aria-describedby="tooltip-basic">
+  <button class="icon-button" aria-label="Delete" aria-describedby="tooltip-basic">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></svg>
   </button>
   <span role="tooltip" id="tooltip-basic">Delete</span>
diff --git a/_includes/sidebar.erb b/_includes/sidebar.erb
index d755172..79dc82c 100644
--- a/_includes/sidebar.erb
+++ b/_includes/sidebar.erb
@@ -1,5 +1,5 @@
 <aside class="ad-doc-sidebar" data-sidebar data-collapsed="true">
-  <button type="button" class="ad-doc-nav-toggle" data-size="sm"
+  <button class="ad-doc-nav-toggle" data-size="sm"
           data-nav-toggle aria-expanded="false" aria-controls="ad-doc-nav">
     <span>Browse the system</span>
     <span aria-hidden="true">☰</span>
diff --git a/_includes/theme-toggle.erb b/_includes/theme-toggle.erb
index 7e025c1..7ac1053 100644
--- a/_includes/theme-toggle.erb
+++ b/_includes/theme-toggle.erb
@@ -1,4 +1,4 @@
-<button type="button" data-variant="ghost" data-size="sm" data-theme-toggle
+<button data-variant="ghost" data-size="sm" data-theme-toggle
         aria-label="Switch color theme" title="Switch color theme">
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-theme-icon="light">
     <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="2"/>
diff --git a/_patterns/archive.md b/_patterns/archive.md
index f55ffc1..d9ef63a 100644
--- a/_patterns/archive.md
+++ b/_patterns/archive.md
@@ -51,7 +51,7 @@ document archive) would take if it were rebuilt on this token set, at its
     </ul>
   </div>
   <div style="position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; padding: 14px 20px 22px; background: linear-gradient(to top, var(--ad-color-surface-page) 65%, transparent);">
-    <button type="button" data-variant="primary" data-size="lg" data-block>
+    <button data-variant="primary" data-size="lg" data-block>
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8a2 2 0 0 1 2-2h1.5l1-1.5h9l1 1.5H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z" /><circle cx="12" cy="13" r="3.5" /></svg>
       Take a photo
     </button>
@@ -59,7 +59,7 @@ document archive) would take if it were rebuilt on this token set, at its
 </div>
 <div style="width: 300px; height: 560px; background: var(--ad-color-surface-page); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-float); overflow:hidden; display:flex; flex-direction:column;">
   <header style="display:flex; align-items:center; gap:8px; padding: 16px var(--ad-space-m) var(--ad-space-2xs);">
-    <button type="button" class="icon-button" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
+    <button class="icon-button" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
     <span style="font-weight:600; font-size: var(--ad-step-0);">Save</span>
   </header>
   <div style="flex:1; padding: 0 var(--ad-space-m);">
@@ -73,13 +73,13 @@ document archive) would take if it were rebuilt on this token set, at its
     </label>
   </div>
   <div style="padding: var(--ad-space-m); display:flex; gap: var(--ad-space-2xs);">
-    <button type="button" style="flex:1;">Retake</button>
-    <button type="button" data-variant="primary" style="flex:1;">Save</button>
+    <button style="flex:1;">Retake</button>
+    <button data-variant="primary" style="flex:1;">Save</button>
   </div>
 </div>
 <div style="width: 300px; height: 560px; background: var(--ad-color-surface-page); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-float); overflow:hidden; display:flex; flex-direction:column;">
   <header style="display:flex; align-items:center; gap:8px; padding: 16px var(--ad-space-m) var(--ad-space-2xs);">
-    <button type="button" class="icon-button" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
+    <button class="icon-button" data-size="sm" aria-label="Back"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
     <span class="type-label">Archive</span>
   </header>
   <div style="flex:1; overflow:hidden; padding: 0 var(--ad-space-m) var(--ad-space-l);">
diff --git a/_patterns/loop.md b/_patterns/loop.md
index d1c0c84..838a6c3 100644
--- a/_patterns/loop.md
+++ b/_patterns/loop.md
@@ -19,7 +19,7 @@ beyond a couple of inline widths.
   <header style="display:flex; align-items:center; gap: var(--ad-space-s); padding: var(--ad-space-s) var(--ad-space-l); border-bottom: 1px solid var(--ad-color-border-hairline);">
     <span style="font-family: var(--ad-font-mono); font-weight:600; letter-spacing:0.02em; font-size: var(--ad-step-0);">Loop</span>
     <div style="flex:1;"></div>
-    <button type="button" data-variant="primary" data-size="sm">
+    <button data-variant="primary" data-size="sm">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
       New
     </button>
@@ -34,7 +34,7 @@ beyond a couple of inline widths.
         </div>
         <ul class="card" style="border:none; border-radius:0; background:none;">
           <li style="border-top: 1px solid var(--ad-color-border-hairline);">
-            <button type="button" aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-danger);"></button>
+            <button aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-danger);"></button>
             <div style="flex:1; min-width:0;">
               <div style="font-weight:500; color: var(--ad-color-danger);">Call Mom</div>
               <div class="type-mono" style="color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2);">every 2 weeks</div>
@@ -42,7 +42,7 @@ beyond a couple of inline widths.
             <span class="type-mono" style="color: var(--ad-color-danger); font-size: var(--ad-step--2); white-space:nowrap;">3d overdue</span>
           </li>
           <li>
-            <button type="button" aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-danger);"></button>
+            <button aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-danger);"></button>
             <div style="flex:1; min-width:0;">
               <div style="font-weight:500; color: var(--ad-color-danger);">Water the ferns</div>
               <div class="type-mono" style="color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2);">every 5 days</div>
@@ -55,7 +55,7 @@ beyond a couple of inline widths.
         <div class="type-label" style="margin-bottom: var(--ad-space-s);">Upcoming</div>
         <ul class="card" style="border:none; border-radius:0; background:none;">
           <li style="border-top: 1px solid var(--ad-color-border-hairline);">
-            <button type="button" aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
+            <button aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
             <div style="flex:1; min-width:0;">
               <div style="font-weight:500;">Renew passport</div>
               <div class="type-mono" style="color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2);">every 10 years</div>
@@ -63,7 +63,7 @@ beyond a couple of inline widths.
             <span class="type-mono" style="color: var(--ad-color-text-secondary); font-size: var(--ad-step--2); white-space:nowrap;">in 3 months</span>
           </li>
           <li>
-            <button type="button" aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
+            <button aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
             <div style="flex:1; min-width:0;">
               <div style="font-weight:500;">Dentist checkup</div>
               <div class="type-mono" style="color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2);">every 6 months</div>
@@ -71,7 +71,7 @@ beyond a couple of inline widths.
             <span class="type-mono" style="color: var(--ad-color-text-secondary); font-size: var(--ad-step--2); white-space:nowrap;">in 2 weeks</span>
           </li>
           <li>
-            <button type="button" aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
+            <button aria-label="Complete" style="all:unset; width:18px; height:18px; border-radius:4px; flex-shrink:0; cursor:pointer; border: 1.5px solid var(--ad-color-text-secondary);"></button>
             <div style="flex:1; min-width:0;">
               <div style="font-weight:500;">Rotate mattress</div>
               <div class="type-mono" style="color: var(--ad-color-text-tertiary); font-size: var(--ad-step--2);">every 6 months</div>
@@ -153,8 +153,8 @@ beyond a couple of inline widths.
       </div>
     </div>
     <footer>
-      <button type="button">Cancel</button>
-      <button type="button" data-variant="primary">Create</button>
+      <button>Cancel</button>
+      <button data-variant="primary">Create</button>
     </footer>
   </dialog>
 </div>
@@ -168,7 +168,7 @@ beyond a couple of inline widths.
 <div>
 <div role="status">
   <span>Completed "Call Mom"</span>
-  <button type="button" aria-label="Dismiss">×</button>
+  <button aria-label="Dismiss">×</button>
 </div>
 </div>
 </figure>
diff --git a/_sass/site/shell.css b/_sass/site/shell.css
index 7b6b34b..133c12b 100644
--- a/_sass/site/shell.css
+++ b/_sass/site/shell.css
@@ -159,25 +159,36 @@
 }
 .ad-doc-footer__inner { display: flex; flex-wrap: wrap; gap: var(--ad-space-xs); justify-content: space-between; }
 
-.ad-doc-nav-toggle { display: none; }
+/* `button.ad-doc-nav-toggle` (element + class) rather than a bare class:
+   button.css's own base rule is `button:not(.icon-button)`, which is also
+   one element + one class in specificity and sets `display: inline-flex` —
+   a bare `.ad-doc-nav-toggle { display: none }` loses that fight and the
+   toggle stays visible at every width. Matching its specificity here (and
+   coming later in the concatenated stylesheet) settles it in source order. */
+button.ad-doc-nav-toggle { display: none; }
 
 @media (max-width: 60rem) {
   .ad-doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ad-space-s); }
   .ad-doc-sidebar {
     position: static;
     max-height: none;
+  }
+  /* The toggle is a normal Button; the panel it opens gets its own card
+     treatment. Putting the same card styling on the <aside> wrapper too
+     nested a button-shaped box inside an outer box for no reason. */
+  .ad-doc-nav {
+    margin-top: var(--ad-space-xs);
     padding: var(--ad-space-xs);
     background: var(--ad-color-surface-card);
     border: 1px solid var(--ad-color-border-default);
     border-radius: var(--ad-radius-md);
   }
   .ad-doc-sidebar[data-collapsed="true"] > .ad-doc-nav { display: none; }
-  .ad-doc-nav-toggle {
+  button.ad-doc-nav-toggle {
     display: flex;
     width: 100%;
     justify-content: space-between;
   }
-  .ad-doc-nav-toggle + .ad-doc-nav { margin-top: var(--ad-space-xs); }
 }
 
 @media (max-width: 34rem) {
diff --git a/lib/arbitrary_definitions/site_builder.rb b/lib/arbitrary_definitions/site_builder.rb
index 6b299c2..1f8bfdc 100644
--- a/lib/arbitrary_definitions/site_builder.rb
+++ b/lib/arbitrary_definitions/site_builder.rb
@@ -160,7 +160,11 @@ module ArbitraryDefinitions
 
       rendered = ERB.new(page_source.body, trim_mode: "-").result(context.erb_binding)
 
-      html_body = Kramdown::Document.new(rendered, input: "GFM", syntax_highlighter: nil).to_html
+      # hard_wrap: false — the GFM parser otherwise turns every manually
+      # word-wrapped source line into a <br>, since GitHub's own comment
+      # rendering treats a single newline as a line break. This content is
+      # wrapped for editor readability, not for literal line breaks.
+      html_body = Kramdown::Document.new(rendered, input: "GFM", syntax_highlighter: nil, hard_wrap: false).to_html
 
       html = wrap_layout(page_source.layout, html_body, context)
       write(File.join(output_dir(page_source.url), "index.html"), html)