Blocked State Stamp

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

export const meta: CompendiumMeta = {
  id: 503,
  slug: 'blocked-state-stamp',
  name: 'Blocked State Stamp',
  category: 'maturity-process',
  subcategory: 'flow',
  pillar: 'go',
  description: 'Stamp marking a unit of work as blocked — flow halted on a missing signal or external dependency.',
  spec: `## Intent
Blocked is the complement of flow: a card that cannot advance because its trigger signal is unmet. Surfacing it loudly is half the cure.

## Acceptance Criteria
- [ ] Diagonal stamp at -10deg over context
- [ ] Stamp text reads "BLOCKED"
- [ ] Danger-token accent
- [ ] Negative: does NOT obscure the blocker reason text

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

<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">CARD-091 / waiting</p>
    <p class="text-[11px] leading-snug">
      Awaiting threat-review.signed from governance. Upstream queue
      depth 2. No work in progress on this card since the signal arms.
    </p>
  </div>
  <div class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-10deg] pointer-events-none">
    <div
      class="border-4 border-danger text-danger bg-paper/40 px-4 py-2"
      style="box-shadow: inset 0 0 0 2px var(--color-danger), 0 0 0 1px var(--color-paper);"
    >
      <div class="font-black text-[20px] uppercase tracking-[0.16em] leading-none">BLOCKED</div>
      <div class="font-mono text-[8px] uppercase tracking-widest mt-1 text-center opacity-90">signal unmet</div>
    </div>
  </div>
</section>