Sign-Off Chip

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

export const meta: CompendiumMeta = {
  id: 41,
  slug: 'sign-off-chip',
  name: 'Sign-Off Chip',
  category: 'governance-risk',
  subcategory: 'signoff',
  pillar: 'go',
  description: 'A named-human sign-off — the atomic unit of accountability in GO.',
  spec: `## Intent
Make accountability legible. A sign-off is a person + a role + a timestamp; without that triple, "approved" means nothing under audit.

## Acceptance Criteria
- [ ] Human name + initials avatar
- [ ] Authority level (Author / Architect / Governor)
- [ ] ISO-style timestamp
- [ ] Same-Person Rule indicator when relevant

## Constraints
- Compact — fits in a PR comment or compendium card
- No external avatar service`,
  tags: ['card', 'stamp', 'badge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 85, a11y: 'aa', themed: true, animated: false },
};

const sig = {
  name: 'The Governor',
  initials: 'TZ',
  role: 'Governor',
  spec: 'SPEC-204',
  ts:   '2026-05-18 13:30Z',
  samePersonOk: true,
};
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden"
     style="box-shadow: 4px 4px 0 0 var(--color-ink);">
  <div class="flex items-stretch gap-3">
    <div class="w-12 h-12 border-2 border-black bg-go flex items-center justify-center shrink-0">
      <span class="font-black text-base text-black tracking-tight">{sig.initials}</span>
    </div>

    <div class="min-w-0 flex-1">
      <div class="flex items-baseline gap-2">
        <p class="font-black text-sm leading-none truncate">{sig.name}</p>
        <span class="px-1.5 py-px border-2 border-black bg-ink text-paper font-mono text-[8px] uppercase tracking-widest">{sig.role}</span>
      </div>
      <p class="mt-1 font-mono text-[10px] uppercase tracking-widest opacity-70">Signed · {sig.spec}</p>
      <p class="mt-0.5 font-mono text-[10px] opacity-60 tabular-nums">{sig.ts}</p>
    </div>

    <div class="relative shrink-0 self-center">
      <div class="w-14 h-14 border-4 border-black bg-paper flex items-center justify-center" style="transform: rotate(-8deg);">
        <span class="font-black text-[9px] uppercase tracking-widest leading-tight text-center text-danger">Signed<br/>Off</span>
      </div>
    </div>
  </div>

  {sig.samePersonOk && (
    <div class="mt-2 pt-2 border-t-2 border-black flex items-center gap-2">
      <span class="w-2 h-2 bg-success" aria-hidden="true"></span>
      <p class="font-mono text-[9px] uppercase tracking-widest opacity-70">Same-Person Rule · author ≠ approver</p>
    </div>
  )}
</div>