Chart Prompts

Restyle my chart in the "Container Journey" 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 freight tracking console on a logistics operator's night screen. Deep ocean navy, a crisp white route line hopping from port to port, and amber warnings for the stops where cargo sat in customs.

Colors (use these exact values):
- Page: #0B1726 (ocean navy). Status panel fill #11213A with a 1px #1E3350 border.
- Actual line, point rings and value labels: #F4F7FA.
- Planned schedule: #7FA3C4, dotted.
- Customs holds and delay figures: #F2A93B (amber).
- Gridlines and rules: #1E3350. Secondary text #8397B0.

Typography (Google Fonts):
- Fira Sans for the title (600, 27px, #F4F7FA, stating the finding) and subtitle (400, 15px, #8397B0).
- Tomorrow for everything else: eyebrow 12px 500 uppercase with 1.6px letter-spacing; port codes 14px 600 with 1.5px letter-spacing in white; port names 10.5px gray; axis values 11.5px; point values 12px 600; strip labels 10.5px 600 uppercase amber; status figure 21px 600 amber.

Layout:
- A 4px amber bar at the left of the header block (x 48), the eyebrow with the container ID, title and subtitle beside it; a status panel top right (152 x 54, 4px radius) with a small caption and the headline delay in amber.
- Plot from x 96 to 872 and y 186 to 478. The x axis is categorical: one evenly spaced stop per port, with its three-letter code and full name below.
- Footer rule at y 548; source on the left and a small key (Actual, Planned, Hold) on the right, all 11.5px.

Axes and grid:
- Horizontal 1px #1E3350 gridlines every 10 units, extended 20px past the plot on each side; y values right-aligned 30px left of the plot with a small "DAYS" unit label on top. No vertical gridlines apart from the hold strips; 6px ticks under each port.

Marks:
- Line chart: straight 2.6px white segments between ports; each port a 5px circle with a navy fill and 2px white ring (amber ring where a hold happened). The plan is a 1.6px #7FA3C4 dotted line (1.5 on, 4 off, round caps) underneath. Values sit up-left of each point; end labels "Actual" and "Plan" sit to the right of the last stop.
- Bar chart: one bar per port (about 34px wide, square corners, #F4F7FA at 90% opacity) for the actual value, with the plan drawn as a short dotted #7FA3C4 tick across each bar, and hold ports getting the same amber strip behind the bar.
- Customs holds: 30px wide vertical strips centered on the port, #F2A93B at 16% opacity with 1px amber edges at 70% opacity, rising 22px above the plot with a label "CUSTOMS HOLD 3.0 D" above.

Avoid: glow effects, gradients, curved lines, a date axis instead of ports, real carrier or port names, and more than two accent colors.

When you're done, render the chart and check that value labels clear the hold strip edges, the plan and actual end labels do not collide, the headline delay equals the last actual minus the last planned value, and hold durations add up as the title claims.