diff --git a/docs/architecture/viewer.template.html b/docs/architecture/viewer.template.html
index c567495..56605b3 100644
--- a/docs/architecture/viewer.template.html
+++ b/docs/architecture/viewer.template.html
@@ -190,6 +190,7 @@ ol.steps .ev{display:block;color:var(--dim2);font-size:11.5px;margin-top:3px}
     <h2>Search</h2>
     <input class="searchbox" id="q" placeholder="component, file or symbol">
     <div class="results" id="results"></div>
+    <div id="archctl">
     <h2>Filters</h2>
     <label class="toggle"><input type="checkbox" id="tLow" checked> show low-confidence relations</label>
     <label class="toggle"><input type="checkbox" id="tMed" checked> show medium-confidence relations</label>
@@ -199,6 +200,7 @@ ol.steps .ev{display:block;color:var(--dim2);font-size:11.5px;margin-top:3px}
     <label class="toggle"><input type="checkbox" id="tWires" checked> draw relation wires</label>
     <h2>Type</h2>
     <div class="legend" id="legend"></div>
+    </div>
   </nav>
 
   <main id="main"></main>
@@ -379,6 +381,11 @@ const capById = Object.fromEntries(CAPS.capabilities.map(c => [c.id, c]));
 const BLOCKREASON = new Set(['configuration missing','deployment missing',
                              'external dependency unavailable','scenario missing']);
 const dotCls = v => v==='spec-only' ? 'speconly' : v;
+// The ledger carries markdown inline code, because docs/spec.md does. Rendering
+// it literally puts backticks on screen next to every path.
+const md = t => (t||'').replace(/[&<>]/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[m]))
+                       .replace(/`([^`]+)`/g, '<code>$1</code>')
+                       .replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
 
 function capRow(c){
   const cls = {'capability missing':'missing','capability exists but unreachable':'unreachable',
@@ -436,7 +443,7 @@ function renderCapSide(id){
     <h3>${c.title}</h3>
     <div class="sub">${c.section} · ${c.domain.join(', ')} · ${c.scope}${
       c.implementation.gap_class==='none'?'':' · '+c.implementation.gap_class}</div>
-    <p>${c.state}</p>
+    <p>${md(c.state)}</p>
     <section><h4>Implementation</h4>
       <div class="bars">${DIMS.map(d=>{
         const v = c.implementation[d];
@@ -449,8 +456,8 @@ function renderCapSide(id){
     <section><h4>Definition of done — ${c.criteria.length}</h4>
       ${c.criteria.map(cr=>`<div class="crit">
         <span class="vd ${cr.verified}">${cr.verified}</span><span class="rs">${cr.reason}</span>
-        <p>${cr.text}</p>
-        ${cr.detail?`<p style="color:var(--dim2)">${cr.detail}</p>`:''}
+        <p>${md(cr.text)}</p>
+        ${cr.detail?`<p style="color:var(--dim2)">${md(cr.detail)}</p>`:''}
         ${(cr.evidence||[]).length?`<p class="mono" style="font-size:11px;color:var(--dim2)">${cr.evidence.join('<br>')}</p>`:''}
       </div>`).join('')}</section>
     <section><h4>Blockers — ${blockers.length}</h4>
@@ -659,6 +666,10 @@ document.getElementById('views').innerHTML = VIEWS.map(v=>`<button class="viewbt
 document.getElementById('legend').innerHTML = [...new Set(ARCH.components.map(c=>c.type))].sort().map(t=>`<span>${t}</span>`).join('');
 
 function setView(id){ S.view=id; S.sel=null; S.selCap=null;
+  // The relation filters and the component-type legend do nothing in the
+  // capability views. Leaving them visible reads as controls that are broken.
+  const vw = VIEWS.find(x=>x.id===id);
+  document.getElementById('archctl').style.display = (vw.caps || vw.inv) ? 'none' : '';
   document.querySelectorAll('.viewbtn').forEach(b=>b.classList.toggle('on', b.dataset.v===id));
   renderView();
   const v = VIEWS.find(x=>x.id===id);