Chart Prompts

Restyle my chart in the "Room Bookings" 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: the room schedule on a community center front desk. Calm sage paper, a timetable grid, each row's name on a small folder tab, and crisp flat color blocks. Organized and practical, like a well-run facilities report.

Colors (use these exact values):
- Page: #F1F5EE (light sage). Schedule panel: #FAFCF8 with a 1px #DCE5D6 border and 10px corner radius; its header row #E6EEE2.
- Categories, in order: #F97316 (youth, warm orange), #9333EA (seniors, plum), #0D9488 (fitness, teal), #94A3B8 (events, neutral gray). Gray stays reserved for the least important or "other" category.
- Ink: #1F2A24. Secondary text: #5F6E65. Grid: #DCE5D6. Tabs: #DDE8D8.
- Eyebrow and the small occupancy meters: #0D9488.

Typography (Google Fonts):
- Work Sans throughout. Eyebrow 600 12px uppercase with 2px letter-spacing in #0D9488; title 700 27px with -0.4px letter-spacing in #1F2A24, stating the finding; subtitle 15px #5F6E65; legend 500 14px; column header percentages 500 12px; tab labels 600 12px; in-bar percentages 600 12.5px (white on orange, plum and teal; #1F2A37 on gray); right-column totals 700 20px with the hours in 12px #5F6E65.

Layout:
- 48px side margins. Eyebrow at y 56, title at y 94, subtitle at y 122, a legend row of 14px rounded (3px) squares at y 146.
- The schedule panel runs from y 180 to y 548. Its top 30px is a header row with 0%, 25%, 50%, 75%, 100% labels over the bars and "BOOKED" (600 11px, 1.6px letter-spacing) over a right-hand column separated by a 1px #DCE5D6 vertical line.
- Rows every 52px. Each row: a folder tab (height 18px, 5px rounded top-left corner, slanted right edge) sitting directly on the bar's left end with the row name inside, then a 26px tall bar.
- Sort rows by the value printed in the right column, highest first, and say so in a footer note.

Axes and grid:
- Vertical gridlines like a timetable: major lines every 25% (1px #DCE5D6), minor lines every 5% (0.7px, dashed 2 on 3 off). No horizontal gridlines and no axis lines.

Marks:
- Bar chart: horizontal 100% stacked bars, square corners, 2px panel-colored gaps between segments. Print each segment's share inside at its left edge (8px padding) when the segment is wider than 40px. In the right column print the row's overall figure (for example, 88% of available hours booked) with its absolute value next to it, and an 88 x 3 px rounded meter under it in #0D9488 on #DCE5D6.
- Line chart: one thin 2.5px line per category in the same four colors over the same timetable grid, straight segments, 3.5px dots at each point, series names on folder tabs at the right end of each line instead of a legend.

Avoid: rounded bar ends, gradients, shadows, 3D, dark backgrounds, labels on segments too narrow to hold them, and using gray for a highlighted category.

When you're done, render the chart and check that every segment label fits its segment, the tabs line up with the bars' left edges, rows are sorted, and the right-column numbers are right-aligned on a common edge.