From 1c49b8a4a8f18e8cca256e46e9d858b3860c2354 Mon Sep 17 00:00:00 2001
From: Lumen Stage1 <avi@lumen.local>
Date: Tue, 6 Oct 2026 13:03:13 -0500
Subject: [PATCH] =?UTF-8?q?emergency:=20911=20demoted=20to=20very=20last?=
 =?UTF-8?q?=20resort=20=E2=80=94=20page=20now=20leads=20with=20event-help?=
 =?UTF-8?q?=20share=20card;=20emergency-services=20number=20moved=20to=20c?=
 =?UTF-8?q?ollapsed=20'If=20none=20of=20the=20above=20is=20working'=20disc?=
 =?UTF-8?q?losure=20at=20the=20very=20bottom,=20no=20alert=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/styles.css                  | 29 +++++++++++++---
 src/ui/views/emergency/emergency.ts | 52 ++++++++++++++++++++++-------
 tests/unit/emergency.test.ts        | 21 ++++++++++++
 3 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/src/app/styles.css b/src/app/styles.css
index bcda178..d2bc47f 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -661,16 +661,35 @@ html.dark .app-main__icon {
   font-size: 0.875rem;
   font-weight: 600;
 }
-.emergency-fallback {
-  background: var(--emergency);
-  border: 1px solid var(--emergency);
+.emergency-share-card {
+  border: 1px solid var(--border);
   border-radius: var(--radius);
-  color: var(--emergency-contrast);
   padding: 1rem;
 }
-.emergency-fallback h2 {
+.emergency-share-card h2 {
   margin-top: 0;
 }
+.emergency-last-resort {
+  border-top: 1px solid var(--border);
+  margin-top: 1.5rem;
+  padding-top: 0.75rem;
+}
+.emergency-last-resort summary {
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.emergency-last-resort p {
+  color: var(--muted);
+}
+.emergency-call-last {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--foreground);
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  text-decoration: none;
+}
 .emergency-service p {
   margin: 0;
 }
diff --git a/src/ui/views/emergency/emergency.ts b/src/ui/views/emergency/emergency.ts
index 9c3d47a..4257dfa 100644
--- a/src/ui/views/emergency/emergency.ts
+++ b/src/ui/views/emergency/emergency.ts
@@ -129,13 +129,18 @@ export function createEmergencyView(
   const address = detail?.address ?? resolved.floor.address;
   const procedures = detail?.procedures?.length ? detail.procedures : resolved.floor.procedures;
 
-  const urgent = document.createElement("div");
-  urgent.className = "emergency-fallback";
-  urgent.append(heading("emergency-call-heading", "Can't reach event help?"));
-
-  // Share first: the practical action (send your location + numbers to your
-  // group) belongs above the emergency-services number, which the procedures
-  // now frame as the fallback.
+  // Share card at top: the primary self-help action. The emergency-services
+  // number is deliberately NOT here — per product rule it is the very last
+  // resort and lives behind an explicit disclosure at the page bottom.
+  const shareCard = document.createElement("div");
+  shareCard.className = "emergency-share-card";
+  shareCard.append(heading("emergency-share-heading", "Start with event help"));
+  shareCard.append(
+    text(
+      "p",
+      "Event staff, security, and first aid are your first responders here. Share your situation and location with them or your group.",
+    ),
+  );
   const shareBtn = document.createElement("button");
   shareBtn.className = "emergency-share-btn";
   shareBtn.textContent = "Share emergency info";
@@ -153,11 +158,8 @@ export function createEmergencyView(
       alert("Copied to clipboard: " + textToShare.slice(0, 80) + "...");
     }
   };
-  urgent.append(shareBtn);
-
-  addService(urgent, "Emergency services", services.emergencyNumber, true);
-  urgent.append(text("p", "Call only when event staff and first aid can't respond. Tap to call."));
-  section.append(urgent);
+  shareCard.append(shareBtn);
+  section.append(shareCard);
 
   const contacts = document.createElement("section");
   contacts.setAttribute("aria-labelledby", "emergency-services-heading");
@@ -241,5 +243,31 @@ export function createEmergencyView(
     section.append(notices);
   }
 
+  // Very last resort: the emergency-services number sits at the BOTTOM of
+  // the page behind an explicit disclosure, deliberately not styled as an
+  // alert. The dial link stays in the DOM for accessibility; it just is not
+  // presented until asked for.
+  const lastResort = document.createElement("details");
+  lastResort.className = "emergency-last-resort";
+  const summary = document.createElement("summary");
+  summary.textContent = "If none of the above is working";
+  lastResort.append(summary);
+  lastResort.append(
+    text(
+      "p",
+      `Only when event staff, security, and first aid are unreachable and someone is in immediate danger: call ${services.emergencyNumber}.`,
+    ),
+  );
+  const dialLink = document.createElement("a");
+  dialLink.className = "emergency-call-last";
+  dialLink.href = `tel:${services.emergencyNumber}`;
+  dialLink.textContent = `Call ${services.emergencyNumber}`;
+  dialLink.setAttribute(
+    "aria-label",
+    `As a last resort, call emergency services at ${services.emergencyNumber}`,
+  );
+  lastResort.append(dialLink);
+  section.append(lastResort);
+
   return section;
 }
diff --git a/tests/unit/emergency.test.ts b/tests/unit/emergency.test.ts
index 8a9370a..d27f3e8 100644
--- a/tests/unit/emergency.test.ts
+++ b/tests/unit/emergency.test.ts
@@ -189,6 +189,27 @@ describe("emergency view", () => {
     expect(view.textContent).toContain("isn't on this device yet");
   });
 
+  it("emergency number is last-resort: bottom of page, collapsed, after procedures", () => {
+    const view = createEmergencyView(undefined, NOW);
+    const last = view.querySelector(".emergency-last-resort");
+    expect(last).toBeTruthy();
+    // collapsed by default — the number is not presented until asked
+    expect(last?.hasAttribute("open")).toBe(false);
+    // it is the very last element of the view
+    expect(view.lastElementChild).toBe(last);
+    // ...it comes after the procedures section...
+    const idx = (selector: string): number => {
+      const el = view.querySelector(selector);
+      return el ? [...view.children].indexOf(el) : -1;
+    };
+    expect(idx(".emergency-last-resort")).toBeGreaterThan(
+      idx('[aria-labelledby="emergency-procedures-heading"]'),
+    );
+    // ...and the page leads with event help, not the dial number
+    expect(idx(".emergency-share-card")).toBeGreaterThanOrEqual(1);
+    expect(view.querySelector(".emergency-share-card")?.textContent).toContain("event help");
+  });
+
   it("dataset tier renders locations with map handoffs and notices", () => {
     const view = createEmergencyView(dataset(), NOW);
     expect(view.textContent).toContain("FESTIVAL DATA v3");