{
  "id": "evidence-office-record-detail",
  "name": "Record Detail",
  "theme": "evidence-office",
  "category": "App Shell",
  "description": "A record page where the metadata sidebar is authoritative and the tabbed body is just one view of it.",
  "layout": "Header band with reference and status, then a 1fr/280px split; the right column is a definition list of fields with an inline edit affordance per row, and the left is tabbed content.",
  "modules": [
    {
      "key": "crumb",
      "name": "Record header",
      "html": "\n<header class=\"rec\">\n  <nav class=\"crumb\"><a href=\"#\">Cases</a><span>/</span><a href=\"#\">Assigned to you</a><span>/</span><b>C-4471</b></nav>\n  <div class=\"rec-t\"><h1>Bramley Lane, boundary treatment</h1><span class=\"badge\">Review</span></div>\n  <div class=\"rec-act\"><button type=\"button\">Request evidence</button><button type=\"button\">Reassign</button><button type=\"button\" class=\"pri\">Move to decision</button></div>\n</header>"
    },
    {
      "key": "tabs",
      "name": "Content tabs",
      "html": "\n<div class=\"tabs\" role=\"tablist\">\n  <button role=\"tab\" aria-selected=\"true\">Summary</button>\n  <button role=\"tab\" aria-selected=\"false\">Documents <span>14</span></button>\n  <button role=\"tab\" aria-selected=\"false\">Consultees <span>6</span></button>\n  <button role=\"tab\" aria-selected=\"false\">History</button>\n</div>\n<div class=\"pane\" role=\"tabpanel\">\n  <h2>Officer summary</h2>\n  <p>The application seeks retrospective consent for a 1.8m close-boarded fence forward of the principal elevation. Two objections have been received, both citing loss of open frontage character.</p>\n  <p>The street has a mixed boundary treatment, but no other property forward of the building line exceeds 1.0m. The proposal is not consistent with the prevailing pattern.</p>\n  <h2>Constraints</h2>\n  <ul class=\"cons\"><li><b>Conservation area</b> Bramley Central</li><li><b>Highway visibility</b> Splay affected at junction</li><li><b>Tree order</b> None applicable</li></ul>\n</div>"
    },
    {
      "key": "fields",
      "name": "Field sidebar",
      "html": "\n<aside class=\"side\">\n  <h3>Record</h3>\n  <dl>\n    <div><dt>Reference</dt><dd>C-4471</dd></div>\n    <div><dt>Received</dt><dd>13 June 2026</dd></div>\n    <div><dt>Target</dt><dd>08 August 2026</dd></div>\n    <div><dt>Officer</dt><dd>M. Okafor</dd></div>\n    <div><dt>Ward</dt><dd>Bramley &amp; Stanningley</dd></div>\n    <div><dt>Type</dt><dd>Householder, retrospective</dd></div>\n    <div><dt>Objections</dt><dd>2</dd></div>\n  </dl>\n  <div class=\"side-flag\">Past 8-week target in <b>14 days</b></div>\n</aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "evidence-office-record-detail",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-record-detail.json",
  "structure": "Header band with reference and status, then a 1fr/280px split; the right column is a definition list of fields with an inline edit affordance per row, and the left is tabbed content.",
  "html": "<div class=\"dz dz-evidence-office-record-detail\" data-design=\"evidence-office-record-detail\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"crumb\" aria-label=\"Record header\">\n<header class=\"rec\">\n  <nav class=\"crumb\"><a href=\"#\">Cases</a><span>/</span><a href=\"#\">Assigned to you</a><span>/</span><b>C-4471</b></nav>\n  <div class=\"rec-t\"><h1>Bramley Lane, boundary treatment</h1><span class=\"badge\">Review</span></div>\n  <div class=\"rec-act\"><button type=\"button\">Request evidence</button><button type=\"button\">Reassign</button><button type=\"button\" class=\"pri\">Move to decision</button></div>\n</header></section><div class=\"split\"><div class=\"left\"><section class=\"dz-mod\" data-mod=\"tabs\" aria-label=\"Content tabs\">\n<div class=\"tabs\" role=\"tablist\">\n  <button role=\"tab\" aria-selected=\"true\">Summary</button>\n  <button role=\"tab\" aria-selected=\"false\">Documents <span>14</span></button>\n  <button role=\"tab\" aria-selected=\"false\">Consultees <span>6</span></button>\n  <button role=\"tab\" aria-selected=\"false\">History</button>\n</div>\n<div class=\"pane\" role=\"tabpanel\">\n  <h2>Officer summary</h2>\n  <p>The application seeks retrospective consent for a 1.8m close-boarded fence forward of the principal elevation. Two objections have been received, both citing loss of open frontage character.</p>\n  <p>The street has a mixed boundary treatment, but no other property forward of the building line exceeds 1.0m. The proposal is not consistent with the prevailing pattern.</p>\n  <h2>Constraints</h2>\n  <ul class=\"cons\"><li><b>Conservation area</b> Bramley Central</li><li><b>Highway visibility</b> Splay affected at junction</li><li><b>Tree order</b> None applicable</li></ul>\n</div></section></div><section class=\"dz-mod\" data-mod=\"fields\" aria-label=\"Field sidebar\">\n<aside class=\"side\">\n  <h3>Record</h3>\n  <dl>\n    <div><dt>Reference</dt><dd>C-4471</dd></div>\n    <div><dt>Received</dt><dd>13 June 2026</dd></div>\n    <div><dt>Target</dt><dd>08 August 2026</dd></div>\n    <div><dt>Officer</dt><dd>M. Okafor</dd></div>\n    <div><dt>Ward</dt><dd>Bramley &amp; Stanningley</dd></div>\n    <div><dt>Type</dt><dd>Householder, retrospective</dd></div>\n    <div><dt>Objections</dt><dd>2</dd></div>\n  </dl>\n  <div class=\"side-flag\">Past 8-week target in <b>14 days</b></div>\n</aside></section></div>\n</div>",
  "css": "\n.dz-evidence-office-record-detail { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-evidence-office-record-detail .rec { padding: 18px 26px 14px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-record-detail .crumb { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted-foreground); margin-bottom: 10px; }\n.dz-evidence-office-record-detail .crumb a { color: var(--muted-foreground); text-decoration: none; }\n.dz-evidence-office-record-detail .crumb a:hover { color: var(--primary); }\n.dz-evidence-office-record-detail .crumb b { font-family: var(--pv-mono); font-weight: 400; color: var(--foreground); }\n.dz-evidence-office-record-detail .rec-t { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }\n.dz-evidence-office-record-detail .rec-t h1 { font-family: var(--pv-display); font-size: 24px; letter-spacing: -.025em; margin: 0; }\n.dz-evidence-office-record-detail .badge { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chart-2); border: var(--pv-bw) solid var(--chart-2); border-radius: var(--pv-radius-sm); padding: 3px 9px; }\n.dz-evidence-office-record-detail .rec-act { display: flex; gap: 8px; }\n.dz-evidence-office-record-detail .rec-act button { font: inherit; font-size: 12.5px; padding: 7px 15px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-record-detail .rec-act button:hover { background: var(--secondary); }\n.dz-evidence-office-record-detail .rec-act .pri { border-color: var(--primary); color: var(--primary); }\n.dz-evidence-office-record-detail .split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }\n.dz-evidence-office-record-detail .left { padding: 0 26px 26px; }\n.dz-evidence-office-record-detail .tabs { display: flex; gap: 0; border-bottom: var(--pv-bw) solid var(--border); margin-bottom: 18px; }\n.dz-evidence-office-record-detail .tabs button { font: inherit; font-size: 13px; padding: 11px 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted-foreground); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-evidence-office-record-detail .tabs button span { font-family: var(--pv-mono); font-size: 11px; margin-left: 5px; }\n.dz-evidence-office-record-detail .tabs button[aria-selected=\"true\"] { color: var(--primary); border-bottom-color: var(--primary); }\n.dz-evidence-office-record-detail .pane h2 { font-family: var(--pv-display); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 9px; color: var(--muted-foreground); }\n.dz-evidence-office-record-detail .pane h2 + p { margin-top: 0; }\n.dz-evidence-office-record-detail .pane h2:not(:first-child) { margin-top: 22px; }\n.dz-evidence-office-record-detail .pane p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.68; max-width: 58ch; }\n.dz-evidence-office-record-detail .cons { list-style: none; margin: 0; padding: 0; border-top: var(--pv-bw) solid var(--border); max-width: 48ch; }\n.dz-evidence-office-record-detail .cons li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: var(--pv-bw) solid var(--border); font-size: 13.5px; }\n.dz-evidence-office-record-detail .cons b { font-weight: 500; color: var(--muted-foreground); }\n.dz-evidence-office-record-detail .side { border-left: var(--pv-bw) solid var(--border); padding: 18px 20px; background: var(--muted); }\n.dz-evidence-office-record-detail .side h3 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 8px; }\n.dz-evidence-office-record-detail .side dl { margin: 0; }\n.dz-evidence-office-record-detail .side dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-record-detail .side dt { font-size: 12px; color: var(--muted-foreground); }\n.dz-evidence-office-record-detail .side dd { margin: 0; font-family: var(--pv-mono); font-size: 12px; text-align: right; }\n.dz-evidence-office-record-detail .side-flag { margin-top: 16px; padding: 10px 12px; border: var(--pv-bw) solid var(--destructive); border-radius: var(--pv-radius-sm); font-size: 12px; color: var(--destructive); }\n.dz-evidence-office-record-detail .side-flag b { font-family: var(--pv-mono); font-weight: 400; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-record-detail *, .dz-evidence-office-record-detail *::before, .dz-evidence-office-record-detail *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}