{"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  --menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);\n  --nav-height: 56px;\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/* ---- The frame ---- */\n\n.frame {\n  height: var(--nav-height);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 12px 0 8px;\n  background: var(--nav-bg);\n  color: var(--nav-text);\n  box-shadow: var(--shadow);\n}\n\n.zone {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.zone-left {\n  gap: 4px;\n  flex: 0 0 auto;\n}\n\n.zone-center {\n  flex: 1 1 auto;\n  min-width: 0;\n  justify-content: flex-start;\n}\n\n.zone-right {\n  flex: 0 0 auto;\n  justify-content: flex-end;\n  gap: 4px;\n}\n\n/* ---- Left: waffle + wordmark ---- */\n\n.waffle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  color: var(--nav-text);\n  text-decoration: none;\n  font-size: 1.2rem;\n  line-height: 1;\n}\n\n.waffle:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.wordmark {\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-size: 0.82rem;\n  color: var(--nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* ---- Center: the location sentence ---- */\n\n.location {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n}\n\n.app-name {\n  font-size: 1.1rem;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.from {\n  font-size: 0.85rem;\n  color: var(--muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 auto;\n}\n\n.from[hidden] {\n  display: none;\n}\n\n/* ---- Right: account chip + menu ---- */\n\n.account {\n  position: relative;\n}\n\n.account-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  padding: 4px 10px 4px 4px;\n  color: var(--nav-text);\n  font: inherit;\n  font-size: 0.9rem;\n  cursor: pointer;\n  max-width: 220px;\n}\n\n.account-chip:hover,\n.account-chip[aria-expanded=\"true\"] {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n\n/* Indicator that the reader's cred graph currently includes a known\n * walkable/demo-root account, so some of the content surfacing in\n * their apps is \"sample data\" rather than real activity. Click opens\n * a panel explaining + offering to turn it off (writes a 0 cred\n * rating on each known demo-root). Hidden by default; shown by app.ts\n * when at least one DemoRoot page is visible to the user and their\n * own cred rating for that root is above NEUTRAL. */\n.demo-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(224, 122, 95, 0.18);\n  color: var(--nav-text);\n  border: 1px solid rgba(224, 122, 95, 0.6);\n  border-radius: 999px;\n  padding: 3px 12px;\n  font: inherit;\n  font-size: 0.78rem;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n\n.demo-chip:hover {\n  background: rgba(224, 122, 95, 0.3);\n}\n\n.feedback-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  flex: 0 0 34px;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--nav-text);\n  font: inherit;\n  font-size: 1rem;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.feedback-icon,\n.feedback-icon svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n.feedback-icon svg {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.9;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.feedback-button:hover,\n.feedback-button:focus-visible {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n\n.account-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.caret {\n  font-size: 0.7rem;\n  opacity: 0.7;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: 0 0 28px;\n  border-radius: 50%;\n  background: var(--accent);\n  color: #fff;\n  font-size: 0.85rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  background-size: cover;\n  background-position: center;\n}\n\n.avatar.lg {\n  width: 40px;\n  height: 40px;\n  flex-basis: 40px;\n  font-size: 1.1rem;\n}\n\n/* ---- Account dropdown ---- */\n\n.account-menu {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 260px;\n  max-width: 320px;\n  background: #fff;\n  color: #1f2a2e;\n  border-radius: 12px;\n  box-shadow: var(--menu-shadow);\n  padding: 8px;\n  z-index: 50;\n}\n\n.account-menu[hidden] {\n  display: none;\n}\n\n.account-active {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 10px 12px;\n}\n\n.account-active-text {\n  min-width: 0;\n}\n\n.account-active-name {\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.account-active-sub {\n  font-size: 0.8rem;\n  color: #6b6b6b;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menu-sep {\n  height: 1px;\n  background: #ececec;\n  margin: 6px 4px;\n}\n\n.menu-label {\n  font-size: 0.7rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: #9a9a9a;\n  padding: 4px 12px;\n}\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 9px 12px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 0.9rem;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.menu-item:hover {\n  background: #f3f0ea;\n}\n\n.menu-item .avatar {\n  width: 26px;\n  height: 26px;\n  flex-basis: 26px;\n  font-size: 0.8rem;\n}\n\n.menu-item .menu-item-text {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.menu-item .menu-glyph {\n  display: inline-flex;\n  width: 26px;\n  justify-content: center;\n  opacity: 0.7;\n}\n\n.menu-item.danger {\n  color: #b3261e;\n}\n\n/* ---- Feedback dialog ---- */\n\n.feedback-dialog {\n  width: min(420px, calc(100vw - 24px));\n  border: none;\n  border-radius: 8px;\n  padding: 0;\n  box-shadow: var(--menu-shadow);\n}\n\n.feedback-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.34);\n}\n\n.feedback-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  background: #fff;\n  color: #1f2a2e;\n}\n\n.feedback-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.feedback-head h2 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 700;\n}\n\n.feedback-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #4d5659;\n  font: inherit;\n  font-size: 1.3rem;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.feedback-close:hover {\n  background: #f3f0ea;\n}\n\n.feedback-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 0.86rem;\n  font-weight: 600;\n}\n\n.feedback-field select,\n.feedback-field textarea {\n  width: 100%;\n  border: 1px solid #d7d2ca;\n  border-radius: 8px;\n  background: #fff;\n  color: #1f2a2e;\n  font: inherit;\n  font-weight: 400;\n}\n\n.feedback-field select {\n  height: 38px;\n  padding: 0 10px;\n}\n\n.feedback-field textarea {\n  min-height: 120px;\n  resize: vertical;\n  padding: 10px;\n}\n\n.feedback-status {\n  min-height: 20px;\n  color: #596368;\n  font-size: 0.84rem;\n}\n\n.feedback-status.error {\n  color: #b3261e;\n}\n\n.feedback-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n.primary-button,\n.secondary-button {\n  min-width: 72px;\n  height: 36px;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 0.9rem;\n  cursor: pointer;\n}\n\n.primary-button {\n  border: 1px solid #1f2a2e;\n  background: #1f2a2e;\n  color: #fff;\n}\n\n.secondary-button {\n  border: 1px solid #d7d2ca;\n  background: #fff;\n  color: #1f2a2e;\n}\n\n.primary-button:disabled,\n.secondary-button:disabled {\n  cursor: default;\n  opacity: 0.55;\n}\n\n/* ---- Content ---- */\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/* ---- Mobile: stay a single row; shed the least-needed bits first ---- */\n\n@media (max-width: 600px) {\n  .wordmark {\n    display: none;\n  }\n  .account-name,\n  .caret {\n    display: none;\n  }\n  .account-chip {\n    padding: 4px;\n  }\n  .demo-chip {\n    padding: 3px 8px;\n  }\n  .demo-chip span:last-child {\n    display: none;\n  }\n  .app-name {\n    font-size: 1rem;\n  }\n}\n\n</style></head>\n  <body>\n    <div class=\"shell\">\n      <header class=\"frame\">\n        <div class=\"zone zone-left\">\n          <a class=\"waffle\" id=\"waffle\" href=\"/\" title=\"Apps\" aria-label=\"Apps and home\">\n            <span aria-hidden=\"true\">⊞</span>\n          </a>\n          <a class=\"wordmark\" id=\"home-link\" href=\"/\">Walkable</a>\n        </div>\n\n        <div class=\"zone zone-center\">\n          <span class=\"location\">\n            <span class=\"app-name\" id=\"app-name\">App</span>\n            <span class=\"from\" id=\"from-owner\" hidden></span>\n          </span>\n        </div>\n\n        <div class=\"zone zone-right\">\n          <button\n            class=\"demo-chip\"\n            id=\"demo-chip\"\n            type=\"button\"\n            title=\"Sample content is showing\"\n            aria-haspopup=\"dialog\"\n            hidden\n          >\n            <span aria-hidden=\"true\">⛢</span>\n            <span>Demo mode</span>\n          </button>\n          <button\n            class=\"feedback-button\"\n            id=\"feedback-button\"\n            type=\"button\"\n            title=\"Feedback\"\n            aria-label=\"Feedback\"\n            aria-haspopup=\"dialog\"\n          >\n            <span class=\"feedback-icon\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n                <path d=\"M5 6.5A3.5 3.5 0 0 1 8.5 3h7A3.5 3.5 0 0 1 19 6.5v4A3.5 3.5 0 0 1 15.5 14H11l-4.2 3.4A.5.5 0 0 1 6 17v-3.1a3.5 3.5 0 0 1-1-2.4v-5Z\" />\n              </svg>\n            </span>\n          </button>\n          <div class=\"account\" id=\"account\">\n            <button\n              class=\"account-chip\"\n              id=\"account-chip\"\n              aria-haspopup=\"menu\"\n              aria-expanded=\"false\"\n              aria-controls=\"account-menu\"\n            >\n              <span class=\"avatar\" id=\"account-avatar\" aria-hidden=\"true\">·</span>\n              <span class=\"account-name\" id=\"user-label\">Checking…</span>\n              <span class=\"caret\" aria-hidden=\"true\">▾</span>\n            </button>\n            <div class=\"account-menu\" id=\"account-menu\" role=\"menu\" hidden></div>\n          </div>\n        </div>\n      </header>\n\n      <dialog class=\"feedback-dialog\" id=\"feedback-dialog\" aria-labelledby=\"feedback-title\">\n        <form class=\"feedback-panel\" id=\"feedback-form\" method=\"dialog\">\n          <div class=\"feedback-head\">\n            <h2 id=\"feedback-title\">Feedback</h2>\n            <button class=\"feedback-close\" id=\"feedback-cancel\" type=\"button\" aria-label=\"Close feedback\">×</button>\n          </div>\n          <label class=\"feedback-field\">\n            <span>Type</span>\n            <select id=\"feedback-kind\">\n              <option value=\"suggestion\">Suggestion</option>\n              <option value=\"bug\">Bug</option>\n              <option value=\"confusing\">Confusing</option>\n              <option value=\"other\">Other</option>\n            </select>\n          </label>\n          <label class=\"feedback-field\">\n            <span>Details</span>\n            <textarea id=\"feedback-message\" rows=\"5\" maxlength=\"4000\" required></textarea>\n          </label>\n          <div class=\"feedback-status\" id=\"feedback-status\" hidden></div>\n          <div class=\"feedback-actions\">\n            <button class=\"secondary-button\" id=\"feedback-dismiss\" type=\"button\">Cancel</button>\n            <button class=\"primary-button\" id=\"feedback-submit\" type=\"submit\">Send</button>\n          </div>\n        </form>\n      </dialog>\n\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","html":"<!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  --menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);\n  --nav-height: 56px;\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/* ---- The frame ---- */\n\n.frame {\n  height: var(--nav-height);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 12px 0 8px;\n  background: var(--nav-bg);\n  color: var(--nav-text);\n  box-shadow: var(--shadow);\n}\n\n.zone {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.zone-left {\n  gap: 4px;\n  flex: 0 0 auto;\n}\n\n.zone-center {\n  flex: 1 1 auto;\n  min-width: 0;\n  justify-content: flex-start;\n}\n\n.zone-right {\n  flex: 0 0 auto;\n  justify-content: flex-end;\n  gap: 4px;\n}\n\n/* ---- Left: waffle + wordmark ---- */\n\n.waffle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  color: var(--nav-text);\n  text-decoration: none;\n  font-size: 1.2rem;\n  line-height: 1;\n}\n\n.waffle:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.wordmark {\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-size: 0.82rem;\n  color: var(--nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* ---- Center: the location sentence ---- */\n\n.location {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n}\n\n.app-name {\n  font-size: 1.1rem;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.from {\n  font-size: 0.85rem;\n  color: var(--muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 auto;\n}\n\n.from[hidden] {\n  display: none;\n}\n\n/* ---- Right: account chip + menu ---- */\n\n.account {\n  position: relative;\n}\n\n.account-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  padding: 4px 10px 4px 4px;\n  color: var(--nav-text);\n  font: inherit;\n  font-size: 0.9rem;\n  cursor: pointer;\n  max-width: 220px;\n}\n\n.account-chip:hover,\n.account-chip[aria-expanded=\"true\"] {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n\n/* Indicator that the reader's cred graph currently includes a known\n * walkable/demo-root account, so some of the content surfacing in\n * their apps is \"sample data\" rather than real activity. Click opens\n * a panel explaining + offering to turn it off (writes a 0 cred\n * rating on each known demo-root). Hidden by default; shown by app.ts\n * when at least one DemoRoot page is visible to the user and their\n * own cred rating for that root is above NEUTRAL. */\n.demo-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(224, 122, 95, 0.18);\n  color: var(--nav-text);\n  border: 1px solid rgba(224, 122, 95, 0.6);\n  border-radius: 999px;\n  padding: 3px 12px;\n  font: inherit;\n  font-size: 0.78rem;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n\n.demo-chip:hover {\n  background: rgba(224, 122, 95, 0.3);\n}\n\n.feedback-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  flex: 0 0 34px;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--nav-text);\n  font: inherit;\n  font-size: 1rem;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.feedback-icon,\n.feedback-icon svg {\n  display: block;\n  width: 18px;\n  height: 18px;\n}\n\n.feedback-icon svg {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.9;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.feedback-button:hover,\n.feedback-button:focus-visible {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n\n.account-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.caret {\n  font-size: 0.7rem;\n  opacity: 0.7;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: 0 0 28px;\n  border-radius: 50%;\n  background: var(--accent);\n  color: #fff;\n  font-size: 0.85rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  background-size: cover;\n  background-position: center;\n}\n\n.avatar.lg {\n  width: 40px;\n  height: 40px;\n  flex-basis: 40px;\n  font-size: 1.1rem;\n}\n\n/* ---- Account dropdown ---- */\n\n.account-menu {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 260px;\n  max-width: 320px;\n  background: #fff;\n  color: #1f2a2e;\n  border-radius: 12px;\n  box-shadow: var(--menu-shadow);\n  padding: 8px;\n  z-index: 50;\n}\n\n.account-menu[hidden] {\n  display: none;\n}\n\n.account-active {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 10px 12px;\n}\n\n.account-active-text {\n  min-width: 0;\n}\n\n.account-active-name {\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.account-active-sub {\n  font-size: 0.8rem;\n  color: #6b6b6b;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menu-sep {\n  height: 1px;\n  background: #ececec;\n  margin: 6px 4px;\n}\n\n.menu-label {\n  font-size: 0.7rem;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: #9a9a9a;\n  padding: 4px 12px;\n}\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 9px 12px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 0.9rem;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.menu-item:hover {\n  background: #f3f0ea;\n}\n\n.menu-item .avatar {\n  width: 26px;\n  height: 26px;\n  flex-basis: 26px;\n  font-size: 0.8rem;\n}\n\n.menu-item .menu-item-text {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.menu-item .menu-glyph {\n  display: inline-flex;\n  width: 26px;\n  justify-content: center;\n  opacity: 0.7;\n}\n\n.menu-item.danger {\n  color: #b3261e;\n}\n\n/* ---- Feedback dialog ---- */\n\n.feedback-dialog {\n  width: min(420px, calc(100vw - 24px));\n  border: none;\n  border-radius: 8px;\n  padding: 0;\n  box-shadow: var(--menu-shadow);\n}\n\n.feedback-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.34);\n}\n\n.feedback-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  background: #fff;\n  color: #1f2a2e;\n}\n\n.feedback-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.feedback-head h2 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 700;\n}\n\n.feedback-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: transparent;\n  color: #4d5659;\n  font: inherit;\n  font-size: 1.3rem;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.feedback-close:hover {\n  background: #f3f0ea;\n}\n\n.feedback-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 0.86rem;\n  font-weight: 600;\n}\n\n.feedback-field select,\n.feedback-field textarea {\n  width: 100%;\n  border: 1px solid #d7d2ca;\n  border-radius: 8px;\n  background: #fff;\n  color: #1f2a2e;\n  font: inherit;\n  font-weight: 400;\n}\n\n.feedback-field select {\n  height: 38px;\n  padding: 0 10px;\n}\n\n.feedback-field textarea {\n  min-height: 120px;\n  resize: vertical;\n  padding: 10px;\n}\n\n.feedback-status {\n  min-height: 20px;\n  color: #596368;\n  font-size: 0.84rem;\n}\n\n.feedback-status.error {\n  color: #b3261e;\n}\n\n.feedback-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n.primary-button,\n.secondary-button {\n  min-width: 72px;\n  height: 36px;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 0.9rem;\n  cursor: pointer;\n}\n\n.primary-button {\n  border: 1px solid #1f2a2e;\n  background: #1f2a2e;\n  color: #fff;\n}\n\n.secondary-button {\n  border: 1px solid #d7d2ca;\n  background: #fff;\n  color: #1f2a2e;\n}\n\n.primary-button:disabled,\n.secondary-button:disabled {\n  cursor: default;\n  opacity: 0.55;\n}\n\n/* ---- Content ---- */\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/* ---- Mobile: stay a single row; shed the least-needed bits first ---- */\n\n@media (max-width: 600px) {\n  .wordmark {\n    display: none;\n  }\n  .account-name,\n  .caret {\n    display: none;\n  }\n  .account-chip {\n    padding: 4px;\n  }\n  .demo-chip {\n    padding: 3px 8px;\n  }\n  .demo-chip span:last-child {\n    display: none;\n  }\n  .app-name {\n    font-size: 1rem;\n  }\n}\n\n</style></head>\n  <body>\n    <div class=\"shell\">\n      <header class=\"frame\">\n        <div class=\"zone zone-left\">\n          <a class=\"waffle\" id=\"waffle\" href=\"/\" title=\"Apps\" aria-label=\"Apps and home\">\n            <span aria-hidden=\"true\">⊞</span>\n          </a>\n          <a class=\"wordmark\" id=\"home-link\" href=\"/\">Walkable</a>\n        </div>\n\n        <div class=\"zone zone-center\">\n          <span class=\"location\">\n            <span class=\"app-name\" id=\"app-name\">App</span>\n            <span class=\"from\" id=\"from-owner\" hidden></span>\n          </span>\n        </div>\n\n        <div class=\"zone zone-right\">\n          <button\n            class=\"demo-chip\"\n            id=\"demo-chip\"\n            type=\"button\"\n            title=\"Sample content is showing\"\n            aria-haspopup=\"dialog\"\n            hidden\n          >\n            <span aria-hidden=\"true\">⛢</span>\n            <span>Demo mode</span>\n          </button>\n          <button\n            class=\"feedback-button\"\n            id=\"feedback-button\"\n            type=\"button\"\n            title=\"Feedback\"\n            aria-label=\"Feedback\"\n            aria-haspopup=\"dialog\"\n          >\n            <span class=\"feedback-icon\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n                <path d=\"M5 6.5A3.5 3.5 0 0 1 8.5 3h7A3.5 3.5 0 0 1 19 6.5v4A3.5 3.5 0 0 1 15.5 14H11l-4.2 3.4A.5.5 0 0 1 6 17v-3.1a3.5 3.5 0 0 1-1-2.4v-5Z\" />\n              </svg>\n            </span>\n          </button>\n          <div class=\"account\" id=\"account\">\n            <button\n              class=\"account-chip\"\n              id=\"account-chip\"\n              aria-haspopup=\"menu\"\n              aria-expanded=\"false\"\n              aria-controls=\"account-menu\"\n            >\n              <span class=\"avatar\" id=\"account-avatar\" aria-hidden=\"true\">·</span>\n              <span class=\"account-name\" id=\"user-label\">Checking…</span>\n              <span class=\"caret\" aria-hidden=\"true\">▾</span>\n            </button>\n            <div class=\"account-menu\" id=\"account-menu\" role=\"menu\" hidden></div>\n          </div>\n        </div>\n      </header>\n\n      <dialog class=\"feedback-dialog\" id=\"feedback-dialog\" aria-labelledby=\"feedback-title\">\n        <form class=\"feedback-panel\" id=\"feedback-form\" method=\"dialog\">\n          <div class=\"feedback-head\">\n            <h2 id=\"feedback-title\">Feedback</h2>\n            <button class=\"feedback-close\" id=\"feedback-cancel\" type=\"button\" aria-label=\"Close feedback\">×</button>\n          </div>\n          <label class=\"feedback-field\">\n            <span>Type</span>\n            <select id=\"feedback-kind\">\n              <option value=\"suggestion\">Suggestion</option>\n              <option value=\"bug\">Bug</option>\n              <option value=\"confusing\">Confusing</option>\n              <option value=\"other\">Other</option>\n            </select>\n          </label>\n          <label class=\"feedback-field\">\n            <span>Details</span>\n            <textarea id=\"feedback-message\" rows=\"5\" maxlength=\"4000\" required></textarea>\n          </label>\n          <div class=\"feedback-status\" id=\"feedback-status\" hidden></div>\n          <div class=\"feedback-actions\">\n            <button class=\"secondary-button\" id=\"feedback-dismiss\" type=\"button\">Cancel</button>\n            <button class=\"primary-button\" id=\"feedback-submit\" type=\"submit\">Send</button>\n          </div>\n        </form>\n      </dialog>\n\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"}