{
  "id": "blacktop-shift",
  "name": "Shift Report",
  "theme": "blacktop",
  "category": "Data & Reports",
  "description": "A driver shift report where the drive hours are shown against the legal limit as a bar that turns orange only when the limit is genuinely at risk.",
  "layout": "A stacked report of ruled bands where each band is one legal duty and its bar, with the stop-by-stop table beneath at 40px rows and no card containers.",
  "modules": [
    {
      "key": "head",
      "name": "Shift header",
      "html": "\n<header class=\"hd\"><div><span class=\"k\">Shift report · 4 September 2026</span><h1>J. Oyelaran · round 22</h1></div><dl><div><dt>Vehicle</dt><dd>PN71 KVX</dd></div><div><dt>Signed on</dt><dd>05:52</dd></div><div><dt>Signed off</dt><dd>—</dd></div></dl></header>"
    },
    {
      "key": "duties",
      "name": "Duty bars",
      "html": "\n<section class=\"du\">\n  <div><span class=\"k\">Driving today</span><div class=\"br\"><i style=\"--w:64%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v\">5 h 46 m <em>of 9 h</em></span></div>\n  <div><span class=\"k\">Continuous driving</span><div class=\"br\"><i style=\"--w:82%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v\">3 h 41 m <em>of 4 h 30 m</em></span></div>\n  <div class=\"warn\"><span class=\"k\">Daily duty</span><div class=\"br\"><i class=\"hot\" style=\"--w:94%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v om\">12 h 40 m <em>of 13 h</em></span></div>\n  <div><span class=\"k\">Break taken</span><div class=\"br\"><i style=\"--w:100%\"></i></div><span class=\"v\">45 m <em>of 45 m required</em></span></div>\n</section>"
    },
    {
      "key": "stops",
      "name": "Stop table",
      "html": "\n<table>\n  <thead><tr><th>Stop</th><th>Address</th><th>Arrived</th><th>Dwell</th><th>Outcome</th></tr></thead>\n  <tbody>\n    <tr><td class=\"n\">01</td><td>4 Marsh Lane, NF4 2QH</td><td class=\"n\">08:14</td><td class=\"n\">2m 10s</td><td>Delivered</td></tr>\n    <tr><td class=\"n\">02</td><td>Flat 2, 4 Marsh Lane</td><td class=\"n\">08:18</td><td class=\"n\">4m 02s</td><td>Delivered</td></tr>\n    <tr class=\"fail\"><td class=\"n\">03</td><td>11 Fell Gate, NF4 3AA</td><td class=\"n\">08:31</td><td class=\"n\">1m 44s</td><td class=\"om\">No answer · carded</td></tr>\n    <tr><td class=\"n\">04</td><td>Unit 9, Carrfield Estate</td><td class=\"n\">08:52</td><td class=\"n\">6m 18s</td><td>Delivered · 4 parcels</td></tr>\n    <tr><td class=\"n\">05</td><td>Kirkstall Gate Post Office</td><td class=\"n\">09:11</td><td class=\"n\">3m 30s</td><td>Delivered</td></tr>\n    <tr class=\"fail\"><td class=\"n\">06</td><td>2 Hollin Bank Road</td><td class=\"n\">09:26</td><td class=\"n\">0m 58s</td><td class=\"om\">Access blocked · returned</td></tr>\n  </tbody>\n</table>"
    },
    {
      "key": "sign",
      "name": "Sign-off",
      "html": "\n<footer class=\"sg\"><span class=\"m\">Two stops need a second attempt tomorrow. Both are already on round 22 for the morning.</span><button type=\"button\">Add a note</button><button type=\"button\" class=\"go\">Sign off shift</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "blacktop-shift",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:18:14+09:00",
    "updatedAt": "2026-09-01T20:18:14+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/blacktop-shift.json",
  "structure": "A stacked report of ruled bands where each band is one legal duty and its bar, with the stop-by-stop table beneath at 40px rows and no card containers.",
  "html": "<div class=\"dz dz-blacktop-shift\" data-design=\"blacktop-shift\" data-theme=\"blacktop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Shift header\">\n<header class=\"hd\"><div><span class=\"k\">Shift report · 4 September 2026</span><h1>J. Oyelaran · round 22</h1></div><dl><div><dt>Vehicle</dt><dd>PN71 KVX</dd></div><div><dt>Signed on</dt><dd>05:52</dd></div><div><dt>Signed off</dt><dd>—</dd></div></dl></header></section>\n<section class=\"dz-mod\" data-mod=\"duties\" aria-label=\"Duty bars\">\n<section class=\"du\">\n  <div><span class=\"k\">Driving today</span><div class=\"br\"><i style=\"--w:64%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v\">5 h 46 m <em>of 9 h</em></span></div>\n  <div><span class=\"k\">Continuous driving</span><div class=\"br\"><i style=\"--w:82%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v\">3 h 41 m <em>of 4 h 30 m</em></span></div>\n  <div class=\"warn\"><span class=\"k\">Daily duty</span><div class=\"br\"><i class=\"hot\" style=\"--w:94%\"></i><span class=\"lim\" style=\"--t:100%\"></span></div><span class=\"v om\">12 h 40 m <em>of 13 h</em></span></div>\n  <div><span class=\"k\">Break taken</span><div class=\"br\"><i style=\"--w:100%\"></i></div><span class=\"v\">45 m <em>of 45 m required</em></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"stops\" aria-label=\"Stop table\">\n<table>\n  <thead><tr><th>Stop</th><th>Address</th><th>Arrived</th><th>Dwell</th><th>Outcome</th></tr></thead>\n  <tbody>\n    <tr><td class=\"n\">01</td><td>4 Marsh Lane, NF4 2QH</td><td class=\"n\">08:14</td><td class=\"n\">2m 10s</td><td>Delivered</td></tr>\n    <tr><td class=\"n\">02</td><td>Flat 2, 4 Marsh Lane</td><td class=\"n\">08:18</td><td class=\"n\">4m 02s</td><td>Delivered</td></tr>\n    <tr class=\"fail\"><td class=\"n\">03</td><td>11 Fell Gate, NF4 3AA</td><td class=\"n\">08:31</td><td class=\"n\">1m 44s</td><td class=\"om\">No answer · carded</td></tr>\n    <tr><td class=\"n\">04</td><td>Unit 9, Carrfield Estate</td><td class=\"n\">08:52</td><td class=\"n\">6m 18s</td><td>Delivered · 4 parcels</td></tr>\n    <tr><td class=\"n\">05</td><td>Kirkstall Gate Post Office</td><td class=\"n\">09:11</td><td class=\"n\">3m 30s</td><td>Delivered</td></tr>\n    <tr class=\"fail\"><td class=\"n\">06</td><td>2 Hollin Bank Road</td><td class=\"n\">09:26</td><td class=\"n\">0m 58s</td><td class=\"om\">Access blocked · returned</td></tr>\n  </tbody>\n</table></section>\n<section class=\"dz-mod\" data-mod=\"sign\" aria-label=\"Sign-off\">\n<footer class=\"sg\"><span class=\"m\">Two stops need a second attempt tomorrow. Both are already on round 22 for the morning.</span><button type=\"button\">Add a note</button><button type=\"button\" class=\"go\">Sign off shift</button></footer></section>\n</div>",
  "css": "\n.dz-blacktop-shift { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 26px; }\n.dz-blacktop-shift .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; padding: 18px 0 16px; border-bottom: 2px solid var(--border); }\n.dz-blacktop-shift .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-shift .hd h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 36px; margin: 6px 0 0; }\n.dz-blacktop-shift .hd dl { display: flex; gap: 26px; margin: 0; }\n.dz-blacktop-shift .hd dt { font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 3px; }\n.dz-blacktop-shift .hd dd { margin: 0; font-family: var(--pv-mono); font-size: 14px; }\n.dz-blacktop-shift .du { padding: 18px 0; }\n.dz-blacktop-shift .du > div { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; align-items: center; gap: 20px; padding: 12px 0 12px 14px; border-bottom: var(--pv-bw) solid var(--border); border-left: 4px solid transparent; }\n.dz-blacktop-shift .warn { border-left-color: var(--accent); }\n.dz-blacktop-shift .br { position: relative; height: 16px; background: var(--card); border-radius: var(--pv-radius); }\n.dz-blacktop-shift .br i { display: block; height: 16px; width: var(--w); background: var(--primary); border-radius: var(--pv-radius); }\n.dz-blacktop-shift .br .hot { background: var(--accent); }\n.dz-blacktop-shift .lim { position: absolute; left: var(--t); top: -4px; bottom: -4px; width: 2px; background: var(--foreground); }\n.dz-blacktop-shift .v { font-family: var(--pv-mono); font-size: 15px; text-align: right; }\n.dz-blacktop-shift .v em { font-style: normal; font-size: 11.5px; color: var(--muted-foreground); }\n.dz-blacktop-shift .om { color: var(--accent); }\n.dz-blacktop-shift table { width: 100%; border-collapse: collapse; }\n.dz-blacktop-shift th { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 15px; text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--border); border-top: 2px solid var(--border); }\n.dz-blacktop-shift td { padding: 0 12px; height: 40px; font-size: 13.5px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-blacktop-shift .n { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-blacktop-shift .fail { background: var(--card); }\n.dz-blacktop-shift .sg { display: flex; align-items: center; gap: 12px; padding-top: 18px; }\n.dz-blacktop-shift .m { flex: 1; font-size: 13px; color: var(--muted-foreground); }\n.dz-blacktop-shift .sg button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 17px; background: transparent; color: var(--foreground); border: 2px solid var(--border); border-radius: var(--pv-radius); padding: 10px 22px; cursor: pointer; }\n.dz-blacktop-shift .go { background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: var(--primary) !important; }\n@media (prefers-reduced-motion: reduce) { .dz-blacktop-shift *, .dz-blacktop-shift *::before, .dz-blacktop-shift *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/blacktop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Anton:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Martian+Mono:wght@400;500;600;700&display=swap"
}