{
  "id": "moss-atlas-water",
  "name": "Water Table",
  "theme": "moss-atlas",
  "category": "Data & Reports",
  "description": "Five years of water-table depth for one site, drawn as a band around a target line, with the summers that failed marked by the gap rather than by a colour.",
  "layout": "A single wide chart occupying two thirds of the height with the y-axis inverted so wetter is up, above a compact year-by-year table of the same numbers.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><div><span class=\"k\">Site 14 · Hollin Beck, upper</span><h1>Water table, 2022–2026</h1></div><div class=\"pk\"><button type=\"button\">Site 12</button><button type=\"button\">Site 13</button><button type=\"button\" class=\"on\">Site 14</button></div></header>"
    },
    {
      "key": "chart",
      "name": "Depth chart",
      "html": "\n<section class=\"ch\"><header><span class=\"k\">cm below surface · lower is drier</span><span class=\"m\">target −10 cm</span></header>\n<svg viewBox=\"0 0 660 240\" aria-label=\"Water table depth, five years\">\n  <line class=\"tgt\" x1=\"0\" y1=\"70\" x2=\"660\" y2=\"70\"/>\n  <path class=\"band\" d=\"M0,84 L110,92 L220,140 L330,110 L440,158 L550,96 L660,78 L660,200 L550,182 L440,206 L330,178 L220,196 L110,168 L0,150 Z\"/>\n  <polyline class=\"ln\" points=\"0,116 110,128 220,168 330,142 440,182 550,138 660,120\"/>\n</svg>\n<footer><span>2022</span><span>2023</span><span>2024</span><span>2025</span><span>2026</span></footer></section>"
    },
    {
      "key": "table",
      "name": "Year table",
      "html": "\n<table>\n  <thead><tr><th>Year</th><th>Mean depth</th><th>Driest week</th><th>Days below −30 cm</th><th>Rainfall</th><th>Target met</th></tr></thead>\n  <tbody>\n    <tr><td>2026</td><td class=\"n\">−12 cm</td><td class=\"n\">−24 cm</td><td class=\"n\">0</td><td class=\"n\">1,204 mm</td><td class=\"ok\">Yes</td></tr>\n    <tr><td>2025</td><td class=\"n\">−19 cm</td><td class=\"n\">−41 cm</td><td class=\"n\">14</td><td class=\"n\">1,088 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2024</td><td class=\"n\">−16 cm</td><td class=\"n\">−33 cm</td><td class=\"n\">6</td><td class=\"n\">1,240 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2023</td><td class=\"n\">−22 cm</td><td class=\"n\">−48 cm</td><td class=\"n\">28</td><td class=\"n\">944 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2022</td><td class=\"n\">−26 cm</td><td class=\"n\">−52 cm</td><td class=\"n\">41</td><td class=\"n\">902 mm</td><td class=\"no\">No</td></tr>\n  </tbody>\n</table>"
    },
    {
      "key": "note",
      "name": "Reading",
      "html": "\n<footer class=\"nt\"><span class=\"k\">What this shows</span><p>The first year in which the table stayed above −30 cm throughout. Rainfall was high, so this is not proof that the dams did it — but 2024 had comparable rainfall and six days below the line, which is the comparison worth watching.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "moss-atlas-water",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:03:43+09:00",
    "updatedAt": "2026-09-01T20:03:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/moss-atlas-water.json",
  "structure": "A single wide chart occupying two thirds of the height with the y-axis inverted so wetter is up, above a compact year-by-year table of the same numbers.",
  "html": "<div class=\"dz dz-moss-atlas-water\" data-design=\"moss-atlas-water\" data-theme=\"moss-atlas\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><div><span class=\"k\">Site 14 · Hollin Beck, upper</span><h1>Water table, 2022–2026</h1></div><div class=\"pk\"><button type=\"button\">Site 12</button><button type=\"button\">Site 13</button><button type=\"button\" class=\"on\">Site 14</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Depth chart\">\n<section class=\"ch\"><header><span class=\"k\">cm below surface · lower is drier</span><span class=\"m\">target −10 cm</span></header>\n<svg viewBox=\"0 0 660 240\" aria-label=\"Water table depth, five years\">\n  <line class=\"tgt\" x1=\"0\" y1=\"70\" x2=\"660\" y2=\"70\"/>\n  <path class=\"band\" d=\"M0,84 L110,92 L220,140 L330,110 L440,158 L550,96 L660,78 L660,200 L550,182 L440,206 L330,178 L220,196 L110,168 L0,150 Z\"/>\n  <polyline class=\"ln\" points=\"0,116 110,128 220,168 330,142 440,182 550,138 660,120\"/>\n</svg>\n<footer><span>2022</span><span>2023</span><span>2024</span><span>2025</span><span>2026</span></footer></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Year table\">\n<table>\n  <thead><tr><th>Year</th><th>Mean depth</th><th>Driest week</th><th>Days below −30 cm</th><th>Rainfall</th><th>Target met</th></tr></thead>\n  <tbody>\n    <tr><td>2026</td><td class=\"n\">−12 cm</td><td class=\"n\">−24 cm</td><td class=\"n\">0</td><td class=\"n\">1,204 mm</td><td class=\"ok\">Yes</td></tr>\n    <tr><td>2025</td><td class=\"n\">−19 cm</td><td class=\"n\">−41 cm</td><td class=\"n\">14</td><td class=\"n\">1,088 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2024</td><td class=\"n\">−16 cm</td><td class=\"n\">−33 cm</td><td class=\"n\">6</td><td class=\"n\">1,240 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2023</td><td class=\"n\">−22 cm</td><td class=\"n\">−48 cm</td><td class=\"n\">28</td><td class=\"n\">944 mm</td><td class=\"no\">No</td></tr>\n    <tr><td>2022</td><td class=\"n\">−26 cm</td><td class=\"n\">−52 cm</td><td class=\"n\">41</td><td class=\"n\">902 mm</td><td class=\"no\">No</td></tr>\n  </tbody>\n</table></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Reading\">\n<footer class=\"nt\"><span class=\"k\">What this shows</span><p>The first year in which the table stayed above −30 cm throughout. Rainfall was high, so this is not proof that the dams did it — but 2024 had comparable rainfall and six days below the line, which is the comparison worth watching.</p></footer></section>\n</div>",
  "css": "\n.dz-moss-atlas-water { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 30px 30px; }\n.dz-moss-atlas-water .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 0 20px; }\n.dz-moss-atlas-water .k { font-size: 11.5px; color: var(--muted-foreground); display: block; }\n.dz-moss-atlas-water .hd h1 { font-family: var(--pv-display); font-size: 34px; font-weight: 600; margin: 6px 0 0; }\n.dz-moss-atlas-water .pk { display: flex; gap: 8px; }\n.dz-moss-atlas-water .pk button { font: inherit; font-size: 13px; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: transparent; color: var(--muted-foreground); padding: 8px 16px; cursor: pointer; }\n.dz-moss-atlas-water .pk .on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-moss-atlas-water .ch { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 16px 20px 12px; margin-bottom: 24px; }\n.dz-moss-atlas-water .ch header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }\n.dz-moss-atlas-water .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-water .ch svg { width: 100%; height: 240px; display: block; }\n.dz-moss-atlas-water .tgt { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 5; }\n.dz-moss-atlas-water .band { fill: color-mix(in srgb, var(--primary) 20%, transparent); }\n.dz-moss-atlas-water .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }\n.dz-moss-atlas-water .ch footer { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11px; color: var(--muted-foreground); padding-top: 6px; }\n.dz-moss-atlas-water table { width: 100%; border-collapse: collapse; }\n.dz-moss-atlas-water th { font-size: 11.5px; color: var(--muted-foreground); text-align: right; padding: 10px 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-moss-atlas-water th:first-child, .dz-moss-atlas-water th:last-child { text-align: left; }\n.dz-moss-atlas-water td { padding: 10px 14px; font-size: 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-moss-atlas-water .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; text-align: right; font-size: 13px; }\n.dz-moss-atlas-water .ok { color: var(--primary); font-weight: 600; } .dz-moss-atlas-water .no { color: var(--muted-foreground); }\n.dz-moss-atlas-water .nt { padding-top: 22px; max-width: 68ch; }\n.dz-moss-atlas-water .nt p { font-size: 15px; line-height: 1.62; color: var(--muted-foreground); margin: 6px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-moss-atlas-water *, .dz-moss-atlas-water *::before, .dz-moss-atlas-water *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/moss-atlas.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Alegreya+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap"
}