Pillar Tile · DE

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

export const meta: CompendiumMeta = {
  id: 18,
  slug: 'pillar-tile-de',
  name: 'Pillar Tile · DE',
  category: 'pillars-roles',
  subcategory: 'identity-tiles',
  pillar: 'de',
  description: 'Civic nameplate for the DE pillar — Gatekeeper role, rendered as a customs/checkpoint stamp.',
  spec: `## Intent
DE pillar — the Gatekeeper — visualised as a port-of-entry inspection stamp. Conveys "value flows when validated" through customs/checkpoint motifs.

## Acceptance Criteria
- [ ] Renders 'DE · Gatekeeper' with principle text
- [ ] Carries a circular customs stamp visual
- [ ] Includes a checkpoint barrier strip
- [ ] Does not overflow 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: 'DE',
  full: 'DEmonstrate',
  role: 'Gatekeeper',
  principle: 'Value flows at the speed of validation, not schedules.',
  ordinal: 'III',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <div class="h-3 flex" aria-hidden="true">
    <div class="flex-1 bg-de"></div><div class="flex-1 bg-paper"></div><div class="flex-1 bg-de"></div><div class="flex-1 bg-paper"></div><div class="flex-1 bg-de"></div><div class="flex-1 bg-paper"></div><div class="flex-1 bg-de"></div>
  </div>

  <div class="border-t-4 border-b-4 border-black px-3 py-3 flex items-center gap-3">
    <div class="relative w-14 h-14 shrink-0">
      <div class="absolute inset-0 border-4 border-de rounded-full flex items-center justify-center">
        <div class="text-center leading-none">
          <div class="font-black text-de text-base">{pillar.short}</div>
          <div class="font-mono text-de text-[7px] uppercase tracking-widest mt-0.5">CLEAR</div>
        </div>
      </div>
    </div>
    <div class="min-w-0 flex-1">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 truncate">Pillar № III · {pillar.full}</div>
      <div class="font-black uppercase text-xl leading-tight tracking-tight">{pillar.role}</div>
    </div>
  </div>

  <div class="px-4 py-3">
    <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60 mb-1">Mandate</div>
    <p class="text-[12px] leading-snug font-semibold">{pillar.principle}</p>
  </div>

  <div class="border-t-2 border-black border-dashed px-3 py-2 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 truncate">Checkpoint · DE-003</div>
    <div class="font-mono text-[9px] uppercase tracking-widest text-de font-black shrink-0">▸ INSPECTED</div>
  </div>
</article>