Pillar Tile · DO

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

export const meta: CompendiumMeta = {
  id: 16,
  slug: 'pillar-tile-do',
  name: 'Pillar Tile · DO',
  category: 'pillars-roles',
  subcategory: 'identity-tiles',
  pillar: 'do',
  description: 'Civic nameplate for the DO pillar — Author role, canonical principle, and jurisdiction stamp.',
  spec: `## Intent
A large municipal-grade tile that names the DO pillar, its human role (Author), and its canonical principle. Designed to read like an official department nameplate hung at a city hall door.

## Acceptance Criteria
- [ ] Shows pillar short ('DO'), full name, and role badge
- [ ] Renders the principle verbatim from pillars.ts
- [ ] Carries an official "DEPT" stamp and ordinal number
- [ ] Does not introduce runtime state — pure render

## 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: 'DO',
  full: 'DOcument',
  role: 'Author',
  principle: 'Specification is the only source of truth.',
  ordinal: 'I',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <div class="bg-do border-b-4 border-black px-4 py-3 flex items-center justify-between">
    <div class="flex items-center gap-3 min-w-0">
      <div class="w-12 h-12 border-4 border-black bg-paper flex items-center justify-center font-black text-lg shrink-0">{pillar.short}</div>
      <div class="min-w-0">
        <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-70">Department</div>
        <div class="font-black uppercase text-sm leading-tight truncate">{pillar.full}</div>
      </div>
    </div>
    <div class="font-mono text-[10px] uppercase tracking-widest border-2 border-black px-2 py-0.5 bg-paper shrink-0">№ {pillar.ordinal}</div>
  </div>

  <div class="px-4 py-4">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-1">Office of the</div>
    <div class="font-black uppercase text-2xl leading-none tracking-tight">{pillar.role}</div>
    <div class="mt-3 border-t-2 border-black border-dashed pt-3">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-1">Founding Principle</div>
      <p class="text-[12px] leading-snug font-semibold">{pillar.principle}</p>
    </div>
  </div>

  <div class="border-t-4 border-black px-4 py-2 flex items-center justify-between bg-paper">
    <div class="font-mono text-[9px] uppercase tracking-widest opacity-60">Est. Charter v1.0</div>
    <div class="rotate-[-6deg] text-do font-black text-[10px] tracking-[0.2em] border-2 border-do px-1.5 py-0.5 opacity-80">OFFICIAL</div>
  </div>
</article>