Visualize the real-screen contact continuity counterexample

docs/index.html

@@ -36,6 +36,9 @@
     .action-trace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:13px 0 3px}.trace-step{position:relative;min-width:0;padding:10px 7px;border:1px solid rgba(125,249,255,.25);border-radius:10px;background:linear-gradient(160deg,rgba(125,249,255,.1),rgba(125,249,255,.025))}.trace-step:not(:last-child)::after{content:"→";position:absolute;z-index:1;right:-9px;top:50%;transform:translateY(-50%);color:var(--cyan);font-weight:900}.trace-step span{display:block;color:#91adb9;font:800 .57rem ui-monospace,monospace;letter-spacing:.08em}.trace-step b{display:block;margin-top:4px;color:#e7fbff;font:800 .7rem/1.25 ui-sans-serif,system-ui;overflow-wrap:anywhere}.trace-step[data-stage=decision]{border-color:rgba(255,102,136,.53);background:rgba(255,102,136,.12)}.trace-step[data-stage=decision] b{color:#ff9bb0}.action-trace[data-result=approval] .trace-step[data-stage=decision]{border-color:rgba(242,206,114,.5);background:rgba(242,206,114,.12)}.action-trace[data-result=approval] .trace-step[data-stage=decision] b{color:var(--gold)}.action-trace[data-result=pending] .trace-step[data-stage=decision],.action-trace[data-result=unavailable] .trace-step[data-stage=decision]{border-color:var(--line);background:rgba(255,255,255,.035)}.action-trace[data-result=pending] .trace-step[data-stage=decision] b,.action-trace[data-result=unavailable] .trace-step[data-stage=decision] b{color:var(--muted)}.trace-step[data-stage=dispatch]{border-style:dashed;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.025)}.trace-step[data-stage=dispatch] b{color:#b7c6d2}
     .builder-invite{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);align-items:center;gap:clamp(22px,5vw,68px);margin:0 0 38px;padding:clamp(24px,4vw,42px);border:1px solid rgba(125,249,255,.4);border-radius:27px;background:radial-gradient(circle at 95% 0,rgba(125,249,255,.15),transparent 45%),linear-gradient(125deg,#102139,#09111f 68%);box-shadow:0 24px 70px #0004}.builder-kicker{color:var(--cyan);font:850 .72rem ui-monospace,monospace;letter-spacing:.15em}.builder-invite h2{margin:10px 0 12px;font-size:clamp(2rem,4.4vw,3.45rem);line-height:1.05;letter-spacing:-.055em}.builder-invite h2 em{font-style:normal;color:var(--cyan)}.builder-invite p{max-width:610px;color:#cbd9e6}.builder-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.builder-actions a{padding:11px 16px;border-radius:999px;font-weight:850;text-decoration:none}.builder-actions a:first-child{background:var(--cyan);color:#07141b}.builder-actions a:last-child{border:1px solid rgba(125,249,255,.4);color:#ddf8fa}.builder-actions a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.builder-score{padding:23px;border:1px solid rgba(125,249,255,.25);border-radius:19px;background:rgba(3,11,23,.75)}.builder-score>span{display:block;margin-bottom:17px;color:#9bc5cf;font:800 .67rem ui-monospace,monospace;letter-spacing:.12em}.score-row{display:grid;grid-template-columns:1fr auto;gap:7px 14px;margin:0 0 21px}.score-row:last-of-type{margin-bottom:12px}.score-row b{font-size:.86rem}.score-row strong{font:900 1rem ui-monospace,monospace;color:var(--gold)}.score-row.reference strong{color:var(--green)}.score-track{grid-column:1/-1;height:8px;border-radius:99px;background:#26384a;overflow:hidden}.score-track i{display:block;height:100%;width:68.42%;border-radius:inherit;background:linear-gradient(90deg,#f7a968,var(--gold))}.score-row.reference .score-track i{width:100%;background:linear-gradient(90deg,#75e9dd,var(--green))}.builder-score small{display:block;color:#a8bbc9;font-size:.73rem;line-height:1.5}
     .atlas-empty{background:linear-gradient(135deg,rgba(125,249,255,.08),rgba(242,206,114,.045));text-align:left}.atlas-empty h3{margin:0 0 6px;color:var(--ink);font-size:1.15rem}.atlas-empty p{margin:0 0 17px;color:#bfcede}.atlas-empty-actions{display:flex;gap:8px;flex-wrap:wrap}.atlas-empty button{padding:9px 13px;border:1px solid rgba(125,249,255,.37);border-radius:999px;background:#102434;color:#d5faff;font:800 .77rem ui-sans-serif,system-ui;cursor:pointer}.atlas-empty button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.atlas-empty [hidden]{display:none}
+    .atlas-list .field-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:16px 25px;align-items:center;background:radial-gradient(circle at 95% 0,rgba(125,249,255,.13),transparent 42%),linear-gradient(135deg,#17243a,#0d192b)}.field-card .field-intro p{max-width:550px}.field-card .field-links{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap}.atlas-list .field-links a{margin:0}.field-links a:last-child{background:transparent;color:var(--gold);border:1px solid rgba(242,206,114,.5)}.field-viewer{width:100%;padding:17px;border:1px solid rgba(125,249,255,.29);border-radius:16px;background:#061321}.field-original{margin:0 0 12px!important;color:#9cb5c2!important;font:.68rem ui-monospace,monospace!important}.field-switch{display:flex;gap:7px;margin-bottom:15px}.field-switch button{flex:1;min-width:0;padding:9px;border:1px solid rgba(125,249,255,.28);border-radius:9px;background:#112b3a;color:#b8d6dc;font:800 .72rem ui-sans-serif,system-ui;cursor:pointer}.field-switch button[aria-pressed=true]{border-color:var(--cyan);background:rgba(125,249,255,.16);color:var(--cyan)}.field-switch button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.field-rows{display:grid;grid-template-columns:1fr 1fr;gap:9px}.field-state{padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035)}.field-state span{display:block;color:#a3bbca;font:800 .63rem ui-monospace,monospace;letter-spacing:.1em}.field-state strong{display:block;margin:8px 0;color:var(--green);font-size:.89rem}.field-rail{height:6px;border-radius:99px;background:#26384a;overflow:hidden}.field-rail i{display:block;height:100%;width:66.67%;border-radius:inherit;background:var(--green);transition:width .25s ease,background .25s ease}.field-state:last-child .field-rail i{width:50%}.field-viewer[data-candidate=adverse] .field-state strong{color:var(--gold)}.field-viewer[data-candidate=adverse] .field-state:last-child strong{color:var(--red)}.field-viewer[data-candidate=adverse] .field-rail i{width:33.33%;background:var(--gold)}.field-viewer[data-candidate=adverse] .field-state:last-child .field-rail i{width:0;background:var(--red)}.field-result{margin:13px 0 0;color:var(--green);font-size:.78rem}.field-viewer[data-candidate=adverse] .field-result{color:#ff9bb0}.field-caveat{grid-column:1/-1;margin:0!important;color:#a9bac9!important;font-size:.72rem!important}
+    @media(max-width:800px){.atlas-list .field-card{grid-template-columns:1fr}}
+    @media(prefers-reduced-motion:reduce){.field-rail i{transition:none}}
     @media(max-width:800px){.builder-invite{grid-template-columns:1fr}}
     @media(max-width:520px){.boundary-switch button{font-size:.7rem}.verdict.approval strong{font-size:1rem}.console-body{padding:17px}.action-trace{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.trace-step:nth-child(2)::after{content:"↙";right:auto;left:7px;top:auto;bottom:-13px}.trace-step:nth-child(3)::after{right:-11px}}
   </style>
@@ -124,7 +127,7 @@ <h1>AI proposes.<br><span class="gradient">The host decides.</span></h1>
     <section class="scope-teaser" data-topic="recipients" aria-label="Editable recipient workbench"><div><span>INTERACTIVE RECIPIENT WORKBENCH</span><b>Put your own recipients through the target check.</b><p>Edit intended and proposed To, CC, and BCC fields. Compare exact resource keys and the local target outcome.</p></div><a href="mail-target-workbench.html?preset=hidden_bcc">Try the workbench ↗</a></section>
     <section class="scope-teaser" data-topic="recipients" aria-label="Recipient manifest counterexample"><div><span>COMPLETE RECIPIENT MANIFEST</span><b>One visible recipient. Two actual destinations.</b><p>A to-only target check misses an added BCC. Seven local cases compare it with a complete, host-owned recipient manifest.</p></div><a href="mail-target-lab.html?case=hidden_bcc">Inspect the second recipient ↗</a></section>
     <section class="scope-teaser" data-topic="recipients" aria-label="Target binding counterexample"><div><span>EXECUTABLE TARGET BINDING</span><b>Declared route. Different actual recipient.</b><p>Seven local cases show why a host must map the destination a tool will use before approving or dispatching it.</p></div><a href="target-binding-lab.html?case=forged_recipient">Inspect the mismatch ↗</a></section>
-    <section class="scope-teaser" data-topic="screens" aria-label="Real-screen contact continuity"><div><span>REAL-SCREEN FIELD STUDY</span><b>A bad policy erases the last call path after scrolling.</b><p>Two hashed production captures show why a declared interface policy also needs a contact-continuity constraint.</p></div><a href="field-contact-continuity.html">Inspect the real screen ↗</a></section>
+    <section class="scope-teaser field-card" data-topic="screens" aria-label="Real-screen contact continuity"><div class="field-intro"><span>REAL-SCREEN FIELD STUDY / TWO CAPTURED VIEWPORTS</span><b>The last call path is the test.</b><p>At the top, a repeated number can look expendable. After scrolling, the fixed dock may be the only surviving call route. Compare two project-authored candidates against the captured desktop states.</p></div><div class="field-viewer" id="field-viewer" data-candidate="safe" role="group" aria-label="Compare contact continuity candidates"><p class="field-original">CAPTURED ORIGINAL · 3 call paths top / 2 after scroll</p><div class="field-switch" role="group" aria-label="Choose a candidate"><button type="button" data-field-candidate="safe" aria-pressed="true">Preserve the dock</button><button type="button" data-field-candidate="adverse" aria-pressed="false">Suppress the dock too</button></div><div class="field-rows"><div class="field-state"><span>TOP OF PAGE</span><strong id="field-top-count">2 call paths</strong><div class="field-rail" aria-hidden="true"><i></i></div></div><div class="field-state"><span>AFTER SCROLL</span><strong id="field-scroll-count">1 call path</strong><div class="field-rail" aria-hidden="true"><i></i></div></div></div><p class="field-result" id="field-result" role="status" aria-live="polite">Continuity guard passes · a call and email route remain in both states.</p></div><div class="field-links"><a href="field-contact-continuity.html">Inspect the captured screen ↗</a><a href="https://github.com/aruintelligence/aml-core/blob/main/experiments/2026-09-12/SECURITY_WEBSITE_FIELD_PILOTS.md">View active pilot registry ↗</a></div><p class="field-caveat">Project-authored candidates evaluated against two hashed desktop captures. The production site was not changed; no visitor outcome was measured.</p></section>
     <section class="scope-teaser" data-topic="calls" aria-label="Action Boundary Studio"><div><span>ACTION BOUNDARY STUDIO</span><b>Draw the line before the call.</b><p>Edit the proposal and the host policy together. Inspect the exact decision, then export and recheck a portable calculation bundle.</p></div><a href="action-boundary-studio.html">Open the Studio ↗</a></section>
     <section class="scope-teaser" data-topic="calls" aria-label="Policy scope counterexample"><div><span>POLICY X-RAY</span><b>Same address. Different message.</b><p>An unreviewed exact route admits a changed body. See what a digest-bound host decision changes in eight executable cases.</p></div><a href="action-policy-scope.html?case=changed_body#cases">Inspect the counterexample ↗</a></section>
 
@@ -290,6 +293,19 @@ <h2>No magic. No false certainty.</h2>
       }
     });
   </script>
+  <script>
+    const fieldViewer=document.querySelector("#field-viewer");
+    fieldViewer.querySelectorAll("[data-field-candidate]").forEach(button=>button.addEventListener("click",()=>{
+      const adverse=button.dataset.fieldCandidate==="adverse";
+      fieldViewer.dataset.candidate=adverse?"adverse":"safe";
+      fieldViewer.querySelectorAll("[data-field-candidate]").forEach(option=>option.setAttribute("aria-pressed",String(option===button)));
+      document.querySelector("#field-top-count").textContent=adverse?"1 call path":"2 call paths";
+      document.querySelector("#field-scroll-count").textContent=adverse?"0 call paths":"1 call path";
+      document.querySelector("#field-result").textContent=adverse?
+        "Continuity guard rejects · no observed call path remains after scrolling.":
+        "Continuity guard passes · a call and email route remain in both states.";
+    }));
+  </script>
   <script type="module" src="./home-hero.js?v=home-trace-1"></script>
 </body>
 </html>