stage-10: design pass — neuronetz family alignment

Logo background stripped to transparent (it was a flattened export with the
checkerboard baked in) so the cyan drop-shadow glow now hugs the shield.
Space Grotesk for headings + chrome (the neuronetz family typeface); data
stays monospace. Topbar gains the family framing — an "NN-sc · Security"
tag and a link to the neuronetz.ai hub. Every cockpit view now carries a
one-line page-intro explaining its purpose.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/psyc/cockpit/static/cockpit.css

@@ -10,6 +10,7 @@
   --green: #4ade80;
   --amber: #fbbf24;
   --red: #f87171;
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
 }
 
 * { box-sizing: border-box; }
@@ -25,6 +26,13 @@ a { color: #93c5fd; text-decoration: none; }
 a:hover { text-decoration: underline; }
 code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; }
 
+/* Space Grotesk for headings + chrome (neuronetz family type); data stays monospace */
+h1, h2, h3,
+.brand-sub, .nav a, .family-tag, .family-hub, .bot-name { font-family: var(--font-display); }
+
+/* one-line purpose statement under a page title */
+.page-intro { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 4px 0 18px; max-width: 74ch; }
+
 .topbar {
   display: flex; justify-content: space-between; align-items: center;
   padding: 10px 24px;
@@ -40,7 +48,7 @@ code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; }
   height: 48px; width: 160px;
   object-fit: cover; object-position: center;
   display: block;
-  filter: drop-shadow(0 0 8px var(--accent-glow));
+  filter: drop-shadow(0 0 3px var(--accent-glow)) drop-shadow(0 0 11px var(--accent-glow));
 }
 .brand-sub {
   color: var(--muted); font-size: 11px;
@@ -50,6 +58,16 @@ code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; }
 .nav a { margin-left: 18px; color: var(--muted); }
 .nav a:hover { color: var(--text); }
 
+/* neuronetz family framing — right of the topbar */
+.family { display: flex; align-items: center; gap: 14px; }
+.family-tag {
+  font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
+  color: var(--accent); background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px;
+}
+.family-hub { color: var(--muted); font-size: 12px; }
+.family-hub:hover { color: var(--accent); text-decoration: none; }
+
 .content { padding: 24px; max-width: 1280px; margin: 0 auto; }
 .footer { text-align: center; color: var(--muted); padding: 24px; font-size: 12px; }
 

src/psyc/cockpit/templates/base.html

@@ -4,6 +4,9 @@
   <meta charset="utf-8">
   <title>{% block title %}psyc cockpit{% endblock %}</title>
   <link rel="icon" type="image/png" href="/static/psyc-logo.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/cockpit.css">
   <link rel="stylesheet" href="/static/psyc-tokens.css">
 </head>
@@ -17,8 +20,11 @@
       <a href="/cases">Cases</a>
       <a href="/ledger">Ledger</a>
       <a href="/train">Trainline</a>
-      <a href="/healthz">Health</a>
     </nav>
+    <div class="family">
+      <span class="family-tag">NN-sc · Security</span>
+      <a class="family-hub" href="https://neuronetz.ai" target="_blank" rel="noopener">neuronetz.ai ▸</a>
+    </div>
   </header>
   <main class="content">
     {% block content %}{% endblock %}

src/psyc/cockpit/templates/case_detail.html

@@ -8,6 +8,7 @@
     <a class="replay-btn" href="/cases/{{ case.case_id }}/journey">▶ case journey</a>
   </div>
   <p class="summary-lead">{{ case.summary }}</p>
+  <p class="page-intro">The full record for one case — how Classifyline rated it, what Scoutline observed, the evidence Sealine encrypted, where Routeline may send it, and every ledger entry it produced.</p>
 
   <div class="grid">
     <div class="card">

src/psyc/cockpit/templates/cases.html

@@ -6,6 +6,7 @@
     <h1>Case Queue</h1>
     <span class="count">{{ total }} case{{ '' if total == 1 else 's' }}</span>
   </div>
+  <p class="page-intro">Every threat case psyc is tracking — ingested from URLhaus, CISA KEV, and Feodo Tracker, then classified by severity and TLP. The live queue of what the platform currently knows about; click any case to follow it through the pipeline.</p>
   {% if not cases %}
     <p class="empty">No cases yet. Run <code>psyc fetch urlhaus</code> to ingest.</p>
   {% else %}

src/psyc/cockpit/templates/journey.html

@@ -39,6 +39,7 @@
     <button class="replay-btn" onclick="replayMesh()">▶ replay</button>
   </div>
   <p class="summary-lead">{{ case.summary }}</p>
+  <p class="page-intro">Watch the case move through psyc's worker mesh — seven bots, each performing one pipeline stage and reporting its real result. The Classifier bot's severity verdict comes from the live fine-tuned model; hit ▶ replay to run it again.</p>
 
   <ol class="mesh playing" id="mesh">
     <span class="case-token" aria-hidden="true"></span>

src/psyc/cockpit/templates/ledger.html

@@ -6,6 +6,7 @@
     <h1>Immutable Audit Ledger</h1>
     <span class="count">{{ total }} entr{{ 'y' if total == 1 else 'ies' }}</span>
   </div>
+  <p class="page-intro">The append-only audit trail. Every external submission and every policy-blocked route is recorded here — nothing leaves psyc without a row. This is the platform's proof of exactly what happened, when, and to whom.</p>
   {% if not entries %}
     <p class="empty">No ledger entries yet. Run <code>psyc submit &lt;case_id&gt;</code> or <code>psyc demo</code>.</p>
   {% else %}

src/psyc/cockpit/templates/train.html

@@ -6,6 +6,7 @@
     <h1>Trainline — Datasets</h1>
     <span class="count">{{ datasets|length }} dataset{{ '' if datasets|length == 1 else 's' }}</span>
   </div>
+  <p class="page-intro">Trainline turns reviewed cases into LoRA training data and tracks the fine-tuned adapters built from it — the JSONL datasets below, and the trained adapters with their loss curves further down. The adapter behind the Classifier bot is trained here.</p>
   {% if not datasets %}
     <p class="empty">No datasets yet. Run <code>psyc train-build-all</code>.</p>
   {% else %}