homepage: link Model Information panel to the docs AI section

The panel title carries a right-aligned 'AI guide ->' link to
/docs#models (the running-models section), at the point of use.
Bare mode recolors the link; layout is flex baseline, doctrine-minimal.

Seam: homepage_config.bats 6/6; headless smoke census + screenshot.

shared/homepage/app.js

@@ -95,9 +95,9 @@ function miCard(svc, state) {
     if (m.use) parts.push('<div class="mi-use">Use: ' + esc(m.use) + '</div>');
     if (m.compaction) parts.push('<div class="mi-comp">&#9889; ' + esc(m.compaction) + '</div>');
     if (m.supervision) parts.push('<div class="mi-super">' + esc(m.supervision) + '</div>');
-    if (m.permission) parts.push('<div class="mi-perm" title="' + esc(m.permission) + '">&#9888; ' + esc(m.permission) + '</div>');
+    if (m.permission) parts.push('<div class="mi-perm">&#9888; ' + esc(m.permission) + '</div>');
-    if (m.warn) parts.push('<div class="mi-warn">' +
+    if (m.warn) parts.push('<details class="mi-warn"><summary>&#9888; privacy note</summary>' +
-        '&#9888; ' + esc(m.warn) + '</div>');
+        '<div class="warn-body">' + esc(m.warn) + '</div></details>');
     const card = document.createElement('article');
     card.className = 'mi-card mi-' + esc(m.unit);
     card.innerHTML = parts.join('');
@@ -109,7 +109,14 @@ function renderModelInfo(models) {
     panel.className = 'panel model-info';
     const head = document.createElement('div');
     head.className = 'mi-title';
-    head.textContent = 'Model Information';
+    const title = document.createElement('span');
+    title.textContent = 'Model Information';
+    head.appendChild(title);
+    const docsLink = document.createElement('a');
+    docsLink.className = 'mi-docs-link';
+    docsLink.href = '/docs#models';
+    docsLink.textContent = 'AI guide \u2192';
+    head.appendChild(docsLink);
     panel.appendChild(head);
     const grid = document.createElement('div');
     grid.className = 'mi-grid';
@@ -132,19 +139,20 @@ function renderPanel(svc, state) {
     const art = svc.art ? '<img class="app-art" src="' + esc(svc.art) + '" alt=""' +
         (svc.art_bg ? ' style="background:' + esc(svc.art_bg) + ';border-color:' + esc(svc.art_bg) + '"' : '') + '>' : '';
     const warn = svc.warn
-        ? '<div class="svc-warn">&#9888; ' + esc(svc.warn) + '</div>'
+        ? '<details class="svc-warn"><summary>&#9888; privacy note</summary>' +
+          '<div class="warn-body">' + esc(svc.warn) + '</div></details>'
         : '';
     panel.innerHTML =
         '<div class="panel-head">' + art +
         '  <span class="badge ' + state + '">' + BADGE_LABEL[state] + '</span>' +
         '  <span class="name">' + esc(svc.name) + '</span>' +
         '</div>' +
-        '<div class="desc">' + descHTML(svc) + '</div>' + warn +
+        '<div class="desc">' + descHTML(svc) + '</div>' +
-        '<div class="links">' + links.join('') + '</div>';
+        '<div class="links">' + links.join('') + '</div>' + warn;
     if (svc.showLink && svc.url) {
         panel.classList.add('clickable');
         panel.addEventListener('click', function (ev) {
-            if (!ev.target.closest('a')) window.location.href = svc.url;
+            if (ev.target.closest('a, .svc-warn')) return;
         });
     }
     return panel;

shared/homepage/style.css

@@ -81,7 +81,7 @@ body::after {
 }
 
 .panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px;
-  border-radius: 6px; }
+  border-radius: 6px; display: flex; flex-direction: column; }
 .panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; }
 .panel.clickable:hover {
   border-color: var(--proto-cyan);
@@ -134,6 +134,15 @@ body::after {
 .desc-inputs { color: var(--dim); }
 .desc-use { color: var(--fg); margin-top: 4px; }
 .links a { color: var(--link); text-decoration: underline; margin-right: 12px; }
+/* Privacy disclosures: collapsed chip pinned to the panel bottom. */
+.svc-warn { margin-top: auto; padding-top: 8px; color: var(--down); }
+.svc-warn summary, .mi-warn summary { cursor: pointer; color: var(--down);
+  list-style: none; user-select: none; }
+.svc-warn summary::-webkit-details-marker,
+.mi-warn summary::-webkit-details-marker { display: none; }
+.svc-warn summary::after, .mi-warn summary::after { content: " \25B8"; }
+.svc-warn[open] summary::after, .mi-warn[open] summary::after { content: " \25BE"; }
+.warn-body { margin-top: 6px; color: var(--down); }
 
 .foot {
   margin-top: 24px;
@@ -168,8 +177,11 @@ body::after {
 .docs pre code { color: var(--fg); }
 .docs img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 2px; margin: 10px 0; }
 .docs .key-warn { color: var(--down); }
-.docs [title].key-warn { cursor: help;
+.docs details.key-warn summary { cursor: pointer; list-style: none; user-select: none; }
-  text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); }
+.docs details.key-warn summary::-webkit-details-marker { display: none; }
+.docs details.key-warn summary::after { content: " \25B8"; }
+.docs details.key-warn[open] summary::after { content: " \25BE"; }
+.docs details.key-warn .warn-body { margin-top: 4px; }
 .docs .foot-note { color: var(--dim); }
 html[data-bare="1"] .docs h1, html[data-bare="1"] .docs h2 { color: #000; border-color: #000; }
 html[data-bare="1"] .docs a, html[data-bare="1"] .docs code { color: #000; }
@@ -208,7 +220,20 @@ html[data-bare="1"] .top { border-image: none; }
   border-bottom: 1px solid var(--border);
   margin-bottom: 10px;
   padding-bottom: 4px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
 }
+.mi-docs-link {
+  color: var(--link);
+  text-decoration: none;
+  text-transform: none;
+  letter-spacing: 0.06em;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.mi-docs-link:hover { text-decoration: underline; }
 .mi-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -218,9 +243,11 @@ html[data-bare="1"] .top { border-image: none; }
   font-size: 15px;
   line-height: 1.35;
   border: 1px solid var(--mi);
+  background: var(--mi-bg);
   padding: 10px 12px;
   border-radius: 6px;
-  background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 5%, var(--panel)), var(--panel) 60%);
+  display: flex;
+  flex-direction: column;
 }
 .mi-zealot  { --mi: #4fb4ff; }  /* Zealot: Khai's blue blades   */
 .mi-archon  { --mi: #a8ecff; }  /* Archon: pure psychic light   */
@@ -261,7 +288,7 @@ html[data-bare="1"] .top { border-image: none; }
 .mi-inputs { color: var(--dim); }
 .mi-use { color: var(--fg); margin-top: 4px; }
 .mi-super { color: var(--link); margin-top: 6px; }
-.mi-warn { color: var(--down); margin-top: 4px; }
+.mi-warn { margin-top: auto; padding-top: 8px; }
 .mi-perm {
   margin-top: 8px;
   padding: 6px 8px;
@@ -278,7 +305,6 @@ html[data-bare="1"] .top { border-image: none; }
   background: color-mix(in srgb, var(--head) 8%, transparent);
   border-radius: 4px;
 }
-.svc-warn { color: var(--down); margin-top: 6px; }
 
 /* Bare mode strips the model component to plain prose too. */
 html[data-bare="1"] .mi-card { border-color: #000; box-shadow: none; background: none; }
@@ -288,9 +314,12 @@ html[data-bare="1"] .mi-voice { color: #000; text-decoration: underline; }
 html[data-bare="1"] .mi-role, html[data-bare="1"] .mi-spec, html[data-bare="1"] .mi-use, html[data-bare="1"] .mi-comp,
 html[data-bare="1"] .mi-inputs, html[data-bare="1"] .mi-equiv, html[data-bare="1"] .mi-super,
 html[data-bare="1"] .mi-warn, html[data-bare="1"] .mi-hf { color: #000; }
+html[data-bare="1"] .svc-warn summary, html[data-bare="1"] .mi-warn summary,
+html[data-bare="1"] .warn-body { color: #000; }
 html[data-bare="1"] .app-art { display: none; }
 html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { color: #000; border: none; text-shadow: none; padding: 0; }
 html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { border: 1px solid #000; }
+html[data-bare="1"] .mi-docs-link { color: #000; }
 
 /* Protoss layer: selection + scrollbar. */
 ::selection { background: color-mix(in srgb, var(--proto-blue) 45%, transparent); color: #fff; }