Chart Prompts

Restyle my chart in the "Room Status" 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 housekeeping tablet app. Soft, friendly and glanceable: a white rounded card on a pale aqua page, pill shapes everywhere, status colors a floor supervisor reads at arm's length.

Colors (use these exact values):
- Page: #E8F4F4 (pale aqua). Card: #FFFFFF with radius 22 and a soft shadow (0 6px 10px blur, #1D5A5E at 12%).
- Status colors in order: #2A9D8F (clean, sea green), #F4A261 (in progress, amber), #D9533A (dirty, coral), and out of order as slate hatching: 45 degree stripes 2.6px of #5C6B7A on #D5DCE2, 6px repeat.
- Ink: #1D3440. Secondary text: #62757F. Empty track behind each bar: #EEF3F4.

Typography (Google Fonts):
- Nunito Sans throughout. Property name 13px 700 in sea green; title 25px 800 ink stating the finding; subtitle 14.5px 400 secondary; row labels 14px 600 (the worst row 800); legend pill labels 13px 600 with counts 13px 800; in-bar counts 13px 800 (white on green and coral, #4A2A0E on amber); right-hand ratio 13.5px 700; column header 10.5px 700 uppercase with 1.2px tracking; source 11.5px.

Layout:
- Card inset 28px from the page edges. Inside it, 32px padding: property name, title and subtitle top left; a shift chip top right (30px tall, fully rounded, #E8F4F4 fill, a small clock icon in sea green and "11:00, Morning shift" 13px 700).
- A row of legend pills under the subtitle: 30px tall, fully rounded, each tinted with its status color at 14% (out of order #F1F4F6), a 6px dot (hatched for out of order), the status name and its total count right-aligned inside the pill. 10px between pills.
- Rows 46px apart; bars 28px tall starting at x 150, a right column with "ready/total" per row and a "READY" header.

Axes and grid:
- No axis lines or gridlines. Every bar sits on a full-width fully rounded #EEF3F4 track that shows the scale's maximum.

Marks:
- Bar chart: horizontal stacked bars with fully rounded ends (radius = half the bar height), made by clipping the stacked segments to one rounded rectangle. Segments separated by 2px white gaps. Counts centered in segments at least 26px wide. The row with the worst problem gets a bold label and its ratio in coral.
- Line chart: 3px smooth lines in the same status colors with round caps, each ending in a 7px dot with a white 2.5px ring and a pill-shaped end label tinted at 14%, on the same white card with the same legend pills and shift chip; out of order drawn as a slate dashed line.

Avoid: sharp corners, dark themes, thin hairlines, dense ticks, and reds that compete with the coral.

When you're done, render the chart and check that both ends of each bar are fully rounded, the hatching reads as out of order at thumbnail size, the pill counts sum to the total in the subtitle, and the chip text fits inside its pill.