Chart Prompts

Restyle my chart in the "Screening Rates" 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 clear public-sector performance table from a county health department. Crisp white page, disciplined teal bars, a black target tick on every row, a region column that groups the rows and a quiet red gap column that says who needs help.

Colors (use these exact values):
- Page: #FFFFFF.
- Bars at or above target: #1C7C8C (public-sector teal); bars below target: #A9CFD5 (pale teal). The top rule and region labels are also #1C7C8C.
- Target tick, headline and header rule: #111111.
- Gap values for rows below target: #B5483F (muted red).
- Region column shading: #EEF3F4. Row rules and gridlines: #DCE3E5. Secondary text: #5F6B70.

Typography (Google Fonts): Noto Sans throughout.
- Headline 28px 700 #111111, stating how many rows miss the target. Subtitle 14.5px #5F6B70 with measure, unit, population and period.
- Column headers 10.5px 700 uppercase, 1.2px letter-spacing, #5F6B70 ("REGION", "DISTRICT", "SCREENED", "GAP TO TARGET"), with "TARGET 70%" in #111111 centered over the target tick.
- Row labels 13.5px right-aligned, 600 when the row misses target and 400 otherwise. Values inside bars 11.5px 600. Gap values 13px 600. "Met" 12px #5F6B70.

Layout:
- 48px margins. A 4px teal rule across the top at y 36, headline at y 84, subtitle at y 112, column headers at y 144 above a 1.2px black rule.
- Four columns: an 86px region column (shaded block per group with a 3px teal left edge, the region name in 12px 700 teal with 1.5px letter-spacing and the group average under it), row labels right-aligned to x 304, bars from x 318 to 770 on a 0 to 100% scale, and the gap column right-aligned to x 912.
- Rows 28px tall with 16px bars and a 0.8px #DCE3E5 rule under each. 14px gap between groups.
- A key (two swatches) at the bottom left and the source at the bottom right.

Axes and grid:
- Vertical 1px #DCE3E5 gridlines at 0, 25, 50, 75, 100% behind the bars, labeled below the last row in 11.5px #5F6B70. No y axis line.

Marks:
- Bar chart: flat square-cornered horizontal bars from zero, dark teal if at or above target, pale teal if below. The value sits inside the bar's start, 8px in (white on dark teal, #111111 on pale teal). The target is a 2.5px wide #111111 tick 8px taller than the bar, crossing every row at the target value. Gap column: "−6.6 pts" in muted red for misses, "Met" in gray otherwise.
- Line chart: one 2.5px teal line per group (dark teal and pale teal for two groups, directly labeled at their ends), with a horizontal 2px black target line labeled "TARGET 70%" and red gap labels at the final point of any series below it.

Avoid: gradients, rounded bars, sorting that breaks the region groups, truncated axes, bright reds, value labels at the bar end (they collide with the target tick).

When you're done, render the chart and check the headline count, that every gap equals target minus value, that no value label touches the target tick, and that each region block exactly spans its rows.