Pillar Tile · GO

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

export const meta: CompendiumMeta = {
  id: 19,
  slug: 'pillar-tile-go',
  name: 'Pillar Tile · GO',
  category: 'pillars-roles',
  subcategory: 'identity-tiles',
  pillar: 'go',
  description: 'Civic nameplate for the GO pillar — Governor role, presented as a governance commission seal.',
  spec: `## Intent
GO pillar — the Governor — rendered as a commission seal. Top-down emblematic layout signals oversight authority.

## Acceptance Criteria
- [ ] Renders 'GO · Governor' with principle text
- [ ] Carries a central emblem with rosette/seal styling
- [ ] Shows commission ordinal and term markings
- [ ] Does not lose centring at 220px preview 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: 'GO',
  full: 'GOvern',
  role: 'Governor',
  principle: 'Autonomy without accountability is catastrophe.',
  ordinal: 'IV',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <div class="bg-go border-b-4 border-black px-3 py-2 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] font-black truncate">Commission of the</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] shrink-0">№ IV</div>
  </div>

  <div class="px-4 pt-4 pb-2 flex flex-col items-center text-center">
    <div class="relative">
      <div class="w-20 h-20 border-4 border-black bg-go flex items-center justify-center rotate-45">
        <div class="-rotate-45 font-black text-2xl">{pillar.short}</div>
      </div>
      <div class="absolute -bottom-1 start-1/2 -translate-x-1/2 bg-paper border-2 border-black px-2 py-0.5 font-mono text-[8px] uppercase tracking-widest whitespace-nowrap">{pillar.full}</div>
    </div>
    <div class="mt-5 font-black uppercase text-2xl leading-none tracking-tight">{pillar.role}</div>
  </div>

  <div class="px-4 py-3 border-t-2 border-black border-dashed">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-1 text-center">By Order of the Commission</div>
    <p class="text-[12px] leading-snug font-semibold text-center">{pillar.principle}</p>
  </div>

  <div class="border-t-4 border-black px-3 py-2 flex items-center justify-between bg-paper gap-2">
    <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 truncate">Term · Indefinite</div>
    <div class="font-mono text-[9px] uppercase tracking-widest text-go font-black shrink-0">★ SEALED</div>
  </div>
</article>