{
  "id": "depth-charge-voyage",
  "name": "Voyage Report",
  "theme": "depth-charge",
  "category": "Data & Reports",
  "description": "A noon-to-noon report where consumption is compared against the charter warranty, so the number that matters is the difference and not the total.",
  "layout": "A report header of five figures across the full width, then a two-column split of a consumption table against a weather-and-slip panel, with the warranty verdict as a band.",
  "modules": [
    {
      "key": "head",
      "name": "Report header",
      "html": "\n<header class=\"rh\"><div><span class=\"k\">Noon report · day 6</span><h1>Rotterdam → Immingham</h1></div>\n<dl>\n  <div><dt>Distance</dt><dd>264 <i>nm</i></dd></div>\n  <div><dt>Steaming</dt><dd>23.4 <i>h</i></dd></div>\n  <div><dt>Avg speed</dt><dd>11.28 <i>kn</i></dd></div>\n  <div><dt>HFO used</dt><dd>28.4 <i>t</i></dd></div>\n  <div><dt>ROB</dt><dd>412.0 <i>t</i></dd></div>\n</dl></header>"
    },
    {
      "key": "verdict",
      "name": "Warranty band",
      "html": "\n<div class=\"vd\"><span class=\"k\">Against charter warranty</span><b>+1.4 t over</b><span class=\"m\">Warranted 27.0 t at 11.5 kn in Beaufort 4 or below. Sea state exceeded warranty conditions for 9 of 24 hours.</span></div>"
    },
    {
      "key": "table",
      "name": "Consumption",
      "html": "\n<section class=\"cs\"><table>\n  <thead><tr><th>Consumer</th><th>HFO</th><th>MGO</th><th>LO</th><th>Fresh water</th></tr></thead>\n  <tbody>\n    <tr><td>Main engine</td><td class=\"n\">26.10</td><td class=\"n\">0.00</td><td class=\"n\">0.14</td><td class=\"n\">—</td></tr>\n    <tr><td>Auxiliary engines</td><td class=\"n\">2.30</td><td class=\"n\">0.40</td><td class=\"n\">0.06</td><td class=\"n\">—</td></tr>\n    <tr><td>Boiler</td><td class=\"n\">0.00</td><td class=\"n\">0.20</td><td class=\"n\">—</td><td class=\"n\">—</td></tr>\n    <tr><td>Domestic</td><td class=\"n\">—</td><td class=\"n\">—</td><td class=\"n\">—</td><td class=\"n\">6.40</td></tr>\n    <tr class=\"tt\"><td>Total</td><td class=\"n\">28.40</td><td class=\"n\">0.60</td><td class=\"n\">0.20</td><td class=\"n\">6.40</td></tr>\n  </tbody>\n</table></section>"
    },
    {
      "key": "weather",
      "name": "Weather and slip",
      "html": "\n<aside class=\"wx\"><span class=\"k\">Conditions</span>\n<dl>\n  <div><dt>Wind</dt><dd>SW 22 <i>kn</i></dd></div>\n  <div><dt>Beaufort</dt><dd>6</dd></div>\n  <div><dt>Sea state</dt><dd>4</dd></div>\n  <div><dt>Swell</dt><dd>2.4 <i>m</i></dd></div>\n  <div><dt>Current</dt><dd>−0.4 <i>kn</i></dd></div>\n</dl>\n<span class=\"k\">Slip</span><div class=\"sl\"><i style=\"--w:64%\"></i></div><span class=\"m\">6.4% · engine distance 282 nm against 264 over ground</span></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "depth-charge-voyage",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:13:22+09:00",
    "updatedAt": "2026-09-01T20:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/depth-charge-voyage.json",
  "structure": "A report header of five figures across the full width, then a two-column split of a consumption table against a weather-and-slip panel, with the warranty verdict as a band.",
  "html": "<div class=\"dz dz-depth-charge-voyage\" data-design=\"depth-charge-voyage\" data-theme=\"depth-charge\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Report header\">\n<header class=\"rh\"><div><span class=\"k\">Noon report · day 6</span><h1>Rotterdam → Immingham</h1></div>\n<dl>\n  <div><dt>Distance</dt><dd>264 <i>nm</i></dd></div>\n  <div><dt>Steaming</dt><dd>23.4 <i>h</i></dd></div>\n  <div><dt>Avg speed</dt><dd>11.28 <i>kn</i></dd></div>\n  <div><dt>HFO used</dt><dd>28.4 <i>t</i></dd></div>\n  <div><dt>ROB</dt><dd>412.0 <i>t</i></dd></div>\n</dl></header></section><section class=\"dz-mod\" data-mod=\"verdict\" aria-label=\"Warranty band\">\n<div class=\"vd\"><span class=\"k\">Against charter warranty</span><b>+1.4 t over</b><span class=\"m\">Warranted 27.0 t at 11.5 kn in Beaufort 4 or below. Sea state exceeded warranty conditions for 9 of 24 hours.</span></div></section><section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Consumption\">\n<section class=\"cs\"><table>\n  <thead><tr><th>Consumer</th><th>HFO</th><th>MGO</th><th>LO</th><th>Fresh water</th></tr></thead>\n  <tbody>\n    <tr><td>Main engine</td><td class=\"n\">26.10</td><td class=\"n\">0.00</td><td class=\"n\">0.14</td><td class=\"n\">—</td></tr>\n    <tr><td>Auxiliary engines</td><td class=\"n\">2.30</td><td class=\"n\">0.40</td><td class=\"n\">0.06</td><td class=\"n\">—</td></tr>\n    <tr><td>Boiler</td><td class=\"n\">0.00</td><td class=\"n\">0.20</td><td class=\"n\">—</td><td class=\"n\">—</td></tr>\n    <tr><td>Domestic</td><td class=\"n\">—</td><td class=\"n\">—</td><td class=\"n\">—</td><td class=\"n\">6.40</td></tr>\n    <tr class=\"tt\"><td>Total</td><td class=\"n\">28.40</td><td class=\"n\">0.60</td><td class=\"n\">0.20</td><td class=\"n\">6.40</td></tr>\n  </tbody>\n</table></section></section><section class=\"dz-mod\" data-mod=\"weather\" aria-label=\"Weather and slip\">\n<aside class=\"wx\"><span class=\"k\">Conditions</span>\n<dl>\n  <div><dt>Wind</dt><dd>SW 22 <i>kn</i></dd></div>\n  <div><dt>Beaufort</dt><dd>6</dd></div>\n  <div><dt>Sea state</dt><dd>4</dd></div>\n  <div><dt>Swell</dt><dd>2.4 <i>m</i></dd></div>\n  <div><dt>Current</dt><dd>−0.4 <i>kn</i></dd></div>\n</dl>\n<span class=\"k\">Slip</span><div class=\"sl\"><i style=\"--w:64%\"></i></div><span class=\"m\">6.4% · engine distance 282 nm against 264 over ground</span></aside></section>\n</div>",
  "css": "\n.dz-depth-charge-voyage { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 0 24px 24px; align-content: start; }\n.dz-depth-charge-voyage .rh { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 18px 0 16px; }\n.dz-depth-charge-voyage .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-depth-charge-voyage .rh h1 { font-family: var(--pv-display); font-size: 30px; font-weight: 600; margin: 6px 0 0; }\n.dz-depth-charge-voyage .rh dl { display: flex; gap: 26px; margin: 0; }\n.dz-depth-charge-voyage .rh dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px; }\n.dz-depth-charge-voyage .rh dd { margin: 0; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 18px; }\n.dz-depth-charge-voyage .rh dd i, .dz-depth-charge-voyage .wx dd i { font-size: 11px; font-style: normal; color: var(--muted-foreground); }\n.dz-depth-charge-voyage .vd { grid-column: 1 / -1; background: var(--card); border-radius: var(--pv-radius); border-left: 4px solid var(--accent); padding: 14px 18px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }\n.dz-depth-charge-voyage .vd b { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 26px; color: var(--accent); }\n.dz-depth-charge-voyage .m { font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-depth-charge-voyage .vd .m { flex: 1; min-width: 300px; }\n.dz-depth-charge-voyage .cs { background: var(--card); border-radius: var(--pv-radius); padding: 6px 18px 12px; }\n.dz-depth-charge-voyage table { width: 100%; border-collapse: collapse; }\n.dz-depth-charge-voyage th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); text-align: right; padding: 12px 10px; }\n.dz-depth-charge-voyage th:first-child { text-align: left; }\n.dz-depth-charge-voyage td { padding: 0 10px; height: 36px; font-size: 13.5px; border-top: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-voyage .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; text-align: right; font-size: 13.5px; }\n.dz-depth-charge-voyage .tt td { border-top: 2px solid var(--primary); font-weight: 600; }\n.dz-depth-charge-voyage .tt .n { color: var(--primary); }\n.dz-depth-charge-voyage .wx { background: var(--card); border-radius: var(--pv-radius); padding: 14px 18px 18px; }\n.dz-depth-charge-voyage .wx dl { margin: 8px 0 18px; }\n.dz-depth-charge-voyage .wx dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-depth-charge-voyage .wx dt { font-size: 13px; color: var(--muted-foreground); }\n.dz-depth-charge-voyage .wx dd { margin: 0; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 15px; }\n.dz-depth-charge-voyage .sl { height: 10px; background: var(--muted); border-radius: 3px; margin: 10px 0 8px; }\n.dz-depth-charge-voyage .sl i { display: block; height: 10px; width: var(--w); background: var(--primary); border-radius: 3px; }\n@media (prefers-reduced-motion: reduce) { .dz-depth-charge-voyage *, .dz-depth-charge-voyage *::before, .dz-depth-charge-voyage *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/depth-charge.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Titillium+Web:wght@400;500;600;700&family=Share+Tech+Mono:wght@400;500;600;700&display=swap"
}