Chart Prompts

Restyle my chart in the "Volunteer Shifts" 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 warm, friendly volunteer coordinator's dashboard at night. Dark cocoa, amber highlights, rounded soft type and a roster card at left that makes the numbers feel like people. Encouraging rather than corporate.

Colors (use these exact values):
- Background: #1F1714 (dark cocoa). Roster panel: #2B211D with a 1px #3A2D27 border and 18px corner radius; dividers inside it #3A2D27.
- Accent and the achieved series: #F59E0B (amber). Target or capacity series: #F5E6CC (pale cream), dashed.
- Gap between the two series: #C2410C (rust) at 34% opacity; text about the gap #F2A07B.
- Secondary text: #B3A396. Gridlines and meter tracks: #3A2E29. Baseline: #4A3B34. Source: #8A7B70. A muted amber #C98A2E for the "before" meter.

Typography (Google Fonts):
- Nunito throughout. Title 800 29px #F5E6CC over two lines, stating the finding; subtitle 15px #B3A396; eyebrows 800 11px uppercase with 1.6px letter-spacing (amber for the organization, #B3A396 for section heads); panel heading 800 23px cream; panel stat labels 600 14px #B3A396 with values 800 24px; axis labels 600 13px #B3A396; direct labels 700 13px with values 800 13px; the gap label 700 italic 14px.

Layout:
- A roster panel from x 28 to x 286, y 28 to y 572 on the left: organization eyebrow, "Volunteer roster" heading and a season line; three stat rows (posted, filled, left unfilled) each with a tiny key that matches its mark (dashed cream line, solid amber line, rust square); a "FILL RATE" section with two labeled 8px rounded meters (before and after); and a "MOST SHIFTS" list of four people with 11px initial circles (the top person in amber with cocoa initials).
- Chart area to the right starting at x 322: title lines at y 68 and y 104, subtitle at y 134, plot from x 356 to x 862, y 196 to a baseline at y 508, direct labels in the 60px to the right of the plot, source at y 572.

Axes and grid:
- Horizontal 1px #3A2E29 gridlines at three round values, y labels right-aligned 12px left of the plot, a 1px #4A3B34 baseline. Five x labels; the called-out period's label in 800 amber.

Marks:
- Line chart: the achieved series as a 3.2px amber line with round joins; the target series as a 2px cream line dashed 7 on 5 off. Shade the area between them in translucent rust and label it "Unfilled" inside the widest part of the gap. Open dots (r 5, background fill, 2.5px stroke) only on the last point and on the first point after the event.
- Bar chart: paired rounded bars per period (4px radius on top), the target as a 2px dashed cream outline bar with no fill and the achieved value as a solid amber bar inside it, so the empty top of each outline reads as the gap; tint the empty part rust at 34%.
- Event callout: a 128 x 26 amber pill with cocoa 800 13px text ("Recruiting drive") above the plot, over a column spanning the event period and the next one, filled amber at 9% opacity with 8px rounded corners. Add one amber 700 13px note stating the change right after the event.

Avoid: cold grays or blues, sharp corners on panels, thin light type, gradients, more than one callout, and a legend separate from the panel keys and direct labels.

When you're done, render the chart and check that the gap shading sits exactly between the two lines, the direct labels at the right do not collide, the roster stats sum correctly (filled plus unfilled equals posted), and the percentages in the title match the panel meters.