diff --git a/crates/cli/src/component_capture.rs b/crates/cli/src/component_capture.rs
index baac66267..e76d01e30 100644
--- a/crates/cli/src/component_capture.rs
+++ b/crates/cli/src/component_capture.rs
@@ -132,6 +132,7 @@ fn render_page(
           return {html:document.documentElement.outerHTML,svg:document.querySelectorAll('svg').length,images:document.images.length,controls:document.querySelectorAll('button,input,select,textarea,a[href]').length};
         })()"#.replace("ASSEMBLED", if assembled { "true" } else { "false" });
         let dom=page.evaluate_value_in_world(&world,&inspect).map_err(|e|e.message)?;
+        let fonts = page.evaluate_value_in_world(&world, include_str!("component_fonts.js")).map_err(|e| e.message)?;
         let isolated = if let Some(targets) = isolation {
             page.set_transparent_background().map_err(|e| e.message)?;
             let script = format!("({})({})", include_str!("component_isolation.js"), targets);
@@ -179,6 +180,7 @@ fn render_page(
             proof["isolation"] = isolated;
             proof["capturedDomSha256"] = json!(hash(captured_dom.as_str().unwrap().as_bytes()));
         }
+        proof["fonts"] = fonts;
         if assembled {
             proof["kind"] = json!("assembled-page");
             proof["scriptPolicy"] = json!("pinned-local-and-inline; network-api-and-workers-disabled");
@@ -321,6 +323,23 @@ mod tests {
     use super::*;
     #[test]
     #[ignore = "requires Chromium"]
+    fn missing_primary_font_is_rejected_and_pinned_font_is_captured() {
+        let png = impeccable_comp::png_io::encode_png(&impeccable_comp::raster::create_image(300,100,[255;4]),&[]).unwrap();
+        let html = "<style>body{margin:0}#piece{font:20px 'ReviewFixtureFont',sans-serif}</style><div id='piece'>Hotel review</div>";
+        let mut inputs = BTreeMap::from([("comp.png".into(),png),("index.html".into(),html.as_bytes().to_vec())]);
+        let packet = json!({"schemaVersion":2,"stage":"components","comp":{"url":"/files/comp.png","width":300,"height":100},"components":[{"id":"piece","box":{"x":0,"y":0,"w":1,"h":1},"preview":{"kind":"page","url":"/files/index.html","selector":"#piece"},"dependencies":[]}]});
+        let error = NativeComponentCapturer.capture(&mut packet.clone(),&inputs).err().unwrap();
+        assert!(error.contains("Primary fonts unavailable: ReviewFixtureFont"), "{error}");
+        inputs.insert("index.html".into(),format!("<style>@font-face{{font-family:ReviewFixtureFont;src:url(font.ttf)}}</style>{html}").into_bytes());
+        inputs.insert("font.ttf".into(),include_bytes!("../../../ui/component-review/fonts/albertsans.ttf").to_vec());
+        let mut local = packet.clone();local["components"][0]["dependencies"]=json!(["font.ttf"]);
+        let capture=NativeComponentCapturer.capture(&mut local,&inputs).unwrap();
+        assert_eq!(capture.evidence["components"][0]["views"]["preview"]["fonts"]["primaryFamilies"],json!(["ReviewFixtureFont"]));
+        inputs.insert("index.html".into(),html.replace("'ReviewFixtureFont',sans-serif","sans-serif").into_bytes());
+        NativeComponentCapturer.capture(&mut packet.clone(),&inputs).unwrap();
+    }
+    #[test]
+    #[ignore = "requires Chromium"]
     fn shared_document_reports_all_missing_images_before_decode_and_names_corrupt_images() {
         let image = impeccable_comp::raster::create_image(40,40,[255,255,255,255]);
         let png = impeccable_comp::png_io::encode_png(&image,&[]).unwrap();
diff --git a/crates/cli/src/component_fonts.js b/crates/cli/src/component_fonts.js
new file mode 100644
index 000000000..96e33e67e
--- /dev/null
+++ b/crates/cli/src/component_fonts.js
@@ -0,0 +1,27 @@
+// document.fonts.ready/check alone do not detect a removed @font-face: the
+// browser considers a system fallback successful. Probe each visible text
+// run's primary family against distinct generic fallbacks without changing DOM.
+(() => {
+  const generic = new Set(['serif','sans-serif','monospace','cursive','fantasy','system-ui','ui-serif','ui-sans-serif','ui-monospace','ui-rounded','math','fangsong']);
+  const families = new Set();
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+  for (let node; (node = walker.nextNode());) {
+    if (!node.textContent.trim()) continue;
+    const element = node.parentElement;
+    if (!element || element.closest('script,style,noscript')) continue;
+    const style = getComputedStyle(element);
+    if (style.visibility === 'hidden' || style.display === 'none' || style.opacity === '0') continue;
+    const range = document.createRange(); range.selectNodeContents(node);
+    if (![...range.getClientRects()].some(r => r.width > 0 && r.height > 0)) continue;
+    const first = (style.fontFamily.match(/"[^"]*"|'[^']*'|[^,]+/g) || [])[0]?.trim();
+    const family = first?.replace(/^(['"])(.*)\1$/, '$2');
+    if (family && !generic.has(family.toLowerCase())) families.add(family);
+  }
+  const ctx = document.createElement('canvas').getContext('2d');
+  const sample = 'mmmmmmmmWWWWiiii0123456789';
+  const width = font => { ctx.font = `72px ${font}`; return ctx.measureText(sample).width; };
+  const missing = [...families].filter(family => ['monospace','serif','sans-serif'].every(base =>
+    Math.abs(width(`${JSON.stringify(family)}, ${base}`) - width(base)) < .001));
+  if (missing.length) throw Error(`Primary fonts unavailable: ${missing.join(', ')}. Preserve the intended typography: include local font files and @font-face declarations in the preview dependencies. Removing font imports produces a fallback preview, not a faithful component capture.`);
+  return {primaryFamilies: [...families].sort(), check: 'visible-primary-family-availability-v1'};
+})()
diff --git a/crates/context/assets/component-review.js b/crates/context/assets/component-review.js
index 2979ff6ce..3b465252b 100644
--- a/crates/context/assets/component-review.js
+++ b/crates/context/assets/component-review.js
@@ -1,4 +1,4 @@
-(()=>{function Ni(p,o){let x=o?.changes[p],e=o?.feedback?.[p],n=e?.decision??(o?.submitted?o.draft.decisions[p]:void 0),a=x?.kind==="unchanged"&&(x.carried??(o?.submitted&&n?.action==="approve"))===!0;return{change:x,prior:n,feedbackRound:e?.round??o?.packet.round,carried:a,label:x?.kind==="added"?"New component":x?.kind==="changed"?"Review again":a?"Approval kept":n?.action==="revise"?"Changes still requested":"Awaiting review"}}function I(p,o,x){let e=o.decisions[p.id],n=e?.revision===p.revision?e:void 0,a=Ni(p.id,x);if(n?.action==="approve")return{kind:"approved",label:a.carried?"Approval kept":"Approved",priority:3};if(n?.action==="revise")return{kind:"feedback",label:"Feedback ready",priority:2};return{kind:"pending",label:a.change?.kind==="changed"?"Review again":a.change?.kind==="added"?"New · review needed":"Not reviewed",priority:a.change?.kind==="changed"||a.change?.kind==="added"?0:1}}function Jo(p){return{packetRevision:p.revision,decisions:{},missing:[],inventoryConfirmed:!1}}function ir(p){return Object.values(p).every(Number.isFinite)&&p.x>=0&&p.y>=0&&p.w>0&&p.h>0&&p.x+p.w<=1.00001&&p.y+p.h<=1.00001}function zi(p,o){let x=p.components.map((g)=>o.decisions[g.id]?.revision===g.revision?o.decisions[g.id]:void 0),e=x.filter((g)=>g?.action==="approve").length,n=x.filter((g)=>g?.action==="revise").length,a=x.length-e-n,b=n>0||o.missing.length>0;return{approved:e,revisions:n,pending:a,hasFeedback:b,canSubmit:o.packetRevision===p.revision&&o.missing.every((g)=>g.name.trim()&&ir(g.box))&&(b||!a&&o.inventoryConfirmed)}}function $o(p,o){let x={...o.decisions};for(let e of p.components)if(!x[e.id]||x[e.id].revision!==e.revision)x[e.id]={revision:e.revision,action:"approve",feedback:"",split:!1};return{...o,decisions:x}}function Ko(p,o){if(!zi(p,o).canSubmit)throw Error("Review is incomplete or stale");return{schemaVersion:1,requestId:p.id,...structuredClone(o)}}function yi(p){let o=p.preview.kind==="page"||p.preview.sourceKind==="page",x=p.preview.sourceKind==="page";return{code:o,captured:x,label:o?p.medium.match(/html|css|svg/i)?p.medium:"HTML / CSS / SVG":"Raster",caption:o?x?p.preview.isolation?"Component only":"Region capture":"Live component":"Produced asset",fileLabel:x?"Open captured preview":"Open source image"}}function Qo(p,o,x){let e=p.components.findIndex((n)=>n.id===x);for(let n=1;n<=p.components.length;n++){let a=p.components[(e+n)%p.components.length];if(I(a,o).kind==="pending")return a.id}}function Wi(p,o){if(!o.reviewGroup||!yi(o).code)return[o];return p.components.filter((x)=>x.reviewGroup===o.reviewGroup&&yi(x).code)}function Mi(p,o,x,e,n=[]){let a=e?Wi(p,x):[x];if(a.length===1)return[x];return a.filter((b)=>I(b,o).kind==="pending"&&(b.id===x.id||!n.includes(b.id)))}function Yo(p,o,x){let e=new Set;return p.components.flatMap((n)=>{if(e.has(n.id))return[];let a=Wi(p,n);a.forEach((s)=>e.add(s.id));let b=a.filter((s)=>I(s,o,x).kind==="pending"),g=a.filter((s)=>I(s,o,x).kind==="feedback"),z=b[0]??g[0]??n,_=b.length?"pending":g.length?"feedback":"approved";return[{id:n.id,members:a,representative:z,pending:b.length,kind:_,label:a.length>1?n.reviewGroup.replace(/[-_]+/g," ").replace(/^./,(s)=>s.toUpperCase()):n.name,box:{x:Math.min(...a.map((s)=>s.box.x)),y:Math.min(...a.map((s)=>s.box.y)),w:Math.max(...a.map((s)=>s.box.x+s.box.w))-Math.min(...a.map((s)=>s.box.x)),h:Math.max(...a.map((s)=>s.box.y+s.box.h))-Math.min(...a.map((s)=>s.box.y))},stateLabel:b.length?a.length>1?`${b.length} to review`:I(z,o,x).label:g.length?a.length>1?`${g.length} ${g.length===1?"needs":"need"} work`:"Feedback ready":"Approved"}]})}function io(p,o){let x=new Set(o.preview.isolation?.excludedComponents??[]),e=o.box,n=p.components.filter((a)=>{if(a.id===o.id)return!1;if(x.has(a.id))return!0;let b=a.box,g=Math.max(0,Math.min(e.x+e.w,b.x+b.w)-Math.max(e.x,b.x))*Math.max(0,Math.min(e.y+e.h,b.y+b.h)-Math.max(e.y,b.y));return b.w*b.h<e.w*e.h&&g/(b.w*b.h)>=0.98});return{description:o.note.trim(),related:n,excluded:n.filter((a)=>x.has(a.id))}}function oo(p,o,x,e,n){let a=n==="fit"?Math.min(1,x/p,e/o):n;return{scale:a,width:p*a,height:o*a}}function ro(p,o,x,e){if(x<=0||e<=x)return 0;return Math.max(0,Math.min(1,((p-o)/x-0.08)/0.84))*(e-x)}var _o=`
+(()=>{function Li(a,o){let x=o?.changes[a],e=o?.feedback?.[a],n=e?.decision??(o?.submitted?o.draft.decisions[a]:void 0),p=x?.kind==="unchanged"&&(x.carried??(o?.submitted&&n?.action==="approve"))===!0;return{change:x,prior:n,feedbackRound:e?.round??o?.packet.round,carried:p,label:x?.kind==="added"?"New component":x?.kind==="changed"?"Review again":p?"Approval kept":n?.action==="revise"?"Changes still requested":"Awaiting review"}}function O(a,o,x){let e=o.decisions[a.id],n=e?.revision===a.revision?e:void 0,p=Li(a.id,x);if(n?.action==="approve")return{kind:"approved",label:p.carried?"Approval kept":"Approved",priority:3};if(n?.action==="revise")return{kind:"feedback",label:"Feedback ready",priority:2};return{kind:"pending",label:p.change?.kind==="changed"?"Review again":p.change?.kind==="added"?"New · review needed":"Not reviewed",priority:p.change?.kind==="changed"||p.change?.kind==="added"?0:1}}function Ko(a){return{packetRevision:a.revision,decisions:{},missing:[],inventoryConfirmed:!1}}function or(a){return Object.values(a).every(Number.isFinite)&&a.x>=0&&a.y>=0&&a.w>0&&a.h>0&&a.x+a.w<=1.00001&&a.y+a.h<=1.00001}function ki(a,o){let x=a.components.map((h)=>o.decisions[h.id]?.revision===h.revision?o.decisions[h.id]:void 0),e=x.filter((h)=>h?.action==="approve").length,n=x.filter((h)=>h?.action==="revise").length,p=x.length-e-n,y=n>0||o.missing.length>0;return{approved:e,revisions:n,pending:p,hasFeedback:y,canSubmit:o.packetRevision===a.revision&&o.missing.every((h)=>h.name.trim()&&or(h.box))&&(y||!p&&o.inventoryConfirmed)}}function Qo(a,o){let x={...o.decisions};for(let e of a.components)if(!x[e.id]||x[e.id].revision!==e.revision)x[e.id]={revision:e.revision,action:"approve",feedback:"",split:!1};return{...o,decisions:x}}function Yo(a,o){if(!ki(a,o).canSubmit)throw Error("Review is incomplete or stale");return{schemaVersion:1,requestId:a.id,...structuredClone(o)}}function zi(a){let o=a.preview.kind==="page"||a.preview.sourceKind==="page",x=a.preview.sourceKind==="page";return{code:o,captured:x,label:o?a.medium.match(/html|css|svg/i)?a.medium:"HTML / CSS / SVG":"Raster",caption:o?x?a.preview.isolation?"Component only":"Region capture":"Live component":"Produced asset",fileLabel:x?"Open captured preview":"Open source image"}}function _o(a,o,x){let e=a.components.findIndex((n)=>n.id===x);for(let n=1;n<=a.components.length;n++){let p=a.components[(e+n)%a.components.length];if(O(p,o).kind==="pending")return p.id}}function Wi(a,o){if(!o.reviewGroup||!zi(o).code)return[o];return a.components.filter((x)=>x.reviewGroup===o.reviewGroup&&zi(x).code)}function Vi(a,o,x,e,n=[]){let p=e?Wi(a,x):[x];if(p.length===1)return[x];return p.filter((y)=>O(y,o).kind==="pending"&&(y.id===x.id||!n.includes(y.id)))}function Xo(a,o,x){let e=new Set;return a.components.flatMap((n)=>{if(e.has(n.id))return[];let p=Wi(a,n);p.forEach((s)=>e.add(s.id));let y=p.filter((s)=>O(s,o,x).kind==="pending"),h=p.filter((s)=>O(s,o,x).kind==="feedback"),v=y[0]??h[0]??n,N=y.length?"pending":h.length?"feedback":"approved";return[{id:n.id,members:p,representative:v,pending:y.length,kind:N,label:p.length>1?n.reviewGroup.replace(/[-_]+/g," ").replace(/^./,(s)=>s.toUpperCase()):n.name,box:{x:Math.min(...p.map((s)=>s.box.x)),y:Math.min(...p.map((s)=>s.box.y)),w:Math.max(...p.map((s)=>s.box.x+s.box.w))-Math.min(...p.map((s)=>s.box.x)),h:Math.max(...p.map((s)=>s.box.y+s.box.h))-Math.min(...p.map((s)=>s.box.y))},stateLabel:y.length?p.length>1?`${y.length} to review`:O(v,o,x).label:h.length?p.length>1?`${h.length} ${h.length===1?"needs":"need"} work`:"Feedback ready":"Approved"}]})}function Gi(a,o){let x=new Set(o.preview.isolation?.excludedComponents??[]),e=o.box,n=a.components.filter((p)=>{if(p.id===o.id)return!1;if(x.has(p.id))return!0;let y=p.box,h=Math.min(e.x+e.w,y.x+y.w)-Math.max(e.x,y.x),v=Math.min(e.y+e.h,y.y+y.h)-Math.max(e.y,y.y);return y.w*y.h<e.w*e.h&&h*a.comp.width>1&&v*a.comp.height>1});return{description:o.note.trim(),related:n,excluded:n.filter((p)=>x.has(p.id))}}function ro(a,o,x,e,n){let p=n==="fit"?Math.min(1,x/a,e/o):n;return{scale:p,width:a*p,height:o*p}}function eo(a,o,x,e){if(x<=0||e<=x)return 0;return Math.max(0,Math.min(1,((a-o)/x-0.08)/0.84))*(e-x)}var Eo=`
 :host{height:var(--component-review-height,100dvh);min-height:0;overflow:hidden}
 .review{height:100%;max-width:none;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg,#fafafa)}
 .review>header{flex-shrink:0;padding:16px 24px;margin:0;border-bottom:1px solid var(--line);gap:16px}.review>header>div{min-width:0}.review h1{font-size:30px;line-height:1}.review>header p{font-size:12px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review .badge{font-size:11px}
@@ -53,7 +53,7 @@
  .review>.inventory-section{height:160px;padding:6px 14px}.inventory-section>.section-head{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;min-height:34px;margin-bottom:4px}.inventory-section h2{display:none}.inventory-filters{flex:1;width:auto;min-width:0;padding:2px}.inventory-filters button{padding:4px 6px;font-size:10px;min-height:28px}.inventory-filters b{margin-left:3px}.tray-actions #show-all{display:none}.tray-actions #toggle-tray{padding:6px;min-width:32px;min-height:32px}.tray-actions #toggle-tray span{display:none}.tray-actions svg{width:16px;height:16px}.review>.inventory-section.tray-collapsed{height:46px;padding:6px 14px}.review>.inventory-section.tray-expanded{height:160px}.inventory .item{flex-basis:130px;grid-template-rows:auto 1fr auto;padding:6px}.inventory .item-thumb{display:none}.inventory.all{display:flex;overflow-x:auto;overflow-y:hidden}.inventory .item strong{font-size:11px;min-height:22px}.inventory .state{font-size:10px}.inventory .item-number{font-size:10px;min-height:14px}.inventory-empty{padding:8px 0;font-size:12px}
  .review>footer{padding:8px 14px calc(8px + env(safe-area-inset-bottom));gap:8px;flex-direction:column;align-items:stretch}.review>footer>div:first-child{gap:10px;justify-content:space-between}.review>footer #approve-rest{font-size:10px;min-height:32px;max-width:47%;padding:5px 8px}.review>footer .check{font-size:10px;max-width:48%;gap:4px}.review>footer .check input{width:14px;height:14px}.review>footer .submit-area{justify-content:space-between;gap:10px}.review>footer .submit-area p{font-size:10px;max-width:22ch}.review>footer .primary{min-height:34px;font-size:12px;padding:6px 10px}
 }
-`;var Lo=`
+`;var No=`
 .review-peers{display:grid;gap:8px;padding:8px 0 12px;font-size:12px}
 .review-peers strong span{font-weight:400}.review-peers>div{display:flex;flex-wrap:wrap;gap:4px}
 .review-peers button{min-width:28px;min-height:28px;padding:3px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:inherit}
@@ -94,7 +94,7 @@
 @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
 .item-medium{margin-left:auto;font-weight:400;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);min-height:16px}.item-medium .utility-icon{width:14px;height:14px;flex-shrink:0}.material>.utility-icon{width:18px;height:18px;align-self:center;color:var(--teal)}
 .feedback-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.feedback-actions .primary{margin-left:auto;display:inline-flex;align-items:center;gap:10px}.feedback-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.feedback-hint,.shortcut-hint{font-size:12px;color:var(--muted)}.feedback-hint{margin-top:6px}.shortcut-hint{flex-basis:100%;text-align:right}.record-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;font-size:13px}.record-verdict span{font-size:11px;color:var(--muted)}.review>.record-footer{font-size:12px;color:var(--muted);flex-wrap:wrap;gap:6px 16px}.saved-feedback{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.decision-notice{display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:10px}.decision-notice>span{flex:1;overflow-wrap:anywhere}.decision-notice button{color:var(--teal);flex-shrink:0}.review-summary{padding:4px 2px}.completion-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e6efe8;color:#28625e;float:left;margin:0 10px 8px 0}.completion-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}.completion-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);border:0;background:transparent;padding:0;font-size:12px;text-align:left}.completion-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex-shrink:0}.queue-complete #approve-rest{display:none}.review-summary h2{font-size:22px;line-height:32px}.review-summary p{clear:both;margin-top:8px;color:var(--muted)}.summary-decisions{margin-top:24px;display:grid}.summary-decisions button{display:grid;grid-template-columns:1fr auto;gap:6px 16px;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;background:transparent}.summary-decisions strong{font-size:13px;font-weight:500}.summary-decisions span{font-size:12px;color:var(--teal)}.summary-decisions small{grid-column:1/-1;font-size:12px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
-`+_o+`
+`+Eo+`
 .review-form:has(#feedback-form){max-height:75%;min-height:0;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;padding-top:8px}
 #feedback-form{display:flex;flex-direction:column;flex:1;min-height:0}
 /* Leave room inside the scrollport for the 2px focus ring and 3px offset. */
@@ -188,49 +188,51 @@
 .review-scope .separate-reviews,.review-scope .scope-excluded{font-size:11px;color:var(--muted)}
 .instance-row .review-scope{margin:12px 0 0}
 #comparison-dialog .review-scope{flex:none}
-`;var or={chevronDown:'<path d="m6 9 6 6 6-6"/>',code:'<path d="m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18"/>',image:'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 6-6 4 4 3-3 5 5"/>',expand:'<path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',compact:'<path d="M3 9h6V3m6 0v6h6M9 21v-6H3m12 6v-6h6M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',hideTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12 3 3 2 3-2"/>',showTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12-4 3-3 3 3"/>',next:'<path d="M5 12h14m-6-6 6 6-6 6"/>',mark:'<path d="M9 4H4v5m11-5h5v5M4 15v5h5m11-5v5h-5M8 12h8m-4-4v8"/>',close:'<path d="m6 6 12 12M6 18 18 6"/>',undo:'<path d="M4 10h9a6 6 0 0 1 0 12M4 10l5-5m-5 5 5 5" transform="translate(0 -2)"/>',external:'<path d="M14 3h7v7m0-7L10 14m0-10H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-5"/>',zoom:'<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>'};function W(p){return`<svg class="utility-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${or[p]}</svg>`}var l=(p)=>p.replace(/[&<>"']/g,(o)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[o]),di=(p)=>`${p*100}%`,S=(p)=>{let o=new URL(p,location.href);if(!["http:","https:"].includes(o.protocol))throw Error("Unsupported preview URL");return l(o.href)};function Xo(p,o,x){let e=p.attachShadow({mode:"open"}),n=structuredClone(x.initialDraft??Jo(o)),a=o.stage==="hero"&&o.components.length===1&&!n.missing.length,b=()=>[...o.components].sort((f,m)=>I(f,n,x.history).priority-I(m,n,x.history).priority),g=b().find((f)=>I(f,n,x.history).kind!=="approved")?.id??o.components[0]?.id,z=zi(o,n).pending?"pending":"reviewed",_=!1,s=!1,y=x.completed??!1,Vi="",q={},k=!!x.completed||!zi(o,n).pending,F=null,C=!0,Eo=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘Enter":"Ctrl+Enter",ti=!1,H=!1,Ji=!1,Zi=null,li=!1,L=!0,mi=!1,K="comp",eo=K,ei="fit",ki="checker",T=!1,hi="isolated",Gi,no="fit",ni=null,pi=null,ai=null,ji='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8 3 3 7-7"/></svg>',$i='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 11 1 2 2-1 7-7-3-3-7 7v2Z"/></svg>',po=(f,m)=>{if(f.stage==="hero")return"";let Q=io(f,m);if(!Q.related.length)return"";let gi=Q.related.map((P)=>l(P.name)).join(" · ");return`<div class="review-scope" aria-label="Review scope"><p><strong>Reviewing</strong> ${l(Q.description||m.name)}</p><p class="separate-reviews"><strong>Separate review items</strong> ${gi}</p>${Q.excluded.length?`<p class="scope-excluded">Hidden in this preview: ${Q.excluded.map((P)=>l(P.name)).join(" · ")}</p>`:""}</div>`},Ti=(f)=>`left:${di(f.x)};top:${di(f.y)};width:${di(f.w)};height:${di(f.h)}`;function bi(f){e.getElementById(f)?.focus({preventScroll:!0})}function No(f){let m=Qo(o,n,f);if(k=!m,m)g=m;K="component",T=!1,ti=!1,ei="fit",hi="isolated",C=!0,z=k?"reviewed":"pending";let Q=()=>{w(),bi(k?"review-summary":q[g]?"feedback":"approve")};if(k&&H&&Zi)Zi(Q);else Q()}async function ao(){if(s||y||T||Object.keys(q).length)return;s=!0,Vi="",w();try{await x.onSubmit(Ko(o,n)),y=!0,k=!0,_=!1,z="reviewed"}catch(f){Vi=f instanceof Error?f.message:"Could not save. Try again."}finally{s=!1,w()}}function Ui(f){if(s||y||T||Ji)return;let m=o.components.find((Z)=>Z.id===g);if(!m||!Mi(o,n,m,C,Object.keys(q)).length)return;let Q=n.decisions[m.id],gi=Q?.revision===m.revision?Q:void 0,P=Mi(o,n,m,C,Object.keys(q));F={id:m.id,name:P.length>1?`${m.reviewGroup} · ${P.length} instances`:m.name,action:f,previous:Object.fromEntries(P.map((Z)=>[Z.id,n.decisions[Z.id]?{...n.decisions[Z.id]}:void 0]))};let Ki=q[m.id]??gi;for(let Z of P)n.decisions[Z.id]={revision:Z.revision,action:f,feedback:f==="revise"?Ki?.feedback??"":"",split:f==="revise"&&(Ki?.split??!1)};if(delete q[m.id],mi)L=!0,mi=!1;if(a)n.inventoryConfirmed=f==="approve",F=null,ao();else No(m.id)}function Wo(){if(s||y||T||Ji)return;let f=o.components.find((gi)=>gi.id===g);if(!f||!Mi(o,n,f,C,Object.keys(q)).length)return;let m=n.decisions[f.id],Q=m?.revision===f.revision?m:void 0;if(q[f.id]??={feedback:Q?.feedback??"",split:Q?.split??!1},L&&(e.querySelector(".workbench")?.clientHeight??0)<420)mi=!0,L=!1;k=!1,w(),bi("feedback")}function xo(f){let m=`missing-${crypto.randomUUID()}`;n.missing.push({id:m,name:"Missing component",feedback:"",box:f}),n.inventoryConfirmed=!1,k=!1,g=m,K="component",_=!1,ni=null,pi=null,w(),e.querySelector("#missing-name")?.focus()}function w(){if(ai?.disconnect(),y||k&&!a)H=!1;let f=e.activeElement,m=f?.id,Q=f?.dataset.select,gi=window.scrollX,P=window.scrollY,Ki=e.querySelector(".inventory")?.scrollLeft??0,Z=Gi===g,Zo=K==="component"&&(!Z||eo!==K);eo=K;let Go=Z?e.querySelector(".inspection-content")?.scrollTop??0:0,To=Z&&(e.querySelector(".changed-files")?.open??!1),Uo=e.querySelector(".comparison-slot")?.clientHeight??200,to=e.querySelector(".pan-viewport"),lo=Gi===g&&no===ei,Ao=lo?to?.scrollLeft??0:0,Bo=lo?to?.scrollTop??0:0;Gi=g,no=ei;let c=o.components.find((i)=>i.id===g),M=n.missing.find((i)=>i.id===g),Y=Yo(o,n,x.history),X=Y.find((i)=>i.members.some((r)=>r.id===g)),R=!!X&&X.members.length>1&&C,ho=R?X.box:c?.box??M?.box,go=X?Y.indexOf(X)+1:Y.length+n.missing.findIndex((i)=>i.id===g)+1,fo=c?n.decisions[c.id]:void 0,xi=fo?.revision===c?.revision?fo:void 0,Qi=c?q[c.id]:void 0,fi=Object.keys(q).length>0,so=c?Wi(o,c):[],si=c?Mi(o,n,c,C,Object.keys(q)):[],Io=c?!o.components.some((i)=>!si.some((r)=>r.id===i.id)&&I(i,n).kind==="pending"):!1,Ai=F&&!y?`<div class="decision-notice"><span role="status">${l(F.name)} ${F.action==="approve"?"approved":"flagged for repair"}.</span><button id="undo-decision" class="quiet">Undo</button></div>`:"",j=zi(o,n),V=x.history,U=c?Ni(c.id,V):void 0,wi=V?.packet.components.find((i)=>i.id===c?.id),ii=T&&!!wi,d=ii?wi:c,E=ii?V.packet:o,wo=Object.values(V?.changes??{}),co=wo.filter((i)=>i.kind==="changed").length,mo=wo.filter((i)=>i.kind==="added").length,Bi=o.components.filter((i)=>I(i,n,V).kind==="approved"&&Ni(i.id,V).carried).length,Ii=(i)=>{let r=I(i,n,V);return y&&r.kind==="feedback"?{...r,label:"Changes requested"}:r},qi=Y.filter((i)=>i.kind==="pending").length,Ro=Y.length-qi+n.missing.length,bo=Y.filter((i)=>z==="all"||i.kind==="pending"===(z==="pending")).map((i)=>i.representative),Oo=(i)=>Y.find((r)=>r.members.some((t)=>t.id===i))?.label??i,Do=[j.revisions+n.missing.length?`${j.revisions+n.missing.length} feedback ready`:"",Bi?`${Bi} ${Bi===1?"approval":"approvals"} kept`:"",co?`${co} changed`:"",mo?`${mo} added`:"",V?.removed.length?`${V.removed.length} removed`:""].filter(Boolean).join(" · "),So=Vi||(fi?"Save or cancel your open feedback before sending.":y?x.preview?"Preview submitted. No run changed.":"Review submitted.":j.hasFeedback?"Ready to send for corrections.":j.pending?`${qi} left to review`:!n.inventoryConfirmed?"Confirm the map is complete.":"Ready to continue."),oi=d?yi(d):null,Ri=d?.preview.kind==="image"&&!oi?.code,Oi=Ri||d?.material?.alpha==="transparent",O=!!(d?.context&&hi==="context"),vo=d&&(O?d.context?.kind!=="image":d.preview.kind==="page"),Di=O&&d?.context?d.context.url:d?.preview.url,uo=d?io(E,d):null,Fo=oi?.code?`${oi.label} · ${oi.captured?"captured from code":"live preview"}`:d?.material?`${d.material.alpha==="transparent"?"Transparent":d.material.alpha==="opaque"?"Opaque":"Transparency unverified"} ${d.material.format}`:"Raster · transparency unverified";e.innerHTML=`<style>${Lo}</style><section class="review ${a?"assembled-review":""}" aria-label="${a?"Assembled page review":"Component review"}" style="--comp-background:${/^#[0-9a-f]{6}$/i.test(o.comp.background??"")?o.comp.background:"#eeeeee"}">
-      <header><div><h1>${y?"Review record.":a?"Review the assembled page.":"Review the components."}</h1><p>${l(o.title)} <span>· Round ${o.round}</span></p></div>${y?'<span class="badge">Submitted · read-only</span>':x.preview?'<span class="badge">Interactive preview</span>':""}</header>
+
+.reference-layer{position:absolute;box-sizing:border-box;border:1px dashed #fff;outline:1px solid #173e43;pointer-events:none;z-index:2}.reference-layer>span{position:absolute;top:0;left:0;max-width:100%;padding:1px 4px;background:#173e43;color:white;font:10px/1.4 var(--font-sans,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s}.instance-row:hover .reference-layer>span,.instance-row:focus-visible .reference-layer>span,.pan-viewport:hover .reference-layer>span,.pan-viewport:focus .reference-layer>span{opacity:1}
+`;var rr={chevronDown:'<path d="m6 9 6 6 6-6"/>',code:'<path d="m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18"/>',image:'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 6-6 4 4 3-3 5 5"/>',expand:'<path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',compact:'<path d="M3 9h6V3m6 0v6h6M9 21v-6H3m12 6v-6h6M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',hideTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12 3 3 2 3-2"/>',showTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12-4 3-3 3 3"/>',next:'<path d="M5 12h14m-6-6 6 6-6 6"/>',mark:'<path d="M9 4H4v5m11-5h5v5M4 15v5h5m11-5v5h-5M8 12h8m-4-4v8"/>',close:'<path d="m6 6 12 12M6 18 18 6"/>',undo:'<path d="M4 10h9a6 6 0 0 1 0 12M4 10l5-5m-5 5 5 5" transform="translate(0 -2)"/>',external:'<path d="M14 3h7v7m0-7L10 14m0-10H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-5"/>',zoom:'<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>'};function T(a){return`<svg class="utility-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${rr[a]}</svg>`}var l=(a)=>a.replace(/[&<>"']/g,(o)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[o]),gi=(a)=>`${a*100}%`,C=(a)=>{let o=new URL(a,location.href);if(!["http:","https:"].includes(o.protocol))throw Error("Unsupported preview URL");return l(o.href)};function Zo(a,o,x){let e=a.attachShadow({mode:"open"}),n=structuredClone(x.initialDraft??Ko(o)),p=o.stage==="hero"&&o.components.length===1&&!n.missing.length,y=()=>[...o.components].sort((f,c)=>O(f,n,x.history).priority-O(c,n,x.history).priority),h=y().find((f)=>O(f,n,x.history).kind!=="approved")?.id??o.components[0]?.id,v=ki(o,n).pending?"pending":"reviewed",N=!1,s=!1,z=x.completed??!1,Ji="",M={},k=!!x.completed||!ki(o,n).pending,P=null,ii=!0,Lo=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘Enter":"Ctrl+Enter",li=!1,V=!1,$i=!1,Ti=null,di=!1,L=!0,bi=!1,Y="comp",no=Y,ni="fit",ji="checker",A=!1,hi="isolated",Ui,ao="fit",ai=null,pi=null,xi=null,qi='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8 3 3 7-7"/></svg>',Ki='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 11 1 2 2-1 7-7-3-3-7 7v2Z"/></svg>',po=(f,c)=>{if(f.stage==="hero")return"";let j=Gi(f,c);if(!j.related.length)return"";let q=j.related.map((_)=>l(_.name)).join(" · ");return`<div class="review-scope" aria-label="Review scope"><p><strong>Reviewing</strong> ${l(j.description||c.name)}</p><p class="separate-reviews"><strong>Outlined · reviewed separately</strong> ${q}</p>${j.excluded.length?`<p class="scope-excluded">Hidden in this preview: ${j.excluded.map((_)=>l(_.name)).join(" · ")}</p>`:""}</div>`},Qi=(f)=>`left:${gi(f.x)};top:${gi(f.y)};width:${gi(f.w)};height:${gi(f.h)}`,xo=(f,c)=>f.stage==="hero"?"":Gi(f,c).related.map((j)=>{let q=c.box,_=j.box,fi=Math.max(q.x,_.x),X=Math.max(q.y,_.y),Bi={x:(fi-q.x)/q.w,y:(X-q.y)/q.h,w:Math.max(0,Math.min(q.x+q.w,_.x+_.w)-fi)/q.w,h:Math.max(0,Math.min(q.y+q.h,_.y+_.h)-X)/q.h};return`<span class="reference-layer" style="${Qi(Bi)}" title="Reviewed separately: ${l(j.name)}" aria-label="Reviewed separately: ${l(j.name)}"><span>${l(j.name)}</span></span>`}).join("");function vi(f){e.getElementById(f)?.focus({preventScroll:!0})}function Wo(f){let c=_o(o,n,f);if(k=!c,c)h=c;Y="component",A=!1,li=!1,ni="fit",hi="isolated",ii=!0,v=k?"reviewed":"pending";let j=()=>{w(),vi(k?"review-summary":M[h]?"feedback":"approve")};if(k&&V&&Ti)Ti(j);else j()}async function to(){if(s||z||A||Object.keys(M).length)return;s=!0,Ji="",w();try{await x.onSubmit(Yo(o,n)),z=!0,k=!0,N=!1,v="reviewed"}catch(f){Ji=f instanceof Error?f.message:"Could not save. Try again."}finally{s=!1,w()}}function Ai(f){if(s||z||A||$i)return;let c=o.components.find((X)=>X.id===h);if(!c||!Vi(o,n,c,ii,Object.keys(M)).length)return;let j=n.decisions[c.id],q=j?.revision===c.revision?j:void 0,_=Vi(o,n,c,ii,Object.keys(M));P={id:c.id,name:_.length>1?`${c.reviewGroup} · ${_.length} instances`:c.name,action:f,previous:Object.fromEntries(_.map((X)=>[X.id,n.decisions[X.id]?{...n.decisions[X.id]}:void 0]))};let fi=M[c.id]??q;for(let X of _)n.decisions[X.id]={revision:X.revision,action:f,feedback:f==="revise"?fi?.feedback??"":"",split:f==="revise"&&(fi?.split??!1)};if(delete M[c.id],bi)L=!0,bi=!1;if(p)n.inventoryConfirmed=f==="approve",P=null,to();else Wo(c.id)}function Go(){if(s||z||A||$i)return;let f=o.components.find((q)=>q.id===h);if(!f||!Vi(o,n,f,ii,Object.keys(M)).length)return;let c=n.decisions[f.id],j=c?.revision===f.revision?c:void 0;if(M[f.id]??={feedback:j?.feedback??"",split:j?.split??!1},L&&(e.querySelector(".workbench")?.clientHeight??0)<420)bi=!0,L=!1;k=!1,w(),vi("feedback")}function lo(f){let c=`missing-${crypto.randomUUID()}`;n.missing.push({id:c,name:"Missing component",feedback:"",box:f}),n.inventoryConfirmed=!1,k=!1,h=c,Y="component",N=!1,ai=null,pi=null,w(),e.querySelector("#missing-name")?.focus()}function w(){if(xi?.disconnect(),z||k&&!p)V=!1;let f=e.activeElement,c=f?.id,j=f?.dataset.select,q=window.scrollX,_=window.scrollY,fi=e.querySelector(".inventory")?.scrollLeft??0,X=Ui===h,Bi=Y==="component"&&(!X||no!==Y);no=Y;let To=X?e.querySelector(".inspection-content")?.scrollTop??0:0,Uo=X&&(e.querySelector(".changed-files")?.open??!1),Ao=e.querySelector(".comparison-slot")?.clientHeight??200,go=e.querySelector(".pan-viewport"),ho=Ui===h&&ao===ni,Bo=ho?go?.scrollLeft??0:0,Io=ho?go?.scrollTop??0:0;Ui=h,ao=ni;let m=o.components.find((i)=>i.id===h),J=n.missing.find((i)=>i.id===h),E=Xo(o,n,x.history),W=E.find((i)=>i.members.some((r)=>r.id===h)),D=!!W&&W.members.length>1&&ii,fo=D?W.box:m?.box??J?.box,so=W?E.indexOf(W)+1:E.length+n.missing.findIndex((i)=>i.id===h)+1,wo=m?n.decisions[m.id]:void 0,ti=wo?.revision===m?.revision?wo:void 0,Yi=m?M[m.id]:void 0,si=Object.keys(M).length>0,co=m?Wi(o,m):[],wi=m?Vi(o,n,m,ii,Object.keys(M)):[],Ro=m?!o.components.some((i)=>!wi.some((r)=>r.id===i.id)&&O(i,n).kind==="pending"):!1,Ii=P&&!z?`<div class="decision-notice"><span role="status">${l(P.name)} ${P.action==="approve"?"approved":"flagged for repair"}.</span><button id="undo-decision" class="quiet">Undo</button></div>`:"",H=ki(o,n),$=x.history,B=m?Li(m.id,$):void 0,ci=$?.packet.components.find((i)=>i.id===m?.id),oi=A&&!!ci,d=oi?ci:m,Z=oi?$.packet:o,mo=Object.values($?.changes??{}),bo=mo.filter((i)=>i.kind==="changed").length,vo=mo.filter((i)=>i.kind==="added").length,Ri=o.components.filter((i)=>O(i,n,$).kind==="approved"&&Li(i.id,$).carried).length,Oi=(i)=>{let r=O(i,n,$);return z&&r.kind==="feedback"?{...r,label:"Changes requested"}:r},Hi=E.filter((i)=>i.kind==="pending").length,Oo=E.length-Hi+n.missing.length,uo=E.filter((i)=>v==="all"||i.kind==="pending"===(v==="pending")).map((i)=>i.representative),Do=(i)=>E.find((r)=>r.members.some((t)=>t.id===i))?.label??i,So=[H.revisions+n.missing.length?`${H.revisions+n.missing.length} feedback ready`:"",Ri?`${Ri} ${Ri===1?"approval":"approvals"} kept`:"",bo?`${bo} changed`:"",vo?`${vo} added`:"",$?.removed.length?`${$.removed.length} removed`:""].filter(Boolean).join(" · "),Fo=Ji||(si?"Save or cancel your open feedback before sending.":z?x.preview?"Preview submitted. No run changed.":"Review submitted.":H.hasFeedback?"Ready to send for corrections.":H.pending?`${Hi} left to review`:!n.inventoryConfirmed?"Confirm the map is complete.":"Ready to continue."),ri=d?zi(d):null,Di=d?.preview.kind==="image"&&!ri?.code,Si=Di||d?.material?.alpha==="transparent",S=!!(d?.context&&hi==="context"),yo=d&&(S?d.context?.kind!=="image":d.preview.kind==="page"),Fi=S&&d?.context?d.context.url:d?.preview.url,zo=d?Gi(Z,d):null,Co=ri?.code?`${ri.label} · ${ri.captured?"captured from code":"live preview"}`:d?.material?`${d.material.alpha==="transparent"?"Transparent":d.material.alpha==="opaque"?"Opaque":"Transparency unverified"} ${d.material.format}`:"Raster · transparency unverified";e.innerHTML=`<style>${No}</style><section class="review ${p?"assembled-review":""}" aria-label="${p?"Assembled page review":"Component review"}" style="--comp-background:${/^#[0-9a-f]{6}$/i.test(o.comp.background??"")?o.comp.background:"#eeeeee"}">
+      <header><div><h1>${z?"Review record.":p?"Review the assembled page.":"Review the components."}</h1><p>${l(o.title)} <span>· Round ${o.round}</span></p></div>${z?'<span class="badge">Submitted · read-only</span>':x.preview?'<span class="badge">Interactive preview</span>':""}</header>
       ${x.preview?'<p class="preview-note">Historical hotel artwork for testing this interface. Decisions stay in this preview; no run is changed.</p>':""}
-      ${V&&!a?`<section class="round-summary" aria-label="Changes since previous round"><p><strong>${qi} ${qi===1?"item":"items"} to review</strong><span>${Do}</span></p>${j.pending?`<button id="review-changes" class="icon-button" aria-label="Next to review" title="Next to review">${W("next")}</button>`:""}${V.removed.length?`<details><summary>Removed from the map</summary><p>${V.removed.map((i)=>l(i.name)).join(" · ")}. Confirm these omissions are intentional before accepting the map.</p></details>`:""}</section>`:""}
-      ${!a?`<div class="mobile-panes" role="group" aria-label="Inspection view"><button id="show-comp" aria-pressed="${K==="comp"}">Approved comp</button><button id="show-component" aria-pressed="${K==="component"}">Component ${go}</button></div>`:""}
-      <div class="workbench" data-mobile-pane="${K}">${!a?`<svg class="connector" aria-hidden="true"><path /></svg>
+      ${$&&!p?`<section class="round-summary" aria-label="Changes since previous round"><p><strong>${Hi} ${Hi===1?"item":"items"} to review</strong><span>${So}</span></p>${H.pending?`<button id="review-changes" class="icon-button" aria-label="Next to review" title="Next to review">${T("next")}</button>`:""}${$.removed.length?`<details><summary>Removed from the map</summary><p>${$.removed.map((i)=>l(i.name)).join(" · ")}. Confirm these omissions are intentional before accepting the map.</p></details>`:""}</section>`:""}
+      ${!p?`<div class="mobile-panes" role="group" aria-label="Inspection view"><button id="show-comp" aria-pressed="${Y==="comp"}">Approved comp</button><button id="show-component" aria-pressed="${Y==="component"}">Component ${so}</button></div>`:""}
+      <div class="workbench" data-mobile-pane="${Y}">${!p?`<svg class="connector" aria-hidden="true"><path /></svg>
         <section class="reference" aria-label="Approved composition">
-          <div class="section-head"><h2>Approved comp</h2>${!y?`<button id="mark" class="label-icon" aria-pressed="${_}">${W(_?"close":"mark")}${_?"Cancel":"Mark missing"}</button>`:""}</div>
-          <div class="map-space"><div class="map ${_?"marking":""}" style="aspect-ratio:${o.comp.width}/${o.comp.height}">
-            <img class="comp" src="${S(o.comp.url)}" alt="Approved composition for ${l(o.title)}" draggable="false">
-            ${ho&&!k?`<div class="region" style="${Ti(ho)}"></div>`:""}
-            ${Y.map((i,r)=>{let t=i.representative,h={kind:i.kind,label:i.stateLabel},B=!k&&X?.id===i.id;return`<button class="pin ${h.kind} ${B?"selected":""}" data-select="${l(t.id)}" style="left:${di(Math.min(0.96,i.box.x+i.box.w/2))};top:${di(Math.max(0.035,i.box.y))}" aria-label="Inspect ${l(i.label)}${i.members.length>1?` · ${i.members.length} instances`:""} — ${l(h.label)}" title="${r+1}. ${l(i.label)} · ${l(h.label)}" aria-pressed="${B}">${h.kind==="approved"?ji:h.kind==="feedback"?$i:""}<span>${r+1}</span>${i.members.length>1?`<small>×${i.members.length}</small>`:""}</button>`}).join("")}
-            ${R&&!k?X.members.map((i)=>`<div class="region instance-region" style="${Ti(i.box)}"></div>`).join(""):""}
-            ${n.missing.map((i,r)=>`<button class="pin feedback ${!k&&g===i.id?"selected":""}" data-select="${l(i.id)}" style="left:${di(i.box.x+i.box.w/2)};top:${di(i.box.y)}" aria-label="Inspect missing ${l(i.name)}" title="Missing: ${l(i.name)}">${$i}<span>${Y.length+r+1}</span></button>`).join("")}
+          <div class="section-head"><h2>Approved comp</h2>${!z?`<button id="mark" class="label-icon" aria-pressed="${N}">${T(N?"close":"mark")}${N?"Cancel":"Mark missing"}</button>`:""}</div>
+          <div class="map-space"><div class="map ${N?"marking":""}" style="aspect-ratio:${o.comp.width}/${o.comp.height}">
+            <img class="comp" src="${C(o.comp.url)}" alt="Approved composition for ${l(o.title)}" draggable="false">
+            ${fo&&!k?`<div class="region" style="${Qi(fo)}"></div>`:""}
+            ${E.map((i,r)=>{let t=i.representative,g={kind:i.kind,label:i.stateLabel},R=!k&&W?.id===i.id;return`<button class="pin ${g.kind} ${R?"selected":""}" data-select="${l(t.id)}" style="left:${gi(Math.min(0.96,i.box.x+i.box.w/2))};top:${gi(Math.max(0.035,i.box.y))}" aria-label="Inspect ${l(i.label)}${i.members.length>1?` · ${i.members.length} instances`:""} — ${l(g.label)}" title="${r+1}. ${l(i.label)} · ${l(g.label)}" aria-pressed="${R}">${g.kind==="approved"?qi:g.kind==="feedback"?Ki:""}<span>${r+1}</span>${i.members.length>1?`<small>×${i.members.length}</small>`:""}</button>`}).join("")}
+            ${D&&!k?W.members.map((i)=>`<div class="region instance-region" style="${Qi(i.box)}"></div>`).join(""):""}
+            ${n.missing.map((i,r)=>`<button class="pin feedback ${!k&&h===i.id?"selected":""}" data-select="${l(i.id)}" style="left:${gi(i.box.x+i.box.w/2)};top:${gi(i.box.y)}" aria-label="Inspect missing ${l(i.name)}" title="Missing: ${l(i.name)}">${Ki}<span>${E.length+r+1}</span></button>`).join("")}
 
             <div class="draw-box" hidden></div>
           </div></div>
-          <div class="map-legend" aria-label="Map status legend"><span><i class="legend-pending">#</i> To review</span><span><i class="legend-feedback">${$i}</i> ${y?"Changes requested":"Feedback ready"}</span><span><i class="legend-approved">${ji}</i> Approved</span></div>
-          ${_?'<div class="map-caption">Draw around the missing piece.<button id="add-box">Add an adjustable box</button></div>':""}
+          <div class="map-legend" aria-label="Map status legend"><span><i class="legend-pending">#</i> To review</span><span><i class="legend-feedback">${Ki}</i> ${z?"Changes requested":"Feedback ready"}</span><span><i class="legend-approved">${qi}</i> Approved</span></div>
+          ${N?'<div class="map-caption">Draw around the missing piece.<button id="add-box">Add an adjustable box</button></div>':""}
         </section>`:""}
-        <section class="inspector" aria-label="${a?"Page comparison":"Selected component"}">
-          ${!a?`<div class="section-head"><h2>${k?"Review summary":`<span class="number">${go}</span> ${l(R?X.label:c?.name??M?.name??"Component")}`}</h2></div>`:""}<div class="inspection-content" role="region" aria-label="${a?"Page comparison":"Component comparison"}" tabindex="0">
-          ${k&&!a?`<section class="review-summary" id="review-summary" tabindex="-1"><div class="completion-mark" aria-hidden="true">${ji}</div><h2>${y?"Review sent.":"All components reviewed."}</h2><p>${j.approved} approved · ${j.revisions} flagged for repair${n.missing.length?` · ${n.missing.length} missing`:""}</p><p>${y?"Your decisions are saved.":j.hasFeedback?"Send your feedback to start the next repair round.":"Confirm nothing is missing, then approve and continue."}</p><div class="summary-decisions">${Y.map((i)=>{let r=i.representative,t=n.decisions[r.id],h=Ii(r);return`<button data-select="${l(r.id)}"><strong>${l(i.label)}</strong><span>${i.kind==="pending"?"Not reviewed":h.kind==="feedback"?"Needs work":"Approved"}</span>${t?.action==="revise"?`<small>${l(t.feedback||"No note — agent will diagnose.")}</small>`:""}</button>`}).join("")}${n.missing.map((i)=>`<button data-select="${l(i.id)}"><strong>${l(i.name)}</strong><span>Missing</span><small>${l(i.feedback)}</small></button>`).join("")}</div></section></div>${Ai?`<div class="review-form">${Ai}</div>`:""}`:c?`
-          ${V?`<div class="repair-context">
-            ${ii&&U?.prior?.action==="revise"?`<section class="previous-feedback" aria-label="Previous feedback"><h3>Previous feedback <span>· Round ${U.feedbackRound}</span></h3><blockquote>${l(U.prior.feedback||"No written feedback was supplied.")}</blockquote>${U.prior.split?"<p>Requested: split into separately reviewable components.</p>":""}</section>`:U?.carried?'<p class="kept-approval">Unchanged · approval kept</p>':""}
-            ${U?.change?.kind==="changed"?`<details class="changed-files" ${To?"open":""}><summary>${U.change.files.length?`${U.change.files.length} changed ${U.change.files.length===1?"file":"files"}`:U.change.reasons.includes("region")?"Region changed":wi?.note!==c.note?"Description changed · files unchanged":"Component definition changed · files unchanged"}</summary>${U.change.files.length?`<ul>${U.change.files.map((i)=>`<li>${l(i)}</li>`).join("")}</ul>`:""}${wi&&wi.note!==c.note?`<dl class="description-diff"><dt>Previous description</dt><dd>${l(wi.note)}</dd><dt>Current description</dt><dd>${l(c.note)}</dd></dl>`:""}</details>`:""}
+        <section class="inspector" aria-label="${p?"Page comparison":"Selected component"}">
+          ${!p?`<div class="section-head"><h2>${k?"Review summary":`<span class="number">${so}</span> ${l(D?W.label:m?.name??J?.name??"Component")}`}</h2></div>`:""}<div class="inspection-content" role="region" aria-label="${p?"Page comparison":"Component comparison"}" tabindex="0">
+          ${k&&!p?`<section class="review-summary" id="review-summary" tabindex="-1"><div class="completion-mark" aria-hidden="true">${qi}</div><h2>${z?"Review sent.":"All components reviewed."}</h2><p>${H.approved} approved · ${H.revisions} flagged for repair${n.missing.length?` · ${n.missing.length} missing`:""}</p><p>${z?"Your decisions are saved.":H.hasFeedback?"Send your feedback to start the next repair round.":"Confirm nothing is missing, then approve and continue."}</p><div class="summary-decisions">${E.map((i)=>{let r=i.representative,t=n.decisions[r.id],g=Oi(r);return`<button data-select="${l(r.id)}"><strong>${l(i.label)}</strong><span>${i.kind==="pending"?"Not reviewed":g.kind==="feedback"?"Needs work":"Approved"}</span>${t?.action==="revise"?`<small>${l(t.feedback||"No note — agent will diagnose.")}</small>`:""}</button>`}).join("")}${n.missing.map((i)=>`<button data-select="${l(i.id)}"><strong>${l(i.name)}</strong><span>Missing</span><small>${l(i.feedback)}</small></button>`).join("")}</div></section></div>${Ii?`<div class="review-form">${Ii}</div>`:""}`:m?`
+          ${$?`<div class="repair-context">
+            ${oi&&B?.prior?.action==="revise"?`<section class="previous-feedback" aria-label="Previous feedback"><h3>Previous feedback <span>· Round ${B.feedbackRound}</span></h3><blockquote>${l(B.prior.feedback||"No written feedback was supplied.")}</blockquote>${B.prior.split?"<p>Requested: split into separately reviewable components.</p>":""}</section>`:B?.carried?'<p class="kept-approval">Unchanged · approval kept</p>':""}
+            ${B?.change?.kind==="changed"?`<details class="changed-files" ${Uo?"open":""}><summary>${B.change.files.length?`${B.change.files.length} changed ${B.change.files.length===1?"file":"files"}`:B.change.reasons.includes("region")?"Region changed":ci?.note!==m.note?"Description changed · files unchanged":"Component definition changed · files unchanged"}</summary>${B.change.files.length?`<ul>${B.change.files.map((i)=>`<li>${l(i)}</li>`).join("")}</ul>`:""}${ci&&ci.note!==m.note?`<dl class="description-diff"><dt>Previous description</dt><dd>${l(ci.note)}</dd><dt>Current description</dt><dd>${l(m.note)}</dd></dl>`:""}</details>`:""}
           </div>`:""}
 
-          <div class="comparison-slot"><div class="comparison-panel ${R?"group-overview":""}"><h2 class="expanded-title">${l(R?X.label:d.name)}</h2>${so.length>1?`<div class="review-peers"><strong>${so.length} instances</strong>${!R?'<button id="all-instances" class="quiet">All instances</button>':'<span class="group-hint">Select to inspect</span>'}</div>`:""}<div class="compare-toolbar">${wi?`<div class="round-switch" role="group" aria-label="Preview version"><button id="current-round" aria-label="Current · round ${o.round}" title="Current · round ${o.round}" aria-pressed="${!ii}">Current</button><button id="previous-round" aria-label="Previous · round ${V.packet.round}" title="Previous · round ${V.packet.round}" aria-pressed="${ii}">Previous</button></div>`:""}<label class="zoom-control" title="Comparison zoom · based on comp pixels">${W("zoom")}<select id="zoom" aria-label="Comparison zoom">${[["fit","Fit"],["1","100%"],["2","200%"],["4","400%"]].map(([i,r])=>`<option value="${i}" ${String(ei)===i?"selected":""}>${r}</option>`).join("")}</select>${W("chevronDown")}</label><button id="overlay" class="overlay-control" aria-label="Overlay comp" title="Overlay approved comp" aria-pressed="${ti}"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="10" height="10"/><rect x="7" y="7" width="10" height="10"/></svg><span class="overlay-label">Overlay</span></button><div class="comparison-actions" role="group" aria-label="Comparison view actions"><button id="expand-comparison" class="icon-button" aria-label="${H?"Restore comparison":"Enlarge comparison"}" title="${H?"Restore comparison (Esc)":"Enlarge comparison"}" aria-expanded="${H}">${W(H?"compact":"expand")}</button>${d?.preview.kind==="image"?`<a class="icon-button source-link" href="${S(Di)}" target="_blank" rel="noopener" aria-label="${O?"Open context capture":oi.fileLabel}" title="${O?"Open context capture":oi.fileLabel}">${W("external")}</a>`:""}</div></div>
-          ${R?`<div class="instance-grid" aria-label="All instances of ${l(X.label)}"><div class="instance-grid-labels"><span>Full comp crop</span><span>Component preview</span></div>${X.members.map((i,r)=>{let t=Ii(i);return`<button class="instance-row ${t.kind}" data-instance="${l(i.id)}" aria-label="Inspect instance ${r+1}: ${l(i.name)} — ${l(t.label)}"><span class="instance-caption"><strong>${l(i.name)}</strong><span>${l(t.label)}</span></span><span class="instance-pair"><span class="instance-reference" style="width:min(100%,${i.box.w*o.comp.width}px,${180*i.box.w*o.comp.width/(i.box.h*o.comp.height)}px);aspect-ratio:${i.box.w*o.comp.width}/${i.box.h*o.comp.height}"><img src="${S(o.comp.url)}" alt="Comp: ${l(i.name)}" loading="lazy" style="width:${100/i.box.w}%;left:${-100*i.box.x/i.box.w}%;top:${-100*i.box.y/i.box.h}%"></span><span class="instance-produced" style="width:min(100%,${i.box.w*o.comp.width}px,${180*i.box.w*o.comp.width/(i.box.h*o.comp.height)}px);aspect-ratio:${i.box.w*o.comp.width}/${i.box.h*o.comp.height}">${i.preview.kind==="image"?`<img src="${S(i.preview.url)}" alt="Produced: ${l(i.name)}" loading="lazy">`:i.thumbnail?`<img src="${S(i.thumbnail.url)}" alt="Preview: ${l(i.name)}" loading="lazy">`:"Open live component"}</span></span>${po(o,i)}</button>`}).join("")}</div>`:""}
-          ${!R&&d?po(E,d):""}<div class="compare">
-            <figure><figcaption>${ii?`Comp · Round ${V.packet.round}`:a?"Approved comp":uo?.related.length?"Full comp crop":"In the comp"}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${S(E.comp.url)}" alt="Reference region for ${l(d.name)}" style="width:${100/d.box.w}%;left:${-100*d.box.x/d.box.w}%;top:${-100*d.box.y/d.box.h}%"></div></div></figure>
-            <figure><figcaption>${ii?`Previous · Round ${V.packet.round}`:a?"Assembled page":O?"In context":V?`${oi.caption} · Round ${o.round}`:oi.caption}</figcaption><div class="pan-viewport" aria-label="Produced comparison canvas" tabindex="0"><div class="output crop-stage ${Oi&&!O&&!vo&&ki==="checker"?"checker":""}">${!vo?`<img class="asset" src="${S(Di)}" alt="Produced ${l(d.name)}" style="object-position:${l(d.preview.position??"center")}">`:`<iframe aria-hidden="true" title="Rendered ${l(d.name)}" src="${S(Di)}" sandbox="" tabindex="-1" width="${E.comp.width}" height="${E.comp.height}"></iframe>`}${ti?`<img class="crop-image overlay-image" src="${S(E.comp.url)}" alt="Reference overlay" style="width:${100/d.box.w}%;left:${-100*d.box.x/d.box.w}%;top:${-100*d.box.y/d.box.h}%">`:""}</div></div></figure>
+          <div class="comparison-slot"><div class="comparison-panel ${D?"group-overview":""}"><h2 class="expanded-title">${l(D?W.label:d.name)}</h2>${co.length>1?`<div class="review-peers"><strong>${co.length} instances</strong>${!D?'<button id="all-instances" class="quiet">All instances</button>':'<span class="group-hint">Select to inspect</span>'}</div>`:""}<div class="compare-toolbar">${ci?`<div class="round-switch" role="group" aria-label="Preview version"><button id="current-round" aria-label="Current · round ${o.round}" title="Current · round ${o.round}" aria-pressed="${!oi}">Current</button><button id="previous-round" aria-label="Previous · round ${$.packet.round}" title="Previous · round ${$.packet.round}" aria-pressed="${oi}">Previous</button></div>`:""}<label class="zoom-control" title="Comparison zoom · based on comp pixels">${T("zoom")}<select id="zoom" aria-label="Comparison zoom">${[["fit","Fit"],["1","100%"],["2","200%"],["4","400%"]].map(([i,r])=>`<option value="${i}" ${String(ni)===i?"selected":""}>${r}</option>`).join("")}</select>${T("chevronDown")}</label><button id="overlay" class="overlay-control" aria-label="Overlay comp" title="Overlay approved comp" aria-pressed="${li}"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="10" height="10"/><rect x="7" y="7" width="10" height="10"/></svg><span class="overlay-label">Overlay</span></button><div class="comparison-actions" role="group" aria-label="Comparison view actions"><button id="expand-comparison" class="icon-button" aria-label="${V?"Restore comparison":"Enlarge comparison"}" title="${V?"Restore comparison (Esc)":"Enlarge comparison"}" aria-expanded="${V}">${T(V?"compact":"expand")}</button>${d?.preview.kind==="image"?`<a class="icon-button source-link" href="${C(Fi)}" target="_blank" rel="noopener" aria-label="${S?"Open context capture":ri.fileLabel}" title="${S?"Open context capture":ri.fileLabel}">${T("external")}</a>`:""}</div></div>
+          ${D?`<div class="instance-grid" aria-label="All instances of ${l(W.label)}"><div class="instance-grid-labels"><span>Full comp crop</span><span>Component preview</span></div>${W.members.map((i,r)=>{let t=Oi(i);return`<button class="instance-row ${t.kind}" data-instance="${l(i.id)}" aria-label="Inspect instance ${r+1}: ${l(i.name)} — ${l(t.label)}"><span class="instance-caption"><strong>${l(i.name)}</strong><span>${l(t.label)}</span></span><span class="instance-pair"><span class="instance-reference" style="width:min(100%,${i.box.w*o.comp.width}px,${180*i.box.w*o.comp.width/(i.box.h*o.comp.height)}px);aspect-ratio:${i.box.w*o.comp.width}/${i.box.h*o.comp.height}"><img src="${C(o.comp.url)}" alt="Comp: ${l(i.name)}" loading="lazy" style="width:${100/i.box.w}%;left:${-100*i.box.x/i.box.w}%;top:${-100*i.box.y/i.box.h}%">${xo(o,i)}</span><span class="instance-produced" style="width:min(100%,${i.box.w*o.comp.width}px,${180*i.box.w*o.comp.width/(i.box.h*o.comp.height)}px);aspect-ratio:${i.box.w*o.comp.width}/${i.box.h*o.comp.height}">${i.preview.kind==="image"?`<img src="${C(i.preview.url)}" alt="Produced: ${l(i.name)}" loading="lazy">`:i.thumbnail?`<img src="${C(i.thumbnail.url)}" alt="Preview: ${l(i.name)}" loading="lazy">`:"Open live component"}</span></span>${po(o,i)}</button>`}).join("")}</div>`:""}
+          ${!D&&d?po(Z,d):""}<div class="compare">
+            <figure><figcaption>${oi?`Comp · Round ${$.packet.round}`:p?"Approved comp":zo?.related.length?"Full comp crop":"In the comp"}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${C(Z.comp.url)}" alt="Reference region for ${l(d.name)}" style="width:${100/d.box.w}%;left:${-100*d.box.x/d.box.w}%;top:${-100*d.box.y/d.box.h}%">${xo(Z,d)}</div></div></figure>
+            <figure><figcaption>${oi?`Previous · Round ${$.packet.round}`:p?"Assembled page":S?"In context":$?`${ri.caption} · Round ${o.round}`:ri.caption}</figcaption><div class="pan-viewport" aria-label="Produced comparison canvas" tabindex="0"><div class="output crop-stage ${Si&&!S&&!yo&&ji==="checker"?"checker":""}">${!yo?`<img class="asset" src="${C(Fi)}" alt="Produced ${l(d.name)}" style="object-position:${l(d.preview.position??"center")}">`:`<iframe aria-hidden="true" title="Rendered ${l(d.name)}" src="${C(Fi)}" sandbox="" tabindex="-1" width="${Z.comp.width}" height="${Z.comp.height}"></iframe>`}${li?`<img class="crop-image overlay-image" src="${C(Z.comp.url)}" alt="Reference overlay" style="width:${100/d.box.w}%;left:${-100*d.box.x/d.box.w}%;top:${-100*d.box.y/d.box.h}%">`:""}</div></div></figure>
           </div>
-          ${Oi||d.context?`<div class="view-controls">${d.context?`<div role="group" aria-label="Component view"><button id="isolated" aria-pressed="${!O}">${Ri?"Asset only":"Component only"}</button><button id="context" aria-pressed="${O}">In context</button></div>`:""}${Oi?`<div class="background-options" role="group" aria-label="Asset preview background"><button id="background-checker" class="swatch-button" aria-label="Checkerboard background" title="Checkerboard background" aria-pressed="${ki==="checker"}" ${O?"disabled":""}><span class="background-swatch checker"></span></button><button id="background-page" class="swatch-button" aria-label="${E.comp.background?"Page color":"Neutral"} background" title="${E.comp.background?"Page color":"Neutral"} background" aria-pressed="${ki==="page"}" ${O?"disabled":""}><span class="background-swatch page-swatch"></span></button></div>`:""}</div>`:""}
-          </div></div>${!a&&!R?`<div class="component-details"><div class="material">${W(oi.code?"code":"image")}<strong>${l(Fo)}</strong><span>${d?.material?`${d.material.width} × ${d.material.height} px`:""}</span></div>${E.stage==="components"&&oi?.captured&&!d?.preview.isolation?'<p class="layering">Legacy region capture · may include overlapping components.</p>':""}${d?.context?.layering&&(Ri||O)?`<p class="layering">${l(d.context.layering)}</p>`:""}
-          <p class="component-note">${!uo?.related.length?l(d.note):""}</p>
-          </div>`:""}</div><div class="review-form">${Ai}${ii?'<p class="previous-notice">Viewing the previous round. Return to Current to make a decision.</p>':""}${y?`<div class="record-verdict"><strong>${xi?.action==="approve"?"Approved":xi?.action==="revise"?"Changes requested":"Not reviewed"}</strong><span>Submitted in round ${o.round} · read-only</span></div>`:`<div class="decisions" role="group" aria-label="Decision for ${l(c.name)}">${!a?`<div class="decision-title"><strong>Your review <span>Round ${o.round}</span></strong>${ii?"<p>Return to Current to review this round.</p>":""}</div>`:""}<button id="approve" ${!si.length?"disabled":""} class="decision-approve ${xi?.action==="approve"?"approved":""}" aria-pressed="${xi?.action==="approve"}">${a?s?"Sending…":"Approve & continue":si.length>1?`Approve ${si.length} instances`:"Looks good"}</button><button id="revise" ${!si.length?"disabled":""} class="decision-revise ${xi?.action==="revise"?"revise":""}" aria-pressed="${xi?.action==="revise"}">${si.length>1?`Revise ${si.length} instances`:"Needs work"}</button>${xi&&!a&&!R?`<button id="clear" class="quiet icon-button" aria-label="Clear decision" title="Clear decision">${W("undo")}</button>`:""}</div>`}
-          ${Qi?`<form id="feedback-form"><div class="feedback-fields"><label class="feedback-field">What needs to change?<textarea id="feedback" aria-describedby="feedback-hint">${l(Qi.feedback)}</textarea></label><p id="feedback-hint" class="feedback-hint">Optional — leave blank for the agent to diagnose.</p>${!a?`<label class="check"><input id="split" type="checkbox" ${Qi.split?"checked":""}> Split into separately reviewable components</label>`:""}</div><div class="feedback-actions"><button id="cancel-feedback" type="button" class="quiet">Cancel</button><button id="save-feedback" type="submit" class="primary">${a?"Send feedback":Io?"Save & finish review":"Save & next"} <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></button><span class="shortcut-hint">${Eo}</span></div></form>`:xi?.action==="revise"?`<p class="saved-feedback">${l(xi.feedback||"No note — agent will diagnose.")}</p>`:""}
-          ${a?`<p class="page-review-status" role="status">${l(Vi||(y?"Your decision is saved.":s?"Sending…":Qi?"":"Approval confirms the composition and that nothing is missing."))}</p>`:""}</div>`:M?`<p>This piece will be added to the unresolved inventory.</p><label class="feedback-field">Name<input id="missing-name" value="${l(M.name)}"></label><label class="feedback-field">What is missing?<textarea id="missing-feedback">${l(M.feedback)}</textarea></label><div class="coordinates">${["x","y","w","h"].map((i)=>`<label>${{x:"Left",y:"Top",w:"Width",h:"Height"}[i]} %<input type="number" data-coordinate="${i}" value="${Math.round(M.box[i]*1000)/10}" min="0" max="100" step="0.1"></label>`).join("")}</div><button id="remove-missing">Remove this mark</button></div>`:"<p>No components supplied.</p></div>"}
+          ${Si||d.context?`<div class="view-controls">${d.context?`<div role="group" aria-label="Component view"><button id="isolated" aria-pressed="${!S}">${Di?"Asset only":"Component only"}</button><button id="context" aria-pressed="${S}">In context</button></div>`:""}${Si?`<div class="background-options" role="group" aria-label="Asset preview background"><button id="background-checker" class="swatch-button" aria-label="Checkerboard background" title="Checkerboard background" aria-pressed="${ji==="checker"}" ${S?"disabled":""}><span class="background-swatch checker"></span></button><button id="background-page" class="swatch-button" aria-label="${Z.comp.background?"Page color":"Neutral"} background" title="${Z.comp.background?"Page color":"Neutral"} background" aria-pressed="${ji==="page"}" ${S?"disabled":""}><span class="background-swatch page-swatch"></span></button></div>`:""}</div>`:""}
+          </div></div>${!p&&!D?`<div class="component-details"><div class="material">${T(ri.code?"code":"image")}<strong>${l(Co)}</strong><span>${d?.material?`${d.material.width} × ${d.material.height} px`:""}</span></div>${Z.stage==="components"&&ri?.captured&&!d?.preview.isolation?'<p class="layering">Legacy region capture · may include overlapping components.</p>':""}${d?.context?.layering&&(Di||S)?`<p class="layering">${l(d.context.layering)}</p>`:""}
+          <p class="component-note">${!zo?.related.length?l(d.note):""}</p>
+          </div>`:""}</div><div class="review-form">${Ii}${oi?'<p class="previous-notice">Viewing the previous round. Return to Current to make a decision.</p>':""}${z?`<div class="record-verdict"><strong>${ti?.action==="approve"?"Approved":ti?.action==="revise"?"Changes requested":"Not reviewed"}</strong><span>Submitted in round ${o.round} · read-only</span></div>`:`<div class="decisions" role="group" aria-label="Decision for ${l(m.name)}">${!p?`<div class="decision-title"><strong>Your review <span>Round ${o.round}</span></strong>${oi?"<p>Return to Current to review this round.</p>":""}</div>`:""}<button id="approve" ${!wi.length?"disabled":""} class="decision-approve ${ti?.action==="approve"?"approved":""}" aria-pressed="${ti?.action==="approve"}">${p?s?"Sending…":"Approve & continue":wi.length>1?`Approve ${wi.length} instances`:"Looks good"}</button><button id="revise" ${!wi.length?"disabled":""} class="decision-revise ${ti?.action==="revise"?"revise":""}" aria-pressed="${ti?.action==="revise"}">${wi.length>1?`Revise ${wi.length} instances`:"Needs work"}</button>${ti&&!p&&!D?`<button id="clear" class="quiet icon-button" aria-label="Clear decision" title="Clear decision">${T("undo")}</button>`:""}</div>`}
+          ${Yi?`<form id="feedback-form"><div class="feedback-fields"><label class="feedback-field">What needs to change?<textarea id="feedback" aria-describedby="feedback-hint">${l(Yi.feedback)}</textarea></label><p id="feedback-hint" class="feedback-hint">Optional — leave blank for the agent to diagnose.</p>${!p?`<label class="check"><input id="split" type="checkbox" ${Yi.split?"checked":""}> Split into separately reviewable components</label>`:""}</div><div class="feedback-actions"><button id="cancel-feedback" type="button" class="quiet">Cancel</button><button id="save-feedback" type="submit" class="primary">${p?"Send feedback":Ro?"Save & finish review":"Save & next"} <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></button><span class="shortcut-hint">${Lo}</span></div></form>`:ti?.action==="revise"?`<p class="saved-feedback">${l(ti.feedback||"No note — agent will diagnose.")}</p>`:""}
+          ${p?`<p class="page-review-status" role="status">${l(Ji||(z?"Your decision is saved.":s?"Sending…":Yi?"":"Approval confirms the composition and that nothing is missing."))}</p>`:""}</div>`:J?`<p>This piece will be added to the unresolved inventory.</p><label class="feedback-field">Name<input id="missing-name" value="${l(J.name)}"></label><label class="feedback-field">What is missing?<textarea id="missing-feedback">${l(J.feedback)}</textarea></label><div class="coordinates">${["x","y","w","h"].map((i)=>`<label>${{x:"Left",y:"Top",w:"Width",h:"Height"}[i]} %<input type="number" data-coordinate="${i}" value="${Math.round(J.box[i]*1000)/10}" min="0" max="100" step="0.1"></label>`).join("")}</div><button id="remove-missing">Remove this mark</button></div>`:"<p>No components supplied.</p></div>"}
         </section>
       </div>
-      ${!a?`<section class="inventory-section ${L?"":"tray-collapsed"} ${li&&L?"tray-expanded":""}" aria-label="Component inventory"><div class="section-head"><h2>Components</h2><div class="inventory-filters" role="group" aria-label="Filter components"><button data-filter="pending" aria-pressed="${z==="pending"}">To review <b>${qi}</b></button><button data-filter="reviewed" aria-pressed="${z==="reviewed"}">Reviewed <b>${Ro}</b></button><button data-filter="all" aria-pressed="${z==="all"}">All <b>${Y.length+n.missing.length}</b></button></div><div class="tray-actions"><button id="show-all" class="icon-button" aria-pressed="${li}" aria-controls="component-tray" aria-label="${li?"Compact":"Expand"} tray" title="${li?"Compact":"Expand"} tray">${W(li?"compact":"expand")}</button><button id="toggle-tray" class="icon-button" aria-expanded="${L}" aria-controls="component-tray" aria-label="${L?"Hide":"Show"} component tray" title="${L?"Hide":"Show"} component tray">${W(L?"hideTray":"showTray")}</button></div></div>
-      <div id="component-tray" class="inventory ${li?"all":""}">${bo.map((i)=>{let r=Y.find((B)=>B.members.some((G)=>G.id===i.id)),t=Y.indexOf(r),h={kind:r.kind,label:r.stateLabel};return`<button class="item ${h.kind} ${!k&&X?.id===r.id?"active":""}" data-select="${l(i.id)}" aria-pressed="${!k&&X?.id===r.id}">${i.thumbnail?`<span class="item-thumb">${i.thumbnail.box?`<span class="thumb-crop" style="width:min(100%,${76*i.thumbnail.box.w*o.comp.width/(i.thumbnail.box.h*o.comp.height)}px);aspect-ratio:${i.thumbnail.box.w*o.comp.width}/${i.thumbnail.box.h*o.comp.height}"><img alt="" loading="lazy" src="${S(i.thumbnail.url)}" style="position:absolute;width:${100/i.thumbnail.box.w}%;max-width:none;left:${-100*i.thumbnail.box.x/i.thumbnail.box.w}%;top:${-100*i.thumbnail.box.y/i.thumbnail.box.h}%;"></span>`:`<img alt="" loading="lazy" src="${S(i.thumbnail.url)}">`}</span>`:""}<span class="item-number">${h.kind==="approved"?ji:h.kind==="feedback"?$i:""}${t+1}<span class="item-medium">${W(yi(i).code?"code":"image")}${l(yi(i).label)}</span></span><strong>${l(Oo(i.id))}${r.members.length>1?` <small>×${r.members.length}</small>`:""}</strong><span class="state ${h.kind}">${l(h.label)}</span></button>`}).join("")}${(z==="pending"?[]:n.missing).map((i,r)=>`<button class="item feedback ${g===i.id?"active":""}" data-select="${l(i.id)}"><span class="item-number">${Y.length+r+1}</span><strong>${l(i.name)}</strong><span class="state revise">Missing</span></button>`).join("")}${!bo.length&&(z==="pending"||!n.missing.length)?`<p class="inventory-empty">${z==="pending"?"Nothing left to review. Your decisions are ready.":"No components reviewed yet."}</p>`:""}</div></section>`:""}
-      ${a?"":y?`<footer class="record-footer"><span>Round ${o.round} submitted · read-only</span><span>${j.approved} approved · ${j.revisions} changes requested</span></footer>`:`<footer class="${!j.pending&&!fi?"queue-complete":""}"><div>${!j.pending&&!fi?`<button id="show-summary" class="completion-link">${ji}${y?"Review sent":"All components reviewed"}</button>`:""}<button id="approve-rest" ${!j.pending?"hidden":""} ${!j.pending||fi?"disabled":""}>Approve ${j.approved||j.revisions?"remaining":"all"}</button><label class="check"><input id="inventory-confirm" type="checkbox" ${n.inventoryConfirmed?"checked":""}> Nothing missing from the comp</label></div><div class="submit-area"><p role="status">${l(So)}</p><button id="submit" class="primary" ${!j.canSubmit||fi||s||y?"disabled":""}>${s?"Sending…":y?"Review sent":j.hasFeedback?"Send feedback":"Approve & continue"}</button></div></footer>`}
-    </section><dialog id="comparison-dialog" aria-label="${a?"Enlarged page comparison":"Enlarged component comparison"}"></dialog>`;let N=e.querySelector("#comparison-dialog"),A=e.querySelector(".comparison-panel"),ci=e.querySelector(".comparison-slot"),ri=e.querySelector(".inspector > .review-form"),Co=e.querySelector(".inspector"),yo=()=>{if(N.append(A),ri)N.append(ri)};if(H&&A&&ci)ci.style.height=`${Uo}px`,yo(),N.showModal();if(ii)e.querySelectorAll(".decisions button,#feedback,#split,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#submit,#inventory-confirm").forEach((i)=>i.disabled=!0);if(e.querySelector(".inspection-content").scrollTop=Go,y||s)e.querySelectorAll(".decisions button,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#mark,#inventory-confirm,#missing-name,#missing-feedback,#feedback,#split,#remove-missing,[data-coordinate]").forEach((i)=>i.disabled=!0);let zo=e.querySelector(".inventory");if(zo)zo.scrollLeft=Ki;if(!Z&&L)Array.from(e.querySelectorAll(".inventory [data-select]")).find((i)=>i.dataset.select===g)?.scrollIntoView({block:"nearest",inline:"nearest"});if(m)e.getElementById(m)?.focus({preventScroll:!0});else if(Q)Array.from(e.querySelectorAll(".item[data-select]")).find((i)=>i.dataset.select===Q)?.focus({preventScroll:!0});let u=(i,r)=>e.querySelector(`#${i}`)?.addEventListener("click",r);function Si(i,r=!1,t=!1){if(_)return;if(!t)i=Y.find((h)=>h.members.some((B)=>B.id===i))?.representative.id??i;if(C=!t,k=!1,g=i,K="component",ti=!1,ei="fit",hi="isolated",T=!1,w(),r)e.querySelector("#expand-comparison")?.click()}e.querySelectorAll("[data-select]").forEach((i)=>i.onclick=()=>Si(i.dataset.select,i.classList.contains("pin")&&o.components.some((r)=>r.id===i.dataset.select))),u("previous-round",()=>{T=!0,w()}),u("current-round",()=>{T=!1,w()}),u("review-changes",()=>{let i=b().filter((h)=>Ii(h).kind==="pending"),r=i.findIndex((h)=>h.id===g),t=i[(r+1)%i.length];if(t)C=!0,k=!1,g=t.id,K="component",z="pending",T=!1,ei="fit",ti=!1,hi="isolated",w()}),e.querySelectorAll("[data-filter]").forEach((i)=>i.onclick=()=>{z=i.dataset.filter,k=!j.pending&&z==="pending";let r=Y.filter((h)=>z==="all"||h.kind==="pending"===(z==="pending")).map((h)=>h.representative);if(!(z!=="pending"&&n.missing.some((h)=>h.id===g))&&!r.some((h)=>h.id===g)&&r.length)C=!0,g=r[0].id,K="component",T=!1,ei="fit",ti=!1,hi="isolated";w()}),u("show-summary",()=>{k=!0,K="component",z="reviewed",w(),bi("review-summary")}),u("approve",()=>Ui("approve")),u("revise",Wo),u("clear",()=>{if(c)delete n.decisions[c.id],delete q[c.id];F=null,k=!1,z="pending",w()}),u("cancel-feedback",()=>{if(c)delete q[c.id];if(mi)L=!0,mi=!1;w(),bi("revise")}),e.querySelector("#feedback-form")?.addEventListener("submit",(i)=>{i.preventDefault(),Ui("revise")}),e.querySelector("#feedback")?.addEventListener("keydown",(i)=>{let r=i;if(r.key==="Enter"&&(r.metaKey||r.ctrlKey)&&!r.isComposing)r.preventDefault(),r.stopPropagation(),Ui("revise")}),u("undo-decision",()=>{if(!F||s||y)return;let i=F;for(let[r,t]of Object.entries(i.previous))if(t)n.decisions[r]=t;else delete n.decisions[r];delete q[i.id],g=i.id,k=!1,T=!1,K="component",z="all",F=null,w(),bi("approve")}),u("all-instances",()=>{C=!0,g=X.representative.id,T=!1,w()}),e.querySelectorAll("[data-instance]").forEach((i)=>i.onclick=()=>Si(i.dataset.instance,!1,!0)),u("overlay",()=>{ti=!ti,w()}),u("isolated",()=>{hi="isolated",w()}),u("context",()=>{hi="context",w()}),e.querySelector("#zoom")?.addEventListener("change",(i)=>{let r=i.target.value;ei=r==="fit"?"fit":Number(r),w()}),u("background-checker",()=>{ki="checker",w()}),u("background-page",()=>{ki="page",w()}),u("show-all",()=>{li=!li,L=!0,w()}),u("toggle-tray",()=>{mi=!1,L=!L,w()}),u("show-comp",()=>{K="comp",w()}),u("show-component",()=>{K="component",w()}),u("mark",()=>{_=!_,w()}),u("add-box",()=>xo({x:0.35,y:0.35,w:0.2,h:0.2})),u("remove-missing",()=>{n.missing=n.missing.filter((i)=>i.id!==g),g=o.components[0]?.id,w()}),u("approve-rest",()=>{if(fi)return;n=$o(o,n),F=null,k=!0,z="reviewed",K="component",w(),bi("review-summary")}),e.querySelector("#inventory-confirm")?.addEventListener("change",(i)=>{n.inventoryConfirmed=i.target.checked,w()}),e.querySelector("#feedback")?.addEventListener("input",(i)=>{if(c&&q[c.id])q[c.id].feedback=i.target.value}),e.querySelector("#split")?.addEventListener("change",(i)=>{if(c&&q[c.id])q[c.id].split=i.target.checked}),e.querySelector("#missing-name")?.addEventListener("input",(i)=>{if(M)M.name=i.target.value;let r=e.querySelector("#submit");if(r)r.disabled=fi||s||y||!zi(o,n).canSubmit}),e.querySelector("#missing-feedback")?.addEventListener("input",(i)=>{if(M)M.feedback=i.target.value}),e.querySelectorAll("[data-coordinate]").forEach((i)=>i.addEventListener("change",()=>{if(!M)return;let r=i.dataset.coordinate,t=Number(i.value)/100;if(Number.isFinite(t))M.box[r]=Math.max(r==="w"||r==="h"?0.001:0,Math.min(1,t));M.box.w=Math.min(M.box.w,1-M.box.x),M.box.h=Math.min(M.box.h,1-M.box.y),w()})),u("submit",()=>{ao()});let D=e.querySelector(".map");function Fi(i){let r=D.getBoundingClientRect();return{x:Math.max(0,Math.min(1,(i.clientX-r.left)/r.width)),y:Math.max(0,Math.min(1,(i.clientY-r.top)/r.height))}}function ko(i){let r=Fi(i);return o.components.filter(({box:t})=>r.x>=t.x&&r.x<=t.x+t.w&&r.y>=t.y&&r.y<=t.y+t.h).sort((t,h)=>t.box.w*t.box.h-h.box.w*h.box.h)[0]}D?.addEventListener("click",(i)=>{if(_||i.target.closest("[data-select]"))return;let r=ko(i);if(r)Si(r.id,!0)}),D?.addEventListener("pointermove",(i)=>{if(!_)D.style.cursor=ko(i)?"zoom-in":""}),D?.addEventListener("pointerdown",(i)=>{if(!_)return;ni=Fi(i),D.setPointerCapture(i.pointerId),i.preventDefault()}),D?.addEventListener("pointermove",(i)=>{if(!ni)return;let r=Fi(i);pi={x:Math.min(ni.x,r.x),y:Math.min(ni.y,r.y),w:Math.abs(r.x-ni.x),h:Math.abs(r.y-ni.y)};let t=e.querySelector(".draw-box");t.hidden=!1,t.style.cssText=Ti(pi)}),D?.addEventListener("pointerup",()=>{if(pi&&pi.w>0.01&&pi.h>0.01)xo(pi);else ni=null,pi=null}),D?.addEventListener("pointercancel",()=>{ni=null,pi=null,w()});let jo=e.querySelector(".output"),Yi=e.querySelector("iframe"),qo=e.querySelector(".workbench"),vi=e.querySelector(".inspection-content"),Ci=e.querySelector(".inspector");function Pi(){if(!vi||!Ci)return;Ci.dataset.scrollAbove=String(vi.scrollTop>1),Ci.dataset.scrollBelow=String(vi.scrollHeight-vi.clientHeight-vi.scrollTop>1)}vi?.addEventListener("scroll",Pi,{passive:!0});function _i(){let i=e.querySelector(".map-space");if(i&&i.clientWidth&&i.clientHeight){let v=oo(o.comp.width,o.comp.height,Math.max(1,i.clientWidth-32),Math.max(1,i.clientHeight-32),"fit");D.style.width=`${v.width}px`,D.style.height=`${v.height}px`}let r=e.querySelector(".inspection-content"),t=Array.from(e.querySelectorAll(".pan-viewport"));if(r?.clientHeight){let v=H?Math.max(100,N.clientHeight-(A?.querySelector(".compare-toolbar")?.clientHeight??0)-(A?.querySelector(".expanded-title")?.clientHeight??0)-(A?.querySelector(".view-controls")?.clientHeight??0)-(ri?.getBoundingClientRect().height??0)-124):Math.min(a?Number.POSITIVE_INFINITY:248,Math.max(100,r.clientHeight-((t[0]?.getBoundingClientRect().top??r.getBoundingClientRect().top)-r.getBoundingClientRect().top+r.scrollTop)-(A?.querySelector(".view-controls")?.clientHeight??0)-12));t.forEach((J)=>J.style.height=`${v}px`)}if(d&&t.length&&!R){let v=oo(d.box.w*E.comp.width,d.box.h*E.comp.height,Math.min(...t.map((J)=>J.clientWidth)),Math.min(...t.map((J)=>J.clientHeight)),ei);e.querySelectorAll(".crop-stage").forEach((J)=>{J.style.width=`${v.width}px`,J.style.height=`${v.height}px`})}if(t.forEach((v)=>{let J=v.scrollWidth>v.clientWidth+1||v.scrollHeight>v.clientHeight+1;v.classList.toggle("pannable",J),v.style.cursor=H?"":"zoom-in",v.setAttribute("role",H?"region":"button"),v.title=H?J?"Move your pointer to pan. You can also scroll, swipe, or use arrow keys.":"":"Click to enlarge comparison"}),jo&&Yi&&d){let v=jo.clientWidth/(d.box.w*E.comp.width);Yi.style.transform=`scale(${v})`,Yi.style.left=`${-d.box.x*E.comp.width*v}px`,Yi.style.top=`${-d.box.y*E.comp.height*v}px`}let h=qo.getBoundingClientRect(),B=e.querySelector(".region"),G=e.querySelector(".number"),Xi=e.querySelector(".connector path");if(B&&G&&Xi){let v=B.getBoundingClientRect(),J=G.getBoundingClientRect(),Ei=v.right-h.left,$=v.top+v.height/2-h.top,Hi=J.left-h.left-8,Po=J.top+J.height/2-h.top;Xi.setAttribute("d",`M ${Ei} ${$} H ${Hi-14} V ${Po} H ${Hi}`)}}function ui(i,r){if(!A||!ci||i===H)return;let t=e.querySelector("#expand-comparison"),h=(H?N:A).getBoundingClientRect(),B=window.matchMedia("(prefers-reduced-motion: reduce)").matches,G=A.querySelector(".pan-viewport"),Xi=G?G.scrollLeft/Math.max(1,G.scrollWidth-G.clientWidth):0,v=G?G.scrollTop/Math.max(1,G.scrollHeight-G.clientHeight):0,J=()=>A.querySelectorAll(".pan-viewport").forEach(($)=>{$.scrollLeft=Xi*Math.max(0,$.scrollWidth-$.clientWidth),$.scrollTop=v*Math.max(0,$.scrollHeight-$.clientHeight)}),Ei=()=>{if(ci.append(A),ri)Co.append(ri),ri.inert=!1;N.close(),ci.style.height="",Ji=!1,H=!1,t.innerHTML=W("expand"),t.setAttribute("aria-label","Enlarge comparison"),t.title="Enlarge comparison",t.setAttribute("aria-expanded","false"),_i(),J(),t.focus({preventScroll:!0}),r?.()};if(i){ci.style.height=`${h.height}px`,yo(),N.showModal(),H=!0,t.innerHTML=W("compact"),t.setAttribute("aria-label","Restore comparison"),t.title="Restore comparison (Esc)",t.setAttribute("aria-expanded","true"),_i(),J(),t.focus({preventScroll:!0});let $=N.getBoundingClientRect();if(!B)N.animate([{transform:`translate(${h.x-$.x}px,${h.y-$.y}px) scale(${h.width/$.width},${h.height/$.height})`,opacity:0.6},{transform:"none",opacity:1}],{duration:240,easing:"cubic-bezier(.2,.8,.2,1)"})}else{if(t.disabled)return;let $=ci.getBoundingClientRect();if(B){Ei();return}if(t.disabled=!0,Ji=!0,ri)ri.inert=!0;let Hi=N.animate([{transform:"none",opacity:1},{transform:`translate(${$.x-h.x}px,${$.y-h.y}px) scale(${$.width/h.width},${$.height/h.height})`,opacity:0.6}],{duration:200,easing:"cubic-bezier(.4,0,.2,1)",fill:"forwards"});Hi.finished.then(()=>{if(N.isConnected)Hi.cancel(),t.disabled=!1,Ei()}).catch(()=>{})}}if(Zi=(i)=>ui(!1,i),u("expand-comparison",()=>ui(!H)),N.addEventListener("cancel",(i)=>{i.preventDefault(),i.stopPropagation(),ui(!1)}),N.addEventListener("keydown",(i)=>{if(i.key==="Escape")i.preventDefault(),i.stopPropagation(),ui(!1)}),ai=new ResizeObserver(()=>{_i(),Pi()}),ai.observe(qo),ai.observe(N),ri)ai.observe(ri);let Ho=e.querySelector(".inspection-content");if(Ho)ai.observe(Ho);let Mo=e.querySelector(".repair-context");if(Mo)ai.observe(Mo);let Vo=A?.querySelector(".compare-toolbar");if(Vo)ai.observe(Vo);_i();let Li=Array.from(e.querySelectorAll(".pan-viewport"));if(Li.forEach((i)=>{i.scrollLeft=Ao,i.scrollTop=Bo}),Li.forEach((i)=>{i.querySelectorAll("img").forEach((r)=>r.draggable=!1),i.addEventListener("click",()=>{if(!H)ui(!0)}),i.addEventListener("pointermove",(r)=>{if(r.pointerType!=="mouse"||r.buttons||!i.classList.contains("pannable"))return;let t=i.getBoundingClientRect();i.scrollLeft=ro(r.clientX,t.left,i.clientWidth,i.scrollWidth),i.scrollTop=ro(r.clientY,t.top,i.clientHeight,i.scrollHeight)}),i.addEventListener("keydown",(r)=>{if(!H&&(r.key==="Enter"||r.key===" ")){r.preventDefault(),r.stopPropagation(),ui(!0);return}let h={ArrowLeft:[-48,0],ArrowRight:[48,0],ArrowUp:[0,-48],ArrowDown:[0,48]}[r.key];if(!h)return;r.preventDefault(),r.stopPropagation(),i.scrollLeft+=h[0],i.scrollTop+=h[1]})}),Li.forEach((i)=>i.addEventListener("scroll",()=>{for(let r of Li)if(r!==i){if(r.scrollLeft!==i.scrollLeft)r.scrollLeft=i.scrollLeft;if(r.scrollTop!==i.scrollTop)r.scrollTop=i.scrollTop}})),Zo&&window.matchMedia("(max-width:800px)").matches){let i=e.querySelector(".inspection-content"),r=e.querySelector(".compare");if(i&&r)i.scrollTop+=r.getBoundingClientRect().top-i.getBoundingClientRect().top}if(Pi(),window.scrollTo(gi,P),!y)x.onDraftChange?.(structuredClone(n))}return w(),{destroy(){ai?.disconnect(),e.replaceChildren()},getDraft(){return structuredClone(n)}}}async function rr(){let p=document.getElementById("review"),o=await fetch("/packet",{cache:"no-store"});if(!o.ok)throw Error("The review packet could not be loaded. Reload to retry.");let x=await o.json();if(x.sourceStatus){let e=document.createElement("p");e.textContent=x.sourceStatus,p.before(e)}Xo(p,x.packet,{initialDraft:x.draft,history:x.history,completed:!!x.receipt,onSubmit:async(e)=>{let n=await fetch("/decision",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}),a=await n.json();if(!n.ok)throw Error(a.error??"The review could not be saved. Try again.")}})}rr().catch((p)=>{let o=document.createElement("p");o.textContent=p instanceof Error?p.message:String(p),document.getElementById("review")?.replaceChildren(o)});})();
+      ${!p?`<section class="inventory-section ${L?"":"tray-collapsed"} ${di&&L?"tray-expanded":""}" aria-label="Component inventory"><div class="section-head"><h2>Components</h2><div class="inventory-filters" role="group" aria-label="Filter components"><button data-filter="pending" aria-pressed="${v==="pending"}">To review <b>${Hi}</b></button><button data-filter="reviewed" aria-pressed="${v==="reviewed"}">Reviewed <b>${Oo}</b></button><button data-filter="all" aria-pressed="${v==="all"}">All <b>${E.length+n.missing.length}</b></button></div><div class="tray-actions"><button id="show-all" class="icon-button" aria-pressed="${di}" aria-controls="component-tray" aria-label="${di?"Compact":"Expand"} tray" title="${di?"Compact":"Expand"} tray">${T(di?"compact":"expand")}</button><button id="toggle-tray" class="icon-button" aria-expanded="${L}" aria-controls="component-tray" aria-label="${L?"Hide":"Show"} component tray" title="${L?"Hide":"Show"} component tray">${T(L?"hideTray":"showTray")}</button></div></div>
+      <div id="component-tray" class="inventory ${di?"all":""}">${uo.map((i)=>{let r=E.find((R)=>R.members.some((U)=>U.id===i.id)),t=E.indexOf(r),g={kind:r.kind,label:r.stateLabel};return`<button class="item ${g.kind} ${!k&&W?.id===r.id?"active":""}" data-select="${l(i.id)}" aria-pressed="${!k&&W?.id===r.id}">${i.thumbnail?`<span class="item-thumb">${i.thumbnail.box?`<span class="thumb-crop" style="width:min(100%,${76*i.thumbnail.box.w*o.comp.width/(i.thumbnail.box.h*o.comp.height)}px);aspect-ratio:${i.thumbnail.box.w*o.comp.width}/${i.thumbnail.box.h*o.comp.height}"><img alt="" loading="lazy" src="${C(i.thumbnail.url)}" style="position:absolute;width:${100/i.thumbnail.box.w}%;max-width:none;left:${-100*i.thumbnail.box.x/i.thumbnail.box.w}%;top:${-100*i.thumbnail.box.y/i.thumbnail.box.h}%;"></span>`:`<img alt="" loading="lazy" src="${C(i.thumbnail.url)}">`}</span>`:""}<span class="item-number">${g.kind==="approved"?qi:g.kind==="feedback"?Ki:""}${t+1}<span class="item-medium">${T(zi(i).code?"code":"image")}${l(zi(i).label)}</span></span><strong>${l(Do(i.id))}${r.members.length>1?` <small>×${r.members.length}</small>`:""}</strong><span class="state ${g.kind}">${l(g.label)}</span></button>`}).join("")}${(v==="pending"?[]:n.missing).map((i,r)=>`<button class="item feedback ${h===i.id?"active":""}" data-select="${l(i.id)}"><span class="item-number">${E.length+r+1}</span><strong>${l(i.name)}</strong><span class="state revise">Missing</span></button>`).join("")}${!uo.length&&(v==="pending"||!n.missing.length)?`<p class="inventory-empty">${v==="pending"?"Nothing left to review. Your decisions are ready.":"No components reviewed yet."}</p>`:""}</div></section>`:""}
+      ${p?"":z?`<footer class="record-footer"><span>Round ${o.round} submitted · read-only</span><span>${H.approved} approved · ${H.revisions} changes requested</span></footer>`:`<footer class="${!H.pending&&!si?"queue-complete":""}"><div>${!H.pending&&!si?`<button id="show-summary" class="completion-link">${qi}${z?"Review sent":"All components reviewed"}</button>`:""}<button id="approve-rest" ${!H.pending?"hidden":""} ${!H.pending||si?"disabled":""}>Approve ${H.approved||H.revisions?"remaining":"all"}</button><label class="check"><input id="inventory-confirm" type="checkbox" ${n.inventoryConfirmed?"checked":""}> Nothing missing from the comp</label></div><div class="submit-area"><p role="status">${l(Fo)}</p><button id="submit" class="primary" ${!H.canSubmit||si||s||z?"disabled":""}>${s?"Sending…":z?"Review sent":H.hasFeedback?"Send feedback":"Approve & continue"}</button></div></footer>`}
+    </section><dialog id="comparison-dialog" aria-label="${p?"Enlarged page comparison":"Enlarged component comparison"}"></dialog>`;let G=e.querySelector("#comparison-dialog"),I=e.querySelector(".comparison-panel"),mi=e.querySelector(".comparison-slot"),ei=e.querySelector(".inspector > .review-form"),Po=e.querySelector(".inspector"),ko=()=>{if(G.append(I),ei)G.append(ei)};if(V&&I&&mi)mi.style.height=`${Ao}px`,ko(),G.showModal();if(oi)e.querySelectorAll(".decisions button,#feedback,#split,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#submit,#inventory-confirm").forEach((i)=>i.disabled=!0);if(e.querySelector(".inspection-content").scrollTop=To,z||s)e.querySelectorAll(".decisions button,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#mark,#inventory-confirm,#missing-name,#missing-feedback,#feedback,#split,#remove-missing,[data-coordinate]").forEach((i)=>i.disabled=!0);let jo=e.querySelector(".inventory");if(jo)jo.scrollLeft=fi;if(!X&&L)Array.from(e.querySelectorAll(".inventory [data-select]")).find((i)=>i.dataset.select===h)?.scrollIntoView({block:"nearest",inline:"nearest"});if(c)e.getElementById(c)?.focus({preventScroll:!0});else if(j)Array.from(e.querySelectorAll(".item[data-select]")).find((i)=>i.dataset.select===j)?.focus({preventScroll:!0});let u=(i,r)=>e.querySelector(`#${i}`)?.addEventListener("click",r);function Ci(i,r=!1,t=!1){if(N)return;if(!t)i=E.find((g)=>g.members.some((R)=>R.id===i))?.representative.id??i;if(ii=!t,k=!1,h=i,Y="component",li=!1,ni="fit",hi="isolated",A=!1,w(),r)e.querySelector("#expand-comparison")?.click()}e.querySelectorAll("[data-select]").forEach((i)=>i.onclick=()=>Ci(i.dataset.select,i.classList.contains("pin")&&o.components.some((r)=>r.id===i.dataset.select))),u("previous-round",()=>{A=!0,w()}),u("current-round",()=>{A=!1,w()}),u("review-changes",()=>{let i=y().filter((g)=>Oi(g).kind==="pending"),r=i.findIndex((g)=>g.id===h),t=i[(r+1)%i.length];if(t)ii=!0,k=!1,h=t.id,Y="component",v="pending",A=!1,ni="fit",li=!1,hi="isolated",w()}),e.querySelectorAll("[data-filter]").forEach((i)=>i.onclick=()=>{v=i.dataset.filter,k=!H.pending&&v==="pending";let r=E.filter((g)=>v==="all"||g.kind==="pending"===(v==="pending")).map((g)=>g.representative);if(!(v!=="pending"&&n.missing.some((g)=>g.id===h))&&!r.some((g)=>g.id===h)&&r.length)ii=!0,h=r[0].id,Y="component",A=!1,ni="fit",li=!1,hi="isolated";w()}),u("show-summary",()=>{k=!0,Y="component",v="reviewed",w(),vi("review-summary")}),u("approve",()=>Ai("approve")),u("revise",Go),u("clear",()=>{if(m)delete n.decisions[m.id],delete M[m.id];P=null,k=!1,v="pending",w()}),u("cancel-feedback",()=>{if(m)delete M[m.id];if(bi)L=!0,bi=!1;w(),vi("revise")}),e.querySelector("#feedback-form")?.addEventListener("submit",(i)=>{i.preventDefault(),Ai("revise")}),e.querySelector("#feedback")?.addEventListener("keydown",(i)=>{let r=i;if(r.key==="Enter"&&(r.metaKey||r.ctrlKey)&&!r.isComposing)r.preventDefault(),r.stopPropagation(),Ai("revise")}),u("undo-decision",()=>{if(!P||s||z)return;let i=P;for(let[r,t]of Object.entries(i.previous))if(t)n.decisions[r]=t;else delete n.decisions[r];delete M[i.id],h=i.id,k=!1,A=!1,Y="component",v="all",P=null,w(),vi("approve")}),u("all-instances",()=>{ii=!0,h=W.representative.id,A=!1,w()}),e.querySelectorAll("[data-instance]").forEach((i)=>i.onclick=()=>Ci(i.dataset.instance,!1,!0)),u("overlay",()=>{li=!li,w()}),u("isolated",()=>{hi="isolated",w()}),u("context",()=>{hi="context",w()}),e.querySelector("#zoom")?.addEventListener("change",(i)=>{let r=i.target.value;ni=r==="fit"?"fit":Number(r),w()}),u("background-checker",()=>{ji="checker",w()}),u("background-page",()=>{ji="page",w()}),u("show-all",()=>{di=!di,L=!0,w()}),u("toggle-tray",()=>{bi=!1,L=!L,w()}),u("show-comp",()=>{Y="comp",w()}),u("show-component",()=>{Y="component",w()}),u("mark",()=>{N=!N,w()}),u("add-box",()=>lo({x:0.35,y:0.35,w:0.2,h:0.2})),u("remove-missing",()=>{n.missing=n.missing.filter((i)=>i.id!==h),h=o.components[0]?.id,w()}),u("approve-rest",()=>{if(si)return;n=Qo(o,n),P=null,k=!0,v="reviewed",Y="component",w(),vi("review-summary")}),e.querySelector("#inventory-confirm")?.addEventListener("change",(i)=>{n.inventoryConfirmed=i.target.checked,w()}),e.querySelector("#feedback")?.addEventListener("input",(i)=>{if(m&&M[m.id])M[m.id].feedback=i.target.value}),e.querySelector("#split")?.addEventListener("change",(i)=>{if(m&&M[m.id])M[m.id].split=i.target.checked}),e.querySelector("#missing-name")?.addEventListener("input",(i)=>{if(J)J.name=i.target.value;let r=e.querySelector("#submit");if(r)r.disabled=si||s||z||!ki(o,n).canSubmit}),e.querySelector("#missing-feedback")?.addEventListener("input",(i)=>{if(J)J.feedback=i.target.value}),e.querySelectorAll("[data-coordinate]").forEach((i)=>i.addEventListener("change",()=>{if(!J)return;let r=i.dataset.coordinate,t=Number(i.value)/100;if(Number.isFinite(t))J.box[r]=Math.max(r==="w"||r==="h"?0.001:0,Math.min(1,t));J.box.w=Math.min(J.box.w,1-J.box.x),J.box.h=Math.min(J.box.h,1-J.box.y),w()})),u("submit",()=>{to()});let F=e.querySelector(".map");function Pi(i){let r=F.getBoundingClientRect();return{x:Math.max(0,Math.min(1,(i.clientX-r.left)/r.width)),y:Math.max(0,Math.min(1,(i.clientY-r.top)/r.height))}}function qo(i){let r=Pi(i);return o.components.filter(({box:t})=>r.x>=t.x&&r.x<=t.x+t.w&&r.y>=t.y&&r.y<=t.y+t.h).sort((t,g)=>t.box.w*t.box.h-g.box.w*g.box.h)[0]}F?.addEventListener("click",(i)=>{if(N||i.target.closest("[data-select]"))return;let r=qo(i);if(r)Ci(r.id,!0)}),F?.addEventListener("pointermove",(i)=>{if(!N)F.style.cursor=qo(i)?"zoom-in":""}),F?.addEventListener("pointerdown",(i)=>{if(!N)return;ai=Pi(i),F.setPointerCapture(i.pointerId),i.preventDefault()}),F?.addEventListener("pointermove",(i)=>{if(!ai)return;let r=Pi(i);pi={x:Math.min(ai.x,r.x),y:Math.min(ai.y,r.y),w:Math.abs(r.x-ai.x),h:Math.abs(r.y-ai.y)};let t=e.querySelector(".draw-box");t.hidden=!1,t.style.cssText=Qi(pi)}),F?.addEventListener("pointerup",()=>{if(pi&&pi.w>0.01&&pi.h>0.01)lo(pi);else ai=null,pi=null}),F?.addEventListener("pointercancel",()=>{ai=null,pi=null,w()});let Ho=e.querySelector(".output"),_i=e.querySelector("iframe"),Mo=e.querySelector(".workbench"),ui=e.querySelector(".inspection-content"),io=e.querySelector(".inspector");function oo(){if(!ui||!io)return;io.dataset.scrollAbove=String(ui.scrollTop>1),io.dataset.scrollBelow=String(ui.scrollHeight-ui.clientHeight-ui.scrollTop>1)}ui?.addEventListener("scroll",oo,{passive:!0});function Xi(){let i=e.querySelector(".map-space");if(i&&i.clientWidth&&i.clientHeight){let b=ro(o.comp.width,o.comp.height,Math.max(1,i.clientWidth-32),Math.max(1,i.clientHeight-32),"fit");F.style.width=`${b.width}px`,F.style.height=`${b.height}px`}let r=e.querySelector(".inspection-content"),t=Array.from(e.querySelectorAll(".pan-viewport"));if(r?.clientHeight){let b=V?Math.max(100,G.clientHeight-(I?.querySelector(".compare-toolbar")?.clientHeight??0)-(I?.querySelector(".expanded-title")?.clientHeight??0)-(I?.querySelector(".view-controls")?.clientHeight??0)-(ei?.getBoundingClientRect().height??0)-124):Math.min(p?Number.POSITIVE_INFINITY:248,Math.max(100,r.clientHeight-((t[0]?.getBoundingClientRect().top??r.getBoundingClientRect().top)-r.getBoundingClientRect().top+r.scrollTop)-(I?.querySelector(".view-controls")?.clientHeight??0)-12));t.forEach((K)=>K.style.height=`${b}px`)}if(d&&t.length&&!D){let b=ro(d.box.w*Z.comp.width,d.box.h*Z.comp.height,Math.min(...t.map((K)=>K.clientWidth)),Math.min(...t.map((K)=>K.clientHeight)),ni);e.querySelectorAll(".crop-stage").forEach((K)=>{K.style.width=`${b.width}px`,K.style.height=`${b.height}px`})}if(t.forEach((b)=>{let K=b.scrollWidth>b.clientWidth+1||b.scrollHeight>b.clientHeight+1;b.classList.toggle("pannable",K),b.style.cursor=V?"":"zoom-in",b.setAttribute("role",V?"region":"button"),b.title=V?K?"Move your pointer to pan. You can also scroll, swipe, or use arrow keys.":"":"Click to enlarge comparison"}),Ho&&_i&&d){let b=Ho.clientWidth/(d.box.w*Z.comp.width);_i.style.transform=`scale(${b})`,_i.style.left=`${-d.box.x*Z.comp.width*b}px`,_i.style.top=`${-d.box.y*Z.comp.height*b}px`}let g=Mo.getBoundingClientRect(),R=e.querySelector(".region"),U=e.querySelector(".number"),Ni=e.querySelector(".connector path");if(R&&U&&Ni){let b=R.getBoundingClientRect(),K=U.getBoundingClientRect(),Zi=b.right-g.left,Q=b.top+b.height/2-g.top,Mi=K.left-g.left-8,ir=K.top+K.height/2-g.top;Ni.setAttribute("d",`M ${Zi} ${Q} H ${Mi-14} V ${ir} H ${Mi}`)}}function yi(i,r){if(!I||!mi||i===V)return;let t=e.querySelector("#expand-comparison"),g=(V?G:I).getBoundingClientRect(),R=window.matchMedia("(prefers-reduced-motion: reduce)").matches,U=I.querySelector(".pan-viewport"),Ni=U?U.scrollLeft/Math.max(1,U.scrollWidth-U.clientWidth):0,b=U?U.scrollTop/Math.max(1,U.scrollHeight-U.clientHeight):0,K=()=>I.querySelectorAll(".pan-viewport").forEach((Q)=>{Q.scrollLeft=Ni*Math.max(0,Q.scrollWidth-Q.clientWidth),Q.scrollTop=b*Math.max(0,Q.scrollHeight-Q.clientHeight)}),Zi=()=>{if(mi.append(I),ei)Po.append(ei),ei.inert=!1;G.close(),mi.style.height="",$i=!1,V=!1,t.innerHTML=T("expand"),t.setAttribute("aria-label","Enlarge comparison"),t.title="Enlarge comparison",t.setAttribute("aria-expanded","false"),Xi(),K(),t.focus({preventScroll:!0}),r?.()};if(i){mi.style.height=`${g.height}px`,ko(),G.showModal(),V=!0,t.innerHTML=T("compact"),t.setAttribute("aria-label","Restore comparison"),t.title="Restore comparison (Esc)",t.setAttribute("aria-expanded","true"),Xi(),K(),t.focus({preventScroll:!0});let Q=G.getBoundingClientRect();if(!R)G.animate([{transform:`translate(${g.x-Q.x}px,${g.y-Q.y}px) scale(${g.width/Q.width},${g.height/Q.height})`,opacity:0.6},{transform:"none",opacity:1}],{duration:240,easing:"cubic-bezier(.2,.8,.2,1)"})}else{if(t.disabled)return;let Q=mi.getBoundingClientRect();if(R){Zi();return}if(t.disabled=!0,$i=!0,ei)ei.inert=!0;let Mi=G.animate([{transform:"none",opacity:1},{transform:`translate(${Q.x-g.x}px,${Q.y-g.y}px) scale(${Q.width/g.width},${Q.height/g.height})`,opacity:0.6}],{duration:200,easing:"cubic-bezier(.4,0,.2,1)",fill:"forwards"});Mi.finished.then(()=>{if(G.isConnected)Mi.cancel(),t.disabled=!1,Zi()}).catch(()=>{})}}if(Ti=(i)=>yi(!1,i),u("expand-comparison",()=>yi(!V)),G.addEventListener("cancel",(i)=>{i.preventDefault(),i.stopPropagation(),yi(!1)}),G.addEventListener("keydown",(i)=>{if(i.key==="Escape")i.preventDefault(),i.stopPropagation(),yi(!1)}),xi=new ResizeObserver(()=>{Xi(),oo()}),xi.observe(Mo),xi.observe(G),ei)xi.observe(ei);let Vo=e.querySelector(".inspection-content");if(Vo)xi.observe(Vo);let Jo=e.querySelector(".repair-context");if(Jo)xi.observe(Jo);let $o=I?.querySelector(".compare-toolbar");if($o)xi.observe($o);Xi();let Ei=Array.from(e.querySelectorAll(".pan-viewport"));if(Ei.forEach((i)=>{i.scrollLeft=Bo,i.scrollTop=Io}),Ei.forEach((i)=>{i.querySelectorAll("img").forEach((r)=>r.draggable=!1),i.addEventListener("click",()=>{if(!V)yi(!0)}),i.addEventListener("pointermove",(r)=>{if(r.pointerType!=="mouse"||r.buttons||!i.classList.contains("pannable"))return;let t=i.getBoundingClientRect();i.scrollLeft=eo(r.clientX,t.left,i.clientWidth,i.scrollWidth),i.scrollTop=eo(r.clientY,t.top,i.clientHeight,i.scrollHeight)}),i.addEventListener("keydown",(r)=>{if(!V&&(r.key==="Enter"||r.key===" ")){r.preventDefault(),r.stopPropagation(),yi(!0);return}let g={ArrowLeft:[-48,0],ArrowRight:[48,0],ArrowUp:[0,-48],ArrowDown:[0,48]}[r.key];if(!g)return;r.preventDefault(),r.stopPropagation(),i.scrollLeft+=g[0],i.scrollTop+=g[1]})}),Ei.forEach((i)=>i.addEventListener("scroll",()=>{for(let r of Ei)if(r!==i){if(r.scrollLeft!==i.scrollLeft)r.scrollLeft=i.scrollLeft;if(r.scrollTop!==i.scrollTop)r.scrollTop=i.scrollTop}})),Bi&&window.matchMedia("(max-width:800px)").matches){let i=e.querySelector(".inspection-content"),r=e.querySelector(".compare");if(i&&r)i.scrollTop+=r.getBoundingClientRect().top-i.getBoundingClientRect().top}if(oo(),window.scrollTo(q,_),!z)x.onDraftChange?.(structuredClone(n))}return w(),{destroy(){xi?.disconnect(),e.replaceChildren()},getDraft(){return structuredClone(n)}}}async function er(){let a=document.getElementById("review"),o=await fetch("/packet",{cache:"no-store"});if(!o.ok)throw Error("The review packet could not be loaded. Reload to retry.");let x=await o.json();if(x.sourceStatus){let e=document.createElement("p");e.textContent=x.sourceStatus,a.before(e)}Zo(a,x.packet,{initialDraft:x.draft,history:x.history,completed:!!x.receipt,onSubmit:async(e)=>{let n=await fetch("/decision",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)}),p=await n.json();if(!n.ok)throw Error(p.error??"The review could not be saved. Try again.")}})}er().catch((a)=>{let o=document.createElement("p");o.textContent=a instanceof Error?a.message:String(a),document.getElementById("review")?.replaceChildren(o)});})();
diff --git a/skill/reference/component-review.md b/skill/reference/component-review.md
index 320ef28b1..b5fef0c53 100644
--- a/skill/reference/component-review.md
+++ b/skill/reference/component-review.md
@@ -50,6 +50,8 @@ The runtime also captures an unmodified **In context** view from that same docum
 
 Component capture supports stable HTML/CSS and inline SVG. Supply a static review state for motion and keep the implementation's real inputs. A scripted, canvas or otherwise unsupported component is a blocker to report, not permission to substitute a raster or omit it.
 
+Keep the implementation's intended fonts in the review document. Vendor external fonts locally and declare them as dependencies; removing their imports changes the component being reviewed. Capture rejects unavailable primary font families rather than presenting a silent fallback.
+
 ## Present and wait
 
 If the harness exposes `component_review`, call it with `manifest_path` set to `.impeccable/review/components.json`. The host captures the component files, presents this same review interface and returns the user's decisions. A suspended request is waiting for the user; it is not a failed build or an approval.
diff --git a/ui/component-review/model.test.ts b/ui/component-review/model.test.ts
index b224317ad..6315bd8c3 100644
--- a/ui/component-review/model.test.ts
+++ b/ui/component-review/model.test.ts
@@ -126,3 +126,13 @@ test('scope distinguishes other mapped pieces from explicit capture exclusions',
  expect(reviewScope(p,child).related).toEqual([]);
  expect(reviewScope(p,card).description).toBe('Card outline');
 });
+
+test('reference scope includes crossing foreground pieces but ignores adjacent pixel seams',()=>{
+ const p=structuredClone(packet),photo=p.components[0];
+ photo.box={x:0,y:0,w:.4,h:1};
+ const other=p.components[1];other.box={x:.2,y:.2,w:.3,h:.1};
+ p.components.push({...other,id:'neighbor',box:{x:.4,y:0,w:.4,h:1}});
+ p.components.push({...other,id:'seam',box:{x:.39999,y:.3,w:.2,h:.1}});
+ expect(reviewScope(p,photo).related.map(c=>c.id)).toEqual(['control']);
+ expect(reviewScope(p,photo).excluded).toEqual([]);
+});
diff --git a/ui/component-review/model.ts b/ui/component-review/model.ts
index 303d816f5..4b942104f 100644
--- a/ui/component-review/model.ts
+++ b/ui/component-review/model.ts
@@ -143,11 +143,12 @@ export function reviewScope(packet: ReviewPacket, component: Component) {
     if (other.id === component.id) return false;
     if (excluded.has(other.id)) return true;
     const o = other.box;
-    const overlap = Math.max(0, Math.min(b.x+b.w,o.x+o.w)-Math.max(b.x,o.x)) *
-      Math.max(0, Math.min(b.y+b.h,o.y+o.h)-Math.max(b.y,o.y));
-    // Strictly smaller, substantially contained regions; omit backgrounds and
-    // neighboring cards. This never changes the review or any reference pixels.
-    return o.w*o.h < b.w*b.h && overlap / (o.w*o.h) >= .98;
+    const overlapWidth = Math.min(b.x+b.w,o.x+o.w)-Math.max(b.x,o.x);
+    const overlapHeight = Math.min(b.y+b.h,o.y+o.h)-Math.max(b.y,o.y);
+    // Smaller mapped pieces may cross a photograph's edge (headings and route
+    // lines often do). Include their visible intersection, ignoring subpixel
+    // boundary noise. This describes scope only; no pixels or decisions change.
+    return o.w*o.h < b.w*b.h && overlapWidth*packet.comp.width > 1 && overlapHeight*packet.comp.height > 1;
   });
   return {description:component.note.trim(), related, excluded:related.filter(c=>excluded.has(c.id))};
 }
diff --git a/ui/component-review/review.ts b/ui/component-review/review.ts
index 61ccf4a73..8b02d3f4f 100644
--- a/ui/component-review/review.ts
+++ b/ui/component-review/review.ts
@@ -55,9 +55,15 @@ export function mountComponentReview(host: HTMLElement, packet: ReviewPacket, op
     const scope = reviewScope(p,item);
     if (!scope.related.length) return '';
     const names = scope.related.map(other=>esc(other.name)).join(' · ');
-    return `<div class="review-scope" aria-label="Review scope"><p><strong>Reviewing</strong> ${esc(scope.description || item.name)}</p><p class="separate-reviews"><strong>Separate review items</strong> ${names}</p>${scope.excluded.length?`<p class="scope-excluded">Hidden in this preview: ${scope.excluded.map(other=>esc(other.name)).join(' · ')}</p>`:''}</div>`;
+    return `<div class="review-scope" aria-label="Review scope"><p><strong>Reviewing</strong> ${esc(scope.description || item.name)}</p><p class="separate-reviews"><strong>Outlined · reviewed separately</strong> ${names}</p>${scope.excluded.length?`<p class="scope-excluded">Hidden in this preview: ${scope.excluded.map(other=>esc(other.name)).join(' · ')}</p>`:''}</div>`;
   };
   const boxStyle = (b: Box) => `left:${pct(b.x)};top:${pct(b.y)};width:${pct(b.w)};height:${pct(b.h)}`;
+  const referenceLayers = (p: ReviewPacket, item: Component) => p.stage === 'hero' ? '' : reviewScope(p,item).related.map(other => {
+    const b=item.box,o=other.box;
+    const x=Math.max(b.x,o.x),y=Math.max(b.y,o.y);
+    const relative={x:(x-b.x)/b.w,y:(y-b.y)/b.h,w:Math.max(0,Math.min(b.x+b.w,o.x+o.w)-x)/b.w,h:Math.max(0,Math.min(b.y+b.h,o.y+o.h)-y)/b.h};
+    return `<span class="reference-layer" style="${boxStyle(relative)}" title="Reviewed separately: ${esc(other.name)}" aria-label="Reviewed separately: ${esc(other.name)}"><span>${esc(other.name)}</span></span>`;
+  }).join('');
   function focusReview(id: string) {
     root.getElementById(id)?.focus({preventScroll:true});
   }
@@ -220,9 +226,9 @@ export function mountComponentReview(host: HTMLElement, packet: ReviewPacket, op
           </div>`:''}
 
           <div class="comparison-slot"><div class="comparison-panel ${groupOverview?'group-overview':''}"><h2 class="expanded-title">${esc(groupOverview?unit!.label:v!.name)}</h2>${peers.length>1?`<div class="review-peers"><strong>${peers.length} instances</strong>${!groupOverview?'<button id="all-instances" class="quiet">All instances</button>':'<span class="group-hint">Select to inspect</span>'}</div>`:''}<div class="compare-toolbar">${priorComponent?`<div class="round-switch" role="group" aria-label="Preview version"><button id="current-round" aria-label="Current · round ${packet.round}" title="Current · round ${packet.round}" aria-pressed="${!viewingPrevious}">Current</button><button id="previous-round" aria-label="Previous · round ${history!.packet.round}" title="Previous · round ${history!.packet.round}" aria-pressed="${viewingPrevious}">Previous</button></div>`:''}<label class="zoom-control" title="Comparison zoom · based on comp pixels">${icon('zoom')}<select id="zoom" aria-label="Comparison zoom">${[['fit','Fit'],['1','100%'],['2','200%'],['4','400%']].map(([value,label])=>`<option value="${value}" ${String(zoom)===value?'selected':''}>${label}</option>`).join('')}</select>${icon('chevronDown')}</label><button id="overlay" class="overlay-control" aria-label="Overlay comp" title="Overlay approved comp" aria-pressed="${overlay}"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="10" height="10"/><rect x="7" y="7" width="10" height="10"/></svg><span class="overlay-label">Overlay</span></button><div class="comparison-actions" role="group" aria-label="Comparison view actions"><button id="expand-comparison" class="icon-button" aria-label="${expandedComparison?'Restore comparison':'Enlarge comparison'}" title="${expandedComparison?'Restore comparison (Esc)':'Enlarge comparison'}" aria-expanded="${expandedComparison}">${icon(expandedComparison?'compact':'expand')}</button>${v?.preview.kind==='image'?`<a class="icon-button source-link" href="${url(sourceUrl!)}" target="_blank" rel="noopener" aria-label="${useContext?'Open context capture':presentation!.fileLabel}" title="${useContext?'Open context capture':presentation!.fileLabel}">${icon('external')}</a>`:''}</div></div>
-          ${groupOverview?`<div class="instance-grid" aria-label="All instances of ${esc(unit!.label)}"><div class="instance-grid-labels"><span>Full comp crop</span><span>Component preview</span></div>${unit!.members.map((m,n)=>{const st=stateFor(m);return `<button class="instance-row ${st.kind}" data-instance="${esc(m.id)}" aria-label="Inspect instance ${n+1}: ${esc(m.name)} — ${esc(st.label)}"><span class="instance-caption"><strong>${esc(m.name)}</strong><span>${esc(st.label)}</span></span><span class="instance-pair"><span class="instance-reference" style="width:min(100%,${m.box.w*packet.comp.width}px,${180*m.box.w*packet.comp.width/(m.box.h*packet.comp.height)}px);aspect-ratio:${m.box.w*packet.comp.width}/${m.box.h*packet.comp.height}"><img src="${url(packet.comp.url)}" alt="Comp: ${esc(m.name)}" loading="lazy" style="width:${100/m.box.w}%;left:${-100*m.box.x/m.box.w}%;top:${-100*m.box.y/m.box.h}%"></span><span class="instance-produced" style="width:min(100%,${m.box.w*packet.comp.width}px,${180*m.box.w*packet.comp.width/(m.box.h*packet.comp.height)}px);aspect-ratio:${m.box.w*packet.comp.width}/${m.box.h*packet.comp.height}">${m.preview.kind==='image'?`<img src="${url(m.preview.url)}" alt="Produced: ${esc(m.name)}" loading="lazy">`:m.thumbnail?`<img src="${url(m.thumbnail.url)}" alt="Preview: ${esc(m.name)}" loading="lazy">`:'Open live component'}</span></span>${scopeMarkup(packet,m)}</button>`;}).join('')}</div>`:''}
+          ${groupOverview?`<div class="instance-grid" aria-label="All instances of ${esc(unit!.label)}"><div class="instance-grid-labels"><span>Full comp crop</span><span>Component preview</span></div>${unit!.members.map((m,n)=>{const st=stateFor(m);return `<button class="instance-row ${st.kind}" data-instance="${esc(m.id)}" aria-label="Inspect instance ${n+1}: ${esc(m.name)} — ${esc(st.label)}"><span class="instance-caption"><strong>${esc(m.name)}</strong><span>${esc(st.label)}</span></span><span class="instance-pair"><span class="instance-reference" style="width:min(100%,${m.box.w*packet.comp.width}px,${180*m.box.w*packet.comp.width/(m.box.h*packet.comp.height)}px);aspect-ratio:${m.box.w*packet.comp.width}/${m.box.h*packet.comp.height}"><img src="${url(packet.comp.url)}" alt="Comp: ${esc(m.name)}" loading="lazy" style="width:${100/m.box.w}%;left:${-100*m.box.x/m.box.w}%;top:${-100*m.box.y/m.box.h}%">${referenceLayers(packet,m)}</span><span class="instance-produced" style="width:min(100%,${m.box.w*packet.comp.width}px,${180*m.box.w*packet.comp.width/(m.box.h*packet.comp.height)}px);aspect-ratio:${m.box.w*packet.comp.width}/${m.box.h*packet.comp.height}">${m.preview.kind==='image'?`<img src="${url(m.preview.url)}" alt="Produced: ${esc(m.name)}" loading="lazy">`:m.thumbnail?`<img src="${url(m.thumbnail.url)}" alt="Preview: ${esc(m.name)}" loading="lazy">`:'Open live component'}</span></span>${scopeMarkup(packet,m)}</button>`;}).join('')}</div>`:''}
           ${!groupOverview&&v?scopeMarkup(vp,v):''}<div class="compare">
-            <figure><figcaption>${viewingPrevious ? `Comp · Round ${history!.packet.round}` : assembled ? 'Approved comp' : visibleScope?.related.length ? 'Full comp crop' : 'In the comp'}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${url(vp.comp.url)}" alt="Reference region for ${esc(v!.name)}" style="width:${100/v!.box.w}%;left:${-100*v!.box.x/v!.box.w}%;top:${-100*v!.box.y/v!.box.h}%"></div></div></figure>
+            <figure><figcaption>${viewingPrevious ? `Comp · Round ${history!.packet.round}` : assembled ? 'Approved comp' : visibleScope?.related.length ? 'Full comp crop' : 'In the comp'}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${url(vp.comp.url)}" alt="Reference region for ${esc(v!.name)}" style="width:${100/v!.box.w}%;left:${-100*v!.box.x/v!.box.w}%;top:${-100*v!.box.y/v!.box.h}%">${referenceLayers(vp,v!)}</div></div></figure>
             <figure><figcaption>${viewingPrevious ? `Previous · Round ${history!.packet.round}` : assembled ? 'Assembled page' : useContext ? 'In context' : history ? `${presentation!.caption} · Round ${packet.round}` : presentation!.caption}</figcaption><div class="pan-viewport" aria-label="Produced comparison canvas" tabindex="0"><div class="output crop-stage ${hasTransparency&&!useContext&&!useFrame&&backdrop==='checker'?'checker':''}">${!useFrame ? `<img class="asset" src="${url(sourceUrl!)}" alt="Produced ${esc(v!.name)}" style="object-position:${esc(v!.preview.position ?? 'center')}">` : `<iframe aria-hidden="true" title="Rendered ${esc(v!.name)}" src="${url(sourceUrl!)}" sandbox="" tabindex="-1" width="${vp.comp.width}" height="${vp.comp.height}"></iframe>`}${overlay ? `<img class="crop-image overlay-image" src="${url(vp.comp.url)}" alt="Reference overlay" style="width:${100/v!.box.w}%;left:${-100*v!.box.x/v!.box.w}%;top:${-100*v!.box.y/v!.box.h}%">` : ''}</div></div></figure>
           </div>
           ${hasTransparency || v!.context ? `<div class="view-controls">${v!.context ? `<div role="group" aria-label="Component view"><button id="isolated" aria-pressed="${!useContext}">${isRaster?'Asset only':'Component only'}</button><button id="context" aria-pressed="${useContext}">In context</button></div>` : ''}${hasTransparency?`<div class="background-options" role="group" aria-label="Asset preview background"><button id="background-checker" class="swatch-button" aria-label="Checkerboard background" title="Checkerboard background" aria-pressed="${backdrop==='checker'}" ${useContext?'disabled':''}><span class="background-swatch checker"></span></button><button id="background-page" class="swatch-button" aria-label="${vp.comp.background?'Page color':'Neutral'} background" title="${vp.comp.background?'Page color':'Neutral'} background" aria-pressed="${backdrop==='page'}" ${useContext?'disabled':''}><span class="background-swatch page-swatch"></span></button></div>`:''}</div>` : ''}
diff --git a/ui/component-review/styles.ts b/ui/component-review/styles.ts
index 9fc4d98d7..8e95638c0 100644
--- a/ui/component-review/styles.ts
+++ b/ui/component-review/styles.ts
@@ -134,4 +134,6 @@ export const styles = `
 .review-scope .separate-reviews,.review-scope .scope-excluded{font-size:11px;color:var(--muted)}
 .instance-row .review-scope{margin:12px 0 0}
 #comparison-dialog .review-scope{flex:none}
+
+.reference-layer{position:absolute;box-sizing:border-box;border:1px dashed #fff;outline:1px solid #173e43;pointer-events:none;z-index:2}.reference-layer>span{position:absolute;top:0;left:0;max-width:100%;padding:1px 4px;background:#173e43;color:white;font:10px/1.4 var(--font-sans,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s}.instance-row:hover .reference-layer>span,.instance-row:focus-visible .reference-layer>span,.pan-viewport:hover .reference-layer>span,.pan-viewport:focus .reference-layer>span{opacity:1}
 `;