Spec Grilling Round Row

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

export const meta: CompendiumMeta = {
  id: 464,
  slug: 'spec-grilling-round-row',
  name: 'Spec Grilling Round Row',
  category: 'maturity-process',
  subcategory: 'reviews-and-logs',
  pillar: 'go',
  description: 'A single round of spec grilling — round number, challenge, outcome, transcript counter.',
  spec: `## Intent
Spec grilling is DoCoDeGo's adversarial review ritual. Each round is logged as a row: the challenge, the verdict, the count of follow-up specs spawned.

## Acceptance Criteria
- [ ] Round counter is prominent on the left
- [ ] Challenge text truncates without wrapping
- [ ] Outcome verdict tinted via tokens
- [ ] Negative: does NOT identify the challenger by personal name

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

const round = {
  n: 3,
  challenge: 'AC #4 conflates rate-limit with quota. Split or collapse?',
  outcome: 'REVISE' as const,
  spawned: 1,
};
const outcomeToken =
  round.outcome === 'REVISE' ? { bg: 'attention', ink: 'text-white' } :
  round.outcome === 'PASS'   ? { bg: 'success',   ink: 'text-black' } :
                               { bg: 'danger',    ink: 'text-white' };
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black px-3 py-2 overflow-hidden">
  <div class="flex items-baseline gap-2 min-w-0">
    <span class="font-black text-[14px] tabular-nums shrink-0 px-1.5 border-2 border-black bg-paper">R{round.n}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60 truncate min-w-0 flex-1">spec grilling</span>
    <span class={`font-black text-[10px] uppercase tracking-widest px-1.5 py-0.5 border-2 border-black bg-${outcomeToken.bg} ${outcomeToken.ink} shrink-0`}>{round.outcome}</span>
  </div>
  <p class="mt-1 font-mono text-[11px] leading-snug truncate">{round.challenge}</p>
  <div class="mt-1 flex items-baseline justify-between font-mono text-[9px] uppercase tracking-widest opacity-70">
    <span>@gatekeeper</span>
    <span class="tabular-nums">spawned: {round.spawned}</span>
  </div>
</article>