Chart Prompts

Restyle my chart in the "Access Indicators" 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 development indicators brief from a statistics office. Clean white page, a colored sidebar tab carrying the indicator code, and a chart that answers one question: is each series on track for its goal?

Colors (use these exact values):
- Page: #FFFFFF. Sidebar edge strip and tab: #0F766E (teal), tab text #FFFFFF, tab small text #CCFBF1, tab divider #5EEAD4.
- Series, in order: #0F766E (teal), #D97706 (amber), #7C3AED (violet). A single series uses teal.
- Title ink #1F2933, secondary text #5F6B76, gridlines #E4E8EC, baseline and ticks #9AA5B1.
- Projection zone fill: #F3F5F7.

Typography (Google Fonts):
- Poppins 600 for the title (27px, #1F2933, sentence case, stating the finding), the tab code (24px white) and series names in the label column (14px, series color).
- Open Sans for everything else: eyebrow 11px 600 uppercase with 1.6px letter-spacing in teal ("PLACE | BRIEF NAME 2026"); subtitle 14px #5F6B76 with measure, unit, period and projection method; axis labels 12px; label-column detail 11.5px; status pills 9px 700 with 0.8px letter-spacing; key and source 11.5px.

Layout:
- An 8px teal strip down the full left edge. On top of it, a tab 90px wide from y 36 to 160 with 10px rounded right corners, holding "INDICATOR" (9px, 1.6px letter-spacing), the code (e.g. "HA-3"), a thin divider and two small lines of metadata.
- Header starts at x 122: eyebrow, title, subtitle. Plot from x 142 to 772, y 170 to 500. A right label column from x 796 to the edge.
- A bottom row at y 560: key for Observed (solid), Trend (dashed) and Goal (dot with halo) on the left, "Source: ..." right-aligned.

Axes and grid:
- Horizontal gridlines at every 25% in 1px #E4E8EC, the zero line 1.2px #9AA5B1, y labels right-aligned 10px left of the plot, the top one with a % sign.
- X axis ticks every five years, 5px long; the goal year label in 600 ink.
- The projection period (last observation to goal year) is a #F3F5F7 band with "PROJECTION" in 9.5px 600 uppercase centered above it.

Marks:
- Line chart: observed lines 2.75px with round joins, straight segments. From the last observation a 2px dashed line (7 on, 5 off) carries the average pace of the last ten years to the goal year, ending in a small hollow circle (r 3, 1.5px stroke). The last observation is a solid r 4 dot with a 1.5px white ring. Each goal is a solid r 5 dot at the goal year with a 1px halo ring at r 9 (45% opacity).
- Bar chart: bars in the series colors with 3px top corners, the latest observed period solid, projected periods as outlined bars (1.5px stroke, white fill) inside the projection band, and the goal as a short 2px horizontal tick with a halo dot at its end.

Labels and annotation:
- Right label column, one block per series, de-collided at least 60px apart and joined to its goal dot by a 1px elbow leader in the series color: series name, "81% now, 92% by 2030" in 11.5px ink, then a 16px-high pill: "ON TRACK" filled in the series color with white text, or "OFF TRACK" as a white pill outlined in the series color, followed by "goal 100%" in 11px gray.
- On track means the projected value reaches the goal. Compute it; the title must match.

Avoid: a boxed legend, gradients, shadows, a y-axis line, more than one teal element outside the data, and letting the projection look like observed data.

When you're done, render the chart and check that the projections are arithmetically right, the on-track pills agree with the title, the right label blocks don't collide, and the tab text is centered in the tab.