Chart Prompts

Restyle my chart in the "Sail Hours" 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: an end-of-season sail loft report on dark slate. Elegant serif headline, quiet grouped rows, and a service-life tick on every bar so wear reads at a glance, with a small yellow tag on anything due for attention.

Colors (use these exact values):
- Background: #1A2229 (loft slate).
- Category colors: #F1F4F6 (mainsail white), #86C3E0 (headsail blue), #F28482 (spinnaker coral). Group captions and their 8px square keys use the same colors.
- Flag / warning tag and flagged percentages: #F6C667 (recut yellow).
- Primary text and limit ticks: #E9EEF1. Secondary text: #8A99A6. Capacity tracks behind bars: #232E37. Grid and rules: #33414C.

Typography (Google Fonts):
- Marcellus 400 for the title (32px, #E9EEF1, sentence case stating the finding with the count computed from the data).
- Overpass for everything else, with tabular figures: eyebrow 700 11.5px uppercase with 2.6px letter-spacing in #8A99A6; subtitle 15px #8A99A6; group captions 700 11px uppercase with 2px letter-spacing; row names 400 14.5px; in-bar values 800 12.5px in #1A2229; axis labels 12px; right-hand percent column 14px (800 in yellow when flagged); tag text 800 10px uppercase with 1.2px letter-spacing.

Layout:
- Eyebrow y 50, title y 92, subtitle y 120, 56px margins.
- Axis labels along the top at y 152; rows start just below.
- Rows grouped by category: an 18px group caption row, then 17px bars on a 27px pitch, 8px extra space between groups. Row names at x 72, bars from x 232 to 790 (scale 0 to the largest limit), a percent column right-aligned at x 904 captioned "% OF LIFE".
- A footer rule at y 552 with the source at left and a small key (limit tick sample, tag sample) at right.

Axes and grid:
- No bottom axis; values at the top. Faint vertical gridlines 0.8px #33414C dashed (2 on, 4 off) behind the rows and a 1px #8A99A6 zero line.

Marks:
- Bar chart: horizontal bars with a 2px right corner radius in the category color, drawn over a #232E37 capacity track that runs from zero to each row's limit. A 2px #E9EEF1 vertical tick at the limit, extending 4px above and below the bar. The value sits inside the bar end, right-aligned 6px from it, in dark slate. Rows past 80% of their limit get a pill tag (50 x 17px, 8.5px radius, 1.2px #F6C667 outline, "RECUT" inside) 10px right of the limit tick.
- Line chart: one 2px line per category in its color with 3px dots, a dashed 1px #E9EEF1 line for the limit, and the same yellow pill tag at any point past 80% of the limit.

Avoid: gradients, glows, filled tags, more than one warning color, value labels outside bars colliding with limit ticks, and a legend (group captions do that job).

When you're done, render the chart and check that every flagged row is really above 80% of its own limit, the title's count matches the tags, in-bar values stay readable on the palest bars, and no tag collides with the percent column.