Approval Stamp

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

export const meta: CompendiumMeta = {
  id: 12,
  slug: 'approval-stamp',
  name: 'Approval Stamp',
  category: 'specs-documents',
  subcategory: 'atoms',
  pillar: 'do',
  description: 'A diagonal "APPROVED" rubber-stamp over a spec excerpt — the visual moment a draft becomes truth.',
  spec: `## Intent
Render an excerpt of a spec with a diagonal "APPROVED" stamp slammed over it. The stamp uses double border, slight rotation, and includes the approver handle + date inside the stamp itself, like a real rubber stamp.

## Acceptance Criteria
- [ ] Diagonal stamp at -12deg
- [ ] Double border on stamp
- [ ] Stamp contains approver + date
- [ ] Underlying spec text still partially readable
- [ ] Does not block interaction beneath (pointer-events-none)

## Constraints
- Pure CSS
- Theme-aware`,
  tags: ['stamp', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};
---

<section class="w-full bg-paper text-black border-4 border-black shadow-nb-sm p-4 relative overflow-hidden">
  <div class="opacity-60">
    <p class="font-mono text-[9px] uppercase tracking-widest mb-1">SPEC-014 / v1.3.0</p>
    <p class="text-[11px] leading-snug">
      Authenticate via OAuth. Verified emails create a 24-hour session.
      Unverified emails are rejected silently. Rate-limit at 10 attempts per
      minute per identity. p99 latency must remain &le; 200ms.
    </p>
  </div>

  <div class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-12deg] pointer-events-none">
    <div
      class="border-4 border-success text-success bg-paper/40 px-4 py-2"
      style="box-shadow: inset 0 0 0 2px var(--color-success), 0 0 0 1px var(--color-paper);"
    >
      <div class="font-black text-2xl uppercase tracking-[0.18em] leading-none">APPROVED</div>
      <div class="font-mono text-[8px] uppercase tracking-widest mt-1 text-center opacity-90">@platform · 2026-05-21</div>
    </div>
  </div>
</section>