{
  "id": "evidence-office-variance-report",
  "name": "Variance Report",
  "theme": "evidence-office",
  "category": "Data & Reports",
  "description": "A report page laid out for printing: numbered sections, one figure with a caption above it, and footnotes that actually correspond.",
  "layout": "Two-column print grid — a 140px numbered-section gutter on the left and a 60-character measure on the right; the figure breaks out of the measure to full width.",
  "modules": [
    {
      "key": "title",
      "name": "Report title block",
      "html": "\n<header class=\"tb\">\n  <span class=\"tb-cls\">Official · Internal</span>\n  <h1>Quarter 1 variance against plan</h1>\n  <dl class=\"tb-meta\"><div><dt>Reference</dt><dd>FIN-2026-Q1-04</dd></div><div><dt>Author</dt><dd>M. Okafor</dd></div><div><dt>Circulated</dt><dd>14 July 2026</dd></div></dl>\n</header>"
    },
    {
      "key": "summary",
      "name": "Section 1 — Summary",
      "html": "\n<section class=\"sec\"><span class=\"sec-n\">1</span><div class=\"sec-b\">\n  <h2>Summary</h2>\n  <p>Spend against plan closed the quarter 4.1% under, driven almost entirely by a single deferred software renewal rather than by any change in operating pattern.</p>\n  <p>Excluding that renewal, the position is 0.6% over, which is inside tolerance and consistent with the previous two quarters.</p>\n</div></section>"
    },
    {
      "key": "figure",
      "name": "Figure 1",
      "html": "\n<figure class=\"fig\">\n  <figcaption><span>Figure 1</span> Monthly spend against plan, cost centre 4120</figcaption>\n  <div class=\"bars\">\n    <div class=\"bg\"><i style=\"height:62%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>Apr</span></div>\n    <div class=\"bg\"><i style=\"height:78%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>May</span></div>\n    <div class=\"bg\"><i style=\"height:41%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>Jun</span></div>\n  </div>\n  <p class=\"fig-key\"><i class=\"sw sw-a\"></i> Actual <i class=\"sw sw-b\"></i> Plan</p>\n</figure>"
    },
    {
      "key": "detail",
      "name": "Section 2 — Detail",
      "html": "\n<section class=\"sec\"><span class=\"sec-n\">2</span><div class=\"sec-b\">\n  <h2>Detail</h2>\n  <p>June is the outlier. The case-management renewal<sup>1</sup> was expected on 12 June and has slipped to the following quarter following a procurement query.</p>\n  <p>Legal opinion costs rose 31% on the previous quarter,<sup>2</sup> concentrated in two listed-consent cases. This is expected to be non-recurring.</p>\n</div></section>"
    },
    {
      "key": "notes",
      "name": "Footnotes",
      "html": "\n<footer class=\"fn\"><p><sup>1</sup> £1,980.00, JV-1171, deferred to Q2 pending clarification of the framework schedule.</p><p><sup>2</sup> £4,850.00 against £3,700.00. Both cases remain open at the time of writing.</p></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "evidence-office-variance-report",
    "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-variance-report.json",
  "structure": "Two-column print grid — a 140px numbered-section gutter on the left and a 60-character measure on the right; the figure breaks out of the measure to full width.",
  "html": "<div class=\"dz dz-evidence-office-variance-report\" data-design=\"evidence-office-variance-report\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"title\" aria-label=\"Report title block\">\n<header class=\"tb\">\n  <span class=\"tb-cls\">Official · Internal</span>\n  <h1>Quarter 1 variance against plan</h1>\n  <dl class=\"tb-meta\"><div><dt>Reference</dt><dd>FIN-2026-Q1-04</dd></div><div><dt>Author</dt><dd>M. Okafor</dd></div><div><dt>Circulated</dt><dd>14 July 2026</dd></div></dl>\n</header></section>\n<section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Section 1 — Summary\">\n<section class=\"sec\"><span class=\"sec-n\">1</span><div class=\"sec-b\">\n  <h2>Summary</h2>\n  <p>Spend against plan closed the quarter 4.1% under, driven almost entirely by a single deferred software renewal rather than by any change in operating pattern.</p>\n  <p>Excluding that renewal, the position is 0.6% over, which is inside tolerance and consistent with the previous two quarters.</p>\n</div></section></section>\n<section class=\"dz-mod\" data-mod=\"figure\" aria-label=\"Figure 1\">\n<figure class=\"fig\">\n  <figcaption><span>Figure 1</span> Monthly spend against plan, cost centre 4120</figcaption>\n  <div class=\"bars\">\n    <div class=\"bg\"><i style=\"height:62%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>Apr</span></div>\n    <div class=\"bg\"><i style=\"height:78%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>May</span></div>\n    <div class=\"bg\"><i style=\"height:41%\"></i><i class=\"pl\" style=\"height:70%\"></i><span>Jun</span></div>\n  </div>\n  <p class=\"fig-key\"><i class=\"sw sw-a\"></i> Actual <i class=\"sw sw-b\"></i> Plan</p>\n</figure></section>\n<section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Section 2 — Detail\">\n<section class=\"sec\"><span class=\"sec-n\">2</span><div class=\"sec-b\">\n  <h2>Detail</h2>\n  <p>June is the outlier. The case-management renewal<sup>1</sup> was expected on 12 June and has slipped to the following quarter following a procurement query.</p>\n  <p>Legal opinion costs rose 31% on the previous quarter,<sup>2</sup> concentrated in two listed-consent cases. This is expected to be non-recurring.</p>\n</div></section></section>\n<section class=\"dz-mod\" data-mod=\"notes\" aria-label=\"Footnotes\">\n<footer class=\"fn\"><p><sup>1</sup> £1,980.00, JV-1171, deferred to Q2 pending clarification of the framework schedule.</p><p><sup>2</sup> £4,850.00 against £3,700.00. Both cases remain open at the time of writing.</p></footer></section>\n</div>",
  "css": "\n.dz-evidence-office-variance-report { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px 40px 30px; }\n.dz-evidence-office-variance-report .tb-cls { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--destructive); }\n.dz-evidence-office-variance-report .tb h1 { font-family: var(--pv-display); font-size: 30px; letter-spacing: -.025em; margin: 8px 0 16px; max-width: 24ch; }\n.dz-evidence-office-variance-report .tb-meta { display: flex; gap: 34px; margin: 0 0 26px; padding: 12px 0; border-top: var(--pv-bw) solid var(--foreground); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-variance-report .tb-meta dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-variance-report .tb-meta dd { margin: 3px 0 0; font-family: var(--pv-mono); font-size: 13px; }\n.dz-evidence-office-variance-report .sec { display: grid; grid-template-columns: 140px minmax(0, 34rem); gap: 0; margin-bottom: 22px; }\n.dz-evidence-office-variance-report .sec-n { font-family: var(--pv-mono); font-size: 30px; color: var(--muted-foreground); line-height: 1; }\n.dz-evidence-office-variance-report .sec-b h2 { font-family: var(--pv-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; padding-bottom: 6px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-variance-report .sec-b p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.68; }\n.dz-evidence-office-variance-report .sec-b sup { font-family: var(--pv-mono); font-size: 10px; color: var(--primary); }\n.dz-evidence-office-variance-report .fig { margin: 4px 0 26px; padding: 16px 0; border-top: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-variance-report .fig figcaption { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 14px; }\n.dz-evidence-office-variance-report .fig figcaption span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--foreground); margin-right: 8px; }\n.dz-evidence-office-variance-report .bars { display: flex; gap: 40px; align-items: flex-end; height: 120px; padding-left: 4px; }\n.dz-evidence-office-variance-report .bg { position: relative; width: 90px; height: 100%; display: flex; align-items: flex-end; gap: 6px; }\n.dz-evidence-office-variance-report .bg i { display: block; width: 26px; background: var(--primary); }\n.dz-evidence-office-variance-report .bg .pl { background: none; border: var(--pv-bw) dashed var(--muted-foreground); }\n.dz-evidence-office-variance-report .bg span { position: absolute; bottom: -20px; left: 0; font-size: 11px; color: var(--muted-foreground); }\n.dz-evidence-office-variance-report .fig-key { margin: 30px 0 0; font-size: 11.5px; color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; }\n.dz-evidence-office-variance-report .sw { display: inline-block; width: 11px; height: 11px; }\n.dz-evidence-office-variance-report .sw-a { background: var(--primary); }\n.dz-evidence-office-variance-report .sw-b { border: var(--pv-bw) dashed var(--muted-foreground); }\n.dz-evidence-office-variance-report .fn { max-width: 34rem; margin-left: 140px; padding-top: 12px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-variance-report .fn p { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-evidence-office-variance-report .fn sup { font-family: var(--pv-mono); color: var(--primary); margin-right: 4px; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-variance-report *, .dz-evidence-office-variance-report *::before, .dz-evidence-office-variance-report *::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"
}