{
  "id": "depot-red-punctuality",
  "name": "Punctuality Report",
  "theme": "depot-red",
  "category": "Data & Reports",
  "description": "A performance report that counts minutes lost by cause rather than a percentage on time, because the percentage hides which one thing to fix.",
  "layout": "A duotone bar set of causes in red and amber over a fully bordered table of routes, with no gradient or third hue anywhere.",
  "modules": [
    {
      "key": "top",
      "name": "Headline figures",
      "html": "\n<section class=\"hf\">\n  <div><span class=\"lb\">Departures</span><b class=\"n\">1,204</b></div>\n  <div><span class=\"lb\">Within 3 minutes</span><b class=\"n\">88.4%</b></div>\n  <div class=\"amb\"><span class=\"lb\">Minutes lost</span><b class=\"n\">6,412</b></div>\n  <div><span class=\"lb\">Worst cause</span><b class=\"cs\">Bay availability</b></div>\n</section>"
    },
    {
      "key": "causes",
      "name": "Cause bars",
      "html": "\n<section class=\"cb\"><h2>Minutes lost by cause</h2>\n<ol>\n  <li><span class=\"cn\">Bay availability</span><span class=\"bar\"><i style=\"--w:100%\"></i></span><span class=\"n\">2,410</span></li>\n  <li><span class=\"cn\">Late inbound vehicle</span><span class=\"bar\"><i style=\"--w:71%\"></i></span><span class=\"n\">1,712</span></li>\n  <li><span class=\"cn\">Load not ready</span><span class=\"bar am\"><i style=\"--w:44%\"></i></span><span class=\"n\">1,060</span></li>\n  <li><span class=\"cn\">Driver hours</span><span class=\"bar am\"><i style=\"--w:28%\"></i></span><span class=\"n\">674</span></li>\n  <li><span class=\"cn\">Weather</span><span class=\"bar\"><i style=\"--w:16%\"></i></span><span class=\"n\">392</span></li>\n  <li><span class=\"cn\">Other</span><span class=\"bar am\"><i style=\"--w:7%\"></i></span><span class=\"n\">164</span></li>\n</ol>\n<p class=\"fn\">Red is within our control, amber is not. Two of the top three are red, which is the whole finding of this report: 64% of lost minutes are ours.</p></section>"
    },
    {
      "key": "routes",
      "name": "Route table",
      "html": "\n<section class=\"rt\"><h2>By route</h2>\n<table><thead><tr><th>Route</th><th>Departures</th><th>Within 3 min</th><th>Minutes lost</th><th>Per departure</th><th>Trend</th></tr></thead>\n<tbody>\n<tr class=\"worst\"><td>Kirkwall</td><td class=\"n\">88</td><td class=\"n\">71.6%</td><td class=\"n\">1,204</td><td class=\"n\">13.7</td><td>Worsening</td></tr>\n<tr><td>Inverness</td><td class=\"n\">204</td><td class=\"n\">86.3%</td><td class=\"n\">1,410</td><td class=\"n\">6.9</td><td>Flat</td></tr>\n<tr><td>Aberdeen</td><td class=\"n\">311</td><td class=\"n\">91.0%</td><td class=\"n\">1,388</td><td class=\"n\">4.5</td><td>Improving</td></tr>\n<tr><td>Dundee</td><td class=\"n\">288</td><td class=\"n\">92.4%</td><td class=\"n\">1,102</td><td class=\"n\">3.8</td><td>Improving</td></tr>\n<tr><td>Thurso</td><td class=\"n\">142</td><td class=\"n\">89.4%</td><td class=\"n\">844</td><td class=\"n\">5.9</td><td>Flat</td></tr>\n<tr><td>Inverurie</td><td class=\"n\">171</td><td class=\"n\">94.7%</td><td class=\"n\">464</td><td class=\"n\">2.7</td><td>Improving</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "depot-red-punctuality",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:11:03+09:00",
    "updatedAt": "2026-09-02T00:11:03+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/depot-red-punctuality.json",
  "structure": "A duotone bar set of causes in red and amber over a fully bordered table of routes, with no gradient or third hue anywhere.",
  "html": "<div class=\"dz dz-depot-red-punctuality\" data-design=\"depot-red-punctuality\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Headline figures\">\n<section class=\"hf\">\n  <div><span class=\"lb\">Departures</span><b class=\"n\">1,204</b></div>\n  <div><span class=\"lb\">Within 3 minutes</span><b class=\"n\">88.4%</b></div>\n  <div class=\"amb\"><span class=\"lb\">Minutes lost</span><b class=\"n\">6,412</b></div>\n  <div><span class=\"lb\">Worst cause</span><b class=\"cs\">Bay availability</b></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"causes\" aria-label=\"Cause bars\">\n<section class=\"cb\"><h2>Minutes lost by cause</h2>\n<ol>\n  <li><span class=\"cn\">Bay availability</span><span class=\"bar\"><i style=\"--w:100%\"></i></span><span class=\"n\">2,410</span></li>\n  <li><span class=\"cn\">Late inbound vehicle</span><span class=\"bar\"><i style=\"--w:71%\"></i></span><span class=\"n\">1,712</span></li>\n  <li><span class=\"cn\">Load not ready</span><span class=\"bar am\"><i style=\"--w:44%\"></i></span><span class=\"n\">1,060</span></li>\n  <li><span class=\"cn\">Driver hours</span><span class=\"bar am\"><i style=\"--w:28%\"></i></span><span class=\"n\">674</span></li>\n  <li><span class=\"cn\">Weather</span><span class=\"bar\"><i style=\"--w:16%\"></i></span><span class=\"n\">392</span></li>\n  <li><span class=\"cn\">Other</span><span class=\"bar am\"><i style=\"--w:7%\"></i></span><span class=\"n\">164</span></li>\n</ol>\n<p class=\"fn\">Red is within our control, amber is not. Two of the top three are red, which is the whole finding of this report: 64% of lost minutes are ours.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"routes\" aria-label=\"Route table\">\n<section class=\"rt\"><h2>By route</h2>\n<table><thead><tr><th>Route</th><th>Departures</th><th>Within 3 min</th><th>Minutes lost</th><th>Per departure</th><th>Trend</th></tr></thead>\n<tbody>\n<tr class=\"worst\"><td>Kirkwall</td><td class=\"n\">88</td><td class=\"n\">71.6%</td><td class=\"n\">1,204</td><td class=\"n\">13.7</td><td>Worsening</td></tr>\n<tr><td>Inverness</td><td class=\"n\">204</td><td class=\"n\">86.3%</td><td class=\"n\">1,410</td><td class=\"n\">6.9</td><td>Flat</td></tr>\n<tr><td>Aberdeen</td><td class=\"n\">311</td><td class=\"n\">91.0%</td><td class=\"n\">1,388</td><td class=\"n\">4.5</td><td>Improving</td></tr>\n<tr><td>Dundee</td><td class=\"n\">288</td><td class=\"n\">92.4%</td><td class=\"n\">1,102</td><td class=\"n\">3.8</td><td>Improving</td></tr>\n<tr><td>Thurso</td><td class=\"n\">142</td><td class=\"n\">89.4%</td><td class=\"n\">844</td><td class=\"n\">5.9</td><td>Flat</td></tr>\n<tr><td>Inverurie</td><td class=\"n\">171</td><td class=\"n\">94.7%</td><td class=\"n\">464</td><td class=\"n\">2.7</td><td>Improving</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-depot-red-punctuality { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px 24px; }\n.dz-depot-red-punctuality .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-punctuality .n { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; }\n.dz-depot-red-punctuality .hf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }\n.dz-depot-red-punctuality .hf div { border: 2px solid var(--border); padding: 14px; }\n.dz-depot-red-punctuality .hf .amb { border-color: var(--accent); }\n.dz-depot-red-punctuality .hf b { display: block; font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 34px; margin-top: 6px; }\n.dz-depot-red-punctuality .cs { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 22px !important; font-family: var(--pv-display) !important; }\n.dz-depot-red-punctuality h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 26px; margin: 0 0 14px; }\n.dz-depot-red-punctuality .cb { margin-bottom: 28px; }\n.dz-depot-red-punctuality .cb ol { list-style: none; margin: 0; padding: 0; }\n.dz-depot-red-punctuality .cb li { display: grid; grid-template-columns: 190px 1fr 80px; gap: 16px; align-items: center; height: 48px; border-bottom: 2px solid var(--border); }\n.dz-depot-red-punctuality .cn { font-size: 14px; }\n.dz-depot-red-punctuality .bar { height: 20px; background: var(--secondary); display: block; }\n.dz-depot-red-punctuality .bar i { display: block; height: 100%; width: var(--w); background: var(--primary); }\n.dz-depot-red-punctuality .bar.am i { background: var(--accent); }\n.dz-depot-red-punctuality .cb .n { text-align: right; font-size: 15px; }\n.dz-depot-red-punctuality .fn { margin: 14px 0 0; font-size: 13px; line-height: 1.55; max-width: 64ch; }\n.dz-depot-red-punctuality table { width: 100%; border-collapse: collapse; border: 2px solid var(--border); }\n.dz-depot-red-punctuality th { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); text-align: right; padding: 10px 12px; border-bottom: 2px solid var(--border); border-right: 2px solid var(--border); }\n.dz-depot-red-punctuality th:first-child, .dz-depot-red-punctuality td:first-child { text-align: left; }\n.dz-depot-red-punctuality th:last-child, .dz-depot-red-punctuality td:last-child { border-right: 0; text-align: left; }\n.dz-depot-red-punctuality td { padding: 11px 12px; text-align: right; border-bottom: 2px solid var(--border); border-right: 2px solid var(--border); font-size: 14px; }\n.dz-depot-red-punctuality tr.worst td { background: var(--accent); color: var(--accent-foreground); }\n",
  "requiredTheme": "/api/v1/themes/depot-red.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&family=Victor+Mono:wght@400;500;600;700&display=swap"
}