# Compliance UI Kit

Visual vocabulary for the AEO Compliance view (`CompliancePage.js`).

## Files
- `index.html` — entry point.
- `CompPrimitives.jsx` — `CompPageHeader`, `CompButton`, `TeamTabs`, `MetricHealthCard`, `VariantPill`, `StatusRibbon`, `MetricBadge`, `SeenBadge`, `DeviceTable`/`DeviceRow`, `ChartCard`, `DefinitionTooltip`, `RollbackDialog`, `RollbackToast`, `CompIcon`.
- `CompliancePage.jsx` — full-page assembly.
- `KitDocs.jsx` — Overview · Tokens · Components · Assemblies · Reference.

## Identity
| Surface              | Color  | Hex       |
|----------------------|--------|-----------|
| Page title + glow    | teal   | `#14B8A6` |
| Active team tab      | teal   | `#14B8A6` |
| Upload Report CTA    | teal   | `#14B8A6` |
| Selected device row  | teal   | `#14B8A6` |

## Status colors (target adherence)
| Status                  | Color  | Hex       |
|-------------------------|--------|-----------|
| Meets/Exceeds Target    | green  | `#10B981` |
| Within 15% of Target    | amber  | `#F59E0B` |
| Below 15% of Target     | red    | `#EF4444` |

## Category colors (badge tinting)
red · Vulnerability Management — amber · Access & MFA — purple · Logging & Monitoring — orange · End-of-Life OS / Endpoint Protection — sky · Application Security — slate · Asset Data Quality / Decommissioned

## Layout
Page header → team tabs → metric health row → 3×2 chart grid → device table.

## Page-level rules
1. Status colors are reserved for target adherence; never decorative.
2. A family's `worstStatus` (lowest-severity variant) drives card border + ribbon — one bad variant turns the whole family red.
3. Clicking a metric card filters the device table to its IDs; an "× clear filter" button is the only escape hatch shown inline in the section label.
4. SeenBadge escalates slate (1×) → amber (2–3×) → red (4×+).