{
  "id": "blacktop-control",
  "name": "Route Control",
  "theme": "blacktop",
  "category": "Dashboard",
  "description": "A control screen for a bus corridor where the whole route is one horizontal strip and every vehicle is a block sitting on it, so a bunched pair is visible instantly.",
  "layout": "A 96px route strip running the full width with stops as 2px ticks, above a two-column split of running legs against a delay log, and a travelling dashed rule between them.",
  "modules": [
    {
      "key": "bar",
      "name": "Route bar",
      "html": "\n<header class=\"rb\"><h1>Route 41</h1><span class=\"m\">Beckton Interchange → Kirkstall Gate · 14.2 km · 22 stops</span><span class=\"clk\">14:02:11</span></header>"
    },
    {
      "key": "strip",
      "name": "Route strip",
      "html": "\n<section class=\"rs\"><div class=\"track\">\n  <i class=\"tick\" style=\"--x:4%\"></i><i class=\"tick\" style=\"--x:12%\"></i><i class=\"tick\" style=\"--x:20%\"></i><i class=\"tick\" style=\"--x:28%\"></i><i class=\"tick\" style=\"--x:36%\"></i><i class=\"tick\" style=\"--x:44%\"></i><i class=\"tick\" style=\"--x:52%\"></i><i class=\"tick\" style=\"--x:60%\"></i><i class=\"tick\" style=\"--x:68%\"></i><i class=\"tick\" style=\"--x:76%\"></i><i class=\"tick\" style=\"--x:84%\"></i><i class=\"tick\" style=\"--x:92%\"></i>\n  <span class=\"veh\" style=\"--x:14%\"><b>4102</b></span>\n  <span class=\"veh\" style=\"--x:19%\"><b>4108</b></span>\n  <span class=\"veh late\" style=\"--x:46%\"><b>4114</b></span>\n  <span class=\"veh\" style=\"--x:71%\"><b>4120</b></span>\n  <span class=\"closed\" style=\"--x:56%;--w:8%\"></span>\n</div>\n<footer><span class=\"m\">Beckton</span><span class=\"m om\">Closed: Marsh Lane, both directions</span><span class=\"m\">Kirkstall</span></footer></section>"
    },
    {
      "key": "legs",
      "name": "Running legs",
      "html": "\n<section class=\"lg\"><header><span class=\"k\">Running</span><span class=\"k\">4 vehicles</span></header>\n<ol>\n  <li><span class=\"cd\">4102</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 4 of 22 · driver M. Sandoval</span></div><span class=\"et\">on time</span></li>\n  <li class=\"bunch\"><span class=\"cd\">4108</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 5 of 22 · 90 s behind 4102</span></div><span class=\"et wn\">bunched</span></li>\n  <li class=\"late2\"><span class=\"cd\">4114</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 11 of 22 · held at closure</span></div><span class=\"et om\">+9 min</span></li>\n  <li><span class=\"cd\">4120</span><div><b>Kirkstall → Beckton</b><span class=\"m\">Stop 16 of 22 · driver J. Oyelaran</span></div><span class=\"et\">on time</span></li>\n</ol></section>"
    },
    {
      "key": "log",
      "name": "Delay log",
      "html": "\n<aside class=\"dl\"><header><span class=\"k\">Today</span><span class=\"k\">6 events</span></header>\n<ol>\n  <li class=\"om2\"><span class=\"t\">13:41</span><b>Marsh Lane closed</b><span class=\"m\">Burst main · diversion in force</span></li>\n  <li><span class=\"t\">12:08</span><b>4114 wheelchair boarding</b><span class=\"m\">+2 min at stop 9</span></li>\n  <li class=\"om2\"><span class=\"t\">10:52</span><b>Signal fault, Kirkstall Gate</b><span class=\"m\">Cleared 11:14</span></li>\n  <li><span class=\"t\">09:20</span><b>4102 driver change</b><span class=\"m\">On schedule</span></li>\n</ol></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "blacktop-control",
    "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-control.json",
  "structure": "A 96px route strip running the full width with stops as 2px ticks, above a two-column split of running legs against a delay log, and a travelling dashed rule between them.",
  "html": "<div class=\"dz dz-blacktop-control\" data-design=\"blacktop-control\" data-theme=\"blacktop\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Route bar\">\n<header class=\"rb\"><h1>Route 41</h1><span class=\"m\">Beckton Interchange → Kirkstall Gate · 14.2 km · 22 stops</span><span class=\"clk\">14:02:11</span></header></section><section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Route strip\">\n<section class=\"rs\"><div class=\"track\">\n  <i class=\"tick\" style=\"--x:4%\"></i><i class=\"tick\" style=\"--x:12%\"></i><i class=\"tick\" style=\"--x:20%\"></i><i class=\"tick\" style=\"--x:28%\"></i><i class=\"tick\" style=\"--x:36%\"></i><i class=\"tick\" style=\"--x:44%\"></i><i class=\"tick\" style=\"--x:52%\"></i><i class=\"tick\" style=\"--x:60%\"></i><i class=\"tick\" style=\"--x:68%\"></i><i class=\"tick\" style=\"--x:76%\"></i><i class=\"tick\" style=\"--x:84%\"></i><i class=\"tick\" style=\"--x:92%\"></i>\n  <span class=\"veh\" style=\"--x:14%\"><b>4102</b></span>\n  <span class=\"veh\" style=\"--x:19%\"><b>4108</b></span>\n  <span class=\"veh late\" style=\"--x:46%\"><b>4114</b></span>\n  <span class=\"veh\" style=\"--x:71%\"><b>4120</b></span>\n  <span class=\"closed\" style=\"--x:56%;--w:8%\"></span>\n</div>\n<footer><span class=\"m\">Beckton</span><span class=\"m om\">Closed: Marsh Lane, both directions</span><span class=\"m\">Kirkstall</span></footer></section></section><section class=\"dz-mod\" data-mod=\"legs\" aria-label=\"Running legs\">\n<section class=\"lg\"><header><span class=\"k\">Running</span><span class=\"k\">4 vehicles</span></header>\n<ol>\n  <li><span class=\"cd\">4102</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 4 of 22 · driver M. Sandoval</span></div><span class=\"et\">on time</span></li>\n  <li class=\"bunch\"><span class=\"cd\">4108</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 5 of 22 · 90 s behind 4102</span></div><span class=\"et wn\">bunched</span></li>\n  <li class=\"late2\"><span class=\"cd\">4114</span><div><b>Beckton → Kirkstall</b><span class=\"m\">Stop 11 of 22 · held at closure</span></div><span class=\"et om\">+9 min</span></li>\n  <li><span class=\"cd\">4120</span><div><b>Kirkstall → Beckton</b><span class=\"m\">Stop 16 of 22 · driver J. Oyelaran</span></div><span class=\"et\">on time</span></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"log\" aria-label=\"Delay log\">\n<aside class=\"dl\"><header><span class=\"k\">Today</span><span class=\"k\">6 events</span></header>\n<ol>\n  <li class=\"om2\"><span class=\"t\">13:41</span><b>Marsh Lane closed</b><span class=\"m\">Burst main · diversion in force</span></li>\n  <li><span class=\"t\">12:08</span><b>4114 wheelchair boarding</b><span class=\"m\">+2 min at stop 9</span></li>\n  <li class=\"om2\"><span class=\"t\">10:52</span><b>Signal fault, Kirkstall Gate</b><span class=\"m\">Cleared 11:14</span></li>\n  <li><span class=\"t\">09:20</span><b>4102 driver change</b><span class=\"m\">On schedule</span></li>\n</ol></aside></section>\n</div>",
  "css": "\n.dz-blacktop-control { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding: 0 26px 26px; align-content: start; }\n.dz-blacktop-control .rb { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; padding: 16px 0 14px; border-bottom: 2px solid var(--border); }\n.dz-blacktop-control .rb h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 44px; margin: 0; }\n.dz-blacktop-control .m { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-control .clk { margin-left: auto; font-family: var(--pv-mono); font-size: 20px; letter-spacing: -.03em; }\n.dz-blacktop-control .rs { grid-column: 1 / -1; border: 2px solid var(--border); border-radius: var(--pv-radius); padding: 18px 20px 12px; }\n.dz-blacktop-control .track { position: relative; height: 96px; background: var(--card); border-radius: var(--pv-radius); }\n.dz-blacktop-control .tick { position: absolute; left: var(--x); top: 0; bottom: 0; width: 2px; background: var(--border); }\n.dz-blacktop-control .veh { position: absolute; left: var(--x); top: 26px; width: 44px; height: 44px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; border-radius: var(--pv-radius); }\n.dz-blacktop-control .veh b { font-family: var(--pv-mono); font-size: 11.5px; letter-spacing: -.02em; font-weight: 700; }\n.dz-blacktop-control .veh.late { background: var(--accent); color: var(--accent-foreground); }\n.dz-blacktop-control .closed { position: absolute; left: var(--x); width: var(--w); top: 0; bottom: 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 6px, transparent 6px 12px); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }\n.dz-blacktop-control .rs footer { display: flex; justify-content: space-between; padding-top: 10px; }\n.dz-blacktop-control .om { color: var(--accent); }\n.dz-blacktop-control .lg, .dz-blacktop-control .dl { border: 2px solid var(--border); border-radius: var(--pv-radius); padding: 14px 16px; }\n.dz-blacktop-control .lg header, .dz-blacktop-control .dl header { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--border); margin-bottom: 6px; }\n.dz-blacktop-control .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-control .lg ol, .dz-blacktop-control .dl ol { list-style: none; margin: 0; padding: 0; }\n.dz-blacktop-control .lg li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 84px; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0 6px 12px; border-bottom: var(--pv-bw) solid var(--border); border-left: 4px solid transparent; }\n.dz-blacktop-control .bunch { border-left-color: var(--primary); }\n.dz-blacktop-control .late2 { border-left-color: var(--accent); }\n.dz-blacktop-control .cd { font-family: var(--pv-mono); font-size: 11.5px; letter-spacing: -.02em; font-weight: 700; }\n.dz-blacktop-control .lg b { display: block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 17px; }\n.dz-blacktop-control .et { font-family: var(--pv-mono); font-size: 12px; text-align: right; color: var(--muted-foreground); }\n.dz-blacktop-control .wn { color: var(--primary); } .dz-blacktop-control .et.om { color: var(--accent); font-weight: 700; }\n.dz-blacktop-control .dl li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0 9px 12px; border-bottom: var(--pv-bw) solid var(--border); border-left: 4px solid transparent; }\n.dz-blacktop-control .om2 { border-left-color: var(--accent); }\n.dz-blacktop-control .t { grid-row: 1 / 3; font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); padding-top: 2px; }\n.dz-blacktop-control .dl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 15px; }\n@media (prefers-reduced-motion: reduce) { .dz-blacktop-control *, .dz-blacktop-control *::before, .dz-blacktop-control *::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"
}