Chart Prompts

Restyle my chart in the "Site Audit" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a field engineering audit printed from an operations tool. Practical and legible: a pale gray-blue page, one white card of rows, graphite qualitative bands and a single signal green for the actual values.

Colors (use these exact values):
- Page: #E6ECF2. Card: #FFFFFF with a soft shadow (dy 2, blur 3, #1E2A38 at 10%). Row dividers: #EEF1F4.
- Ink: #23282E. Secondary text: #6A737D.
- Qualitative bands, light to dark: #E4E6E9 (good), #C7CBD0 (fair), #A3A9B0 (poor).
- Actual values: #16A34A (signal green). Target ticks: #111418.
- Critical status only: #C2410C, used for the status dot and the delta of rows past the critical level.

Typography (Google Fonts):
- Barlow: eyebrow 600, 12px, 1.8px letter-spacing, uppercase; title 700, 27px; subtitle 400, 14.5px #6A737D; column headers 600, 11px, 1.4px letter-spacing, uppercase; row names 12.5px #6A737D; values 600, 14px; deltas 13px (700 when above target); footer 12px.
- Barlow Condensed 700, 21px for the bold row codes (for example TWR-07).

Layout:
- Header flush left at x 40: eyebrow y 44, title y 78, subtitle y 102.
- One white card (x 40 to 920, rx 8) holding a header row and one 29px row per item, sorted from worst to best.
- Row anatomy left to right: a status dot, the bold code, the name in gray, the bullet from x 250 to 800, the value, and a right-aligned delta versus target ("+11 pts", "−7 pts" using a true minus sign).
- Band names (GOOD, FAIR, POOR) are the column headers centered over their band; a small percent scale sits under the last row.
- Below the card: a key (actual bar, target tick, three dot states) at the left and an audit footer at the right: "Audit 14 Sep 2026 | Engineer R.K. | Source: ...".

Axes and grid:
- No gridlines; the qualitative bands are the grid. Scale ticks 4px, labels 11px #6A737D.

Marks:
- Bar chart: a horizontal bullet per row: three stepped bands 18px tall (0 to 60, 60 to 80, 80 to 100), the actual as a 7px green bar centered in them, and the target as a 2.5 x 22px #111418 tick. Square corners throughout.
- Line chart: keep the card and rows; each row becomes a small sparkline strip over the same three bands (drawn as horizontal zones), with a 2px green line, a 3px green end dot and the target as a 1.5px #111418 horizontal rule.
- Status dots: filled green (r 4.5) when at or under target, a hollow #23282E ring when above target, filled #C2410C when critical.

Avoid: more colors, gradients on the bars, rounded bullets, gridlines, a legend box with a border.

When you're done, render the chart and check that the rows sort worst first, the title's count of rows above target matches the dots, target ticks are visible on every band, and codes never touch the names beside them.