Chart Prompts

Restyle my chart in the "Attendance Trend" 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 school district data dashboard, the kind a principal opens every morning. Bright, tidy and trustworthy: white canvas, a quiet left nav with filters, three stat tiles and one clean chart with a single warning color.

Colors (use these exact values):
- Canvas: #FFFFFF. Left nav column: #F7F8FA with a 1px #E5E7EB right border.
- Primary data color and active states: #15803D (kelly green).
- Threshold and warning: #D97706 (amber). Used for the threshold line, its axis label, the key warning stat and data points past the threshold, nothing else.
- Ink: #111827 for titles and values. Secondary text: #6B7280; body labels #374151; footnotes #9CA3AF.
- Tile and card borders: #E5E7EB. Inactive pill borders and the baseline: #D1D5DB. Gridlines: #F0F1F3.
- Shaded periods (breaks, closures, holidays): #EEF0F3 columns with #8B929C labels.

Typography (Google Fonts):
- Lexend throughout. Title 20px 600, -0.3px letter-spacing, sentence case stating the finding. Subtitle 12.5px 400 #6B7280 with measure, unit, population and period.
- Small caps-style section labels (nav headings, tile labels): 10px 500 uppercase with 1.2 to 1.4px letter-spacing, #6B7280.
- Stat tile values 24px 600, -0.5px letter-spacing. Nav items 13px (active 600 #111827, inactive 400 #6B7280). Filter pills 12px. Axis labels 11px. Legend 11.5px. Source 10.5px #9CA3AF.

Layout:
- A 196px left nav column: a 30px rounded (8px radius) green logo tile with the district name in 14px 600 and a 10px descriptor under it; a DASHBOARD section with 4 items, the active one on a white 164 x 28 card (6px radius, #E5E7EB stroke) with a 3 x 16px green accent bar at its left edge; a GRADE LEVEL filter group of 156 x 28 fully rounded pills, the active pill filled #15803D with white 600 text and a white check mark, inactive pills white with #D1D5DB stroke; a SCHOOL YEAR select box with a chevron.
- Main area from x 232 to 928: title at y 50, subtitle at y 74, then a row of three equal stat tiles (66px tall, 8px radius, 12px gaps, white with #E5E7EB stroke): uppercase label at top left, big value at bottom left, a short note right-aligned on the value's baseline. The warning tile's value is amber.
- Legend row at y 192 above the plot, then the plot from y 214 to 520. Footer at y 576 with the source on the left and "Updated nightly" on the right.

Axes and grid:
- Y axis labels on the left, right-aligned 10px from the plot, with % units; the threshold value's label is amber and 600.
- Horizontal gridlines 1px #F0F1F3; the baseline 1px #D1D5DB. No vertical gridlines, no y axis line.
- X axis: 5px #9CA3AF tick marks at month boundaries, 3-letter month names centered in each month.

Marks:
- Line chart: a thin 1.3px #15803D line with small solid green dots (r 1.7) at every observation. Break the line across shaded periods rather than bridging them. Points past the threshold become r 2.6 amber dots with a 1px white ring.
- Threshold: a 1.6px #D97706 dashed line (6 on, 4 off) across the full plot.
- Shaded periods: full-height #EEF0F3 columns behind the data, labeled with uppercase 10.5px 500 #8B929C text rotated to read bottom to top, starting 10px above the baseline, with a 4px #EEF0F3 halo (paint-order stroke) so the threshold line passes behind the label.
- Bar chart: slender square-topped #15803D bars (about 55% of the band) on the same white plot, bars past the threshold filled amber, the same amber dashed threshold line and the same gray shaded columns for closure periods; value labels only on the extreme bars.

Labels and annotation:
- The extreme point gets a short 1px #9CA3AF vertical leader and a two-line centered label: "Low 89.2%" in 11.5px 600 ink and the date in 11px #6B7280 below.
- Legend: a 22px green line with a dot for the series, a 22px amber dashed line for the threshold, and a 12px #EEF0F3 rounded square for shaded periods, each followed by 11.5px #374151 text.

Avoid: gradients, shadows, smoothing the daily line, more than one warning color, thick lines, chart borders, and dark mode.

When you're done, render the chart and check that the stat tiles match the data exactly (average, lowest day, count of points past the threshold), the rotated period labels do not collide with the extreme-point label, and the line breaks cleanly at each shaded period.