Pillar Tile · CO

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

export const meta: CompendiumMeta = {
  id: 17,
  slug: 'pillar-tile-co',
  name: 'Pillar Tile · CO',
  category: 'pillars-roles',
  subcategory: 'identity-tiles',
  pillar: 'co',
  description: 'Civic nameplate for the CO pillar — Architect role, with blueprint-style identity.',
  spec: `## Intent
The CO pillar tile — Architect — rendered as a stamped municipal plaque. Vertical orientation distinguishes it from the DO tile while preserving the same civic vocabulary.

## Acceptance Criteria
- [ ] Renders 'CO · Architect' with the canonical principle
- [ ] Uses a blueprint-style ruled grid background
- [ ] Carries seal/issued-by markings
- [ ] Does not collapse layout below 220px width

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots
- ≤ 150 lines body`,
  tags: ['card', 'stamp', '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-[1fr_auto]">
    <div class="border-e-4 border-black p-4 min-w-0">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60">Dept. № II</div>
      <div class="mt-1 font-black uppercase text-2xl leading-none tracking-tight">{pillar.role}</div>
      <div class="font-mono text-[10px] uppercase tracking-widest opacity-70 mt-1 truncate">{pillar.full}</div>

      <div class="mt-4 pt-3 border-t-2 border-black">
        <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-1">Charter</div>
        <p class="text-[12px] leading-snug font-semibold">{pillar.principle}</p>
      </div>
    </div>

    <div class="bg-co flex flex-col items-center justify-between py-3 px-2 w-12 shrink-0">
      <div class="font-black text-xl leading-none">{pillar.short}</div>
      <div class="font-mono text-[9px] uppercase tracking-[0.25em]" style="writing-mode: vertical-rl; transform: rotate(180deg);">Pillar II</div>
      <div class="w-6 h-6 border-2 border-black bg-paper flex items-center justify-center font-black text-[10px]">✓</div>
    </div>
  </div>

  <div class="border-t-4 border-black px-3 py-2 flex items-center justify-between bg-co gap-2">
    <div class="font-mono text-[9px] uppercase tracking-widest truncate">Issued · Charter Office</div>
    <div class="font-mono text-[9px] uppercase tracking-widest shrink-0">Seal · CO-002</div>
  </div>
</article>