// 15-column, works out of the box
```
---
## Feature 6 — `not-*` Variant
Style elements only when they don't match a condition. Useful in the session runner step list.
```tsx
// Bottom border on all steps except the last
// Dim inactive steps
```
---
## Feature 7 — Theme Tokens as Native CSS Variables
After the v4 migration, all `@theme` tokens are exposed as native CSS custom properties. This means you can access ResolutionFlow design tokens in TypeScript — useful for React Flow node styling and Recharts chart colors.
```ts
// Access brand colors in JS/TS — no more hardcoded hex values
const style = getComputedStyle(document.documentElement)
const brandColor = style.getPropertyValue('--color-brand-from').trim() // '#06b6d4'
// Use directly in React Flow node styles
const nodeStyles = {
background: 'var(--color-dark-card)',
border: '1px solid var(--color-brand-from)',
boxShadow: '0 0 12px rgba(6, 182, 212, 0.15)',
}
// Use in Recharts chartConfig — no more hsl() wrapper needed
const chartConfig = {
sessions: {
label: 'Sessions',
color: 'var(--color-brand-from)',
},
resolved: {
label: 'Resolved',
color: 'var(--color-brand-to)',
},
}
```
---
## Feature 8 — Color Scheme Utilities
Control native browser UI element theming (scrollbars, form controls) to match the dark theme — previously required custom CSS.
```tsx
// Apply to the root html element in index.html or App.tsx
// This makes native browser scrollbars, select dropdowns,
// date inputs, and form controls render in dark mode automatically.
// ResolutionFlow is dark-only so this should be applied globally.
```
---
## Feature 9 — `inert` Utility
Disable interaction on an entire subtree without JavaScript. Useful for locking the flow editor or step list during FlowPilot AI generation.
```tsx
// Disable the step list while FlowPilot is generating
// The inert attribute disables all pointer events, focus, and
// accessibility interaction on the entire subtree at once.
```
---
## General Rules for v4 Going Forward
1. **Use `field-sizing-content` on every `