kaloko 0.4.8 → 0.4.9

package/viewer/index.html

@@ -249,6 +249,8 @@ body.embed .helpwrap{display:none}
 .bar-break{display:none}
 @media (max-width:820px){.bar{flex-wrap:wrap;gap:6px 8px;padding:8px 10px}.bar > *{order:1}.bar-break{display:block;order:2;flex-basis:100%;height:0}.bar > .picker,#rpBtn,#ptBtn,#modeSeg,#locSeg,#dbar{order:3}.bar > .picker{flex:1 1 0;min-width:0;max-width:none}.task b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task span{display:none!important}.bar .spacer{flex:1 1 auto;order:1}.picker .kchip{display:none}}
 .legend-in{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}.legend-in span{display:inline-flex;gap:5px;align-items:center}
+/* phones: a run with many locales scrolls its locale switch sideways instead of widening the page */
+@media (max-width:820px){.bar .seg{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}.bar .seg::-webkit-scrollbar{display:none}.bar .seg button{flex:none}}
 @media (max-width:1100px){.bar .ctl .seg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}#viewBtn span[data-t],#rpBtn span,#ptBtn span{display:none}.picker kbd{display:none}.bar > .picker{max-width:clamp(140px,40vw,420px)}}
 /* canvas */
 .viewport{position:relative;overflow:hidden;cursor:grab;touch-action:none;
@@ -293,10 +295,12 @@ body.embed .helpwrap{display:none}
 .node--stack .kind{background:var(--ink);color:var(--panel)}
 .stack-fan{position:relative;display:block;width:100%;height:162px;padding:0;border:0;background:none;cursor:pointer}
 .stack-fan img,.stack-fan .ph{position:absolute;width:58%;height:128px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);box-shadow:0 2px 6px rgba(0,0,0,.12)}
-.stack-fan :nth-child(1){left:5%;top:22px;transform:rotate(-5deg)}.stack-fan :nth-child(2){left:21%;top:12px;transform:rotate(-1deg)}.stack-fan :nth-child(3){left:37%;top:20px;transform:rotate(4deg)}
-.stack-fan .count{position:absolute;right:10px;bottom:6px;background:var(--ink);color:var(--panel);font-weight:700;font-size:12px;border-radius:999px;padding:2px 9px}
+/* fan positions apply to thumbnails only: with one or two samples the count badge used to be the 2nd or 3rd child and
+   got left/top on top of its right/bottom, stretching it over the whole card */
+.stack-fan>:is(img,.ph):nth-child(1){left:5%;top:22px;transform:rotate(-5deg)}.stack-fan>:is(img,.ph):nth-child(2){left:21%;top:12px;transform:rotate(-1deg)}.stack-fan>:is(img,.ph):nth-child(3){left:37%;top:20px;transform:rotate(4deg)}
+.stack-fan .count{position:absolute;right:10px;bottom:6px;left:auto;top:auto;transform:none;z-index:1;line-height:1.4;background:var(--ink);color:var(--panel);font-weight:700;font-size:12px;border-radius:999px;padding:2px 9px}
 .stack-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:6px 10px 2px;background:var(--panel-2)}.stack-bar i{display:block}
-.ri{grid-column:2;min-width:0;min-height:0;display:grid;background:var(--panel)}.ri[hidden]{display:none}
+.ri{grid-column:2;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--panel)}.ri[hidden]{display:none}
 .ri .si__box{border-radius:0;box-shadow:none}
 .ri-crumbs{display:flex;gap:6px;align-items:center;min-width:0;font-size:13px;color:var(--muted)}.ri-crumbs button{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px}.ri-crumbs b{color:var(--ink);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ri-group{position:absolute;left:0;right:0;height:36px;display:flex;align-items:center;gap:10px;padding:0 18px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line)}.ri-group small{text-transform:none;letter-spacing:0}
@@ -304,12 +308,11 @@ body.embed .helpwrap{display:none}
 .ri-row.is-page{padding-left:42px}.ri-row.is-page .t b{font-weight:500}
 .ri-row .t b .kind{display:inline-grid;vertical-align:-3px;margin-right:6px}
 .ri-row .num{font-family:var(--mono,monospace);font-size:12.5px;text-align:right}
