feat(atlas): UX — overview rail + gate glyphs + pill reconcile (#3,#4,#5)

Closes the UX sprint's authored layer.
#3 Horizontal-scroll blindness → an always-visible "PIPELINE" overview rail:
9 colour-coded chips (00 Notice → 08 Learn) showing the whole shape at a glance,
each click-to-scroll to its stage. First-timers now see the arc + that more exists.
#4 Real gate glyph — 🔒 on the two checkpoint transitions (human @04, CI @06),
desktop spine + mobile rows.
#5 Reconcile legend with Plain: decorative node pills hidden in Plain, so colour
is reserved for live status (green/amber/coral) — exactly what the legend keys.
(#6 attached chips/grammar: the question-vs-statement label mix is meaningful —
decisions vs milestones — kept; SVG chip background skipped as low-value.)

New Stage.short (guarded by JSON validity via existing tests). 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

@@ -86,6 +86,19 @@
   .legend .lg{display:inline-flex;align-items:center;gap:6px}
   .legend .lg i{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.35)}
   .legend .dash{width:18px;border-top:2px dashed var(--violet);display:inline-block}
+  /* overview rail — see the whole 9-stage shape + jump to any stage */
+  .rail{display:flex;gap:4px;flex-wrap:wrap;align-items:center;
+    padding:8px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
+  .rail .lbl{color:var(--dim);letter-spacing:1.5px;margin-right:4px;font-size:11px}
+  .railchip{font:inherit;font-size:11px;cursor:pointer;color:var(--ink);
+    background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 9px}
+  .railchip:hover{border-color:var(--blue)}
+  .railchip b{color:var(--dim);font-weight:600;margin-right:3px}
+  .railchip.gate{border-color:rgba(245,185,66,.5)} .railchip.telos{border-color:rgba(155,140,255,.5)}
+  .railchip.exec{border-color:rgba(255,122,92,.5)} .railchip.cd{border-color:rgba(74,208,122,.5)}
+  .railarr{color:var(--dim);font-size:10px}
+  /* Plain view: drop decorative node pills so colour is reserved for live status (keyed in the legend) */
+  body.plain .node .pill{display:none}
 
   .scroll{overflow-x:auto;padding:24px 22px 20px}
   .track{position:relative;display:flex;align-items:flex-start;min-width:max-content}
@@ -167,6 +180,7 @@
   <span class="lg"><i style="background:var(--gold)"></i>governance gate — must pass to advance</span>
   <span class="lg"><span class="dash"></span> feedback loop · partly manual</span>
 </div>
+<div class="rail mono" id="rail"></div>
 
 <div class="scroll">
   <div class="track" id="track">
@@ -239,10 +253,24 @@ function renderAtlas(){
   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:''}`;
+    tr.innerHTML=`<span class="tr-lbl">${(idx===4||idx===6)?'🔒 ':''}${s.trans_label}</span>${s.trans?' '+s.trans:''}`;
     track.appendChild(tr);
   }
   });
+  renderRail();
+}
+
+function renderRail(){
+  const rail=document.getElementById('rail');
+  rail.innerHTML='<span class="lbl">PIPELINE</span>';
+  STAGES.forEach((s,i)=>{
+    const c=document.createElement('button');
+    c.className='railchip'+(s.cls?' '+s.cls:'');
+    c.innerHTML=`<b>${(s.no||'').replace('STAGE ','')}</b>${s.short||s.plain_title||s.title}`;
+    c.onclick=()=>{ if(stageEls[i]) stageEls[i].scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'}); };
+    rail.appendChild(c);
+    if(i<STAGES.length-1){const a=document.createElement('span');a.className='railarr';a.textContent='→';rail.appendChild(a);}
+  });
 }
 
 function renderTimeline(){
@@ -293,7 +321,7 @@ function build(){
     t.setAttribute('x',(cs[i]+cs[i+1])/2);t.setAttribute('y',RAILY-9);
     t.setAttribute('text-anchor','middle');
     t.setAttribute('class',gate?'translabel translabel-gate':'translabel');
-    t.textContent=(gate?'▸ ':'')+s.trans_label;
+    t.textContent=(gate?'🔒 ':'')+s.trans_label;
     const ttl=document.createElementNS('http://www.w3.org/2000/svg','title');
     ttl.textContent=s.trans||''; t.appendChild(ttl);
     tg.appendChild(t);