Sign-Off Pending Stamp

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

export const meta: CompendiumMeta = {
  id: 582,
  slug: 'signoff-pending-stamp',
  name: 'Sign-Off Pending Stamp',
  category: 'governance-risk',
  subcategory: 'signoff',
  pillar: 'go',
  description: 'Stamp marking that sign-off has been requested and is awaiting the governor — the in-flight state.',
  spec: `## Intent
Distinguish "needs sign-off" from "sign-off in flight". Once the request is on a governor's desk, the artefact is no longer the author's problem; it's the gatekeeper's.

## Acceptance Criteria
- [ ] Rotated stamp at -6deg
- [ ] Carries requester handle and request time
- [ ] Uses attention token (yellow band)
- [ ] Negative: does NOT show a Cleared mark

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

const req = { spec: 'SPEC-204', requestedBy: '@author', at: '2026-05-20 14:02Z', sla: '24h' };
---

<section data-this-component class="w-full bg-paper text-black border-4 border-black p-4 relative overflow-hidden">
  <div class="opacity-60">
    <p class="font-mono text-[9px] uppercase tracking-widest mb-1">{req.spec} · sign-off request</p>
    <p class="text-[11px] leading-snug">
      Requested by {req.requestedBy} at {req.at}. Routed to
      @governor. SLA window: {req.sla}.
    </p>
  </div>
  <div class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-6deg] pointer-events-none">
    <div
      class="border-4 border-attention text-attention bg-paper/40 px-3 py-2"
      style="box-shadow: inset 0 0 0 2px var(--color-attention), 0 0 0 1px var(--color-paper);"
    >
      <div class="font-black text-[16px] uppercase tracking-[0.14em] leading-none">Sign-Off Pending</div>
      <div class="font-mono text-[8px] uppercase tracking-widest mt-1 text-center opacity-90">@governor · sla {req.sla}</div>
    </div>
  </div>
</section>