{"body":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Walkable</title>\n    <style>\n:root {\n  --bg: #f5f2ec;\n  --nav-bg: #1f2a2e;\n  --nav-text: #f3efe8;\n  --accent: #e07a5f;\n  --muted: #a9a39b;\n  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);\n  --nav-height: 60px;\n  font-family: \"Avenir Next\", \"Avenir\", \"Futura\", \"Segoe UI\", sans-serif;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  background: var(--bg);\n  color: #1f2a2e;\n}\n\n.shell {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.nav {\n  height: var(--nav-height);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 20px;\n  background: var(--nav-bg);\n  color: var(--nav-text);\n  box-shadow: var(--shadow);\n}\n\n.brand {\n  display: flex;\n  gap: 12px;\n  align-items: baseline;\n}\n\n.logo {\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-size: 0.85rem;\n}\n\n.app-name {\n  font-size: 1.2rem;\n  font-weight: 600;\n}\n\n.user {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  font-size: 0.9rem;\n}\n\n.muted {\n  color: var(--muted);\n}\n\n.tiny {\n  font-size: 0.7rem;\n  letter-spacing: 0.02em;\n}\n\n.link {\n  color: var(--nav-text);\n  text-decoration: none;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 2px;\n}\n\n.link:hover {\n  border-bottom-color: var(--nav-text);\n}\n\n.link.danger {\n  color: var(--accent);\n}\n\n.content {\n  flex: 1;\n  min-height: 0;\n}\n\n#app-frame {\n  width: 100%;\n  height: calc(100vh - var(--nav-height));\n  border: none;\n  display: block;\n  background: #fff;\n}\n\n@media (max-width: 720px) {\n  .nav {\n    flex-direction: column;\n    align-items: flex-start;\n    height: auto;\n    padding: 12px 16px;\n    gap: 8px;\n  }\n\n  .user {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  #app-frame {\n    height: calc(100vh - 120px);\n  }\n}\n\n</style></head>\n  <body>\n    <div class=\"shell\">\n      <header class=\"nav\">\n        <div class=\"brand\">\n          <span class=\"logo\">Walkable</span>\n          <span class=\"app-name\" id=\"app-name\">App</span>\n        </div>\n        <div class=\"user\">\n          <span id=\"user-label\" class=\"muted\">Checking sign-in…</span>\n          <div id=\"auth-debug\" class=\"muted tiny\"></div>\n          <a id=\"login-link\" class=\"link\" href=\"#\">Sign in</a>\n          <a id=\"settings-link\" class=\"link\" href=\"#\">Settings</a>\n          <a id=\"logout-link\" class=\"link danger\" href=\"#\">Sign out</a>\n        </div>\n      </header>\n      <main class=\"content\">\n        <iframe\n          id=\"app-frame\"\n          sandbox=\"allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation\"\n          title=\"App\"\n        ></iframe>\n      </main>\n    </div>\n    <script type=\"module\" src=\"/apps/_shell-js?blob=true\"></script>\n  <script>\n(() => {\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return;\n    const anchor = event.target.closest(\"a[href]\");\n    if (!(anchor instanceof HTMLAnchorElement)) return;\n    if (anchor.target && anchor.target !== \"_self\") return;\n    let url;\n    try {\n      url = new URL(anchor.href, window.location.href);\n    } catch {\n      return;\n    }\n    if (url.origin !== window.location.origin) return;\n    if (!url.pathname.startsWith(\"/apps/\")) return;\n    if (window.top && window.top !== window) {\n      event.preventDefault();\n      window.top.location.href = url.href;\n      return;\n    }\n    anchor.target = \"_top\";\n  }, true);\n})();\n</script>\n</body>\n</html>\n"}