-.ri-fan{position:relative;width:96px;height:58px}.ri-fan img,.ri-fan .ph{position:absolute;width:84px!important;height:50px!important}.ri-fan>:nth-child(1){left:0;top:8px;z-index:3}.ri-fan>:nth-child(2){left:6px;top:4px;z-index:2}.ri-fan>:nth-child(3){left:12px;top:0;z-index:1}
+.ri-fan{position:relative;width:96px;height:58px}.ri-fan img,.ri-fan .ph{position:absolute;width:84px!important;height:50px!important}.ri-fan>:is(img,.ph):nth-child(1){left:0;top:8px;z-index:3}.ri-fan>:is(img,.ph):nth-child(2){left:6px;top:4px;z-index:2}.ri-fan>:is(img,.ph):nth-child(3){left:12px;top:0;z-index:1}
 .ri-fan .cnt{position:absolute;right:0;bottom:0;z-index:4;font-size:10.5px;font-weight:700;background:var(--ink);color:var(--panel);border-radius:4px;padding:0 5px}
 .ri-x{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
-@media (max-width:760px){.ri-row,.ri-head,.si-row,.si-headrow{grid-template-columns:72px minmax(0,1fr) 92px!important}.ri-row>:nth-child(n+4),.ri-head>:nth-child(n+4),.si-row>:nth-child(n+4),.si-headrow>:nth-child(n+4){display:none}.ri-row,.si-row{grid-template-rows:auto auto;row-gap:2px}.ri-row>:first-child,.si-row>:first-child{grid-row:1/3}.ri-row>.t,.si-row>.t{grid-column:2;grid-row:1}.ri-row>.badge,.si-row>.badge{grid-column:3;grid-row:1/3}.ri-row>.si-fails,.si-row>.si-fails{display:flex!important;grid-column:2;grid-row:2;overflow:hidden;flex-wrap:nowrap}.ri-row img,.ri-row .ph,.si-row img,.si-row .ph{width:64px;height:40px}.ri-fan{width:64px;height:40px}}
-.si{position:fixed;inset:0;z-index:19;background:rgba(12,12,11,.62);display:grid;padding:clamp(0px,2vw,24px)}
-.si__box{background:var(--panel);border-radius:10px;display:grid;grid-template-rows:auto auto 1fr auto;min-height:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
+.si{position:fixed;inset:0;z-index:19;background:rgba(12,12,11,.62);display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(0px,2vw,24px)}
+.si__box{background:var(--panel);border-radius:10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;min-height:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
 .si__head{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.si__head h3{margin:0;font-size:18px}
 .si__tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line)}
 .si__tools input[type=search]{flex:1 1 240px;min-width:180px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
@@ -326,6 +329,31 @@ body.embed .helpwrap{display:none}
 .si-card img,.si-card .ph{width:100%;height:120px}.si-card b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.si-card small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .si__foot{display:flex;gap:10px;align-items:center;padding:8px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
 .si__empty{padding:40px;text-align:center;color:var(--muted)}
+.si__title{flex:1;min-width:0}
+/* phones: placed after the base rules above, which used to win and keep the 96 px thumbnail over the title.
+   Row: thumbnail | title and path; under them the status and the criteria that need attention */
+@media (max-width:760px){
+  .si{padding:0;grid-template-columns:minmax(0,1fr)}.si__box{border-radius:0}
+  .si__head{flex-wrap:wrap;gap:8px 10px;padding:10px 12px 10px 14px}
+  .si__title{flex:1 1 calc(100% - 84px)}
+  .si__head h3,.ri-crumbs b{font-size:17px;line-height:1.25;overflow-wrap:anywhere}.ri-crumbs b{white-space:normal}
+  .si__head .seg,#siCsv,#riCsv{order:2}#siClose{order:1;align-self:flex-start;width:32px;height:32px}
+  .si__tools{padding:8px 14px;gap:6px 8px}
+  .si__tools input[type=search]{flex:1 1 100%;min-width:0;font-size:16px}
+  .si__tools select{flex:1 1 150px;min-width:0;max-width:100%}
+  .si__foot{padding:8px 14px}.si__foot>:last-child{display:none}
+  .ri-row,.ri-head,.si-row,.si-headrow{grid-template-columns:64px max-content minmax(0,1fr)!important;column-gap:10px;padding-left:14px;padding-right:14px}
+  .ri-row.is-page{padding-left:28px}
+  .ri-head>:nth-child(n+3),.si-headrow>:nth-child(n+3){display:none}.ri-head>:nth-child(2),.si-headrow>:nth-child(2){grid-column:2/4}
+  .ri-row>:nth-child(n+4),.si-row>:nth-child(n+4){display:none}
+  .ri-row,.si-row{grid-template-rows:auto auto;row-gap:4px;align-content:center}
+  .ri-row>:first-child,.si-row>:first-child{grid-row:1/3;grid-column:1}
+  .ri-row>.t,.si-row>.t{grid-column:2/4;grid-row:1}
+  .ri-row>.badge,.si-row>.badge{grid-column:2;grid-row:2;justify-self:start}
+  .ri-row>.si-fails,.si-row>.si-fails{display:flex!important;grid-column:3;grid-row:2;overflow:hidden;flex-wrap:nowrap;min-width:0}
+  .ri-row img,.ri-row .ph,.si-row img,.si-row .ph{width:64px;height:40px}
+  .ri-fan{width:64px;height:40px}.ri-fan img,.ri-fan .ph{width:54px!important;height:32px!important}
+}
 .node__head{display:flex;align-items:flex-start;gap:8px;padding:9px 10px 8px}
 .kind{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;background:var(--panel-2);color:var(--muted);flex:none}
 .node--email .kind{background:var(--accent);color:var(--accent-ink)}
@@ -385,7 +413,7 @@ body.embed .helpwrap{display:none}
 .lb__head{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:sticky;top:0;background:var(--panel);z-index:1}
 .lb__head h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
 .lb__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.lb__nav{display:flex;gap:6px;margin-left:auto}
+.lb__nav{display:flex;gap:6px;margin-left:auto}.lb__meta{display:contents}
 .sec{padding:14px 18px;border-bottom:1px solid var(--line)}
 .sec h4{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
 .purpose{margin:0;max-width:41.3em}
@@ -401,7 +429,7 @@ body.embed .helpwrap{display:none}
 .k-err{color:#ff7a85;font-weight:600}.k-url{color:#8ab4ff}.k-pos{color:#ffd166}.k-str{color:#9ee493}.k-at{color:#8d8d86}.k-num{color:#ffd166}
 .vhead{display:flex;align-items:center;gap:8px}.vhead .badge{text-transform:none;letter-spacing:0}.vmore{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12.5px}.vmore .linkish{color:var(--muted)}.vmore .linkish:hover{color:var(--ink)}
 /* how a criterion was checked: kind, meaning, AI score between the thresholds */
-.how{grid-column:2;display:grid;gap:4px;margin-top:4px;font-size:12.5px}.how__kind{justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}.how--ai{color:var(--ink);border-color:var(--ink)}.how__q{color:var(--ink)}.how__line{color:var(--muted)}
+.how{grid-column:2;display:grid;gap:4px;margin-top:4px;font-size:12.5px}.how__kind{justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}.how--ai{color:var(--ink);border-color:var(--ink)}.how__q{color:var(--ink)}.how__line{color:var(--muted)}.how__why{color:var(--ink)}.how__why b{font-weight:600;margin-right:4px}
 .gauge{position:relative;display:block;height:8px;border-radius:4px;background:var(--skip-bg);overflow:visible;margin:2px 0}.gauge__lo{position:absolute;left:0;top:0;bottom:0;background:var(--fail-bg);border-radius:4px 0 0 4px}.gauge__hi{position:absolute;right:0;top:0;bottom:0;background:var(--pass-bg);border-radius:0 4px 4px 0}.gauge b{position:absolute;top:-3px;width:3px;height:14px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
 .ac li .tech{grid-column:2;font-size:11.5px}.ac li .tech summary{cursor:pointer;color:var(--muted)}
 .ac{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
@@ -442,6 +470,12 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 #treeSec summary{cursor:pointer;list-style:none}#treeSec summary h4{display:inline}
 .hlbox{position:absolute;outline:3px solid #ffd200;background:rgba(255,228,82,.22);pointer-events:none;border-radius:2px}
 .hlbox[hidden]{display:none}
+/* regions left out of pixel diffs, regions that moved between shots (#20) and tab stops of the keyboard walk (#19) */
+.ignbox{position:absolute;border:1.5px dashed #6b6b66;background:repeating-linear-gradient(45deg,rgba(107,107,102,.16) 0 6px,transparent 6px 12px);pointer-events:none;z-index:4}
+.ignbox.unst{border-color:#d9822b;background:repeating-linear-gradient(45deg,rgba(217,130,43,.14) 0 6px,transparent 6px 12px)}
+.kbstop{position:absolute;outline:2px solid #2f6fde;pointer-events:none;z-index:4}.kbstop.bad{outline-color:#e4572e}
+.kbstop i{position:absolute;left:-2px;top:-18px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#2f6fde;color:#fff;font:600 10px/16px system-ui,sans-serif;font-style:normal;text-align:center}.kbstop.bad i{background:#e4572e}
+.kb-list{margin:6px 0 0;padding-left:20px;font-size:12.5px;color:var(--muted)}.kb-list .bad{color:var(--ink)}
 .hlbox.on{outline:3px solid #ffd200;background:transparent}
 .hlbox.on.first{box-shadow:0 0 0 9999px rgba(15,15,14,.42)}
 .elabel{z-index:4;white-space:normal;max-width:180px;text-align:center;line-height:1.25;box-shadow:0 1px 3px rgba(0,0,0,.08)}
@@ -570,6 +604,27 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 @media (max-width:700px){.pt__title{max-width:60vw}.pt__bar{padding:6px 10px}.pt__stage{padding:6px}}
 @media (prefers-reduced-motion:no-preference){.pt__dev{transition:transform .15s ease-out}}
 .insp{font:12px/1.4 var(--mono)}
+.dev h5{margin:14px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
+.dev table{width:100%;border-collapse:collapse;font:12px/1.45 var(--mono)}.dev td{padding:4px;border-bottom:1px solid var(--line);vertical-align:top}.dev td:first-child{color:var(--muted);white-space:nowrap;width:1%}.dev td:last-child{width:1%}
+.dev tr.devchg td{background:color-mix(in srgb,var(--accent) 30%,transparent)}
+.devtabs{margin:0 0 10px}.devhead{margin:0 0 8px}.devhead b{font-size:14px}
+.devval{display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere}
+.devsw{display:inline-block;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);flex:none;vertical-align:-2px;margin-right:4px}
+.devtokrow{margin-top:2px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
+.devtok{all:unset;cursor:pointer;color:#2e6bff;font:inherit;border-radius:3px;padding:0 2px}.devtok:hover,.devtok:focus-visible{background:color-mix(in srgb,#2e6bff 14%,transparent);outline:none}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .devtok{color:#8fb0ff}}:root[data-theme="dark"] .devtok{color:#8fb0ff}
+.devmode{font:600 10px/16px system-ui,sans-serif;padding:0 5px;border-radius:4px;background:var(--panel-2);color:var(--muted)}
+.devwarn{color:var(--fail-ink);font-weight:600}.devok{color:var(--pass-ink);font-weight:600}.devmuted{color:var(--muted)}
+.devline{width:26px;height:26px}.devline .i{width:14px;height:14px}
+.devnav{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}.devnav .btn{padding:4px 8px;font-size:12px}
+.devstates{flex-wrap:wrap}.devstates button[disabled]{opacity:.4;cursor:not-allowed}
+.devdist p{margin:4px 0;font-size:13px}.devdist code{font:12px var(--mono)}
+.devassets{list-style:none;margin:0;padding:0}.devassets li{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12.5px}.devassets img{width:28px;height:28px;object-fit:contain;background:#fff;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}.devassets__k{font:600 10px/28px system-ui,sans-serif;width:28px;text-align:center;background:var(--panel-2);border-radius:4px}.devassets__n{flex:1;min-width:0;overflow-wrap:anywhere}
+.devcopy{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
+.devtoks{list-style:none;margin:0;padding:0}.devtoks li{border-bottom:1px solid var(--line)}.devtoks button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:5px 4px;cursor:pointer;font-size:12.5px}.devtoks button:hover,.devtoks button:focus-visible{background:var(--panel-2)}.devtoks button[aria-pressed="true"]{background:color-mix(in srgb,#c026d3 14%,transparent)}
+.devtoks__n{font:12px var(--mono);overflow-wrap:anywhere}.devtoks__c{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}.devtoks--plain li{padding:5px 4px;font-size:12.5px;overflow-wrap:anywhere}.devunused{margin-top:12px}.devunused summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
+.devshot{position:absolute;z-index:4;cursor:crosshair}.devshot > div{position:absolute;pointer-events:none;box-sizing:border-box}.devshot__hov{outline:1px solid #2e6bff;background:rgba(111,168,220,.25)}.devshot__sel{outline:2px solid #2e6bff}.devshot__tgt{outline:1px dashed #e4572e}.devshot__hl{outline:2px dashed #c026d3;background:rgba(192,38,211,.08)}
+.devshot span{position:absolute;left:0;top:-19px;font:600 11px/18px system-ui,sans-serif;background:#151514;color:#fff;padding:0 6px;border-radius:4px;white-space:nowrap}.devshot__sel span{background:#2e6bff}
 .insp table{width:100%;border-collapse:collapse}.insp td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
 .insp td:first-child{color:var(--muted);white-space:nowrap}
 .insp .tok{color:#2e6bff}.insp .raw{color:#c73e1d}
@@ -615,7 +670,13 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
   .lb__head h3{font-size:16px}
   .lb[data-sheet="peek"] .lb__head h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .lb[data-sheet="peek"] .lb__side:not(.is-drag) .lbtabs,.lb[data-sheet="peek"] .lb__side:not(.is-drag) .lbtab{visibility:hidden}
-  .lbtabs{top:16px}
+  /* the header row keeps its actions at the top right; status, position and "back to index" wrap on the left.
+     The tabs stick under the header (its height is --lbhead), so the two never cover each other */
+  .lb__row{flex-wrap:nowrap;align-items:flex-start}
+  .lb__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;flex:1;min-width:0;min-height:32px}
+  .lb__meta #lbBack{padding:4px 10px}
+  .lb__nav{flex:none;gap:4px}.lb__nav .icon-btn{width:32px;height:32px}
+  .lbtabs{top:calc(16px + var(--lbhead,0px))}
 }
 @media (max-width:359px){.lb__tools #lbFocus span{display:none}}
 @media (max-width:700px) and (prefers-reduced-motion:no-preference){.lb__side{transition:height .2s ease}.lb__side.is-drag{transition:none}}
@@ -638,7 +699,10 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .lb.is-focus.is-idle .lb__fshow{display:grid}
 @media (prefers-reduced-motion:no-preference){.lb__fbar{transition:opacity .2s ease}}
 /* ---------- review mode (Kontrola): one step at a time from the queue of steps that need a person ---------- */
-.rvm{position:fixed;inset:0;z-index:23;background:var(--ground);display:grid;grid-template-rows:auto 1fr auto}
+.rvm{position:fixed;inset:0;z-index:23;background:var(--ground);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
+/* many locales: the switches scroll sideways instead of widening review mode past the screen */
+.rvm__top .seg{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}.rvm__top .seg::-webkit-scrollbar{display:none}.rvm__top .seg button{flex:none}
+.rvm__foot .note{min-width:0;overflow-wrap:anywhere}
 .rvm__top{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line-strong)}
 .rvm__top .spacer,.rvm__foot .spacer{flex:1}
 .rvm__prog{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
@@ -763,13 +827,14 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 const EMBEDDED = /*__QAWALK_RUN__*/null;
 if (!window.QAWALK_APP) { const el = document.getElementById('qawalk-app'); if (el) { try { window.QAWALK_APP = JSON.parse(el.textContent); } catch {} } }
 const I18N = {
-  cs: { makePublicVersion:'Zveřejnit verzi', draft:'Koncept', liveShared:'živě, sdíleno', publishHint:'Publikování uloží celé flow jako %V; nezměněné kroky se použijí znovu.', htmlView:'HTML pohled', htmlViewNote:'Statická kopie stránky: bez skriptů webu, s přenesenými styly a obrázky, bez tajných údajů.', editTitle:'Upravit na plachtě', editText:'Text', editKeep:'ponechat', editSave:'Uložit úpravu', editSaved:'Úprava uložena jako nová revize', editRebased:'Krok se mezitím změnil; úprava se uložila do nejnovější revize', editUnapplied:'Neuplatněno (prvek už neexistuje)', staleCapture:'Snímek je z předchozí revize; Živě ukazuje poslední úpravu.', branches:'Větve', mergeBranch:'Sloučit do main', mergeConflict:'Krok se změnil v obou větvích:', mergeTakeBranch:'Vzít z větve? (Zrušit = ponechat main)', branchMerged:'Sloučeno', acceptVersion:'Přijmout verzi', returnVersion:'Vrátit verzi', versionVerdict:'Verdikt verze', draftInfo:'Koncept je živý a sdílený: kdo ho má otevřený, vidí změny hned, i ty od agentů. Kroky ukládá kaloko sync nebo úprava na plachtě; tlačítko Publikovat verzi uloží celé flow jako novou verzi.', changedSince:'Změněno od', noChangeSince:'Beze změny od', designEnv:'design', version:'Verze', versions:'Verze flow', publish:'Publikovat verzi', publishName:'Název verze (nepovinný)', published:'Publikováno', designRef:'reference designu', setDesignRef:'Nastavit jako referenci designu', unsetDesignRef:'Zrušit referenci designu', designRefHint:'Implementace se kontroluje proti referenci designu (pack design).', openDraft:'Otevřít koncept', liveMode:'Živě', shotMode:'Snímek', inspect:'Inspektor', pinComment:'Komentář k prvku', pickHint:'Klikněte na prvek v náhledu.', pinnedOn:'K prvku', unchangedSince:'beze změny od', unchangedSteps:'kroků beze změny', changedOnly:'Jen změněné', stepStatus:'Stav kroku', st_in_progress:'rozpracováno', st_ready_for_review:'k revizi', st_ready_for_dev:'připraveno pro vývoj', present:'Prezentovat', presenting:'Prezentujete', stopPresent:'Ukončit prezentaci', updatedSteps:'upravil', viaAgent:'přes', here:'tady', copyCss:'Kopírovat CSS', cssCopied:'CSS zkopírováno', noToken:'mimo sadu tokenů', tokenSet:'token', revisionBy:'revize', noLiveOrigin:'Živé kroky nejsou na této instanci zapnuté.', draftEmpty:'Koncept zatím nemá žádné kroky; spusťte kaloko sync.', prototypeTo:'Prototyp: přechod na', outdated:'zastaralé', prototype:'Prototyp', protoTitle:'Prezentovat prototyp', protoHint:'Klikejte v prototypu; ← → předchozí / další krok, Esc konec.', protoShot:'Jen snímky: živé kroky tu nejsou k dispozici. ← → procházejí flow.', protoLocal:'Odkazy otevírají stránky z disku; ← → procházejí flow.', protoDevice:'Rámeček zařízení', protoFull:'Celá obrazovka', protoExit:'Ukončit prototyp', protoNoStep:'Odkaz nevede na žádný krok flow', focus:'Jen náhled', focusTitle:'Ukázat jen náhled přes celou obrazovku', focusExit:'Zpět do detailu', focusBar:'Ovládání náhledu', focusShow:'Ukázat ovládání', moreTools:'Další nástroje', sheetHandle:'Detail kroku: klepněte nebo táhněte',     hint:'Táhněte pro posun · Ctrl + kolečko zoom · <span class="kbd">F</span> režim soustředění (v detailu jen náhled) · <span class="kbd">K</span> scénáře a běhy · <span class="kbd">R</span> projít · <span class="kbd">P</span> prototyp · <span class="kbd">I</span> mapa / index · <span class="kbd">←</span><span class="kbd">→</span> předchozí / další krok (v detailu) · <span class="kbd">Esc</span> zavřít', locale:'Testovaný jazyk', view:'Náhled', both:'Oba', shownRun:'Zobrazený běh', allRuns:'Všechny běhy', steps:'Kroky flow', fit:'Celé flow', stepsWord:'kroků', passedWord:'prošlo', fitLane:'Zobrazit celou sekci', following:'Sledujete', followEsc:'Esc ukončí', followHint:'Sledovat, co dělá', visOn:'Vidí mě ostatní', visOff:'Jsem skrytý',
+  cs: { makePublicVersion:'Zveřejnit verzi', draft:'Koncept', liveShared:'živě, sdíleno', publishHint:'Publikování uloží celé flow jako %V; nezměněné kroky se použijí znovu.', htmlView:'HTML pohled', htmlViewNote:'Statická kopie stránky: bez skriptů webu, s přenesenými styly a obrázky, bez tajných údajů.', editTitle:'Upravit na plachtě', editText:'Text', editKeep:'ponechat', editSave:'Uložit úpravu', editSaved:'Úprava uložena jako nová revize', editRebased:'Krok se mezitím změnil; úprava se uložila do nejnovější revize', editUnapplied:'Neuplatněno (prvek už neexistuje)', staleCapture:'Snímek je z předchozí revize; Živě ukazuje poslední úpravu.', branches:'Větve', mergeBranch:'Sloučit do main', mergeConflict:'Krok se změnil v obou větvích:', mergeTakeBranch:'Vzít z větve? (Zrušit = ponechat main)', branchMerged:'Sloučeno', acceptVersion:'Přijmout verzi', returnVersion:'Vrátit verzi', versionVerdict:'Verdikt verze', draftInfo:'Koncept je živý a sdílený: kdo ho má otevřený, vidí změny hned, i ty od agentů. Kroky ukládá kaloko sync nebo úprava na plachtě; tlačítko Publikovat verzi uloží celé flow jako novou verzi.', changedSince:'Změněno od', noChangeSince:'Beze změny od', designEnv:'design', version:'Verze', versions:'Verze flow', publish:'Publikovat verzi', publishName:'Název verze (nepovinný)', published:'Publikováno', designRef:'reference designu', setDesignRef:'Nastavit jako referenci designu', unsetDesignRef:'Zrušit referenci designu', designRefHint:'Implementace se kontroluje proti referenci designu (pack design).', openDraft:'Otevřít koncept', liveMode:'Živě', shotMode:'Snímek', inspect:'Inspektor', pinComment:'Komentář k prvku', pickHint:'Klikněte na prvek v náhledu.', pinnedOn:'K prvku', unchangedSince:'beze změny od', unchangedSteps:'kroků beze změny', changedOnly:'Jen změněné', stepStatus:'Stav kroku', st_in_progress:'rozpracováno', st_ready_for_review:'k revizi', st_ready_for_dev:'připraveno pro vývoj', present:'Prezentovat', presenting:'Prezentujete', stopPresent:'Ukončit prezentaci', updatedSteps:'upravil', viaAgent:'přes', here:'tady', copyCss:'Kopírovat CSS', cssCopied:'CSS zkopírováno', noToken:'mimo sadu tokenů', tokenSet:'token', revisionBy:'revize', noLiveOrigin:'Živé kroky nejsou na této instanci zapnuté.', draftEmpty:'Koncept zatím nemá žádné kroky; spusťte kaloko sync.', prototypeTo:'Prototyp: přechod na', outdated:'zastaralé', prototype:'Prototyp', protoTitle:'Prezentovat prototyp', protoHint:'Klikejte v prototypu; ← → předchozí / další krok, Esc konec.', protoShot:'Jen snímky: živé kroky tu nejsou k dispozici. ← → procházejí flow.', protoLocal:'Odkazy otevírají stránky z disku; ← → procházejí flow.', protoDevice:'Rámeček zařízení', protoFull:'Celá obrazovka', protoExit:'Ukončit prototyp', protoNoStep:'Odkaz nevede na žádný krok flow', focus:'Jen náhled', focusTitle:'Ukázat jen náhled přes celou obrazovku', focusExit:'Zpět do detailu', focusBar:'Ovládání náhledu', focusShow:'Ukázat ovládání', moreTools:'Další nástroje', sheetHandle:'Detail kroku: klepněte nebo táhněte',     hint:'Táhněte pro posun · Ctrl + kolečko zoom · <span class="kbd">F</span> režim soustředění (v detailu jen náhled) · <span class="kbd">K</span> scénáře a běhy · <span class="kbd">R</span> projít · <span class="kbd">P</span> prototyp · <span class="kbd">D</span> Dev mode (v detailu) · <span class="kbd">I</span> mapa / index · <span class="kbd">←</span><span class="kbd">→</span> předchozí / další krok (v detailu) · <span class="kbd">Esc</span> zavřít', locale:'Testovaný jazyk', view:'Náhled', both:'Oba', shownRun:'Zobrazený běh', allRuns:'Všechny běhy', steps:'Kroky flow', fit:'Celé flow', stepsWord:'kroků', passedWord:'prošlo', fitLane:'Zobrazit celou sekci', following:'Sledujete', followEsc:'Esc ukončí', followHint:'Sledovat, co dělá', visOn:'Vidí mě ostatní', visOff:'Jsem skrytý',
     pass:'Splněno', partial:'Částečně', fail:'Nesplněno', skip:'Neprověřeno', crop:'výřez', html:'HTML snapshot', email:'e-mail', external:'třetí strana',
     branch:'Větev', commit:'Commit', author:'Autor', pr:'PR', issue:'Issue', env:'Prostředí', duration:'Délka', noPr:'bez PR', open:'otevřený', merged:'sloučený', closed:'zavřený',
     older:'Starší běh', newer:'Novější běh', purpose:'Účel obrazovky ze scénáře', criteria:'Akceptační kritéria', jevTitle:'Sémantické hodnocení',
     jevNote:'Evaluátor dostal zjednodušený stav stránky a ke každé otázce vrátil pravděpodobnost. Verdikt podle prahů a důkazy doplnil runner.', evalLabel:'Hodnocení', metaTitle:'Metadata stránky', mdBasic:'Základ', mdHeadings:'Osnova nadpisů', mdHreflang:'Jazykové verze (hreflang)', mdOg:'Open Graph', mdTwitter:'Twitter / X', mdLd:'Strukturovaná data · JSON-LD', mdMicro:'Strukturovaná data · microdata', mdLinks:'Další odkazy v hlavičce', mdOther:'Ostatní meta', missing:'Chybí', duplicate:'duplicitní', size:'Velikost', runVerdict:'Verdikt běhu', accept:'Přijmout běh', ret:'Vrátit běh', pending:'čeká', accepted:'přijato', returned:'vráceno', baseline:'Referenční běh', setBaseline:'Nastavit jako referenční', unsetBaseline:'Zrušit referenci', verdictNotePh:'Poznámka k verdiktu (u vrácení povinná)', manualPass:'Splněno', manualFail:'Nesplněno', manualNotePh:'Důvod (u nesplněno povinný)', reviewerVerdict:'verdikt kontrolujícího', decideManual:'Rozhodnout ručně', consoleErrors:'Chyby konzole', consoleLoading:'Načítám zprávy…', noConsole:'U tohoto snímku se zprávy konzole neuložily.', consoleMore:(n) => `Dalších ${n} se neuložilo (ukládá se prvních 20).`, blockedTitle:'Zablokované požadavky', copyAll:'Kopírovat vše', copyOne:'Kopírovat tuto zprávu', copied:'Zkopírováno', tabOverview:'Kritéria', tabPage:'Stránka', tabTech:'Technické', toSolve:(n) => `k řešení ${n}`, passedN:(n) => `splněno ${n}`, whyMatters:'Proč na tom záleží:', howFix:'Jak opravit:', whyAndFix:'Proč na tom záleží a jak to opravit', aiShort:(p) => `AI ${p} % ano`, noneFailed:'Nic neselhalo.', toDecide:'Rozhodne člověk', toDecideLead:'AI si nebyla jistá nebo nemohla vyhodnotit; otevřete krok, podívejte se na snímek a rozhodněte.', worthLook:'Stojí za kontrolu', jevScoreHint:'Průměrná jistota AI, že sémantická kritéria této obrazovky jsou splněná', sigTitle:'Rychlé signály', sigLead:'AI se na ně ptá u každé obrazovky spolu s kritérii. Výsledek nemění, jen ukáže obrazovky, na které se vyplatí podívat.', sigPurpose:'Plní účel kroku', sigLanguage:'Text v očekávaném jazyce', sigBroken:'Vypadá rozbitě (chyba, zástupný text, prázdno)', sigWarn:(n) => `Signály k prověření: ${n}`, sigYes:(p) => `${p} % ano`,
     howAuto:'Automatická kontrola', howAi:'Vyhodnocení AI', howManual:'Rozhoduje člověk', howTech:'Technický detail',
     aiPass:(p, t) => `Evaluátor si je na ${p} % jistý, že odpověď je ano; projde od ${t} %.`, aiFail:(p, t) => `Jen ${p} % ano; neprojde při ${t} % a méně.`, aiUnsure:(p, lo, hi) => `Nejisté: ${p} % ano, mezi ${lo} % a ${hi} %. Podívejte se na snímek a rozhodněte níže.`,
+    aiWhy:'Proč:', aiSaw:'AI viděla i snímek', kbTitle:'Klávesnice', kbLead:(n, all) => all ? `Tabulátor projde všechny prvky (${n}) a opustí stránku.` : `Zastávky tabulátoru, prvních ${n}.`, kbShow:'Ukázat pořadí na snímku', kbHide:'Skrýt pořadí', kbNone:'bez viditelného fokusu', kbWeak:(c) => `slabý fokus ${c} : 1`, kbHidden:'skrytý prvek', kbCovered:'zakrytý', ignTitle:'Ignorované oblasti', ignLead:(n) => `Oblasti, které se nepočítají do pixelového rozdílu (hodiny, reklamy, karusely): ${n}.`, unstLead:(n) => `Oblasti, které se mezi opakovanými snímky hýbaly: ${n}. Příkaz kaloko stability z nich navrhne ignore.`,
     aiNotEval:'Zatím nevyhodnoceno.', aiVia:{ qawalk:'vyhodnotilo Kaloko', 'own-key':'vyhodnoceno vaším klíčem' }, aiAsked:'Otázka',
     a_exists:(s) => `${s} je na stránce`, a_absent:(s) => `${s} na stránce není`, a_count:(s, mn, mx) => `${s} se vyskytuje ${mn != null && mn === mx ? `přesně ${mn}×` : mn != null && mx != null ? `${mn}–${mx}×` : mn != null ? `aspoň ${mn}×` : mx != null ? `nejvýš ${mx}×` : ''}`, a_text_matches:(s, p) => `${s || 'Stránka'} obsahuje ${p}`, a_text_absent:(s, p) => `${s || 'Stránka'} neobsahuje ${p}`, a_attr_equals:(s, a, v) => `${s} má ${a} = ${v}`,
     a_no_overflow:'Nic nepřetéká šířku obrazovky', a_no_console_errors:'V konzoli prohlížeče nejsou chyby', a_title_matches:(p) => `Titulek stránky odpovídá ${p}`, a_meta_matches:(s, p) => `Metadata ${s} odpovídají ${p}`, a_link_matches:(s) => `Odkazy ${s} vedou, kam mají`, a_http_status:(v) => `Server odpovídá ${v || '2xx'}`, a_link_home:'Stránka odkazuje zpět na úvod', a_links_ok:'Interní odkazy fungují (žádné 404)', a_hreflang_pairs:'Jazykové verze (hreflang) na sebe vzájemně odkazují',
@@ -787,13 +852,14 @@ const I18N = {
     downloadZip:'Stáhnout ZIP', downloadZipNote:'Všechny soubory v otevřených formátech a plachta, která se otevře offline z disku', filesWord:'souborů', publicAccess:'veřejný odkaz', orgAccess:'přístup po přihlášení do organizace', projectAll:'Všechny projekty', packNote:'Kritérium z balíčku kontrol (packs ve scénáři)', coverage:'Pokrytí plánu', coverageLine:'kritérií z ACCEPTANCE.md má kontrolu', coverageExtra:'kontrol mimo plán', coverageFull:'Každé plánované kritérium má kontrolu.', coverageSteps:'Kroky v plánu bez uzlu', flakyTitle:'Nestabilní kritéria', flaky:'nestabilní', flakyNote:'Verdikt se liší mezi běhy na stejném commitu a prostředí.', people:'Lidé ve flow', peopleHint:'Kliknutím na osobu zvýrazníte její kroky; přerušované šipky ukazují předání mezi lidmi.', awaiting:'Čeká na schválení od', approvedBy:'schválili', approvedByAll:'Schválili všichni povinní schvalovatelé.', viaToken:'přes token', viaAgent:'přes agenta', approvedByTokens:'přes token nebo agenta', publicRun:'Veřejný běh', publicNote:'Plachta je čitelná bez přihlášení; jména hodnotitelů jsou skrytá.', makePublic:'Zveřejnit běh', makePrivate:'Zrušit zveřejnění', publicHint:'Jen pro scénáře bez osobních údajů', publicConfirm:'Zveřejnit tento běh? Uvidí ho kdokoli s odkazem, bez přihlášení. Použijte jen u scénářů bez osobních údajů.', openInApp:'Otevřít v Kaloku', signInLink:'Přihlásit', replay:'Projít', rpStep:'Krok', rpNext:'Další', rpPrev:'Zpět', rpEnd:'Konec průchodu.', rpRestart:'Znovu od začátku', rpChoose:'Kudy dál?', rpOr:'nebo', rpKeys:'← → krok · čísla volí větev · Esc zavře', rpDecision:'Rozhodnutí', rpBranch:'větev', rpAltOnly:'jiná větev',
     compare:'Porovnat', cmpWith:'Porovnáno s', cmpStop:'Ukončit porovnání', cmpOff:'nic', cmpBaseline:'referenční', cmpPrev:'předchozí', cmpTitle:'Rozdíly oproti', cmpNone:'Statusy, verdikty i evidence jsou stejné.', pxChanged:'pixelů jinak', cmpSide:'Vedle sebe', cmpDiff:'Rozdíl', cmpLoadErr:'Porovnávaný běh se nepodařilo načíst.', pxUnavail:'Pixelový rozdíl se počítá jen ve službě (snímky ze stejného původu).', was:'předtím', thisRun:'tento běh', cmpNoCap:'v porovnávaném běhu bez snímku', cmpAdded:'nové kroky', cmpRemoved:'kroky, které zmizely', cmpHint:'Ctrl/⌘ + klik na krok otevře porovnání',
     reviewTitle:'Akceptace a komentáře', approve:'Schválit', reject:'Zamítnout', comment:'Komentovat', notePh:'Co je potřeba změnit, nebo poznámka · @jméno pošle kolegovi upozornění', approved:'schváleno', rejected:'zamítnuto', commented:'komentář', resolved:'vyřešeno', resolve:'Vyřešit', openFeedback:'Otevřená zpětná vazba', noFeedback:'Žádná otevřená zpětná vazba.', saved:'Uloženo', noteRequired:'Napište, co je potřeba změnit.', expires:'Platí do' },
-  en: { makePublicVersion:'Make version public', draft:'Draft', liveShared:'live, shared', publishHint:'Publish version saves the whole flow as %V; unchanged steps are reused.', htmlView:'HTML view', htmlViewNote:'A static copy of the page: the site’s scripts removed, styles and images rehosted, secrets stripped.', editTitle:'Edit in the canvas', editText:'Text', editKeep:'keep', editSave:'Save edit', editSaved:'Edit saved as a new revision', editRebased:'The step changed meanwhile; the edit is on the latest revision', editUnapplied:'Not applied (the element no longer exists)', staleCapture:'The screenshot is from the previous revision; Live shows the latest edit.', branches:'Branches', mergeBranch:'Merge into main', mergeConflict:'Step changed on both branches:', mergeTakeBranch:'Take the branch version? (Cancel = keep main)', branchMerged:'Merged', acceptVersion:'Accept version', returnVersion:'Return version', versionVerdict:'Version verdict', draftInfo:'This draft is live and shared: everyone who has it open sees changes as they happen, including the agents’. kaloko sync and canvas edits save steps; Publish version saves the whole flow as a new version.', changedSince:'Changed since', noChangeSince:'No change since', designEnv:'design', version:'Version', versions:'Flow versions', publish:'Publish version', publishName:'Version name (optional)', published:'Published', designRef:'design reference', setDesignRef:'Set as design reference', unsetDesignRef:'Unset design reference', designRefHint:'Implementation is checked against the design reference (pack design).', openDraft:'Open the draft', liveMode:'Live', shotMode:'Screenshot', inspect:'Inspect', pinComment:'Comment on element', pickHint:'Click an element in the preview.', pinnedOn:'On element', unchangedSince:'unchanged since', unchangedSteps:'steps unchanged', changedOnly:'Changed only', stepStatus:'Step status', st_in_progress:'in progress', st_ready_for_review:'ready for review', st_ready_for_dev:'ready for dev', present:'Present', presenting:'You are presenting', stopPresent:'Stop presenting', updatedSteps:'updated', viaAgent:'via', here:'here', copyCss:'Copy CSS', cssCopied:'CSS copied', noToken:'outside the token set', tokenSet:'token', revisionBy:'revision', noLiveOrigin:'Live steps are not enabled on this instance.', draftEmpty:'The draft has no steps yet; run kaloko sync.', prototypeTo:'Prototype: go to', outdated:'outdated', prototype:'Prototype', protoTitle:'Present the prototype', protoHint:'Click through the prototype; ← → previous / next step, Esc to leave.', protoShot:'Screenshots only: live steps are not available here. ← → move through the flow.', protoLocal:'Links open the pages from disk; ← → move through the flow.', protoDevice:'Device frame', protoFull:'Full screen', protoExit:'Leave the prototype', protoNoStep:'The link does not lead to a step of the flow', focus:'Focus', focusTitle:'Show only the preview, full screen', focusExit:'Back to the detail', focusBar:'Preview controls', focusShow:'Show controls', moreTools:'More tools', sheetHandle:'Step detail: tap or drag',     hint:'Drag to pan · Ctrl + wheel to zoom · <span class="kbd">F</span> focus mode (in the detail: the preview only) · <span class="kbd">K</span> scenarios and runs · <span class="kbd">R</span> replay · <span class="kbd">P</span> prototype · <span class="kbd">I</span> map / index · <span class="kbd">←</span><span class="kbd">→</span> previous / next step (in the detail) · <span class="kbd">Esc</span> close', locale:'Tested locale', view:'View', both:'Both', shownRun:'Shown run', allRuns:'All runs', steps:'Flow steps', fit:'Fit flow', stepsWord:'steps', passedWord:'passed', fitLane:'Show the whole section', following:'Following', followEsc:'Esc to stop', followHint:'Follow what they do', visOn:'Others see me', visOff:'Hidden',
+  en: { makePublicVersion:'Make version public', draft:'Draft', liveShared:'live, shared', publishHint:'Publish version saves the whole flow as %V; unchanged steps are reused.', htmlView:'HTML view', htmlViewNote:'A static copy of the page: the site’s scripts removed, styles and images rehosted, secrets stripped.', editTitle:'Edit in the canvas', editText:'Text', editKeep:'keep', editSave:'Save edit', editSaved:'Edit saved as a new revision', editRebased:'The step changed meanwhile; the edit is on the latest revision', editUnapplied:'Not applied (the element no longer exists)', staleCapture:'The screenshot is from the previous revision; Live shows the latest edit.', branches:'Branches', mergeBranch:'Merge into main', mergeConflict:'Step changed on both branches:', mergeTakeBranch:'Take the branch version? (Cancel = keep main)', branchMerged:'Merged', acceptVersion:'Accept version', returnVersion:'Return version', versionVerdict:'Version verdict', draftInfo:'This draft is live and shared: everyone who has it open sees changes as they happen, including the agents’. kaloko sync and canvas edits save steps; Publish version saves the whole flow as a new version.', changedSince:'Changed since', noChangeSince:'No change since', designEnv:'design', version:'Version', versions:'Flow versions', publish:'Publish version', publishName:'Version name (optional)', published:'Published', designRef:'design reference', setDesignRef:'Set as design reference', unsetDesignRef:'Unset design reference', designRefHint:'Implementation is checked against the design reference (pack design).', openDraft:'Open the draft', liveMode:'Live', shotMode:'Screenshot', inspect:'Inspect', pinComment:'Comment on element', pickHint:'Click an element in the preview.', pinnedOn:'On element', unchangedSince:'unchanged since', unchangedSteps:'steps unchanged', changedOnly:'Changed only', stepStatus:'Step status', st_in_progress:'in progress', st_ready_for_review:'ready for review', st_ready_for_dev:'ready for dev', present:'Present', presenting:'You are presenting', stopPresent:'Stop presenting', updatedSteps:'updated', viaAgent:'via', here:'here', copyCss:'Copy CSS', cssCopied:'CSS copied', noToken:'outside the token set', tokenSet:'token', revisionBy:'revision', noLiveOrigin:'Live steps are not enabled on this instance.', draftEmpty:'The draft has no steps yet; run kaloko sync.', prototypeTo:'Prototype: go to', outdated:'outdated', prototype:'Prototype', protoTitle:'Present the prototype', protoHint:'Click through the prototype; ← → previous / next step, Esc to leave.', protoShot:'Screenshots only: live steps are not available here. ← → move through the flow.', protoLocal:'Links open the pages from disk; ← → move through the flow.', protoDevice:'Device frame', protoFull:'Full screen', protoExit:'Leave the prototype', protoNoStep:'The link does not lead to a step of the flow', focus:'Focus', focusTitle:'Show only the preview, full screen', focusExit:'Back to the detail', focusBar:'Preview controls', focusShow:'Show controls', moreTools:'More tools', sheetHandle:'Step detail: tap or drag',     hint:'Drag to pan · Ctrl + wheel to zoom · <span class="kbd">F</span> focus mode (in the detail: the preview only) · <span class="kbd">K</span> scenarios and runs · <span class="kbd">R</span> replay · <span class="kbd">P</span> prototype · <span class="kbd">D</span> Dev mode (in the detail) · <span class="kbd">I</span> map / index · <span class="kbd">←</span><span class="kbd">→</span> previous / next step (in the detail) · <span class="kbd">Esc</span> close', locale:'Tested locale', view:'View', both:'Both', shownRun:'Shown run', allRuns:'All runs', steps:'Flow steps', fit:'Fit flow', stepsWord:'steps', passedWord:'passed', fitLane:'Show the whole section', following:'Following', followEsc:'Esc to stop', followHint:'Follow what they do', visOn:'Others see me', visOff:'Hidden',
     pass:'Passed', partial:'Partial', fail:'Failed', skip:'Not checked', crop:'crop', html:'HTML snapshot', email:'e-mail', external:'third party',
     branch:'Branch', commit:'Commit', author:'Author', pr:'PR', issue:'Issue', env:'Environment', duration:'Duration', noPr:'no PR', open:'open', merged:'merged', closed:'closed',
     older:'Older run', newer:'Newer run', purpose:'Screen purpose from the scenario', criteria:'Acceptance criteria', jevTitle:'Semantic evaluation',
     jevNote:'The evaluator got a reduced page state and returned a probability for each question. The runner turned them into verdicts by threshold and added the evidence.', evalLabel:'Evaluation', metaTitle:'Page metadata', mdBasic:'Basics', mdHeadings:'Heading outline', mdHreflang:'Language versions (hreflang)', mdOg:'Open Graph', mdTwitter:'Twitter / X', mdLd:'Structured data · JSON-LD', mdMicro:'Structured data · microdata', mdLinks:'Other head links', mdOther:'Other meta', missing:'Missing', duplicate:'duplicate', size:'Size', runVerdict:'Run verdict', accept:'Accept run', ret:'Return run', pending:'pending', accepted:'accepted', returned:'returned', baseline:'Baseline run', setBaseline:'Set as baseline', unsetBaseline:'Unset baseline', verdictNotePh:'Verdict note (required when returning)', manualPass:'Pass', manualFail:'Fail', manualNotePh:'Reason (required for fail)', reviewerVerdict:'reviewer verdict', decideManual:'Decide manually', consoleErrors:'Console errors', consoleLoading:'Loading the messages…', noConsole:'No console messages were kept for this capture.', consoleMore:(n) => `${n} more not stored (the first 20 are kept).`, blockedTitle:'Blocked requests', copyAll:'Copy all', copyOne:'Copy this message', copied:'Copied', tabOverview:'Criteria', tabPage:'Page', tabTech:'Technical', toSolve:(n) => `${n} to solve`, passedN:(n) => `${n} passed`, whyMatters:'Why it matters:', howFix:'How to fix:', whyAndFix:'Why it matters and how to fix it', aiShort:(p) => `AI ${p} % yes`, noneFailed:'Nothing failed.', toDecide:'For a person to decide', toDecideLead:'The AI was unsure or could not evaluate; open the step, look at the screenshot and decide.', worthLook:'Worth a look', jevScoreHint:'Average confidence of the AI that the semantic criteria of this screen are met', sigTitle:'Quick signals', sigLead:'The AI asks these on every screen next to the criteria. They never change the result, only point at screens worth a look.', sigPurpose:'Does what the step is for', sigLanguage:'Text in the expected language', sigBroken:'Looks broken (error, placeholder, blank)', sigWarn:(n) => `${n} signal(s) worth a look`, sigYes:(p) => `${p} % yes`,
     howAuto:'Automatic check', howAi:'AI evaluation', howManual:'Decided by a person', howTech:'Technical detail',
     aiPass:(p, t) => `The evaluator is ${p} % sure the answer is yes; passes from ${t} %.`, aiFail:(p, t) => `Only ${p} % yes; fails at ${t} % or less.`, aiUnsure:(p, lo, hi) => `Unsure: ${p} % yes, between ${lo} % and ${hi} %. Look at the screenshot and decide below.`,
+    aiWhy:'Why:', aiSaw:'the AI also saw the screenshot', kbTitle:'Keyboard', kbLead:(n, all) => all ? `Tab goes through ${n} elements and leaves the page.` : `The first ${n} tab stops.`, kbShow:'Show the order on the screenshot', kbHide:'Hide the order', kbNone:'no visible focus', kbWeak:(c) => `weak focus ${c} : 1`, kbHidden:'hidden element', kbCovered:'covered', ignTitle:'Ignored regions', ignLead:(n) => `${n} region(s) do not count in the pixel diff (clocks, ads, carousels).`, unstLead:(n) => `${n} region(s) moved between repeated shots; kaloko stability suggests ignoring them.`,
     aiNotEval:'Not evaluated yet.', aiVia:{ qawalk:'evaluated by Kaloko', 'own-key':'evaluated with your key' }, aiAsked:'Asked',
     a_exists:(s) => `${s} is on the page`, a_absent:(s) => `${s} is not on the page`, a_count:(s, mn, mx) => `${s} appears ${mn != null && mn === mx ? `exactly ${mn}×` : mn != null && mx != null ? `${mn}–${mx}×` : mn != null ? `at least ${mn}×` : mx != null ? `at most ${mx}×` : ''}`, a_text_matches:(s, p) => `${s || 'The page'} contains ${p}`, a_text_absent:(s, p) => `${s || 'The page'} does not contain ${p}`, a_attr_equals:(s, a, v) => `${s} has ${a} = ${v}`,
     a_no_overflow:'Nothing overflows the screen width', a_no_console_errors:'No errors in the browser console', a_title_matches:(p) => `The page title matches ${p}`, a_meta_matches:(s, p) => `Page metadata ${s} matches ${p}`, a_link_matches:(s) => `Links ${s} point where they should`, a_http_status:(v) => `The server answers ${v || '2xx'}`, a_link_home:'The page links back home', a_links_ok:'Internal links work (no 404)', a_hreflang_pairs:'Language versions (hreflang) link to each other',
@@ -812,6 +878,9 @@ const I18N = {
     compare:'Compare', cmpWith:'Compared with', cmpStop:'Stop comparing', cmpOff:'nothing', cmpBaseline:'baseline', cmpPrev:'previous', cmpTitle:'Differences from', cmpNone:'Statuses, verdicts and evidence are the same.', pxChanged:'pixels changed', cmpSide:'Side by side', cmpDiff:'Diff', cmpLoadErr:'Could not load the compared run.', pxUnavail:'Pixel diff works in the service only (same-origin images).', was:'was', thisRun:'this run', cmpNoCap:'no capture in the compared run', cmpAdded:'new steps', cmpRemoved:'steps that disappeared', cmpHint:'Ctrl/⌘ + click a step to open the comparison',
     reviewTitle:'Sign-off and comments', approve:'Approve', reject:'Reject', comment:'Comment', notePh:'What should change, or a note · @name notifies a colleague', approved:'approved', rejected:'rejected', commented:'comment', resolved:'resolved', resolve:'Resolve', openFeedback:'Open feedback', noFeedback:'No open feedback.', saved:'Saved', noteRequired:'Write what should change.', expires:'Expires' }
 };
+// Dev mode (#42)
+Object.assign(I18N.cs, { devMode:'Dev mode', devTab:'Dev', devTitle:'Míry, tokeny a stavy prvků pro vývoj', devTabEl:'Prvek', devTabTokens:'Tokeny', devEmpty:'Najeďte myší na prvek v náhledu a klikněte na něj. Shift + šipky procházejí strom prvků, se stisknutým Alt uvidíte vzdálenosti k dalšímu prvku.', devStart:'Vybrat hlavní obsah', devNavLabel:'Procházet prvky', navParent:'Rodič', navChild:'Potomek', navPrev:'Předchozí', navNext:'Další', g_type:'Typografie', g_color:'Barvy', g_space:'Mezery', g_size:'Rozměry', g_shape:'Tvar', g_layout:'Rozložení', notToken:'není token', nearest:'nejbližší', typedRaw:'Hodnota je v CSS napsaná natvrdo, i když token existuje; použijte proměnnou.', typedRawShort:'natvrdo', copyTokenPath:'Kopírovat cestu tokenu', contrast:'Kontrast', aaPass:'splňuje AA', aaFail:'nesplňuje AA', aaNeed:'potřeba', largeText:'velký text', contrastApprox:'Pod textem je obrázek, kontrast je přibližný.', states:'Stavy', stDefault:'výchozí', stNone:'Styly stránky pro tento prvek žádné stavy nedefinují.', changedInState:'Zvýrazněné hodnoty se v tomto stavu mění.', distances:'Vzdálenosti', toParent:'K rodiči', toTarget:'K prvku', measure:'Měřit', measureHint:'Podržte Alt a najeďte na jiný prvek, nebo zapněte Měřit a klepněte na něj.', assets:'Obrázky a ikony', download:'Stáhnout', assetFail:'Soubor se nepodařilo stáhnout.', copyCssVars:'Kopírovat CSS s proměnnými', copyTokens:'Kopírovat tokeny (JSON)', copyPrompt:'Kopírovat pokyn pro agenta', copyLine:'Kopírovat pokyn k této hodnotě', pinFromDev:'Komentovat tento prvek', tokUsed:'Použité na tomto kroku', tokOff:'Hodnoty mimo sadu tokenů', tokHard:'V CSS natvrdo místo tokenu', tokUnused:'Nepoužité', tokNone:'Krok nemá sadu tokenů (tokens.json).', tokHlN:'Zvýrazněno prvků:', tokHint:'Klikněte na token a náhled zvýrazní prvky, které ho používají.', devShotNote:'Míry a tokeny jsou ze snímku, jak ho zachytilo CLI; stavy a stahování obrázků potřebují živou stránku.', devNoSpec:'Tento snímek nemá spec. Projděte krok znovu aktuálním CLI (kaloko walk).', devLocalLive:'Ze souboru na disku čte Dev mode snímek; živou stránku měří na kaloko.app.', devAgentHint:'Totéž dostane agent: kaloko spec %N nebo MCP get_step_spec.', devLoading:'Načítám…', keyDev:'Dev mode v detailu kroku: míry, tokeny a stavy prvků (M měří, Shift + šipky procházejí prvky)', promptHead:'Postavte %E podle schváleného návrhu v Kaloku (krok %S).', promptUse:'Pro %W použijte token %T.', promptOff:'%P %V není token; nejbližší je %T. Pevnou hodnotu použijte jen po domluvě s designérem.', promptOffNone:'%P %V není token.', promptSpec:'Spec celého kroku: kaloko spec %N' });
+Object.assign(I18N.en, { devMode:'Dev mode', devTab:'Dev', devTitle:'Measurements, tokens and states of elements for development', devTabEl:'Element', devTabTokens:'Tokens', devEmpty:'Hover an element in the preview and click it. Shift + arrows move through the element tree; hold Alt to see the distances to another element.', devStart:'Select the main content', devNavLabel:'Move through elements', navParent:'Parent', navChild:'Child', navPrev:'Previous', navNext:'Next', g_type:'Typography', g_color:'Colors', g_space:'Spacing', g_size:'Size', g_shape:'Shape', g_layout:'Layout', notToken:'not a token', nearest:'nearest', typedRaw:'The CSS has this value typed raw although a token exists; use the custom property.', typedRawShort:'typed raw', copyTokenPath:'Copy the token path', contrast:'Contrast', aaPass:'passes AA', aaFail:'fails AA', aaNeed:'needs', largeText:'large text', contrastApprox:'There is an image behind the text; the contrast is approximate.', states:'States', stDefault:'default', stNone:'The page styles define no states for this element.', changedInState:'Highlighted values change in this state.', distances:'Distances', toParent:'To the parent', toTarget:'To', measure:'Measure', measureHint:'Hold Alt and hover another element, or turn on Measure and tap it.', assets:'Images and icons', download:'Download', assetFail:'The file could not be downloaded.', copyCssVars:'Copy CSS with variables', copyTokens:'Copy tokens (JSON)', copyPrompt:'Copy prompt for an agent', copyLine:'Copy the prompt line for this value', pinFromDev:'Comment on this element', tokUsed:'Used on this step', tokOff:'Values outside the token set', tokHard:'Typed raw in the CSS instead of a token', tokUnused:'Not used', tokNone:'This step has no token set (tokens.json).', tokHlN:'Elements highlighted:', tokHint:'Click a token to highlight the elements that use it.', devShotNote:'Measurements and tokens come from the screenshot as the CLI captured it; states and image downloads need the live page.', devNoSpec:'This capture has no spec. Walk the step again with the current CLI (kaloko walk).', devLocalLive:'From disk, Dev mode reads the screenshot; the live page is measured on kaloko.app.', devAgentHint:'An agent gets the same: kaloko spec %N or MCP get_step_spec.', devLoading:'Loading…', keyDev:'Dev mode in the step detail: measurements, tokens and states of elements (M measures, Shift + arrows move through elements)', promptHead:'Build %E as approved in Kaloko (step %S).', promptUse:'Use token %T for the %W.', promptOff:'%P %V is not a token; the nearest is %T. Use the raw value only if the designer agrees.', promptOffNone:'%P %V is not a token.', promptSpec:'Spec of the whole step: kaloko spec %N' });
 const storedLang = (() => { try { return localStorage.getItem('qawalk.lang'); } catch { return null; } })();
 const UI = (() => { const l = window.QAWALK_APP?.lang || new URLSearchParams(location.search).get('lang') || storedLang || (navigator.language || 'en').slice(0, 2); return l === 'cs' || l === 'sk' ? 'cs' : 'en'; })();
 function switchLang (l) {
@@ -820,6 +889,9 @@ function switchLang (l) {
   location.reload();
 }
 const T = (k) => I18N[UI][k] ?? I18N.en[k] ?? k;
+// "n pages" with the right plural (cs: 1 stránka, 2–4 stránky, 5+ stránek; en: 1 page, n pages)
+const pagesN = (n) => { n = Number(n) || 0; return UI === 'cs' ? (n === 1 ? 'stránka' : n >= 2 && n <= 4 ? 'stránky' : 'stránek') : (n === 1 ? 'page' : 'pages') };
+const needAttention = (n) => { n = Number(n) || 0; return UI === 'cs' ? `${n} ${pagesN(n)} ${n === 1 ? 'chce' : 'chtějí'} pozornost` : `${n} ${pagesN(n)} ${n === 1 ? 'needs' : 'need'} attention` };
 const ICON = {
   comment:'<svg class="i" viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4z"/></svg>',
   pin:'<svg class="i" viewBox="0 0 24 24"><path d="M12 21s-6-5.6-6-11a6 6 0 0 1 12 0c0 5.4-6 11-6 11z"/><circle cx="12" cy="10" r="2.2"/></svg>',
@@ -1219,7 +1291,7 @@ function cmpCritChanges (n) {
 }
 function loadImg (src) { return new Promise((res, rej) => { const i = new Image(); if (/^https?:/.test(src) && new URL(src, location.href).origin !== location.origin) i.crossOrigin = 'anonymous'; i.onload = () => res(i); i.onerror = () => rej(new Error('image')); i.src = src; }); }
 /* pixel diff of two captures scaled to width W: changed pixels in red on a faded copy of the current one */
-async function pixelDiff (key, srcA, srcB, W) {
+async function pixelDiff (key, srcA, srcB, W, ign = null) {
   const k = `${key}|${W}`;
   if (CMP.pix.has(k)) return CMP.pix.get(k);
   const job = (async () => {
@@ -1229,18 +1301,29 @@ async function pixelDiff (key, srcA, srcB, W) {
     const A = draw(a, ha), B = draw(b, hb);
     const out = document.createElement('canvas'); out.width = W; out.height = H; const ox = out.getContext('2d'); const O = ox.createImageData(W, H);
     let n = 0; const da = A.data, db = B.data, dout = O.data;
-    for (let i = 0; i < da.length; i += 4) {
+    const skip = ignoreMask(ign, W, H); let counted = 0;
+    for (let i = 0, p = 0; i < da.length; i += 4, p++) {
+      if (skip && skip[p]) { const g = ((p % W) + ((p / W) | 0)) % 10 < 5 ? 205 : 232; dout[i] = dout[i + 1] = dout[i + 2] = g; dout[i + 3] = 255; continue; }
+      counted++;
       const d = Math.abs(da[i] - db[i]) + Math.abs(da[i + 1] - db[i + 1]) + Math.abs(da[i + 2] - db[i + 2]);
       if (d > 48) { n++; dout[i] = 220; dout[i + 1] = 20; dout[i + 2] = 60; dout[i + 3] = 255; }
       else { dout[i] = 255 - (255 - da[i]) * 0.35; dout[i + 1] = 255 - (255 - da[i + 1]) * 0.35; dout[i + 2] = 255 - (255 - da[i + 2]) * 0.35; dout[i + 3] = 255; }
     }
     ox.putImageData(O, 0, 0);
-    return { ratio: n / (W * H), canvas: out, ha, hb, H };
+    return { ratio: n / Math.max(1, counted), canvas: out, ha, hb, H, ignored: W * H - counted };
   })();
   CMP.pix.set(k, job);
   job.catch(() => CMP.pix.delete(k));
   return job;
 }
+/* ignored regions of both captures (#20) as a W × H mask: CSS px of the page scaled to the diff width */
+function ignoreMask (ign, W, H) {
+  if (!ign?.rects?.length) return null;
+  const k = W / (ign.cssWidth || W); const m = new Uint8Array(W * H);
+  for (const r of ign.rects) { const x0 = Math.max(0, Math.floor(r.x * k)), x1 = Math.min(W, Math.ceil((r.x + r.w) * k)); for (let y = Math.max(0, Math.floor(r.y * k)); y < Math.min(H, Math.ceil((r.y + r.h) * k)); y++) m.fill(1, y * W + x0, y * W + x1); }
+  return m;
+}
+const ignOf = (a, b) => { const rects = [...(a?.ignore || []), ...(b?.ignore || [])]; return rects.length ? { rects, cssWidth: a?.size?.[0] || b?.size?.[0] || null } : null; };
 const pxClass = (r) => r > 0.1 ? 'lv2' : r > 0.01 ? 'lv1' : 'lv0';
 const pxText = (r) => `${(r * 100).toFixed(r < 0.1 ? 1 : 0)} % ${T('pxChanged')}`;
 /* fills the per-node pixel badges after the nodes are rendered */
@@ -1261,7 +1344,7 @@ function fillPixelBadges () {
     if (!ca || !cb) { el.textContent = '—'; el.title = T('cmpNoCap'); return; }
     const small = ca.thumb && cb.thumb;
     try {
-      const r = await pixelDiff(`${n.id}|${S.loc}|${v.name}${small ? '|thumb' : ''}`, asset(small ? ca.thumb : ca.image || ca.png), S.cmp.base + (small ? cb.thumb : cb.image || cb.png), 256);
+      const r = await pixelDiff(`${n.id}|${S.loc}|${v.name}${small ? '|thumb' : ''}`, asset(small ? ca.thumb : ca.image || ca.png), S.cmp.base + (small ? cb.thumb : cb.image || cb.png), 256, ignOf(ca, cb));
       el.textContent = `◐ ${pxText(r.ratio)}`; el.className = `pxd ${pxClass(r.ratio)}`;
     } catch { el.textContent = '◐ ?'; el.title = T('pxUnavail'); }
   };
@@ -1475,10 +1558,10 @@ function stackNodeHtml (n, p) {
   const thumbs = (st.sample || []).slice(0, 3).map((x) => x.thumb ? `<img loading="lazy" src="${esc(asset(x.thumb))}" alt="">` : '<span class="ph"></span>').join('') || '<span class="ph"></span><span class="ph"></span><span class="ph"></span>';
   const bad = (st.summary.fail || 0) + (st.summary.partial || 0);
   return `<div class="node node--stack st-${s} ${S.sess && n.session !== S.sess ? 'dim' : ''}" data-id="${esc(n.id)}" style="left:${p.x}px;top:${p.y}px">
-    <div class="node__head"><span class="kind">${ICON.stack}</span><div class="node__t"><div class="node__title">${esc(loc(n.title))}</div><div class="node__path">${esc(st.count)} ${T('pagesWord')}${st.source ? ` · ${esc(st.source)}` : ''}</div></div><span class="ok st-${s}">${esc(st.summary.pass || 0)}/${esc(st.count)}</span></div>
+    <div class="node__head"><span class="kind">${ICON.stack}</span><div class="node__t"><div class="node__title">${esc(loc(n.title))}</div><div class="node__path">${esc(st.count)} ${pagesN(st.count)}${st.source ? ` · ${esc(st.source)}` : ''}</div></div><span class="ok st-${s}">${esc(st.summary.pass || 0)}/${esc(st.count)}</span></div>
     <button class="stack-fan" data-open="${esc(n.id)}" aria-label="${esc(T('openIndex'))}: ${esc(loc(n.title))}">${thumbs}<span class="count">${esc(st.count)}</span></button>
     <div class="stack-bar">${['pass', 'partial', 'fail', 'skip'].map((k) => st.summary[k] ? `<i style="width:${st.summary[k] / tot * 100}%;background:var(--${k})"></i>` : '').join('')}</div>
-    <div class="node__foot"><span class="note">${bad ? `${bad} ${T('pagesNeedAttention')}` : T('allPagesPass')}</span>${cmtBadge(n.id)}<span class="note">${T('openIndex')} →</span></div>
+    <div class="node__foot"><span class="note">${bad ? needAttention(bad) : T('allPagesPass')}</span>${cmtBadge(n.id)}<span class="note">${T('openIndex')} →</span></div>
   </div>`;
 }
 async function loadStack (n) {
@@ -1528,7 +1611,7 @@ async function openStack (id, opts = {}) {
   const crits = (data.criteria || []).map((c) => { const k = n.criteria.find((x) => x.id === c.id)?.counts || {}; return { ...c, bad: (k.fail || 0) + (k.needs_review || 0) }; });
   const el = st.inline ? $('ri') : $('si');
   el.innerHTML = `<div class="si__box">
-    <div class="si__head"><span class="kind" style="background:var(--ink);color:var(--panel)">${ICON.stack}</span><div style="flex:1;min-width:0">${st.inline ? `<div class="ri-crumbs"><button id="siUp">${esc(RUN.scenario.title)}</button><span>›</span><b id="siTitle">${esc(loc(n.title))}</b></div>` : `<h3 id="siTitle">${esc(loc(n.title))}</h3>`}<div class="note">${esc(n.stack.count)} ${T('pagesWord')}${n.stack.source ? ` · ${esc(n.stack.source)}` : ''}${n.stack.semantic_sample != null && crits.some((c) => c.type === 'semantic') ? ` · ${T('semanticSample')} ${esc(Math.min(n.stack.semantic_sample, n.stack.count))}` : ''}</div></div>
+    <div class="si__head"><span class="kind" style="background:var(--ink);color:var(--panel)">${ICON.stack}</span><div class="si__title">${st.inline ? `<div class="ri-crumbs"><button id="siUp">${esc(RUN.scenario.title)}</button><span>›</span><b id="siTitle">${esc(loc(n.title))}</b></div>` : `<h3 id="siTitle">${esc(loc(n.title))}</h3>`}<div class="note">${esc(n.stack.count)} ${pagesN(n.stack.count)}${n.stack.source ? ` · ${esc(n.stack.source)}` : ''}${n.stack.semantic_sample != null && crits.some((c) => c.type === 'semantic') ? ` · ${T('semanticSample')} ${esc(Math.min(n.stack.semantic_sample, n.stack.count))}` : ''}</div></div>
       <div class="seg" id="siView"></div><button class="btn" id="siCsv">${T('downloadCsv')}</button>${st.inline ? '' : `<button class="icon-btn" id="siClose" aria-label="Close">${ICON.close}</button>`}</div>
     <div class="si__tools">
       ${['all', 'fail', 'partial', 'pass', 'skip'].filter((k) => k === 'all' || sum[k]).map((k) => `<button class="si-chip" data-st="${k}" aria-pressed="${st.status === k}">${k === 'all' ? T('allWord') : `${MARK[k]} ${T(k)}`} ${k === 'all' ? esc(n.stack.count) : esc(sum[k] || 0)}</button>`).join('')}
@@ -1568,7 +1651,7 @@ function paintStack () {
   const st = S.st; const box = $('siList'); if (!st || !box || (st.inline ? $('ri').hidden : $('si').hidden)) return;
   const data = STACKS.get(st.id); const n = byId(st.id); const cols = (data.fields || []).filter((f) => f.id !== 'title').slice(0, 4);
   const list = st.filtered; const head = st.view === 'grid' ? 0 : $('siHead').offsetHeight;
-  $('siCount').textContent = `${list.length} / ${data.items.length} ${T('pagesWord')}`;
+  $('siCount').textContent = `${list.length} / ${data.items.length} ${pagesN(data.items.length)}`;
   const img = (it) => { const t = stackThumb(it); return t ? `<img loading="lazy" src="${esc(asset(t))}" alt="">` : '<span class="ph"></span>'; };
   const fails = (it) => `<span class="si-fails">${(it.fails || []).map((id) => `<span title="${esc((data.criteria || []).find((c) => c.id === id)?.text || '')}">${esc(id)}</span>`).join('')}${(it.review || []).slice(0, 3).map((id) => `<span class="rv" title="${esc(T('needs_review'))}">${esc(id)}</span>`).join('')}</span>`;
   if (!list.length) { $('siSpacer').style.height = '0px'; $('siRows').innerHTML = `<div class="si__empty">${T('noPagesMatch')}</div>`; return; }
@@ -1665,7 +1748,7 @@ function riRender (opts = {}) {
   const r = S.ri; const sum = RUN.summary || {}; const all = screens();
   const count = (k) => all.filter((n) => nodeSt(n) === k).length;
   $('ri').innerHTML = `<div class="si__box">
-    <div class="si__head"><span class="kind" style="background:var(--ink);color:var(--panel)">${ICON.stack}</span><div style="flex:1;min-width:0"><h3>${esc(RUN.scenario.title)}</h3><div class="note">${all.length} ${T('stepsWord')} · ${esc(sum.pass || 0)} ${T('passedWord')}${all.some((n) => n.kind === 'stack') ? ` · ${all.filter((n) => n.kind === 'stack').reduce((k, n) => k + (n.stack?.count || 0), 0)} ${T('pagesWord')}` : ''}</div></div>
+    <div class="si__head"><span class="kind" style="background:var(--ink);color:var(--panel)">${ICON.stack}</span><div class="si__title"><h3>${esc(RUN.scenario.title)}</h3><div class="note">${all.length} ${T('stepsWord')} · ${esc(sum.pass || 0)} ${T('passedWord')}${all.some((n) => n.kind === 'stack') ? ` · ${all.filter((n) => n.kind === 'stack').reduce((k, n) => k + (n.stack?.count || 0), 0)} ${pagesN(all.filter((n) => n.kind === 'stack').reduce((k, n) => k + (n.stack?.count || 0), 0))}` : ''}</div></div>
       <button class="btn" id="riCsv">${T('downloadCsv')}</button></div>
     <div class="si__tools">
       ${['all', 'fail', 'partial', 'pass', 'skip'].filter((k) => k === 'all' || count(k)).map((k) => `<button class="si-chip" data-st="${k}" aria-pressed="${r.status === k}">${k === 'all' ? T('allWord') : `${MARK[k]} ${T(k)}`} ${k === 'all' ? all.length : count(k)}</button>`).join('')}
@@ -1694,7 +1777,7 @@ function riPaint () {
   const tops = []; let y = 0; for (const e of out) { tops.push(y); y += e.type === 'group' ? RI_H.group : RI_H.row; }
   S.ri.tops = tops;
   const nSteps = out.filter((e) => e.type === 'step').length, nPages = out.filter((e) => e.type === 'page').length;
-  $('riCount').textContent = `${nSteps} / ${screens().length} ${T('stepsWord')}${nPages ? ` · ${nPages} ${T('pagesWord')}` : ''}${waiting ? ` · ${T('loadingPages')}` : ''}`;
+  $('riCount').textContent = `${nSteps} / ${screens().length} ${T('stepsWord')}${nPages ? ` · ${nPages} ${pagesN(nPages)}` : ''}${waiting ? ` · ${T('loadingPages')}` : ''}`;
   if (!out.length) { $('riSpacer').style.height = '0px'; $('riRows').innerHTML = `<div class="si__empty">${T('noStepsMatch')}</div>`; return; }
   $('riSpacer').style.height = `${y}px`;
   const head = $('riHead').offsetHeight; const top = Math.max(0, box.scrollTop - head); const bottom = top + box.clientHeight;
@@ -1719,7 +1802,7 @@ function riRow (e, k, top) {
   const thumb = n.kind === 'stack'
     ? `<span class="ri-fan">${((n.stack?.sample || []).slice(0, 3).map((x) => x.thumb ? `<img loading="lazy" src="${esc(asset(x.thumb))}" alt="">` : '<span class="ph"></span>').join('') || '<span class="ph"></span><span class="ph"></span><span class="ph"></span>')}<span class="cnt">${esc(n.stack?.count || 0)}</span></span>`
     : (() => { const t = riThumb(n); return t ? `<img loading="lazy" src="${esc(asset(t))}" alt="">` : '<span class="ph"></span>'; })();
-  const sub = n.kind === 'stack' ? `${esc(n.stack?.count || 0)} ${T('pagesWord')}${n.stack?.source ? ` · ${esc(n.stack.source)}` : ''}` : esc(loc(n.path) || '');
+  const sub = n.kind === 'stack' ? `${esc(n.stack?.count || 0)} ${pagesN(n.stack?.count || 0)}${n.stack?.source ? ` · ${esc(n.stack.source)}` : ''}` : esc(loc(n.path) || '');
   const cons = Object.values(n.captures?.[S.loc] || {}).reduce((k, c) => k + (c?.console_errors || 0), 0);
   const chips = bad.map((c) => `<span class="${critSt(c) === 'fail' ? '' : 'rv'}" title="${esc(c.text)}">${esc(c.id)}${c.counts ? `<i>${esc((c.counts.fail || 0) + (c.counts.needs_review || 0))}</i>` : ''}</span>`).join('');
   const crits = n.kind === 'stack' ? `${esc(n.stack?.summary?.pass || 0)}/${esc(n.stack?.count || 0)}` : s === 'skip' ? '—' : `${ok}/${crit.length}`;
@@ -1957,7 +2040,7 @@ function renderChrome () {
   $('appNav').querySelectorAll('[data-lang]').forEach((b) => { b.onclick = () => { if (b.dataset.lang !== UI) switchLang(b.dataset.lang); }; });
   document.querySelectorAll('[data-t]').forEach((el) => { el.textContent = T(el.dataset.t); });
   $('helpBtn').title = `${T('helpTitle')} (?)`; $('helpBtn').setAttribute('aria-label', T('helpTitle'));
-  $('hint').innerHTML = `<ul>${T('hint').split(' · ').map((x) => `<li>${x}</li>`).join('')}<li><span class="kbd">C</span> ${esc(T('keyComment'))}</li><li><span class="kbd">?</span> ${esc(T('keyHelp'))}</li></ul>`;
+  $('hint').innerHTML = `<ul>${T('hint').split(' · ').map((x) => `<li>${x}</li>`).join('')}<li><span class="kbd">C</span> ${esc(T('keyComment'))}</li><li><span class="kbd">D</span> ${esc(T('keyDev'))}</li><li><span class="kbd">?</span> ${esc(T('keyHelp'))}</li></ul>`;
   $('hint').querySelector('ul')?.insertAdjacentHTML('beforeend', rvHintItem()); // review mode (Q)
   const ib = $('inboxBtn');
   if (app?.user) { ib.hidden = false; ib.href = `/${app.org}/inbox`; ib.innerHTML = `<svg class="i" viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>${app.unread ? `<b>${esc(app.unread)}</b>` : ''}`; ib.title = 'Inbox'; ib.setAttribute('aria-label', `Inbox${app.unread ? ` (${app.unread})` : ''}`); }
@@ -1990,7 +2073,7 @@ function renderChrome () {
       <dt>${T('duration')}</dt><dd>${dur()}</dd></dl>${isDesign() ? '<div class="dvers" id="dvers"></div>' : ''}`;
   renderDesignBar();
   const order = screens().slice().sort((a, b) => a.col - b.col || a.lane - b.lane);
-  const stepLi = (n) => `<li><button data-step="${esc(n.id)}" class="st-${nodeSt(n)}"><span class="dot"></span><span>${n.kind === 'stack' ? `${ICON.stack} ` : ''}${esc(loc(n.title))}</span><span class="path">${n.kind === 'stack' ? `${esc(n.stack?.count || 0)} ${T('pagesWord')}` : esc(loc(n.path))}</span></button></li>`;
+  const stepLi = (n) => `<li><button data-step="${esc(n.id)}" class="st-${nodeSt(n)}"><span class="dot"></span><span>${n.kind === 'stack' ? `${ICON.stack} ` : ''}${esc(loc(n.title))}</span><span class="path">${n.kind === 'stack' ? `${esc(n.stack?.count || 0)} ${pagesN(n.stack?.count || 0)}` : esc(loc(n.path))}</span></button></li>`;
   $('steps').innerHTML = sessions().length
     ? sessions().map((k) => { const mine = order.filter((n) => n.session === k); if (!mine.length) return ''; const c = RUN.summary.by_session?.[k] || {}; return `<h3 data-sess="${esc(k)}" aria-pressed="${S.sess === k}" title="${esc(k)}"><i class="dot" style="background:${sessColor(k)}"></i>${esc(sessTitle(k))}${bar5(c)}</h3>${mine.map(stepLi).join('')}`; }).join('') + (order.some((n) => !n.session) ? order.filter((n) => !n.session).map(stepLi).join('') : '')
     : laneNamesOf().length > 1
@@ -2022,6 +2105,13 @@ const EVIDENCE = [
   [/^heading level skipped: (.+)$/, (m) => [`A heading level is skipped: ${m[1]}`, `Přeskočená úroveň nadpisu: ${m[1]}`]],
   [/^no main landmark$/, () => ['The page has no <main> area', 'Stránka nemá hlavní oblast <main>']],
   [/^duplicate ids: (.+)$/, (m) => [`Repeated ids: ${m[1]}`, `Opakovaná id: ${m[1]}`]],
+  [/^(\d+) of (\d+) focus stop\(s\) without a clear indicator: (.+)$/, (m) => [`${m[1]} of ${m[2]} tab stops show no clear focus: ${m[3]}`, `${m[1]} z ${m[2]} zastávek tabulátoru nemá zřetelný fokus: ${m[3]}`]],
+  [/^all (\d+) checked focus stop\(s\) show an indicator with at least 3:1 contrast$/, (m) => [`All ${m[1]} checked tab stops show a clear focus`, `Všechny kontrolované zastávky (${m[1]}) mají zřetelný fokus`]],
+  [/^Tab goes through all (\d+) stop\(s\) and leaves the page$/, (m) => [`Tab goes through all ${m[1]} stops and leaves the page`, `Tabulátor projde všechny zastávky (${m[1]}) a opustí stránku`]],
+  [/^skip link (.+)$/, (m) => [`Skip link ${m[1]}`, `Odkaz pro přeskočení ${m[1]}`]],
+  [/^(\d+) of (\d+) control\(s\) have no name in the accessibility tree: (.+)$/, (m) => [`${m[1]} of ${m[2]} controls have no name for screen readers: ${m[3]}`, `${m[1]} z ${m[2]} ovládacích prvků nemá pro čtečky název: ${m[3]}`]],
+  [/^all (\d+) control\(s\) in the accessibility tree have a name$/, (m) => [`All ${m[1]} controls have a name for screen readers`, `Všechny ovládací prvky (${m[1]}) mají pro čtečky název`]],
+  [/^roles and aria-\* attributes are valid$/, () => ['ARIA roles and attributes are valid', 'Role a atributy ARIA jsou platné']],
   [/^(\d+) text\(s\) below WCAG AA contrast: (.+)$/, (m) => [`${m[1]} text(s) with too little contrast: ${m[2]}`, `Texty s nízkým kontrastem (${m[1]}): ${m[2]}`]],
   [/^(\d+) texts meet WCAG AA contrast$/, (m) => [`All ${m[1]} texts have enough contrast`, `Všech ${m[1]} textů má dostatečný kontrast`]],
   [/^LCP (.+) since page load \(limit (.+)\)$/, (m) => [`The largest content appeared after ${m[1]} (limit ${m[2]})`, `Největší obsah se zobrazil za ${m[1]} (limit ${m[2]})`]],
@@ -2114,7 +2204,33 @@ function aiGauge (r) {
   const [lo, hi] = r.th || [0.15, 0.85];
   const pct = (x) => Math.round(x * 100);
   const line = r.verdict === 'pass' ? T('aiPass')(pct(r.score), pct(hi)) : r.verdict === 'fail' ? T('aiFail')(pct(r.score), pct(lo)) : T('aiUnsure')(pct(r.score), pct(lo), pct(hi));
-  return `<span class="gauge" role="img" aria-label="${esc(line)}"><i class="gauge__lo" style="width:${pct(lo)}%"></i><i class="gauge__hi" style="left:${pct(hi)}%"></i><b style="left:${pct(r.score)}%"></b></span><span class="how__line">${esc(line)}${r.via ? ` <span class="muted">· ${esc(T('aiVia')[r.via] || '')}</span>` : ''}</span>`;
+  return `<span class="gauge" role="img" aria-label="${esc(line)}"><i class="gauge__lo" style="width:${pct(lo)}%"></i><i class="gauge__hi" style="left:${pct(hi)}%"></i><b style="left:${pct(r.score)}%"></b></span><span class="how__line">${esc(line)}${r.via ? ` <span class="muted">· ${esc(T('aiVia')[r.via] || '')}</span>` : ''}</span>${aiReason(r)}`;
+}
+/* the evaluator's one sentence next to the score (#17); marked when it saw the screenshot */
+/* dashed boxes for ignored and moving regions, numbered tab stops when asked (step detail → Keyboard) */
+function overlayRegions (box, cap, v) {
+  const im = box.querySelector('img'); if (!im) return;
+  const place = () => {
+    box.querySelectorAll('.ignbox, .kbstop').forEach((e) => e.remove());
+    const k = im.clientWidth / (cap.size?.[0] || v.w);
+    const rect = (cls, r, title) => { const d = document.createElement('span'); d.className = cls; if (title) d.title = title; Object.assign(d.style, { left: `${r.x * k}px`, top: `${r.y * k}px`, width: `${Math.max(2, r.w * k)}px`, height: `${Math.max(2, r.h * k)}px` }); box.appendChild(d); return d; };
+    for (const r of cap.ignore || []) rect('ignbox', r, `${T('ignTitle')}${r.selector ? ': ' + r.selector : ''}`);
+    for (const r of cap.unstable || []) rect('ignbox unst', r, T('unstLead')(1));
+    if (S.kbShow && cap.keyboard) for (const s of cap.keyboard.stops || []) { if (s.hidden || !s.w) continue; const d = rect(`kbstop${s.focus && s.focus !== 'ok' ? ' bad' : ''}`, s, `${s.n} ${s.name || s.el}`); const i = document.createElement('i'); i.textContent = s.n; d.appendChild(i); }
+  };
+  im.complete ? place() : im.addEventListener('load', place);
+}
+/* Keyboard section of the step detail: the tab order with what is wrong at each stop, and a toggle for the overlay */
+function keyboardBlock (cap) {
+  const kb = cap?.keyboard; const ign = cap?.ignore?.length || 0; const unst = cap?.unstable?.length || 0;
+  if (!kb && !ign && !unst) return '';
+  const flag = (s) => s.hidden ? T('kbHidden') : s.focus === 'none' ? T('kbNone') : s.focus === 'weak' ? T('kbWeak')(s.contrast) : s.focus === 'obscured' ? T('kbCovered') : '';
+  const list = kb ? `<ol class="kb-list">${(kb.stops || []).slice(0, 12).map((s) => { const f = flag(s); return `<li class="${f ? 'bad' : ''}">${esc(s.name || s.el)}${f ? ` · ${esc(f)}` : ''}</li>`; }).join('')}</ol>` : '';
+  return `${kb ? `<div class="sec"><h4>${T('kbTitle')}</h4><p class="note">${esc(T('kbLead')(kb.total, kb.complete))}</p><button type="button" class="pr" id="kbToggle">${S.kbShow ? T('kbHide') : T('kbShow')}</button>${list}</div>` : ''}${ign || unst ? `<div class="sec"><h4>${T('ignTitle')}</h4>${ign ? `<p class="note">${esc(T('ignLead')(ign))}</p>` : ''}${unst ? `<p class="note">${esc(T('unstLead')(unst))}</p>` : ''}</div>` : ''}`;
+}
+function aiReason (r) {
+  if (!r.reason) return '';
+  return `<span class="how__why"><b>${T('aiWhy')}</b>${esc(r.reason)}${r.vision ? ` <span class="muted">· ${T('aiSaw')}</span>` : ''}</span>`;
 }
 function howBlock (c, r) {
   const k = c.check || {};
@@ -2205,18 +2321,22 @@ function openLb (id, vpName, opts = {}) {
   if (RUN.details_deferred) loadDetails();
   const n0 = byId(id); if (n0?.kind === 'stack') { openStack(id); return; }
   const n = n0; const list = n.item ? (S.itemList || [id]).map(byId).filter(Boolean) : S.mode === 'index' && S.riList?.includes(id) ? S.riList.map(byId) : flowOrder(), i = list.indexOf(n);
-  if (S.open !== id) { LIVE.insp = null; LIVE.anchor = null; LIVE.mode = null; }
+  if (S.open !== id) { LIVE.insp = null; LIVE.anchor = null; LIVE.mode = null; devReset(); }
   S.lbMode ||= isDesign() ? 'live' : 'shot';
   S.open = id; S.lbVp = vpName || (S.vp === 'mobile' ? mVp() : dVp())?.name || viewports()[0].name;
   if (n.item && !n.captures?.[S.loc]?.[S.lbVp]) S.lbVp = Object.keys(n.captures?.[S.loc] || {})[0] || S.lbVp; // stack pages: the captured viewport
   const v = viewports().find((x) => x.name === S.lbVp) || viewports()[0];
   const cap = n.captures?.[S.loc]?.[v.name];
+  // Dev mode stays on from step to step: on the live page where the frame helper runs, else on the screenshot
+  if (DEV.on && !devAvailable(cap)) { DEV.on = false; devReset(); }
+  if (DEV.on) { const shot = !devLive(cap); if (shot !== DEV.shot) devReset(); DEV.shot = shot; LIVE.mode = shot ? (LIVE.mode === 'dev' ? null : LIVE.mode) : 'dev'; }
+  if (!DEV.on && S.lbTab === 'dev') S.lbTab = 'overview';
   const s = nodeSt(n); const j = jevFor(n, v.name);
   const g = RUN.git || {};
   const lb = $('lb');
   const html = `<div class="lb__box">
     <div class="lb__stage">
-      <div class="lb__tools"><div class="seg" id="lbVp"></div><button class="btn" id="lbFocus" title="${esc(T('focusTitle'))} (F)" aria-pressed="${!!S.focus}">${ICON.focus}<span>${T('focus')}</span></button><div class="lb__more" id="lbMore">${isDesign() || liveSrc(cap) ? `<button class="btn" id="lbProto" title="${esc(T('protoTitle'))} (P)">${T('prototype')}</button>` : ''}${liveSrc(cap) || viewSrc(cap) ? `<div class="seg" id="lbMode"></div>` : ''}${(liveSrc(cap) && S.lbMode === 'live') || (viewSrc(cap) && S.lbMode === 'view') ? `<span id="lbLiveTools" class="share__row"></span>` : ''}${S.cmp ? `<div class="seg" id="lbCmpSeg"></div>` : ''}<span class="note">${v.w} × ${v.h}, ${cap?.platform && cap.platform !== 'electron' ? T('screenWord') : cap?.first_screen ? T('firstScreen') : T('fullPage')} · ${esc(S.loc)}</span><span class="spacer"></span><span class="note lb__hint">${S.cmp ? `${T('cmpTitle')} ${esc(cmpLabel())}` : T('hover')}</span></div><button class="icon-btn lb__moreBtn" id="lbMoreBtn" aria-expanded="false" aria-controls="lbMore" aria-label="${esc(T('moreTools'))}" title="${esc(T('moreTools'))}">${ICON.more}</button></div>
+      <div class="lb__tools"><div class="seg" id="lbVp"></div><button class="btn" id="lbFocus" title="${esc(T('focusTitle'))} (F)" aria-pressed="${!!S.focus}">${ICON.focus}<span>${T('focus')}</span></button><div class="lb__more" id="lbMore">${isDesign() || liveSrc(cap) ? `<button class="btn" id="lbProto" title="${esc(T('protoTitle'))} (P)">${T('prototype')}</button>` : ''}${devAvailable(cap) ? `<button class="btn" id="lbDev" aria-pressed="${DEV.on}" title="${esc(T('devTitle'))} (D)">${T('devMode')}</button>` : ''}${liveSrc(cap) || viewSrc(cap) ? `<div class="seg" id="lbMode"></div>` : ''}${(liveSrc(cap) && S.lbMode === 'live') || (viewSrc(cap) && S.lbMode === 'view') ? `<span id="lbLiveTools" class="share__row"></span>` : ''}${S.cmp ? `<div class="seg" id="lbCmpSeg"></div>` : ''}<span class="note">${v.w} × ${v.h}, ${cap?.platform && cap.platform !== 'electron' ? T('screenWord') : cap?.first_screen ? T('firstScreen') : T('fullPage')} · ${esc(S.loc)}</span><span class="spacer"></span><span class="note lb__hint">${S.cmp ? `${T('cmpTitle')} ${esc(cmpLabel())}` : T('hover')}</span></div><button class="icon-btn lb__moreBtn" id="lbMoreBtn" aria-expanded="false" aria-controls="lbMore" aria-label="${esc(T('moreTools'))}" title="${esc(T('moreTools'))}">${ICON.more}</button></div>
       <div class="lb__scroll" id="lbScroll">${(() => {
         const bn0 = S.cmp && cmpNode(n.id), bcap0 = bn0?.captures?.[S.loc]?.[v.name];
         if (S.lbMode === 'view' && viewSrc(cap) && !S.cmp) return `<p class="note" style="margin:0 0 8px">${T('htmlViewNote')}</p>` + liveStage(cap, v, 'lbFrame', RUN.live_bases, true);
@@ -2233,13 +2353,14 @@ function openLb (id, vpName, opts = {}) {
     <div class="lb__side" id="lbSide">
       <div class="lb__grab" id="lbGrab" role="button" tabindex="0" aria-controls="lbSide" aria-expanded="${(S.lbSheet || 'peek') !== 'peek'}" aria-label="${esc(T('sheetHandle'))}"></div>
       <div class="lb__head">
-        <div class="lb__row"><span class="kind">${ICON[n.kind]}</span><span class="badge st-${s}">${MARK[s]} ${T(s)}</span><span class="note">${n.item ? T('pageWord') : T('step')} ${i + 1} ${T('of')} ${list.length}</span>${n.item ? `<button class="btn" id="lbBack">${ICON.stack} ${T('backToIndex')}</button>` : ''}
+        <div class="lb__row"><span class="kind">${ICON[n.kind]}</span><span class="lb__meta"><span class="badge st-${s}">${MARK[s]} ${T(s)}</span><span class="note">${n.item ? T('pageWord') : T('step')} ${i + 1} ${T('of')} ${list.length}</span>${n.item ? `<button class="btn" id="lbBack">${ICON.stack} ${T('backToIndex')}</button>` : ''}</span>
           <span class="lb__nav">${APP() ? `<button class="btn c-jump" id="lbComments" title="${esc(T('commentsTitle'))} (C)">${ICON.comment}${openCount('step', n.id) ? ` ${openCount('step', n.id)}` : ''}</button>` : ''}<button class="btn" id="lbLink" title="${T('copyLink')}">${ICON.external} <span class="lb__linkTxt">${T('copyLink')}</span></button><button class="icon-btn" id="lbPrev" aria-label="Previous" ${i === 0 ? 'disabled' : ''}>${ICON.prev}</button><button class="icon-btn" id="lbNext" aria-label="Next" ${i === list.length - 1 ? 'disabled' : ''}>${ICON.next}</button><button class="icon-btn" id="lbClose" aria-label="Close">${ICON.close}</button></span></div>
         <h3 id="lbTitle">${esc(loc(n.title))}</h3>
         <div class="node__path">${n.session ? sessChip(n.session) + ' · ' : ''}${cap?.http_status >= 300 ? `<span class="http ${cap.http_status >= 500 ? 'http--5' : ''}" title="HTTP ${esc(cap.http_status)}">${esc(cap.http_status)}</span>` : ''}${esc(cap?.live ? cap.live.entry : cap?.url || loc(n.path))}</div>
         ${sameAsCmp(n) ? `<p class="note">${T('unchangedSince')} ${esc(cmpLabel())}</p>` : ''}${cap?.live?.stale_capture ? `<p class="note">${T('staleCapture')}</p>` : ''}
       </div>
-      <div class="lbtabs" role="tablist">${[['overview', T('tabOverview')], ['page', T('tabPage')], ['tech', T('tabTech')]].map(([k, l]) => `<button role="tab" data-lbtab="${k}" aria-selected="${(S.lbTab || 'overview') === k}">${l}</button>`).join('')}</div>
+      <div class="lbtabs" role="tablist">${[...(DEV.on ? [['dev', T('devTab')]] : []), ['overview', T('tabOverview')], ['page', T('tabPage')], ['tech', T('tabTech')]].map(([k, l]) => `<button role="tab" data-lbtab="${k}" aria-selected="${(S.lbTab || 'overview') === k}">${l}</button>`).join('')}</div>
+      ${DEV.on ? `<div class="lbtab" data-pane="dev" ${S.lbTab === 'dev' ? '' : 'hidden'}>${devPaneHtml()}</div>` : ''}
       <div class="lbtab" data-pane="overview" ${(S.lbTab || 'overview') === 'overview' ? '' : 'hidden'}>
       <div id="lbSideTop"></div>${inspectorHtml()}
       ${stepStatusHtml(n)}
@@ -2253,6 +2374,7 @@ function openLb (id, vpName, opts = {}) {
       </div>
       <div class="lbtab" data-pane="page" ${S.lbTab === 'page' ? '' : 'hidden'}>
       ${sigSection(cap)}
+      ${keyboardBlock(cap)}
       ${metaSection(n, cap, v)}
       ${(n.attachments || []).length ? `<div class="sec"><h4>${T('attachments')}</h4><div class="files">${n.attachments.map((a) => `<a class="file" href="${esc(asset(a.file))}" target="_blank" rel="noopener"><span class="file__prev"><img src="${esc(asset(a.file))}" alt="" style="max-width:100%;max-height:74px"></span><span class="file__name">${ICON.crop}${esc(a.title)}${a.locale ? ` · ${esc(a.locale)}` : ''}</span></a>`).join('')}</div></div>` : ''}
       ${cap?.tree ? `<details class="sec" id="treeSec"><summary><h4>${ICON.html} ${T('uiTree')}</h4></summary><p class="note" id="treeNote">${T('treeHint')}</p><input type="search" class="tree-q" id="treeQ" placeholder="${esc(T('treeSearch'))}"><div class="tree" id="treeBody"></div></details>` : ''}
@@ -2273,6 +2395,7 @@ function openLb (id, vpName, opts = {}) {
   wireLbOnce(lb);
   renderFocusBar(lb, n, v, cap, list, i);
   lb.hidden = false;
+  lbSheetFit(); LB_RO?.disconnect(); LB_RO?.observe(lb.querySelector('.lb__head'));
   fitLive(); requestAnimationFrame(fitLive);
   setTimeout(() => presenceView(true), 0);
   setHash({ step: id, loc: S.loc, vp: v.name, focus: S.focus ? '1' : null });
@@ -2288,14 +2411,21 @@ function openLb (id, vpName, opts = {}) {
   if ($('lbMode')) seg($('lbMode'), [...(liveSrc(cap) ? [['live', T('liveMode')]] : []), ...(viewSrc(cap) ? [['view', T('htmlView')]] : []), ['shot', T('shotMode')]], S.lbMode, (m) => { S.lbMode = m; LIVE.mode = null; openLb(id, v.name); });
   if ($('lbLiveTools')) renderLiveTools();
   if ($('lbProto')) $('lbProto').onclick = () => ptOpen(id, v.name);
-  wireStepStatus(n); wireCopyCss();
+  if ($('lbDev')) $('lbDev').onclick = () => setDev(!DEV.on);
+  wireStepStatus(n); wireCopyCss(); wireDev();
+  if (DEV.on && DEV.shot) {
+    const im = $('lbImg')?.querySelector('img');
+    loadShotSpec(cap).then(() => { if (S.open !== id) return; if (im && !im.complete) im.addEventListener('load', drawShot, { once: true }); else drawShot(); renderDev(); });
+  }
   // pins of comments made on elements, drawn over the screenshot too
   const pimg = $('lbImg');
+  if (pimg && cap) overlayRegions(pimg, cap, v);
+  if ($('kbToggle')) $('kbToggle').onclick = () => { S.kbShow = !S.kbShow; $('kbToggle').textContent = S.kbShow ? T('kbHide') : T('kbShow'); overlayRegions(pimg, cap, v); };
   if (pimg) { const place = () => { const k = pimg.querySelector('img').clientWidth / (cap?.size?.[0] || v.w); for (const p of pinsFor(n, v.name)) { if (!p.box) continue; const d = document.createElement('span'); d.className = 'pinmark'; d.textContent = p.n; Object.assign(d.style, { left: `${(p.box[0] + p.box[2]) * k}px`, top: `${p.box[1] * k}px`, opacity: p.resolved ? 0.5 : 1 }); pimg.appendChild(d); } }; const im = pimg.querySelector('img'); if (im) im.complete ? place() : im.addEventListener('load', place); }
   if (S.cmp) {
     if ($('lbCmpSeg')) seg($('lbCmpSeg'), [['side', T('cmpSide')], ['diff', T('cmpDiff')]], S.lbCmp, (m) => { S.lbCmp = m; openLb(id, v.name); });
     const bcap = cmpNode(n.id)?.captures?.[S.loc]?.[v.name];
-    if (cap && bcap) pixelDiff(`${n.id}|${S.loc}|${v.name}`, asset(cap.image || cap.png), S.cmp.base + (bcap.image || bcap.png), Math.min(1000, v.w)).then((r) => {
+    if (cap && bcap) pixelDiff(`${n.id}|${S.loc}|${v.name}`, asset(cap.image || cap.png), S.cmp.base + (bcap.image || bcap.png), Math.min(1000, v.w), ignOf(cap, bcap)).then((r) => {
       const px = $('lbPx'); if (px) { px.innerHTML = `<span class="pxd ${pxClass(r.ratio)}">◐ ${pxText(r.ratio)}</span>`; }
       const d = $('lbDiff'); if (d) { d.innerHTML = ''; d.appendChild(r.canvas); }
     }).catch(() => { const px = $('lbPx'); if (px) px.textContent = T('pxUnavail'); });
@@ -2362,9 +2492,20 @@ function openLb (id, vpName, opts = {}) {
     if (li) { const im = img?.querySelector('img'); const go = () => setTimeout(() => li.click(), 60); im && !im.complete ? im.addEventListener('load', go, { once: true }) : go(); }
   }
 }
-function closeLb () { const lb = $('lb'); lb.hidden = true; lb.classList.remove('is-focus', 'is-idle'); clearTimeout(FX.timer); S.open = null; S.focus = false; LIVE.mode = null; LIVE.insp = null; setHash(null); presenceView(); }
+function closeLb () { DEV.on = false; devReset(); if (S.lbTab === 'dev') S.lbTab = 'overview'; const lb = $('lb'); lb.hidden = true; lb.classList.remove('is-focus', 'is-idle'); clearTimeout(FX.timer); S.open = null; S.focus = false; LIVE.mode = null; LIVE.insp = null; setHash(null); presenceView(); }
 const lbPhone = () => matchMedia('(max-width:700px)').matches;
 function closeLbMore () { const m = $('lbMore'); if (!m) return; m.classList.remove('is-open'); $('lbMoreBtn')?.setAttribute('aria-expanded', 'false'); }
+/** Phone sheet geometry: the collapsed sheet shows the whole header row and one line of the title (the row wraps
+    when a page has "back to index"), and the tabs stick right under the header instead of over it. */
+function lbSheetFit () {
+  const lb = $('lb'), box = lb.querySelector('.lb__box'), head = lb.querySelector('.lb__head'), side = $('lbSide'); if (!box || !head || !side) return;
+  if (!lbPhone() || S.focus) { box.style.removeProperty('--peek'); side.style.removeProperty('--lbhead'); return; }
+  const row = head.querySelector('.lb__row'), h3 = head.querySelector('h3');
+  const line = h3 ? parseFloat(getComputedStyle(h3).lineHeight) || 20 : 20;
+  box.style.setProperty('--peek', `calc(${Math.max(98, Math.ceil(16 + (row?.offsetHeight || 32) + 4 + line + 10))}px + env(safe-area-inset-bottom))`);
+  side.style.setProperty('--lbhead', `${head.offsetHeight}px`);
+}
+const LB_RO = typeof ResizeObserver === 'function' ? new ResizeObserver(() => lbSheetFit()) : null;
 /** The phone bottom sheet of the detail: peek (title and status), half, full. */
 function setSheet (st) {
   S.lbSheet = st; $('lb').dataset.sheet = st;
@@ -2376,7 +2517,7 @@ function setSheet (st) {
 function setFocus (on) {
   if (!S.open) return;
   S.focus = !!on; closeLbMore();
-  if (on) { C.pinMode = false; LIVE.mode = null; toFrame({ type: 'qawalk:mode', mode: null }); }
+  if (on) { C.pinMode = false; LIVE.mode = null; DEV.on = false; devReset(); if (S.lbTab === 'dev') S.lbTab = 'overview'; toFrame({ type: 'qawalk:mode', mode: null }); }
   openLb(S.open, S.lbVp, { keepFrame: true });
 }
 const FX = { timer: null, over: false };
@@ -2503,7 +2644,7 @@ function renderReplay () {
     foot = '';
   } else if (n.kind === 'stack') {
     const st = n.stack || { sample: [], summary: {} };
-    stage = `<div class="rp__decision"><div class="seg-label">${ICON.stack} ${esc(st.count)} ${T('pagesWord')}</div><h3>${esc(loc(n.title))}</h3><div class="stack-fan" style="max-width:520px;height:220px;margin:12px auto">${(st.sample || []).slice(0, 3).map((x) => x.thumb ? `<img src="${esc(asset(x.thumb))}" alt="" style="height:180px">` : '<span class="ph" style="height:180px"></span>').join('')}</div><p class="note">${['pass', 'partial', 'fail', 'skip'].filter((k) => st.summary[k]).map((k) => `${MARK[k]} ${T(k)} ${st.summary[k]}`).join(' · ')}</p><button class="btn btn--primary" data-stack-open="${esc(n.id)}">${T('openIndex')}</button></div>`;
+    stage = `<div class="rp__decision"><div class="seg-label">${ICON.stack} ${esc(st.count)} ${pagesN(st.count)}</div><h3>${esc(loc(n.title))}</h3><div class="stack-fan" style="max-width:520px;height:220px;margin:12px auto">${(st.sample || []).slice(0, 3).map((x) => x.thumb ? `<img src="${esc(asset(x.thumb))}" alt="" style="height:180px">` : '<span class="ph" style="height:180px"></span>').join('')}</div><p class="note">${['pass', 'partial', 'fail', 'skip'].filter((k) => st.summary[k]).map((k) => `${MARK[k]} ${T(k)} ${st.summary[k]}`).join(' · ')}</p><button class="btn btn--primary" data-stack-open="${esc(n.id)}">${T('openIndex')}</button></div>`;
     foot = opts.length ? `${optBtn(opts[0], true)}${opts.length > 1 ? `<span class="rp__alts">${T('rpOr')} ${opts.slice(1).map((o) => optBtn(o, false)).join('')}</span>` : ''}` : `<span class="note">${T('rpEnd')}</span>`;
 } else {
     stage = cap ? `<div class="lb__img ${v.mobile ? 'lb__img--m' : ''}" style="max-width:${v.mobile ? v.w + 16 : v.w}px;width:100%"><img src="${esc(asset(cap.image || cap.png))}" alt="${esc(loc(n.title))}"></div>` : `<p class="lb__empty">${T('notReached')}</p>`;
@@ -2543,7 +2684,7 @@ function rpKey (e) {
 /* The run's problems, sorted by what to do about them: what failed (with the reason in words), what a person
    should decide (AI unsure or not evaluated) and screens whose quick signals look off. */
 function whyOf (n, x) {
-  if (x.counts) return `${(x.counts.fail || 0) + (x.counts.needs_review || 0)}/${n.stack.count} ${T('pagesWord')}`;
+  if (x.counts) return `${(x.counts.fail || 0) + (x.counts.needs_review || 0)}/${n.stack.count} ${pagesN(n.stack.count)}`;
   const cells = viewports().map((v) => ({ v, r: x.by_locale?.[S.loc]?.[v.name] || {} })).filter(({ r }) => r.verdict && r.verdict !== 'pass' && r.verdict !== 'not_reached');
   const c = cells.find(({ r }) => r.verdict === 'fail') || cells[0];
   if (!c) return x.evidence || '';
@@ -2831,7 +2972,10 @@ addEventListener('message', (e) => {
     if (m.type === 'qawalk:key') ptKey({ key: String(m.key), preventDefault () {} });
     return;
   }
-  if (m.type === 'qawalk:ready' && n) { toFrame({ type: 'qawalk:pins', pins: pinsFor(n, S.lbVp) }); if (LIVE.mode) toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); }
+  if (typeof m.type === 'string' && m.type.startsWith('qawalk:dev-')) { if (DEV.on && !DEV.shot) devMessage(m); return; }
+  // keys pressed while the page has focus: Dev mode (D, M, Esc)
+  if (m.type === 'qawalk:key' && !$('lb').hidden) { devKey(String(m.key).slice(0, 12), false); return; }
+  if (m.type === 'qawalk:ready' && n) { toFrame({ type: 'qawalk:pins', pins: pinsFor(n, S.lbVp) }); if (LIVE.mode) toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); if (LIVE.mode === 'dev') { DEV.spec = DEV.base = DEV.measure = null; DEV.usage = null; toFrame({ type: 'qawalk:dev-usage' }); renderDev(); } }
   if (m.type === 'qawalk:go' && typeof m.node === 'string' && byId(m.node)) {
     toast(`${T('prototypeTo')} ${loc(byId(m.node).title)}`); openLb(m.node, S.lbVp);
     // a link to a page inside the step's folder opens that page in the live frame, not the step's entry
@@ -2882,8 +3026,319 @@ function wireCopyCss () {
 function renderLiveTools () {
   const t = $('lbLiveTools'); if (!t) return;
   t.innerHTML = `<button class="btn" id="lbInspect" aria-pressed="${LIVE.mode === 'inspect'}">${T('inspect')}</button>${canWrite() ? `<button class="btn" id="lbPin" aria-pressed="${LIVE.mode === 'pick'}">${T('pinComment')}</button>` : ''}`;
-  $('lbInspect').onclick = () => { LIVE.mode = LIVE.mode === 'inspect' ? null : 'inspect'; toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); if (!LIVE.mode) { LIVE.insp = null; $('inspSec')?.remove(); } renderLiveTools(); presenceSend({ type: 'editing', step: S.open, on: !!LIVE.mode }); };
-  const pin = $('lbPin'); if (pin) pin.onclick = () => { LIVE.mode = LIVE.mode === 'pick' ? null : 'pick'; toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); if (LIVE.mode) toast(T('pickHint')); renderLiveTools(); };
+  const devOff = () => { if (!DEV.on) return; DEV.on = false; devReset(); if (S.lbTab === 'dev') S.lbTab = 'overview'; openLb(S.open, S.lbVp, { keepFrame: true }); };
+  $('lbInspect').onclick = () => { devOff(); LIVE.mode = LIVE.mode === 'inspect' ? null : 'inspect'; toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); if (!LIVE.mode) { LIVE.insp = null; $('inspSec')?.remove(); } renderLiveTools(); presenceSend({ type: 'editing', step: S.open, on: !!LIVE.mode }); };
+  const pin = $('lbPin'); if (pin) pin.onclick = () => { devOff(); LIVE.mode = LIVE.mode === 'pick' ? null : 'pick'; toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); if (LIVE.mode) toast(T('pickHint')); renderLiveTools(); };
+}
+// ---- Dev mode (#42): measurements, tokens, states and assets of design steps, for developers and their agents ----
+// Live steps: the frame helper runs the spec engine (src/lib/devspec.mjs) in the page and answers qawalk:dev-*.
+// Screenshots: the step spec the CLI captured with the same engine (steps/<step>/<locale>/<viewport>.spec.json).
+const DEV = { on: false, tab: 'el', spec: null, base: null, measure: null, measureMode: false, usage: null, hl: null, shot: false, shotSpec: undefined, shotKey: null, shotSel: -1, shotTarget: -1 };
+const DEV_STATES = ['default', 'hover', 'focus', 'active', 'disabled'];
+const DEV_GROUPS = ['type', 'color', 'space', 'size', 'shape', 'layout'];
+const HEX = /^#[0-9a-f]{3,8}$/i;
+const devCapOf = () => { const n = S.open && byId(S.open); return n?.captures?.[S.loc]?.[S.lbVp] || null; };
+/** Dev mode works on a live step (frame helper on the service) or on a capture with a spec or boxes. */
+function devAvailable (cap) { return !!cap && (isDesign() || !!liveSrc(cap) || !!viewSrc(cap) || !!cap.spec || !!cap.spec_inline); }
+const devLive = (cap = devCapOf()) => !!APP() && ['live', 'view'].includes(S.lbMode) && !S.cmp && !!(S.lbMode === 'view' ? viewSrc(cap) : liveSrc(cap));
+function devReset () { Object.assign(DEV, { spec: null, base: null, measure: null, measureMode: false, usage: null, hl: null, shotSel: -1, shotTarget: -1 }); }
+function setDev (on) {
+  if (!S.open) return;
+  const cap = devCapOf();
+  if (on && !devAvailable(cap)) return;
+  DEV.on = !!on; devReset();
+  if (on && S.focus) S.focus = false; // the inspector lives in the side panel
+  if (on && !APP() && S.lbMode === 'live') { S.lbMode = 'shot'; toast(T('devLocalLive')); } // from disk the live page has no helper
+  DEV.shot = on && !devLive(cap);
+  if (on) { LIVE.insp = null; C.pinMode = false; }
+  LIVE.mode = on && !DEV.shot ? 'dev' : LIVE.mode === 'dev' ? null : LIVE.mode;
+  if (on) S.lbTab = 'dev'; else if (S.lbTab === 'dev') S.lbTab = 'overview';
+  openLb(S.open, S.lbVp, { keepFrame: true });
+  $('lbDev')?.setAttribute('aria-pressed', String(DEV.on)); // a kept frame keeps its tool bar too
+  if (!DEV.on) renderLiveTools();
+  toFrame({ type: 'qawalk:mode', mode: LIVE.mode });
+  if (on && !DEV.shot) toFrame({ type: 'qawalk:dev-usage' });
+  if (on && lbPhone() && S.lbSheet === 'peek') setSheet('half');
+  presenceSend({ type: 'editing', step: S.open, on: !!on });
+}
+/** Escape in Dev mode: first the measurement, then the selection, then the mode itself. */
+function devEsc () {
+  if (DEV.measureMode || DEV.measure || DEV.shotTarget >= 0) { devMeasureMode(false); DEV.measure = null; DEV.shotTarget = -1; drawShot(); renderDev(); return; }
+  if (DEV.spec) { DEV.spec = DEV.base = null; DEV.shotSel = -1; toFrame({ type: 'qawalk:dev-clear' }); drawShot(); renderDev(); return; }
+  setDev(false);
+}
+function devMeasureMode (on) { DEV.measureMode = !!on; toFrame({ type: 'qawalk:dev-measure-mode', on: DEV.measureMode }); if (!on) { DEV.measure = null; DEV.shotTarget = -1; drawShot(); } renderDev(); }
+function devNav (dir) { if (DEV.shot) shotNav(dir); else toFrame({ type: 'qawalk:dev-nav', dir }); }
+
+// ---- data from the frame: never trusted, every field cut to size ----
+const sStr = (x, n) => typeof x === 'string' ? x.slice(0, n) : x == null ? '' : String(x).slice(0, n);
+const sNum = (x) => Number.isFinite(+x) ? +x : 0;
+function sTok (t) {
+  if (!t || typeof t !== 'object' || !['exact', 'nearest', 'none'].includes(t.m)) return null;
+  const o = { m: t.m };
+  for (const [k, n] of [['name', 160], ['value', 200], ['mode', 40], ['via', 80], ['hard', 200]]) if (t[k] != null && t[k] !== false) o[k] = sStr(typeof t[k] === 'object' ? JSON.stringify(t[k]) : t[k], n);
+  return o;
+}
+function sanitizeSpec (s) {
+  if (!s || typeof s !== 'object') return null;
+  const rows = (Array.isArray(s.rows) ? s.rows : []).slice(0, 60).filter((r) => r && DEV_GROUPS.includes(r.g)).map((r) => ({ g: r.g, prop: sStr(r.prop, 40), value: sStr(r.value, 300), tok: sTok(r.tok), ...(Array.isArray(r.parts) ? { parts: r.parts.slice(0, 4).map((p) => ({ value: sStr(p?.value, 60), tok: sTok(p?.tok) })) } : {}) }));
+  const c = s.contrast && typeof s.contrast === 'object' ? { ratio: sNum(s.contrast.ratio), aa: !!s.contrast.aa, aaa: !!s.contrast.aaa, large: !!s.contrast.large, approx: !!s.contrast.approx, fg: HEX.test(s.contrast.fg) ? s.contrast.fg : null, bg: HEX.test(s.contrast.bg) ? s.contrast.bg : null } : null;
+  const preview = (p) => typeof p === 'string' && p.length < 60000 && /^data:image\/svg\+xml;base64,[A-Za-z0-9+/=]+$/.test(p) ? p : null;
+  return {
+    sel: sStr(s.sel, 500), tag: sStr(s.tag, 20), role: s.role ? sStr(s.role, 40) : null, name: sStr(s.name, 80),
+    box: Array.isArray(s.box) ? s.box.slice(0, 4).map(sNum) : [0, 0, 0, 0], state: DEV_STATES.includes(s.state) ? s.state : 'default',
+    rows, contrast: c, states: (Array.isArray(s.states) ? s.states : []).filter((x) => DEV_STATES.includes(x)),
+    parent: s.parent && typeof s.parent === 'object' ? { sel: sStr(s.parent.sel, 500), tag: sStr(s.parent.tag, 20), inset: Array.isArray(s.parent.inset) ? s.parent.inset.slice(0, 4).map(sNum) : null } : null,
+    assets: (Array.isArray(s.assets) ? s.assets : []).slice(0, 30).map((a, i) => ({ i: Number.isInteger(a?.i) ? a.i : i, kind: ['img', 'svg', 'background'].includes(a?.kind) ? a.kind : 'img', name: sStr(a?.name, 80).replace(/[^\w.\- ]+/g, '-') || 'asset', size: Array.isArray(a?.size) ? a.size.slice(0, 2).map(sNum) : null, alt: a?.alt ? sStr(a.alt, 120) : null, preview: preview(a?.preview) }))
+  };
+}
+function sanitizeUsage (u) {
+  if (!u || typeof u !== 'object') return null;
+  const used = {}; for (const [k, v] of Object.entries(u.used || {}).slice(0, 600)) used[sStr(k, 160)] = sNum(v);
+  return {
+    used,
+    off: (Array.isArray(u.off) ? u.off : []).slice(0, 60).map((o) => ({ prop: sStr(o?.prop, 40), value: sStr(o?.value, 200), count: sNum(o?.count), nearest: o?.nearest ? sStr(o.nearest, 160) : null, sel: sStr(o?.sel, 300) })),
+    hard: (Array.isArray(u.hard) ? u.hard : []).slice(0, 60).map((o) => ({ sel: sStr(o?.sel, 160), prop: sStr(o?.prop, 40), value: sStr(o?.value, 200), token: sStr(o?.token, 160) })),
+    all: (Array.isArray(u.all) ? u.all : []).slice(0, 600).map((t) => ({ name: sStr(t?.name, 160), value: sStr(t?.value, 120), kind: sStr(t?.kind, 10), mode: t?.mode ? sStr(t.mode, 40) : null })),
+    modes: (Array.isArray(u.modes) ? u.modes : []).slice(0, 10).map((m) => sStr(m, 40))
+  };
+}
+
+// ---- screenshots: the captured spec drawn over the image ----
+const SPEC_GROUP = (p) => /^(font|line-height|letter-spacing|text-)/.test(p) ? 'type' : /color$|^background/.test(p) ? 'color' : /^(padding|margin|gap|row-gap|column-gap)$/.test(p) ? 'space' : /^(border-radius|border-width|box-shadow|opacity)$/.test(p) ? 'shape' : /^(display|flex|justify|align|grid|position)/.test(p) ? 'layout' : 'size';
+/** A spec element (compact styles) in the inspector's form. */
+function specElView (e, list) {
+  const tokOf = (s) => s.token ? { m: 'exact', name: s.token, value: s.value, ...(s.mode ? { mode: s.mode } : {}), ...(s.hard ? { hard: s.value } : {}) } : s.nearest ? { m: 'nearest', name: s.nearest } : s.token === null ? { m: 'none' } : null;
+  const rows = Object.entries(e.styles || {}).map(([prop, s]) => {
+    const parts = String(s.value).split(' ');
+    const names = String(s.token || s.nearest || '').split(' ');
+    const multi = parts.length > 1 && names.length === parts.length && /^(padding|margin|border-radius|border-width)$/.test(prop);
+    return { g: SPEC_GROUP(prop), prop, value: String(s.value), tok: multi ? null : tokOf(s), ...(multi ? { parts: parts.map((v, i) => ({ value: v, tok: names[i] === '0' ? null : s.token ? { m: 'exact', name: names[i] } : { m: 'nearest', name: names[i] } })) } : {}) };
+  });
+  if (e.box) rows.push({ g: 'size', prop: 'width', value: `${e.box[2]}px` }, { g: 'size', prop: 'height', value: `${e.box[3]}px` });
+  const p = e.parent >= 0 ? list[e.parent] : null;
+  const inset = p && e.box && p.box ? [e.box[1] - p.box[1], p.box[0] + p.box[2] - e.box[0] - e.box[2], p.box[1] + p.box[3] - e.box[1] - e.box[3], e.box[0] - p.box[0]] : null;
+  return sanitizeSpec({ sel: e.sel, tag: e.tag, role: e.role, name: e.name, box: e.box, rows, contrast: e.contrast ? { ratio: e.contrast.ratio, aa: e.contrast.aa } : null, states: [], parent: p ? { sel: p.sel, tag: p.tag, inset } : null, assets: [] });
+}
+async function loadShotSpec (cap) {
+  const key = `${S.open}|${S.loc}|${S.lbVp}`;
+  if (DEV.shotKey === key) return DEV.shotSpec;
+  DEV.shotKey = key; DEV.shotSpec = null;
+  if (cap?.spec_inline) DEV.shotSpec = cap.spec_inline;
+  else if (cap?.spec && APP()) { try { const r = await fetch(asset(cap.spec), { credentials: 'same-origin' }); if (r.ok) DEV.shotSpec = await r.json(); } catch {} }
+  if (DEV.shotSpec && !Array.isArray(DEV.shotSpec.elements)) DEV.shotSpec = null;
+  return DEV.shotSpec;
+}
+/** Elements to pick on a screenshot: the spec's, else the criteria boxes the capture recorded. */
+function shotElements (cap) {
+  if (DEV.shotSpec) return DEV.shotSpec.elements.filter((e) => Array.isArray(e.box)).slice(0, 400);
+  return Object.entries(cap?.boxes || {}).flatMap(([id, list]) => (list || []).map((b) => ({ i: -1, parent: -1, tag: id, sel: id, box: [b.x, b.y, b.w, b.h], styles: {} }))).filter((e) => e.box[2] > 0 && e.box[3] > 0);
+}
+function shotGaps (a, b) {
+  const R = (x) => ({ l: x[0], t: x[1], r: x[0] + x[2], b: x[1] + x[3] });
+  const A = R(a), B = R(b), inside = (o, i) => i.l >= o.l && i.r <= o.r && i.t >= o.t && i.b <= o.b;
+  if (inside(B, A) || inside(A, B)) { const [o, i] = inside(B, A) ? [B, A] : [A, B]; return { inside: true, d: { top: i.t - o.t, right: o.r - i.r, bottom: o.b - i.b, left: i.l - o.l } }; }
+  const d = {};
+  if (B.l >= A.r) d.right = B.l - A.r; else if (A.l >= B.r) d.left = A.l - B.r;
+  if (B.t >= A.b) d.bottom = B.t - A.b; else if (A.t >= B.b) d.top = A.t - B.b;
+  return { inside: false, d };
+}
+function drawShot () {
+  const host = $('lbImg'); if (!host) return;
+  host.querySelector('.devshot')?.remove();
+  if (!DEV.on || !DEV.shot) return;
+  const cap = devCapOf(), img = host.querySelector('img'); if (!img || !cap) return;
+  const k = img.clientWidth / (cap.size?.[0] || img.naturalWidth || 1);
+  const els = shotElements(cap);
+  const layer = document.createElement('div'); layer.className = 'devshot';
+  Object.assign(layer.style, { left: `${img.offsetLeft}px`, top: `${img.offsetTop}px`, width: `${img.clientWidth}px`, height: `${img.clientHeight}px` });
+  const box = (b, cls, label) => { const d = document.createElement('div'); d.className = cls; Object.assign(d.style, { left: `${b[0] * k}px`, top: `${b[1] * k}px`, width: `${b[2] * k}px`, height: `${b[3] * k}px` }); if (label) { const t = document.createElement('span'); t.textContent = label; d.appendChild(t); } layer.appendChild(d); };
+  const sel = els[DEV.shotSel], tgt = els[DEV.shotTarget];
+  if (DEV.hl) for (const e of els) { const hit = Object.entries(e.styles || {}).some(([p, s]) => DEV.hl.token ? String(s.token || '').split(' ').includes(DEV.hl.token) : p === DEV.hl.prop && s.value === DEV.hl.value); if (hit) box(e.box, 'devshot__hl'); }
+  if (tgt) box(tgt.box, 'devshot__tgt');
+  if (sel) box(sel.box, 'devshot__sel', `${sel.box[2]} × ${sel.box[3]}`);
+  const hover = document.createElement('div'); hover.className = 'devshot__hov'; hover.hidden = true; const hl = document.createElement('span'); hover.appendChild(hl); layer.appendChild(hover);
+  const at = (ev) => { const r = layer.getBoundingClientRect(), x = (ev.clientX - r.left) / k, y = (ev.clientY - r.top) / k; let best = -1, area = Infinity; els.forEach((e, i) => { const [bx, by, bw, bh] = e.box; if (x >= bx && x <= bx + bw && y >= by && y <= by + bh && bw * bh < area) { area = bw * bh; best = i; } }); return best; };
+  layer.addEventListener('mousemove', (ev) => {
+    const i = at(ev);
+    if (i >= 0 && DEV.shotSel >= 0 && i !== DEV.shotSel && (ev.altKey || DEV.measureMode)) { if (i !== DEV.shotTarget) shotMeasure(i); hover.hidden = true; return; }
+    if (i < 0) { hover.hidden = true; return; }
+    const b = els[i].box; Object.assign(hover.style, { left: `${b[0] * k}px`, top: `${b[1] * k}px`, width: `${b[2] * k}px`, height: `${b[3] * k}px` }); hl.textContent = `${els[i].tag} · ${b[2]} × ${b[3]}`; hover.hidden = false;
+  });
+  layer.addEventListener('mouseleave', () => { hover.hidden = true; });
+  layer.addEventListener('click', (ev) => { const i = at(ev); if (i < 0) return; if (DEV.shotSel >= 0 && (ev.altKey || DEV.measureMode)) { shotMeasure(i); return; } shotSelect(i); });
+  host.appendChild(layer);
+}
+function shotSelect (i) {
+  const els = shotElements(devCapOf()); if (!els[i]) return;
+  DEV.shotSel = i; DEV.shotTarget = -1; DEV.measure = null;
+  DEV.spec = DEV.base = specElView(els[i], DEV.shotSpec?.elements || els);
+  if (lbPhone() && S.lbSheet === 'peek') setSheet('half');
+  drawShot(); renderDev();
+}
+function shotMeasure (i) {
+  const els = shotElements(devCapOf()); const a = els[DEV.shotSel], b = els[i]; if (!a || !b) return;
+  DEV.shotTarget = i; const g = shotGaps(a.box, b.box);
+  DEV.measure = { target: { sel: b.sel, tag: b.tag, name: b.name || '' }, inside: g.inside, d: g.d };
+  drawShot(); renderDev();
+}
+function shotNav (dir) {
+  const els = shotElements(devCapOf()); if (!els.length) return;
+  const cur = els[DEV.shotSel];
+  let i = -1;
+  if (!cur || dir === 'start') i = Math.max(0, els.findIndex((e) => e.role === 'main'));
+  else if (dir === 'parent') i = cur.parent >= 0 ? els.findIndex((e) => e.i === cur.parent) : -1;
+  else if (dir === 'child') i = els.findIndex((e) => e.parent === cur.i && cur.i >= 0);
+  else { const sib = els.map((e, k) => [e, k]).filter(([e]) => e.parent === cur.parent); const at = sib.findIndex(([, k]) => k === DEV.shotSel); const nx = sib[at + (dir === 'next' ? 1 : -1)]; i = nx ? nx[1] : -1; }
+  if (i >= 0) shotSelect(i);
+}
+
+// ---- the panel ----
+const W_NAMES = { color: ['barvu textu', 'text color'], 'background-color': ['pozadí', 'background'], 'border-color': ['barvu rámečku', 'border color'], 'font-family': ['písmo', 'font family'], 'font-size': ['velikost písma', 'font size'], 'font-weight': ['řez písma', 'font weight'], 'line-height': ['výšku řádku', 'line height'], 'letter-spacing': ['prostrkání', 'letter spacing'], padding: ['vnitřní odsazení', 'padding'], margin: ['vnější odsazení', 'margin'], gap: ['mezery mezi potomky', 'gap'], 'row-gap': ['mezery mezi řádky', 'row gap'], 'column-gap': ['mezery mezi sloupci', 'column gap'], 'border-radius': ['zaoblení rohů', 'corner radius'], 'border-width': ['šířku rámečku', 'border width'], 'box-shadow': ['stín', 'shadow'] };
+const devVar = (name) => `var(--${String(name).replace(/\./g, '-')})`;
+const devTokName = (r) => r.parts ? (r.parts.every((p) => !p.tok || p.tok.m === 'exact') && r.parts.some((p) => p.tok) ? r.parts.map((p) => p.tok ? p.tok.name : '0').join(' ') : null) : r.tok?.m === 'exact' ? r.tok.name : null;
+const devNearest = (r) => r.parts ? (r.parts.some((p) => p.tok && p.tok.m !== 'exact') ? r.parts.map((p) => p.tok?.name || (p.tok ? '?' : '0')).join(' ') : null) : r.tok?.m === 'nearest' ? r.tok.name : null;
+function devElLabel (s) { const q = UI === 'cs' ? ['„', '“'] : ['"', '"']; return `${s.tag}${s.name ? ` ${q[0]}${s.name}${q[1]}` : ''}`; }
+function devPromptLine (r, s) {
+  const w = W_NAMES[r.prop]?.[UI === 'cs' ? 0 : 1] || r.prop, el = devElLabel(s);
+  const tok = devTokName(r), near = devNearest(r);
+  if (tok) return T('promptUse').replace('%W', w).replace('%T', tok).replace('%E', el);
+  if (near) return T('promptOff').replace('%P', r.prop).replace('%V', r.value).replace('%T', near);
+  if (r.tok?.m === 'none') return T('promptOffNone').replace('%P', r.prop).replace('%V', r.value);
+  return null;
+}
+function devCopies (s) {
+  const n = byId(S.open);
+  const rows = s.rows.filter((r) => r.g !== 'size');
+  const css = `/* ${s.sel}${s.state !== 'default' ? ` :${s.state}` : ''} */\n` + rows.map((r) => `${r.prop}: ${r.value};`).join('\n');
+  const vars = `/* ${s.sel}${s.state !== 'default' ? ` :${s.state}` : ''} */\n` + rows.map((r) => {
+    const tok = devTokName(r), near = devNearest(r);
+    if (tok) return `${r.prop}: ${tok.split(' ').map((t) => t === '0' ? '0' : devVar(t)).join(' ')}; /* ${r.value} */`;
+    return `${r.prop}: ${r.value};${near ? ` /* ${T('notToken')}, ${T('nearest')} ${near} */` : r.tok?.m === 'none' ? ` /* ${T('notToken')} */` : ''}`;
+  }).join('\n');
+  const tokens = {}, off = {};
+  for (const r of rows) { const tok = devTokName(r); if (tok) tokens[r.prop] = tok.includes(' ') ? tok.split(' ') : tok; else if (devNearest(r) || r.tok?.m === 'none') off[r.prop] = { value: r.value, nearest: devNearest(r) }; }
+  const json = JSON.stringify({ element: s.sel, ...(s.state !== 'default' ? { state: s.state } : {}), tokens, ...(Object.keys(off).length ? { not_tokens: off } : {}) }, null, 2);
+  const lines = rows.map((r) => devPromptLine(r, s)).filter(Boolean);
+  const prompt = [T('promptHead').replace('%E', `${devElLabel(s)} (${s.sel})`).replace('%S', `${n ? loc(n.title) : S.open}${s.state !== 'default' ? `, :${s.state}` : ''}`), ...lines.map((l) => `- ${l}`), T('promptSpec').replace('%N', S.open)].join('\n');
+  return { css, vars, json, prompt };
+}
+function devTokCell (t, r) {
+  if (!t) return '';
+  if (t.m === 'exact') return `<button type="button" class="devtok" data-dev-copy="${esc(t.name)}" title="${esc(T('copyTokenPath'))}">${esc(t.name)}</button>${t.mode ? ` <span class="devmode">${esc(t.mode)}</span>` : ''}${t.hard ? ` <span class="devwarn" title="${esc(T('typedRaw'))}">${esc(T('typedRawShort'))}</span>` : ''}`;
+  if (t.m === 'nearest') return `<span class="devwarn">${esc(T('notToken'))}</span> · ${esc(T('nearest'))} <button type="button" class="devtok devtok--near" data-dev-copy="${esc(t.name)}">${esc(t.name)}</button>${t.value ? ` <span class="devmuted">${esc(t.value)}</span>` : ''}`;
+  return `<span class="devwarn">${esc(T('notToken'))}</span>${t.via ? ` <span class="devmuted">${esc(t.via)}</span>` : ''}`;
+}
+function devRowHtml (r, s, i) {
+  const changed = DEV.base && s.state !== 'default' && DEV.base.rows.find((b) => b.prop === r.prop)?.value !== r.value;
+  const sw = r.g === 'color' && HEX.test(r.value) ? `<span class="devsw" style="background:${r.value}"></span>` : '';
+  const tok = r.parts ? r.parts.map((p) => p.tok ? devTokCell(p.tok) : '<span class="devmuted">0</span>').join(' ') : devTokCell(r.tok);
+  const line = devPromptLine(r, s);
+  return `<tr class="${changed ? 'devchg' : ''}" data-prop="${esc(r.prop)}"><td>${esc(r.prop)}</td><td><span class="devval">${sw}${esc(r.value)}</span>${tok ? `<div class="devtokrow">${tok}</div>` : ''}</td><td>${line ? `<button type="button" class="icon-btn devline" data-dev-line="${i}" aria-label="${esc(T('copyLine'))}" title="${esc(T('copyLine'))}">${ICON.copy}</button>` : ''}</td></tr>`;
+}
+function devElHtml () {
+  const s = DEV.spec;
+  const nav = `<div class="devnav" role="group" aria-label="${esc(T('devNavLabel'))}">${[['parent', '↑', T('navParent')], ['child', '↓', T('navChild')], ['prev', '←', T('navPrev')], ['next', '→', T('navNext')]].map(([d, a, l]) => `<button type="button" class="btn" data-dev-nav="${d}" title="${esc(l)} (Shift + ${a})" ${s ? '' : 'disabled'}>${a} ${esc(l)}</button>`).join('')}</div>`;
+  if (!s) return `${DEV.shot ? `<p class="note">${esc(DEV.shotSpec ? T('devShotNote') : T('devNoSpec'))}</p>` : ''}<p class="note">${esc(T('devEmpty'))}</p><button type="button" class="btn" data-dev-nav="start">${esc(T('devStart'))}</button>`;
+  const groups = DEV_GROUPS.map((g) => {
+    const rows = s.rows.map((r, i) => [r, i]).filter(([r]) => r.g === g);
+    const contrast = g === 'color' && s.contrast ? `<tr class="devcontrast"><td>${esc(T('contrast'))}</td><td colspan="2"><b>${s.contrast.ratio} : 1</b> · <span class="${s.contrast.aa ? 'devok' : 'devwarn'}">${esc(s.contrast.aa ? T('aaPass') : T('aaFail'))}</span>${s.contrast.aa ? '' : ` (${esc(T('aaNeed'))} ${s.contrast.large ? 3 : 4.5} : 1)`}${s.contrast.large ? ` · ${esc(T('largeText'))}` : ''}${s.contrast.approx ? `<div class="devmuted">${esc(T('contrastApprox'))}</div>` : ''}</td></tr>` : '';
+    return rows.length || contrast ? `<h5>${esc(T('g_' + g))}</h5><table>${rows.map(([r, i]) => devRowHtml(r, s, i)).join('')}${contrast}</table>` : '';
+  }).join('');
+  const st = DEV.shot ? '' : `<h5>${esc(T('states'))}</h5><div class="seg devstates" role="group" aria-label="${esc(T('states'))}">${DEV_STATES.map((x) => `<button type="button" data-dev-state="${x}" aria-pressed="${s.state === x}" ${x === 'default' || s.states.includes(x) ? '' : 'disabled'}>${x === 'default' ? esc(T('stDefault')) : x === 'disabled' ? 'disabled' : ':' + x}</button>`).join('')}</div>${s.states.length ? (s.state !== 'default' ? `<p class="note">${esc(T('changedInState'))}</p>` : '') : `<p class="note">${esc(T('stNone'))}</p>`}`;
+  const inset = s.parent?.inset;
+  const arrows = (d) => ['top', 'right', 'bottom', 'left'].filter((k) => d[k] != null).map((k) => `<span data-gap="${k}">${{ top: '↑', right: '→', bottom: '↓', left: '←' }[k]} ${Math.round(d[k] * 10) / 10}</span>`).join(' · ');
+  const dist = `<h5>${esc(T('distances'))}</h5><div class="devdist">${inset ? `<p>${esc(T('toParent'))} <code>${esc(s.parent.tag)}</code>: ${arrows({ top: inset[0], right: inset[1], bottom: inset[2], left: inset[3] })}</p>` : ''}${DEV.measure ? `<p id="devMeasure">${esc(T('toTarget'))} <code>${esc(DEV.measure.target.tag)}</code>${DEV.measure.target.name ? ` ${esc(devElLabel(DEV.measure.target).slice(DEV.measure.target.tag.length))}` : ''}: ${arrows(DEV.measure.d) || '0'}</p>` : ''}<p class="note"><button type="button" class="btn" id="devMeasureBtn" aria-pressed="${DEV.measureMode}">${esc(T('measure'))} (M)</button> ${esc(T('measureHint'))}</p></div>`;
+  const assets = s.assets.length ? `<h5>${esc(T('assets'))}</h5><ul class="devassets">${s.assets.map((a) => `<li>${a.preview ? `<img src="${esc(a.preview)}" alt="">` : `<span class="devassets__k">${esc(a.kind)}</span>`}<span class="devassets__n">${esc(a.name)}${a.size ? ` <span class="devmuted">${a.size[0]} × ${a.size[1]}</span>` : ''}${a.alt ? `<span class="devmuted"> · alt „${esc(a.alt)}“</span>` : ''}</span><button type="button" class="btn" data-dev-asset="${a.i}">${esc(T('download'))}</button></li>`).join('')}</ul>` : '';
+  const pin = canWrite() && APP() && !DEV.shot ? `<button type="button" class="btn" id="devPin">${esc(T('pinFromDev'))}</button>` : '';
+  return `<div class="devhead"><b>${esc(devElLabel(s))}</b> <span class="devmuted">${s.box[2]} × ${s.box[3]}${s.role && s.role !== s.tag ? ` · ${esc(s.role)}` : ''}</span><div class="anchor-note">${esc(s.sel)}</div></div>${nav}${dist}${st}${groups}${assets}
+    <div class="devcopy"><button type="button" class="btn" data-dev-copyall="css">${esc(T('copyCss'))}</button><button type="button" class="btn" data-dev-copyall="vars">${esc(T('copyCssVars'))}</button><button type="button" class="btn" data-dev-copyall="json">${esc(T('copyTokens'))}</button><button type="button" class="btn btn--primary" data-dev-copyall="prompt">${esc(T('copyPrompt'))}</button>${pin}</div>
+    <p class="note">${esc(T('devAgentHint').replace('%N', S.open))}</p>`;
+}
+function devTokensHtml () {
+  const u = DEV.shot ? (DEV.shotSpec ? { used: DEV.shotSpec.used || {}, off: DEV.shotSpec.off || [], hard: [], all: [] } : null) : DEV.usage;
+  if (!u) return `<p class="note">${esc(DEV.shot ? T('devNoSpec') : T('devLoading'))}</p>`;
+  const all = new Map(u.all.map((t) => [t.name, t]));
+  const used = Object.entries(u.used).sort((a, b) => b[1] - a[1]);
+  if (!used.length && !u.all.length && !u.off.length) return `<p class="note">${esc(T('tokNone'))}</p>`;
+  const on = (q) => DEV.hl && ((q.token && DEV.hl.token === q.token) || (q.prop && DEV.hl.prop === q.prop && DEV.hl.value === q.value));
+  const sw = (v) => HEX.test(v || '') ? `<span class="devsw" style="background:${v}"></span>` : '';
+  const usedNames = new Set(used.map(([k]) => k));
+  const unused = u.all.filter((t) => !usedNames.has(t.name) && !t.name.split('.').slice(0, -1).some((_, i, a) => usedNames.has(t.name.split('.').slice(0, a.length - i).join('.'))));
+  return `<p class="note">${esc(T('tokHint'))}</p>
+    <h5>${esc(T('tokUsed'))} (${used.length})</h5><ul class="devtoks">${used.map(([name, n]) => { const t = all.get(name); return `<li><button type="button" data-dev-hl-token="${esc(name)}" aria-pressed="${!!on({ token: name })}">${sw(t?.value)}<span class="devtoks__n">${esc(name)}</span>${t ? `<span class="devmuted">${esc(t.value)}${t.mode ? ` · ${esc(t.mode)}` : ''}</span>` : ''}<span class="devtoks__c">×${n}</span></button></li>`; }).join('')}</ul>
+    ${u.off.length ? `<h5>${esc(T('tokOff'))} (${u.off.length})</h5><ul class="devtoks">${u.off.map((o) => `<li><button type="button" data-dev-hl-prop="${esc(o.prop)}" data-dev-hl-value="${esc(o.value)}" aria-pressed="${!!on(o)}">${sw(o.value)}<span class="devtoks__n">${esc(o.prop)}: ${esc(o.value)}</span><span class="devmuted">${o.nearest ? `${esc(T('nearest'))} ${esc(o.nearest)}` : esc(T('notToken'))}</span><span class="devtoks__c">×${o.count}</span></button></li>`).join('')}</ul>` : ''}
+    ${u.hard.length ? `<h5>${esc(T('tokHard'))} (${u.hard.length})</h5><ul class="devtoks devtoks--plain">${u.hard.map((h) => `<li><code>${esc(h.sel)}</code> ${esc(h.prop)}: ${esc(h.value)} → <code>${esc(devVar(h.token))}</code></li>`).join('')}</ul>` : ''}
+    ${unused.length ? `<details class="devunused"><summary>${esc(T('tokUnused'))} (${unused.length})</summary><ul class="devtoks devtoks--plain">${unused.map((t) => `<li>${sw(t.value)}<code>${esc(t.name)}</code> <span class="devmuted">${esc(t.value)}${t.mode ? ` · ${esc(t.mode)}` : ''}</span></li>`).join('')}</ul></details>` : ''}`;
+}
+function devPaneHtml () {
+  if (!DEV.on) return '';
+  return `<div class="sec dev" id="devPane"><div class="devtabs seg" role="tablist">${[['el', T('devTabEl')], ['tokens', T('devTabTokens')]].map(([k, l]) => `<button type="button" role="tab" data-dev-tab="${k}" aria-selected="${DEV.tab === k}" aria-pressed="${DEV.tab === k}">${esc(l)}</button>`).join('')}</div><div id="devBody">${DEV.tab === 'el' ? devElHtml() : devTokensHtml()}</div></div>`;
+}
+function renderDev () {
+  const p = $('devPane'); if (!p) return;
+  p.outerHTML = devPaneHtml();
+  wireDev();
+}
+async function devCopy (text) { try { await navigator.clipboard.writeText(text); toast(T('copied')); } catch { toast(text.slice(0, 200)); } }
+function wireDev () {
+  const p = $('devPane'); if (!p) return;
+  p.onclick = (e) => {
+    const b = e.target.closest('button'); if (!b || b.disabled) return;
+    const s = DEV.spec;
+    if (b.dataset.devTab) { DEV.tab = b.dataset.devTab; if (DEV.tab === 'tokens' && !DEV.shot && !DEV.usage) toFrame({ type: 'qawalk:dev-usage' }); renderDev(); return; }
+    if (b.dataset.devNav) { devNav(b.dataset.devNav); return; }
+    if (b.dataset.devState && s) { toFrame({ type: 'qawalk:dev-state', state: b.dataset.devState }); return; }
+    if (b.dataset.devCopy) { devCopy(b.dataset.devCopy); return; }
+    if (b.dataset.devLine && s) { const r = s.rows[Number(b.dataset.devLine)]; const l = r && devPromptLine(r, s); if (l) devCopy(l); return; }
+    if (b.dataset.devCopyall && s) { devCopy(devCopies(s)[b.dataset.devCopyall]); return; }
+    if (b.dataset.devAsset != null) { toFrame({ type: 'qawalk:dev-asset', i: Number(b.dataset.devAsset) }); return; }
+    if (b.id === 'devMeasureBtn') { devMeasureMode(!DEV.measureMode); return; }
+    if (b.id === 'devPin' && s) { LIVE.anchor = { selector: s.sel, box: s.box, text: s.name, viewport: S.lbVp }; showLbTab('overview'); rerenderComments(); focusComposer(); return; }
+    const q = b.dataset.devHlToken ? { token: b.dataset.devHlToken } : b.dataset.devHlProp ? { prop: b.dataset.devHlProp, value: b.dataset.devHlValue } : null;
+    if (q) {
+      const same = DEV.hl && JSON.stringify(DEV.hl) === JSON.stringify(q);
+      DEV.hl = same ? null : q;
+      if (DEV.shot) { drawShot(); if (DEV.hl && lbPhone()) setSheet('peek'); } else toFrame({ type: 'qawalk:dev-highlight', ...(DEV.hl || {}) });
+      renderDev();
+    }
+  };
+}
+/** Messages of the frame helper in Dev mode. */
+function devMessage (m) {
+  if (m.type === 'qawalk:dev-spec') {
+    const s = sanitizeSpec(m.spec); if (!s) return;
+    const first = !DEV.spec;
+    if (s.state === 'default' || !DEV.base || DEV.base.sel !== s.sel) DEV.base = s;
+    DEV.spec = s; DEV.measure = null;
+    if (DEV.tab !== 'el') DEV.tab = 'el';
+    if (S.lbTab !== 'dev') showLbTab('dev');
+    if (first && lbPhone() && S.lbSheet === 'peek') setSheet('half');
+    renderDev();
+  }
+  if (m.type === 'qawalk:dev-measure') {
+    const x = m.m;
+    DEV.measure = x && typeof x === 'object' ? { target: { sel: sStr(x.target?.sel, 500), tag: sStr(x.target?.tag, 20), name: sStr(x.target?.name, 60) }, inside: !!x.inside, d: Object.fromEntries(['top', 'right', 'bottom', 'left'].filter((k) => x.d?.[k] != null).map((k) => [k, sNum(x.d[k])])) } : null;
+    renderDev();
+  }
+  if (m.type === 'qawalk:dev-usage') { DEV.usage = sanitizeUsage(m.usage); if (DEV.tab === 'tokens') renderDev(); }
+  if (m.type === 'qawalk:dev-highlighted' && DEV.hl) toast(`${T('tokHlN')} ${sNum(m.count)}`);
+  if (m.type === 'qawalk:dev-asset') {
+    if (m.error || !(m.data instanceof ArrayBuffer) || m.data.byteLength > 20 * 1024 * 1024) { toast(T('assetFail')); return; }
+    // an octet-stream blob downloads and never renders on this origin (an SVG could carry script)
+    const url = URL.createObjectURL(new Blob([m.data], { type: 'application/octet-stream' }));
+    const a = document.createElement('a'); a.href = url; a.download = sStr(m.name, 80).replace(/[^\w.\- ]+/g, '-') || 'asset'; document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 30000);
+  }
+}
+/** Keys of the step detail in Dev mode; true when handled. */
+function devKey (key, shift) {
+  if (key === 'd' || key === 'D') { if (DEV.on || devAvailable(devCapOf())) { setDev(!DEV.on); return true; } return false; }
+  if (!DEV.on) return false;
+  if (key === 'm' || key === 'M') { devMeasureMode(!DEV.measureMode); return true; }
+  if (key === 'Escape') { devEsc(); return true; }
+  if (shift && /^Arrow(Up|Down|Left|Right)$/.test(key)) { devNav(DEV.spec ? { ArrowUp: 'parent', ArrowDown: 'child', ArrowLeft: 'prev', ArrowRight: 'next' }[key] : 'start'); return true; }
+  return false;
 }
 function stepStatusHtml (n) {
   if (!isDraft()) return '';
@@ -2905,7 +3360,7 @@ function ptOpen (id, vpName, extra = {}) {
   const list = ptList(); if (!list.length) return;
   const n = list.includes(byId(id)) ? byId(id) : list[0];
   if ($('pt').hidden) { PT.from = $('lb').hidden ? null : S.open; PT.device = innerWidth > 700; }
-  $('lb').hidden = true; LIVE.mode = null;
+  $('lb').hidden = true; LIVE.mode = null; DEV.on = false; devReset(); if (S.lbTab === 'dev') S.lbTab = 'overview';
   PT.id = n.id; PT.query = extra.query || ''; PT.hash = extra.hash || ''; PT.path = extra.path || '';
   PT.vp = viewports().some((v) => v.name === vpName) ? vpName : PT.vp || S.lbVp || (S.vp === 'mobile' ? mVp() : dVp())?.name || viewports()[0].name;
   renderPt();
@@ -3148,7 +3603,7 @@ function rvRender () {
   const refSrc = rvRefSrc(base, refPath);
   const view = refPath ? (RV.view || (it.reasons.includes('changed') && !lbPhone() ? 'side' : 'this')) : 'this';
   const shotHtml = n.kind === 'stack'
-    ? `<div class="rp__decision"><div class="seg-label">${ICON.stack} ${esc(n.stack?.count || 0)} ${T('pagesWord')}</div><div class="stack-fan" style="max-width:520px;height:220px;margin:12px auto">${(n.stack?.sample || []).slice(0, 3).map((x) => x.thumb ? `<img src="${esc(asset(x.thumb))}" alt="" style="height:180px">` : '<span class="ph" style="height:180px"></span>').join('')}</div><button class="btn btn--primary" id="rvStack">${T('openIndex')}</button></div>`
+    ? `<div class="rp__decision"><div class="seg-label">${ICON.stack} ${esc(n.stack?.count || 0)} ${pagesN(n.stack?.count || 0)}</div><div class="stack-fan" style="max-width:520px;height:220px;margin:12px auto">${(n.stack?.sample || []).slice(0, 3).map((x) => x.thumb ? `<img src="${esc(asset(x.thumb))}" alt="" style="height:180px">` : '<span class="ph" style="height:180px"></span>').join('')}</div><button class="btn btn--primary" id="rvStack">${T('openIndex')}</button></div>`
     : cap ? frameImg(cap, v, `<img src="${esc(asset(cap.image || cap.png))}" alt="${esc(loc(n.title))}">`, 'rvImg') : `<p class="lb__empty">${T('notReached')}</p>`;
   const refHtml = refSrc ? `<div class="lb__img ${v.mobile ? 'lb__img--m' : ''}" style="max-width:${v.mobile ? v.w + 16 : v.w}px"><img src="${esc(refSrc)}" alt="${esc(T('rvAccepted'))}"></div>` : `<p class="note">${esc(base === null ? T('rvRefFailed') : T('rvRefLoading'))}</p>`;
   const refCap = ref ? `<b>${esc(T('rvViewRef'))}</b> ${fmtDate(ref.started_at)}${ref.accepted_by ? ` · ${esc(ref.accepted_by)}` : ''}` : '';
@@ -3434,10 +3889,11 @@ load().then((data) => {
     if (!$('lb').hidden) {
       if (e.metaKey || e.ctrlKey || e.altKey) return;
       if (S.focus) fxWake();
+      if (!(e.key === 'Escape' && $('lbMore')?.classList.contains('is-open')) && devKey(e.key, e.shiftKey)) { e.preventDefault(); return; }
       if (e.key === 'Escape') { if ($('lbMore')?.classList.contains('is-open')) closeLbMore(); else if (S.focus) setFocus(false); else closeLb(); }
       if (e.key === 'f' || e.key === 'F') { e.preventDefault(); setFocus(!S.focus); }
-      if (e.key === 'ArrowRight') $('lbNext')?.click();
-      if (e.key === 'ArrowLeft') $('lbPrev')?.click();
+      if (e.key === 'ArrowRight' && !e.shiftKey) $('lbNext')?.click();
+      if (e.key === 'ArrowLeft' && !e.shiftKey) $('lbPrev')?.click();
       if (e.key === 'c' || e.key === 'C') { e.preventDefault(); focusComposer(); }
       if (e.key === 'p' || e.key === 'P') { e.preventDefault(); ptOpen(S.open, S.lbVp); }
       return;