css: move sidebar/TOC component styles out of layout, replace <small> with <h3>

- sidebar and TOC typography/colors moved from 08-layout.css to 03-components.css
- nav[data-nav="sidebar"] and aside[data-toc] layout-only rules remain in 08-layout.css
- <small> section labels replaced with <h3> in sidebar and TOC (semantic + accessible)
- dead selectors removed: nav[data-nav="sidebar"] nav a → nav[data-nav="sidebar"] a,
  nav[data-nav="toc"] (Hugo never outputs data-nav="toc")
- webkit scrollbar pseudo-elements removed (scrollbar-width/color sufficient)
- sidebar/TOC sticky top values split: sidebar top space-4, TOC top space-8 + padding-top
- max-height magic number (--size-px-10) replaced with token expression
- layer convention established: 03=component identity, 04=modifiers, 08=placement only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/layers/03-components.css

@@ -2,10 +2,10 @@
  * 03-components.css
  * UI component patterns (buttons, forms, nav, dialog, details)
  * Part of: Agentic Semantic Web
- * 
+ *
  * Ported from: Pico CSS v2.1.1
  * License: MIT
- * 
+ *
  * Modernizations:
  * - Uses `accent-color` for checkbox/radio (simpler than background-image)
  * - Drops class-based button variants (.secondary, .contrast, .outline)
@@ -42,8 +42,8 @@ button,
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  transition: background-color var(--ease), 
-              border-color var(--ease), 
+  transition: background-color var(--ease),
+              border-color var(--ease),
               color var(--ease);
 }
 
@@ -114,8 +114,8 @@ textarea {
   background-color: var(--input-bg);
   color: var(--text);
   font-weight: var(--font-weight-4);
-  transition: background-color var(--ease), 
-              border-color var(--ease), 
+  transition: background-color var(--ease),
+              border-color var(--ease),
               color var(--ease);
 }
 
@@ -189,7 +189,7 @@ label:has([type=checkbox], [type=radio]) {
   margin-right: 0.5em;
   vertical-align: middle;
   cursor: pointer;
-  
+
   /* Modern CSS: use browser's native styling with our accent color */
   accent-color: var(--accent);
 }
@@ -265,6 +265,7 @@ body > nav {
   align-items: center;
   padding-top: var(--space-5);
   padding-bottom: var(--space-5);
+
   margin-bottom: var(--space-6);
   border-bottom: var(--border-width) solid var(--border);
 }
@@ -324,11 +325,11 @@ body > nav a[aria-current="page"] {
     align-items: flex-start;
     gap: var(--space-2);
   }
-  
+
   body > nav ul:last-child {
     flex-wrap: wrap;
   }
-  
+
   body > nav ul:last-child li + li::before {
     display: none;
   }
@@ -422,7 +423,7 @@ body > nav details > ul li a:hover {
 /* Close dropdown when clicking outside (CSS-only via :focus-within) */
 nav details:not(:focus-within) > ul,
 nav details:not(:focus-within) > div {
-  /* Allow browser default open/close behavior — 
+  /* Allow browser default open/close behavior —
      no forced hiding. Agent can add JS for click-outside. */
 }
 
@@ -451,7 +452,7 @@ article {
   background: transparent;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 1rem 1.25rem;
+  padding: var(--size-3) var(--size-4);
   margin: var(--space-3) 0;
 }
 
@@ -482,11 +483,11 @@ article header h3 {
     padding-bottom: 0;
     margin-bottom: 0.25rem;
   }
-  
+
   article header h3 {
     font-size: var(--text-xs);
   }
-  
+
   article > :is(p, dl, ul, ol) {
     font-size: var(--text-sm);
   }
@@ -497,7 +498,7 @@ article header h3 {
   article {
     padding: var(--space-5) var(--space-6);
   }
-  
+
   article > header {
     margin-bottom: var(--space-3);
     padding-bottom: var(--space-2);
@@ -953,3 +954,102 @@ dialog > footer {
 [data-role="steps"][data-layout="vertical"] > li > span {
   padding-inline: 0;
 }
+
+/* ── Sidebar nav ────────────────────────────────────────────────────── */
+
+nav[data-nav="sidebar"] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-5);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-top: var(--space-4);
+  margin-bottom: 0;
+}
+
+nav[data-nav="sidebar"] h3:first-child {
+  margin-top: 0;
+}
+
+nav[data-nav="sidebar"] ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+}
+
+nav[data-nav="sidebar"] ul li {
+  margin: 0;
+  padding: 0;
+}
+
+nav[data-nav="sidebar"] a {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--text-2);
+  text-decoration: none;
+  transition: background-color var(--ease), color var(--ease);
+}
+
+nav[data-nav="sidebar"] a:hover {
+  background-color: var(--surface-hover);
+  color: var(--text);
+}
+
+nav[data-nav="sidebar"] a[aria-current] {
+  background-color: var(--accent-subtle);
+  color: var(--accent);
+}
+
+/* ── TOC (aside) ────────────────────────────────────────────────────── */
+
+aside[data-toc] h3 {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-5);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-2);
+  margin-top: 0;
+}
+
+aside[data-toc] nav ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+}
+
+aside[data-toc] nav ul li {
+  margin: 0;
+  padding: 0;
+}
+
+aside[data-toc] nav a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-3);
+  text-decoration: none;
+  border-left: var(--border-size-2) solid transparent;
+  transition: color var(--ease), border-color var(--ease);
+}
+
+aside[data-toc] nav a:hover {
+  color: var(--text);
+  border-left-color: var(--border);
+}
+
+aside[data-toc] nav a[aria-current] {
+  color: var(--accent);
+  border-left-color: var(--accent);
+}