Policy Skin Extraction

The security policy page needs cards for whitelisted apps, datastores, and vendors that share PolicyCard's visual treatment (colored border, shadow, rounded corners, ribbon badge) but with completely different content inside. The visual wrapper was baked into PolicyCard alongside domain-specific stats and sparklines, preventing reuse.

Extract PolicyCard's visual wrapper into a standalone SecurityPolicySkin component so any card content can adopt the policy visual language.

• New SecurityPolicySkin component in the layer (components/security/PolicySkin.vue)
• Refactor SecurityPolicyCard to use PolicySkin internally (zero visual change)
• Extend SecurityPolicyRibbon to support the new white-list state
• Design site registry entry and demo page

New: SecurityPolicySkin

Wrapper component with three props:

• state — 'cool' (green) | 'hot' (red) | 'warm' (amber) | 'default' (purple) | 'white-list' (light blue #84CAFF)
• maxWidth — CSS max-width (default 350px)
• ribbon — show/hide ribbon badge (default true)

Default slot for arbitrary card content.

Updated: SecurityPolicyRibbon

Extended palette to support white-list state:

• White badge with #DFDFDF grey stroke
• #84CAFF blue checkmark
• White tail with grey stroke
• Stroke applied to both badge circle and ribbon tail SVG paths

Refactored: SecurityPolicyCard

Replaced the manual card wrapper (<div class="relative py-4 px-6 bg-white border ...">) and inline <SecurityPolicyRibbon> with <SecurityPolicySkin :state="state">. Removed borderColor computed. All external behavior unchanged.

• SecurityPolicySkin available as a standalone wrapper for any card needing the policy visual treatment
• 5 states cover all current use cases: compliance (cool/hot/warm), brand (default), and allow-list (white-list)
• PolicyCard is now a composition of PolicySkin + domain content, not a monolith