{
  "id": "field-survey-readings",
  "name": "Gauge Readings",
  "theme": "field-survey",
  "category": "Data & Reports",
  "description": "A readings report where the forecast peak is a hard stepped line rather than a smooth curve, matching a system that refuses to imply more precision than it has.",
  "layout": "A wide stepped chart in an addressable cell above a fully ruled reading table, with each panel referenced in its top-left corner.",
  "modules": [
    {
      "key": "chart",
      "name": "Stepped chart",
      "html": "\n<section class=\"ch\"><header><span class=\"rf\">CH-01</span><h2>River level, Kilcarn gauge</h2><span class=\"ct\">Observed and forecast, 24 h</span></header>\n<div class=\"plot\">\n  <div class=\"steps\"><i style=\"--h:38%\"></i><i style=\"--h:41%\"></i><i style=\"--h:46%\"></i><i style=\"--h:52%\"></i><i style=\"--h:58%\"></i><i style=\"--h:64%\"></i><i style=\"--h:71%\"></i><i style=\"--h:78%\"></i><i style=\"--h:84%\"></i><i class=\"now\" style=\"--h:88%\"></i><i class=\"fc\" style=\"--h:93%\"></i><i class=\"fc\" style=\"--h:97%\"></i><i class=\"fc pk\" style=\"--h:100%\"></i><i class=\"fc\" style=\"--h:96%\"></i><i class=\"fc\" style=\"--h:89%\"></i><i class=\"fc\" style=\"--h:80%\"></i></div>\n  <span class=\"thr\"><i></i><b>Flood defence level · 4.80 m</b></span>\n</div>\n<div class=\"ax\"><span>03:00</span><span>07:00</span><span>11:00</span><span>15:00</span><span>19:00</span></div>\n<p class=\"nt\">Forecast peak <b class=\"n\">4.91 m</b> at <b class=\"n\">11:40</b>, which is <b class=\"n\">0.11 m</b> above the defence level. Steps are hourly because the model outputs hourly; a smooth line would imply a precision the model does not have.</p></section>"
    },
    {
      "key": "table",
      "name": "Reading table",
      "html": "\n<section class=\"rt\"><header><span class=\"rf\">CH-02</span><h2>Gauges in sector</h2></header>\n<table><thead><tr><th>Gauge</th><th>Grid</th><th>Now</th><th>Peak</th><th>Defence</th><th>Margin</th><th>Trend</th></tr></thead>\n<tbody>\n<tr class=\"over\"><td>Kilcarn</td><td class=\"n\">NH 2032 2311</td><td class=\"n\">4.62</td><td class=\"n\">4.91</td><td class=\"n\">4.80</td><td class=\"n bad\">−0.11</td><td>Rising</td></tr>\n<tr><td>Mill Bridge</td><td class=\"n\">NH 2018 2340</td><td class=\"n\">3.88</td><td class=\"n\">4.10</td><td class=\"n\">4.40</td><td class=\"n\">+0.30</td><td>Rising</td></tr>\n<tr><td>Beckton Way</td><td class=\"n\">NH 2002 2380</td><td class=\"n\">2.94</td><td class=\"n\">3.11</td><td class=\"n\">3.90</td><td class=\"n\">+0.79</td><td>Rising</td></tr>\n<tr class=\"ann\"><td>Riverside Row</td><td class=\"n\">NH 2044 2298</td><td class=\"n\">4.41</td><td class=\"n\">4.70</td><td class=\"n\">4.55</td><td class=\"n bad\">−0.15</td><td>Rising</td></tr>\n<tr><td>Kilcarn Terrace</td><td class=\"n\">NH 1988 2360</td><td class=\"n\">1.02</td><td class=\"n\">1.14</td><td class=\"n\">2.60</td><td class=\"n\">+1.46</td><td>Steady</td></tr>\n</tbody></table>\n<p class=\"nt\">Riverside Row is marked: the gauge there has been reading 0.08 m high since the January service and the true margin is probably −0.07 m.</p></section>"
    },
    {
      "key": "legend",
      "name": "Threshold legend",
      "html": "\n<aside class=\"lg\"><header><span class=\"rf\">CH-03</span><h2>Reading this</h2></header>\n<ul>\n  <li><i class=\"sw obs\"></i><div><b>Observed</b><span>Gauge reading, hourly mean. Accurate to ±0.02 m when serviced.</span></div></li>\n  <li><i class=\"sw fcs\"></i><div><b>Forecast</b><span>Model output, hourly steps. No confidence interval is published for this reach.</span></div></li>\n  <li><i class=\"sw pks\"></i><div><b>Above defence</b><span>Predicted to exceed the defence level. Triggers a sector notice automatically.</span></div></li>\n  <li><i class=\"sw mkd\"></i><div><b>Marked</b><span>A human has recorded something the gauge cannot know.</span></div></li>\n</ul></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "field-survey-readings",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:58:03+09:00",
    "updatedAt": "2026-09-01T23:58:03+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/field-survey-readings.json",
  "structure": "A wide stepped chart in an addressable cell above a fully ruled reading table, with each panel referenced in its top-left corner.",
  "html": "<div class=\"dz dz-field-survey-readings\" data-design=\"field-survey-readings\" data-theme=\"field-survey\">\n<section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Stepped chart\">\n<section class=\"ch\"><header><span class=\"rf\">CH-01</span><h2>River level, Kilcarn gauge</h2><span class=\"ct\">Observed and forecast, 24 h</span></header>\n<div class=\"plot\">\n  <div class=\"steps\"><i style=\"--h:38%\"></i><i style=\"--h:41%\"></i><i style=\"--h:46%\"></i><i style=\"--h:52%\"></i><i style=\"--h:58%\"></i><i style=\"--h:64%\"></i><i style=\"--h:71%\"></i><i style=\"--h:78%\"></i><i style=\"--h:84%\"></i><i class=\"now\" style=\"--h:88%\"></i><i class=\"fc\" style=\"--h:93%\"></i><i class=\"fc\" style=\"--h:97%\"></i><i class=\"fc pk\" style=\"--h:100%\"></i><i class=\"fc\" style=\"--h:96%\"></i><i class=\"fc\" style=\"--h:89%\"></i><i class=\"fc\" style=\"--h:80%\"></i></div>\n  <span class=\"thr\"><i></i><b>Flood defence level · 4.80 m</b></span>\n</div>\n<div class=\"ax\"><span>03:00</span><span>07:00</span><span>11:00</span><span>15:00</span><span>19:00</span></div>\n<p class=\"nt\">Forecast peak <b class=\"n\">4.91 m</b> at <b class=\"n\">11:40</b>, which is <b class=\"n\">0.11 m</b> above the defence level. Steps are hourly because the model outputs hourly; a smooth line would imply a precision the model does not have.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Reading table\">\n<section class=\"rt\"><header><span class=\"rf\">CH-02</span><h2>Gauges in sector</h2></header>\n<table><thead><tr><th>Gauge</th><th>Grid</th><th>Now</th><th>Peak</th><th>Defence</th><th>Margin</th><th>Trend</th></tr></thead>\n<tbody>\n<tr class=\"over\"><td>Kilcarn</td><td class=\"n\">NH 2032 2311</td><td class=\"n\">4.62</td><td class=\"n\">4.91</td><td class=\"n\">4.80</td><td class=\"n bad\">−0.11</td><td>Rising</td></tr>\n<tr><td>Mill Bridge</td><td class=\"n\">NH 2018 2340</td><td class=\"n\">3.88</td><td class=\"n\">4.10</td><td class=\"n\">4.40</td><td class=\"n\">+0.30</td><td>Rising</td></tr>\n<tr><td>Beckton Way</td><td class=\"n\">NH 2002 2380</td><td class=\"n\">2.94</td><td class=\"n\">3.11</td><td class=\"n\">3.90</td><td class=\"n\">+0.79</td><td>Rising</td></tr>\n<tr class=\"ann\"><td>Riverside Row</td><td class=\"n\">NH 2044 2298</td><td class=\"n\">4.41</td><td class=\"n\">4.70</td><td class=\"n\">4.55</td><td class=\"n bad\">−0.15</td><td>Rising</td></tr>\n<tr><td>Kilcarn Terrace</td><td class=\"n\">NH 1988 2360</td><td class=\"n\">1.02</td><td class=\"n\">1.14</td><td class=\"n\">2.60</td><td class=\"n\">+1.46</td><td>Steady</td></tr>\n</tbody></table>\n<p class=\"nt\">Riverside Row is marked: the gauge there has been reading 0.08 m high since the January service and the true margin is probably −0.07 m.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Threshold legend\">\n<aside class=\"lg\"><header><span class=\"rf\">CH-03</span><h2>Reading this</h2></header>\n<ul>\n  <li><i class=\"sw obs\"></i><div><b>Observed</b><span>Gauge reading, hourly mean. Accurate to ±0.02 m when serviced.</span></div></li>\n  <li><i class=\"sw fcs\"></i><div><b>Forecast</b><span>Model output, hourly steps. No confidence interval is published for this reach.</span></div></li>\n  <li><i class=\"sw pks\"></i><div><b>Above defence</b><span>Predicted to exceed the defence level. Triggers a sector notice automatically.</span></div></li>\n  <li><i class=\"sw mkd\"></i><div><b>Marked</b><span>A human has recorded something the gauge cannot know.</span></div></li>\n</ul></aside></section>\n</div>",
  "css": "\n.dz-field-survey-readings .lg { border: 1px solid var(--border); padding: 16px; }\n.dz-field-survey-readings .lg ul { list-style: none; margin: 0; padding: 0; }\n.dz-field-survey-readings .lg li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }\n.dz-field-survey-readings .sw { width: 18px; height: 18px; display: block; margin-top: 2px; }\n.dz-field-survey-readings .sw.obs { background: var(--muted); }\n.dz-field-survey-readings .sw.fcs { background: repeating-linear-gradient(45deg, var(--primary) 0 4px, transparent 4px 8px); }\n.dz-field-survey-readings .sw.pks { background: var(--destructive); }\n.dz-field-survey-readings .sw.mkd { background: var(--accent); }\n.dz-field-survey-readings .lg b { display: block; font-size: 13.5px; }\n.dz-field-survey-readings .lg span { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }\n.dz-field-survey-readings { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px 24px; }\n.dz-field-survey-readings .rf { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .02em; color: var(--muted-foreground); display: block; }\n.dz-field-survey-readings .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 12.5px; }\n.dz-field-survey-readings header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }\n.dz-field-survey-readings h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: .01em; font-size: 23px; margin: 0; }\n.dz-field-survey-readings .ct { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); margin-left: auto; }\n.dz-field-survey-readings .ch, .dz-field-survey-readings .rt { border: 1px solid var(--border); padding: 16px; margin-bottom: 18px; }\n.dz-field-survey-readings .plot { position: relative; }\n.dz-field-survey-readings .steps { display: flex; gap: 3px; align-items: flex-end; height: 180px; }\n.dz-field-survey-readings .steps i { flex: 1; height: var(--h); background: var(--muted); display: block; }\n.dz-field-survey-readings .steps .now { background: var(--primary); }\n.dz-field-survey-readings .steps .fc { background: repeating-linear-gradient(45deg, var(--primary) 0 4px, transparent 4px 8px); }\n.dz-field-survey-readings .steps .pk { background: var(--destructive); }\n.dz-field-survey-readings .thr { position: absolute; left: 0; right: 0; bottom: 84%; }\n.dz-field-survey-readings .thr i { display: block; height: 2px; background: var(--destructive); }\n.dz-field-survey-readings .thr b { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); color: var(--destructive); position: absolute; right: 0; top: -16px; }\n.dz-field-survey-readings .ax { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--pv-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 11px; color: var(--muted-foreground); }\n.dz-field-survey-readings .nt { margin: 14px 0 0; font-size: 13px; line-height: 1.55; max-width: 64ch; }\n.dz-field-survey-readings table { width: 100%; border-collapse: collapse; }\n.dz-field-survey-readings th { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); text-align: left; padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); }\n.dz-field-survey-readings td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }\n.dz-field-survey-readings tr.over td { background: color-mix(in oklab, var(--destructive) 12%, transparent); }\n.dz-field-survey-readings tr.ann { border-left: 3px solid var(--accent); }\n.dz-field-survey-readings tr.ann td:first-child { padding-left: 10px; }\n.dz-field-survey-readings .bad { color: var(--destructive); font-weight: 700; }\n",
  "requiredTheme": "/api/v1/themes/field-survey.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500;600;700&display=swap"
}