Spec Card

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

export const meta: CompendiumMeta = {
  id: 1,
  slug: 'spec-card',
  name: 'Spec Card',
  category: 'specs-documents',
  pillar: 'do',
  description: 'A single approved specification with ICS score, version pin and acceptance criteria — the framework\'s atomic unit of work.',
  spec: `## Intent
Display one DoCoDeGo specification as its own card — id, version, owner, ICS score, intent statement, and acceptance criteria. The card is the fundamental document type that AI agents consume; the visualisation should communicate "this is the truth, signed."

## Acceptance Criteria
- [ ] Shows SPEC-NNN id, version (semver), owner handle
- [ ] Renders an ICS score badge (0–100) with threshold colour
- [ ] Lists 3+ acceptance criteria with checkbox state
- [ ] Communicates "approved" via a stamp visual
- [ ] Does not require runtime state — pure render

## Constraints
- Reads on light + dark themes
- Mono font for identifiers, sans for prose
- ≤ 150 lines body`,
  tags: ['card', 'stamp', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const ics = 78;
const icsClass = ics >= 80 ? 'bg-success' : ics >= 60 ? 'bg-do' : 'bg-attention';
---

<article class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative">
  <header class="flex items-baseline justify-between gap-2 px-3 pt-3 pb-2 border-b-2 border-black">
    <div class="flex items-baseline gap-2 min-w-0">
      <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">SPEC-014</span>
      <span class="font-mono text-[10px] uppercase tracking-widest opacity-40">v1.3.0</span>
    </div>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60 truncate">@author</span>
  </header>

  <div class="px-3 py-3">
    <h4 class="text-sm font-black uppercase tracking-tight leading-tight mb-2">Authenticate via OAuth</h4>
    <p class="text-[11px] leading-snug opacity-80">Issue a session for verified Google identities. Reject everything else without disclosing why.</p>
  </div>

  <ul class="px-3 py-2 border-t-2 border-black space-y-1 text-[11px] leading-snug">
    <li class="flex items-baseline gap-1.5"><span class="inline-block w-2.5 h-2.5 border-2 border-black bg-success"></span> Verified emails create a session</li>
    <li class="flex items-baseline gap-1.5"><span class="inline-block w-2.5 h-2.5 border-2 border-black bg-success"></span> Unverified emails are rejected silently</li>
    <li class="flex items-baseline gap-1.5"><span class="inline-block w-2.5 h-2.5 border-2 border-black bg-paper"></span> Sessions expire after 24 hours</li>
  </ul>

  <footer class="flex items-stretch border-t-2 border-black">
    <div class:list={['flex-1 px-3 py-2 flex items-center justify-between', icsClass, 'text-black']}>
      <span class="font-mono text-[10px] uppercase tracking-widest">ICS</span>
      <span class="text-lg font-black tabular-nums">{ics}</span>
    </div>
    <div class="px-3 py-2 bg-ink text-paper flex items-center font-mono text-[10px] uppercase tracking-widest">approved</div>
  </footer>

  <div class="pointer-events-none absolute top-1 end-1 rotate-[-12deg] text-success font-black text-[10px] tracking-[0.2em] opacity-40 border-2 border-success px-1.5 py-0.5">SEALED</div>
</article>