Pillar vs Pillar Row

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 421,
  slug: 'pillar-vs-pillar-row',
  name: 'Pillar vs Pillar Row',
  category: 'pillars-roles',
  subcategory: 'comparison',
  pillar: 'do',
  description: 'Single row comparing two pillars head-to-head on focus, role, and primary artifact.',
  spec: `## Intent
A compact A-vs-B row lets the reader contrast any two pillars without scanning a full table. The atom of a pillar-comparison grid.

## Acceptance Criteria
- [ ] Left and right cells each carry pillar token + role caption
- [ ] Middle "vs" divider visually separates the two sides
- [ ] Both pillars stay legible at 220px width
- [ ] Negative: does NOT imply one pillar wins

## Constraints
- Pure CSS, no JS
- Theme-aware via tokens
- No hex literals in brand-colour slots`,
  tags: ['real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const left = { k: 'DO', role: 'Author',    focus: 'Documentation', cls: 'bg-do' };
const right = { k: 'CO', role: 'Architect', focus: 'Construction',  cls: 'bg-co' };
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <div class="flex items-center justify-between mb-2 gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 truncate">Pairwise · A vs B</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 shrink-0">Form C-01</div>
  </div>

  <div class="grid grid-cols-[1fr_auto_1fr] items-stretch border-2 border-black">
    <div class={`${left.cls} px-2 py-2 border-e-2 border-black min-w-0`}>
      <div class="font-black text-lg leading-none">{left.k}</div>
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-80 mt-1 truncate">{left.role}</div>
      <div class="font-mono text-[9px] uppercase tracking-widest mt-2 truncate">{left.focus}</div>
    </div>
    <div class="flex items-center justify-center px-2 bg-paper">
      <span class="font-black text-[10px] uppercase tracking-widest">vs</span>
    </div>
    <div class={`${right.cls} px-2 py-2 border-s-2 border-black min-w-0 text-end`}>
      <div class="font-black text-lg leading-none">{right.k}</div>
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-80 mt-1 truncate">{right.role}</div>
      <div class="font-mono text-[9px] uppercase tracking-widest mt-2 truncate">{right.focus}</div>
    </div>
  </div>

  <div class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60 text-center">spec vs build</div>
</div>