{
  "id": "tide-table-station",
  "name": "Station Readings",
  "theme": "tide-table",
  "category": "Data & Reports",
  "description": "The core reference table, with the date hanging outside the ruled area and every sixth row grouped by a heavier rule the way a printed tide table groups by watch.",
  "layout": "A hanging-index table at 1280px: dates in an unruled 108px column, six ruled data columns, and a doubled rule every sixth row.",
  "modules": [
    {
      "key": "head",
      "name": "Station head",
      "html": "\n<header class=\"sh\"><div><span class=\"k\">Station 4417</span><h1>Kirkwall Pier</h1></div><dl><div><dt>Datum</dt><dd class=\"n\">2.41 m</dd></div><div><dt>Zone</dt><dd class=\"n\">UTC</dd></div><div><dt>Updated</dt><dd class=\"n\">09:14</dd></div></dl></header>"
    },
    {
      "key": "table",
      "name": "Readings table",
      "html": "\n<section class=\"rt\"><table>\n<thead><tr><th class=\"hg\">Date</th><th>High</th><th>Height</th><th>Low</th><th>Height</th><th>Range</th><th>Surge</th></tr></thead>\n<tbody>\n<tr><th class=\"hg\">Mon 08</th><td class=\"n\">03:14</td><td class=\"n\">4.62</td><td class=\"n\">09:31</td><td class=\"n\">1.08</td><td class=\"n\">3.54</td><td class=\"n\">+0.04</td></tr>\n<tr><th class=\"hg\">Tue 09</th><td class=\"n\">04:02</td><td class=\"n\">4.71</td><td class=\"n\">10:19</td><td class=\"n\">0.97</td><td class=\"n\">3.74</td><td class=\"n\">+0.02</td></tr>\n<tr><th class=\"hg\">Wed 10</th><td class=\"n\">04:48</td><td class=\"n\">4.80</td><td class=\"n\">11:06</td><td class=\"n\">0.89</td><td class=\"n\">3.91</td><td class=\"n\">−0.01</td></tr>\n<tr><th class=\"hg\">Thu 11</th><td class=\"n\">05:33</td><td class=\"n\">4.86</td><td class=\"n\">11:52</td><td class=\"n\">0.84</td><td class=\"n\">4.02</td><td class=\"n\">+0.03</td></tr>\n<tr><th class=\"hg\">Fri 12</th><td class=\"n\">06:17</td><td class=\"n\">4.88</td><td class=\"n\">12:37</td><td class=\"n\">0.83</td><td class=\"n\">4.05</td><td class=\"n\">+0.06</td></tr>\n<tr class=\"grp\"><th class=\"hg\">Sat 13</th><td class=\"n hi\">07:01</td><td class=\"n hi\">4.91</td><td class=\"n\">13:22</td><td class=\"n\">0.81</td><td class=\"n\">4.10</td><td class=\"n\">+0.09</td></tr>\n<tr><th class=\"hg\">Sun 14</th><td class=\"n\">07:46</td><td class=\"n\">4.87</td><td class=\"n\">14:08</td><td class=\"n\">0.86</td><td class=\"n\">4.01</td><td class=\"n\">+0.11</td></tr>\n<tr><th class=\"hg\">Mon 15</th><td class=\"n\">08:33</td><td class=\"n\">4.76</td><td class=\"n\">14:56</td><td class=\"n\">0.95</td><td class=\"n\">3.81</td><td class=\"n\">+0.14</td></tr>\n</tbody></table>\n<p class=\"fn\">Highest predicted high water in the period falls on Saturday 13 at 07:01. Surge values are the difference between predicted and observed at the last complete cycle.</p></section>"
    },
    {
      "key": "spark",
      "name": "Curve strip",
      "html": "\n<section class=\"sp\"><h2>Predicted curve, seven days</h2>\n<svg viewBox=\"0 0 720 90\" preserveAspectRatio=\"none\" role=\"img\" aria-label=\"Predicted tide curve rising slightly across seven days\">\n<path d=\"M0 62 C 24 20, 48 20, 72 62 S 120 104, 144 62 S 192 16, 216 58 S 264 100, 288 56 S 336 12, 360 54 S 408 98, 432 52 S 480 10, 504 50 S 552 96, 576 54 S 624 14, 648 56 S 696 100, 720 58\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/>\n<circle cx=\"504\" cy=\"50\" r=\"3.5\" class=\"pk\"/>\n</svg>\n<div class=\"ax\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "tide-table-station",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:34:56+09:00",
    "updatedAt": "2026-09-01T23:34:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/tide-table-station.json",
  "structure": "A hanging-index table at 1280px: dates in an unruled 108px column, six ruled data columns, and a doubled rule every sixth row.",
  "html": "<div class=\"dz dz-tide-table-station\" data-design=\"tide-table-station\" data-theme=\"tide-table\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Station head\">\n<header class=\"sh\"><div><span class=\"k\">Station 4417</span><h1>Kirkwall Pier</h1></div><dl><div><dt>Datum</dt><dd class=\"n\">2.41 m</dd></div><div><dt>Zone</dt><dd class=\"n\">UTC</dd></div><div><dt>Updated</dt><dd class=\"n\">09:14</dd></div></dl></header></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Readings table\">\n<section class=\"rt\"><table>\n<thead><tr><th class=\"hg\">Date</th><th>High</th><th>Height</th><th>Low</th><th>Height</th><th>Range</th><th>Surge</th></tr></thead>\n<tbody>\n<tr><th class=\"hg\">Mon 08</th><td class=\"n\">03:14</td><td class=\"n\">4.62</td><td class=\"n\">09:31</td><td class=\"n\">1.08</td><td class=\"n\">3.54</td><td class=\"n\">+0.04</td></tr>\n<tr><th class=\"hg\">Tue 09</th><td class=\"n\">04:02</td><td class=\"n\">4.71</td><td class=\"n\">10:19</td><td class=\"n\">0.97</td><td class=\"n\">3.74</td><td class=\"n\">+0.02</td></tr>\n<tr><th class=\"hg\">Wed 10</th><td class=\"n\">04:48</td><td class=\"n\">4.80</td><td class=\"n\">11:06</td><td class=\"n\">0.89</td><td class=\"n\">3.91</td><td class=\"n\">−0.01</td></tr>\n<tr><th class=\"hg\">Thu 11</th><td class=\"n\">05:33</td><td class=\"n\">4.86</td><td class=\"n\">11:52</td><td class=\"n\">0.84</td><td class=\"n\">4.02</td><td class=\"n\">+0.03</td></tr>\n<tr><th class=\"hg\">Fri 12</th><td class=\"n\">06:17</td><td class=\"n\">4.88</td><td class=\"n\">12:37</td><td class=\"n\">0.83</td><td class=\"n\">4.05</td><td class=\"n\">+0.06</td></tr>\n<tr class=\"grp\"><th class=\"hg\">Sat 13</th><td class=\"n hi\">07:01</td><td class=\"n hi\">4.91</td><td class=\"n\">13:22</td><td class=\"n\">0.81</td><td class=\"n\">4.10</td><td class=\"n\">+0.09</td></tr>\n<tr><th class=\"hg\">Sun 14</th><td class=\"n\">07:46</td><td class=\"n\">4.87</td><td class=\"n\">14:08</td><td class=\"n\">0.86</td><td class=\"n\">4.01</td><td class=\"n\">+0.11</td></tr>\n<tr><th class=\"hg\">Mon 15</th><td class=\"n\">08:33</td><td class=\"n\">4.76</td><td class=\"n\">14:56</td><td class=\"n\">0.95</td><td class=\"n\">3.81</td><td class=\"n\">+0.14</td></tr>\n</tbody></table>\n<p class=\"fn\">Highest predicted high water in the period falls on Saturday 13 at 07:01. Surge values are the difference between predicted and observed at the last complete cycle.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"spark\" aria-label=\"Curve strip\">\n<section class=\"sp\"><h2>Predicted curve, seven days</h2>\n<svg viewBox=\"0 0 720 90\" preserveAspectRatio=\"none\" role=\"img\" aria-label=\"Predicted tide curve rising slightly across seven days\">\n<path d=\"M0 62 C 24 20, 48 20, 72 62 S 120 104, 144 62 S 192 16, 216 58 S 264 100, 288 56 S 336 12, 360 54 S 408 98, 432 52 S 480 10, 504 50 S 552 96, 576 54 S 624 14, 648 56 S 696 100, 720 58\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/>\n<circle cx=\"504\" cy=\"50\" r=\"3.5\" class=\"pk\"/>\n</svg>\n<div class=\"ax\"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></section></section>\n</div>",
  "css": "\n.dz-tide-table-station { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 1280px; margin: 0 auto; }\n.dz-tide-table-station .sh { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 2px solid var(--border); }\n.dz-tide-table-station .k { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-tide-table-station .sh h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 500; margin: 4px 0 0; letter-spacing: -.02em; }\n.dz-tide-table-station .sh dl { display: flex; gap: 28px; margin: 0; }\n.dz-tide-table-station .sh div { display: grid; gap: 3px; }\n.dz-tide-table-station dt { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); margin: 0; }\n.dz-tide-table-station dd { margin: 0; }\n.dz-tide-table-station .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 13px; }\n.dz-tide-table-station .rt { margin-top: 26px; }\n.dz-tide-table-station table { width: 100%; border-collapse: collapse; }\n.dz-tide-table-station th { text-align: left; font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); font-weight: 600; padding: 0 0 9px; }\n.dz-tide-table-station thead th { border-bottom: 2px solid var(--border); }\n.dz-tide-table-station thead th:not(.hg) { text-align: right; }\n.dz-tide-table-station td { padding: 9px 0; text-align: right; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }\n.dz-tide-table-station tbody th.hg { padding: 9px 22px 9px 0; border-bottom: 0; font-family: var(--pv-mono); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--foreground); font-weight: 400; }\n.dz-tide-table-station thead th.hg { border-bottom: 2px solid var(--border); }\n.dz-tide-table-station tr.grp td { border-bottom-width: 2px; border-bottom-color: var(--border); }\n.dz-tide-table-station .hi { color: var(--accent); font-weight: 600; }\n.dz-tide-table-station .fn { font-size: 12.5px; color: var(--muted-foreground); max-width: 70ch; margin: 16px 0 0; line-height: 1.5; }\n.dz-tide-table-station .sp { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-tide-table-station h2 { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); margin: 0 0 12px; }\n.dz-tide-table-station svg { width: 100%; height: 90px; display: block; color: var(--primary); }\n.dz-tide-table-station .pk { fill: var(--accent); }\n.dz-tide-table-station .ax { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted-foreground); margin-top: 6px; }\n",
  "requiredTheme": "/api/v1/themes/tide-table.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inconsolata:wght@400;500;600;700&display=swap"
}