{
  "id": "rust-freight-defect",
  "name": "Defect Report",
  "theme": "rust-freight",
  "category": "Settings & Forms",
  "description": "A walkaround defect form built for a phone held in a cold hand: big targets, one section at a time, and a photograph slot per item.",
  "layout": "A 420px single column of 56px-tall check rows with three-state controls, and a defect detail block that expands inline under the row that failed.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">Daily walkaround</span><h1>PN71 KVX</h1><span class=\"m\">4 Sep · 05:52 · J. Oyelaran</span></header>"
    },
    {
      "key": "checks",
      "name": "Check rows",
      "html": "\n<form class=\"ck\">\n  <label class=\"rw\"><span>Lights and indicators</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>Tyres and wheel fixings</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw fail\"><span>Mirrors and glass</span><div class=\"tri\"><button type=\"button\" class=\"ok\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad on\">Defect</button></div></label>\n  <label class=\"rw\"><span>Brake lines and couplings</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>Load security equipment</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>AdBlue and fuel level</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n</form>"
    },
    {
      "key": "defect",
      "name": "Defect detail",
      "html": "\n<section class=\"df\"><span class=\"k\">Defect · mirrors and glass</span>\n<textarea rows=\"3\">Nearside kerb mirror cracked across the lower third. Still usable but will not pass. Reported to workshop.</textarea>\n<div class=\"ph\"><figure><img src=\"{{ART strap}}\" alt=\"{{ARTALT strap}}\"></figure><button type=\"button\" class=\"add\">Add photograph</button></div>\n<div class=\"sev\"><span class=\"k\">Severity</span><button type=\"button\">Monitor</button><button type=\"button\" class=\"on\">Repair soon</button><button type=\"button\">Do not drive</button></div></section>"
    },
    {
      "key": "submit",
      "name": "Submit",
      "html": "\n<footer class=\"sb\"><span class=\"m\">One defect recorded. The vehicle is roadworthy and may be driven.</span><button type=\"button\" class=\"go\">Sign and submit</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "rust-freight-defect",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:08:33+09:00",
    "updatedAt": "2026-09-01T20:08:33+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/rust-freight-defect.json",
  "structure": "A 420px single column of 56px-tall check rows with three-state controls, and a defect detail block that expands inline under the row that failed.",
  "html": "<div class=\"dz dz-rust-freight-defect\" data-design=\"rust-freight-defect\" data-theme=\"rust-freight\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">Daily walkaround</span><h1>PN71 KVX</h1><span class=\"m\">4 Sep · 05:52 · J. Oyelaran</span></header></section>\n<section class=\"dz-mod\" data-mod=\"checks\" aria-label=\"Check rows\">\n<form class=\"ck\">\n  <label class=\"rw\"><span>Lights and indicators</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>Tyres and wheel fixings</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw fail\"><span>Mirrors and glass</span><div class=\"tri\"><button type=\"button\" class=\"ok\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad on\">Defect</button></div></label>\n  <label class=\"rw\"><span>Brake lines and couplings</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>Load security equipment</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n  <label class=\"rw\"><span>AdBlue and fuel level</span><div class=\"tri\"><button type=\"button\" class=\"ok on\">OK</button><button type=\"button\" class=\"na\">N/A</button><button type=\"button\" class=\"bad\">Defect</button></div></label>\n</form></section>\n<section class=\"dz-mod\" data-mod=\"defect\" aria-label=\"Defect detail\">\n<section class=\"df\"><span class=\"k\">Defect · mirrors and glass</span>\n<textarea rows=\"3\">Nearside kerb mirror cracked across the lower third. Still usable but will not pass. Reported to workshop.</textarea>\n<div class=\"ph\"><figure><img src=\"https://designlookbook.dev/assets/img/rust-freight-strap.webp\" alt=\"A ratchet strap and hook against a stone-grey deck\"></figure><button type=\"button\" class=\"add\">Add photograph</button></div>\n<div class=\"sev\"><span class=\"k\">Severity</span><button type=\"button\">Monitor</button><button type=\"button\" class=\"on\">Repair soon</button><button type=\"button\">Do not drive</button></div></section></section>\n<section class=\"dz-mod\" data-mod=\"submit\" aria-label=\"Submit\">\n<footer class=\"sb\"><span class=\"m\">One defect recorded. The vehicle is roadworthy and may be driven.</span><button type=\"button\" class=\"go\">Sign and submit</button></footer></section>\n</div>",
  "css": "\n.dz-rust-freight-defect { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; padding: 24px 22px 28px; row-gap: 20px; align-content: start; }\n.dz-rust-freight-defect .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); display: block; }\n.dz-rust-freight-defect .hd h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 44px; margin: 6px 0 4px; }\n.dz-rust-freight-defect .m { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }\n.dz-rust-freight-defect .ck { border-top: 2px solid var(--foreground); }\n.dz-rust-freight-defect .rw { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0 8px 14px; border-bottom: 2px solid var(--foreground); border-left: 4px solid transparent; }\n.dz-rust-freight-defect .rw > span { font-size: 16px; }\n.dz-rust-freight-defect .fail { border-left-color: var(--primary); background: var(--card); }\n.dz-rust-freight-defect .tri { display: flex; }\n.dz-rust-freight-defect .tri button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 14px; background: transparent; color: var(--muted-foreground); border: 2px solid var(--border); border-right-width: 0; padding: 9px 14px; cursor: pointer; }\n.dz-rust-freight-defect .tri button:last-child { border-right-width: 2px; }\n.dz-rust-freight-defect .ok.on { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }\n.dz-rust-freight-defect .bad.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-rust-freight-defect .na.on { background: var(--foreground); color: var(--background); }\n.dz-rust-freight-defect .df { border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); border-left-width: 8px; border-left-color: var(--primary); background: var(--card); padding: 14px 16px; }\n.dz-rust-freight-defect textarea { font: inherit; font-size: 15px; width: 100%; border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--background); color: var(--foreground); padding: 10px 12px; margin: 8px 0 12px; resize: vertical; }\n.dz-rust-freight-defect textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-rust-freight-defect .ph { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }\n.dz-rust-freight-defect .ph figure { margin: 0; }\n.dz-rust-freight-defect .ph img { width: 84px; height: 84px; object-fit: cover; display: block; border: 2px solid var(--foreground); filter: var(--img-filter); }\n.dz-rust-freight-defect .add { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 14px; background: transparent; color: var(--foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 10px 16px; cursor: pointer; }\n.dz-rust-freight-defect .sev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.dz-rust-freight-defect .sev button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 13px; background: transparent; color: var(--muted-foreground); border: 2px solid var(--border); border-radius: var(--pv-radius-md); padding: 8px 14px; cursor: pointer; }\n.dz-rust-freight-defect .sev .on { border-color: var(--primary); color: var(--primary); }\n.dz-rust-freight-defect .sb { display: flex; align-items: center; gap: 16px; }\n.dz-rust-freight-defect .sb .m { flex: 1; line-height: 1.4; }\n.dz-rust-freight-defect .go { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 18px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: var(--pv-radius-md); padding: 13px 26px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-rust-freight-defect *, .dz-rust-freight-defect *::before, .dz-rust-freight-defect *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/rust-freight.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Courier+Prime:wght@400;500;600;700&display=swap"
}