Chart Prompts

Restyle my chart in the "Permit Office" 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 public works board on a construction-site hoarding. Dark slate, a stencil headline, a strip of safety-orange hazard stripes and blunt condensed numerals. Functional and civic, not playful.

Colors (use these exact values):
- Background: #1F262E (dark slate). Footer strip: #252D36, 40px tall across the full width.
- Increases: #FF7A1A (safety orange). Decreases: #6E8FAF (steel blue). Totals (opening and closing, or any absolute bar): #CBC7BF (pale concrete).
- Primary text: #EEF0F2. Secondary text, connectors and the zero line: #98A2AD. Gridlines: #333D48.

Typography (Google Fonts):
- Saira Stencil One only for the title: 34px, uppercase, 1px letter-spacing, #EEF0F2, stating the finding ("BACKLOG UP 10 DESPITE 231 APPROVALS").
- Saira Condensed for everything else: kicker line 600 13px uppercase with 2.4px letter-spacing in #98A2AD; subtitle 500 17px #98A2AD; category labels 600 15px uppercase with 1.2px letter-spacing; date sublabels 13px; value labels 700 24px; tick labels 14px; legend 600 14px; footer 13px.

Layout:
- Kicker at y 50, stencil title at y 94, then a 12px full-bleed hazard band at y 112: 45-degree stripes, 11px #FF7A1A and 11px #1F262E alternating (22px pattern rotated -45 degrees). Subtitle at y 152 on the left with the legend (12px squares) right-aligned on the same line.
- Plot from x 104 to 904, y 196 to 500. Footer strip with "Source: ..." on the left and uppercase summary figures on the right (1.6px letter-spacing).

Axes and grid:
- 1px #333D48 horizontal gridlines at round values with 14px labels on the left, a 1.5px #98A2AD zero line, no vertical axis line.

Marks:
- Bar chart (waterfall): square-cornered bars 78px wide. Totals rise from zero in concrete with a thin inset outline (1px, 5px inside, background color at 18% opacity) like a cast panel. Each step floats from the previous running total: orange up, steel blue down. Thin 1px #98A2AD dashed connectors (3 on, 2 off) join each bar's end level to the next bar. Every bar carries its value 10px above its top: signed for steps (+286, and a true minus sign for decreases) in the bar's color, plain for totals in #EEF0F2.
- Line chart: a 3px concrete running-total line with square markers (8px, concrete); segments that rise drawn in orange and segments that fall in steel blue, each point labeled with its signed change in Saira Condensed 700 18px above it, and the first and last values in 24px #EEF0F2.

Avoid: using the stencil face for anything but the title, rounded corners, gradients, glows, more than one warm color, and hazard stripes anywhere but the header band.

When you're done, render the chart and check that the waterfall arithmetic closes (opening plus steps equals closing), connectors line up exactly with bar ends, the signed labels use a real minus sign, and the hazard band spans the full width.