design-spine 0.1.0 → 0.2.0

package/src/ui/index.html

@@ -5,226 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Design Spine review</title>
 <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23b94713%22%20d%3D%22M3%202h5v28H3z%22%2F%3E%3Cpath%20fill%3D%22%2320231f%22%20d%3D%22M12%202h17v7H12zm0%2011h17v7H12zm0%2011h17v7H12z%22%2F%3E%3C%2Fsvg%3E">
-<style>
-:root {
-  color-scheme: light dark;
-  --bg: #f7f6f2; --surface: #fff; --ink: #20231f; --muted: #62675e; --line: #dedfd7;
-  --accent: #b34512; --accent-bg: #f9eadf; --ok: #25633f; --ok-bg: #e8f2e9;
-  --bad: #a83232; --bad-bg: #f9e8e5; --warn: #785411; --warn-bg: #f8efd8;
-  --focus: #b94713; --on-strong: #fff; --radius: 8px;
-  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #171b18; --surface: #202620; --ink: #eef0e8; --muted: #adb5a7; --line: #3a4438;
-    --accent: #ffac7c; --accent-bg: #3c2b22; --ok: #8fdaac; --ok-bg: #223a2b;
-    --bad: #ffaaa4; --bad-bg: #402929; --warn: #ead08a; --warn-bg: #3b3422;
-    --focus: #ffac7c; --on-strong: #171b18; }
-}
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-button, input, select, textarea { font: inherit; color: inherit; }
-button { cursor: pointer; }
-button, select, input { min-height: 44px; }
-button:disabled { opacity: .55; cursor: wait; }
-a { color: inherit; }
-button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
-:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
-.skip { position: fixed; left: 16px; top: -80px; z-index: 50; background: var(--surface); padding: 12px; }
-.skip:focus { top: 8px; }
-header { height: 64px; padding: 0 24px; border-bottom: 1px solid var(--line); display: flex; gap: 24px; align-items: center; background: var(--surface); }
-.brand { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 18px; letter-spacing: -.5px; }
-.mark { width: 25px; height: 30px; border-left: 5px solid var(--accent); display: grid; gap: 3px; padding-left: 4px; }
-.mark i { background: var(--ink); height: 7px; width: 16px; }
-.header-label { border-left: 1px solid var(--line); padding-left: 24px; color: var(--muted); font-size: 12px; }
-.header-actions { margin-left: auto; display: flex; gap: 8px; }
-.button, .pill, .actions button { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; font-weight: 600; }
-.button:hover, .pill:hover, .actions button:hover { border-color: var(--muted); background: var(--bg); }
-.button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
-.workspace { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: calc(100vh - 64px); }
-aside { padding: 32px 20px; border-right: 1px solid var(--line); }
-.sidebar-sticky { position: sticky; top: 24px; }
-.eyebrow { font: 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
-#route-nav { min-height: 44px; display: grid; gap: 4px; margin-top: 16px; }
-#route-nav a { text-decoration: none; display: flex; justify-content: space-between; gap: 8px; border-radius: 6px; padding: 11px 12px; font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
-#route-nav a:hover { background: var(--accent-bg); color: var(--accent); }
-#route-nav span { color: var(--muted); }
-.sidebar-note { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; font-size: 12px; color: var(--muted); }
-main { min-width: 0; max-width: 1800px; width: 100%; padding: 16px 28px 120px; margin: 0 auto; }
-.intro { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
-h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 650; letter-spacing: -2px; line-height: 1.1; margin: 6px 0; }
-.subtitle { color: var(--muted); margin: 0; max-width: 52ch; }
-.run-context { max-width: 270px; color: var(--muted); text-align: right; font: 11px/1.7 var(--mono); overflow-wrap: anywhere; }
-#runid { display: block; }
-.stats { min-height: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
-.stat { padding: 8px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
-.stat:last-child { border: 0; }
-.stat b { font-size: 24px; font-weight: 550; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
-.stat span { color: var(--muted); font-size: 12px; }
-.stat.flagged b { color: var(--accent); }
-.progress-row { display: flex; align-items: center; gap: 16px; margin: 10px 0 12px; color: var(--muted); font-size: 12px; }
-progress { appearance: none; border: 0; background: var(--line); height: 4px; flex: 1; border-radius: 4px; }
-progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
-progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
-progress::-moz-progress-bar { background: var(--accent); }
-.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
-.field { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
-.search-field { flex: 1; min-width: 180px; }
-input, select { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px 12px; width: 100%; }
-.filters { display: flex; flex-wrap: wrap; gap: 8px; }
-.pill { font-size: 12px; }
-.pill[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
-.results-row { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0 8px; color: var(--muted); font: 11px/1.5 var(--mono); }
-.route { margin: 0 0 48px; scroll-margin-top: 24px; }
-.route > h2 { display: flex; gap: 12px; align-items: center; font-size: 20px; margin: 0; font-weight: 600; }
-.route > h2::before { content: ''; background: var(--accent); width: 4px; height: 20px; }
-.route > h2 code { font: 600 18px var(--mono); overflow-wrap: anywhere; }
-.state { margin: 4px 0 8px; }
-.state > h3 { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
-.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); align-items: start; }
-.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-.tile.focus { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 20%, transparent); }
-.tile.approved { border-top: 3px solid var(--ok); padding-top: 10px; }
-.tile.rejected { border-top: 3px solid var(--bad); padding-top: 10px; }
-.tile .head { display: flex; justify-content: space-between; gap: 8px; font: 11px/1.5 var(--mono); color: var(--muted); }
-.thumb { border: 1px solid var(--line); border-radius: 4px; overflow: auto; height: 220px; background: var(--bg); }
-.thumb img { display: block; width: 100%; height: auto; object-position: top; cursor: zoom-in; }
-.badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
-.badge { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--bad-bg); color: var(--bad); overflow-wrap: anywhere; }
-.badge.warn { background: var(--warn-bg); color: var(--warn); }
-.badge.ok { background: var(--ok-bg); color: var(--ok); }
-.crit { font-size: 12px; border-top: 1px solid var(--line); padding-top: 12px; overflow-wrap: anywhere; }
-.crit ul { margin: 8px 0 0; padding-left: 16px; }
-.crit .sev { font-weight: 700; text-transform: uppercase; font-size: 10px; color: var(--muted); }
-.actions { display: flex; gap: 6px; }
-.actions button { flex: 1; padding: 6px 4px; font-size: 12px; min-width: 0; }
-.tile .comparison-status { margin: 0; }
-.tile-more { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px; }
-.tile-more > summary { cursor: pointer; min-height: 32px; padding: 6px 0; overflow-wrap: anywhere; }
-.tile-more[open] > summary { color: var(--ink); }
-.tile-more > * + * { margin-top: 8px; }
-.actions .approve[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--on-strong); }
-.actions .reject[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--on-strong); }
-textarea { width: 100%; resize: vertical; min-height: 64px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 10px; font-size: 12px; }
-.empty { padding: 64px 24px; text-align: center; color: var(--muted); }
-.empty h2 { color: var(--ink); font-size: 24px; letter-spacing: -.5px; }
-.keys { color: var(--muted); font-size: 11px; }
-kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font: 10px var(--mono); }
-#cards[aria-busy="true"] ~ footer { visibility: hidden; }
-footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: 11px; }
-#comparison-status { min-height: 64px; padding: 10px 0; margin-bottom: 8px; color: var(--muted); font-size: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
-.pagination[hidden] { display: none; }
-.page-label { color: var(--muted); font-size: 12px; text-align: center; }
-#save-status:empty { visibility: hidden; }
-#save-status { position: fixed; z-index: 20; bottom: 12px; left: 236px; right: 28px; min-height: 64px; padding: 12px 16px; margin-bottom: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
-#save-status.error { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
-.note-label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
-.inspect { width: 100%; font-size: 12px; min-height: 44px; }
-.diagnostics { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
-.diagnostics summary { cursor: pointer; padding: 6px 0; }
-.diagnostics ul { padding-left: 18px; }
-.capture-missing { padding: 24px; color: var(--muted); }
-#lightbox { width: calc(100vw - 48px); max-width: 1600px; height: calc(100vh - 48px); max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
-#lightbox::backdrop { background: #101510db; }
-.viewer-toolbar { padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--surface); display: flex; gap: 16px; justify-content: space-between; align-items: center; }
-.viewer-toolbar h2 { font: 600 14px var(--mono); margin: 0; overflow-wrap: anywhere; }
-.viewer-toolbar p { margin: 4px 0 0; color: var(--muted); font: 11px var(--mono); }
-.viewer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
-.viewer-actions .button { font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
-#lightbox[open] { display: flex; flex-direction: column; }
-.viewer-toolbar { flex-shrink: 0; }
-.viewer-canvas { overflow: auto; flex: 1; min-height: 0; padding: 24px; }
-#viewer-image { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
-#viewer-image.actual { max-width: none; }
-#viewer-image[hidden] { display: none; }
-.evidence-frame { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
-.evidence-frame.actual { max-width: none; }
-#diagnostic-overlay, #note-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-#note-overlay[hidden], #diagnostic-overlay[hidden] { display: none; }
-#diagnostic-overlay rect { fill: #efb62c26; stroke: #a24c00; stroke-width: 2; vector-effect: non-scaling-stroke; }
-.diagnostic-controls[hidden] { display: none; }
-.diagnostic-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
-#viewer-error { color: var(--bad); }
-.viewer-review { flex-shrink: 0; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--surface); max-height: 42%; overflow: auto; }
-.viewer-decisions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
-#viewer-decision { font: 600 12px var(--mono); margin-right: auto; }
-.viewer-decisions [aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -4px; }
-#viewer-save-status { margin: 8px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
-#viewer-save-status.error { color: var(--bad); }
-.viewer-note { margin-top: 8px; font-size: 12px; }
-.viewer-note summary { cursor: pointer; min-height: 32px; padding: 8px 0; }
-.viewer-note .note-label { margin: 8px 0; }
-#viewer-note-help { font-size: 12px; line-height: 1.5; background: var(--surface); }
-#viewer-note { width: 100%; min-height: 64px; resize: vertical; padding: 10px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; font: inherit; }
-@media (max-width: 700px) { .viewer-review { padding: 10px 12px; } .viewer-decisions .button { padding: 8px 10px; font-size: 12px; } }
-.comparison-toolbar { padding: 12px 24px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
-.comparison-toolbar label { white-space: nowrap; display: flex; gap: 8px; align-items: center; }
-.comparison-toolbar select { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
-#comparison-context { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
-.comparison-status { margin: 0; color: var(--muted); font: 11px/1.5 var(--mono); }
-.viewer-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
-.viewer-pair.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.viewer-pair figure { margin: 0; min-width: 0; }
-.viewer-pair figcaption { color: var(--muted); margin-bottom: 8px; font: 12px var(--mono); }
-#baseline-pane[hidden] { display: none; }
-#baseline-image { display: block; max-width: 100%; height: auto; background: #fff; }
-#baseline-image.actual { max-width: none; }
-@media (max-width: 700px) { .viewer-pair.split { grid-template-columns: minmax(0, 1fr); } .comparison-toolbar { padding: 12px; } }
-@media (max-width: 700px) {
-  #lightbox { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
-  .viewer-toolbar { padding: 12px; flex-direction: column; align-items: stretch; position: relative; }
-  .viewer-toolbar > div:first-child { padding-right: 70px; }
-  #viewer-close { position: absolute; top: 12px; right: 12px; }
-  .viewer-actions { gap: 6px; } .viewer-actions .button { padding: 8px 10px; }
-  .viewer-canvas { padding: 12px; }
-  #save-status { left: 12px; right: 12px; min-height: 96px; }
-  .toolbar > .field:not(.search-field) { flex: 1 1 90px; }
-  .toolbar > .search-field { flex-basis: 100%; min-width: 0; }
-  .filters .button, .filters .pill { padding: 8px 10px; font-size: 11px; }
-  .brand { font-size: 16px; gap: 8px; }
-}
-@media (max-width: 1000px) { #save-status { left: 194px; right: 24px; } main { padding: 32px 24px 120px; } .workspace { grid-template-columns: 170px minmax(0, 1fr); } .intro { align-items: start; flex-direction: column; } .run-context { text-align: left; max-width: 100%; } .stat { padding: 12px; } }
-@media (max-width: 700px) {
-  header { height: auto; min-height: 72px; padding: 16px; gap: 12px; flex-wrap: wrap; }
-  .header-label { display: none; } .header-actions .button { padding: 8px 12px; font-size: 12px; }
-  .workspace { display: block; } aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
-  .sidebar-sticky { position: static; } aside .eyebrow, .sidebar-note { display: none; }
-  #route-nav { display: flex; overflow-x: auto; margin: 0; } #route-nav a { flex-shrink: 0; gap: 16px; }
-  main { padding: 20px 16px 140px; } h1 { letter-spacing: -1.5px; } .intro { gap: 16px; }
-  .stats { min-height: 82px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 24px; }
-  .stat { padding: 12px 6px; } .stat b { font-size: 24px; } .stat span { font-size: 11px; }
-  .progress-row { margin-bottom: 24px; } .row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
-  .thumb { height: 200px; } .keys { display: none; } footer { flex-direction: column; }
-  .intro > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-  #runid { display: none; } .stats { margin-top: 12px; min-height: 0; } .stat { padding: 8px 4px; } .stat b { font-size: 20px; }
-  .progress-row { margin-bottom: 12px; } .toolbar { gap: 8px; }
-  .toolbar > .field:not(.search-field) { flex: 1 1 calc(50% - 8px); }
-  .toolbar > .field { font-size: 0; gap: 0; } .toolbar > .field select, .toolbar > .field input { font-size: 14px; }
-  .filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; } .filters > * { flex-shrink: 0; }
-}
-@media (min-width: 1001px) { #route-nav { max-height: calc(100dvh - 280px); overflow-y: auto; overscroll-behavior: contain; } }
-@media (max-width: 700px) { #save-status { left: 12px; right: 12px; } }
-@media (prefers-reduced-motion: no-preference) { button, a { transition: background .15s, border-color .15s; } }
-#coverage { margin-top: 10px; }
-#coverage-details ul { max-height: 220px; overflow: auto; }
-#coverage-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
-#overlay-image { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
-#overlay-image[hidden], #blend-control[hidden] { display: none; }
-#blend { width: 100px; }
-#note-overlay circle { fill: #b34512; stroke: white; stroke-width: 2; vector-effect: non-scaling-stroke; }
-.viewer-note fieldset { display: flex; flex-wrap: wrap; gap: 12px; } .viewer-note fieldset label { max-width: 140px; }
-#anchor-status { font-size: 12px; margin: 6px 0; }
-@media (min-width: 1001px) { .intro .subtitle { display: none; } }
-@media (min-width: 1001px) {
-  .run-context label { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
-  .run-context select { min-width: 0; }
-  .run-context { max-width: 420px; }
-  #runid { display: inline; margin-left: 8px; }
-  .stats { min-height: 44px; }
-  .stat { flex-direction: row; align-items: center; padding: 8px 12px; gap: 8px; }
-  .stat b { font-size: 20px; }
-}
-</style>
+<link rel="stylesheet" href="/assets/review.css">
 </head>
 <body>
 <a class="skip" href="#main">Skip to review</a>
@@ -240,7 +21,7 @@ footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1
   <details id="coverage" class="diagnostics"><summary id="coverage-summary">Coverage unknown</summary><div id="coverage-details"></div></details>
   <div class="stats" id="stats" role="group" aria-label="Run summary"></div>
   <div class="progress-row"><span id="progress-label">Loading review progress</span><progress id="progress" value="0" max="1" aria-label="Reviewed screenshots"></progress><span id="percent">0%</span></div>
-  <div class="toolbar"><label class="field search-field">Search routes or states<input id="search" type="search" placeholder="Find a route, e.g. /pricing" autocomplete="off"></label><label class="field">Review status<select id="status-filter"><option value="">All decisions</option><option value="approve">Approved</option><option value="reject">Rejected</option></select></label><label class="field">Comparison<select id="comparison-filter"><option value="">All evidence</option><option value="new">New · no baseline</option><option value="changed">Changed</option><option value="size-changed">Dimensions changed</option><option value="unchanged">Within threshold</option><option value="no-capture">No capture</option><option value="unavailable">Unavailable</option></select></label><label class="field">Viewport<select id="viewport-filter"><option value="">All widths</option></select></label><label class="field">Capture theme<select id="theme-filter"><option value="">All themes</option><option value="light">Light</option><option value="dark">Dark</option></select></label><div class="filters"><button class="pill" id="f-flagged" aria-pressed="false">Only flagged</button><button class="pill" id="f-changed" aria-pressed="false">Only changed</button><button class="pill" id="f-unrev" aria-pressed="false">Only unreviewed</button><button class="button" id="clear-filters">Clear filters</button></div></div>
+  <div class="toolbar"><label class="field search-field">Search routes or states<input id="search" type="search" placeholder="Find a route, e.g. /pricing" autocomplete="off"></label><button class="button" id="toggle-filters" aria-expanded="false" aria-controls="secondary-filters">Filters</button><div id="secondary-filters" class="secondary-filters"><label class="field">Review status<select id="status-filter"><option value="">All decisions</option><option value="approve">Approved</option><option value="reject">Rejected</option></select></label><label class="field">Comparison<select id="comparison-filter"><option value="">All evidence</option><option value="new">New · no baseline</option><option value="changed">Changed</option><option value="size-changed">Dimensions changed</option><option value="unchanged">Within threshold</option><option value="no-capture">No capture</option><option value="unavailable">Unavailable</option></select></label><label class="field">Viewport<select id="viewport-filter"><option value="">All widths</option></select></label><label class="field">Capture theme<select id="theme-filter"><option value="">All themes</option><option value="light">Light</option><option value="dark">Dark</option></select></label><div class="filters"><button class="pill" id="f-flagged" aria-pressed="false">Only flagged</button><button class="pill" id="f-changed" aria-pressed="false">Only changed</button><button class="pill" id="f-unrev" aria-pressed="false">Only unreviewed</button><button class="button" id="clear-filters">Clear filters</button></div></div></div>
   <div class="results-row"><span id="results" aria-live="polite">Loading captures…</span><div class="keys"><kbd>j</kbd>/<kbd>k</kbd> move &nbsp; <kbd>a</kbd> approve &nbsp; <kbd>r</kbd> reject &nbsp; <kbd>Enter</kbd> inspect</div></div>
   <nav id="pagination" class="pagination" aria-label="Capture pages" hidden><button class="button" id="page-prev" data-page-step="-1" aria-label="Previous page">Previous</button><span id="page-label" class="page-label" aria-live="polite"></span><button class="button" id="page-next" data-page-step="1" aria-label="Next page">Next</button></nav>
   <div id="save-status" role="status" aria-live="polite"></div>
@@ -256,494 +37,6 @@ footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1
   <div class="viewer-canvas" tabindex="0" role="region" aria-label="Full-size screenshot preview"><div class="viewer-pair"><figure id="baseline-pane" hidden><figcaption>Baseline</figcaption><img id="baseline-image" alt=""></figure><figure><figcaption id="current-caption">Current</figcaption><div class="evidence-frame"><img id="viewer-image" alt=""><img id="overlay-image" alt="Baseline overlay" hidden><svg id="diagnostic-overlay" aria-hidden="true" hidden></svg><svg id="note-overlay" aria-hidden="true" hidden></svg></div></figure></div><p id="viewer-error" hidden>Screenshot unavailable. Refresh the evidence; check the capture files if it persists. <button class="button" id="viewer-refresh">Refresh evidence</button></p></div>
   <div class="viewer-review"><div class="viewer-decisions"><span id="viewer-decision">Pending</span><button class="button" id="viewer-approve" aria-pressed="false">Approve</button><button class="button" id="viewer-reject" aria-pressed="false">Reject</button><button class="button" id="viewer-pending">Next pending</button></div><p id="viewer-save-status" role="status" aria-live="polite">Decisions save locally.</p><button class="button" id="viewer-retry" hidden>Retry unsaved changes</button><button class="button" id="anchor-note" aria-pressed="false">Locate note on screenshot</button><button class="button" id="clear-anchor" hidden>Clear note location</button><p id="anchor-status"></p><button class="button" id="jump-anchor" hidden>Go to note location</button><details class="viewer-note"><summary id="viewer-note-summary">Review note</summary><label class="note-label" for="viewer-note">Note for this screenshot<textarea id="viewer-note" maxlength="2000" aria-describedby="viewer-note-help"></textarea><small id="viewer-note-help">Up to 2,000 characters. Save the note or include it with a decision. Drafts stay here until saved.</small></label><button class="button" id="viewer-save-note">Save note</button><fieldset><legend>Note location on original screenshot</legend><label>X in pixels <input id="anchor-x" type="number" min="0" step="1" value="0"></label><label>Y in pixels <input id="anchor-y" type="number" min="0" step="1" value="0"></label><button class="button" id="save-anchor">Save location</button></fieldset></details></div>
 </dialog>
-<script>
-const state = { run: null, review: {}, critique: {}, comparison: {}, comparisonLoading: false, comparisonFailed: false, comparisonGeneration: 0, comparedAt: null, threshold: 0.002, onlyChanged: false, page: 0, pageSize: 48, viewerMode: 'current', onlyFlagged: false, onlyUnreviewed: false, search: '', status: '', evidence: '', viewport: '', theme: '', focus: null, drafts: new Map(), pending: new Map(), failures: new Map(), loading: true, viewer: null, returnFocus: null };
-const selectedRun = () => new URL(location.href).searchParams.get('run');
-const apiPath = path => { const url = new URL(path, location.origin); if (selectedRun()) url.searchParams.set('run', selectedRun()); return url.pathname + url.search; };
-const $ = s => document.querySelector(s);
-const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
-const decision = t => state.review[t.id]?.decision || null;
-const comparisonLabels = { new: 'New · no baseline', changed: 'Changed', unchanged: 'Within threshold', 'size-changed': 'Dimensions changed', 'no-capture': 'Comparison: no capture', unavailable: 'Comparison unavailable' };
-
-function flags(t) {
-  const f = [];
-  if (t.accessibility?.error) f.push(t.accessibility.error);
-  if (t.accessibility?.violations.length) f.push(t.accessibility.violations.length + ' automated accessibility findings');
-  if (t.stability === 'unstable') f.push('Capture did not stabilize');
-  if (t.error) f.push('Capture failed: ' + t.error);
-  if (t.status === 0 && !t.error) f.push('No response');
-  if (t.status >= 400) f.push('HTTP ' + t.status);
-  if (t.overflowX) f.push('Horizontal overflow');
-  if (t.blankRegions.count) f.push(t.blankRegions.count + ' blank region' + (t.blankRegions.count > 1 ? 's' : ''));
-  if (t.brokenImages.length) f.push(t.brokenImages.length + ' broken image' + (t.brokenImages.length > 1 ? 's' : ''));
-  if (t.consoleErrors.length) f.push(t.consoleErrors.length + ' console error' + (t.consoleErrors.length > 1 ? 's' : ''));
-  if (t.pageErrors.length) f.push(t.pageErrors.length + ' page error' + (t.pageErrors.length > 1 ? 's' : ''));
-  if (t.redirectedTo) f.push('Redirected to ' + t.redirectedTo);
-  return f;
-}
-const isFlagged = t => flags(t).length > 0;
-function visibleTiles() {
-  const routeOrder = new Map([...new Set((state.run?.tiles || []).map(t => t.route))].map((route, index) => [route, index]));
-  return (state.run?.tiles || []).filter(t =>
-    (!state.onlyChanged || ['new', 'changed', 'size-changed'].includes(state.comparison[t.id]?.status)) && (!state.onlyFlagged || isFlagged(t)) && (!state.onlyUnreviewed || !decision(t)) &&
-    (!state.evidence || state.comparison[t.id]?.status === state.evidence) && (!state.status || decision(t) === state.status) && (!state.viewport || String(t.viewport) === state.viewport) &&
-    (!state.theme || t.theme === state.theme) && (t.route + ' ' + t.state).toLowerCase().includes(state.search)
-  ).sort((a, b) => routeOrder.get(a.route) - routeOrder.get(b.route) || a.state.localeCompare(b.state) || a.viewport - b.viewport || (a.theme === b.theme ? 0 : a.theme === 'light' ? -1 : 1));
-}
-function showEmpty(title, text, action, callback) {
-  const box = el('div', 'empty'); box.append(el('h2', null, title), el('p', null, text));
-  if (action) { const button = el('button', 'button', action); button.addEventListener('click', callback); box.append(button); }
-  $('#cards').replaceChildren(box);
-}
-async function load() {
-  state.loading = true; state.run = null; state.review = {}; state.critique = {}; state.comparison = {}; $('#cards').setAttribute('aria-busy', 'true'); $('#progress-label').textContent = 'Loading review progress'; $('#percent').textContent = '…'; updateControls();
-  showEmpty('Loading your captures…', 'Reading this run’s screenshots and review decisions.');
-  try {
-    const response = await fetch(apiPath('/api/run?compare=false'));
-    if (!response.ok) throw new Error('The review server returned HTTP ' + response.status + '.');
-    const data = await response.json();
-    if (!data.run || !Array.isArray(data.run.tiles)) throw new Error('This run does not contain valid capture data.');
-    state.comparison = data.comparison?.tiles || {}; state.threshold = data.comparison?.threshold ?? 0.002; state.run = data.run; state.review = data.review?.tiles || {}; state.critique = data.critique?.tiles || {};
-    if (!selectedRun() && data.runKey) { const url = new URL(location.href); url.searchParams.set('run', data.runKey); history.replaceState(null, '', url); }
-    renderCoverage();
-    loadHistory();
-    $('#runid').textContent = data.run.id; $('#baseurl').textContent = data.run.baseUrl;
-    const nav = $('#route-nav'); nav.replaceChildren();
-    for (const [index, route] of [...new Set(data.run.tiles.map(t => t.route))].entries()) {
-      const link = el('a', null, route); link.href = '#route-' + index;
-      link.dataset.route = route; link.append(el('span'));
-      link.addEventListener('click', event => { event.preventDefault(); clearFilters(); const position = visibleTiles().findIndex(t => t.route === route); state.page = Math.floor(Math.max(0, position) / state.pageSize); render(); const section = $('#route-' + index); if (section) { section.scrollIntoView({ block: 'start' }); section.querySelector('h2').focus({ preventScroll: true }); } });
-      nav.append(link);
-    }
-    const select = $('#viewport-filter'); select.replaceChildren(new Option('All widths', ''));
-    for (const width of [...new Set(data.run.tiles.map(t => t.viewport))].sort((a, b) => a - b)) select.add(new Option(width + 'px', String(width)));
-    state.loading = false; render(); loadComparison(data.comparison);
-    const linked = new URL(location.href).searchParams.get('tile'); const linkedTile = data.run.tiles.find(t => t.id === linked); if (linkedTile) openBox(linkedTile);
-  } catch (error) {
-    state.loading = false; $('#runid').textContent = 'Run unavailable'; $('#results').textContent = 'Unable to load captures'; $('#progress-label').textContent = 'Review progress unavailable'; $('#percent').textContent = 'n/a';
-    showEmpty('Could not load this run.', error.message + ' Check that the review server is running, then retry.', 'Retry loading', load);
-  } finally { $('#cards').setAttribute('aria-busy', 'false'); updateControls(); }
-}
-async function loadComparison(provided) {
-  const generation = ++state.comparisonGeneration;
-  state.comparisonLoading = true; state.comparisonFailed = false;
-  $('#comparison-status').textContent = 'Comparing captures with local baselines… You can continue reviewing.';
-  for (const label of document.querySelectorAll('.tile .comparison-status')) label.textContent = 'Comparing…';
-  updateControls();
-  try {
-    let comparison = provided;
-    if (!comparison) {
-      const response = await fetch(apiPath('/api/comparison'));
-      if (!response.ok) throw new Error('Comparison unavailable');
-      comparison = await response.json();
-    }
-    if (!comparison || !comparison.tiles || typeof comparison.threshold !== 'number') throw new Error('Invalid comparison evidence');
-    if (generation !== state.comparisonGeneration) return;
-    state.comparison = comparison.tiles; state.threshold = comparison.threshold; state.comparedAt = comparison.comparedAt || null;
-    $('#comparison-status').textContent = 'Comparison ready · threshold ' + (state.threshold * 100).toFixed(2) + '% · Baselines change only through the approve command.';
-  } catch {
-    if (generation !== state.comparisonGeneration) return;
-    state.comparisonFailed = true;
-    const box = $('#comparison-status'); box.replaceChildren(el('span', null, 'Comparison could not load. Your captures and review notes are still available.'));
-    const retry = el('button', 'button', 'Retry comparison'); retry.addEventListener('click', () => loadComparison()); box.append(retry);
-  } finally {
-    if (generation === state.comparisonGeneration) {
-      state.comparisonLoading = false; if (state.onlyChanged || state.evidence) render(); updateControls();
-      for (const card of document.querySelectorAll('.tile')) card.querySelector('.comparison-status').textContent = comparisonLabels[state.comparison[card.dataset.id]?.status] || (state.comparisonFailed ? 'Comparison unavailable' : 'Not compared');
-      if ($('#lightbox').open) { if (viewerTiles().some(t => t.id === state.viewer)) updateViewer(); else $('#lightbox').close(); }
-    }
-  }
-}
-function updateControls() {
-  const dirty = state.drafts.size || state.pending.size || state.failures.size;
-  for (const control of document.querySelectorAll('.toolbar input, .toolbar select, .toolbar button')) control.disabled = !state.run || state.loading;
-  $('#export').disabled = !state.run || state.loading || !!dirty || state.comparisonLoading;
-  $('#report').disabled = $('#export').disabled;
-  $('#run-select').disabled = !state.run || state.loading || !!dirty;
-  $('#f-changed').disabled = !state.run || state.loading || state.comparisonLoading || state.comparisonFailed;
-  $('#comparison-filter').disabled = $('#f-changed').disabled;
-  updateViewerControls();
-  $('#export').title = state.comparisonLoading ? 'Waiting for comparison evidence.' : dirty ? 'Save or retry your changes before exporting.' : 'Download the full run and confirmed review decisions.';
-  $('#next-pending').disabled = !visibleTiles().some(t => !decision(t)) || state.loading;
-}
-async function loadHistory() {
-  const select = $('#run-select'); select.replaceChildren(new Option(state.run.id, selectedRun() || ''));
-  try {
-    const response = await fetch('/api/runs'); if (!response.ok) return;
-    const runs = await response.json(); if (!Array.isArray(runs)) return;
-    const current = selectedRun(); select.replaceChildren();
-    if (!current) select.add(new Option(state.run.id + ' · opened run', ''));
-    for (const run of runs) select.add(new Option(run.id + ' · ' + run.tiles + ' captures', run.id));
-    select.value = current || '';
-  } catch { /* The opened run remains available when history cannot load. */ }
-}
-$('#run-select').addEventListener('change', () => {
-  if (state.drafts.size || state.pending.size || state.failures.size) return;
-  const url = new URL(location.href); if ($('#run-select').value) url.searchParams.set('run', $('#run-select').value); else url.searchParams.delete('run'); url.searchParams.delete('tile'); history.replaceState(null, '', url);
-  ++state.comparisonGeneration; state.viewer = null; state.focus = null; clearFilters(); load();
-});
-function renderCoverage() {
-  const run = state.run; const coverage = run.coverage;
-  const summary = $('#coverage-summary'); const details = $('#coverage-details'); details.replaceChildren();
-  if (!coverage) { summary.textContent = 'Coverage unknown · legacy run'; details.append(el('p', null, 'Recapture to record planned, skipped and excluded states.')); }
-  else {
-    const count = outcome => coverage.filter(entry => entry.outcome === outcome).length;
-    summary.textContent = count('captured') + ' of ' + coverage.length + ' planned tiles captured · ' + count('failed') + ' failed · ' + count('skipped') + ' unfinished · ' + count('excluded') + ' excluded' + (count('filtered') ? ' · ' + count('filtered') + ' outside this capture’s route filter' : '');
-    const list = el('ul');
-    for (const entry of coverage) list.append(el('li', null, entry.route + ' · ' + entry.state + ' · ' + entry.viewport + 'px · ' + entry.theme + ': ' + entry.outcome + (entry.reason ? ': ' + entry.reason : '')));
-    details.append(list);
-  }
-  details.append(el('pre', null, run.provenance ? JSON.stringify(run.provenance, null, 2) : 'Capture environment unknown.'));
-}
-$('#report').addEventListener('click', () => { if (!$('#report').disabled) location.href = apiPath('/api/report'); });
-function renderStats() {
-  const tiles = state.run.tiles; const n = fn => tiles.filter(fn).length;
-  const stats = $('#stats'); stats.replaceChildren();
-  for (const [label, value] of [['Captured', tiles.length], ['Flagged', n(isFlagged)], ['Approved', n(t => decision(t) === 'approve')], ['Rejected', n(t => decision(t) === 'reject')], ['Pending', n(t => !decision(t))]]) {
-    const box = el('div', 'stat ' + label.toLowerCase()); box.append(el('b', null, String(value)), el('span', null, label)); stats.append(box);
-  }
-  for (const link of document.querySelectorAll('#route-nav a')) { const routeTiles = tiles.filter(t => t.route === link.dataset.route); link.querySelector('span').textContent = routeTiles.filter(t => !!decision(t)).length + '/' + routeTiles.length; }
-  const reviewed = n(t => !!decision(t));
-  $('#progress').max = tiles.length || 1; $('#progress').value = reviewed;
-  $('#progress-label').textContent = reviewed + ' of ' + tiles.length + ' reviewed' + (tiles.length && reviewed === tiles.length ? ' · Captured evidence reviewed' : '');
-  $('#percent').textContent = (tiles.length ? Math.round(reviewed / tiles.length * 100) : 0) + '%';
-  const matching = visibleTiles().length;
-  $('#results').textContent = matching <= state.pageSize ? matching + ' of ' + tiles.length + ' captures shown' : matching + ' matching captures · ' + tiles.length + ' total';
-  updateControls();
-}
-function renderTile(t) {
-  const d = decision(t);
-  const card = el('article', 'tile' + (d === 'approve' ? ' approved' : d === 'reject' ? ' rejected' : '') + (state.focus === t.id ? ' focus' : ''));
-  const more = el('details', 'tile-more'); const moreParts = [];
-  if (t.accessibility?.violations.length) { const details = el('details', 'diagnostics'); details.append(el('summary', null, 'Automated accessibility findings')); const list = el('ul'); for (const issue of t.accessibility.violations) list.append(el('li', null, issue.id + ': ' + issue.help + ' · ' + issue.targets.join(', '))); details.append(list); more.append(details); moreParts.push(t.accessibility.violations.length + ' a11y'); }
-  if (t.masks?.length) { const details = el('details', 'diagnostics'); details.append(el('summary', null, 'Comparison masks (' + t.masks.length + ')')); const list = el('ul'); for (const mask of t.masks) list.append(el('li', null, mask.selector + ': ' + mask.reason + ' · ' + mask.boxes.map(box => Math.round(box.x) + ',' + Math.round(box.y) + ' ' + Math.round(box.w) + '×' + Math.round(box.h) + 'px').join('; '))); details.append(list); more.append(details); moreParts.push(t.masks.length + ' masks'); }
-  card.dataset.id = t.id; card.tabIndex = 0;
-  card.setAttribute('aria-label', t.route + ', ' + t.state + ', ' + t.viewport + ' pixels, ' + t.theme + ', ' + (d === 'approve' ? 'approved' : d === 'reject' ? 'rejected' : 'pending'));
-  const head = el('div', 'head'); head.append(el('span', null, t.viewport + 'px · ' + t.theme), el('span', null, d === 'approve' ? 'Approved' : d === 'reject' ? 'Rejected' : 'Pending'));
-  const thumb = el('div', 'thumb'); thumb.tabIndex = 0; thumb.setAttribute('role', 'region'); thumb.setAttribute('aria-label', 'Screenshot preview for ' + t.id);
-  const inspect = el('button', 'button inspect', 'Inspect'); inspect.setAttribute('aria-label', 'Inspect screenshot'); inspect.disabled = !!t.error;
-  inspect.addEventListener('click', () => openBox(t, inspect));
-  if (!t.error) {
-    const img = el('img'); img.loading = 'lazy'; img.src = apiPath('/img/' + encodeURIComponent(t.file));
-    img.alt = t.route + ' · ' + t.state + ' · ' + t.viewport + 'px · ' + t.theme;
-    img.addEventListener('click', () => openBox(t, inspect));
-    img.addEventListener('error', () => { thumb.replaceChildren(el('p', 'capture-missing', 'Screenshot unavailable. Check this run’s capture files.')); inspect.disabled = true; });
-    thumb.append(img);
-  } else thumb.append(el('p', 'capture-missing', 'No screenshot was captured. See the capture error below.'));
-  const badges = el('div', 'badges'); const errors = flags(t);
-  if (!errors.length && !t.textClipped.length && !t.warnings?.length) badges.append(el('span', 'badge ok', 'Checks clear'));
-  for (const text of errors) badges.append(el('span', 'badge', text));
-  if (t.textClipped.length) badges.append(el('span', 'badge warn', t.textClipped.length + ' clipped text warning' + (t.textClipped.length > 1 ? 's' : '')));
-  if (t.warnings?.length) badges.append(el('span', 'badge warn', t.warnings.length + ' capture warning' + (t.warnings.length > 1 ? 's' : '')));
-  card.append(head, thumb, badges);
-  const diagnostics = [...t.consoleErrors, ...t.pageErrors, ...t.brokenImages, ...(t.warnings || []), ...t.textClipped.map(x => x.selector + ': ' + x.text)];
-  if (diagnostics.length) {
-    const details = el('details', 'diagnostics'); details.append(el('summary', null, 'Diagnostic details (' + diagnostics.length + ')'));
-    const list = el('ul'); for (const item of diagnostics) list.append(el('li', null, item)); details.append(list); more.append(details); moreParts.push(diagnostics.length + ' diagnostic' + (diagnostics.length > 1 ? 's' : ''));
-  }
-  const c = state.critique[t.id];
-  if (c) {
-    const box = el('div', 'crit'); box.append(el('b', null, c.verdict === 'pass' ? 'Critique: pass' : c.verdict === 'fix' ? 'Critique: needs work' : 'Critique unavailable'));
-    if (c.error) box.append(el('p', null, c.error));
-    if (c.issues?.length) { const list = el('ul'); for (const issue of c.issues) { const item = el('li'); item.append(el('span', 'sev', issue.severity + ' '), document.createTextNode(issue.what + (issue.where ? ' (' + issue.where + ')' : ''))); list.append(item); } box.append(list); }
-    more.append(box); badges.append(el('span', 'badge' + (c.verdict === 'pass' ? ' ok' : c.verdict === 'fix' ? '' : ' warn'), c.verdict === 'pass' ? 'Critique: pass' : c.verdict === 'fix' ? 'Critique: needs work' : 'Critique unavailable')); moreParts.push('critique');
-  }
-  const comparison = state.comparison[t.id];
-  card.append(el('p', 'comparison-status', comparisonLabels[comparison?.status] || (state.comparisonLoading ? 'Comparing…' : 'Not compared')));
-  const actions = el('div', 'actions'); actions.append(inspect);
-  for (const [value, label] of [['approve', 'Approve'], ['reject', 'Reject']]) {
-    const button = el('button', value, label); button.setAttribute('aria-pressed', String(d === value)); button.disabled = state.pending.has(t.id);
-    button.setAttribute('aria-label', label + ' ' + t.id); button.addEventListener('click', () => setDecision(t, value)); actions.append(button);
-  }
-  const noteLabel = el('label', 'note-label', 'Review note');
-  const note = el('textarea'); note.placeholder = 'What should change?'; note.maxLength = 2000;
-  note.value = state.drafts.get(t.id) ?? state.review[t.id]?.note ?? '';
-  note.setAttribute('aria-label', 'Review note for ' + t.id);
-  const noteHelp = el('small', null, 'Up to 2,000 characters. Saves when you leave this field.');
-  noteHelp.id = 'note-help-' + state.run.tiles.indexOf(t); note.setAttribute('aria-describedby', noteHelp.id);
-  note.addEventListener('input', () => { if (note.value === (state.review[t.id]?.note ?? '') && !state.pending.has(t.id)) state.drafts.delete(t.id); else state.drafts.set(t.id, note.value); if (state.failures.has(t.id) && 'note' in state.failures.get(t.id)) state.failures.get(t.id).note = note.value; updateControls(); });
-  note.addEventListener('change', () => { if (state.drafts.has(t.id)) save(t, { note: note.value }); });
-  noteLabel.append(note, noteHelp); more.prepend(noteLabel);
-  const hasNote = !!(state.drafts.get(t.id) ?? state.review[t.id]?.note); if (hasNote) moreParts.unshift('note');
-  more.prepend(el('summary', null, 'Note & details' + (moreParts.length ? ' · ' + moreParts.join(' · ') : '')));
-  more.open = hasNote || state.failures.has(t.id);
-  card.append(actions, more);
-  card.addEventListener('focusin', () => { state.focus = t.id; document.querySelectorAll('.tile.focus').forEach(x => x.classList.remove('focus')); card.classList.add('focus'); });
-  return card;
-}
-function render() {
-  if (!state.run) return;
-  renderStats(); const main = $('#cards'); main.replaceChildren(); const visible = visibleTiles();
-  state.page = Math.min(state.page, Math.max(0, Math.ceil(visible.length / state.pageSize) - 1));
-  for (const pager of document.querySelectorAll('.pagination')) pager.hidden = visible.length <= state.pageSize;
-  $('#page-label').textContent = 'Page ' + (state.page + 1) + ' of ' + Math.max(1, Math.ceil(visible.length / state.pageSize)) + ' · ' + Math.min(state.pageSize, visible.length - state.page * state.pageSize) + ' captures on this page';
-  $('#pagination-bottom .page-label').textContent = $('#page-label').textContent;
-  for (const button of document.querySelectorAll('[data-page-step]')) button.disabled = Number(button.dataset.pageStep) < 0 ? state.page === 0 : (state.page + 1) * state.pageSize >= visible.length;
-  if (!state.run.tiles.length) { showEmpty('No captures in this run.', 'Capture your site with the Design Spine CLI, then open the new run for review.'); return; }
-  if (!visible.length) { showEmpty('No captures match.', 'Try another route, status, width, or theme. Your review decisions are still saved.', 'Clear filters', clearFilters); return; }
-  const groups = new Map();
-  for (const t of visible.slice(state.page * state.pageSize, (state.page + 1) * state.pageSize)) { if (!groups.has(t.route)) groups.set(t.route, new Map()); const states = groups.get(t.route); if (!states.has(t.state)) states.set(t.state, []); states.get(t.state).push(t); }
-  for (const [route, states] of groups) {
-    const section = el('section', 'route'); section.id = 'route-' + [...new Set(state.run.tiles.map(t => t.route))].indexOf(route);
-    const heading = el('h2'); heading.tabIndex = -1; heading.append(el('code', null, route)); section.append(heading);
-    for (const [name, tiles] of states) { const group = el('div', 'state'); group.append(el('h3', null, name)); const row = el('div', 'row'); for (const t of tiles) row.append(renderTile(t)); group.append(row); section.append(group); }
-    main.append(section);
-  }
-}
-let saveStatusTimer = 0;
-function setSaveStatus(message, error = false) {
-  const box = $('#save-status'); box.classList.toggle('error', error); box.replaceChildren(el('span', null, message));
-  clearTimeout(saveStatusTimer); if (!error && !state.failures.size && !state.pending.size) saveStatusTimer = setTimeout(() => { if (!state.failures.size && !state.pending.size) box.replaceChildren(); }, 3000);
-  updateViewerControls();
-  if (state.failures.size) { const retry = el('button', 'button', 'Retry unsaved changes'); retry.addEventListener('click', retryFailures); box.append(retry); }
-}
-async function save(t, patch) {
-  const previous = state.pending.get(t.id) || Promise.resolve();
-  const task = previous.catch(() => {}).then(async () => {
-    setSaveStatus('Saving changes…');
-    try {
-      const response = await fetch(apiPath('/api/review'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ tileId: t.id, imageHash: t.imageHash, ...patch }) });
-      if (!response.ok) throw new Error('HTTP ' + response.status);
-      const entry = await response.json();
-      if (!entry || !['approve', 'reject', null].includes(entry.decision) || typeof entry.note !== 'string') throw new Error('Invalid save response');
-      state.review[t.id] = entry;
-      if (state.drafts.get(t.id) === entry.note) state.drafts.delete(t.id);
-      const failed = state.failures.get(t.id);
-      if (failed) { for (const key of Object.keys(patch)) delete failed[key]; if (!Object.keys(failed).length) state.failures.delete(t.id); }
-      return true;
-    } catch (error) {
-      state.failures.set(t.id, { ...state.failures.get(t.id), ...patch });
-      return false;
-    }
-  });
-  state.pending.set(t.id, task); updateControls();
-  document.querySelectorAll('.tile').forEach(card => { if (card.dataset.id === t.id) card.querySelectorAll('.actions button').forEach(button => button.disabled = true); });
-  const saved = await task;
-  if (state.pending.get(t.id) === task) state.pending.delete(t.id);
-  updateControls();
-  document.querySelectorAll('.tile').forEach(card => { if (card.dataset.id === t.id) card.querySelectorAll('.actions button').forEach(button => button.disabled = state.pending.has(t.id) || (button.classList.contains('inspect') && !!t.error)); });
-  if (state.failures.size) setSaveStatus('Changes could not be saved. Your drafts remain here; retry before leaving.', true);
-  else if (state.pending.size) setSaveStatus('Saving changes…');
-  else setSaveStatus(state.drafts.size ? 'Saved. Other note drafts still need saving.' : 'All changes saved locally.');
-  return saved;
-}
-async function setDecision(t, value) {
-  if (state.pending.has(t.id)) return;
-  const before = visibleTiles(); const index = before.findIndex(x => x.id === t.id);
-  const viewerBefore = viewerTiles();
-  const patch = { decision: decision(t) === value ? null : value };
-  if (state.drafts.has(t.id)) patch.note = state.drafts.get(t.id);
-  await save(t, patch); const keep = state.focus; render();
-  const remaining = visibleTiles();
-  if ($('#lightbox').open) reconcileViewer(viewerBefore); else focusTile(remaining.some(x => x.id === keep) ? keep : remaining[Math.min(Math.max(0, index), remaining.length - 1)]?.id, false);
-}
-async function retryFailures() {
-  const viewerBefore = viewerTiles();
-  for (const [id, failed] of [...state.failures]) {
-    const tile = state.run.tiles.find(t => t.id === id); if (!tile || state.pending.has(id)) continue;
-    const patch = { ...failed }; if (state.drafts.has(id)) patch.note = state.drafts.get(id);
-    await save(tile, patch);
-  }
-  const keep = state.focus; render(); if ($('#lightbox').open) reconcileViewer(viewerBefore); else focusTile(keep, false);
-}
-function focusTile(id, scroll = true) {
-  state.focus = id || null;
-  const index = visibleTiles().findIndex(t => t.id === id);
-  if (index >= 0 && Math.floor(index / state.pageSize) !== state.page) { state.page = Math.floor(index / state.pageSize); render(); }
-  const node = id && document.querySelector('.tile[data-id="' + CSS.escape(id) + '"]');
-  if (node) { node.focus({ preventScroll: true }); if (scroll) node.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' }); }
-}
-function move(direction) {
-  const visible = visibleTiles(); if (!visible.length) return;
-  const index = visible.findIndex(t => t.id === state.focus);
-  const next = index < 0 ? (direction > 0 ? 0 : visible.length - 1) : Math.min(visible.length - 1, Math.max(0, index + direction));
-  focusTile(visible[next].id);
-}
-function updateRegions() {
-  const tile = state.run?.tiles.find(t => t.id === state.viewer);
-  const img = $('#viewer-image');
-  const note = state.review[tile?.id]?.anchor; const pin = $('#note-overlay'); pin.replaceChildren(); pin.setAttribute('viewBox', '0 0 ' + img.naturalWidth + ' ' + img.naturalHeight);
-  pin.toggleAttribute('hidden', !note || note.imageHash !== tile?.imageHash || !['current', 'split', 'overlay'].includes($('#viewer-mode').value) || !img.naturalWidth);
-  if (!pin.hasAttribute('hidden')) { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', note.x); circle.setAttribute('cy', note.y); circle.setAttribute('r', '10'); pin.append(circle); }
-  const supported = ['current', 'split'].includes($('#viewer-mode').value);
-  const boxes = supported ? (tile?.blankRegions?.boxes || []).filter(b => [b.x, b.y, b.w, b.h].every(Number.isFinite) && b.w > 0 && b.h > 0) : [];
-  $('.diagnostic-controls').hidden = !boxes.length;
-  const toggle = $('#viewer-regions'); toggle.disabled = !boxes.length;
-  const select = $('#viewer-region'); const selected = select.value; select.replaceChildren(new Option('Choose a region', ''));
-  boxes.forEach((box, index) => select.add(new Option('Possible blank region ' + (index + 1), String(index))));
-  select.disabled = !boxes.length; select.value = selected;
-  const overlay = $('#diagnostic-overlay'); overlay.replaceChildren();
-  overlay.toggleAttribute('hidden', !boxes.length || toggle.getAttribute('aria-pressed') !== 'true' || img.hidden || !img.complete || !img.naturalWidth);
-  overlay.setAttribute('viewBox', '0 0 ' + img.naturalWidth + ' ' + img.naturalHeight);
-  boxes.forEach((box, index) => {
-    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    for (const [name, value] of Object.entries({ x: box.x, y: box.y, width: box.w, height: box.h })) rect.setAttribute(name, value);
-    rect.dataset.region = index; overlay.append(rect);
-  });
-}
-function viewerTiles() { return visibleTiles().filter(t => !t.error); }
-function reconcileViewer(before) {
-  const tiles = viewerTiles(); const remaining = new Set(tiles.map(t => t.id));
-  if (!remaining.has(state.viewer)) {
-    const index = before.findIndex(t => t.id === state.viewer);
-    const neighbors = [...before.slice(index + 1), ...before.slice(0, Math.max(0, index)).reverse()];
-    state.viewer = neighbors.find(t => remaining.has(t.id))?.id || tiles[0]?.id || null;
-    if (state.viewer) { updateViewer(); $('#viewer-close').focus(); }
-    else $('#lightbox').close();
-  } else updateViewerControls();
-}
-function updateViewerControls() {
-  const tile = state.run?.tiles.find(t => t.id === state.viewer);
-  const pending = !!tile && state.pending.has(tile.id);
-  for (const [id, value] of [['#viewer-approve', 'approve'], ['#viewer-reject', 'reject']]) {
-    $(id).disabled = !tile || pending; $(id).setAttribute('aria-pressed', String(!!tile && decision(tile) === value));
-  }
-  $('#viewer-decision').textContent = tile ? (decision(tile) === 'approve' ? 'Approved' : decision(tile) === 'reject' ? 'Rejected' : 'Pending') : 'Pending';
-  $('#viewer-save-note').disabled = !tile || pending || !state.drafts.has(tile.id);
-  $('#viewer-pending').disabled = !viewerTiles().some(t => t.id !== state.viewer && !decision(t));
-  $('#viewer-retry').hidden = !state.failures.size; $('#viewer-retry').disabled = !!state.pending.size;
-  $('#viewer-note-summary').textContent = 'Review note' + (tile && state.drafts.has(tile.id) ? ' · unsaved' : tile && state.review[tile.id]?.note ? ' · saved' : '');
-  const status = $('#viewer-save-status'); status.classList.toggle('error', !!state.failures.size);
-  status.textContent = state.failures.size ? 'Changes could not be saved. Your drafts remain here; retry before leaving.' : state.pending.size ? 'Saving changes…' : state.drafts.size ? 'Unsaved note drafts remain. Save each note or include it with a decision.' : 'All changes saved locally. Baselines have not changed.';
-}
-function updateViewer() {
-  const tiles = viewerTiles(); const index = tiles.findIndex(t => t.id === state.viewer); const tile = tiles[index]; if (!tile) return;
-  state.focus = tile.id;
-  const url = new URL(location.href); url.searchParams.set('tile', tile.id); history.replaceState(null, '', url);
-  $('#viewer-note').value = state.drafts.get(tile.id) ?? state.review[tile.id]?.note ?? '';
-  updateViewerControls();
-  $('#viewer-title').textContent = tile.route + ' · ' + tile.state;
-  $('#viewer-position').textContent = tile.viewport + 'px · ' + tile.theme + ' · ' + (index + 1) + ' of ' + tiles.length;
-  const comparison = state.comparison[tile.id] || {};
-  const mode = $('#viewer-mode');
-  for (const option of mode.options) option.disabled = option.value === 'diff' ? !comparison.diffUrl : ['baseline', 'split', 'overlay'].includes(option.value) && !comparison.baselineUrl;
-  if (mode.selectedOptions[0].disabled) mode.value = 'current';
-  if (comparison.status === 'size-changed') { mode.querySelector('[value=overlay]').disabled = true; if (mode.value === 'overlay') mode.value = 'current'; }
-  const view = mode.value;
-  $('#overlay-image').hidden = view !== 'overlay'; $('#overlay-image').src = view === 'overlay' ? comparison.baselineUrl : ''; $('#blend-control').hidden = view !== 'overlay';
-  const changes = $('#change-region'); changes.replaceChildren(new Option('Choose a change', ''));
-  (comparison.regions || []).forEach((box, index) => changes.add(new Option('Change ' + (index + 1) + ' · y ' + box.y + 'px', String(index))));
-  changes.disabled = !(comparison.regions?.length) || view === 'baseline';
-  $('#anchor-note').disabled = !tile.imageHash || view !== 'current' || state.pending.has(tile.id);
-  $('#anchor-note').setAttribute('aria-pressed', 'false');
-  const anchor = state.review[tile.id]?.anchor; $('#clear-anchor').hidden = !anchor; $('#jump-anchor').hidden = !anchor || anchor.imageHash !== tile.imageHash || !['current', 'split', 'overlay'].includes(view);
-  $('#anchor-x').value = anchor?.x ?? 0; $('#anchor-y').value = anchor?.y ?? 0; $('#save-anchor').disabled = !tile.imageHash || view !== 'current' || state.pending.has(tile.id);
-  $('#anchor-status').textContent = anchor ? (anchor.imageHash === tile.imageHash ? 'Note location: ' + anchor.x + ', ' + anchor.y + 'px.' : 'Note location belongs to different evidence.') : '';
-  $('#viewer-size').disabled = view === 'split';
-  if (view === 'split') { $('#viewer-image').classList.remove('actual'); $('#baseline-image').classList.remove('actual'); $('#viewer-size').setAttribute('aria-pressed', 'false'); $('#viewer-size').textContent = 'Actual size'; }
-  $('#baseline-pane').hidden = view !== 'split'; $('.viewer-pair').classList.toggle('split', view === 'split');
-  $('#baseline-image').src = view === 'split' ? comparison.baselineUrl : ''; $('#baseline-image').alt = 'Baseline for ' + tile.route + ', ' + tile.state;
-  $('#current-caption').textContent = view === 'baseline' ? 'Baseline' : view === 'diff' ? 'Difference · highlighted pixels' : 'Current';
-  $('#comparison-context').textContent = (comparisonLabels[comparison.status] || 'Not compared') + ' · threshold ' + (state.threshold * 100).toFixed(2) + '%' + (comparison.ratio !== undefined ? ' · ' + (comparison.ratio * 100).toFixed(3) + '% pixels differ' : '') + (comparison.baselineRun ? ' · baseline ' + comparison.baselineRun : '') + (comparison.approvedAt ? ' · approved ' + comparison.approvedAt : '') + (comparison.ignored?.length ? ' · ' + comparison.ignored.length + ' comparison masks; original evidence retained' : '') + (comparison.recipeCompatible === false ? ' · capture recipe differs or unknown' : '') + (comparison.provenance ? ' · environment ' + comparison.provenance : '') + (comparison.status === 'size-changed' ? ' · Native dimensions differ; pixel overlay unavailable.' : '');
-  const img = $('#viewer-image'); img.hidden = false; $('#viewer-error').hidden = true;
-  img.alt = $('#current-caption').textContent + ' for ' + tile.route + ', ' + tile.state + ', ' + tile.viewport + 'px, ' + tile.theme;
-  img.src = view === 'baseline' ? comparison.baselineUrl : view === 'diff' ? comparison.diffUrl : apiPath('/img/' + encodeURIComponent(tile.file));
-  $('#viewer-download').href = img.src; $('#viewer-download').download = tile.file; $('#viewer-download').setAttribute('aria-disabled', 'false'); $('#viewer-download').removeAttribute('tabindex');
-  $('#viewer-prev').disabled = index <= 0; $('#viewer-next').disabled = index >= tiles.length - 1;
-  $('.evidence-frame').classList.toggle('actual', img.classList.contains('actual')); updateRegions();
-  $('.viewer-canvas').scrollTop = 0; $('.viewer-canvas').scrollLeft = 0;
-}
-function openBox(tile, source = document.activeElement) {
-  if (tile.error) return;
-  $('#viewer-mode').value = 'current'; state.viewer = tile.id; state.returnFocus = source; $('#viewer-image').classList.remove('actual'); $('#baseline-image').classList.remove('actual'); $('#viewer-size').setAttribute('aria-pressed', 'false'); $('#viewer-size').textContent = 'Actual size';
-  const url = new URL(location.href); url.searchParams.set('tile', tile.id); history.replaceState(null, '', url);
-  updateViewer(); $('#lightbox').showModal(); $('#viewer-close').focus();
-}
-function changeViewer(direction) { const tiles = viewerTiles(); const index = tiles.findIndex(t => t.id === state.viewer); const tile = tiles[index + direction]; if (tile) { state.viewer = tile.id; updateViewer(); } }
-$('#save-anchor').addEventListener('click', async () => {
-  const tile = state.run.tiles.find(t => t.id === state.viewer);
-  const x = Number($('#anchor-x').value), y = Number($('#anchor-y').value);
-  if (!Number.isInteger(x) || !Number.isInteger(y) || x < 0 || y < 0 || x >= $('#viewer-image').naturalWidth || y >= $('#viewer-image').naturalHeight) { $('#anchor-status').textContent = 'Enter coordinates within the original screenshot dimensions.'; return; }
-  await save(tile, { anchor: { x, y, imageHash: tile.imageHash } }); updateViewer();
-});
-$('#jump-anchor').addEventListener('click', () => {
-  const anchor = state.review[state.viewer]?.anchor; if (!anchor) return;
-  const image = $('#viewer-image'); const canvas = $('.viewer-canvas'); const bounds = image.getBoundingClientRect(); const container = canvas.getBoundingClientRect();
-  canvas.scrollTop += bounds.top - container.top + anchor.y * bounds.height / image.naturalHeight - 24;
-});
-$('#blend').addEventListener('input', event => { $('#overlay-image').style.opacity = event.target.value / 100; });
-$('#change-region').addEventListener('change', event => {
-  const box = state.comparison[state.viewer]?.regions?.[Number(event.target.value)]; const img = $('#viewer-image');
-  if (event.target.value === '' || !box || !img.naturalHeight) return;
-  const canvas = $('.viewer-canvas'); const bounds = img.getBoundingClientRect(); const container = canvas.getBoundingClientRect();
-  canvas.scrollTop += bounds.top - container.top + box.y * bounds.height / img.naturalHeight - 24;
-});
-$('#anchor-note').addEventListener('click', () => {
-  const button = $('#anchor-note'); const active = button.getAttribute('aria-pressed') !== 'true'; button.setAttribute('aria-pressed', String(active));
-  $('#anchor-status').textContent = active ? 'Click the screenshot to save the location for this note.' : '';
-});
-$('#viewer-image').addEventListener('click', async event => {
-  if ($('#anchor-note').getAttribute('aria-pressed') !== 'true') return;
-  const tile = state.run.tiles.find(t => t.id === state.viewer); const image = event.currentTarget; const bounds = image.getBoundingClientRect();
-  const anchor = { x: Math.min(image.naturalWidth - 1, Math.max(0, Math.floor((event.clientX - bounds.left) * image.naturalWidth / bounds.width))), y: Math.min(image.naturalHeight - 1, Math.max(0, Math.floor((event.clientY - bounds.top) * image.naturalHeight / bounds.height))), imageHash: tile.imageHash };
-  await save(tile, { anchor }); updateViewer();
-});
-$('#clear-anchor').addEventListener('click', async () => { const tile = state.run.tiles.find(t => t.id === state.viewer); await save(tile, { anchor: null }); updateViewer(); });
-$('#viewer-note').addEventListener('input', event => {
-  const tile = state.run?.tiles.find(t => t.id === state.viewer); if (!tile) return;
-  const value = event.target.value;
-  if (value === (state.review[tile.id]?.note ?? '') && !state.pending.has(tile.id)) state.drafts.delete(tile.id); else state.drafts.set(tile.id, value);
-  if (state.failures.has(tile.id) && 'note' in state.failures.get(tile.id)) state.failures.get(tile.id).note = value;
-  updateControls();
-});
-$('#viewer-save-note').addEventListener('click', async () => {
-  const tile = state.run?.tiles.find(t => t.id === state.viewer);
-  if (tile && state.drafts.has(tile.id) && !state.pending.has(tile.id)) { await save(tile, { note: state.drafts.get(tile.id) }); render(); }
-});
-for (const [id, value] of [['#viewer-approve', 'approve'], ['#viewer-reject', 'reject']]) $(id).addEventListener('click', () => { const tile = state.run?.tiles.find(t => t.id === state.viewer); if (tile) setDecision(tile, value); });
-$('#viewer-pending').addEventListener('click', () => {
-  const tiles = viewerTiles(); const index = tiles.findIndex(t => t.id === state.viewer);
-  const next = [...tiles.slice(index + 1), ...tiles.slice(0, index)].find(t => !decision(t));
-  if (next) { state.viewer = next.id; updateViewer(); }
-});
-$('#viewer-retry').addEventListener('click', retryFailures);
-$('#viewer-close').addEventListener('click', () => $('#lightbox').close());
-$('#lightbox').addEventListener('close', () => { const url = new URL(location.href); url.searchParams.delete('tile'); history.replaceState(null, '', url); const viewed = state.viewer; const inspect = state.returnFocus?.classList.contains('inspect') && state.returnFocus.closest('.tile')?.dataset.id === viewed; state.viewer = null; render(); if (visibleTiles().some(t => t.id === viewed)) { focusTile(viewed, false); if (inspect) document.querySelector('.tile[data-id="' + CSS.escape(viewed) + '"] .inspect')?.focus({ preventScroll: true }); } else $('#clear-filters').focus(); });
-$('#lightbox').addEventListener('click', event => { if (event.target === $('#lightbox')) { const rect = event.target.getBoundingClientRect(); if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) event.target.close(); } });
-$('#viewer-mode').addEventListener('change', () => { $('#viewer-region').value = ''; updateViewer(); });
-$('#viewer-image').addEventListener('load', updateRegions);
-$('#viewer-regions').addEventListener('click', () => { const button = $('#viewer-regions'); const enabled = button.getAttribute('aria-pressed') !== 'true'; button.setAttribute('aria-pressed', String(enabled)); button.textContent = enabled ? 'Hide blank regions' : 'Show blank regions'; updateRegions(); });
-$('#viewer-region').addEventListener('change', () => { const value = $('#viewer-region').value; if (value === '') return; $('#viewer-regions').setAttribute('aria-pressed', 'true'); $('#viewer-regions').textContent = 'Hide blank regions'; updateRegions(); $('#diagnostic-overlay').querySelector('[data-region="' + value + '"]')?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' }); });
-$('#viewer-refresh').addEventListener('click', async () => { const button = $('#viewer-refresh'); button.disabled = true; try { await loadComparison(); if (state.viewer) updateViewer(); } finally { button.disabled = false; } });
-$('#baseline-image').addEventListener('error', () => { if (!$('#baseline-pane').hidden) $('#viewer-error').hidden = false; });
-$('#viewer-prev').addEventListener('click', () => changeViewer(-1)); $('#viewer-next').addEventListener('click', () => changeViewer(1));
-$('#viewer-size').addEventListener('click', () => { const actual = $('#viewer-image').classList.toggle('actual'); $('#baseline-image').classList.toggle('actual', actual); $('.evidence-frame').classList.toggle('actual', actual); $('#viewer-size').setAttribute('aria-pressed', String(actual)); $('#viewer-size').textContent = actual ? 'Fit to width' : 'Actual size'; });
-$('#viewer-image').addEventListener('error', () => { $('#viewer-image').hidden = true; $('#diagnostic-overlay').setAttribute('hidden', ''); $('#viewer-download').removeAttribute('href'); $('#viewer-download').setAttribute('aria-disabled', 'true'); $('#viewer-download').tabIndex = -1; $('#viewer-error').hidden = false; });
-document.addEventListener('keydown', event => {
-  if (event.metaKey || event.ctrlKey || event.altKey) return;
-  if ($('#lightbox').open) { if (['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName) || event.target.isContentEditable) return; if (event.key === 'ArrowRight') { event.preventDefault(); changeViewer(1); } if (event.key === 'ArrowLeft') { event.preventDefault(); changeViewer(-1); } return; }
-  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName) || event.target.isContentEditable) return;
-  const tile = state.run?.tiles.find(t => t.id === state.focus);
-  if (event.key === 'j') { event.preventDefault(); move(1); }
-  else if (event.key === 'k') { event.preventDefault(); move(-1); }
-  else if (event.key === 'a' && tile) setDecision(tile, 'approve');
-  else if (event.key === 'r' && tile) setDecision(tile, 'reject');
-  else if (event.key === 'Enter' && tile && event.target.classList.contains('tile')) { event.preventDefault(); openBox(tile); }
-});
-function clearFilters() {
-  state.page = 0; state.search = ''; state.status = ''; state.evidence = ''; state.viewport = ''; state.theme = ''; state.onlyFlagged = false; state.onlyUnreviewed = false; state.onlyChanged = false;
-  $('#search').value = ''; for (const id of ['#status-filter', '#comparison-filter', '#viewport-filter', '#theme-filter']) $(id).value = '';
-  $('#f-changed').setAttribute('aria-pressed', 'false'); $('#f-flagged').setAttribute('aria-pressed', 'false'); $('#f-unrev').setAttribute('aria-pressed', 'false'); render();
-}
-for (const [id, key] of [['#f-changed', 'onlyChanged'], ['#f-flagged', 'onlyFlagged'], ['#f-unrev', 'onlyUnreviewed']]) $(id).addEventListener('click', event => { state.page = 0; state[key] = !state[key]; if (key === 'onlyChanged') { state.evidence = ''; $('#comparison-filter').value = ''; } event.currentTarget.setAttribute('aria-pressed', String(state[key])); render(); });
-for (const [id, key] of [['#status-filter', 'status'], ['#comparison-filter', 'evidence'], ['#viewport-filter', 'viewport'], ['#theme-filter', 'theme']]) $(id).addEventListener('change', event => { state.page = 0; state[key] = event.target.value; if (key === 'evidence') { state.onlyChanged = false; $('#f-changed').setAttribute('aria-pressed', 'false'); } render(); });
-$('#search').addEventListener('input', event => { state.page = 0; state.search = event.target.value.trim().toLowerCase(); render(); });
-function changePage(direction) { state.page += direction; render(); focusTile(visibleTiles()[state.page * state.pageSize]?.id); }
-for (const button of document.querySelectorAll('[data-page-step]')) button.addEventListener('click', () => changePage(Number(button.dataset.pageStep)));
-$('#clear-filters').addEventListener('click', clearFilters);
-$('#next-pending').addEventListener('click', () => {
-  const pending = visibleTiles().filter(t => !decision(t));
-  const index = pending.findIndex(t => t.id === state.focus); focusTile(pending[(index + 1) % pending.length]?.id);
-});
-$('#export').addEventListener('click', () => {
-  if (!state.run || state.drafts.size || state.pending.size || state.failures.size || state.comparisonLoading) return;
-  const report = { exportedAt: new Date().toISOString(), run: state.run, review: { tiles: state.review }, critique: { tiles: state.critique }, comparison: { status: state.comparisonFailed ? 'unavailable' : 'complete', comparedAt: state.comparedAt, threshold: state.threshold, tiles: state.comparison } };
-  const url = URL.createObjectURL(new Blob([JSON.stringify(report, null, 2) + '\n'], { type: 'application/json' }));
-  const link = el('a'); link.href = url; link.download = 'design-spine-' + state.run.id.replace(/[^a-zA-Z0-9_-]/g, '-') + '.json'; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
-  setSaveStatus('Review report downloaded. Baselines have not changed.');
-});
-window.addEventListener('beforeunload', event => { if (state.drafts.size || state.pending.size || state.failures.size) { event.preventDefault(); event.returnValue = ''; } });
-load();
-</script>
+<script type="module" src="/assets/review.js"></script>
 </body>
 </html>