{
  "id": "tide-table-lookup",
  "name": "Station Lookup",
  "theme": "tide-table",
  "category": "Search & Browse",
  "description": "A lookup where results are a ruled list rather than cards, and the sort is stated in plain words above the rule instead of hidden in a dropdown.",
  "layout": "A single 68ch-wide column: search field, a plain-language sort line, then hairline-ruled result rows with the station code hanging left.",
  "modules": [
    {
      "key": "search",
      "name": "Search field",
      "html": "\n<header class=\"sf\"><h1>Find a station</h1><label class=\"fld\"><span class=\"sr-lbl\">Station name or code</span><input type=\"search\" value=\"ork\" placeholder=\"Name, code or sea area\"></label><p class=\"hint\">Codes are four digits. Partial names match from the start of any word.</p></header>"
    },
    {
      "key": "sortline",
      "name": "Sort line",
      "html": "\n<p class=\"sl\">Showing <b>9</b> stations matching <b>“ork”</b>, nearest first from <b>Kirkwall</b>. <a href=\"#\">Sort by name</a></p>"
    },
    {
      "key": "results",
      "name": "Result rows",
      "html": "\n<ol class=\"rs\">\n  <li><span class=\"cd\">4417</span><div><b>Kirkwall Pier</b><span>Orkney · 0.0 km</span></div><span class=\"n\">4.62 m</span></li>\n  <li><span class=\"cd\">4419</span><div><b>Stromness</b><span>Orkney · 24.1 km</span></div><span class=\"n\">4.44 m</span></li>\n  <li><span class=\"cd\">4423</span><div><b>St Margaret's Hope</b><span>Orkney · 26.8 km</span></div><span class=\"n\">4.51 m</span></li>\n  <li><span class=\"cd\">4431</span><div><b>Westray Pier</b><span>Orkney · 41.2 km</span></div><span class=\"n\">4.08 m</span></li>\n  <li><span class=\"cd\">4402</span><div><b>Scrabster</b><span>Caithness · 52.6 km</span></div><span class=\"n\">3.91 m</span></li>\n  <li class=\"off\"><span class=\"cd\">4436</span><div><b>North Ronaldsay</b><span>Orkney · 63.4 km</span></div><span class=\"n\">no data</span></li>\n</ol>"
    },
    {
      "key": "areas",
      "name": "Sea areas",
      "html": "\n<section class=\"ar\"><h2>Or choose a sea area</h2><ul><li><a href=\"#\">Fair Isle</a></li><li><a href=\"#\">Cromarty</a></li><li><a href=\"#\">Forties</a></li><li><a href=\"#\">Hebrides</a></li><li><a href=\"#\">Bailey</a></li><li><a href=\"#\">Rockall</a></li><li><a href=\"#\">Malin</a></li><li><a href=\"#\">Faeroes</a></li></ul></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tide-table-lookup",
    "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-lookup.json",
  "structure": "A single 68ch-wide column: search field, a plain-language sort line, then hairline-ruled result rows with the station code hanging left.",
  "html": "<div class=\"dz dz-tide-table-lookup\" data-design=\"tide-table-lookup\" data-theme=\"tide-table\">\n<section class=\"dz-mod\" data-mod=\"search\" aria-label=\"Search field\">\n<header class=\"sf\"><h1>Find a station</h1><label class=\"fld\"><span class=\"sr-lbl\">Station name or code</span><input type=\"search\" value=\"ork\" placeholder=\"Name, code or sea area\"></label><p class=\"hint\">Codes are four digits. Partial names match from the start of any word.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"sortline\" aria-label=\"Sort line\">\n<p class=\"sl\">Showing <b>9</b> stations matching <b>“ork”</b>, nearest first from <b>Kirkwall</b>. <a href=\"#\">Sort by name</a></p></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result rows\">\n<ol class=\"rs\">\n  <li><span class=\"cd\">4417</span><div><b>Kirkwall Pier</b><span>Orkney · 0.0 km</span></div><span class=\"n\">4.62 m</span></li>\n  <li><span class=\"cd\">4419</span><div><b>Stromness</b><span>Orkney · 24.1 km</span></div><span class=\"n\">4.44 m</span></li>\n  <li><span class=\"cd\">4423</span><div><b>St Margaret's Hope</b><span>Orkney · 26.8 km</span></div><span class=\"n\">4.51 m</span></li>\n  <li><span class=\"cd\">4431</span><div><b>Westray Pier</b><span>Orkney · 41.2 km</span></div><span class=\"n\">4.08 m</span></li>\n  <li><span class=\"cd\">4402</span><div><b>Scrabster</b><span>Caithness · 52.6 km</span></div><span class=\"n\">3.91 m</span></li>\n  <li class=\"off\"><span class=\"cd\">4436</span><div><b>North Ronaldsay</b><span>Orkney · 63.4 km</span></div><span class=\"n\">no data</span></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"areas\" aria-label=\"Sea areas\">\n<section class=\"ar\"><h2>Or choose a sea area</h2><ul><li><a href=\"#\">Fair Isle</a></li><li><a href=\"#\">Cromarty</a></li><li><a href=\"#\">Forties</a></li><li><a href=\"#\">Hebrides</a></li><li><a href=\"#\">Bailey</a></li><li><a href=\"#\">Rockall</a></li><li><a href=\"#\">Malin</a></li><li><a href=\"#\">Faeroes</a></li></ul></section></section>\n</div>",
  "css": "\n.dz-tide-table-lookup { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 28px; max-width: 780px; margin: 0 auto; }\n.dz-tide-table-lookup h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 500; margin: 0 0 18px; letter-spacing: -.02em; }\n.dz-tide-table-lookup .fld { display: block; }\n.dz-tide-table-lookup .sr-lbl { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 6px; }\n.dz-tide-table-lookup input { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); }\n.dz-tide-table-lookup .hint { font-size: 12.5px; color: var(--muted-foreground); margin: 8px 0 0; }\n.dz-tide-table-lookup .sl { font-size: 13.5px; margin: 24px 0 8px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }\n.dz-tide-table-lookup .sl a { color: var(--accent); }\n.dz-tide-table-lookup .rs { list-style: none; margin: 0; padding: 0; }\n.dz-tide-table-lookup .rs li { display: grid; grid-template-columns: 62px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }\n.dz-tide-table-lookup .cd { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n.dz-tide-table-lookup .rs b { display: block; font-size: 15px; font-weight: 600; }\n.dz-tide-table-lookup .rs span:not(.cd):not(.n) { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-tide-table-lookup .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 13px; }\n.dz-tide-table-lookup .rs li.off { color: var(--muted-foreground); }\n.dz-tide-table-lookup .ar { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }\n.dz-tide-table-lookup 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-lookup .ar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }\n.dz-tide-table-lookup .ar a { color: var(--foreground); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 2px; }\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"
}