Negative AC Row

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

export const meta: CompendiumMeta = {
  id: 302,
  slug: 'negative-ac-row',
  name: 'Negative AC Row',
  category: 'specs-documents',
  subcategory: 'criteria-and-constraints',
  pillar: 'do',
  description: 'A "does NOT do X when Y" row — the negative acceptance clause that distinguishes a real spec from wishful thinking.',
  spec: `## Intent
Capture the things the system is forbidden from doing. Negative ACs are the load-bearing half of any executable spec — they bound the solution space.

## Acceptance Criteria
- [ ] Row reads "MUST NOT … WHEN …"
- [ ] Negative banner uses attention surface (warning identity)
- [ ] Carries forbidden-action identifier
- [ ] Negative: does NOT use checkmark / pass iconography (anti-pass)
- [ ] Renders without JS

## Constraints
- Token surfaces only
- Theme-aware`,
  tags: ['real-content', 'dark-mode-tested', 'responsive', 'badge'],
  status: 'stable',
  health: { ics: 93, a11y: 'aa', themed: true, animated: false },
};

const row = {
  id: 'AC-N-03',
  must_not: 'log credentials or session tokens to any sink',
  when: 'the request body contains an Authorization header',
};
---

<div data-this-component class="w-full overflow-hidden">
  <div class="border-4 border-black bg-attention text-white p-2 flex items-stretch gap-2 text-[11px] leading-snug">
    <span class="font-mono text-[9px] uppercase tracking-widest self-center shrink-0 ps-1 pe-2 border-e-2 border-paper opacity-90">{row.id}</span>
    <div class="flex-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 min-w-0">
      <span class="font-mono text-[9px] uppercase tracking-widest font-black bg-paper text-black px-1.5 py-0.5">MUST NOT</span>
      <span class="font-black uppercase min-w-0">{row.must_not}</span>
      <span class="font-mono text-[9px] uppercase tracking-widest font-black border-2 border-paper px-1.5 py-0.5">WHEN</span>
      <span class="min-w-0">{row.when}</span>
    </div>
    <span class="self-center shrink-0 inline-flex items-center justify-center w-5 h-5 border-2 border-paper font-black text-[11px]">&times;</span>
  </div>
</div>