docs: align PTY-002 layout experiment to approved master

docs/design-authority/pages/PTY-002-readiness-review/experiments/README.md

@@ -12,9 +12,18 @@ Open `layout-experiments.html` in a browser. The selector switches between:
 - **C / container plus compact rule**: uses the same container model, then
   switches the command rail to a two-row grid when the contained canvas is
   narrow enough to protect labels and hit targets.
+- **D / PTY-002 approved base plus container**: uses the approved PTY-002
+  composition itself, with its warning frames, summary slots and command rail
+  geometry. The experiment only adds engine text to those authored slots; it
+  does not draw a second card, button frame or command icon over the master.
+  This isolates the base-image mismatch from the layout question.
 
 The representative captures are under `captures/`. The intended review case is
 `844x390` with English at 130%; `1280x720` shows how the same rules expand.
+Compare D first: A-C intentionally retain the older PTY-001 clean master to
+make the source of the overlap visible. D is the corrected reference for the
+next Owner review: approved static geometry remains visible and dynamic copy
+is aligned to the existing top, summary, warning and bottom label slots.
 
 For a local preview from the repository root:
 

docs/design-authority/pages/PTY-002-readiness-review/experiments/layout-experiments.html

@@ -15,6 +15,7 @@
     main { min-height: 0; display: grid; place-items: center; padding: 16px; }
     .canvas { position: relative; width: min(100%, calc((100vh - 76px) * 1.7777778)); aspect-ratio: 16 / 9; overflow: hidden; container-type: size; background: #c1a472; box-shadow: 0 0 0 1px #c49e5b, 0 14px 40px #0b1519; }
     .master { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
+    .master.approved-master { display: none; }
     .overlay { position: absolute; inset: 0; font-size: clamp(8px, 1.3cqw, 16px); color: #28241e; }
     .top { position: absolute; left: 14%; right: 7%; top: 2.5%; height: 9%; display: flex; align-items: center; gap: 2%; padding: 0 2%; }
     .top .slot { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -70,8 +71,38 @@
     .variant-c .command-rail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); }
     .variant-c .command { width: auto; min-width: 0; }
     .variant-c .command.primary { width: auto; }
+    .variant-d .master:not(.approved-master) { display: none; }
+    .variant-d .master.approved-master { display: block; }
+    .variant-d .actor img { visibility: hidden; }
+    .variant-d .top { left: 0; right: 0; top: 0; height: 13%; display: block; padding: 0; }
+    .variant-d .top .slot { position: absolute; top: 25%; height: 46%; text-align: left; }
+    .variant-d .top .slot:nth-child(1) { left: 20%; width: 13%; }
+    .variant-d .top .slot:nth-child(2) { left: 40%; width: 13%; }
+    .variant-d .top .slot:nth-child(3) { left: 61%; width: 13%; }
+    .variant-d .top .slot:nth-child(4) { left: 82%; width: 13%; }
+    .variant-d .summary { left: 4%; width: 73%; top: 62%; height: 19%; border: 0; border-radius: 0; background: transparent; padding: 0; display: block; }
+    .variant-d .summary .lead { display: none; }
+    .variant-d .summary .facts { position: absolute; top: 17%; left: 3%; right: 3%; height: 32%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; font-size: .74em; }
+    .variant-d .risk-hint { display: none; }
+    .variant-d .warnings { right: 1%; top: 56%; width: 21%; height: 23%; gap: 0; }
+    .variant-d .warning { min-height: 0; height: 33.333%; padding: 0 7% 0 20%; background: transparent; border: 0; color: #514331; font-size: .66em; line-height: 1.1; }
+    .variant-d .command-rail { left: 0; right: 0; bottom: 0; height: 16%; display: block; }
+    .variant-d .command { position: absolute; top: 0; bottom: 0; min-width: 0; border: 0; border-radius: 0; background: transparent; color: #28241e; display: block; padding: 0; font-size: .78em; }
+    .variant-d .command:nth-child(1) { left: 19%; width: 8%; }
+    .variant-d .command:nth-child(2) { left: 28%; width: 9%; }
+    .variant-d .command:nth-child(3) { left: 40%; width: 21%; }
+    .variant-d .command:nth-child(4) { left: 71%; width: 10%; }
+    .variant-d .command.primary { background: transparent; }
+    .variant-d .command img { display: none; }
+    .variant-d .command span { position: absolute; left: 4%; right: 4%; bottom: 25%; font-size: .82em; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     @container (max-width: 560px) {
       .variant-c .summary { top: 58%; height: 22%; }
+      .variant-d .summary { top: 61%; height: 20%; }
+      .variant-d .summary .facts { top: 14%; left: 2%; right: 2%; height: 34%; font-size: .68em; }
+      .variant-d .warnings { right: 1%; top: 56%; width: 22%; height: 24%; }
+      .variant-d .warning { font-size: .60em; padding-left: 19%; }
+      .variant-d .command-rail { height: 17%; }
+      .variant-d .command { font-size: .68em; }
       .variant-c .command-rail { height: 22%; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); row-gap: 4%; }
       .variant-c .command.primary { grid-column: span 1; }
       .summary .facts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 4%; }
@@ -88,11 +119,13 @@
       <option value="a">A · 当前绝对坐标</option>
       <option value="b">B · Flex 容器布局</option>
       <option value="c">C · 容器 + 窄屏紧凑规则</option>
+      <option value="d">D · PTY-002 正确底图 + 容器</option>
     </select>
   </header>
   <main>
     <section class="canvas variant-a" id="canvas" aria-label="PTY-002 layout preview">
       <img class="master" src="/runtime/assets/entry/pty_002_readiness/readiness-static-master.png" alt="">
+      <img class="master approved-master" src="/docs/design-authority/pages/PTY-002-readiness-review/approved/v001/master.png" alt="">
       <div class="overlay">
         <div class="top">
           <div class="slot"><strong>READY</strong><small>冻结</small></div>
@@ -130,7 +163,7 @@
     const canvas = document.getElementById('canvas');
     const params = new URLSearchParams(location.search);
     const initial = params.get('variant');
-    if (initial && ['a','b','c'].includes(initial)) select.value = initial;
+    if (initial && ['a','b','c','d'].includes(initial)) select.value = initial;
     function applyVariant() {
       canvas.className = `canvas variant-${select.value}`;
       history.replaceState(null, '', `?variant=${select.value}`);