# Reporting UI Kit

The visual vocabulary used by `/reporting` after the Knowledge Base alignment pass.

## Files
- `index.html` — entry point. Loads the kit docs page.
- `ReportPrimitives.jsx` — `PageHeader`, `RptButton`, `KbCard`, `PillTab`, `FilterChip`, `StatusBanner`, `ToolbarLabel`, `SeverityDot`, `SlaPill`, `WorkflowBadge`, `DonutSample`, `RptIcon`.
- `ReportingPage.jsx` — full-page reference assembly (`ReportingPage`).
- `KitDocs.jsx` — browseable docs (Overview · Tokens · Components · Assemblies · Reference).

## Color roles
- **Sky `#0EA5E9`** — surface accent (panel borders, tab pill active, donut highlight, table header text, neutral secondary buttons).
- **Green `#10B981`** — page identity only: title glow + the lone primary action (Sync).
- **Amber `#F59E0B`** — filter active, anomaly callout, At-Risk SLA.
- **Red `#EF4444`** — error / Critical / Overdue.

## Card chrome (one chrome, every panel)
```
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
border:     1.5px solid rgba(14,165,233,0.12)   /* 0.35 on hover */
radius:     8px
label:      mono · 11 / 600 · 0.1em · uppercase · slate-disabled
divider:    1px solid rgba(255,255,255,0.04) under the label
```

## Button hierarchy
- `primary` (green tinted-fill) — **only** Sync uses this.
- `neutral` (sky outlined transparent) — Atlas, Prev/Next, refresh.
- `subtle`  (sky tinted-fill) — Export, Queue, Columns, Rows.
- `danger`  (red tinted-fill) — destructive only.

## Page-level rules
1. `Sync` and `Atlas` live in the **page header**, not the findings panel toolbar.
2. The page title is the only place green appears as identity. Anywhere else, green = success state.
3. Every metric panel is a KB card. No more colored left-rails.
4. Filter chips tint to the dimension being filtered (severity → amber, SLA → red, action → sky).