{
  "id": "reed-bed-catchment",
  "name": "Catchment",
  "theme": "reed-bed",
  "category": "Dashboard",
  "description": "Every site in a catchment as a ruled row carrying three level strips inline — the three determinands that matter for that site class — and no bare figures anywhere.",
  "layout": "A ruled site list with three inline level strips per row, a mid-tone ground, and a single card holding the catchment summary at the top right.",
  "modules": [
    {
      "key": "head",
      "name": "Catchment header",
      "html": "\n<header class=\"ch\"><div><span class=\"k\">Catchment · Kilcarn Water</span><h1>34 sites reporting</h1><p class=\"sub\">Last full sweep 12 March 06:00 · next 13 March 06:00</p></div><aside class=\"cd\"><span class=\"k\">Exceedances this month</span><p class=\"big\">7</p><div class=\"spl\"><span>Nitrate <b>4</b></span><span>Phosphate <b>2</b></span><span>Turbidity <b>1</b></span></div></aside></header>"
    },
    {
      "key": "sites",
      "name": "Site rows",
      "html": "\n<section class=\"st\"><div class=\"hd\"><span>Site</span><span>Grid ref</span><span>Nitrate</span><span>Phosphate</span><span>Turbidity</span><span>Sampled</span></div>\n<div class=\"rw\"><span class=\"nm\">Kilcarn Bridge</span><span class=\"gr\">N 4412 8830</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span><b class=\"fig\">28.1</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:31%\"></u></span><b class=\"fig\">0.061</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:52%\"></u></span><b class=\"fig\">14</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw over\"><span class=\"nm\">Ford Lane outfall</span><span class=\"gr\">N 4488 8712</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:81%\"></u></span><b class=\"fig\">51.4</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:40%\"></u></span><b class=\"fig\">0.088</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:60%\"></u></span><b class=\"fig\">22</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw\"><span class=\"nm\">Mill Weir</span><span class=\"gr\">N 4501 8904</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:36%\"></u></span><b class=\"fig\">22.7</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:22%\"></u></span><b class=\"fig\">0.042</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:41%\"></u></span><b class=\"fig\">9</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw\"><span class=\"nm\">Aughrim confluence</span><span class=\"gr\">N 4390 8998</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:50%\"></u></span><b class=\"fig\">31.9</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:35%\"></u></span><b class=\"fig\">0.067</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:48%\"></u></span><b class=\"fig\">12</b><em class=\"un\">NTU</em></span><span class=\"dt\">11 Mar</span></div>\n<div class=\"rw over\"><span class=\"nm\">Beech Hollow drain</span><span class=\"gr\">N 4520 8688</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span><b class=\"fig\">27.4</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:78%\"></u></span><b class=\"fig\">0.184</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:55%\"></u></span><b class=\"fig\">17</b><em class=\"un\">NTU</em></span><span class=\"dt\">11 Mar</span></div>\n</section>"
    },
    {
      "key": "legend",
      "name": "Reading legend",
      "html": "\n<footer class=\"lg\"><span class=\"k\">How to read a level</span><div class=\"ex\"><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span></span><p>The filled region is the permitted band. The mark is the current value. A value outside the band turns the mark and the figure red; the band itself does not change, because the band did not change.</p></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "reed-bed-catchment",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:12:17+09:00",
    "updatedAt": "2026-09-02T01:12:17+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reed-bed-catchment.json",
  "structure": "A ruled site list with three inline level strips per row, a mid-tone ground, and a single card holding the catchment summary at the top right.",
  "html": "<div class=\"dz dz-reed-bed-catchment\" data-design=\"reed-bed-catchment\" data-theme=\"reed-bed\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Catchment header\">\n<header class=\"ch\"><div><span class=\"k\">Catchment · Kilcarn Water</span><h1>34 sites reporting</h1><p class=\"sub\">Last full sweep 12 March 06:00 · next 13 March 06:00</p></div><aside class=\"cd\"><span class=\"k\">Exceedances this month</span><p class=\"big\">7</p><div class=\"spl\"><span>Nitrate <b>4</b></span><span>Phosphate <b>2</b></span><span>Turbidity <b>1</b></span></div></aside></header></section>\n<section class=\"dz-mod\" data-mod=\"sites\" aria-label=\"Site rows\">\n<section class=\"st\"><div class=\"hd\"><span>Site</span><span>Grid ref</span><span>Nitrate</span><span>Phosphate</span><span>Turbidity</span><span>Sampled</span></div>\n<div class=\"rw\"><span class=\"nm\">Kilcarn Bridge</span><span class=\"gr\">N 4412 8830</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span><b class=\"fig\">28.1</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:31%\"></u></span><b class=\"fig\">0.061</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:52%\"></u></span><b class=\"fig\">14</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw over\"><span class=\"nm\">Ford Lane outfall</span><span class=\"gr\">N 4488 8712</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:81%\"></u></span><b class=\"fig\">51.4</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:40%\"></u></span><b class=\"fig\">0.088</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:60%\"></u></span><b class=\"fig\">22</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw\"><span class=\"nm\">Mill Weir</span><span class=\"gr\">N 4501 8904</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:36%\"></u></span><b class=\"fig\">22.7</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:22%\"></u></span><b class=\"fig\">0.042</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:41%\"></u></span><b class=\"fig\">9</b><em class=\"un\">NTU</em></span><span class=\"dt\">12 Mar</span></div>\n<div class=\"rw\"><span class=\"nm\">Aughrim confluence</span><span class=\"gr\">N 4390 8998</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:50%\"></u></span><b class=\"fig\">31.9</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:35%\"></u></span><b class=\"fig\">0.067</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:48%\"></u></span><b class=\"fig\">12</b><em class=\"un\">NTU</em></span><span class=\"dt\">11 Mar</span></div>\n<div class=\"rw over\"><span class=\"nm\">Beech Hollow drain</span><span class=\"gr\">N 4520 8688</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span><b class=\"fig\">27.4</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:45%\"></i><u class=\"mk\" style=\"left:78%\"></u></span><b class=\"fig\">0.184</b><em class=\"un\">mg/l</em></span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:30%\"></i><u class=\"mk\" style=\"left:55%\"></u></span><b class=\"fig\">17</b><em class=\"un\">NTU</em></span><span class=\"dt\">11 Mar</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Reading legend\">\n<footer class=\"lg\"><span class=\"k\">How to read a level</span><div class=\"ex\"><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:44%\"></u></span></span><p>The filled region is the permitted band. The mark is the current value. A value outside the band turns the mark and the figure red; the band itself does not change, because the band did not change.</p></div></footer></section>\n</div>",
  "css": "\n.dz-reed-bed-catchment { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; }\n.dz-reed-bed-catchment .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-reed-bed-catchment .ch { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }\n.dz-reed-bed-catchment h1 { font-family: var(--pv-display); font-weight: 600; font-size: 50px; line-height: 1.1; letter-spacing: -.02em; margin: 6px 0 4px; }\n.dz-reed-bed-catchment .sub { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin: 0; }\n.dz-reed-bed-catchment .cd { margin-left: auto; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 16px 20px; min-width: 260px; }\n.dz-reed-bed-catchment .big { font-family: var(--pv-mono); font-size: 12.5px; font-size: 46px; line-height: 1.02; margin: 4px 0 10px; }\n.dz-reed-bed-catchment .spl { display: flex; gap: 16px; font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-reed-bed-catchment .spl b { color: var(--foreground); }\n.dz-reed-bed-catchment .hd, .dz-reed-bed-catchment .rw { display: grid; grid-template-columns: 1fr 110px 240px 240px 220px 70px; gap: 16px; align-items: center; }\n.dz-reed-bed-catchment .hd { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n.dz-reed-bed-catchment .rw { padding: 12px 0; border-bottom: 1px solid var(--border); }\n.dz-reed-bed-catchment .nm { font-size: 14.5px; }\n.dz-reed-bed-catchment .gr { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-reed-bed-catchment .dt { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n\n.dz-reed-bed-catchment .lv { display: flex; align-items: center; gap: 10px; }\n.dz-reed-bed-catchment .tk { position: relative; width: 140px; height: 6px; background: var(--secondary); border-radius: 3px; }\n.dz-reed-bed-catchment .bd2 { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 3px; }\n.dz-reed-bed-catchment .mk { position: absolute; top: -4px; width: 3px; height: 14px; background: var(--accent); border-radius: 1px; }\n.dz-reed-bed-catchment .over .mk { background: var(--destructive); }\n.dz-reed-bed-catchment .fig { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-reed-bed-catchment .over .fig { color: var(--destructive); }\n.dz-reed-bed-catchment .un { font-size: 13px; color: var(--muted-foreground); }\n.dz-reed-bed-catchment .lg { margin-top: 24px; }\n.dz-reed-bed-catchment .ex { display: flex; gap: 18px; align-items: flex-start; margin-top: 8px; }\n.dz-reed-bed-catchment .ex p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 68ch; }\n@media (prefers-reduced-motion: reduce) { .dz-reed-bed-catchment *, .dz-reed-bed-catchment *::before, .dz-reed-bed-catchment *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reed-bed.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Cousine:wght@400;500;600;700&display=swap"
}