Pillar Tile · Compact · CO

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

export const meta: CompendiumMeta = {
  id: 362,
  slug: 'pillar-tile-compact-co',
  name: 'Pillar Tile · Compact · CO',
  category: 'pillars-roles',
  subcategory: 'identity-tiles',
  pillar: 'co',
  description: 'Compact CO pillar nameplate — single-row identity strip for dense layouts.',
  spec: `## Intent
A single-row, compact restatement of the CO pillar identity. Mirrors the DO compact tile so the family scans as a unit at small sizes.

## Acceptance Criteria
- [ ] Renders 'CO · Architect' in one row at 220px width
- [ ] Carries the canonical principle in a single line
- [ ] Includes pillar ordinal № II
- [ ] Does not introduce runtime state — pure render

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots
- ≤ 150 lines body`,
  tags: ['card', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 80, a11y: 'aa', themed: true, animated: false },
};

const pillar = {
  short: 'CO',
  full: 'COmpose',
  role: 'Architect',
  principle: 'Human owns the architecture; AI implements it.',
  ordinal: 'II',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <div class="grid grid-cols-[auto_1fr_auto] items-stretch">
    <div class="bg-co border-e-4 border-black flex items-center justify-center px-3 font-black text-2xl shrink-0">{pillar.short}</div>
    <div class="px-3 py-2 min-w-0">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 truncate">{pillar.full} · № {pillar.ordinal}</div>
      <div class="font-black uppercase text-base leading-tight truncate">{pillar.role}</div>
    </div>
    <div class="border-s-2 border-black border-dashed px-2 py-2 font-mono text-[8px] uppercase tracking-widest opacity-60 flex items-center shrink-0">COMPACT</div>
  </div>

  <div class="border-t-4 border-black px-3 py-2">
    <p class="text-[11px] leading-snug font-semibold">{pillar.principle}</p>
  </div>
</article>