Role Authority Card

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

export const meta: CompendiumMeta = {
  id: 25,
  slug: 'role-authority-card',
  name: 'Role Authority Card',
  category: 'pillars-roles',
  subcategory: 'role-identity',
  pillar: 'go',
  description: 'A grant-of-authority document: the explicit powers the Governor may sign off on — kill-switch, autonomy ceiling, scope limits.',
  spec: `## Intent
Render the explicit authorities granted to one role (the Governor) — a checklist of sign-off powers. Frames the role as a delegated municipal office.

## Acceptance Criteria
- [ ] Names the role and the granting authority
- [ ] Lists 4+ specific powers with checkbox marks
- [ ] Includes signature line and counter-seal
- [ ] Does not grant un-listed authorities by default

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

const authorities = [
  { p: 'Kill-Switch',       note: 'Halt any agent, immediately',   on: true  },
  { p: 'Autonomy Ceiling',  note: 'Cap unattended action class',   on: true  },
  { p: 'Scope Limit',       note: 'Bound a spec\'s blast radius',  on: true  },
  { p: 'Audit Disclosure',  note: 'Release governance trail',      on: true  },
  { p: 'Charter Amendment', note: 'Revise the pillar mandate',     on: false },
];
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm overflow-hidden">
  <div class="bg-go border-b-4 border-black px-3 py-2 flex items-center justify-between gap-2">
    <div class="min-w-0">
      <div class="font-mono text-[9px] uppercase tracking-[0.3em] font-black truncate">Grant of Authority</div>
      <div class="font-mono text-[9px] uppercase tracking-widest opacity-80 truncate">Form GO-25 · Schedule A</div>
    </div>
    <div class="w-9 h-9 border-2 border-black bg-paper flex items-center justify-center font-black shrink-0">GO</div>
  </div>

  <div class="px-3 py-2 border-b-2 border-black border-dashed flex items-baseline justify-between gap-2">
    <div class="min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60">Granted to</div>
      <div class="font-black uppercase leading-tight truncate">The Governor</div>
    </div>
    <div class="text-end min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60">Granted by</div>
      <div class="font-mono text-[10px] uppercase tracking-widest truncate">Charter Office</div>
    </div>
  </div>

  <ul class="px-3 py-2 space-y-1.5">
    {authorities.map((a) => (
      <li class="flex items-start gap-2 text-[11px] leading-snug">
        <span class:list={['inline-block w-3.5 h-3.5 border-2 border-black flex-none mt-0.5 flex items-center justify-center font-black text-[9px]', a.on ? 'bg-go' : 'bg-paper']}>{a.on ? '✓' : ''}</span>
        <span class="min-w-0 flex-1">
          <span class="font-black uppercase">{a.p}</span>
          <span class="opacity-70"> · {a.note}</span>
        </span>
      </li>
    ))}
  </ul>

  <div class="border-t-2 border-black px-3 py-2 grid grid-cols-2 gap-3">
    <div class="min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60 mb-0.5">Holder Signature</div>
      <div class="h-5 border-b-2 border-black italic font-serif text-sm leading-tight truncate">M. Okafor</div>
    </div>
    <div class="min-w-0">
      <div class="font-mono text-[8px] uppercase tracking-widest opacity-60 mb-0.5">Counter-Seal</div>
      <div class="h-5 flex items-center justify-end">
        <div class="rotate-[-6deg] text-go font-black text-[9px] tracking-[0.2em] border-2 border-go px-1.5 py-0.5">REGISTERED</div>
      </div>
    </div>
  </div>
</article>