Port vault section (5 pages) and docs section (11 pages)

- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9

content/docs/components.md

@@ -0,0 +1,222 @@
+---
+title: "Components"
+description: "ASW's data-attribute vocabulary — callouts, tasks, session blocks, wikilinks, and layout primitives."
+type: docs
+weight: 30
+date: 2026-04-09
+tags: ["components", "css", "reference"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-5"
+ai-provider: "Anthropic"
+
+---
+
+## Callouts
+
+Inline advisory blocks. The `data-callout` attribute sets the semantic type; the stylesheet handles colour, icon, and layout.
+
+```html
+<div data-callout="tip">
+  <span data-callout-title>Tip</span>
+  <p>Use <code>data-callout</code> instead of inventing class names.</p>
+</div>
+
+<div data-callout="warning">
+  <span data-callout-title>Warning</span>
+  <p>Overriding Open Props palette tokens breaks theming.</p>
+</div>
+
+<div data-callout="error">
+  <span data-callout-title>Error</span>
+  <p>This file exceeds the token budget.</p>
+</div>
+
+<div data-callout="note">
+  <span data-callout-title>Note</span>
+  <p>Both <code>note</code> and <code>info</code> are valid values.</p>
+</div>
+```
+
+{{< callout tip >}}
+In Hugo, use the `callout` shortcode: `{{</* callout tip */>}}...{{</* /callout */>}}`
+{{< /callout >}}
+
+Valid values: `tip`, `note`, `info`, `warning`, `error`.
+
+---
+
+## Tasks
+
+Render task lists with semantic state. Agents write task lists naturally; `data-task` on the `<li>` adds the visual state indicator.
+
+```html
+<ul>
+  <li data-task="done">Token layer integrated</li>
+  <li data-task="done">Docs site taxonomy wired</li>
+  <li data-task="wip">Hugo layouts — in progress</li>
+  <li data-task="blocked">Deploy — waiting on DNS</li>
+  <li data-task="todo">Vocabulary retirement pass</li>
+</ul>
+```
+
+Valid values: `done`, `wip`, `blocked`, `todo`.
+
+---
+
+## Session blocks
+
+Mark a block as a session record with `data-session`. Optional `data-mode` indicates autonomous vs. interactive sessions.
+
+```html
+<section data-session data-mode="autonomous">
+  <header>
+    <h3>Session 2847</h3>
+    <p data-text="dim">2026-04-02 · 31 min · claude-sonnet-4-6</p>
+  </header>
+
+  <ul>
+    <li data-task="done">Vault token layer</li>
+    <li data-task="wip">Paper layout</li>
+  </ul>
+
+  <div data-callout="note">
+    <span data-callout-title>Handoff</span>
+    <p>Next session: harden paper/single.html styles into agentic.css.</p>
+  </div>
+</section>
+```
+
+---
+
+## Wikilinks
+
+Internal knowledge-graph links. `data-wikilink` on an anchor renders it with a dotted underline to distinguish it from a regular hyperlink.
+
+```html
+<a href="/vault/tasks/" data-wikilink>Tasks</a>
+```
+
+In Hugo, use the `wikilink` shortcode:
+
+```
+{{</* wikilink "Tasks" "/vault/tasks/" */>}}
+```
+
+---
+
+## Redacted content
+
+Sensitive values rendered as black bars. Optional hover-reveal.
+
+```html
+<span data-redacted>API key: sk-ant-...</span>
+
+<!-- Hover to reveal -->
+<span data-redacted data-redacted-reveal>classified content</span>
+```
+
+---
+
+## Layout primitives
+
+### Grid
+
+```html
+<!-- Two columns, responsive stack below 600px -->
+<div data-layout="grid-2">
+  <article>Left</article>
+  <article>Right</article>
+</div>
+
+<!-- Three columns, responsive stack below 768px -->
+<div data-layout="grid-3">
+  <article>One</article>
+  <article>Two</article>
+  <article>Three</article>
+</div>
+
+<!-- Auto-fill card grid, minmax(280px, 1fr) -->
+<div data-layout="card-grid">
+  <article>Card A</article>
+  <article>Card B</article>
+  <article>Card C</article>
+</div>
+```
+
+### Stats row
+
+```html
+<div data-layout="stats">
+  <div>
+    <span data-stat="value">2847</span>
+    <span data-stat="label">Sessions</span>
+  </div>
+  <div>
+    <span data-stat="value">99.8%</span>
+    <span data-stat="label">Uptime</span>
+  </div>
+</div>
+```
+
+### Docs layout
+
+Three-column sidebar scaffold. Source order matters: left aside → article → right aside.
+
+```html
+<div data-layout="docs">
+  <aside>
+    <nav aria-label="Documentation" data-nav="sidebar">
+      <small>Section</small>
+      <ul>
+        <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li>
+        <li><a href="/docs/tokens/">Token System</a></li>
+      </ul>
+    </nav>
+  </aside>
+
+  <article>
+    <!-- Main content -->
+  </article>
+
+  <aside data-toc>
+    <small>On this page</small>
+    <nav>
+      <ul>
+        <li><a href="#callouts">Callouts</a></li>
+      </ul>
+    </nav>
+  </aside>
+</div>
+```
+
+---
+
+## Text utilities
+
+```html
+<p data-text="dim">Muted — var(--text-3)</p>
+<p data-text="accent">Accent colour</p>
+<span data-text="eyebrow">SECTION LABEL</span>
+<span data-text="small">Fine print</span>
+```
+
+---
+
+## CTA links
+
+```html
+<a href="/docs/introduction/" data-role="primary">Get started →</a>
+<a href="/docs/" data-role="secondary">Documentation</a>
+```
+
+---
+
+## Badge
+
+Icon or token pill. Used by the landing page pillars; also useful inline.
+
+```html
+<span data-badge>&lt;/&gt;</span>
+<span data-badge>data=</span>
+<span data-badge>:root</span>
+```