living-docs-kit 0.1.0

package/skills/docs-init/assets/site-template/engine/assets/app.js

@@ -0,0 +1,414 @@
+/* living-docs client: themes, temporary font size, search, diagrams (render + zoom), decision tables, TOC. */
+(function () {
+  'use strict';
+  var C = window.__LD__;
+  var S = C.s;
+  var doc = document.documentElement;
+  var KEY = 'ld:' + C.id + ':theme';
+  var $ = function (s, r) { return (r || document).querySelector(s); };
+  var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
+
+  function storeGet(k) { try { return localStorage.getItem(k); } catch (e) { return null; } }
+  function storeSet(k, v) { try { if (v === null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch (e) {} }
+  function themeById(id) { return C.themes.filter(function (t) { return t.id === id; })[0]; }
+  function currentTheme() { return themeById(doc.getAttribute('data-theme')) || themeById(C.defaultTheme) || C.themes[0]; }
+  function cssVar(n) { return getComputedStyle(doc).getPropertyValue(n).trim(); }
+  function debounce(fn, ms) { var t; return function () { clearTimeout(t); t = setTimeout(fn, ms); }; }
+
+  /* ---------- theme picker (remembered per browser; default comes from docs.config.json) ---------- */
+  function applyTheme(id) {
+    var t = themeById(id) || themeById(C.defaultTheme);
+    doc.setAttribute('data-theme', t.id);
+    var link = document.getElementById('ld-font');
+    if (t.font) {
+      if (!link) { link = document.createElement('link'); link.rel = 'stylesheet'; link.id = 'ld-font'; document.head.appendChild(link); }
+      if (link.href !== t.font) link.href = t.font;
+    } else if (link) link.remove();
+    rerenderDiagrams();
+  }
+  var select = $('#theme-select');
+  if (select) {
+    var def = themeById(C.defaultTheme);
+    var opt = new Option(S.themeDefault + ': ' + (def ? def.label : C.defaultTheme), '');
+    select.add(opt);
+    C.themes.forEach(function (t) { select.add(new Option(t.label, t.id)); });
+    var saved = storeGet(KEY);
+    select.value = saved && themeById(saved) ? saved : '';
+    select.addEventListener('change', function () {
+      storeSet(KEY, select.value || null);
+      applyTheme(select.value || C.defaultTheme);
+    });
+  }
+
+  /* ---------- font size: in-memory only, never persisted ---------- */
+  var steps = [0.8, 0.9, 1, 1.1, 1.2, 1.35, 1.5, 1.7];
+  var step = 2;
+  var fsValue = $('.fs-value');
+  function applyScale() {
+    doc.style.setProperty('--user-scale', steps[step]);
+    if (fsValue) fsValue.textContent = Math.round(steps[step] * 100) + '%';
+    rerenderDiagrams();
+  }
+  $$('[data-fs]').forEach(function (b) {
+    b.addEventListener('click', function () {
+      var d = +b.getAttribute('data-fs');
+      step = d === 0 ? 2 : Math.max(0, Math.min(steps.length - 1, step + d));
+      applyScale();
+    });
+  });
+
+  /* ---------- mobile navigation ---------- */
+  var toggle = $('.nav-toggle');
+  if (toggle) {
+    toggle.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var open = document.body.classList.toggle('nav-open');
+      toggle.setAttribute('aria-expanded', open);
+    });
+    document.addEventListener('click', function (e) {
+      if (document.body.classList.contains('nav-open') && !e.target.closest('.sidebar')) {
+        document.body.classList.remove('nav-open');
+        toggle.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+  var cur = $('.sidebar [aria-current="page"]');
+  if (cur && cur.scrollIntoView) cur.scrollIntoView({ block: 'center' });
+
+  /* ---------- search ---------- */
+  var input = $('#search');
+  var box = $('#search-results');
+  var index = null;
+  var active = -1;
+  function norm(s) { return String(s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(); }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function getIndex() {
+    if (!index && window.__LD_SEARCH__) {
+      index = window.__LD_SEARCH__.map(function (d) { return { d: d, t: norm(d.t), h: norm(d.h), s: norm(d.s), x: norm(d.x) }; });
+    }
+    return index || [];
+  }
+  function runSearch(q) {
+    var terms = norm(q).split(/\s+/).filter(Boolean);
+    if (!terms.length) return [];
+    var out = [];
+    getIndex().forEach(function (it) {
+      var score = 0;
+      for (var i = 0; i < terms.length; i++) {
+        var w = terms[i];
+        var s = 0;
+        if (it.t.indexOf(w) > -1) s += it.t.indexOf(w) === 0 ? 15 : 10;
+        if (it.h.indexOf(w) > -1) s += 4;
+        if (it.s.indexOf(w) > -1) s += 3;
+        if (it.x.indexOf(w) > -1) s += 1;
+        if (!s) return;
+        score += s;
+      }
+      out.push({ it: it, score: score, term: terms[0] });
+    });
+    return out.sort(function (a, b) { return b.score - a.score; }).slice(0, 8);
+  }
+  function snippet(r) {
+    if (r.it.d.s) return r.it.d.s;
+    var i = r.it.x.indexOf(r.term);
+    if (i < 0) return r.it.d.x.slice(0, 120);
+    return (i > 50 ? '…' : '') + r.it.d.x.slice(Math.max(0, i - 50), i + 90) + '…';
+  }
+  function showResults() {
+    var q = input.value.trim();
+    if (!q) { box.hidden = true; return; }
+    var res = runSearch(q);
+    active = -1;
+    box.innerHTML = res.length
+      ? res.map(function (r) { return '<a href="' + C.root + r.it.d.u + 'index.html"><strong>' + esc(r.it.d.t) + '</strong><span>' + esc(snippet(r)) + '</span></a>'; }).join('')
+      : '<p>' + esc(S.searchNoResults) + '</p>';
+    box.hidden = false;
+  }
+  if (input) {
+    input.addEventListener('input', showResults);
+    input.addEventListener('focus', showResults);
+    input.addEventListener('keydown', function (e) {
+      var links = $$('a', box);
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (!links.length) return;
+        active = (active + (e.key === 'ArrowDown' ? 1 : -1) + links.length) % links.length;
+        links.forEach(function (l, i) { l.classList.toggle('active', i === active); });
+      } else if (e.key === 'Enter') {
+        var target = links[active] || links[0];
+        if (target) location.href = target.href;
+      } else if (e.key === 'Escape') {
+        input.value = ''; box.hidden = true; input.blur();
+      }
+    });
+    document.addEventListener('click', function (e) { if (!e.target.closest('.search')) box.hidden = true; });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === '/' && !/INPUT|TEXTAREA|SELECT/.test(document.activeElement.tagName)) { e.preventDefault(); input.focus(); }
+    });
+  }
+
+  /* ---------- diagrams (Mermaid, themed from CSS variables) ---------- */
+  var figs = $$('.diagram');
+  var mermaidPromise = null;
+  var seq = 0;
+  function loadMermaid() {
+    if (window.mermaid) return Promise.resolve(window.mermaid);
+    if (!mermaidPromise) {
+      mermaidPromise = new Promise(function (res, rej) {
+        var s = document.createElement('script');
+        s.src = /^https?:/.test(C.mermaid) ? C.mermaid : C.root + C.mermaid;
+        s.onload = function () { res(window.mermaid); };
+        s.onerror = rej;
+        document.head.appendChild(s);
+      });
+    }
+    return mermaidPromise;
+  }
+  function mermaidConfig() {
+    var font = cssVar('--font-body');
+    var size = Math.round(15 * steps[step]) + 'px';
+    var v = {
+      darkMode: currentTheme().mode === 'dark',
+      background: cssVar('--c-surface'),
+      fontFamily: font,
+      fontSize: size,
+      primaryColor: cssVar('--d-node-bg'),
+      primaryTextColor: cssVar('--d-node-text'),
+      primaryBorderColor: cssVar('--d-node-border'),
+      secondaryColor: cssVar('--c-surface-alt'),
+      secondaryTextColor: cssVar('--c-text'),
+      secondaryBorderColor: cssVar('--c-border'),
+      tertiaryColor: cssVar('--d-cluster-bg'),
+      tertiaryTextColor: cssVar('--c-text'),
+      tertiaryBorderColor: cssVar('--c-border'),
+      mainBkg: cssVar('--d-node-bg'),
+      nodeBorder: cssVar('--d-node-border'),
+      clusterBkg: cssVar('--d-cluster-bg'),
+      clusterBorder: cssVar('--c-border'),
+      lineColor: cssVar('--d-line-color'),
+      textColor: cssVar('--c-text'),
+      titleColor: cssVar('--c-heading'),
+      edgeLabelBackground: cssVar('--c-surface'),
+      noteBkgColor: cssVar('--d-note-bg'),
+      noteTextColor: cssVar('--c-text'),
+      noteBorderColor: cssVar('--c-border'),
+      actorBkg: cssVar('--d-node-bg'),
+      actorBorder: cssVar('--d-node-border'),
+      actorTextColor: cssVar('--d-node-text'),
+      actorLineColor: cssVar('--d-line-color'),
+      signalColor: cssVar('--c-text'),
+      signalTextColor: cssVar('--c-text'),
+      labelBoxBkgColor: cssVar('--d-node-bg'),
+      labelBoxBorderColor: cssVar('--d-node-border'),
+      labelTextColor: cssVar('--c-text'),
+      loopTextColor: cssVar('--c-text'),
+      activationBkgColor: cssVar('--c-surface-alt'),
+      activationBorderColor: cssVar('--d-node-border'),
+      sequenceNumberColor: cssVar('--c-accent-text'),
+      altBackground: cssVar('--c-surface-alt'),
+      errorBkgColor: cssVar('--c-danger'),
+      errorTextColor: cssVar('--c-bg'),
+    };
+    return {
+      startOnLoad: false,
+      securityLevel: 'loose',
+      theme: 'base',
+      fontFamily: font,
+      themeVariables: v,
+      flowchart: { htmlLabels: true, curve: 'basis', useMaxWidth: true },
+      sequence: { useMaxWidth: true, showSequenceNumbers: false },
+      state: { useMaxWidth: true },
+    };
+  }
+  var rendering = null;
+  function renderDiagrams() {
+    if (!figs.length) return Promise.resolve();
+    var fontsReady = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+    rendering = Promise.all([loadMermaid(), fontsReady]).then(function (r) {
+      var m = r[0];
+      m.initialize(mermaidConfig());
+      return figs.reduce(function (p, f) {
+        return p.then(function () {
+          var src = $('.diagram-src', f).textContent;
+          var canvas = $('.diagram-canvas', f);
+          var id = 'ld-d' + ++seq;
+          return m.render(id, src).then(function (out) {
+            canvas.innerHTML = out.svg;
+            if (out.bindFunctions) out.bindFunctions(canvas);
+            f.classList.remove('error');
+          }).catch(function (err) {
+            var junk = document.getElementById('d' + id);
+            if (junk) junk.remove();
+            f.classList.add('error');
+            canvas.innerHTML = '<p class="muted">' + esc(S.diagramError) + '</p><p class="muted"><small>' + esc(err && err.message ? err.message.split('\n')[0] : '') + '</small></p>';
+          });
+        });
+      }, Promise.resolve());
+    }).catch(function () {
+      figs.forEach(function (f) { f.classList.add('error'); });
+    });
+    return rendering;
+  }
+  var rerenderDiagrams = debounce(renderDiagrams, 120);
+  renderDiagrams();
+
+  /* ---------- diagram zoom / pan overlay ---------- */
+  var overlay = $('.zoom-overlay');
+  var stage = overlay && $('.zoom-stage', overlay);
+  var inner = null;
+  var z = { s: 1, x: 0, y: 0, w: 0, h: 0 };
+  var lastFocus = null;
+  function applyZ() { if (inner) inner.style.transform = 'translate(' + z.x + 'px,' + z.y + 'px) scale(' + z.s + ')'; }
+  function fit() {
+    var r = stage.getBoundingClientRect();
+    z.s = Math.min(r.width / z.w, r.height / z.h) * 0.92;
+    z.x = (r.width - z.w * z.s) / 2;
+    z.y = (r.height - z.h * z.s) / 2;
+    applyZ();
+  }
+  function zoomAt(factor, cx, cy) {
+    var ns = Math.max(0.1, Math.min(12, z.s * factor));
+    z.x = cx - (cx - z.x) * (ns / z.s);
+    z.y = cy - (cy - z.y) * (ns / z.s);
+    z.s = ns;
+    applyZ();
+  }
+  function openZoom(fig) {
+    var svg = $('.diagram-canvas svg', fig);
+    if (!svg) return;
+    lastFocus = document.activeElement;
+    var clone = svg.cloneNode(true);
+    var vb = svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.width ? svg.viewBox.baseVal : svg.getBBox();
+    z.w = vb.width; z.h = vb.height;
+    clone.removeAttribute('style');
+    clone.setAttribute('width', z.w);
+    clone.setAttribute('height', z.h);
+    stage.innerHTML = '';
+    inner = document.createElement('div');
+    inner.appendChild(clone);
+    stage.appendChild(inner);
+    overlay.hidden = false;
+    document.body.style.overflow = 'hidden';
+    fit();
+    $('[data-z="close"]', overlay).focus();
+  }
+  function closeZoom() {
+    overlay.hidden = true;
+    stage.innerHTML = '';
+    inner = null;
+    document.body.style.overflow = '';
+    if (lastFocus) lastFocus.focus();
+  }
+  if (overlay) {
+    figs.forEach(function (f) {
+      var b = $('.diagram-zoom', f);
+      if (b) b.addEventListener('click', function () { openZoom(f); });
+    });
+    $$('[data-z]', overlay).forEach(function (b) {
+      b.addEventListener('click', function () {
+        var r = stage.getBoundingClientRect();
+        var a = b.getAttribute('data-z');
+        if (a === 'close') closeZoom();
+        else if (a === 'fit') fit();
+        else zoomAt(a === 'in' ? 1.25 : 0.8, r.width / 2, r.height / 2);
+      });
+    });
+    document.addEventListener('keydown', function (e) {
+      if (overlay.hidden) return;
+      var r = stage.getBoundingClientRect();
+      if (e.key === 'Escape') closeZoom();
+      else if (e.key === '+' || e.key === '=') zoomAt(1.25, r.width / 2, r.height / 2);
+      else if (e.key === '-') zoomAt(0.8, r.width / 2, r.height / 2);
+      else if (e.key === '0') fit();
+    });
+    stage.addEventListener('wheel', function (e) {
+      e.preventDefault();
+      var r = stage.getBoundingClientRect();
+      zoomAt(e.deltaY < 0 ? 1.12 : 1 / 1.12, e.clientX - r.left, e.clientY - r.top);
+    }, { passive: false });
+    var pointers = {};
+    var drag = null;
+    var pinch = null;
+    var moved = false;
+    stage.addEventListener('pointerdown', function (e) {
+      pointers[e.pointerId] = { x: e.clientX, y: e.clientY };
+      var ids = Object.keys(pointers);
+      moved = false;
+      if (ids.length === 1) drag = { x: e.clientX, y: e.clientY, ox: z.x, oy: z.y };
+      if (ids.length === 2) {
+        var a = pointers[ids[0]], b = pointers[ids[1]];
+        pinch = { d: Math.hypot(a.x - b.x, a.y - b.y), s: z.s };
+        drag = null;
+      }
+    });
+    stage.addEventListener('pointermove', function (e) {
+      if (!pointers[e.pointerId]) return;
+      pointers[e.pointerId] = { x: e.clientX, y: e.clientY };
+      var ids = Object.keys(pointers);
+      if (pinch && ids.length === 2) {
+        var a = pointers[ids[0]], b = pointers[ids[1]];
+        var r = stage.getBoundingClientRect();
+        var d = Math.hypot(a.x - b.x, a.y - b.y);
+        zoomAt((pinch.s * d / pinch.d) / z.s, (a.x + b.x) / 2 - r.left, (a.y + b.y) / 2 - r.top);
+        moved = true;
+      } else if (drag) {
+        var dx = e.clientX - drag.x, dy = e.clientY - drag.y;
+        if (!moved && Math.abs(dx) + Math.abs(dy) > 4) { moved = true; stage.classList.add('dragging'); stage.setPointerCapture(e.pointerId); }
+        if (moved) { z.x = drag.ox + dx; z.y = drag.oy + dy; applyZ(); }
+      }
+    });
+    function up(e) {
+      delete pointers[e.pointerId];
+      if (Object.keys(pointers).length < 2) pinch = null;
+      if (!Object.keys(pointers).length) { drag = null; stage.classList.remove('dragging'); }
+    }
+    stage.addEventListener('pointerup', up);
+    stage.addEventListener('pointercancel', up);
+    stage.addEventListener('click', function (e) { if (moved) { e.preventDefault(); e.stopPropagation(); moved = false; } }, true);
+    window.addEventListener('resize', debounce(function () { if (!overlay.hidden) fit(); }, 150));
+  }
+
+  /* ---------- decision tables ---------- */
+  $$('.decision').forEach(function (el) {
+    var d;
+    try { d = JSON.parse(el.getAttribute('data-decision')); } catch (e) { return; }
+    var sels = $$('select', el);
+    var rows = $$('tbody tr', el);
+    var out = $('.decision-result', el);
+    function update() {
+      var sel = {};
+      sels.forEach(function (s) { if (s.value) sel[s.getAttribute('data-input')] = s.value; });
+      var keys = Object.keys(sel);
+      var matches = [];
+      rows.forEach(function (row, i) {
+        var w = d.rules[i].when;
+        var ok = keys.every(function (k) { return w[k] === undefined || w[k] === sel[k]; });
+        row.classList.toggle('dim', keys.length > 0 && !ok);
+        row.classList.remove('hit');
+        if (ok) matches.push(i);
+      });
+      if (!keys.length) { out.textContent = ''; return; }
+      if (!matches.length) { out.textContent = S.decisionNoMatch; return; }
+      if (keys.length < d.inputs.length) { out.textContent = S.decisionPartial.replace('{n}', matches.length); return; }
+      rows[matches[0]].classList.add('hit');
+      out.textContent = S.decisionResult + ': ' + d.rules[matches[0]].then + '  (' + S.rule + ' ' + (matches[0] + 1) + ')';
+    }
+    sels.forEach(function (s) { s.addEventListener('change', update); });
+  });
+
+  /* ---------- table of contents highlight ---------- */
+  var tocLinks = $$('.toc a');
+  if (tocLinks.length && 'IntersectionObserver' in window) {
+    var map = {};
+    tocLinks.forEach(function (a) { map[decodeURIComponent(a.getAttribute('href').slice(1))] = a; });
+    var obs = new IntersectionObserver(function (entries) {
+      entries.forEach(function (en) {
+        if (en.isIntersecting && map[en.target.id]) {
+          tocLinks.forEach(function (a) { a.classList.remove('active'); });
+          map[en.target.id].classList.add('active');
+        }
+      });
+    }, { rootMargin: '0px 0px -70% 0px' });
+    Object.keys(map).forEach(function (id) { var h = document.getElementById(id); if (h) obs.observe(h); });
+  }
+})();

package/skills/docs-init/assets/site-template/engine/assets/base.css

@@ -0,0 +1,229 @@
+/* Layout and components. All colours, fonts and sizes come from theme variables (themes/*.json). */
+*, *::before, *::after { box-sizing: border-box; }
+html {
+  font-size: calc(var(--base-size, 16px) * var(--user-scale, 1));
+  -webkit-text-size-adjust: 100%;
+  scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
+}
+body {
+  margin: 0;
+  background: var(--c-bg);
+  color: var(--c-text);
+  font-family: var(--font-body);
+  line-height: var(--line-height);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+a { color: var(--c-link); text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
+a:hover { text-decoration-thickness: 0.12em; }
+:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }
+code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.muted { color: var(--c-text-muted); }
+.skip { position: absolute; left: -999px; top: 0; }
+.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--c-surface); padding: 0.5rem 1rem; }
+
+/* ---------- top bar ---------- */
+.topbar {
+  position: sticky; top: 0; z-index: 20;
+  display: flex; align-items: center; gap: 1rem;
+  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1.25rem 0.6rem;
+  background: var(--c-bg);
+  border-bottom: 1px solid var(--c-border);
+}
+.brand { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--c-heading); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
+.nav-toggle { display: none; }
+.search { position: relative; flex: 1; max-width: 30rem; margin-left: auto; }
+.search input {
+  width: 100%; padding: 0.45rem 2.2rem 0.45rem 0.75rem; font: inherit; font-size: 0.92rem;
+  color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
+}
+.search kbd { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: 4px; padding: 0 0.3rem; }
+.search-results {
+  position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; max-height: 70vh; overflow: auto;
+  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--c-text) 14%, transparent);
+}
+.search-results a { display: block; padding: 0.6rem 0.8rem; text-decoration: none; color: var(--c-text); border-bottom: 1px solid var(--c-border); }
+.search-results a:last-child { border-bottom: 0; }
+.search-results a:hover, .search-results a.active { background: var(--c-highlight); }
+.search-results strong { display: block; color: var(--c-heading); font-size: 0.95rem; }
+.search-results span { display: block; font-size: 0.82rem; color: var(--c-text-muted); }
+.search-results p { margin: 0; padding: 0.8rem; color: var(--c-text-muted); font-size: 0.9rem; }
+
+.controls { display: flex; align-items: center; gap: 0.6rem; }
+.controls button, .controls select, .nav-toggle {
+  font: inherit; font-size: 0.85rem; color: var(--c-text); background: var(--c-surface);
+  border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer;
+}
+.fontsize { display: inline-flex; }
+.fontsize button { border-radius: 0; margin-left: -1px; min-width: 2.4rem; }
+.fontsize button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
+.fontsize button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
+.fs-value { font-variant-numeric: tabular-nums; color: var(--c-text-muted) !important; }
+
+/* ---------- layout ---------- */
+.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 15rem; align-items: start; }
+.sidebar {
+  position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); overflow: auto;
+  padding: 1.25rem 1rem 3rem 1.25rem; border-right: 1px solid var(--c-border); font-size: 0.92rem;
+}
+.sidebar ul { list-style: none; margin: 0; padding: 0; }
+.sidebar ul ul { padding-left: 0.85rem; border-left: 1px solid var(--c-border); margin-left: 0.35rem; }
+.sidebar li { margin: 0.1rem 0; }
+.sidebar a { display: block; padding: 0.22rem 0.5rem; border-radius: calc(var(--radius) * 0.6); color: var(--c-text); text-decoration: none; }
+.sidebar a:hover { background: var(--c-surface-alt); }
+.sidebar a[aria-current="page"] { background: var(--c-highlight); color: var(--c-heading); font-weight: 600; }
+.sidebar summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
+.sidebar summary::-webkit-details-marker { display: none; }
+.sidebar summary::before { content: '▸'; width: 0.9rem; flex: none; color: var(--c-text-muted); font-size: 0.75rem; transition: transform 0.15s; }
+.sidebar details[open] > summary::before { transform: rotate(90deg); }
+.sidebar summary a { flex: 1; }
+.nav-root > li > a, .nav-root > li > details > summary a { font-weight: 600; }
+
+main { min-width: 0; padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; }
+.page { max-width: var(--content-max); }
+.toc { position: sticky; top: 4.6rem; padding: 2rem 1.25rem 2rem 0; font-size: 0.84rem; max-height: calc(100vh - 5rem); overflow: auto; }
+.toc p { margin: 0 0 0.5rem; color: var(--c-text-muted); font-weight: 600; }
+.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--c-border); }
+.toc li a { display: block; padding: 0.18rem 0 0.18rem 0.75rem; color: var(--c-text-muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
+.toc li.toc-3 a { padding-left: 1.5rem; }
+.toc li a:hover { color: var(--c-text); }
+.toc li a.active { color: var(--c-heading); border-left-color: var(--c-accent); }
+
+/* ---------- page ---------- */
+.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.75rem; }
+.crumbs a { color: var(--c-text-muted); }
+h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--c-heading); font-weight: var(--heading-weight); line-height: 1.25; }
+h1 { font-size: 2.1rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
+.prose h2 { font-size: 1.45rem; margin: 2.4rem 0 0.8rem; padding-top: 0.4rem; }
+.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; }
+.prose h4 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }
+.anchor { margin-left: 0.4rem; color: var(--c-text-muted); text-decoration: none; opacity: 0; font-weight: 400; }
+h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
+.summary {
+  font-size: 1.15rem; line-height: 1.55; color: var(--c-text); margin: 0 0 1rem;
+  padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--c-accent);
+}
+.freshness { margin: 0 0 1.5rem; }
+.badge { display: inline-block; font-size: 0.78rem; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; }
+.badge-fresh { color: var(--c-success); }
+.badge-stale { color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 10%, transparent); }
+.badge-unverified { color: var(--c-text-muted); }
+.badge-none { color: var(--c-text-muted); border-style: dashed; }
+.prose > :first-child { margin-top: 0; }
+.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
+.prose li { margin: 0.25rem 0; }
+.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
+.prose :not(pre) > code { background: var(--c-code-bg); color: var(--c-code-text); padding: 0.1em 0.35em; border-radius: 4px; }
+pre.code { background: var(--c-code-bg); color: var(--c-code-text); padding: 1rem; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; border: 1px solid var(--c-border); }
+.prose details { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin: 0 0 1rem; background: var(--c-surface); }
+.prose details > summary { cursor: pointer; font-weight: 600; }
+.prose details[open] > summary { margin-bottom: 0.5rem; }
+hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }
+
+.table-wrap { overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid var(--c-border); border-radius: var(--radius); }
+table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
+th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
+thead th { background: var(--c-surface); color: var(--c-heading); font-weight: 600; }
+tbody tr:last-child td { border-bottom: 0; }
+
+/* callouts */
+blockquote { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-left: 3px solid var(--c-border); background: var(--c-surface); border-radius: 0 var(--radius) var(--radius) 0; }
+blockquote > :last-child { margin-bottom: 0; }
+.callout-title { font-weight: 700; margin: 0 0 0.3rem !important; }
+.callout-note { border-left-color: var(--c-info); }
+.callout-note .callout-title { color: var(--c-info); }
+.callout-tip { border-left-color: var(--c-success); }
+.callout-tip .callout-title { color: var(--c-success); }
+.callout-warning, .callout-risk { border-left-color: var(--c-danger); }
+.callout-warning .callout-title, .callout-risk .callout-title { color: var(--c-danger); }
+.callout-edge { border-left-color: var(--c-warning); background: color-mix(in srgb, var(--c-warning) 8%, var(--c-surface)); }
+.callout-edge .callout-title { color: var(--c-warning); }
+.callout-unverified { border-left-style: dashed; border-left-color: var(--c-text-muted); }
+.callout-unverified .callout-title { color: var(--c-text-muted); }
+.callout-decision { border-left-color: var(--c-accent); }
+
+/* code links */
+.code-link code { background: none; padding: 0; color: inherit; }
+a.code-link { white-space: nowrap; }
+a.code-link::before { content: '‹›'; display: inline-block; font-family: var(--font-mono); font-size: 0.78em; margin-right: 0.25em; color: var(--c-text-muted); text-decoration: none; }
+.code-web { font-size: 0.8em; color: var(--c-text-muted); }
+
+/* diagrams */
+.diagram { position: relative; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
+.diagram figcaption { font-size: 0.88rem; color: var(--c-text-muted); margin-bottom: 0.5rem; padding-right: 2.5rem; }
+.diagram-canvas { overflow-x: auto; text-align: center; min-height: 2rem; }
+.diagram-canvas svg { max-width: 100%; height: auto; }
+.diagram-src { display: none; }
+html:not(.js) .diagram-src, .diagram.error .diagram-src { display: block; white-space: pre-wrap; font-size: 0.8rem; color: var(--c-text-muted); }
+.diagram-zoom { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 1rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); cursor: pointer; }
+.diagram .node, .diagram .clickable, .diagram a { cursor: pointer; }
+.diagram g a:hover rect, .diagram g a:hover polygon { filter: brightness(0.96); stroke-width: 2px; }
+.zoom-overlay { position: fixed; inset: 0; z-index: 50; background: var(--c-bg); display: flex; flex-direction: column; }
+.zoom-overlay[hidden] { display: none; }
+.zoom-bar { display: flex; gap: 0.5rem; justify-content: flex-end; padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem; border-bottom: 1px solid var(--c-border); }
+.zoom-bar button { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.8rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
+.zoom-stage { flex: 1; overflow: hidden; cursor: grab; touch-action: none; position: relative; }
+.zoom-stage.dragging { cursor: grabbing; }
+.zoom-stage > div { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
+.zoom-stage svg { max-width: none !important; height: auto; }
+
+/* decision tables */
+.decision { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
+.decision .table-wrap { margin: 0; background: var(--c-bg); }
+.decision-title { font-weight: 700; color: var(--c-heading); margin: 0 0 0.25rem !important; }
+.decision-hint { font-size: 0.85rem; color: var(--c-text-muted); margin: 0 0 0.75rem !important; }
+.decision-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
+.decision-controls label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--c-text-muted); }
+.decision-controls select { font: inherit; font-size: 0.92rem; padding: 0.3rem 0.5rem; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
+.decision-result { margin-bottom: 0.75rem; font-weight: 600; }
+.decision-result:empty { display: none; }
+.decision tr.dim td { opacity: 0.38; }
+.decision tr.hit td { background: var(--c-highlight); }
+.decision td.num { color: var(--c-text-muted); width: 2rem; }
+.decision td.then { font-weight: 600; }
+
+/* drill-down, recent, sources */
+.children { margin-top: 2.5rem; }
+.children h2, .recent h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
+.children ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
+.children a { display: block; height: 100%; padding: 0.8rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; color: var(--c-text); background: var(--c-surface); }
+.children a:hover { border-color: var(--c-accent); }
+.child-title { display: block; font-weight: 600; color: var(--c-heading); margin-bottom: 0.2rem; }
+.child-summary { display: block; font-size: 0.88rem; color: var(--c-text-muted); line-height: 1.45; }
+.recent { margin-top: 2.5rem; }
+.recent ul { padding-left: 1.1rem; }
+.sources { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: 0.88rem; }
+.sources p { margin: 0 0 0.4rem; color: var(--c-text-muted); }
+.sources ul { margin: 0; padding-left: 1.1rem; }
+.footer { max-width: var(--content-max); margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: 0.8rem; color: var(--c-text-muted); }
+.footer a { color: var(--c-text-muted); }
+
+/* ---------- responsive ---------- */
+@media (max-width: 1180px) {
+  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
+  .toc { display: none; }
+}
+@media (max-width: 820px) {
+  .layout { display: block; }
+  .nav-toggle { display: inline-block; }
+  .sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(85vw, 20rem); height: auto;
+    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
+    background: var(--c-bg); transform: translateX(-105%); transition: transform 0.2s ease;
+    box-shadow: 8px 0 24px color-mix(in srgb, var(--c-text) 12%, transparent);
+  }
+  body.nav-open .sidebar { transform: none; }
+  .topbar { flex-wrap: wrap; gap: 0.6rem; }
+  .search { order: 3; flex-basis: 100%; max-width: none; }
+  .brand { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+  .controls { order: 2; width: 100%; }
+  .theme-pick { flex: 1; min-width: 0; display: flex; }
+  .theme-pick select { width: 100%; min-width: 0; }
+  h1 { font-size: 1.7rem; }
+}
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
+@media print {
+  .topbar, .sidebar, .toc, .diagram-zoom, .footer { display: none; }
+  .layout { display: block; }
+}