Hat Badge · Flow Steward

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

export const meta: CompendiumMeta = {
  id: 403,
  slug: 'hat-badge-flow-steward',
  name: 'Hat Badge · Flow Steward',
  category: 'pillars-roles',
  subcategory: 'role-identity',
  pillar: 'de',
  description: 'Civic hat-badge for the Flow Steward — the DE-pillar role that keeps delivery converging without batching up.',
  spec: `## Intent
Identify the wearer of the Flow Steward hat — the role that owns continuous convergence, small batches, and the cadence of merges.

## Acceptance Criteria
- [ ] Names hat and pillar (DE)
- [ ] Shows one-line responsibility
- [ ] Carries a small "WORN BY" handle slot
- [ ] Negative: does NOT show velocity numbers

## Constraints
- Theme-aware via tokens
- No hex literals in brand-colour slots`,
  tags: ['badge', 'stamp', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const hat = {
  short: 'FS',
  name: 'Flow Steward',
  pillar: 'DE',
  duty: 'Owns cadence. Small batches, continuous merge.',
  worn: '@steward',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm overflow-hidden">
  <div class="bg-de border-b-4 border-black px-3 py-1.5 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] font-black truncate">Hat · DE</div>
    <div class="font-mono text-[9px] uppercase tracking-[0.3em] shrink-0">№ III</div>
  </div>

  <div class="grid grid-cols-[auto_1fr] gap-3 p-3">
    <div class="w-14 h-14 border-4 border-black bg-de relative shrink-0">
      <div class="absolute inset-x-[-6px] top-[-4px] h-2 border-4 border-black bg-de"></div>
      <div class="absolute inset-0 flex items-center justify-center font-black text-lg">{hat.short}</div>
    </div>
    <div class="min-w-0">
      <div class="font-mono text-[9px] uppercase tracking-[0.25em] opacity-60">Hat</div>
      <div class="font-black uppercase text-base leading-tight truncate">{hat.name}</div>
      <div class="font-mono text-[10px] opacity-70 truncate">{hat.pillar} · Pacemaker</div>
    </div>
  </div>

  <p class="px-3 pb-2 text-[11px] leading-snug font-medium border-b-2 border-black border-dashed">{hat.duty}</p>

  <div class="px-3 py-1.5 flex items-center justify-between gap-2">
    <div class="font-mono text-[9px] uppercase tracking-widest opacity-60 truncate">Worn by</div>
    <div class="font-mono text-[10px] uppercase tracking-widest font-black truncate">{hat.worn}</div>
  </div>
</article>