diff --git a/shared/homepage/app.js b/shared/homepage/app.js
index 3f9ad8c..5795b05 100644
--- a/shared/homepage/app.js
+++ b/shared/homepage/app.js
@@ -95,9 +95,9 @@ function miCard(svc, state) {
if (m.use) parts.push('
Use: ' + esc(m.use) + '
');
if (m.compaction) parts.push('⚡ ' + esc(m.compaction) + '
');
if (m.supervision) parts.push('' + esc(m.supervision) + '
');
- if (m.permission) parts.push('⚠ ' + esc(m.permission) + '
');
- if (m.warn) parts.push('' +
- '⚠ ' + esc(m.warn) + '
');
+ if (m.permission) parts.push('⚠ ' + esc(m.permission) + '
');
+ if (m.warn) parts.push('⚠ privacy note
' +
+ '' + esc(m.warn) + '
');
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 ? '
' : '';
const warn = svc.warn
- ? '⚠ ' + esc(svc.warn) + '
'
+ ? '⚠ privacy note
' +
+ '' + esc(svc.warn) + '
'
: '';
panel.innerHTML =
'' + art +
' ' + BADGE_LABEL[state] + '' +
' ' + esc(svc.name) + '' +
'
' +
- '' + descHTML(svc) + '
' + warn +
- '' + links.join('') + '
';
+ '' + descHTML(svc) + '
' +
+ '' + links.join('') + '
' + 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;
diff --git a/shared/homepage/style.css b/shared/homepage/style.css
index 8ec8023..d236f92 100644
--- a/shared/homepage/style.css
+++ b/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;
- text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); }
+.docs details.key-warn summary { cursor: pointer; list-style: none; user-select: none; }
+.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; }