{
  "id": "depth-charge-bridge",
  "name": "Bridge",
  "theme": "depth-charge",
  "category": "Dashboard",
  "description": "A gauge wall for a vessel under way: four arcs at the top reading the systems that can hurt you, a live chart, and an event log that never scrolls out of view.",
  "layout": "A four-across row of arc gauges above a 2:1 split of chart to event log, with panels butted together at the 16px gutter and no section spacing anywhere.",
  "modules": [
    {
      "key": "bar",
      "name": "Vessel bar",
      "html": "\n<header class=\"vb\"><span class=\"nm\">MV Hollin Bank</span><span class=\"st\">Under way · 11.4 kn · 042°</span><span class=\"tm\">14:02:11 UTC</span></header>"
    },
    {
      "key": "gauges",
      "name": "Gauge wall",
      "html": "\n<section class=\"gw\">\n  <article><span class=\"k\">Main engine load</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:73\"/></svg><b>73<i>%</i></b></div></article>\n  <article><span class=\"k\">Shaft rpm</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:61\"/></svg><b>84<i>rpm</i></b></div></article>\n  <article class=\"alarm\"><span class=\"k\">Fuel pressure</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl al\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:22\"/></svg><b>2.1<i>bar</i></b></div></article>\n  <article><span class=\"k\">Bilge level</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:8\"/></svg><b>4<i>cm</i></b></div></article>\n</section>"
    },
    {
      "key": "chart",
      "name": "Live chart",
      "html": "\n<section class=\"ch\"><header><span class=\"k\">Fuel pressure · last 30 min</span><span class=\"rd\">2.1 bar</span></header>\n<svg viewBox=\"0 0 560 180\" preserveAspectRatio=\"none\" aria-label=\"Fuel pressure trend\">\n  <line class=\"lim\" x1=\"0\" y1=\"118\" x2=\"560\" y2=\"118\"/>\n  <polyline class=\"ln\" points=\"0,52 56,58 112,54 168,64 224,62 280,74 336,88 392,102 448,116 504,128 560,134\"/>\n</svg>\n<footer><span class=\"k\">−30 min</span><span class=\"k al2\">low limit 2.5 bar</span><span class=\"k\">now</span></footer></section>"
    },
    {
      "key": "log",
      "name": "Event log",
      "html": "\n<section class=\"lg\"><header><span class=\"k\">Events</span><span class=\"k\">42 today</span></header>\n<ol>\n  <li class=\"a\"><span class=\"t\">14:01</span><b>Fuel pressure below limit</b><span class=\"m\">2.1 bar · limit 2.5</span></li>\n  <li class=\"w\"><span class=\"t\">13:48</span><b>Filter differential rising</b><span class=\"m\">0.8 bar across primary</span></li>\n  <li><span class=\"t\">13:02</span><b>Course altered</b><span class=\"m\">038° to 042°</span></li>\n  <li><span class=\"t\">12:40</span><b>Generator 2 online</b><span class=\"m\">Load share 48/52</span></li>\n  <li><span class=\"t\">11:58</span><b>Bunker transfer complete</b><span class=\"m\">42.0 t to service tank</span></li>\n  <li><span class=\"t\">10:14</span><b>Watch handover</b><span class=\"m\">2nd officer to chief officer</span></li>\n</ol></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "depth-charge-bridge",
    "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-bridge.json",
  "structure": "A four-across row of arc gauges above a 2:1 split of chart to event log, with panels butted together at the 16px gutter and no section spacing anywhere.",
  "html": "<div class=\"dz dz-depth-charge-bridge\" data-design=\"depth-charge-bridge\" data-theme=\"depth-charge\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Vessel bar\">\n<header class=\"vb\"><span class=\"nm\">MV Hollin Bank</span><span class=\"st\">Under way · 11.4 kn · 042°</span><span class=\"tm\">14:02:11 UTC</span></header></section><section class=\"dz-mod\" data-mod=\"gauges\" aria-label=\"Gauge wall\">\n<section class=\"gw\">\n  <article><span class=\"k\">Main engine load</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:73\"/></svg><b>73<i>%</i></b></div></article>\n  <article><span class=\"k\">Shaft rpm</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:61\"/></svg><b>84<i>rpm</i></b></div></article>\n  <article class=\"alarm\"><span class=\"k\">Fuel pressure</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl al\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:22\"/></svg><b>2.1<i>bar</i></b></div></article>\n  <article><span class=\"k\">Bilge level</span><div class=\"gg\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><path class=\"tk\" d=\"M14,80 A44,44 0 1,1 86,80\"/><path class=\"fl\" d=\"M14,80 A44,44 0 1,1 86,80\" style=\"--d:8\"/></svg><b>4<i>cm</i></b></div></article>\n</section></section><section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Live chart\">\n<section class=\"ch\"><header><span class=\"k\">Fuel pressure · last 30 min</span><span class=\"rd\">2.1 bar</span></header>\n<svg viewBox=\"0 0 560 180\" preserveAspectRatio=\"none\" aria-label=\"Fuel pressure trend\">\n  <line class=\"lim\" x1=\"0\" y1=\"118\" x2=\"560\" y2=\"118\"/>\n  <polyline class=\"ln\" points=\"0,52 56,58 112,54 168,64 224,62 280,74 336,88 392,102 448,116 504,128 560,134\"/>\n</svg>\n<footer><span class=\"k\">−30 min</span><span class=\"k al2\">low limit 2.5 bar</span><span class=\"k\">now</span></footer></section></section><section class=\"dz-mod\" data-mod=\"log\" aria-label=\"Event log\">\n<section class=\"lg\"><header><span class=\"k\">Events</span><span class=\"k\">42 today</span></header>\n<ol>\n  <li class=\"a\"><span class=\"t\">14:01</span><b>Fuel pressure below limit</b><span class=\"m\">2.1 bar · limit 2.5</span></li>\n  <li class=\"w\"><span class=\"t\">13:48</span><b>Filter differential rising</b><span class=\"m\">0.8 bar across primary</span></li>\n  <li><span class=\"t\">13:02</span><b>Course altered</b><span class=\"m\">038° to 042°</span></li>\n  <li><span class=\"t\">12:40</span><b>Generator 2 online</b><span class=\"m\">Load share 48/52</span></li>\n  <li><span class=\"t\">11:58</span><b>Bunker transfer complete</b><span class=\"m\">42.0 t to service tank</span></li>\n  <li><span class=\"t\">10:14</span><b>Watch handover</b><span class=\"m\">2nd officer to chief officer</span></li>\n</ol></section></section>\n</div>",
  "css": "\n.dz-depth-charge-bridge { 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-bridge .vb { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 20px; padding: 16px 0 14px; }\n.dz-depth-charge-bridge .nm { font-family: var(--pv-display); font-size: 24px; font-weight: 600; }\n.dz-depth-charge-bridge .st { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-depth-charge-bridge .tm { margin-left: auto; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 16px; color: var(--primary); }\n.dz-depth-charge-bridge .gw { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n.dz-depth-charge-bridge .gw article { background: var(--card); border-radius: var(--pv-radius); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; }\n.dz-depth-charge-bridge .alarm { outline: 2px solid var(--accent); outline-offset: -2px; }\n.dz-depth-charge-bridge .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-depth-charge-bridge .gg { position: relative; display: grid; place-items: center; }\n.dz-depth-charge-bridge .gg svg { width: 100%; max-width: 132px; display: block; }\n.dz-depth-charge-bridge .tk { fill: none; stroke: var(--muted); stroke-width: 8; stroke-linecap: round; }\n.dz-depth-charge-bridge .fl { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 207; stroke-dashoffset: calc(207 - (207 * var(--d) / 100)); }\n.dz-depth-charge-bridge .fl.al { stroke: var(--accent); }\n.dz-depth-charge-bridge .gg b { position: absolute; bottom: 16px; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 26px; font-weight: 500; }\n.dz-depth-charge-bridge .gg b i { font-size: 12px; font-style: normal; color: var(--muted-foreground); margin-left: 2px; }\n.dz-depth-charge-bridge .ch { background: var(--card); border-radius: var(--pv-radius); padding: 14px 18px 10px; }\n.dz-depth-charge-bridge .ch header, .dz-depth-charge-bridge .lg header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; }\n.dz-depth-charge-bridge .rd { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 15px; color: var(--primary); }\n.dz-depth-charge-bridge .ch svg { width: 100%; height: 180px; display: block; }\n.dz-depth-charge-bridge .lim { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; }\n.dz-depth-charge-bridge .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }\n.dz-depth-charge-bridge .ch footer { display: flex; justify-content: space-between; padding-top: 8px; }\n.dz-depth-charge-bridge .al2 { color: var(--accent); }\n.dz-depth-charge-bridge .lg { background: var(--card); border-radius: var(--pv-radius); padding: 14px 16px; }\n.dz-depth-charge-bridge .lg ol { list-style: none; margin: 0; padding: 0; }\n.dz-depth-charge-bridge .lg li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0 8px 12px; border-left: 3px solid var(--muted); margin-bottom: 6px; }\n.dz-depth-charge-bridge .lg .a { border-left-color: var(--accent); }\n.dz-depth-charge-bridge .lg .w { border-left-color: var(--primary); }\n.dz-depth-charge-bridge .t { grid-row: 1 / 3; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11.5px; color: var(--muted-foreground); padding-top: 2px; }\n.dz-depth-charge-bridge .lg b { font-size: 13.5px; font-weight: 600; }\n.dz-depth-charge-bridge .m { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-depth-charge-bridge *, .dz-depth-charge-bridge *::before, .dz-depth-charge-bridge *::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"
}