{
  "id": "expert-lens-side-by-side",
  "name": "Side by Side",
  "theme": "expert-lens",
  "category": "Search & Browse",
  "description": "Two candidates evaluated against the same rubric, with a synchronised scroll so equivalent sections stay level.",
  "layout": "Two mirrored columns sharing one central rubric spine; the spine names the criterion and the columns carry the evidence, so the eye compares across a fixed axis.",
  "modules": [
    {
      "key": "heads",
      "name": "Candidate headers",
      "html": "\n<div class=\"ch2\">\n  <div class=\"cd\"><img src=\"{{ART lens}}\" alt=\"{{ARTALT lens}}\"><h2>Proposal A — Rebuild</h2><span>£1.4m · 14 months</span></div>\n  <div class=\"mid\"><span>Rubric</span></div>\n  <div class=\"cd\"><img src=\"{{ART specimen}}\" alt=\"{{ARTALT specimen}}\"><h2>Proposal B — Repair</h2><span>£620k · 5 months</span></div>\n</div>"
    },
    {
      "key": "rows",
      "name": "Rubric rows",
      "html": "\n<div class=\"rows\">\n  <div class=\"r\"><div class=\"c\"><b>Full design life restored.</b><p>New structure carries a 60-year design life with a current-code safety factor.</p></div><div class=\"sp\">Design life</div><div class=\"c\"><b>Extends by 15–20 years.</b><p>Repair addresses the observed movement but not the underlying drainage.</p></div></div>\n  <div class=\"r\"><div class=\"c\"><b>Reservoir out of service 14 months.</b><p>Requires full drawdown and a temporary supply agreement.</p></div><div class=\"sp\">Disruption</div><div class=\"c win\"><b>Out of service 6 weeks.</b><p>Partial drawdown only; no temporary supply needed.</p></div></div>\n  <div class=\"r\"><div class=\"c win\"><b>Low residual risk.</b><p>Nothing of the original east wall is retained.</p></div><div class=\"sp\">Residual risk</div><div class=\"c\"><b>Moderate, and not fully characterised.</b><p>Depends on the seasonal hypothesis, which the panel has not accepted.</p></div></div>\n  <div class=\"r\"><div class=\"c\"><b>Committed at award.</b><p>Fixed-price contract, one contractor, no staged decision point.</p></div><div class=\"sp\">Optionality</div><div class=\"c win\"><b>Preserves the choice.</b><p>Repair now does not preclude rebuild in 2032, and buys five years of monitoring.</p></div></div>\n</div>"
    },
    {
      "key": "call",
      "name": "Recommendation",
      "html": "\n<footer class=\"rec\"><span class=\"k\">Recommendation</span><p>Proposal B, with a monitoring condition. The rebuild is the better structure and the worse decision — it spends four times the money to close an option we have no evidence we need to close yet.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "expert-lens-side-by-side",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:34:32+09:00",
    "updatedAt": "2026-08-29T18:34:32+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/expert-lens-side-by-side.json",
  "structure": "Two mirrored columns sharing one central rubric spine; the spine names the criterion and the columns carry the evidence, so the eye compares across a fixed axis.",
  "html": "<div class=\"dz dz-expert-lens-side-by-side\" data-design=\"expert-lens-side-by-side\" data-theme=\"expert-lens\">\n<section class=\"dz-mod\" data-mod=\"heads\" aria-label=\"Candidate headers\">\n<div class=\"ch2\">\n  <div class=\"cd\"><img src=\"https://designlookbook.dev/assets/img/expert-lens-lens.webp\" alt=\"Macro of a camera lens element catching a jade and coral flare\"><h2>Proposal A — Rebuild</h2><span>£1.4m · 14 months</span></div>\n  <div class=\"mid\"><span>Rubric</span></div>\n  <div class=\"cd\"><img src=\"https://designlookbook.dev/assets/img/expert-lens-specimen.webp\" alt=\"Small objects laid out on black felt under raking light\"><h2>Proposal B — Repair</h2><span>£620k · 5 months</span></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Rubric rows\">\n<div class=\"rows\">\n  <div class=\"r\"><div class=\"c\"><b>Full design life restored.</b><p>New structure carries a 60-year design life with a current-code safety factor.</p></div><div class=\"sp\">Design life</div><div class=\"c\"><b>Extends by 15–20 years.</b><p>Repair addresses the observed movement but not the underlying drainage.</p></div></div>\n  <div class=\"r\"><div class=\"c\"><b>Reservoir out of service 14 months.</b><p>Requires full drawdown and a temporary supply agreement.</p></div><div class=\"sp\">Disruption</div><div class=\"c win\"><b>Out of service 6 weeks.</b><p>Partial drawdown only; no temporary supply needed.</p></div></div>\n  <div class=\"r\"><div class=\"c win\"><b>Low residual risk.</b><p>Nothing of the original east wall is retained.</p></div><div class=\"sp\">Residual risk</div><div class=\"c\"><b>Moderate, and not fully characterised.</b><p>Depends on the seasonal hypothesis, which the panel has not accepted.</p></div></div>\n  <div class=\"r\"><div class=\"c\"><b>Committed at award.</b><p>Fixed-price contract, one contractor, no staged decision point.</p></div><div class=\"sp\">Optionality</div><div class=\"c win\"><b>Preserves the choice.</b><p>Repair now does not preclude rebuild in 2032, and buys five years of monitoring.</p></div></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"call\" aria-label=\"Recommendation\">\n<footer class=\"rec\"><span class=\"k\">Recommendation</span><p>Proposal B, with a monitoring condition. The rebuild is the better structure and the worse decision — it spends four times the money to close an option we have no evidence we need to close yet.</p></footer></section>\n</div>",
  "css": "\n.dz-expert-lens-side-by-side { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 28px; }\n.dz-expert-lens-side-by-side .ch2 { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: end; padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--border); }\n.dz-expert-lens-side-by-side .cd img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--pv-radius-sm); display: block; filter: var(--img-filter); margin-bottom: 12px; }\n.dz-expert-lens-side-by-side .cd h2 { font-family: var(--pv-display); font-size: 20px; font-weight: 500; margin: 0 0 4px; }\n.dz-expert-lens-side-by-side .cd span { font-family: var(--pv-mono); font-size: 12px; color: var(--primary); }\n.dz-expert-lens-side-by-side .mid { text-align: center; padding-bottom: 8px; }\n.dz-expert-lens-side-by-side .mid span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-expert-lens-side-by-side .r { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: stretch; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--border); }\n.dz-expert-lens-side-by-side .c { background: var(--card); border-radius: var(--pv-radius); padding: 14px 16px; }\n.dz-expert-lens-side-by-side .c.win { box-shadow: inset 0 -2px 0 var(--primary); }\n.dz-expert-lens-side-by-side .c b { display: block; font-size: 14px; margin-bottom: 6px; }\n.dz-expert-lens-side-by-side .c p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-expert-lens-side-by-side .sp { display: grid; place-items: center; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-expert-lens-side-by-side .rec { margin-top: 20px; background: var(--card); border-radius: var(--pv-radius); padding: 18px 22px; box-shadow: inset 3px 0 0 var(--primary); }\n.dz-expert-lens-side-by-side .k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }\n.dz-expert-lens-side-by-side .rec p { margin: 8px 0 0; font-family: var(--pv-display); font-size: 18px; line-height: 1.56; max-width: 72ch; }\n@media (prefers-reduced-motion: reduce) { .dz-expert-lens-side-by-side *, .dz-expert-lens-side-by-side *::before, .dz-expert-lens-side-by-side *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/expert-lens.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}