Chart Prompts

Restyle my chart in the "On-Time Rate" 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 crisp operations service level report from a parcel carrier. Clean white, dependable and instantly scannable: green means on target, amber means watch, red means breach.

Colors (use these exact values):
- Page: #FFFFFF. Primary ink: #16202B. Secondary text: #5A6572. Hairline rules and gridlines: #DDE2E7.
- Signal green #178A4C: the data line, the target line, the "on target" zone label and panel accents.
- Warning amber #E3A21A: markers and stripe cells in the watch zone. Use the darker #A8740A for amber text so it stays legible on white.
- Breach red #D2483E: markers, stripe cells and label for the below-floor zone.
- Zone tints behind the plot: #E8F5EC (on target), #FDF4DE (watch), #FBE8E5 (below).

Typography (Google Fonts):
- Barlow for the headline (700, 29px, -0.3px letter-spacing, ink, stating the finding), the big current value in the panel (700, 46px, -1px letter-spacing) and the subtitle (400, 16px, #5A6572, measure, unit and period).
- Barlow Semi Condensed for every label: eyebrow 13px 600 uppercase with 1.6px letter-spacing, preceded by a 10px green square; axis ticks 14px 500; zone labels 13px 600 uppercase with 1px letter-spacing plus a 12.5px regular sub-line; annotations 13px 600; stripe label 11px 600 uppercase; footer 12.5px.

Layout:
- 56px side margins. Eyebrow at top left, headline below it, subtitle under the headline.
- A boxed current-rate panel in the top right, about 192 x 122px: white fill, 1.5px ink border, a 6px green bar down its left edge, an uppercase label ("WEEK 26 ON-TIME RATE"), the latest value large, then a green up triangle with the change in points (14px 600 green) and a muted line "15 of 26 weeks on target".
- The plot fills the middle; a 90px column on the right holds the zone labels, each with a 3 x 32px color bar.
- A thin status stripe directly under the plot, then period labels, then a hairline footer rule with the source on the left and a small uppercase key ("SQUARE COLOR = WEEK STATUS") on the right.

Axes and grid:
- Horizontal zones span the full plot: the band above the target tinted green, target to floor tinted amber, below the floor tinted red. Gridlines at each zone boundary in 1px #DDE2E7; the target line is 1.5px green dashed 6 on 4 off, with its tick label in 600 green.
- Y ticks on the left in percent, right-aligned 10px from the zones. No y-axis line, no vertical gridlines. Period ticks are short 5px marks under the status stripe.

Marks:
- Line chart: a 2.5px signal-green line with straight segments and round joins. Every period gets a square marker (8 x 8px, 11 x 11px for the latest) filled with its zone color and a 1.5px white outline, so the zone reads from the marker even where the line is green.
- Bar chart: square-cornered columns about 60% of the band, each filled with its zone color at full strength, over the same tinted zones and dashed target line; the latest bar outlined 1.5px in ink.
- Status stripe: one 12px tall cell per period, 2px white gaps between cells, filled solid green, amber or red by that period's zone, labeled "STATUS" on the left.

Labels and annotation:
- Call out the worst period with a 1px ink leader and a 13px 600 label ("Week 9 low: 88.6%").
- Direct zone labels on the right: "ON TARGET / 95% and up", "WATCH / 90 to 95%", "BELOW / under 90%".

Avoid: gradients, shadows, rounded corners, smoothing the line, more than three status colors, and a separate legend box (the zone labels are the legend).

When you're done, render the chart and check that every marker and stripe cell matches its zone, the headline's streak and the panel's change are arithmetically right, amber text uses #A8740A, and the panel never touches the headline.