feat(atlas): UX — plain node titles + mobile transition rows (re-review #1,#2)

Lap-2 review's top two findings:
#1 Node titles were still jargon (the lap-1 disease one level down). Every node
now has a plain_t ("var-go Oath" → "Definition of done", "Admission controller"
→ "Tamper-proof seal", …); Plain view leads with it and demotes the technical
name to a dim in-card subtitle — mirrors the stage-head pattern. plain_t on every
authored node is now guard-tested.
#2 Transition labels lived only in the SVG spine (display:none <820px) with a
hover-only rationale — invisible on phones. Added stacked-layout transition rows
(HTML, always-visible, full sentence, no hover) shown on mobile; desktop header
band scoped to ≥821px so mobile isn't stretched.

build/vet/lint(0)/test green; desktop Plain screenshot-verified.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

internal/web/static/cad-atlas.html

@@ -65,8 +65,18 @@
   .translabel{fill:var(--mono);font-size:10px;font-family:ui-monospace,SFMono-Regular,monospace}
   .translabel-gate{fill:var(--gold);font-weight:700}
   .stagehead{min-height:64px}
-  body.plain .stagehead{min-height:188px}
-  .stage .node:first-of-type{margin-top:24px}
+  @media(min-width:821px){
+    body.plain .stagehead{min-height:188px}
+    .stage .node:first-of-type{margin-top:24px}
+  }
+  .trans-row{display:none}
+  @media(max-width:820px){
+    .trans-row{display:block;margin:0 0 10px 6px;padding:7px 12px;border-left:3px solid var(--mono);
+      background:var(--panel);border-radius:0 8px 8px 0;font-size:12px;color:var(--dim);line-height:1.45}
+    .trans-row .tr-lbl{display:block;color:var(--mono);font-weight:600;margin-bottom:2px}
+    .trans-row-gate{border-left-color:var(--gold)}
+    .trans-row-gate .tr-lbl{color:var(--gold)}
+  }
   /* Plain view hides the jargon-dense infra ribbon + technical footer */
   body.plain .substrate{display:none}
   body.plain footer{display:none}
@@ -202,9 +212,9 @@ function renderAtlas(){
     el.innerHTML=`<b>${h.n}</b><span class="k mono">${h.k}</span>`;sub.appendChild(el);});
   const mesh=document.createElement('div');mesh.className='host mesh mono';mesh.textContent=NS;sub.appendChild(mesh);
   stageEls=[];
-  track.querySelectorAll('.stage').forEach(el=>el.remove());
+  track.querySelectorAll('.stage,.trans-row').forEach(el=>el.remove());
   const plain = MODE==='plain';
-  STAGES.forEach(s=>{
+  STAGES.forEach((s,idx)=>{
   const st=document.createElement('div');st.className='stage '+(s.cls||'');
   const head = plain
     ? `<div class="no mono">${s.no}</div><h2>${s.plain_title||s.title}</h2>`+
@@ -214,7 +224,9 @@ function renderAtlas(){
   (s.nodes||[]).forEach(n=>{
     const pill=n.pill?`<span class="pill" style="background:${n.pill}"></span>`:'';
     const body = plain ? (n.plain||n.d||'') : (n.d||'');
-    let inner=`<div class="t">${pill}${n.t}</div>`+(body?`<div class="d">${body}</div>`:'');
+    const ntitle = (plain && n.plain_t) ? n.plain_t : n.t;
+    const nsub = (plain && n.plain_t && n.plain_t!==n.t) ? `<div class="tech-sub">${n.t}</div>` : '';
+    let inner=`<div class="t">${pill}${ntitle}</div>${nsub}`+(body?`<div class="d">${body}</div>`:'');
     if(!plain){
       if(n.tags&&n.tags.length)inner+=n.tags.map(t=>`<span class="tag mono">${t}</span>`).join('');
       if(n.risk)inner+=`<div class="risk mono"><span class="lo">LOW · auto</span><span class="md">MED · ntfy gate</span><span class="hi">HIGH · blocked</span></div>`;
@@ -223,6 +235,13 @@ function renderAtlas(){
     h+=`<div class="node ${n.cls||''}">${inner}</div>`;
   });
   st.innerHTML=h;track.appendChild(st);stageEls.push(st);
+  // stacked-layout transition row (shown on mobile where the SVG spine is hidden)
+  if(s.trans_label){
+    const tr=document.createElement('div');
+    tr.className='trans-row'+((idx===4||idx===6)?' trans-row-gate':'');
+    tr.innerHTML=`<span class="tr-lbl">${s.trans_label}</span>${s.trans?' '+s.trans:''}`;
+    track.appendChild(tr);
+  }
   });
 }