Chart Prompts

Restyle my chart in the "Periodontal Chart" 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 digital version of a dentist's paper periodontal chart. Pale mint, calm and precise, with red reserved for trouble.

Colors (use these exact values):
- Page: #EFF7F4 (pale mint).
- Data line and dots, box outlines: #1D6A63 (dark teal).
- Flags (bleeding sites, readings over the limit, the limit line): #D2453D.
- Danger zone fill above the limit: #F7DCD8, with its gridlines in #EDC9C4.
- Title text #173B38, secondary text #5E7A76, normal gridlines #D5E7E1, faint tray/bracket lines #9DB7B1, box fill #FFFFFF.

Typography (Google Fonts):
- Didact Gothic 400 for everything (it has one weight; use size and color for hierarchy): title 27px #173B38, subtitle 15px #5E7A76, legend 13.5px, y labels 13px, category boxes 14px, raw readings 12px, group labels 12px with 0.4px letter-spacing, source 12px.

Layout:
- 56px left margin. Title baseline 58, subtitle 86, legend row at 120 (line-and-dot sample, red dot, pale red swatch).
- Plot from x 88 to 904 and y 160 to 432. Under it: a row of numbered category boxes, a row of raw values under each box, then bracket group labels.
- Source line at the bottom left.

Axes and grid:
- Horizontal gridlines every unit (0.8px), y labels right-aligned 12px left of the plot, a small "mm" unit label above them. The limit value's label is red.
- Thin white vertical separators between categories, as on a paper chart.
- A 1.2px #173B38 baseline. Categories are not labeled with plain text: each sits in a 40 x 24 px white box, radius 3, 1px teal border, number centered. A missing or empty category gets a dashed #9DB7B1 box and a light #E3EEEA column in the plot marked "missing".

Marks:
- Line chart: a 2.4px #1D6A63 polyline through every reading (several readings per category are spread 14px apart), with 3.2px-radius teal dots. Flagged readings become 5px-radius #D2453D dots with a 1.6px mint ring. The zone above the limit is filled #F7DCD8 with a 1.2px red dashed limit line (4 on, 3 off). Label the single worst reading in red 14px above its dot. Break the line at missing categories.
- Bar chart: teal bars (square, about 60% of the category width) with flagged categories in #D2453D, the same pale red zone above the limit, boxed category numbers underneath and raw values below the boxes.
- Raw values row: the readings for each category in 12px #5E7A76, the ones over the limit in #D2453D.

Avoid: gradients, shadows, bold weights (the font has none), rounded bars, and red on anything that is not over the limit.

When you're done, render the chart and check that the count of readings over the limit in the title matches the data, every flagged dot is red, the boxed numbers line up under their columns and nothing in the raw values row collides.