kaloko 0.5.2 → 0.7.0

package/viewer/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 <meta name="robots" content="noindex">
 <title>Kaloko</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -15,7 +15,7 @@
 :root{
   --ground:#ecece8; --dots:#c9c9c3; --panel:#ffffff; --panel-2:#f5f5f2;
   --ink:#151514; --muted:#6a6a64; --line:#d7d7d1; --line-strong:#151514;
-  --accent:#ffe452; --accent-ink:#151514;
+  --accent:#ffe452; --accent-ink:#151514; --focus:#151514;
   --pass:#1d8249; --fail:#c8102e; --partial:#b86e00; --skip:#8d8d86;
   --pass-bg:#e3f3e9; --fail-bg:#fbe5e8; --partial-bg:#fbf0dc; --skip-bg:#ececea;
   --pass-ink:#176f3b; --fail-ink:#b40f2a; --partial-ink:#8f5500; --skip-ink:#5f5f59;
@@ -30,7 +30,7 @@
   --pass:#52c784; --fail:#ff6070; --partial:#f0a83c; --skip:#8d8d86;
   --pass-bg:#18311f; --fail-bg:#3a1a1f; --partial-bg:#372a14; --skip-bg:#2a2a27;
   --pass-ink:#52c784; --fail-ink:#ff6070; --partial-ink:#f0a83c; --skip-ink:#a9a9a2;
-  --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
+  --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --focus:#ffe452;
 }}
 :root[data-theme="dark"]{
   color-scheme:dark;
@@ -39,22 +39,46 @@
   --pass:#52c784; --fail:#ff6070; --partial:#f0a83c; --skip:#8d8d86;
   --pass-bg:#18311f; --fail-bg:#3a1a1f; --partial-bg:#372a14; --skip-bg:#2a2a27;
   --pass-ink:#52c784; --fail-ink:#ff6070; --partial-ink:#f0a83c; --skip-ink:#a9a9a2;
-  --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
+  --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --focus:#ffe452;
 }
 html,body{height:100%}
+/* the canvas is an app with its own zoom: the page itself never pans sideways or zooms (the canvas, screenshots
+   in the detail and focus mode zoom themselves); phones get 16 px fields so iOS does not zoom in on focus */
+html,body{overflow-x:clip;touch-action:pan-x pan-y}
+@media (max-width:820px),(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}
 [hidden]{display:none!important}
 body{margin:0}
 body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.43;overflow:hidden}
 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
-button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+/* keyboard focus: one ring for every control, at least 3:1 against light and dark surfaces (WCAG 2.4.7 / 2.4.13).
+   --focus is ink on light surfaces and yellow on dark ones; dark overlays (focus mode, the grid) set it themselves.
+   Controls inside clipping strips (segments, lists) draw the ring inside so it is not cut off. */
+:focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px}
+.seg :focus-visible,.langsw :focus-visible,.steps :focus-visible,.ri :focus-visible,.si :focus-visible,.lbtabs :focus-visible,.c-tabs :focus-visible,.br__list :focus-visible,.runs-wrap :focus-visible,.trow:focus-visible{outline-offset:-2px}
+[aria-pressed="true"]:focus-visible,[aria-selected="true"]:focus-visible,.btn--primary:focus-visible{outline-offset:2px}
+.seg [aria-pressed="true"]:focus-visible,.langsw [aria-pressed="true"]:focus-visible,.seg [aria-selected="true"]:focus-visible{outline-color:var(--panel)!important;outline-offset:-4px}
+/* the selected row of the run index and of a stack folder: the ring inside the row (the list clips what is outside) */
+.ri [role=option]:focus-visible,.si [role=option]:focus-visible{outline-offset:-3px}
+.world :focus-visible{outline-width:calc(2px * var(--inv,1))!important;outline-offset:calc(2px * var(--inv,1))}.lb__scroll:focus-visible,.rp__stage:focus-visible{outline-offset:-3px}
+.skip{position:fixed;left:8px;top:8px;z-index:100;padding:8px 14px;border-radius:6px;background:var(--ink);color:var(--panel);font-weight:600;text-decoration:none;transform:translateY(-200%)}
+.skip:focus,.skip:focus-visible{transform:none}
 .app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);height:100%}
+/* until the run is loaded and the panels are set for the screen, the app is laid out but not shown: the top bar
+   filling in and the side panels closing would otherwise shift the canvas (layout shift) */
+.app[data-boot]{visibility:hidden}
 .bar{min-width:0}
 
 /* top bar */
 .popwrap{position:relative;display:flex;align-items:center;gap:2px}
 .slot{display:contents}.slot .appnav{display:flex;align-items:center;gap:4px;white-space:nowrap}.slot .appnav a{display:inline-flex;align-items:center;gap:4px}.slot .viewctls{display:flex;align-items:center;gap:12px}.slot #cmpSel{max-width:220px}.slot .ctl{display:flex;align-items:center;gap:6px}
-#barMenu .appnav{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}#barMenu .appnav a{padding:6px 8px;border-radius:6px}#barMenu .appnav a:hover{background:var(--panel-2)}#barMenu .langsw{margin:6px 8px 2px}#barMenu .viewctls{display:grid;gap:12px}
-#menuBtn{position:relative}body.wide #menuWrap{display:none}.menu-btn{width:26px;height:26px}
+#barMenu .appnav{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}#barMenu .appnav a{padding:6px 8px;border-radius:6px}#barMenu .appnav a:hover{background:var(--panel-2)}#barMenu .langsw{margin:6px 8px 2px;justify-self:start}#barMenu .viewctls{display:grid;gap:12px}
+#menuBtn{position:relative}body.wide #menuWrap{display:none}
+.menu-acts{display:none;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}.menu-acts:empty{display:none!important}.menu-acts > *{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;text-decoration:none;color:inherit;font-size:14px;text-align:left}.menu-acts > *:hover{background:var(--panel-2)}
+@media (max-width:820px){.menu-acts{display:grid}}
+/* a touch screen has no keyboard to speak of: the shortcuts move from the bar into ☰ */
+@media (hover:none) and (pointer:coarse) and (max-width:1499px){.menu-acts{display:grid}#helpBtn{display:none}}
+@media (min-width:821px){.menu-acts > :not([data-act="help"]){display:none}}
+@media (min-width:821px){body:not(.wide) .bar.is-tight :is(.brand,#wtBtn,#ptBtn,#cmpChip,#dimSegs){display:none}body:not(.wide) .bar.is-tight .menu-acts{display:grid}body:not(.wide) .bar.is-tight .menu-acts > *{display:flex}body:not(.wide) .bar.is-tight #dimCtl:not(:empty){display:flex}}.menu-btn{width:26px;height:26px}
 .menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px;z-index:40;display:grid;gap:4px}.menu[hidden]{display:none}
 #brandMenu .appnav{display:grid;gap:2px}#brandMenu .appnav a{padding:6px 8px;border-radius:6px}#brandMenu .appnav a:hover{background:var(--panel-2)}#brandMenu .langsw{margin:6px 8px 2px}
 .pop{left:auto;right:0;min-width:280px;gap:12px;padding:12px}.pop .ctl{display:grid;gap:4px}.pop .seg-label{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}.pop select{width:100%}
@@ -69,7 +93,8 @@ button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(
 .task b{font-size:14px;font-weight:600}
 .task span{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* the bar keeps its height while the run loads: empty title lines and switches hold their place (no layout shift) */
-.task b:empty::before,.task span:empty::before{content:"\00a0"}.bar .seg:empty{min-height:29px}
+.task b:empty::before,.task span:empty::before{content:"\00a0"}
+.livetag{display:none;font-style:normal}.bar .seg:empty{min-height:29px}
 .spacer{flex:1}
 .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--panel-2)}
 .seg button{padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted)}
@@ -145,7 +170,7 @@ a.pr:hover{text-decoration-color:var(--ink)}
 .side__foot code{font-family:var(--mono);font-size:11px;color:var(--ink);overflow-wrap:anywhere}
 
 /* right: summary */
-.rside{background:var(--panel);border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;min-width:0}
+.rside{background:var(--panel);border-left:1px solid var(--line);overflow:auto;scroll-padding-top:96px;display:flex;flex-direction:column;min-width:0}
 .rside__head{padding:14px 16px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;position:sticky;top:0;background:var(--panel);z-index:1}
 .rside__head h3{margin:0;font-size:16px;letter-spacing:-.01em}
 .rside .sec{padding:14px 16px}
@@ -226,13 +251,54 @@ table.runs{border-collapse:collapse;width:100%;font-size:12.5px}
 .runs-wrap{overflow:auto;flex:1}
 .more{display:block;margin:12px auto}
 .empty{padding:24px 14px;color:var(--muted);font-size:13px}
+/* phones: the explorer is a full-screen sheet in two levels: the scenarios, then the runs of one as cards */
+.rcards{display:none}
+@media (max-width:820px){
+  .br{padding:0;background:var(--panel)}
+  .br__box{width:100%;height:100%;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
+  .br__top{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
+  .br__top input[type="search"]{min-height:44px;box-sizing:border-box}
+  .br .icon-btn{width:44px;height:44px;flex:none}
+  .br__col{flex:1 1 0;min-height:0}
+  .br__col + .br__col{border:0}
+  .br[data-level="sc"] #brRunCol,.br[data-level="runs"] .br__top,.br[data-level="runs"] #brScCol{display:none}
+  .br__filters{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
+  .br__filters .seg button{min-height:36px;padding:4px 12px}
+  .br__filters select{min-height:40px;max-width:100%}
+  .br__list,.runs-wrap{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
+  .sc{min-height:60px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));align-content:center}
+  .sc__title{flex-direction:column;align-items:stretch;gap:1px}
+  .sc__title span:last-child{font-size:14px}
+  .br__runhead{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
+  #brRunFilters{padding-top:max(8px,env(safe-area-inset-top))}
+  .br__rh{flex:1;min-width:0;display:flex;flex-direction:column}
+  .br__rh b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .br__rh small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .rcards{display:block;padding:0 0 calc(16px + env(safe-area-inset-bottom))}
+  .rday{position:sticky;top:0;z-index:1;margin:0;padding:6px max(14px,env(safe-area-inset-left));background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
+  .rcard{display:flex;align-items:center;gap:8px;padding:0 max(12px,env(safe-area-inset-right)) 0 0;border-bottom:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 96px}
+  .rcard[aria-current="true"]{background:var(--panel-2);box-shadow:inset 4px 0 0 var(--accent)}
+  .rcard__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px 4px 12px max(14px,env(safe-area-inset-left));min-height:64px}
+  .rcard__l1{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
+  .rcard__l1 .mono{font-family:var(--mono);font-size:14px;font-weight:600}
+  .rcard__git{font-family:var(--mono);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .rcard__msg{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .rcard__res{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px}
+  .rcard__res .bar5{flex:1;max-width:160px}
+  .rmark{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--skip-bg);color:var(--muted);white-space:nowrap}
+  .rmark--ok{background:var(--pass-bg);color:var(--pass-ink)}.rmark--back{background:var(--fail-bg);color:var(--fail-ink)}
+  .rmark--base{background:var(--ink);color:var(--panel)}.rmark--cur{background:var(--accent);color:var(--accent-ink)}
+  .rcard__cmp{flex:none;min-height:40px}
+  .rcard__cmp[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
+  #brRunCol{border-top:0}
+}
 
 .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:8px 14px;border-radius:999px;font-size:13px;z-index:30;box-shadow:var(--shadow)}
 
 @media (max-width:1100px){
   .main{grid-template-columns:minmax(0,1fr)}
   .viewport{grid-column:1}
-  .side,.rside{position:fixed;top:0;bottom:0;z-index:12;width:min(340px,88vw);box-shadow:0 0 40px rgba(0,0,0,.18)}
+  .side,.rside{position:fixed;top:var(--barh,0px);bottom:0;z-index:12;width:min(340px,88vw);box-shadow:0 0 40px rgba(0,0,0,.18)}
   .side{left:0}.rside{right:0}
   .task span{max-width:50vw}
 }
@@ -247,7 +313,28 @@ table.runs{border-collapse:collapse;width:100%;font-size:12.5px}
 @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
 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}}
+/* phones: two rows that always fit the screen. Row one: panels, brand, locale, who is here, inbox, menu; row two:
+   the title (cut short), replay, review and Map / Index. Prototype, walkthrough, shortcuts, compare and the
+   dimension switchers live in the ☰ menu; fitBar() drops the brand and extra faces when a row still does not fit */
+@media (max-width:820px){
+  .bar{flex-wrap:wrap;gap:6px;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))}
+  .bar > *{order:1;flex-shrink:0;min-width:0}
+  .bar .spacer{flex:1 1 0;order:2}#presence{order:3;margin-left:0}#inboxBtn{order:4;padding:4px 6px}#menuWrap,.helpwrap{order:5}#togRight{order:6}
+  .bar-break{display:block;order:7;flex-basis:100%;height:0}
+  .bar > .picker,#rpBtn,#rvBtn,#modeSeg{order:8}
+  .bar > .picker{flex:1 1 0;max-width:none;padding:4px 6px}
+  .task b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task span{display:none!important}
+  .livetag:not([hidden]){display:block;font-family:var(--mono);font-size:10.5px;color:var(--pass-ink,var(--muted));white-space:nowrap}.picker .kchip{display:none}
+  .bar .btn{padding:5px 9px}.bar .seg button{padding:3px 9px}
+  #wtBtn,#ptBtn,#helpBtn,#cmpChip,#dbar{display:none!important}
+  #locSeg{flex:0 1 auto}.bar .dpick .nm,.bar .dpick__bad{display:none}
+  .presence .muted{font-size:12px}
+  .bar.is-tight .brand{display:none}
+  /* its menus are sheets along the bottom of the screen, scrolling when taller than it */
+  .bar .menu{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:auto;bottom:calc(8px + env(safe-area-inset-bottom));min-width:0;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;border-radius:14px;box-shadow:0 -8px 40px rgba(0,0,0,.28);z-index:140;translate:none!important}
+}
+/* menus of the bar on a computer: placePop() keeps them 8 px inside the window and scrolls a tall one */
+.bar .menu{max-width:calc(100vw - 16px);box-sizing:border-box}
 .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}}
@@ -496,14 +583,14 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .dpick__btn:hover{border-color:var(--line-strong)}.dpick__btn b{font-weight:600}.dpick__btn .nm{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
 .dpick__bad{font-size:11px;font-weight:600;color:var(--fail-ink,var(--fail));background:var(--fail-bg,transparent);border-radius:999px;padding:1px 6px}
 .dpick__btn svg{width:12px;height:12px;flex:none;opacity:.6}
-.dpop{position:fixed;z-index:120;width:min(340px,calc(100vw - 16px));max-height:min(460px,70vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);overflow:hidden}
+.dpop{position:fixed;z-index:120;box-sizing:border-box;width:min(340px,calc(100vw - 16px));max-height:min(460px,70vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);overflow:hidden}
 .dpop[hidden]{display:none}.dpop__q{margin:8px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:13px}
 .dpop ul{list-style:none;margin:0;padding:0 6px 8px;overflow:auto}.dpop__grp{padding:8px 8px 2px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
 .dpop li[role=option]{display:grid;grid-template-columns:10px auto 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px}
 .dpop li[role=option] .nm{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dpop li[role=option].is-active{background:var(--panel-2);outline:2px solid var(--line-strong)}
 .dpop li[aria-selected=true]{font-weight:600}.dpop__cnt{display:flex;gap:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.dpop__cnt .f{color:var(--fail)}.dpop__cnt .p{color:var(--partial)}.dpop__cnt .ok{color:var(--pass)}
 .dpop__none{padding:10px 12px;color:var(--muted);font-size:13px}
-.dpop--sheet{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:70vh;border-radius:16px 16px 0 0}
+.dpop--sheet{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:70vh;padding-bottom:env(safe-area-inset-bottom);border-radius:16px 16px 0 0}
 .dvf{position:relative;margin:0 auto;container-type:inline-size;box-sizing:content-box;background:#151514;border:10px solid #151514;border-radius:46px;box-shadow:0 0 0 2px #3a3a37,var(--shadow);overflow:hidden}
 .dvf--home-button{border-width:46px 10px 54px;border-radius:40px}.dvf--punch-hole{border-radius:30px}.dvf--fold{border-radius:22px}
 .dvf--tablet{border-width:16px;border-radius:30px}.dvf--laptop{border:12px solid #2b2b29;border-bottom-width:26px;border-radius:14px 14px 6px 6px}
@@ -643,7 +730,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .lb__live iframe{display:block;border:0;background:#fff}
 .lb__cmp .lb__live{margin:0}
 /* prototype presentation: full screen, one step at a time, click-through in the live page */
-.pt{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;color-scheme:dark;--panel:#1f1f1d;--panel-2:#262624;--ink:#f0f0ec;--muted:#9d9d96;--line:#35352f;background:#111110;color:var(--ink)}
+.pt{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;color-scheme:dark;--focus:#ffe452;--panel:#1f1f1d;--panel-2:#262624;--ink:#f0f0ec;--muted:#9d9d96;--line:#35352f;background:#111110;color:var(--ink)}
 .pt__bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 14px;background:#161615;border-bottom:1px solid var(--line)}
 .pt__bar--foot{border-bottom:0;border-top:1px solid var(--line);justify-content:center}
 .pt__bar .spacer{flex:1}.pt__title{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
@@ -696,7 +783,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .c-acts{display:flex;gap:10px;font-size:12px}.c-acts button,.linkish{all:unset;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.c-acts button:hover,.linkish:hover{color:var(--ink)}
 .c-pin{all:unset;cursor:pointer;min-width:18px;height:18px;padding:0 4px;border-radius:9px 9px 9px 2px;background:#e4572e;color:#fff;font:600 10.5px/18px system-ui,sans-serif;text-align:center}
 .c-compose{margin-top:6px}.c-compose .c-text{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:4px 0 8px;resize:vertical}
-.c-hint{margin-left:auto;font-size:11.5px}.c-pinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}.c-pinned{display:inline-flex;gap:5px;align-items:center}.c-pinbtn[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
+.c-hint{margin-left:auto;font-size:11.5px}@media (hover:none) and (pointer:coarse){.c-hint{display:none}}.c-pinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}.c-pinned{display:inline-flex;gap:5px;align-items:center}.c-pinbtn[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
 .c-tabs{margin:0 0 10px}.cmt{display:inline-flex;align-items:center;gap:3px;font:600 11px/1 system-ui,sans-serif;color:var(--ink);padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--partial) 22%,transparent)}.cmt .i{width:12px;height:12px}
 .lb__img.is-pinning,.lb__img.is-pinning img{cursor:crosshair}.pinmark.pin-xy{border:0;cursor:pointer;transform:translate(-2px,-100%)}.pinmark.pin-xy.is-done{background:#8a8a84}.pinmark.pin-xy.is-new{background:var(--ink)}.pinmark.flash{animation:pinflash 1s 2}
 @keyframes pinflash{50%{transform:translate(-2px,-100%) scale(1.5)}}
@@ -707,6 +794,8 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 @media (max-width:900px){.lb__box{grid-template-columns:1fr;grid-template-rows:minmax(260px,48%) 1fr}.lb__stage{border-right:0;border-bottom:1px solid var(--line)}}
 /* the secondary tools of the detail: inline on wide screens, behind "⋯" on phones */
 .lb__more{display:contents}.lb__moreBtn,.lb__grab{display:none}
+/* the explorer from the step detail: phones only (the top bar with the scenario picker is under the detail there) */
+#lbRuns{display:none}@media (max-width:820px){#lbRuns{display:inline-flex}}
 /* phones: the preview gets the height; the step header and tabs are a bottom sheet that starts collapsed */
 @media (max-width:700px){
   .lb{padding:0}
@@ -716,13 +805,17 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
   .lb__tools #lbFocus{padding:5px 10px;flex:none}
   .lb__moreBtn{display:inline-grid;margin-left:auto;flex:none;width:32px;height:32px}
   .lb__more{display:none}
-  .lb__more.is-open{display:flex;position:absolute;top:calc(100% + 4px);right:8px;z-index:6;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-width:calc(100vw - 16px)}
+  .lb__more.is-open{display:flex;position:absolute;top:calc(100% + 4px);right:8px;z-index:6;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-width:calc(100vw - 16px);box-sizing:border-box;max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain}
   .lb__more .spacer,.lb__more .lb__hint{display:none}
   .lb__scroll{padding:10px}
   .lb__side{position:absolute;left:0;right:0;bottom:0;height:var(--peek);z-index:3;background:var(--panel);border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);overflow:hidden;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
   .lb[data-sheet="half"] .lb__side{height:58%;overflow:auto}
-  .lb[data-sheet="full"] .lb__side{height:calc(100% - 48px);overflow:auto}
-  .lb__grab{display:block;position:sticky;top:0;z-index:3;height:16px;background:var(--panel);cursor:grab;touch-action:none}
+  .lb[data-sheet="full"] .lb__side{height:calc(100% - var(--sheet-gap));overflow:auto}
+  .lb[data-sheet="half"] .lb__stage{bottom:58%}.lb[data-sheet="full"] .lb__stage{bottom:calc(100% - var(--sheet-gap))}
+  .lb__box{--sheet-gap:140px}
+  .lb__grab{display:block;position:sticky;top:0;z-index:3;height:16px;background:var(--panel);cursor:grab;touch-action:none;border-radius:14px 14px 0 0}
+  /* the sheet clips what lies outside it: the ring of the handle goes inside, all the way round */
+  .lb__grab:focus-visible{outline-offset:-3px}
   .lb__grab::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 0}
   .lb__head{padding:0 14px 8px;gap:4px;top:16px;touch-action:none;cursor:pointer}
   .lb__head .kind{display:none}.lb__head .lb__linkTxt{display:none}.lb__head #lbLink{padding:5px 8px}
@@ -740,7 +833,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 @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}}
 /* focus: only this step's capture or live page, full viewport, with a small floating bar that hides when idle */
-.lb.is-focus{padding:0;background:#111110}
+.lb.is-focus{padding:0;background:#111110;--focus:#ffe452}
 .lb.is-focus .lb__box{display:block;position:relative;height:100%;border-radius:0;background:#111110;box-shadow:none}
 .lb.is-focus .lb__side,.lb.is-focus .lb__tools{display:none}
 .lb.is-focus .lb__stage{position:absolute;inset:0;border:0;background:#111110}
@@ -750,7 +843,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .lb.is-focus .lb__img--m,.lb.is-focus .lb__img--dev{border:0;border-radius:0;box-shadow:none}
 .lb.is-focus .lb__live{border:0;border-radius:0;box-shadow:none}
 .lb.is-focus .lb__win{border-radius:0}
-.lb__fbar{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;width:max-content;max-width:calc(100% - 16px);padding:6px 8px;border-radius:22px;color-scheme:dark;--panel:#1f1f1d;--panel-2:#262624;--ink:#f0f0ec;--muted:#a3a39c;--line:#3d3d37;background:rgba(22,22,21,.9);color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
+.lb__fbar{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;width:max-content;max-width:calc(100% - 16px);padding:6px 8px;border-radius:22px;color-scheme:dark;--focus:#ffe452;--panel:#1f1f1d;--panel-2:#262624;--ink:#f0f0ec;--muted:#a3a39c;--line:#3d3d37;background:rgba(22,22,21,.9);color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
 .lb__fbar .icon-btn{width:34px;height:34px}
 .lb__fpos{font-size:12.5px;color:var(--muted);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
 .lb__fshow{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;z-index:8;width:38px;height:38px;place-items:center;border-radius:50%;background:rgba(22,22,21,.6);color:#f0f0ec;opacity:.75}
@@ -790,7 +883,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 @media (max-width:900px){.rvm__body{grid-template-columns:1fr;grid-template-rows:minmax(220px,55%) 1fr}.rvm__side{border-left:0;border-top:1px solid var(--line)}.rvm__stage{padding:12px}.rvm__bar{width:72px}.rvm__keys{display:none}}
 @media (max-width:560px){.rvm__foot{gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.rvm__foot .btn{flex:1 1 auto;justify-content:center;padding:9px 8px}.rvm__foot .spacer{display:none}.rvm__top{padding:8px 10px}.rvm__top .brand small{display:none}}
 @media (hover:none) and (pointer:coarse){.rvm .kbd,.rvm__keys{display:none}}
-@media (max-width:1400px){#rvBtn span[data-t]{display:none}#rvBtn{padding:5px 8px}}@media (max-width:820px){#rvBtn{order:3}}
+@media (max-width:1400px){#rvBtn span[data-t]{display:none}#rvBtn{padding:5px 8px}}
 /* batch F: swipe and onion compare, drawn regions, comment drawings and images, the grid, the acceptance record */
 .cmpov{display:grid;margin:0 auto;background:#fff;box-shadow:var(--shadow);position:relative;user-select:none;-webkit-user-select:none;overflow:hidden}
 .cmpov>img{grid-area:1/1;display:block;width:100%;height:auto;align-self:start;pointer-events:none}
@@ -843,10 +936,14 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 @media (max-width:900px){.gvm__keys{display:none}.gvm__title{max-width:60vw}}
 @media (max-width:560px){.gvm__top{padding:8px 10px}.gvm__body{padding:0 10px 16px}.gvm__top .brand small{display:none}}
 .signoff{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}.signoff .note{margin:0 0 6px}
+.iss-badge{display:inline-flex;align-items:center;gap:3px;font:600 11px/1 system-ui,sans-serif;color:var(--ink);padding:2px 6px;border-radius:999px;margin-left:4px;background:color-mix(in srgb,var(--fail) 18%,transparent)}
+.iss-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:6px}.iss-list li{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
+.iss-form{display:grid;gap:8px}.iss-form label{display:grid;gap:3px;font-size:13px}.iss-form input,.iss-form select,.iss-form textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);max-width:100%}.iss-form .note{margin:0}
 </style>
 </head>
 <body>
-<div class="app">
+<a class="skip" id="skipLink" href="#main" data-t="skipMain">Skip to content</a>
+<div class="app" id="app" data-boot>
   <header class="bar">
     <button class="tog" id="togLeft" aria-pressed="true" aria-label="Left panel: run and steps" title="Left panel (F hides both)"><svg class="i" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="1.5"/><path d="M9 4v16"/></svg></button>
     <a class="brand" id="brand" href="#" style="text-decoration:none;color:inherit">Kaloko</a>
@@ -854,7 +951,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     <span class="bar-break" aria-hidden="true"></span>
     <button class="picker" id="picker" aria-label="Browse scenarios and runs">
       <span class="kchip" id="pkKind">task</span>
-      <span class="task"><b id="taskTitle"></b><span id="runMeta"></span></span>
+      <span class="task"><b id="taskTitle"></b><i id="liveTag" class="livetag" hidden></i><span id="runMeta"></span></span>
       <kbd>K</kbd>
     </button>
     <button class="btn" id="rpBtn" title="R"><svg class="i" viewBox="0 0 24 24"><path d="M7 5v14l11-7z"/></svg><span data-t="replay"></span></button>
@@ -871,6 +968,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     <div class="presence" id="presence" hidden aria-label="Who else is here"></div>
     <div class="popwrap" id="menuWrap"><button class="icon-btn" id="menuBtn" aria-haspopup="true" aria-expanded="false" aria-label="Menu"><svg class="i" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></svg><span class="dot-on" id="viewDot" hidden></span></button>
       <div class="menu pop" id="barMenu" hidden>
+        <div class="menu-acts" id="menuActs"></div>
         <nav class="appnav" id="appNav" aria-label="Project"></nav>
         <div class="viewctls" id="viewCtls">
           <div class="ctl"><div class="seg" id="vpSeg" aria-label="View"></div></div>
@@ -883,7 +981,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     <button class="tog" id="togRight" aria-pressed="true" aria-label="Right panel: summary" title="Summary (F hides both)"><svg class="i" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="1.5"/><path d="M15 4v16"/></svg></button>
   </header>
   <main class="main" id="main">
-    <aside class="side" id="side">
+    <aside class="side" id="side" aria-label="Run and steps" data-t-label="sideLabel">
       <h2><span data-t="shownRun"></span> <button class="btn" id="allRuns" data-t="allRuns"></button></h2>
       <div class="runcard" id="runcard"></div>
       <h2 data-t="steps"></h2>
@@ -908,22 +1006,22 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
       </div>
     </section>
     <section class="ri" id="ri" hidden aria-label="Index"></section>
-    <aside class="rside" id="rside"></aside>
+    <aside class="rside" id="rside" aria-label="Summary" data-t-label="rsideLabel"></aside>
   </main>
 </div>
-<div class="si" id="si" hidden role="dialog" aria-modal="true" aria-labelledby="siTitle"></div>
-<div class="lb" id="lb" hidden role="dialog" aria-modal="true" aria-labelledby="lbTitle"></div>
+<div class="si" id="si" hidden role="dialog" aria-modal="true"></div>
+<div class="lb" id="lb" hidden role="dialog" aria-modal="true"></div>
 <div class="br" id="br" hidden role="dialog" aria-modal="true">
   <div class="br__box">
     <div class="br__top">
       <input type="search" id="brSearch" autocomplete="off">
       <button class="icon-btn" id="brClose" aria-label="Close"><svg class="i" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
     </div>
-    <div class="br__col">
+    <div class="br__col" id="brScCol">
       <div class="br__filters"><div class="seg" id="brKind"></div><select id="brProject" aria-label="Project"></select><span class="note" id="brCount"></span></div>
       <div class="br__list" id="brList"></div>
     </div>
-    <div class="br__col">
+    <div class="br__col" id="brRunCol">
       <div class="br__filters" id="brRunFilters"></div>
       <div class="runs-wrap" id="brRuns"></div>
     </div>
@@ -942,7 +1040,7 @@ 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">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ý',
+  cs: { whatChanged:'Co se změnilo', sinceVersion:'od', notesBy:'Poznámky upravil(a)', notesEdit:'Napsat shrnutí vlastními slovy', notesPrompt:'Co se v této verzi změnilo a proč (uvidí to recenzenti i sledující)', 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í',
@@ -955,7 +1053,7 @@ const I18N = {
     a_url_matches:(p) => `Adresa stránky odpovídá ${p}`, a_url_equals:(v) => `Adresa stránky je ${v}`, a_style:(s, p, v) => `${s} má ${p} ${v}`, a_js_equals:(e) => `Hodnota ve stránce: ${e}`,
     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í',
     a_perf_lcp:(mx) => `Největší obsah se zobrazí do ${mx} ms`, a_perf_cls:'Rozvržení se při načítání nehýbe', a_perf_ttfb:(mx) => `Server začne odpovídat do ${mx} ms`, a_perf_weight:'Stránka je dost lehká na rychlé načtení',
-    a_a11y:'Pravidlo přístupnosti', a_design:'Odpovídá referenci designu', a_uses_tokens:'Barvy, písma a velikosti pocházejí z tokenů', a_app:'Pravidlo aplikace', files:'souborů', storage:'Úložiště', copyLink:'Kopírovat odkaz', linkCopied:'Odkaz zkopírován', noPlaceToast:'Toto kritérium nemá místo na stránce ani v metadatech; důkaz je v textu kritéria.', noMeta:'Tento běh je starší a metadata stránky nesbíral. Spusťte nový běh.', noBoxToast:'Prvek se na tomto snímku nenašel.', onPage:'na stránce', inMeta:'v metadatech', inConsole:'v konzoli', noPlace:'bez místa na stránce', clickHl:'Klikněte na kritérium: zvýrazní ho na stránce nebo v metadatech', invalidJson:'neplatný JSON', attachments:'Přílohy kroku', tech:'Technické údaje',
+    a_a11y:'Pravidlo přístupnosti', a_design:'Odpovídá referenci designu', a_uses_tokens:'Barvy, písma a velikosti pocházejí z tokenů', a_app:'Pravidlo aplikace', storage:'Úložiště', copyLink:'Kopírovat odkaz', linkCopied:'Odkaz zkopírován', noPlaceToast:'Toto kritérium nemá místo na stránce ani v metadatech; důkaz je v textu kritéria.', noMeta:'Tento běh je starší a metadata stránky nesbíral. Spusťte nový běh.', noBoxToast:'Prvek se na tomto snímku nenašel.', onPage:'na stránce', inMeta:'v metadatech', inConsole:'v konzoli', noPlace:'bez místa na stránce', clickHl:'Klikněte na kritérium: zvýrazní ho na stránce nebo v metadatech', invalidJson:'neplatný JSON', attachments:'Přílohy kroku', tech:'Technické údaje',
     execution:'Provedení kroku', step:'Krok', of:'z', hover:'Klikněte na kritérium: zvýrazní ho na stránce nebo v metadatech', fullPage:'celá stránka',
     summary:'Souhrnný report', stepsDone:'kroků splněno', criteriaWord:'kritérií', failed:'Co neprošlo', allPassed:'Všechna prověřená kritéria prošla.',
     locales:'Jazykové verze', changes:'Změny oproti předchozímu běhu', noChanges:'Beze změn.', noPrev:'Žádný starší běh tohoto scénáře.',
@@ -963,12 +1061,12 @@ const I18N = {
     allAbove:'Všechny otázky nad prahem', review:'k revizi', notEvaluated:'nehodnoceno', search:'Hledat scénář, task, cestu…', all:'Vše', tasks:'Úkoly', flows:'Flow',
     runs:'běhů', last:'poslední', time:'Čas', result:'Výsledek', noRuns:'Žádný běh neodpovídá filtrům.', noScenario:'Žádný scénář neodpovídá hledání.',
     onlyLocal:'Tento běh je jen lokálně; otevřete jeho složku.', linksExpired:'Odkazy na snímky vypršely. Obnovte stránku.', captured:'Zachyceno', console:'Konzole', errors:'chyb', blocked:'blokovaných požadavků', files:'Soubory',
-    pagesWord:'stránek', firstScreen:'první obrazovka', layout:'Rozložení', uploadedBy:'Nahrál', addNote:'Přidat poznámku', viewOptions:'Zobrazení', keyComment:'komentář ke kroku (v detailu)', keyHelp:'tato nápověda', helpTitle:'Zkratky a nápověda', flowComments:'Komentáře k flow', runComments:'Komentáře k běhu', commentsTitle:'Komentáře', allOpen:'Otevřené', openWord:'otevřených', flowCommentsLead:'Platí pro celé flow napříč běhy: chybějící krok, obecná připomínka, nápad.', noStepComments:'Ke kroku zatím nikdo nic nenapsal.', noComments:'Zatím žádné komentáře.', showResolved:'Vyřešené', hideResolved:'Skrýt vyřešené', replyAct:'Odpovědět', reopenAct:'Znovu otevřít', editAct:'Upravit', deleteAct:'Smazat', saveAct:'Uložit', cancel:'Zrušit', edited:'upraveno', commentDeleted:'Komentář byl smazán.', viaAgent:'Napsal agent', showPin:'Ukázat na snímku', pinOnShot:'Připnout na snímek', pinClickShot:'Klikněte do snímku', pinnedOnShot:'Připnuto na snímek', replyPh:'Odpověď… (@jméno upozorní)', flowPh:'Komentář k celému flow… (@jméno upozorní)', runPh:'Komentář k celému běhu… (@jméno upozorní)', commentLabel:'Komentář', ctrlEnter:'Ctrl+Enter odešle', confirmDelete:'Smazat komentář?', deletedToast:'Smazáno', openCommentsN:'Nevyřízené komentáře', showAllN:'Zobrazit všech %N%', screenWord:'obrazovka aplikace', uiTree:'UI strom', platformWord:'Platforma', treeHint:'Klikněte na prvek: ukáže ho na snímku.', treeSearch:'Hledat v UI stromu…', treeOcr:'Text rozpoznaný ze snímku (OCR): bez rolí a ovládacích prvků.', treeLoadFail:'UI strom se nepodařilo načíst.', treeEmpty:'Strom je prázdný.', mapView:'Mapa', indexView:'Index', searchSteps:'Hledat v krocích, kritériích a stránkách…', criteriaCol:'Kritéria', notesCol:'Poznámky', noStepsMatch:'Žádný krok neodpovídá filtru.', riKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · I mapa', consoleWord:'chyb v konzoli', loadingPages:'hledám i ve stránkách stacků…', sortTitle:'Název', runWord:'Běh', openIndex:'Otevřít index', pagesNeedAttention:'stránek chce pozornost', allPagesPass:'všechny stránky prošly', stackLoadFail:'Index stránek se nepodařilo načíst', semanticSample:'sémantický vzorek', downloadCsv:'Stáhnout CSV', allWord:'Vše', criterionFilter:'Nesplněné kritérium', anyCriterion:'Jakékoli kritérium', searchPages:'Hledat v titulku, URL a polích…', sortBy:'Řadit podle', sortOrder:'Pořadí', sortStatus:'Stav (nejhorší první)', sortDir:'Směr řazení', pageWord:'Stránka', statusWord:'Stav', failingCriteria:'Neprošlo', stackKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · Esc zavřít', listView:'Seznam', gridView:'Mřížka', noPagesMatch:'Filtru neodpovídá žádná stránka.', backToIndex:'Zpět na index',
+    pagesWord:'stránek', firstScreen:'první obrazovka', layout:'Rozložení', uploadedBy:'Nahrál', addNote:'Přidat poznámku', viewOptions:'Zobrazení', keyComment:'komentář ke kroku (v detailu)', keyHelp:'tato nápověda', helpTitle:'Zkratky a nápověda', flowComments:'Komentáře k flow', runComments:'Komentáře k běhu', commentsTitle:'Komentáře', allOpen:'Otevřené', openWord:'otevřených', flowCommentsLead:'Platí pro celé flow napříč běhy: chybějící krok, obecná připomínka, nápad.', noStepComments:'Ke kroku zatím nikdo nic nenapsal.', noComments:'Zatím žádné komentáře.', showResolved:'Vyřešené', hideResolved:'Skrýt vyřešené', replyAct:'Odpovědět', reopenAct:'Znovu otevřít', editAct:'Upravit', deleteAct:'Smazat', saveAct:'Uložit', cancel:'Zrušit', edited:'upraveno', commentDeleted:'Komentář byl smazán.', agentWrote:'Napsal agent', showPin:'Ukázat na snímku', pinOnShot:'Připnout na snímek', pinClickShot:'Klikněte do snímku', pinnedOnShot:'Připnuto na snímek', replyPh:'Odpověď… (@jméno upozorní)', flowPh:'Komentář k celému flow… (@jméno upozorní)', runPh:'Komentář k celému běhu… (@jméno upozorní)', commentLabel:'Komentář', ctrlEnter:'Ctrl+Enter odešle', confirmDelete:'Smazat komentář?', deletedToast:'Smazáno', openCommentsN:'Nevyřízené komentáře', showAllN:'Zobrazit všech %N%', screenWord:'obrazovka aplikace', uiTree:'UI strom', platformWord:'Platforma', treeHint:'Klikněte na prvek: ukáže ho na snímku.', treeSearch:'Hledat v UI stromu…', treeOcr:'Text rozpoznaný ze snímku (OCR): bez rolí a ovládacích prvků.', treeLoadFail:'UI strom se nepodařilo načíst.', treeEmpty:'Strom je prázdný.', mapView:'Mapa', indexView:'Index', searchSteps:'Hledat v krocích, kritériích a stránkách…', criteriaCol:'Kritéria', notesCol:'Poznámky', noStepsMatch:'Žádný krok neodpovídá filtru.', riKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · I mapa', consoleWord:'chyb v konzoli', loadingPages:'hledám i ve stránkách stacků…', sortTitle:'Název', runWord:'Běh', openIndex:'Otevřít index', pagesNeedAttention:'stránek chce pozornost', allPagesPass:'všechny stránky prošly', stackLoadFail:'Index stránek se nepodařilo načíst', semanticSample:'sémantický vzorek', downloadCsv:'Stáhnout CSV', allWord:'Vše', criterionFilter:'Nesplněné kritérium', anyCriterion:'Jakékoli kritérium', searchPages:'Hledat v titulku, URL a polích…', sortBy:'Řadit podle', sortOrder:'Pořadí', sortStatus:'Stav (nejhorší první)', sortDir:'Směr řazení', pageWord:'Stránka', statusWord:'Stav', failingCriteria:'Neprošlo', stackKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · Esc zavřít', listView:'Seznam', gridView:'Mřížka', noPagesMatch:'Filtru neodpovídá žádná stránka.', backToIndex:'Zpět na index',
     subject:'Předmět', from:'Od', to:'Komu', received:'Přijato', mailBeforeRun:'přišel před začátkem běhu', noCapture:'Bez snímku', viewEval:'eval.json', decision:'rozhodnutí', mainLane:'Hlavní průchod',
-    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',
+    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', 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">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',
+  en: { whatChanged:'What changed', sinceVersion:'since', notesBy:'Notes edited by', notesEdit:'Write the summary in your own words', notesPrompt:'What changed in this version and why (reviewers and followers see it)', 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',
@@ -981,7 +1079,7 @@ const I18N = {
     a_url_matches:(p) => `The page address matches ${p}`, a_url_equals:(v) => `The page address is ${v}`, a_style:(s, p, v) => `${s} has ${p} ${v}`, a_js_equals:(e) => `Value in the page: ${e}`,
     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',
     a_perf_lcp:(mx) => `Largest content appears within ${mx} ms`, a_perf_cls:'Layout stays stable while loading', a_perf_ttfb:(mx) => `The server starts answering within ${mx} ms`, a_perf_weight:'The page is light enough to load quickly',
-    a_a11y:'Accessibility rule', a_design:'Matches the design reference', a_uses_tokens:'Colors, fonts and sizes come from the token set', a_app:'App rule', files:'files', storage:'Storage', copyLink:'Copy link', linkCopied:'Link copied', noPlaceToast:'This criterion has no location on the page or in the metadata; the evidence is in the criterion text.', noMeta:'This run is older and did not collect page metadata. Start a new run.', noBoxToast:'The element was not found in this capture.', onPage:'on the page', inMeta:'in metadata', inConsole:'in the console', noPlace:'no location on the page', clickHl:'Click a criterion to highlight it on the page or in the metadata',  invalidJson:'invalid JSON', attachments:'Step attachments', tech:'Technical details',
+    a_a11y:'Accessibility rule', a_design:'Matches the design reference', a_uses_tokens:'Colors, fonts and sizes come from the token set', a_app:'App rule', storage:'Storage', copyLink:'Copy link', linkCopied:'Link copied', noPlaceToast:'This criterion has no location on the page or in the metadata; the evidence is in the criterion text.', noMeta:'This run is older and did not collect page metadata. Start a new run.', noBoxToast:'The element was not found in this capture.', onPage:'on the page', inMeta:'in metadata', inConsole:'in the console', noPlace:'no location on the page', clickHl:'Click a criterion to highlight it on the page or in the metadata',  invalidJson:'invalid JSON', attachments:'Step attachments', tech:'Technical details',
     execution:'Step execution', step:'Step', of:'of', hover:'Click a criterion to highlight it on the page or in the metadata', fullPage:'full page',
     summary:'Summary report', stepsDone:'steps passed', criteriaWord:'criteria', failed:'What failed', allPassed:'All checked criteria passed.',
     locales:'Locales', changes:'Changes since the previous run', noChanges:'No changes.', noPrev:'No older run of this scenario.',
@@ -989,9 +1087,9 @@ const I18N = {
     allAbove:'All questions above threshold', review:'needs review', notEvaluated:'not evaluated', search:'Search scenario, task, path…', all:'All', tasks:'Tasks', flows:'Flows',
     runs:'runs', last:'last', time:'Time', result:'Result', noRuns:'No run matches the filters.', noScenario:'No scenario matches.',
     onlyLocal:'This run exists locally only; open its folder.', linksExpired:'Links to the captures expired. Reload the page.', captured:'Captured', console:'Console', errors:'errors', blocked:'blocked requests', files:'Files',
-    pagesWord:'pages', firstScreen:'first screen', layout:'Layout', uploadedBy:'Uploaded by', addNote:'Add a note', viewOptions:'View', keyComment:'comment on the step (in the detail)', keyHelp:'this help', helpTitle:'Shortcuts and help', flowComments:'Flow comments', runComments:'Run comments', commentsTitle:'Comments', allOpen:'Open', openWord:'open', flowCommentsLead:'For the whole flow across runs: a missing step, a general remark, an idea.', noStepComments:'No comments on this step yet.', noComments:'No comments yet.', showResolved:'Resolved', hideResolved:'Hide resolved', replyAct:'Reply', reopenAct:'Reopen', editAct:'Edit', deleteAct:'Delete', saveAct:'Save', cancel:'Cancel', edited:'edited', commentDeleted:'This comment was deleted.', viaAgent:'Written by an agent', showPin:'Show on the screenshot', pinOnShot:'Pin on the screenshot', pinClickShot:'Click on the screenshot', pinnedOnShot:'Pinned on the screenshot', replyPh:'Reply… (@name notifies)', flowPh:'Comment on the whole flow… (@name notifies)', runPh:'Comment on the whole run… (@name notifies)', commentLabel:'Comment', ctrlEnter:'Ctrl+Enter sends', confirmDelete:'Delete this comment?', deletedToast:'Deleted', openCommentsN:'Open comments', showAllN:'Show all %N%', screenWord:'app screen', uiTree:'UI tree', platformWord:'Platform', treeHint:'Click an element to show it on the screen.', treeSearch:'Search the UI tree…', treeOcr:'Text recognized from the screenshot (OCR): no roles or controls.', treeLoadFail:'The UI tree could not be loaded.', treeEmpty:'The tree is empty.', mapView:'Map', indexView:'Index', searchSteps:'Search steps, criteria and pages…', criteriaCol:'Criteria', notesCol:'Notes', noStepsMatch:'No step matches the filter.', riKeys:'/ search · ↑↓ select · Enter open · I map', consoleWord:'console errors', loadingPages:'also searching the pages of stacks…', sortTitle:'Title', runWord:'Run', openIndex:'Open index', pagesNeedAttention:'pages need attention', allPagesPass:'all pages pass', stackLoadFail:'The page index could not be loaded', semanticSample:'semantic sample', downloadCsv:'Download CSV', allWord:'All', criterionFilter:'Failing criterion', anyCriterion:'Any criterion', searchPages:'Search title, URL and fields…', sortBy:'Sort by', sortOrder:'Order', sortStatus:'Status (worst first)', sortDir:'Sort direction', pageWord:'Page', statusWord:'Status', failingCriteria:'Failing', stackKeys:'/ search · ↑↓ select · Enter open · Esc close', listView:'List', gridView:'Grid', noPagesMatch:'No page matches the filter.', backToIndex:'Back to index',
+    pagesWord:'pages', firstScreen:'first screen', layout:'Layout', uploadedBy:'Uploaded by', addNote:'Add a note', viewOptions:'View', keyComment:'comment on the step (in the detail)', keyHelp:'this help', helpTitle:'Shortcuts and help', flowComments:'Flow comments', runComments:'Run comments', commentsTitle:'Comments', allOpen:'Open', openWord:'open', flowCommentsLead:'For the whole flow across runs: a missing step, a general remark, an idea.', noStepComments:'No comments on this step yet.', noComments:'No comments yet.', showResolved:'Resolved', hideResolved:'Hide resolved', replyAct:'Reply', reopenAct:'Reopen', editAct:'Edit', deleteAct:'Delete', saveAct:'Save', cancel:'Cancel', edited:'edited', commentDeleted:'This comment was deleted.', agentWrote:'Written by an agent', showPin:'Show on the screenshot', pinOnShot:'Pin on the screenshot', pinClickShot:'Click on the screenshot', pinnedOnShot:'Pinned on the screenshot', replyPh:'Reply… (@name notifies)', flowPh:'Comment on the whole flow… (@name notifies)', runPh:'Comment on the whole run… (@name notifies)', commentLabel:'Comment', ctrlEnter:'Ctrl+Enter sends', confirmDelete:'Delete this comment?', deletedToast:'Deleted', openCommentsN:'Open comments', showAllN:'Show all %N%', screenWord:'app screen', uiTree:'UI tree', platformWord:'Platform', treeHint:'Click an element to show it on the screen.', treeSearch:'Search the UI tree…', treeOcr:'Text recognized from the screenshot (OCR): no roles or controls.', treeLoadFail:'The UI tree could not be loaded.', treeEmpty:'The tree is empty.', mapView:'Map', indexView:'Index', searchSteps:'Search steps, criteria and pages…', criteriaCol:'Criteria', notesCol:'Notes', noStepsMatch:'No step matches the filter.', riKeys:'/ search · ↑↓ select · Enter open · I map', consoleWord:'console errors', loadingPages:'also searching the pages of stacks…', sortTitle:'Title', runWord:'Run', openIndex:'Open index', pagesNeedAttention:'pages need attention', allPagesPass:'all pages pass', stackLoadFail:'The page index could not be loaded', semanticSample:'semantic sample', downloadCsv:'Download CSV', allWord:'All', criterionFilter:'Failing criterion', anyCriterion:'Any criterion', searchPages:'Search title, URL and fields…', sortBy:'Sort by', sortOrder:'Order', sortStatus:'Status (worst first)', sortDir:'Sort direction', pageWord:'Page', statusWord:'Status', failingCriteria:'Failing', stackKeys:'/ search · ↑↓ select · Enter open · Esc close', listView:'List', gridView:'Grid', noPagesMatch:'No page matches the filter.', backToIndex:'Back to index',
     subject:'Subject', from:'From', to:'To', received:'Received', mailBeforeRun:'arrived before the run started', noCapture:'No capture', viewEval:'eval.json', decision:'decision', mainLane:'Main path',
-    downloadZip:'Download ZIP', downloadZipNote:'Every file in open formats and the canvas, which opens offline from disk', filesWord:'files', publicAccess:'public link', orgAccess:'access after signing in to the organization', projectAll:'All projects', packNote:'Criterion from a check pack (packs in the scenario)', coverage:'Plan coverage', coverageLine:'criteria from ACCEPTANCE.md have a check', coverageExtra:'checks outside the plan', coverageFull:'Every planned criterion has a check.', coverageSteps:'Steps in the plan without a node', flakyTitle:'Flaky criteria', flaky:'flaky', flakyNote:'The verdict differs between runs on the same commit and environment.', people:'People in the flow', peopleHint:'Click a person to highlight their steps; dashed arrows are hand-offs between people.', awaiting:'Awaiting approval from', approvedBy:'approved by', approvedByAll:'Every required approver has approved.', viaToken:'by token', viaAgent:'by an agent', approvedByTokens:'by token or agent', publicRun:'Public run', publicNote:'The canvas is readable without sign-in; reviewer names are hidden.', makePublic:'Make public', makePrivate:'Make private', publicHint:'Only for scenarios without personal data', publicConfirm:'Make this run public? Anyone with the link can read it without signing in. Use it only for scenarios without personal data.', openInApp:'Open in Kaloko', signInLink:'Sign in', replay:'Replay', rpStep:'Step', rpNext:'Next', rpPrev:'Back', rpEnd:'End of the walkthrough.', rpRestart:'Start over', rpChoose:'Which way?', rpOr:'or', rpKeys:'← → step · digits pick a branch · Esc closes', rpDecision:'Decision', rpBranch:'branch', rpAltOnly:'other branch',
+    downloadZip:'Download ZIP', downloadZipNote:'Every file in open formats and the canvas, which opens offline from disk', filesWord:'files', publicAccess:'public link', orgAccess:'access after signing in to the organization', projectAll:'All projects', packNote:'Criterion from a check pack (packs in the scenario)', coverage:'Plan coverage', coverageLine:'criteria from ACCEPTANCE.md have a check', coverageExtra:'checks outside the plan', coverageFull:'Every planned criterion has a check.', coverageSteps:'Steps in the plan without a node', flakyTitle:'Flaky criteria', flaky:'flaky', flakyNote:'The verdict differs between runs on the same commit and environment.', people:'People in the flow', peopleHint:'Click a person to highlight their steps; dashed arrows are hand-offs between people.', awaiting:'Awaiting approval from', approvedBy:'approved by', approvedByAll:'Every required approver has approved.', viaToken:'by token', approvedByTokens:'by token or agent', publicRun:'Public run', publicNote:'The canvas is readable without sign-in; reviewer names are hidden.', makePublic:'Make public', makePrivate:'Make private', publicHint:'Only for scenarios without personal data', publicConfirm:'Make this run public? Anyone with the link can read it without signing in. Use it only for scenarios without personal data.', openInApp:'Open in Kaloko', signInLink:'Sign in', replay:'Replay', rpStep:'Step', rpNext:'Next', rpPrev:'Back', rpEnd:'End of the walkthrough.', rpRestart:'Start over', rpChoose:'Which way?', rpOr:'or', rpKeys:'← → step · digits pick a branch · Esc closes', rpDecision:'Decision', rpBranch:'branch', rpAltOnly:'other branch',
     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' }
 };
@@ -1001,18 +1099,31 @@ Object.assign(I18N.en, { dim_browser:'Browser', dim_color_scheme:'Colour scheme'
 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'; })();
+// #lang=cs|en in a link forces the language of the canvas for that page (a shared link, a walk in another locale):
+// it wins over the account, the cookie and the browser, and stays in the address while the canvas rewrites it
+const HASH_LANG = (() => { const l = new URLSearchParams(location.hash.slice(1)).get('lang'); return l === 'cs' || l === 'en' ? l : null; })();
+const UI = (() => { const l = HASH_LANG || 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) {
-  if (window.QAWALK_APP) { location.href = `${location.pathname}?lang=${l}${location.hash}`; return; }
+  // a language forced by the link (#lang=) gives way to the one picked here
+  const h = new URLSearchParams(location.hash.slice(1)); h.delete('lang'); const hash = h.toString() ? `#${h}` : '';
+  if (window.QAWALK_APP) { location.href = `${location.pathname}?lang=${l}${hash}`; return; }
   try { localStorage.setItem('qawalk.lang', l); } catch {}
+  if (hash !== location.hash) { history.replaceState(null, '', location.pathname + location.search + hash); }
   location.reload();
 }
 // recordings and traces of steps (batch D, #12, #23)
 Object.assign(I18N.cs, { videoMode:'Video', recExpired:(d) => `Záznam vypršel ${d}; snímky zůstávají.`, recUntil:(d) => `záznam do ${d}`, recFailed:'Záznam neúspěšného pokusu', recChapter:'Úsek videa celého flow', recStart:'Začátek kroku', recCapture:'Snímek', recLoadFail:'Video se nepodařilo načíst.', recMarks:'Značky ve videu', recHint:'Video kroku: od předchozí obrazovky po tento snímek', traceTitle:'Průběh kroku', traceLead:'Akce, požadavky a zprávy konzole od začátku kroku do snímku. Klikněte na řádek a video skočí na ten okamžik.', traceActions:'Akce', traceRequests:'Požadavky', traceFailed:'neúspěšné', traceErrors:'Chyby v konzoli', traceLoading:'Načítám průběh…', traceFail:'Průběh se nepodařilo načíst.', traceEmpty:'Během kroku se nic nezaznamenalo.', trAct:'akce', trNet:'síť', trCon:'konzole', walkthrough:'Video průchodu', walkthroughTitle:'Video celého průchodu s titulky kroků (stáhnout)', flowVideo:'Video flow', chapters:'Kapitoly' });
 Object.assign(I18N.en, { videoMode:'Video', recExpired:(d) => `The recording expired on ${d}; the screenshots stay.`, recUntil:(d) => `recording until ${d}`, recFailed:'Recording of the failed attempt', recChapter:'Part of the flow recording', recStart:'Start of the step', recCapture:'Capture', recLoadFail:'The video could not be loaded.', recMarks:'Markers in the video', recHint:'The step on video: from the previous screen to this capture', traceTitle:'What happened in the step', traceLead:'Actions, requests and console messages from the start of the step to its capture. Click a row and the video jumps there.', traceActions:'Actions', traceRequests:'Requests', traceFailed:'failed', traceErrors:'Console errors', traceLoading:'Loading the trace…', traceFail:'The trace could not be loaded.', traceEmpty:'Nothing was recorded during the step.', trAct:'action', trNet:'network', trCon:'console', walkthrough:'Walkthrough video', walkthroughTitle:'Video of the whole walkthrough with step titles (download)', flowVideo:'Flow video', chapters:'Chapters' });
 const T = (k) => I18N[UI][k] ?? I18N.en[k] ?? k;
+Object.assign(I18N.cs, { skipMain:'Přeskočit na obsah', sideLabel:'Běh a kroky', rsideLabel:'Shrnutí', rpSideLabel:'Krok', rvSideLabel:'Rozhodnutí o kroku' });
+Object.assign(I18N.en, { skipMain:'Skip to content', sideLabel:'Run and steps', rsideLabel:'Summary', rpSideLabel:'Step', rvSideLabel:'Decision on the step' });
+// the scenario and run explorer on a phone
+Object.assign(I18N.cs, { close:'Zavřít', allScenarios:'Všechny scénáře', brShown:'Zobrazený', cmpRun:'Porovnat s během z', cmpActive:'Porovnává se', otherRuns:'Jiné běhy scénáře', listPages:'Stránky' });
+Object.assign(I18N.en, { close:'Close', allScenarios:'All scenarios', brShown:'Shown', cmpRun:'Compare with the run of', cmpActive:'Comparing', otherRuns:'Other runs of this scenario', listPages:'Pages' });
 // "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') };
+// "n runs" (cs: 1 běh, 2–4 běhy, 5+ běhů)
+const runsN = (n) => { n = Number(n) || 0; return UI === 'cs' ? (n === 1 ? 'běh' : n >= 2 && n <= 4 ? 'běhy' : 'běhů') : (n === 1 ? 'run' : 'runs') };
 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>',
@@ -1188,10 +1299,48 @@ function locKey (e) {
 }
 /** The top bar never overflows on a computer: when it would, every picker turns compact. */
 function fitBar () {
-  const bar = document.querySelector('header.bar'); if (!bar || innerWidth <= 820) return;
-  if (!S.compactBar && bar.scrollWidth > bar.clientWidth + 1) { S.compactBar = true; renderChrome(); }
-}
-addEventListener('resize', () => { if (S.compactBar && RUN) { S.compactBar = false; renderChrome(); } });
+  const bar = document.querySelector('header.bar'); if (!bar) return;
+  if (phoneBar()) {
+    // a phone: the first row must stay one row; when it wraps, the brand goes (the menu links home) and one face stays
+    const row1 = () => { const t = $('togLeft').getBoundingClientRect().top; return [...bar.children].filter((e) => e.offsetParent && getComputedStyle(e).order < 7).every((e) => Math.abs(e.getBoundingClientRect().top - t) < 20); };
+    if (!bar.classList.contains('is-tight') && !row1()) { bar.classList.add('is-tight'); renderPresence(); }
+    return;
+  }
+  // a computer: first every picker turns compact, then the brand, prototype, walkthrough and the switchers move into ☰
+  if (bar.scrollWidth <= bar.clientWidth + 1) return;
+  if (!S.compactBar) { S.compactBar = true; renderChrome(); }
+  else if (document.body.classList.contains('wide')) { S.unwide = true; S.placeBar?.(); } // navigation and view options back into ☰
+  else if (!bar.classList.contains('is-tight')) { bar.classList.add('is-tight'); renderPresence(); }
+}
+/** Keeps an open menu of the bar inside the window: 8 px from each side, shifted sideways, scrolling when taller
+    than the room below its button. On a phone the menus are bottom sheets (CSS) and this only resets them. */
+function placePop (el) {
+  if (!el) return;
+  el.style.translate = ''; el.style.maxHeight = ''; el.style.overflow = '';
+  if (phoneBar()) return;
+  const r = el.getBoundingClientRect(), M = 8;
+  let dx = 0; if (r.right > innerWidth - M) dx = innerWidth - M - r.right; if (r.left + dx < M) dx = M - r.left;
+  if (dx) el.style.translate = `${Math.round(dx)}px 0`;
+  if (r.bottom > innerHeight - M) { el.style.maxHeight = `${Math.max(120, Math.floor(innerHeight - M - r.top))}px`; el.style.overflow = 'auto'; }
+}
+/** The phone layout of the top bar (two rows, secondary controls in ☰). */
+const PHONE_MQ = matchMedia('(max-width:820px)');
+const phoneBar = () => PHONE_MQ.matches;
+// iOS Safari ignores user-scalable=no: its page-zoom gestures stop here. The canvas and the detail preview zoom
+// themselves from touch events, which these do not affect
+for (const ev of ['gesturestart', 'gesturechange']) document.addEventListener(ev, (e) => e.preventDefault(), { passive: false });
+// a new width lets the bar try its roomier layout again (height changes, such as a phone keyboard, do not)
+let BAR_W = innerWidth;
+addEventListener('resize', () => {
+  if (innerWidth === BAR_W) return; BAR_W = innerWidth;
+  const bar = document.querySelector('header.bar'); const tight = bar?.classList.contains('is-tight'); bar?.classList.remove('is-tight');
+  if ((S.compactBar || tight || S.unwide) && RUN) { S.compactBar = false; if (S.unwide) { S.unwide = false; S.placeBar?.(); } renderChrome(); renderPresence(); }
+});
+PHONE_MQ.addEventListener('change', () => { if (RUN) { renderChrome(); renderPresence(); } });
+// a step opened on its comments: when the window turns into the phone layout (a rotated tablet), the sheet opens on them again
+matchMedia('(max-width:700px)').addEventListener('change', (e) => {
+  if (e.matches && RUN && S.wantComments && S.open === S.wantComments.step && !$('lb').hidden) setTimeout(() => revealStepComments(S.wantComments.thread), 50);
+});
 /** Words for a key's dimensions ("WebKit (Safari) · Dark"), defaults left out. */
 const dimWords = (key) => { const d = keyDims(key); return DIMS.filter(([name, list, def]) => dimList(list) && (d[name] !== def || name === 'browser')).map(([name]) => dimLabel(d[name])).join(' · '); };
 const dVp = () => viewports().find((v) => !v.mobile);
@@ -1318,7 +1467,7 @@ function commentsBlock ({ scope, nodeId = '', pinnable = false, compact = false
   const pins = scope === 'step' ? pinNumbers(nodeId) : new Map();
   const lab = { approved: T('approved'), rejected: T('rejected') };
   const item = (r, root) => C.editing === r.id ? composer({ scope, nodeId, edit: r }) : `<div class="c-item" data-cid="${esc(r.id)}">
-      <div class="c-meta"><span class="av">${esc(initials(r.email))}</span><span class="c-who">${esc(r.email)}${r.agent ? ` <span class="c-agent" title="${esc(T('viaAgent'))}">${esc(r.agent)}</span>` : ''}</span><span class="id">${fmtDate(r.created_at)}${r.updated_at ? ` · ${T('edited')}` : ''}${root && r.locale && scope === 'step' ? ` · ${esc(r.locale)}` : ''}</span>
+      <div class="c-meta"><span class="av">${esc(initials(r.email))}</span><span class="c-who">${esc(r.email)}${r.agent ? ` <span class="c-agent" title="${esc(T('agentWrote'))}">${esc(r.agent)}</span>` : ''}</span><span class="id">${fmtDate(r.created_at)}${r.updated_at ? ` · ${T('edited')}` : ''}${root && r.locale && scope === 'step' ? ` · ${esc(r.locale)}` : ''}</span>
         ${root && pins.has(r.id) ? `<button class="c-pin" data-c-act="showpin" data-id="${esc(r.id)}" title="${esc(T('showPin'))}${r.shape ? ` · ${esc(T('shape_' + r.shape.kind))}` : ''}">${pins.get(r.id)}</button>` : ''}${root && r.anchor ? `<span class="c-anchor" title="${esc(r.anchor.selector || '')}">⌖</span>` : ''}
         ${root && lab[r.status] ? `<span class="badge st-${r.status === 'approved' ? 'pass' : 'fail'}">${esc(lab[r.status])}</span>` : ''}${root && r.resolved_at ? `<span class="badge st-skip" title="${esc(r.resolved_by || '')}">${T('resolved')}</span>` : ''}</div>
       <div class="c-note">${r.deleted ? `<i class="muted">${T('commentDeleted')}</i>` : noteHtml(r.note)}</div>${!r.deleted && !isDraft() ? filesHtml(scope, r.attachments) : ''}
@@ -1462,12 +1611,35 @@ function openThread (nodeId, threadId) {
   if (nodeId.includes('~') && !byId(nodeId)) { setHash({ step: nodeId }); applyHash(); } else openLb(nodeId, S.lbVp);
   requestAnimationFrame(() => requestAnimationFrame(() => { const el = threadId && document.querySelector(`#lb .c-thread[data-thread="${CSS.escape(threadId)}"]`); (el || $('lb').querySelector('#c-step'))?.scrollIntoView({ behavior: 'smooth', block: 'center' }); setTimeout(() => { C.focus = null; }, 1800); }));
 }
+/** A comment link (#step=<id>&comments=step, or &thread=<id>): the step's comments in view. On a phone the detail
+    opens as a collapsed sheet over the preview, so the sheet opens halfway and scrolls to the comments. */
+function revealStepComments (threadId) {
+  if (S.focus) return;
+  // remembered for this step: a later switch into the phone layout (a rotated tablet) opens the sheet on them again
+  S.wantComments = { step: S.open, thread: threadId || null };
+  if (threadId) { C.focus = threadId; C.showResolved = C.showResolved || !runOpenThreads().some((r) => r.id === threadId); rerenderComments(); }
+  if (S.lbTab && S.lbTab !== 'overview') showLbTab('overview');
+  if (lbPhone() && S.lbSheet === 'peek') setSheet('half');
+  const show = () => {
+    const lb = $('lb'), side = $('lbSide');
+    const el = (threadId && lb.querySelector(`.c-thread[data-thread="${CSS.escape(threadId)}"]`)) || lb.querySelector('#c-step'); if (!el) return;
+    if (lbPhone() && side) { const tabs = side.querySelector('.lbtabs'); const top = tabs ? tabs.getBoundingClientRect().bottom : side.getBoundingClientRect().top; side.scrollTop += el.getBoundingClientRect().top - top - 8; } else el.scrollIntoView({ block: 'nearest' });
+  };
+  show(); requestAnimationFrame(() => requestAnimationFrame(show));
+  // the step's captures and comments render after the first pass (images, the comments request): bring the comments
+  // into view again as the content settles, unless the person has scrolled the sheet meanwhile
+  const side = $('lbSide'); let moved = false
+  const mark = () => { moved = true }
+  side?.addEventListener('wheel', mark, { once: true, passive: true }); side?.addEventListener('touchstart', mark, { once: true, passive: true })
+  for (const ms of [300, 800, 1600]) setTimeout(() => { if (!moved && !$('lb').hidden) show() }, ms)
+  if (threadId) setTimeout(() => { C.focus = null; }, 1800);
+}
 /** Key C in the lightbox (or its comment button): the composer of the step, in view and focused. */
 function focusComposer () { if (S.focus) setFocus(false); if (lbPhone() && S.lbSheet === 'peek') setSheet('half'); const t =$('lb').querySelector('.c-main .c-text'); if (!t) return; t.scrollIntoView({ behavior: 'smooth', block: 'center' }); t.focus({ preventScroll: true }); }
 /** #comments=all|run|flow: the right panel on the comments. */
 function showCommentsFromHash (which) {
   S.cTab = ['all', 'run', 'flow'].includes(which) ? which : 'all';
-  S.right = true; setPanels();
+  S.right = true; S.lastPanel = 'right'; setPanels();
   requestAnimationFrame(() => $('commentsPanel')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
 }
 
@@ -1713,7 +1885,7 @@ function renderNodes () {
       ${n.session ? sessChip(n.session) : ''}<div class="node__head"><span class="kind">${ICON[n.kind]}</span><div class="node__t"><div class="node__title">${esc(loc(n.title))}</div><div class="node__path">${httpChip(n)}${esc(loc(n.path) || n.captures?.[S.loc]?.[d?.name]?.mail?.subject || '')}</div></div><span class="badge st-${s}">${MARK[s]} ${s === 'skip' ? '—' : `${ok}/${n.criteria.length}`}</span></div>
       <button class="shots ${S.vp === 'mobile' ? 'shots--mbig' : ''}" data-open="${esc(n.id)}" aria-label="${esc(loc(n.title))}">${S.vp !== 'mobile' && d ? shot(n, d, 256, 160) : ''}${S.vp !== 'desktop' && m ? shot(n, m, 74, 160) : ''}</button>
       ${jevBlock(n)}
-      <div class="node__foot">${attIcons(n)}${cmtBadge(n.id)}${sigBadge(n)}<span class="loc-dots">${RUN.scope.locales.map((l) => `<span class="st-${esc(n.by_locale?.[l] || 'skip')}" title="${esc(l)}: ${esc(T(n.by_locale?.[l] || 'skip'))}">${esc(l)}</span>`).join('')}</span>${S.cmp && cmpNode(n.id) ? `<span class="pxd" data-pxd="${esc(n.id)}" title="${esc(cmpLabel())}">◐ …</span>${cmpCritChanges(n).length ? `<span class="cmpd" title="${esc(T('cmpTitle'))} ${esc(cmpLabel())}">Δ ${cmpCritChanges(n).length}</span>` : ''}` : ''}${changed && !S.cmp ? `<span class="delta" title="${esc(pr.git?.commit || '')}">Δ ${esc(T(before).toLowerCase())} → ${esc(T(n.status).toLowerCase())}</span>` : ''}${reviewState(n.id) ? `<span class="badge st-${reviewState(n.id) === 'approved' ? 'pass' : 'fail'}" style="margin-left:${changed || S.cmp ? '4px' : 'auto'}">${reviewState(n.id) === 'approved' ? '✓ ' + T('approved') : '✕ ' + T('rejected')}</span>` : rvNodeBadge(n.id)}</div>
+      <div class="node__foot">${attIcons(n)}${cmtBadge(n.id)}${issBadge(n.id)}${sigBadge(n)}<span class="loc-dots">${RUN.scope.locales.map((l) => `<span class="st-${esc(n.by_locale?.[l] || 'skip')}" title="${esc(l)}: ${esc(T(n.by_locale?.[l] || 'skip'))}">${esc(l)}</span>`).join('')}</span>${S.cmp && cmpNode(n.id) ? `<span class="pxd" data-pxd="${esc(n.id)}" title="${esc(cmpLabel())}">◐ …</span>${cmpCritChanges(n).length ? `<span class="cmpd" title="${esc(T('cmpTitle'))} ${esc(cmpLabel())}">Δ ${cmpCritChanges(n).length}</span>` : ''}` : ''}${changed && !S.cmp ? `<span class="delta" title="${esc(pr.git?.commit || '')}">Δ ${esc(T(before).toLowerCase())} → ${esc(T(n.status).toLowerCase())}</span>` : ''}${reviewState(n.id) ? `<span class="badge st-${reviewState(n.id) === 'approved' ? 'pass' : 'fail'}" style="margin-left:${changed || S.cmp ? '4px' : 'auto'}">${reviewState(n.id) === 'approved' ? '✓ ' + T('approved') : '✕ ' + T('rejected')}</span>` : rvNodeBadge(n.id)}</div>
     </div>`;
   }).join('');
   const tallest = Math.max(0, ...[...$('nodes').querySelectorAll('.node:not(.node--decision)')].map((el) => el.offsetHeight));
@@ -1939,7 +2111,7 @@ async function openStack (id, opts = {}) {
       <select id="siSort" aria-label="${esc(T('sortBy'))}"><option value="order">${T('sortOrder')}</option><option value="status">${T('sortStatus')}</option><option value="path">URL</option>${(data.fields || []).map((f) => `<option value="${esc(f.id)}">${esc(f.label || f.id)}</option>`).join('')}</select>
       <button class="icon-btn" id="siDir" aria-label="${esc(T('sortDir'))}">${st.dir === 'asc' ? '↑' : '↓'}</button>
     </div>
-    <div class="si__list" id="siList"><div class="si-headrow" id="siHead" style="--si-cols:repeat(${cols.length || 1},minmax(48px,1fr))"><span></span><button data-sort="path">${T('pageWord')}</button><button data-sort="status">${T('statusWord')}</button>${cols.map((f) => { const vals = data.items.slice(0, 50).map((it) => it.fields?.[f.id]).filter((x) => x != null && x !== ''); return `<button data-sort="${esc(f.id)}" class="${vals.length && vals.every(numeric) ? 'num' : ''}">${esc(f.label || f.id)}</button>`; }).join('') || '<span></span>'}<span>${T('failingCriteria')}</span></div><div class="si__spacer" id="siSpacer"><div id="siRows"></div></div></div>
+    <div class="si__list" id="siList"><div class="si-headrow" id="siHead" style="--si-cols:repeat(${cols.length || 1},minmax(48px,1fr))"><span></span><button data-sort="path">${T('pageWord')}</button><button data-sort="status">${T('statusWord')}</button>${cols.map((f) => { const vals = data.items.slice(0, 50).map((it) => it.fields?.[f.id]).filter((x) => x != null && x !== ''); return `<button data-sort="${esc(f.id)}" class="${vals.length && vals.every(numeric) ? 'num' : ''}">${esc(f.label || f.id)}</button>`; }).join('') || '<span></span>'}<span>${T('failingCriteria')}</span></div><div class="si__spacer" id="siSpacer"><div id="siRows" role="listbox" aria-label="${esc(T('listPages'))}"></div></div></div>
     <div class="si__foot"><span id="siCount"></span><span class="spacer" style="flex:1"></span><span>${T('stackKeys')}</span></div>
   </div>`;
   el.hidden = false;
@@ -1972,24 +2144,46 @@ function paintStack () {
   const list = st.filtered; const head = st.view === 'grid' ? 0 : $('siHead').offsetHeight;
   $('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>`;
+  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('review'))}">${esc(id)}</span>`).join('')}</span>`;
   if (!list.length) { $('siSpacer').style.height = '0px'; $('siRows').innerHTML = `<div class="si__empty">${T('noPagesMatch')}</div>`; return; }
   let html = '';
   if (st.view === 'grid') {
     const per = Math.max(1, Math.floor((box.clientWidth - 24) / CARD_W)); const rows = Math.ceil(list.length / per);
     $('siSpacer').style.height = `${rows * CARD_H + 16}px`;
     const r0 = Math.max(0, Math.floor(box.scrollTop / CARD_H) - 2), r1 = Math.min(rows, Math.ceil((box.scrollTop + box.clientHeight) / CARD_H) + 2);
-    for (let k = r0 * per; k < Math.min(list.length, r1 * per); k++) { const it = list[k]; html += `<button class="si-card st-${esc(it.status)} ${k === st.sel ? 'is-sel' : ''}" data-item="${esc(it.id)}" data-idx="${k}" style="top:${Math.floor(k / per) * CARD_H + 12}px;left:${(k % per) * CARD_W + 12}px">${img(it)}<b><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''}</span> ${esc(it.title || it.path)}</b><small>${esc(it.path)}</small></button>`; }
+    for (let k = r0 * per; k < Math.min(list.length, r1 * per); k++) { const it = list[k]; html += `<button class="si-card st-${esc(it.status)} ${k === st.sel ? 'is-sel' : ''}" role="option" tabindex="-1" data-item="${esc(it.id)}" data-idx="${k}" style="top:${Math.floor(k / per) * CARD_H + 12}px;left:${(k % per) * CARD_W + 12}px">${img(it)}<b><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''}</span> ${esc(it.title || it.path)}</b><small>${esc(it.path)}</small></button>`; }
   } else {
     $('siSpacer').style.height = `${list.length * ROW_H}px`;
     const top = Math.max(0, box.scrollTop - head);
     const k0 = Math.max(0, Math.floor(top / ROW_H) - 8), k1 = Math.min(list.length, Math.ceil((top + box.clientHeight) / ROW_H) + 8);
     for (let k = k0; k < k1; k++) {
       const it = list[k];
-      html += `<button class="si-row st-${esc(it.status)} ${k === st.sel ? 'is-sel' : ''}" data-item="${esc(it.id)}" data-idx="${k}" style="top:${k * ROW_H}px;--si-cols:repeat(${cols.length || 1},minmax(48px,1fr))">${img(it)}<span class="t"><b>${esc(it.title || it.fields?.title || it.path)}</b><small>${esc(it.path)}</small></span><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''} ${esc(T(it.status))}</span>${cols.map((f) => { const v = it.fields?.[f.id]; return `<span class="f ${numeric(v) ? 'num' : ''}" title="${esc(v ?? '')}">${v == null || v === '' ? '—' : esc(v)}</span>`; }).join('') || '<span></span>'}${fails(it)}</button>`;
+      html += `<button class="si-row st-${esc(it.status)} ${k === st.sel ? 'is-sel' : ''}" role="option" tabindex="-1" data-item="${esc(it.id)}" data-idx="${k}" style="top:${k * ROW_H}px;--si-cols:repeat(${cols.length || 1},minmax(48px,1fr))">${img(it)}<span class="t"><b>${esc(it.title || it.fields?.title || it.path)}</b><small>${esc(it.path)}</small></span><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''} ${esc(T(it.status))}</span>${cols.map((f) => { const v = it.fields?.[f.id]; return `<span class="f ${numeric(v) ? 'num' : ''}" title="${esc(v ?? '')}">${v == null || v === '' ? '—' : esc(v)}</span>`; }).join('') || '<span></span>'}${fails(it)}</button>`;
     }
   }
+  const had = $('siRows').contains(document.activeElement);
   $('siRows').innerHTML = html;
+  roveRows($('siRows'), 'data-idx', st.sel, had);
+}
+/**
+ * The run index and a stack folder are one tab stop each: the selected row (or the first drawn one) has tabindex 0,
+ * the arrow keys move the selection and Tab leaves the list. The rows are drawn in a window and redrawn on scroll,
+ * so a focus inside the list follows the selection into the new rows.
+ */
+function roveRows (box, attr, sel, hadFocus) {
+  const rows = [...box.querySelectorAll(`[${attr}]`)];
+  const cur = rows.find((r) => Number(r.getAttribute(attr)) === sel) || rows[0];
+  for (const r of rows) { r.tabIndex = r === cur ? 0 : -1; r.setAttribute('aria-selected', String(Number(r.getAttribute(attr)) === sel)); }
+  if (hadFocus && cur && Number(cur.getAttribute(attr)) === sel) cur.focus({ preventScroll: true });
+  if (box.dataset.rove) return;
+  // a row focused by a click or a tap becomes the selection
+  box.dataset.rove = '1';
+  box.addEventListener('focusin', (e) => {
+    const b = e.target.closest(`[${attr}]`); if (!b) return;
+    const k = Number(b.getAttribute(attr)); const state = attr === 'data-k' ? S.ri : S.st; if (!state) return;
+    state.sel = k;
+    for (const r of box.querySelectorAll(`[${attr}]`)) { const on = r === b; r.tabIndex = on ? 0 : -1; r.classList.toggle('is-sel', on); r.setAttribute('aria-selected', String(on)); }
+  });
 }
 function openStackItem (k) {
   const st = S.st; const n = byId(st.id); const data = STACKS.get(st.id); const it = st.filtered[k]; if (!it) return;
@@ -2075,7 +2269,7 @@ function riRender (opts = {}) {
       <select id="riSort" aria-label="${esc(T('sortBy'))}"><option value="order">${T('sortOrder')}</option><option value="status">${T('sortStatus')}</option><option value="title">${T('sortTitle')}</option></select>
       <button class="icon-btn" id="riDir" aria-label="${esc(T('sortDir'))}">${r.dir === 'asc' ? '↑' : '↓'}</button>
     </div>
-    <div class="si__list" id="riList"><div class="si-headrow ri-head" id="riHead"><span></span><span>${T('step')}</span><span>${T('statusWord')}</span><span class="num">${T('criteriaCol')}</span><span>${T('failingCriteria')}</span><span>${T('notesCol')}</span></div><div class="si__spacer" id="riSpacer"><div id="riRows"></div></div></div>
+    <div class="si__list" id="riList"><div class="si-headrow ri-head" id="riHead"><span></span><span>${T('step')}</span><span>${T('statusWord')}</span><span class="num">${T('criteriaCol')}</span><span>${T('failingCriteria')}</span><span>${T('notesCol')}</span></div><div class="si__spacer" id="riSpacer"><div id="riRows" role="listbox" aria-label="${esc(T('steps'))}"></div></div></div>
     <div class="si__foot"><span id="riCount"></span><span class="spacer" style="flex:1"></span><span>${T('riKeys')}</span></div>
   </div>`;
   $('riSort').value = r.sort;
@@ -2106,14 +2300,16 @@ function riPaint () {
     if (tops[k] + h < top - 400 || tops[k] > bottom + 400) continue;
     html += riRow(out[k], k, tops[k]);
   }
+  const had = $('riRows').contains(document.activeElement);
   $('riRows').innerHTML = html;
+  roveRows($('riRows'), 'data-k', S.ri.sel, had);
 }
 function riRow (e, k, top) {
   const sel = k === S.ri.sel ? 'is-sel' : '';
   if (e.type === 'group') return `<div class="ri-group" style="top:${top}px">${esc(e.label)} <small>${e.pass}/${e.total}</small></div>`;
   if (e.type === 'page') {
     const it = e.it; const t = stackThumb(it);
-    return `<button class="si-row ri-row is-page st-${esc(it.status)} ${sel}" data-k="${k}" style="top:${top}px">${t ? `<img loading="lazy" src="${esc(asset(t))}" alt="">` : '<span class="ph"></span>'}<span class="t"><b>${esc(it.title || it.fields?.title || it.path)}</b><small>${esc(loc(e.n.title))} › ${esc(it.path)}</small></span><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''} ${esc(T(it.status))}</span><span></span><span class="si-fails">${(it.fails || []).map((id) => `<span>${esc(id)}</span>`).join('')}${(it.review || []).slice(0, 3).map((id) => `<span class="rv">${esc(id)}</span>`).join('')}</span><span class="ri-x">${it.fields?.http >= 300 ? `<span class="http ${it.fields.http >= 500 ? 'http--5' : ''}">${esc(it.fields.http)}</span>` : ''}</span></button>`;
+    return `<button class="si-row ri-row is-page st-${esc(it.status)} ${sel}" role="option" tabindex="-1" data-k="${k}" style="top:${top}px">${t ? `<img loading="lazy" src="${esc(asset(t))}" alt="">` : '<span class="ph"></span>'}<span class="t"><b>${esc(it.title || it.fields?.title || it.path)}</b><small>${esc(loc(e.n.title))} › ${esc(it.path)}</small></span><span class="badge st-${esc(it.status)}">${MARK[it.status] || ''} ${esc(T(it.status))}</span><span></span><span class="si-fails">${(it.fails || []).map((id) => `<span>${esc(id)}</span>`).join('')}${(it.review || []).slice(0, 3).map((id) => `<span class="rv">${esc(id)}</span>`).join('')}</span><span class="ri-x">${it.fields?.http >= 300 ? `<span class="http ${it.fields.http >= 500 ? 'http--5' : ''}">${esc(it.fields.http)}</span>` : ''}</span></button>`;
   }
   const n = e.n; const s = nodeSt(n); const crit = n.criteria || [];
   const ok = crit.filter((c) => critSt(c) === 'pass').length;
@@ -2125,7 +2321,7 @@ function riRow (e, k, top) {
   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}`;
-  return `<button class="si-row ri-row st-${s} ${sel}" data-k="${k}" data-step="${esc(n.id)}" style="top:${top}px">${thumb}<span class="t"><b><span class="kind">${ICON[n.kind] || ''}</span>${esc(loc(n.title))}</b><small>${sub}</small></span><span class="badge st-${s}">${MARK[s]} ${esc(T(s))}</span><span class="num">${crits}</span><span class="si-fails">${chips}</span><span class="ri-x">${cmtBadge(n.id)}${httpChip(n)}${cons ? `<span title="${esc(T('consoleWord'))}">⚠ ${cons}</span>` : ''}${n.session ? sessChip(n.session) : ''}</span></button>`;
+  return `<button class="si-row ri-row st-${s} ${sel}" role="option" tabindex="-1" data-k="${k}" data-step="${esc(n.id)}" style="top:${top}px">${thumb}<span class="t"><b><span class="kind">${ICON[n.kind] || ''}</span>${esc(loc(n.title))}</b><small>${sub}</small></span><span class="badge st-${s}">${MARK[s]} ${esc(T(s))}</span><span class="num">${crits}</span><span class="si-fails">${chips}</span><span class="ri-x">${cmtBadge(n.id)}${httpChip(n)}${cons ? `<span title="${esc(T('consoleWord'))}">⚠ ${cons}</span>` : ''}${n.session ? sessChip(n.session) : ''}</span></button>`;
 }
 function riScrollTo (k) { const box = $('riList'); if (!box || !S.ri.tops) return; box.scrollTop = Math.max(0, S.ri.tops[k] - box.clientHeight / 2); riPaint(); }
 function riOpen (k) {
@@ -2242,9 +2438,13 @@ function renderPresence () {
   const presentBtn = PR.ws && peers.length ? `<button class="pvis" data-present aria-pressed="${PR.presenting}">${esc(PR.presenting ? T('stopPresent') : T('present'))}</button>` : '';
   const visBtn = `<button class="pvis" data-vis title="${esc(presenceOn() ? T('visOn') : T('visOff'))}">${presenceOn() ? '●' : '○'} ${esc(presenceOn() ? T('visOn') : T('visOff'))}</button>`;
   const menu = document.body.classList.contains('wide') ? presentBtn + visBtn : `<button class="pmenu-btn" data-pmenu aria-expanded="${!!PR.menu}" title="${esc(presenceOn() ? T('visOn') : T('visOff'))}">${presenceOn() ? '●' : '○'}</button>${PR.menu ? `<div class="menu pmenu">${PR.ws && peers.length ? `<button data-present aria-pressed="${PR.presenting}">${esc(PR.presenting ? T('stopPresent') : T('present'))}</button>` : ''}<button data-vis>${presenceOn() ? '●' : '○'} ${esc(presenceOn() ? T('visOn') : T('visOff'))}</button></div>` : ''}`;
-  el.innerHTML = [...PR.agents.values()].map((x) => `<span class="pav pav--agent" style="--c:#151514" title="${esc(x.name)} ${esc(T('viaAgent'))} ${esc(x.email)}${x.step ? ` · ${esc(x.step)}` : ''}">AI</span>`).join('') + peers.slice(0, 6).map((p) => `<button class="pav" style="--c:${peerColor(p.email)}" data-follow="${esc(p.id)}" aria-pressed="${PR.follow === p.id}" title="${esc(p.email)} · ${esc(T('followHint'))}">${esc(initials(p.name || p.email))}</button>`).join('') + (peers.length > 6 ? `<span class="muted">+${peers.length - 6}</span>` : '') + menu;
+  // a phone shows two faces at most (one when the bar is tight), a computer six; the rest is a count
+  const tight = !!$('presence').closest('.bar')?.classList.contains('is-tight'); const max = phoneBar() ? (tight ? 1 : 2) : tight ? 2 : 6;
+  const faces = [...[...PR.agents.values()].map((x) => `<span class="pav pav--agent" style="--c:#151514" title="${esc(x.name)} ${esc(T('viaAgent'))} ${esc(x.email)}${x.step ? ` · ${esc(x.step)}` : ''}">AI</span>`), ...peers.map((p) => `<button class="pav" style="--c:${peerColor(p.email)}" data-follow="${esc(p.id)}" aria-pressed="${PR.follow === p.id}" title="${esc(p.email)} · ${esc(T('followHint'))}">${esc(initials(p.name || p.email))}</button>`)];
+  el.innerHTML = faces.slice(0, max).join('') + (faces.length > max ? `<span class="muted">+${faces.length - max}</span>` : '') + menu;
+  requestAnimationFrame(fitBar);
   el.onclick = (e) => {
-    if (e.target.closest('[data-pmenu]')) { e.stopPropagation(); S.closeMenus?.('pmenu'); PR.menu = !PR.menu; renderPresence(); return; }
+    if (e.target.closest('[data-pmenu]')) { e.stopPropagation(); S.closeMenus?.('pmenu'); PR.menu = !PR.menu; renderPresence(); placePop(el.querySelector('.pmenu')); return; }
     const f = e.target.closest('[data-follow]'); if (f) { PR.follow === f.dataset.follow ? stopFollow() : startFollow(f.dataset.follow); return; }
     if (e.target.closest('[data-present]')) { PR.presenting = !PR.presenting; if (PR.presenting) stopFollow(); presenceView(true); renderPresence(); toast(PR.presenting ? T('presenting') : T('stopPresent')); return; }
     if (e.target.closest('[data-vis]')) { try { localStorage.setItem('qawalk-presence', presenceOn() ? 'off' : 'on'); } catch {} if (presenceOn()) presenceStart(); else { PR.retry = 99; PR.ws?.close(); } renderPresence(); }
@@ -2312,8 +2512,19 @@ function focusNode (id) { const el = document.querySelector(`.node[data-id="${CS
 
 function wireCanvas () {
   const vp = $('vp'); let drag = null;
-  vp.addEventListener('pointerdown', (e) => { if (e.target.closest('.node,.hud')) return; drag = { x: e.clientX, y: e.clientY, vx: S.view.x, vy: S.view.y }; vp.setPointerCapture(e.pointerId); vp.classList.add('dragging'); });
-  vp.addEventListener('pointermove', (e) => { if (!drag) return; S.view.x = drag.vx + e.clientX - drag.x; S.view.y = drag.vy + e.clientY - drag.y; applyView(); });
+  vp.addEventListener('pointerdown', (e) => { if (e.target.closest('.node,.hud') || pinch) return; drag = { id: e.pointerId, x: e.clientX, y: e.clientY, vx: S.view.x, vy: S.view.y }; vp.setPointerCapture(e.pointerId); vp.classList.add('dragging'); });
+  vp.addEventListener('pointermove', (e) => { if (!drag || e.pointerId !== drag.id) return; S.view.x = drag.vx + e.clientX - drag.x; S.view.y = drag.vy + e.clientY - drag.y; applyView(); });
+  // two fingers pinch-zoom the canvas around their midpoint and pan with it (the page itself never zooms)
+  let pinch = null;
+  const two = (e) => { const [a, b] = e.touches, r = vp.getBoundingClientRect(); return { d: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) || 1, x: (a.clientX + b.clientX) / 2 - r.left, y: (a.clientY + b.clientY) / 2 - r.top }; };
+  vp.addEventListener('touchstart', (e) => { if (e.touches.length !== 2) return; drag = null; vp.classList.remove('dragging'); const g = two(e); pinch = { ...g, k: S.view.k }; }, { passive: true });
+  vp.addEventListener('touchmove', (e) => {
+    if (!pinch || e.touches.length !== 2) return; e.preventDefault();
+    const g = two(e); S.view.x += g.x - pinch.x; S.view.y += g.y - pinch.y; pinch.x = g.x; pinch.y = g.y;
+    zoomAt(pinch.k * g.d / pinch.d / S.view.k, g.x, g.y);
+  }, { passive: false });
+  vp.addEventListener('touchend', (e) => { if (e.touches.length < 2) pinch = null; }, { passive: true });
+  vp.addEventListener('touchcancel', () => { pinch = null; }, { passive: true });
   const end = () => { drag = null; vp.classList.remove('dragging'); };
   vp.addEventListener('pointerup', end); vp.addEventListener('pointercancel', end);
   // presence: my cursor to the others; dragging or zooming myself ends following someone
@@ -2349,7 +2560,14 @@ const bar5 = (c) => { const tot = (c.pass || 0) + (c.partial || 0) + (c.fail ||
 // The issue the run belongs to (from the scenario id, the branch or scenario `issue:`), linked when its URL is known.
 const issueRef = (issue) => { const label = `${issue.repo ? issue.repo + '#' : '#'}${issue.number}`; return `${issue.url ? `<a class="pr" href="${esc(webHref(issue.url))}" target="_blank" rel="noopener">${esc(label)}</a>` : `<span class="mono">${esc(label)}</span>`}${issue.title ? ` <span class="note">${esc(issue.title)}</span>` : ''}` };
 const prLink = (pr) => pr ? `<a class="pr" href="${esc(webHref(pr.url))}" target="_blank" rel="noopener">PR #${esc(pr.number)}</a><span class="prstate ${pr.state === 'open' ? '' : 'prstate--merged'}">${esc(T(pr.state) || pr.state)}</span>` : `<span class="note">${T('noPr')}</span>`;
-function setPanels () { $('main').classList.toggle('no-left', !S.left); $('main').classList.toggle('no-right', !S.right); $('togLeft').setAttribute('aria-pressed', S.left); $('togRight').setAttribute('aria-pressed', S.right); if (S.right) renderReport(); }
+function setPanels () {
+  // on a narrow screen the panels are drawers over each other: one at a time, the one opened last
+  if (narrowPanels() && S.left && S.right) { if (S.lastPanel === 'right') S.left = false; else S.right = false; }
+  $('main').classList.toggle('no-left', !S.left); $('main').classList.toggle('no-right', !S.right); $('togLeft').setAttribute('aria-pressed', S.left); $('togRight').setAttribute('aria-pressed', S.right); if (S.right) renderReport(); drawerInert(); }
+/** Narrow screens: the side panels are drawers over the canvas. While one is open the canvas under it is inert
+    (keyboard focus never lands behind a drawer) and a tap on the uncovered strip closes the drawers. */
+const narrowPanels = () => matchMedia('(max-width:1100px)').matches;
+function drawerInert () { const on = narrowPanels() && (S.left || S.right); $('vp').inert = on; $('ri').inert = on; }
 function runHref (id) { if (!/^[0-9]{4}-[0-9]{2}-[0-9]{2}-[a-z0-9-]+$/.test(id)) return '#'; return window.QAWALK_APP ? `/${window.QAWALK_APP.org}/runs/${id}/` : `../${id}/index.html`; }
 function renderChrome () {
   const app = window.QAWALK_APP;
@@ -2358,6 +2576,7 @@ function renderChrome () {
     + `<span class="langsw">${['en', 'cs'].map((l) => `<button type="button" data-lang="${l}" aria-pressed="${l === UI}">${l.toUpperCase()}</button>`).join('')}</span>`;
   $('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); });
+  document.querySelectorAll('[data-t-label]').forEach((el) => { el.setAttribute('aria-label', T(el.dataset.tLabel)); });
   $('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">D</span> ${esc(T('keyDev'))}</li>${RUN.scope.locales.length > 1 ? `<li><span class="kbd">L</span> <span class="kbd">[</span> <span class="kbd">]</span> ${esc(T('keyLoc'))}</li>` : ''}<li><span class="kbd">?</span> ${esc(T('keyHelp'))}</li></ul>`;
   $('hint').querySelector('ul')?.insertAdjacentHTML('beforeend', rvHintItem()); // review mode (Q)
@@ -2366,12 +2585,18 @@ function renderChrome () {
   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})` : ''}`); }
   else if (app && !app.embed) { ib.hidden = false; ib.href = '/login'; ib.textContent = T('signInLink'); }
   else ib.hidden = true;
+  // ☰ on a phone also holds what the bar has no room for: prototype, walkthrough video, shortcuts
+  const wt = $('wtBtn');
+  $('menuActs').innerHTML = (isDesign() ? `<button type="button" data-act="pt">${$('ptBtn').querySelector('svg').outerHTML}${esc(T('prototype'))}</button>` : '')
+    + (!wt.hidden ? `<a data-act="wt" href="${esc(wt.getAttribute('href'))}" download title="${esc(wt.title)}">${wt.querySelector('svg').outerHTML}${esc(T('walkthrough'))}</a>` : '')
+    + `<button type="button" data-act="help">${$('helpBtn').querySelector('svg').outerHTML}${esc(T('helpTitle'))}</button>`;
+  $('menuActs').onclick = (e) => { const a = e.target.closest('[data-act]'); if (!a) return; if (a.dataset.act === 'pt') { S.closeMenus?.(null); ptOpen(null); } else if (a.dataset.act === 'help') { e.stopPropagation(); $('helpBtn').click(); } else S.closeMenus?.(null); };
   $('locSeg').hidden = RUN.scope.locales.length < 2;
   $('viewDot').hidden = S.vp === 'both' && S.jev === 'sum' && !S.cmp && DIMS.every(([n, list, def]) => !dimList(list) || dimNow(n) === (dimList(list).includes(def) ? def : dimList(list)[0]));
   $('legend').innerHTML = ['pass', 'partial', 'fail', 'skip'].map((k) => `<span><i class="dot st-${k}"></i>${T(k).toLowerCase()}</span>`).join('') + `<span>${ICON.crop}${T('crop')}</span><span>${ICON.html}${T('html')}</span><span>${ICON.email}${T('email')}</span><span>${ICON.external}${T('external')}</span>`;
   $('brSearch').placeholder = T('search');
   $('locSeg').title = T('locale'); $('vpSeg').title = T('view');
-  picker($('locSeg'), { name: 'loc', title: T('locale'), values: localeValues(), current: S.loc, compact: S.compactBar, onPick: (v) => { S.loc = v; renderAll(); if (S.open) openLb(S.open, S.lbVp); } });
+  picker($('locSeg'), { name: 'loc', title: T('locale'), values: localeValues(), current: S.loc, compact: S.compactBar || phoneBar(), onPick: (v) => { S.loc = v; renderAll(); if (S.open) openLb(S.open, S.lbVp); } });
   // the switchers sit next to the locale; on a phone they move into the menu
   for (const el of [$('dimSegs'), $('dimCtl')]) dimSegs(el, () => { renderAll(); if (S.open) openLb(S.open, keyWith(S.lbVp) || undefined); }, el.id === 'dimSegs' && S.compactBar);
   // the reader's last locale, browser and scheme in this run come back next time
@@ -2383,6 +2608,8 @@ function renderChrome () {
   const g = RUN.git || {};
   $('pkKind').textContent = RUN.scenario.kind || 'task'; $('pkKind').className = `kchip ${RUN.scenario.kind === 'flow' ? 'kchip--flow' : ''}`;
   $('taskTitle').textContent = `${RUN.issue ? `${RUN.issue.repo ? RUN.issue.repo + '#' : '#'}${RUN.issue.number} · ` : ''}${RUN.scenario.title}`;
+  // a live draft says so in the bar on a phone too, where the meta line under the title is hidden
+  $('liveTag').hidden = !(isDesign() && isDraft()); $('liveTag').textContent = T('liveShared');
   if (isDesign()) $('runMeta').textContent = [isDraft() ? `${T('draft')} #${RUN.draft.seq}${RUN.draft.branch !== 'main' ? ` @${RUN.draft.branch}` : ''} · ${T('liveShared')}` : `${T('version')} v${RUN.version}${RUN.version_name ? ` · ${RUN.version_name}` : ''}`, fmtDate(RUN.started_at), RUN.verdict && RUN.verdict.verdict !== 'pending' && T(RUN.verdict.verdict), (RUN.references?.design || RUN.design_reference_id) === RUN.id && T('designRef')].filter(Boolean).join(' · ');
   else $('runMeta').textContent = [fmtDate(RUN.started_at), RUN.environment.name, g.branch && `${g.branch} @ ${g.commit}`, g.author, g.pr && `PR #${g.pr.number}`, RUN.verdict && RUN.verdict.verdict !== 'pending' && `${T(RUN.verdict.verdict)}${RUN.verdict.baseline ? ' · ' + T('baseline') : ''}`].filter(Boolean).join(' · ');
   document.title = `${RUN.scenario.id} · Kaloko`;
@@ -2405,7 +2632,7 @@ function renderChrome () {
       ? laneNamesOf().map((name, i) => { const mine = order.filter((n) => n.lane === i); if (!mine.length) return ''; const c = { pass: mine.filter((n) => nodeSt(n) === 'pass').length }; return `<h3 data-lane="${i}" title="${esc(T('fitLane'))}">${esc(name)} <small class="muted">${c.pass}/${mine.length}</small></h3>${mine.map(stepLi).join('')}`; }).join('')
       : order.map(stepLi).join('');
   $('steps').onclick = (e) => { const ln = e.target.closest('[data-lane]'); if (ln) { if (S.mode === 'index') { const k = (S.ri?.entries || []).findIndex((x) => x.type === 'group' && x.label === laneNamesOf()[Number(ln.dataset.lane)]); if (k >= 0) $('riList').scrollTop = S.ri.tops[k]; return; } fitLane(Number(ln.dataset.lane)); return; } const h = e.target.closest('[data-sess]'); if (h) { S.sess = S.sess === h.dataset.sess ? null : h.dataset.sess; renderAll(); return; } const b = e.target.closest('[data-step]'); if (!b) return; if (S.mode === 'index') riFocus(b.dataset.step); else if (byId(b.dataset.step)?.kind === 'stack') { focusNode(b.dataset.step); openStack(b.dataset.step); } else focusNode(b.dataset.step); if (innerWidth <= 1100) { S.left = false; setPanels(); } };
-  $('scFoot').innerHTML = `${RUN.project ? `<span class="mono">${esc(RUN.project.slug)}</span> · ` : ''}${RUN.issue?.url ? `<a class="pr" href="${esc(RUN.issue.url)}" target="_blank" rel="noopener">${esc(RUN.issue.repo ? RUN.issue.repo + '#' : '#')}${esc(String(RUN.issue.number))}</a> · ` : ''}<code>${esc(RUN.scenario.file || '')}</code>${RUN.scenario.version ? ` · v${esc(RUN.scenario.version)}` : ''}<br><span class="mono">${esc(RUN.id)}</span>`;
+  $('scFoot').innerHTML = `${issFootHtml()}${RUN.project ? `<span class="mono">${esc(RUN.project.slug)}</span> · ` : ''}${RUN.issue?.url ? `<a class="pr" href="${esc(RUN.issue.url)}" target="_blank" rel="noopener">${esc(RUN.issue.repo ? RUN.issue.repo + '#' : '#')}${esc(String(RUN.issue.number))}</a> · ` : ''}<code>${esc(RUN.scenario.file || '')}</code>${RUN.scenario.version ? ` · v${esc(RUN.scenario.version)}` : ''}<br><span class="mono">${esc(RUN.id)}</span>`;
 }
 function renderAll () { renderChrome(); renderNodes(); if (S.right) renderReport(); presenceView(); if (S.mode === 'index') { if (S.st?.inline) paintStack(); else if ($('riList')) riPaint(); else riRender(); } }
 
@@ -2821,7 +3048,7 @@ function openLb (id, vpName, opts = {}) {
   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>` : ''}${devAvailable(cap) ? `<button class="btn" id="lbDev" aria-pressed="${DEV.on}" title="${esc(T('devTitle'))} (D)">${T('devMode')}</button>` : ''}${!n.item && gridUseful() && Object.keys(n.captures || {}).length ? `<button class="btn" id="lbGrid" title="${esc(T('gridBtnTitle'))} (G)">${T('gridBtn')}</button>` : ''}${canDraw() && cap && !n.item && !['live', 'view', 'video'].includes(S.lbMode) ? `<button class="btn" id="lbIgn" aria-pressed="${!!S.ignDraw}" title="${esc(T('ignDrawTitle'))}">${T('ignDraw')}</button>` : ''}${liveSrc(cap) || viewSrc(cap) || recOf(n, cap, v) ? `<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>` : ''}${v.device ? `<button class="btn" id="lbBezel" aria-pressed="${S.frame}" title="${esc(T('frameTitle'))}">${T('frame')}</button><button class="btn" id="lbSafe" aria-pressed="${S.safe}" title="${esc(T('safeTitle'))}">${T('safeAreas')}</button>` : ''}${altOptions(v).length && !S.cmp ? `<label class="lb__alt">${T('altCompare')} <select id="lbAlt"><option value="">—</option>${altOptions(v).map((o) => `<option value="${esc(o.key)}" ${S.lbAlt === o.over ? 'selected' : ''}>${esc(o.label)}</option>`).join('')}</select></label>` : ''}<span class="note">${v.w} × ${v.h}${v.device && !v.device.app ? ` · ${esc(v.device.title)} ${esc(v.device.dpr)}×` : ''}${dimWords(v.name) ? ` · ${esc(dimWords(v.name))}` : ''}, ${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"><button class="btn" id="lbRuns">${T('otherRuns')}</button>${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>` : ''}${!n.item && gridUseful() && Object.keys(n.captures || {}).length ? `<button class="btn" id="lbGrid" title="${esc(T('gridBtnTitle'))} (G)">${T('gridBtn')}</button>` : ''}${canDraw() && cap && !n.item && !['live', 'view', 'video'].includes(S.lbMode) ? `<button class="btn" id="lbIgn" aria-pressed="${!!S.ignDraw}" title="${esc(T('ignDrawTitle'))}">${T('ignDraw')}</button>` : ''}${liveSrc(cap) || viewSrc(cap) || recOf(n, cap, v) ? `<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>` : ''}${v.device ? `<button class="btn" id="lbBezel" aria-pressed="${S.frame}" title="${esc(T('frameTitle'))}">${T('frame')}</button><button class="btn" id="lbSafe" aria-pressed="${S.safe}" title="${esc(T('safeTitle'))}">${T('safeAreas')}</button>` : ''}${altOptions(v).length && !S.cmp ? `<label class="lb__alt">${T('altCompare')} <select id="lbAlt"><option value="">—</option>${altOptions(v).map((o) => `<option value="${esc(o.key)}" ${S.lbAlt === o.over ? 'selected' : ''}>${esc(o.label)}</option>`).join('')}</select></label>` : ''}<span class="note">${v.w} × ${v.h}${v.device && !v.device.app ? ` · ${esc(v.device.title)} ${esc(v.device.dpr)}×` : ''}${dimWords(v.name) ? ` · ${esc(dimWords(v.name))}` : ''}, ${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 === 'video' && recOf(n, cap, v) && !S.cmp) return videoHtml(recOf(n, cap, v), v);
@@ -2847,7 +3074,7 @@ function openLb (id, vpName, opts = {}) {
           <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>` : ''}
+        ${sameAsCmp(n) ? `<p class="note">${T('unchangedSince')} ${esc(cmpLabel())}</p>` : ''}${cap?.live?.stale_capture ? `<p class="note">${T('staleCapture')}</p>` : ''}${stepNoteHtml(n)}
       </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>` : ''}
@@ -2861,6 +3088,7 @@ function openLb (id, vpName, opts = {}) {
         return `<li class="st-${st} ${cmpChanged ? 'cmp-changed' : ''}" data-hl="${esc(c.id)}" data-where="${esc(hasBox ? 'page' : c.target?.kind || '')}" tabindex="0"><span class="mark">${MARK[st]}</span><span><span class="id">${esc(c.id)}</span>${esc(critText(c))} ${cmpChanged ? `<span class="dl">Δ</span>` : ''}${c.flaky ? `<span class="dl" title="${T('flakyNote')}">~ ${T('flaky')}</span>` : ''}${c.pack ? `<span class="acb st-skip" style="margin-left:6px" title="${T('packNote')}">${esc(c.pack)}</span>` : ''}</span><div class="acbody">${howBlock(c, r)}${r.evidence ? (humanEvidence(r.evidence) ? `<span class="ev ev--text">${esc(humanEvidence(r.evidence))}</span>` : `<code class="ev">${esc(r.evidence)}</code>`) : ''}${helpBlock(c, st)}${c.check || r.score != null ? `<details class="tech"><summary>${T('howTech')}</summary><code class="ev">${c.check ? esc(checkLabel(c.check)) : esc(c.type || '')}${r.score != null ? ` · score ${r.score.toFixed(2)}` : ''}${r.note && c.check?.type !== 'semantic' ? ` · ${esc(r.note)}` : ''}${r.evidence && humanEvidence(r.evidence) ? `\n${esc(r.evidence)}` : ''}</code></details>` : ''}${cmpChanged ? `<code class="ev ev--cmp">${T('was')}: ${esc(br ? `${br.verdict}${br.score != null ? ' · ' + br.score.toFixed(2) : ''}${br.evidence || br.note ? ' — ' + (br.evidence || br.note) : ''}` : T('skip').toLowerCase())}</code>` : ''}${hasBox ? `<span class="where">${where}</span>` : ['meta', 'console'].includes(c.target?.kind) ? `<button type="button" class="where where--go" data-jump="${esc(c.target.kind)}">${where} →</button>` : `<span class="where">${where}</span>`}</div></li>`; }).join('') || `<li class="st-pass"><span class="mark">–</span><span>—</span></li>`}</ul></div>
       ${!n.item && canWrite() && n.criteria.some((c) => c.type === 'manual' || (c.by_locale?.[S.loc]?.[v.name]?.verdict === 'needs_review')) ? `<div class="sec"><h4>${T('decideManual')}</h4>${n.criteria.filter((c) => c.type === 'manual' || c.by_locale?.[S.loc]?.[v.name]?.verdict === 'needs_review').map((c) => `<div class="mdec"><p class="mdec__t"><span class="id">${esc(c.id)}</span> ${esc(c.text)}</p><div class="mdec__row"><input type="text" data-mnote="${esc(c.id)}" placeholder="${T('manualNotePh')}" aria-label="${esc(c.id)}: ${T('manualNotePh')}"><button class="btn" data-manual="${esc(c.id)}" data-v="pass">${T('manualPass')}</button><button class="btn" data-manual="${esc(c.id)}" data-v="fail">${T('manualFail')}</button></div></div>`).join('')}</div>` : ''}
       ${commentsBlock({ scope: 'step', nodeId: n.id, pinnable: !!cap && !['live', 'view'].includes(S.lbMode) })}
+      ${issuesBlock(n, v)}
       </div>
       <div class="lbtab" data-pane="page" ${S.lbTab === 'page' ? '' : 'hidden'}>
       ${sigSection(cap)}
@@ -2875,7 +3103,7 @@ function openLb (id, vpName, opts = {}) {
       ${n.execution ? `<div class="sec"><h4>${T('execution')} <span class="strategy">${esc(n.execution.strategy)}</span></h4><p class="instr">${esc(n.execution.instructions)}</p></div>` : ''}
       ${traceSection(cap)}
       ${consoleSection(cap)}
-      <div class="sec" id="techSec"><h4>${T('tech')}</h4><dl class="kv"><dt>${T('commit')}</dt><dd>${esc(g.commit || '—')} · ${esc(g.branch || '')}</dd><dt>${T('env')}</dt><dd>${esc(RUN.environment.name)}</dd>${cap ? `<dt>${T('captured')}</dt><dd>${fmtDate(cap.captured_at)}</dd><dt>${T('console')}</dt><dd>${esc(cap.console_errors)} ${T('errors')} · ${esc(cap.blocked)} ${T('blocked')}</dd>${RUN.usage?.nodes?.[n.id] ? `<dt>${T('size')}</dt><dd>${fmtBytes(RUN.usage.nodes[n.id].bytes)} · ${RUN.usage.nodes[n.id].files} ${T('files')}${RUN.usage.nodes[n.id].captures?.[S.loc]?.[v.name] ? ` · ${S.loc}/${v.name} ${fmtBytes(RUN.usage.nodes[n.id].captures[S.loc][v.name])}` : ''}</dd>` : ''}${cap.platform ? `<dt>${T('platformWord')}</dt><dd>${esc(platformLabel(cap.platform))}${cap.device ? ` · ${esc(cap.device)}` : ''}</dd>` : ''}<dt>${T('files')}</dt><dd>${cap.html ? `<a class="pr" href="${esc(asset(cap.html))}" target="_blank" rel="noopener">HTML</a> · ` : ''}${cap.tree ? `<a class="pr" href="${esc(asset(cap.tree))}" target="_blank" rel="noopener">${T('uiTree')}</a> · ` : ''}<a class="pr" href="${esc(asset(cap.image || cap.png))}" target="_blank" rel="noopener">${(cap.image || cap.png || '').endsWith('.webp') ? 'WebP' : 'PNG'}</a>${cap.eval ? ` · <a class="pr" href="${esc(asset(cap.eval))}" target="_blank" rel="noopener">${T('viewEval')}</a>` : ''}</dd>` : ''}</dl></div>
+      <div class="sec" id="techSec"><h4>${T('tech')}</h4><dl class="kv"><dt>${T('commit')}</dt><dd>${esc(g.commit || '—')} · ${esc(g.branch || '')}</dd><dt>${T('env')}</dt><dd>${esc(RUN.environment.name)}</dd>${cap ? `<dt>${T('captured')}</dt><dd>${fmtDate(cap.captured_at)}</dd><dt>${T('console')}</dt><dd>${esc(cap.console_errors)} ${T('errors')} · ${esc(cap.blocked)} ${T('blocked')}</dd>${RUN.usage?.nodes?.[n.id] ? `<dt>${T('size')}</dt><dd>${fmtBytes(RUN.usage.nodes[n.id].bytes)} · ${RUN.usage.nodes[n.id].files} ${T('filesWord')}${RUN.usage.nodes[n.id].captures?.[S.loc]?.[v.name] ? ` · ${S.loc}/${v.name} ${fmtBytes(RUN.usage.nodes[n.id].captures[S.loc][v.name])}` : ''}</dd>` : ''}${cap.platform ? `<dt>${T('platformWord')}</dt><dd>${esc(platformLabel(cap.platform))}${cap.device ? ` · ${esc(cap.device)}` : ''}</dd>` : ''}<dt>${T('files')}</dt><dd>${cap.html ? `<a class="pr" href="${esc(asset(cap.html))}" target="_blank" rel="noopener">HTML</a> · ` : ''}${cap.tree ? `<a class="pr" href="${esc(asset(cap.tree))}" target="_blank" rel="noopener">${T('uiTree')}</a> · ` : ''}<a class="pr" href="${esc(asset(cap.image || cap.png))}" target="_blank" rel="noopener">${(cap.image || cap.png || '').endsWith('.webp') ? 'WebP' : 'PNG'}</a>${cap.eval ? ` · <a class="pr" href="${esc(asset(cap.eval))}" target="_blank" rel="noopener">${T('viewEval')}</a>` : ''}</dd>` : ''}</dl></div>
       </div>
     </div></div>`;
   // a live frame keeps running when only the side panel changes (new comment, status, draft event)
@@ -2899,6 +3127,7 @@ function openLb (id, vpName, opts = {}) {
   // a tool chosen in the "⋯" menu closes it, so the preview is free for the click that follows (Inspect, Comment on element)
   $('lbMore').onclick = (e) => { if (e.target.closest('button')) setTimeout(closeLbMore, 0); };
   if ($('lbBack')) $('lbBack').onclick = () => { closeLb(); openStack(n.stack, { focus: n.itemId }); };
+  $('lbRuns').onclick = () => openBrowser({ level: 'runs' });
   if ($('lbComments')) $('lbComments').onclick = () => focusComposer();
   placeCommentPins($('lbImg'), n, cap, v);
   $('lbLink').onclick = async () => { try { await navigator.clipboard.writeText(location.href); toast(T('linkCopied')); } catch { toast(location.href); } };
@@ -3009,6 +3238,7 @@ function lbSheetFit () {
   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`);
+  fitLive(); // the stage ends where the sheet starts
 }
 const LB_RO = typeof ResizeObserver === 'function' ? new ResizeObserver(() => lbSheetFit()) : null;
 /** The phone bottom sheet of the detail: peek (title and status), half, full. */
@@ -3016,6 +3246,7 @@ function setSheet (st) {
   S.lbSheet = st; $('lb').dataset.sheet = st;
   $('lbGrab')?.setAttribute('aria-expanded', String(st !== 'peek'));
   if (st === 'peek' && $('lbSide')) $('lbSide').scrollTop = 0;
+  fitLive();
 }
 /** Focus: only this step's capture or live page, full viewport. Previous / next and the switches keep it on;
     the prototype (P) is a separate presentation and returns here when it ends. */
@@ -3049,6 +3280,22 @@ function renderFocusBar (lb, n, v, cap, list, i) {
   $('lbFshow').onclick = (e) => { e.stopPropagation(); fxWake(); };
   FX.over = false; fxWake();
 }
+/** Zoom of the screenshot in the detail preview (touch): 1× to 5×, kept on the preview element (a new step starts at 1×). */
+const LZ = { k: 1, el: null, pinch: null, after: 0 };
+function lbZoomSync () { const sc = $('lbScroll'); if (sc !== LZ.el) { LZ.el = sc; LZ.k = 1; } return sc; }
+function lbZoom (k, cx, cy) {
+  const sc = lbZoomSync(); if (!sc) return;
+  k = Math.max(1, Math.min(5, k)); if (k < 1.03) k = 1;
+  const r = sc.getBoundingClientRect(), px = cx - r.left, py = cy - r.top, f = k / LZ.k;
+  const ox = sc.scrollLeft + px, oy = sc.scrollTop + py;
+  // CSS zoom keeps the layout real (the preview scrolls over the bigger picture); a block keeps its 1× width, zoomed
+  for (const c of sc.children) {
+    if (k > 1) { if (!c.dataset.w0) { c.dataset.w0 = String(c.getBoundingClientRect().width); c.style.width = `${c.dataset.w0}px`; } c.style.zoom = String(k); }
+    else { delete c.dataset.w0; c.style.width = ''; c.style.zoom = ''; }
+  }
+  LZ.k = k; sc.style.setProperty('--pz', String(k)); sc.classList.toggle('is-zoomed', k > 1);
+  sc.scrollLeft = ox * f - px; sc.scrollTop = oy * f - py;
+}
 /** Listeners that live as long as the detail element: it re-renders its content, these stay. */
 function wireLbOnce (lb) {
   if (lb.dataset.wired) return; lb.dataset.wired = '1';
@@ -3061,13 +3308,29 @@ function wireLbOnce (lb) {
     if (!S.focus || !e.target.closest('#lbScroll') || e.target.closest('button,a,input,select,textarea')) return;
     if (lb.classList.contains('is-idle')) fxWake(); else if (lastPointer !== 'mouse') fxHide();
   });
+  // a touch screen: two fingers zoom the screenshot inside the preview (the page itself does not zoom), a double tap
+  // switches 1× / 2× at the tapped point; zoomed in, one finger pans the preview (it scrolls)
+  const dist = (e) => { const [a, b] = e.touches; return { d: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) || 1, x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 }; };
+  let tap = null;
+  lb.addEventListener('touchstart', (e) => {
+    if (e.touches.length !== 2 || !e.target.closest('#lbScroll') || e.target.closest('.cmpov, .is-drawing')) return;
+    lbZoomSync(); const g = dist(e); LZ.pinch = { d: g.d, k: LZ.k }; tap = null;
+  }, { passive: true });
+  lb.addEventListener('touchmove', (e) => { if (!LZ.pinch || e.touches.length !== 2) return; e.preventDefault(); const g = dist(e); lbZoom(LZ.pinch.k * g.d / LZ.pinch.d, g.x, g.y); }, { passive: false });
+  lb.addEventListener('touchend', (e) => {
+    if (LZ.pinch) { if (e.touches.length < 2) { LZ.pinch = null; tap = null; LZ.after = Date.now(); } return; }
+    const t = e.changedTouches[0]; if (e.touches.length || !t || !e.target.closest('#lbScroll') || e.target.closest('button,a,input,select,textarea,.cmpov,.is-drawing') || Date.now() - (LZ.after || 0) < 400) { tap = null; return; }
+    const now = Date.now();
+    if (tap && now - tap.t < 320 && Math.hypot(t.clientX - tap.x, t.clientY - tap.y) < 30) { tap = null; lbZoomSync(); lbZoom(LZ.k > 1.05 ? 1 : 2, t.clientX, t.clientY); return; }
+    tap = { t: now, x: t.clientX, y: t.clientY };
+  }, { passive: true });
   // focus on a touch screen: a swipe sideways moves to the previous or next step, unless the page is pinch-zoomed
   lb.addEventListener('touchstart', (e) => { swipe = S.focus && e.touches.length === 1 && e.target.closest('#lbScroll') && !e.target.closest('.cmpov, .is-drawing') ? { x: e.touches[0].clientX, y: e.touches[0].clientY, t: Date.now() } : null; }, { passive: true });
   lb.addEventListener('touchmove', (e) => { if (e.touches.length > 1) swipe = null; }, { passive: true });
   lb.addEventListener('touchend', (e) => {
     const sw = swipe; swipe = null; if (!sw || !S.focus) return;
     const t = e.changedTouches[0], dx = t.clientX - sw.x, dy = t.clientY - sw.y, sc = $('lbScroll');
-    if ((window.visualViewport?.scale || 1) > 1.05 || Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5 || Date.now() - sw.t > 900) return;
+    if ((window.visualViewport?.scale || 1) > 1.05 || (lbZoomSync(), LZ.k > 1.05) || Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5 || Date.now() - sw.t > 900) return;
     if (sc && sc.scrollWidth > sc.clientWidth + 2) return; // a capture wider than the screen pans sideways instead
     $(dx < 0 ? 'lbNext' : 'lbPrev')?.click();
   }, { passive: true });
@@ -3076,7 +3339,7 @@ function wireLbOnce (lb) {
     if (!lbPhone() || S.focus || e.button > 0) return;
     const h = e.target.closest('#lbGrab, .lb__head'); if (!h || e.target.closest('button,a,input,select,textarea,label')) return;
     const side = $('lbSide'), box = side.parentElement.getBoundingClientRect(), stage = lb.querySelector('.lb__stage').getBoundingClientRect();
-    const peekH = box.bottom - stage.bottom, fullH = box.height - 48, halfH = box.height * 0.58;
+    const peekH = box.bottom - stage.bottom, fullH = box.height - (parseFloat(getComputedStyle(side.parentElement).getPropertyValue('--sheet-gap')) || 140), halfH = box.height * 0.58;
     const y0 = e.clientY, h0 = side.getBoundingClientRect().height; let moved = false;
     const move = (ev) => { const dy = ev.clientY - y0; if (!moved && Math.abs(dy) < 6) return; moved = true; side.classList.add('is-drag'); side.style.overflow = 'hidden'; side.style.height = `${Math.max(peekH, Math.min(fullH, h0 - dy))}px`; };
     const up = (ev) => {
@@ -3088,12 +3351,45 @@ function wireLbOnce (lb) {
     };
     addEventListener('pointermove', move); addEventListener('pointerup', up); addEventListener('pointercancel', up);
   });
+  // an open sheet: a tap on the preview above it lowers the sheet again (pins, drawings and Dev mode keep their taps)
+  lb.addEventListener('click', (e) => {
+    if (!lbPhone() || S.focus || (S.lbSheet || 'peek') === 'peek' || !e.target.closest('.lb__scroll')) return;
+    if (C.pinMode || S.ignDraw || DEV.on || LIVE.mode || e.target.closest('button,a,input,select,textarea,label,.pinmark,.is-pinning,.is-drawing')) return;
+    setSheet('peek');
+  });
   lb.addEventListener('keydown', (e) => { if (e.target.id === 'lbGrab' && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); setSheet(S.lbSheet === 'peek' ? 'half' : 'peek'); } });
   // tabs and the comment composer need the sheet open
   lb.addEventListener('focusin', (e) => { if (lbPhone() && !S.focus && S.lbSheet === 'peek' && e.target.closest('.lbtabs, .lbtab')) setSheet('half'); });
 }
+/* Modal overlays (step detail, stack, browser, replay, prototype, review, grid): while one is open the canvas
+   behind it is inert, so Tab stays in the overlay and nothing hidden behind it takes focus. Each dialog is named
+   by its own title while that title is on screen (a reference to a missing id names nothing). */
+const MODALS = ['si', 'lb', 'br', 'rp', 'pt', 'rv', 'gv'];
+const MODAL_TITLES = { si: 'siTitle', lb: 'lbTitle' };
+const openModal = () => MODALS.map((id) => $(id)).find((el) => el && !el.hidden) || null;
+function syncModals () {
+  for (const [id, title] of Object.entries(MODAL_TITLES)) {
+    const el = $(id), t = document.getElementById(title); if (!el) continue;
+    if (!el.hidden && t && el.contains(t)) el.setAttribute('aria-labelledby', title); else el.removeAttribute('aria-labelledby');
+  }
+  const app = $('app'); if (app) app.inert = !!openModal();
+}
+function modalA11y () {
+  const mo = new MutationObserver(syncModals);
+  for (const id of MODALS) { const el = $(id); if (el) mo.observe(el, { attributes: true, attributeFilter: ['hidden'], childList: true, subtree: true }); }
+  syncModals();
+  // the skip link: past the top bar and the side panel to the canvas or the index, or into the open overlay
+  $('skipLink').onclick = (e) => {
+    e.preventDefault();
+    const dlg = openModal();
+    const t = dlg ? dlg.querySelector('h3[id], button, [href], input, select, textarea') : S.mode === 'index' ? $('ri') : $('vp');
+    if (!t) return;
+    if (!t.matches('button, [href], input, select, textarea') && !t.hasAttribute('tabindex')) t.tabIndex = -1;
+    t.focus();
+  };
+}
 function setHash (p) {
-  const all = Object.fromEntries(Object.entries({ ...(p || {}), cmp: S.cmp?.id, mode: S.mode === 'index' ? 'index' : null }).filter(([, x]) => x));
+  const all = Object.fromEntries(Object.entries({ ...(p || {}), cmp: S.cmp?.id, mode: S.mode === 'index' ? 'index' : null, lang: HASH_LANG }).filter(([, x]) => x));
   const h = Object.keys(all).length ? '#' + new URLSearchParams(all).toString() : ' ';
   history.replaceState(null, '', h === ' ' ? location.pathname + location.search : h);
 }
@@ -3104,12 +3400,14 @@ function applyHash () {
   if (RV.open) { RV.open = false; $('rv').hidden = true; }
   if (p.get('grid') && byId(p.get('grid'))) { if (!GV.open || GV.id !== p.get('grid')) gvOpen(p.get('grid')); return; }
   if (GV.open) { GV.open = false; $('gv').hidden = true; $('gv').innerHTML = ''; }
+  // #loc=<locale> picks the locale of the run on every view (map, index, replay, comments), not only a step's
+  if (p.get('loc') && RUN.scope.locales.includes(p.get('loc')) && p.get('loc') !== S.loc) { S.loc = p.get('loc'); renderAll(); }
   if ((p.get('mode') === 'index') !== (S.mode === 'index') && p.has('mode')) { S.mode = p.get('mode') === 'index' ? 'index' : 'map'; applyMode(); }
   const cmp = p.get('cmp');
   if (cmp && cmp !== S.cmp?.id && cmp !== RUN.id) { loadCmp(cmp).then(() => { if (p.get('step') || p.get('replay')) applyHash(); }); return; }
   if (p.get('replay')) { const path = (p.get('path') || p.get('step') || '').split(',').filter((id) => byId(id)); if (!S.rp || S.rp.path.join(',') !== path.join(',')) rpOpen(path); return; }
   if (S.rp) rpClose();
-  if (p.get('comments')) showCommentsFromHash(p.get('comments'));
+  if (p.get('comments') && !p.get('step')) showCommentsFromHash(p.get('comments'));
   // a shared link straight into the prototype: #present=<step>&loc=…&vp=…
   const pres = p.get('present');
   if (pres && byId(pres)) { if (p.get('loc') && RUN.scope.locales.includes(p.get('loc')) && p.get('loc') !== S.loc) { S.loc = p.get('loc'); renderAll(); } ptOpen(pres, p.get('vp')); return; }
@@ -3121,6 +3419,7 @@ function applyHash () {
   S.pendingAc = p.get('ac');
   S.focus = p.get('focus') === '1'; // #step=<id>&focus=1 opens the step's preview alone
   openLb(step, p.get('vp'));
+  if (p.get('comments') === 'step' || p.get('thread')) revealStepComments(p.get('thread'));
 }
 
 /* ---------- replay: guided walkthrough with branch choice ---------- */
@@ -3165,7 +3464,7 @@ function renderReplay () {
     <div class="rp__top"><span class="brand">Kaloko <small>${T('replay')}</small></span><span class="note">${T('rpStep')} ${S.rp.path.length}</span><span class="crumbs" id="rpCrumbs">${crumbs}</span><span class="spacer"></span>
       ${rpHasVideo(v) ? `<button class="btn" id="rpVid" aria-pressed="${!!S.rpVideo}" title="${esc(T('recHint'))}">▶ ${T('videoMode')}</button>` : ''}${walkthroughLink()}<div class="seg" id="rpLoc"></div><div class="seg" id="rpVp"></div><span class="note">${T('rpKeys')}</span><button class="icon-btn" id="rpClose" aria-label="Close">${ICON.close}</button></div>
     <div class="rp__body"><div class="rp__stage" id="rpStage">${stage}</div>
-      <aside class="rp__side"><div class="lb__head"><div class="lb__row">${n.kind === 'decision' ? `<span class="diamond" style="width:14px;height:14px"></span>` : `<span class="kind">${ICON[n.kind]}</span><span class="badge st-${s}">${MARK[s]} ${T(s)}</span>`}<span class="note">${esc(RUN.scenario.title)}</span></div><h3>${esc(loc(n.title))}</h3>${n.kind !== 'decision' ? `<div class="node__path">${esc(cap?.url || loc(n.path) || '')}</div>` : ''}</div>
+      <aside class="rp__side" aria-label="${esc(T('rpSideLabel'))}"><div class="lb__head"><div class="lb__row">${n.kind === 'decision' ? `<span class="diamond" style="width:14px;height:14px"></span>` : `<span class="kind">${ICON[n.kind]}</span><span class="badge st-${s}">${MARK[s]} ${T(s)}</span>`}<span class="note">${esc(RUN.scenario.title)}</span></div><h3>${esc(loc(n.title))}</h3>${n.kind !== 'decision' ? `<div class="node__path">${esc(cap?.url || loc(n.path) || '')}</div>` : ''}</div>
         ${n.purpose ? `<div class="sec"><h4>${T('purpose')}</h4><p class="purpose">${esc(n.purpose)}</p></div>` : ''}${crit}
         ${n.kind !== 'decision' ? commentsBlock({ scope: 'step', nodeId: n.id, compact: true }) : ''}
         ${n.kind !== 'decision' && n.execution ? `<div class="sec"><h4>${T('execution')}</h4><p class="instr">${esc(n.execution.instructions || '')}</p></div>` : ''}</aside></div>
@@ -3215,6 +3514,26 @@ function issuesSections (issues) {
     + (looks.length ? `<div class="sec"><h4>${T('worthLook')}</h4><p class="note" style="margin:0 0 6px">${T('sigLead')}</p><ul class="issues">${looks.map(({ n, w }) => `<li><button data-go="${esc(n.id)}"><span class="badge st-partial">⚠</span><span><b>${esc(loc(n.title))}</b></span><small>${esc(w.join(' · '))}</small></button></li>`).join('')}</ul></div>` : '');
 }
 
+/* ---------- "what changed" notes of a design version (batch G) ---------- */
+const noteTxt = (t) => t == null ? '' : typeof t === 'string' ? t : (t[UI] || t.en || '');
+const stepNote = (id) => (isDesign() && !isDraft() && RUN.notes?.steps || []).find((x) => x.step === id) || null;
+function versionNotesHtml () {
+  const nt = isDesign() && !isDraft() ? RUN.notes : null;
+  if (!nt) return '';
+  const steps = nt.steps || [];
+  const mark = (r) => r === 'new' ? ['pass', '+'] : r === 'removed' ? ['fail', '−'] : r === 'note' ? ['skip', '✎'] : ['partial', 'Δ'];
+  return `<div class="sec" id="versionNotes"><h4>${T('whatChanged')}${nt.from ? ` <span class="note">${T('sinceVersion')} v${esc(nt.from.version)}</span>` : ''}</h4>`
+    + (noteTxt(nt.summary) ? `<p class="note" style="margin:0 0 6px;white-space:pre-line">${esc(noteTxt(nt.summary))}</p>` : '')
+    + (steps.length ? `<ul class="issues">${steps.map((x) => { const [st, m] = mark(x.reason); return `<li><button data-go="${esc(x.step)}" ${byId(x.step) ? '' : 'disabled'}><span class="badge st-${st}">${m}</span><span><b>${esc(loc(byId(x.step)?.title) || x.title || x.step)}</b>${x.locales?.length && RUN.scope?.locales?.length > 1 ? ` <span class="note">${x.locales.map(esc).join(', ')}</span>` : ''}</span><small>${esc(noteTxt(x.text))}</small></button></li>`; }).join('')}</ul>` : '')
+    + (nt.edited_by ? `<p class="note" style="margin:6px 0 0">${T('notesBy')} ${esc(nt.edited_by)}</p>` : '')
+    + (APP() && canWrite() && !['viewer'].includes(APP().user?.role) && RUN.version ? `<button class="linkish" id="notesEdit" style="margin-top:6px">${T('notesEdit')}</button>` : '')
+    + '</div>';
+}
+function stepNoteHtml (n) {
+  const x = stepNote(n.id);
+  return x && noteTxt(x.text) ? `<p class="note step-note" data-step-note><b>${T('whatChanged')}${RUN.notes?.from ? ` (v${esc(RUN.notes.from.version)} → v${esc(RUN.version)})` : ''}:</b> ${esc(noteTxt(x.text))}</p>` : '';
+}
+
 function renderReport () {
   const c = RUN.summary, tot = screens().length || 1, pr = prevRun();
   const all = screens().flatMap((n) => n.criteria), ok = all.filter((x) => critSt(x) === 'pass').length;
@@ -3223,6 +3542,7 @@ function renderReport () {
   $('rside').innerHTML = `
    <div class="rside__head"><div style="flex:1;min-width:0"><div class="seg-label">${T('summary')}</div><h3>${RUN.issue ? `${RUN.issue.url ? `<a class="pr" href="${esc(RUN.issue.url)}" target="_blank" rel="noopener">${esc(RUN.issue.repo ? RUN.issue.repo + '#' : '#')}${esc(String(RUN.issue.number))}</a>` : '#' + esc(String(RUN.issue.number))} · ` : ''}${esc(RUN.scenario.title)}</h3><div class="node__path">${RUN.project ? esc(RUN.project.slug) + ' · ' : ''}${esc(RUN.scenario.id)} · ${fmtDate(RUN.started_at)} · ${esc(RUN.environment.name)} · ${dur()}</div></div><button class="icon-btn" id="rsClose" aria-label="${T('hide')}">${ICON.close}</button></div>
    ${APP() && isDraft() ? `<div class="sec"><h4>${T('draft')} #${esc(RUN.draft.seq)}</h4><p class="note">${T('draftInfo')}</p><div id="draftChanges" class="note"></div></div>` : ''}
+   ${versionNotesHtml()}
    ${APP() && !isDraft() ? `<div class="sec verdict-sec"><h4 class="vhead"><span>${isDesign() ? T('versionVerdict') : T('runVerdict')}</span><span class="badge st-${RUN.verdict?.verdict === 'accepted' ? 'pass' : RUN.verdict?.verdict === 'returned' ? 'fail' : 'skip'}">${T(RUN.verdict?.verdict || 'pending')}</span>${RUN.verdict?.baseline ? `<span class="badge st-partial">${T('baseline')}</span>` : ''}</h4>${RUN.verdict?.by || (RUN.baseline_id && RUN.baseline_id !== RUN.id) ? `<p class="note" style="margin:0 0 8px">${RUN.verdict?.by ? `${esc(RUN.verdict.by)}${RUN.verdict.via === 'token' || RUN.verdict.via === 'agent' ? ` <span class="badge st-skip">${T(RUN.verdict.via === 'agent' ? 'viaAgent' : 'viaToken')}</span>` : ''} · ${fmtDate(RUN.verdict.at)}` : ''}${RUN.baseline_id && RUN.baseline_id !== RUN.id ? `${RUN.verdict?.by ? ' · ' : ''}<a class="pr" href="${runHref(RUN.baseline_id)}">${T('baseline')} →</a>` : ''}</p>` : ''}${RUN.verdict?.note ? `<p class="note">${esc(RUN.verdict.note)}</p>` : ''}${RUN.verdict?.approvers ? `<p class="note">${RUN.verdict.awaiting.length ? `${T('awaiting')}: <b>${RUN.verdict.awaiting.map(esc).join(', ')}</b>` : `${T('approvedByAll')}`}${RUN.verdict.approved_by.length ? ` · ${T('approvedBy')}: ${RUN.verdict.approved_by.map(esc).join(', ')}` : ''}${RUN.verdict.approved_by_tokens?.length ? ` · ${T('approvedBy')} ${T('approvedByTokens')}: ${RUN.verdict.approved_by_tokens.map((a) => esc(a.email)).join(', ')}` : ''}</p>` : ''}
      ${canWrite() ? `<textarea id="rvVerdictNote" hidden rows="2" placeholder="${T('verdictNotePh')}" style="width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:0 0 8px"></textarea>
      <div class="share__row"><button class="btn btn--primary" data-verdict="accepted">${isDesign() ? T('acceptVersion') : T('accept')}</button><button class="btn" data-verdict="returned">${isDesign() ? T('returnVersion') : T('ret')}</button></div>
@@ -3260,7 +3580,14 @@ function renderReport () {
   $('rside').querySelectorAll('[data-verdict]').forEach((b) => { b.onclick = async () => { const note = $('rvVerdictNote').value.trim(); if (b.dataset.verdict === 'returned' && !note) { showNote(); toast(T('noteRequired')); return; } b.disabled = true; try { await postJson('/verdict', { verdict: b.dataset.verdict, note }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
   $('rside').querySelectorAll('[data-public]').forEach((b) => { b.onclick = async () => { if (b.dataset.public === 'on' && !confirm(T('publicConfirm'))) return; b.disabled = true; try { await postJson('/public', { public: b.dataset.public === 'on' }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
   $('rside').querySelectorAll('[data-baseline]').forEach((b) => { b.onclick = async () => { b.disabled = true; try { await postJson('/verdict', { verdict: 'accepted', note: RUN.verdict?.note || '', baseline: b.dataset.baseline === 'set' }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
-  $('rside').querySelectorAll('[data-go],tr[data-id]').forEach((el) => { el.onclick = () => openLb(el.dataset.go || el.dataset.id); });
+  $('rside').querySelectorAll('[data-go],tr[data-id]').forEach((el) => { el.onclick = () => { if (byId(el.dataset.go || el.dataset.id)) openLb(el.dataset.go || el.dataset.id); }; });
+  // the version's summary in someone's own words (designers; step texts too through the API, MCP and --notes)
+  const ne = $('notesEdit'); if (ne) ne.onclick = async () => {
+    const text = prompt(T('notesPrompt'), noteTxt(RUN.notes?.summary));
+    if (text === null || !text.trim()) return;
+    ne.disabled = true;
+    try { await apiJson('PUT', scenarioApi(`/versions/v${RUN.version}/notes`), { notes: { summary: text.trim() } }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); ne.disabled = false; }
+  };
   wireCommentsPanel();
   $('rside').querySelectorAll('.sesslegend [data-sess]').forEach((b) => { b.onclick = () => { S.sess = S.sess === b.dataset.sess ? null : b.dataset.sess; renderAll(); }; });
 }
@@ -3278,8 +3605,9 @@ function runsOf (scId) {
 /* The project picked in the lists is remembered per organization (cookie qw_p_<org>, set by the pages too). */
 function rememberedProject () { const org = window.QAWALK_APP?.org; if (!org) return ''; const m = document.cookie.match(new RegExp(`(?:^|; )qw_p_${org.replace(/[^a-z0-9-]/g, '')}=([^;]*)`)); try { return m ? decodeURIComponent(m[1]) : ''; } catch { return ''; } }
 function rememberProject (v) { const org = window.QAWALK_APP?.org; if (!org) return; try { document.cookie = `qw_p_${org}=${encodeURIComponent(v)}; path=/; max-age=${v ? 31536000 : 0}; samesite=lax${location.protocol === 'https:' ? '; secure' : ''}`; } catch {} }
-function renderBrowser () {
+function renderBrowser (opts = {}) {
   const q = S.brQ.trim().toLowerCase();
+  const had = document.activeElement?.closest?.('#brList [data-sc]')?.dataset.sc; // the catalog may arrive while a scenario has the focus
   const projects = [...new Set(catalog().map((s) => s.project || '').filter(Boolean))].sort();
   const list = catalog().filter((s) => (S.brKind === 'all' || (s.kind || 'task') === S.brKind) && (!S.brProject || (s.project || '') === S.brProject) && (!q || `${s.id} ${s.title} ${s.file || ''} ${s.project || ''}`.toLowerCase().includes(q)));
   seg($('brKind'), [['all', T('all')], ['task', T('tasks')], ['flow', T('flows')]], S.brKind, (v) => { S.brKind = v; renderBrowser(); });
@@ -3287,11 +3615,13 @@ function renderBrowser () {
   bp.innerHTML = `<option value="">${T('projectAll')}</option>${projects.map((p) => `<option value="${esc(p)}" ${p === S.brProject ? 'selected' : ''}>${esc(p)}</option>`).join('')}`;
   bp.onchange = () => { S.brProject = bp.value; rememberProject(bp.value); renderBrowser(); };
   $('brCount').textContent = `${list.length} / ${catalog().length}`;
-  $('brList').innerHTML = list.length ? list.map((s) => { const rs = runsOf(s.id); const last = rs[0]; return `<button class="sc" aria-selected="${s.id === S.brSc}" data-sc="${esc(s.id)}"><span class="sc__title"><span class="sc__id">${esc(s.id)}</span><span>${esc(s.title)}</span></span>${last?.summary ? bar5(last.summary) : '<span class="bar5"></span>'}<span class="sc__meta"><span class="kbadge ${s.kind === 'flow' ? 'kbadge--flow' : ''}">${esc(s.kind || 'task')}</span>${s.project ? `<span class="mono">${esc(s.project)}</span>` : ''}<span>${rs.length} ${T('runs')}</span>${last ? `<span>${T('last')} ${fmtDate(last.started_at)}</span>` : ''}${s.open_comments ? `<span class="cmt" title="${esc(T('openCommentsN'))}: ${s.open_comments}">${ICON.comment}${s.open_comments}</span>` : ''}</span></button>`; }).join('') : `<p class="empty">${T('noScenario')}</p>`;
-  renderBrRuns();
+  $('brList').innerHTML = list.length ? list.map((s) => { const rs = runsOf(s.id); const last = rs[0]; return `<button class="sc" aria-selected="${s.id === S.brSc}" data-sc="${esc(s.id)}"><span class="sc__title"><span class="sc__id">${esc(s.id)}</span><span>${esc(s.title)}</span></span>${last?.summary ? bar5(last.summary) : '<span class="bar5"></span>'}<span class="sc__meta"><span class="kbadge ${s.kind === 'flow' ? 'kbadge--flow' : ''}">${esc(s.kind || 'task')}</span>${s.project ? `<span class="mono">${esc(s.project)}</span>` : ''}<span>${rs.length} ${runsN(rs.length)}</span>${last ? `<span>${T('last')} ${fmtDate(last.started_at)}</span>` : ''}${s.open_comments ? `<span class="cmt" title="${esc(T('openCommentsN'))}: ${s.open_comments}">${ICON.comment}${s.open_comments}</span>` : ''}</span></button>`; }).join('') : `<p class="empty">${T('noScenario')}</p>`;
+  if (had) [...$('brList').querySelectorAll('[data-sc]')].find((b) => b.dataset.sc === had)?.focus({ preventScroll: true });
+  if (opts.runs !== false) renderBrRuns();
 }
 function renderBrRuns () {
   const rs = runsOf(S.brSc);
+  if (phoneBar()) { renderBrCards(rs); return; }
   $('brRunFilters').innerHTML = `<b style="font-size:13px">${esc(S.brSc)}</b>`;
   if (!rs.length) { $('brRuns').innerHTML = `<p class="empty">${T('noRuns')}</p>`; return; }
   let lastDay = null; const rows = [];
@@ -3303,20 +3633,83 @@ function renderBrRuns () {
   }
   $('brRuns').innerHTML = `<table class="runs"><thead><tr><th>${T('time')}</th><th>${T('env')}</th><th>${T('branch')} · ${T('commit')}</th><th class="hide-s">${T('author')}</th><th class="hide-s">PR</th><th>${T('result')}</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;
 }
-function openBrowser () {
+/** Phones: the runs of one scenario as cards under a header with a way back to the scenarios. */
+function renderBrCards (rs) {
+  const sc = catalog().find((x) => x.id === S.brSc) || { id: S.brSc, title: '' };
+  const back = document.activeElement?.id === 'brBack';
+  $('brRunFilters').innerHTML = `<div class="br__runhead"><button class="icon-btn" id="brBack" aria-label="${esc(T('allScenarios'))}" title="${esc(T('allScenarios'))}"><svg class="i" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg></button><div class="br__rh"><b>${esc(sc.title || sc.id)}</b><small><span class="mono">${esc(sc.id)}</span> · ${rs.length} ${runsN(rs.length)}</small></div><button class="icon-btn" data-br-close aria-label="${esc(T('close'))}" title="${esc(T('close'))}">${ICON.close}</button></div>`;
+  if (back) $('brBack').focus({ preventScroll: true });
+  if (!rs.length) { $('brRuns').innerHTML = `<p class="empty">${T('noRuns')}</p>`; return; }
+  // compare: the other runs of the scenario on screen (the compare list of the menu)
+  const cmpIds = S.brSc === RUN.scenario.id && !isDesign() ? new Set(cmpCandidates().map((c) => c.id)) : new Set();
+  let lastDay = null; const out = [];
+  for (const r of rs) {
+    const d = new Date(r.started_at); const day = d.toDateString();
+    if (day !== lastDay) { lastDay = day; out.push(`<h4 class="rday">${d.getDate()}. ${d.getMonth() + 1}. ${d.getFullYear()}</h4>`); }
+    const c = r.summary || {}; const tot = (c.pass || 0) + (c.partial || 0) + (c.fail || 0) + (c.skip || 0);
+    const time = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+    const cur = r.id === RUN.id;
+    const verdict = cur ? RUN.verdict?.verdict || r.verdict : r.verdict;
+    const base = r.baseline || (S.brSc === RUN.scenario.id && r.id === RUN.baseline_id);
+    const g = r.git || {};
+    const ref = g.branch || g.commit ? `${esc(g.branch || '')}${g.branch && g.commit ? ' · ' : ''}${esc(g.commit || '')}` : '';
+    const on = S.cmp?.id === r.id;
+    out.push(`<div class="rcard" aria-current="${cur}"><button class="rcard__main" data-run="${esc(r.id)}"><span class="rcard__l1"><span class="mono">${time}</span>${r.environment?.name ? `<span class="run__env run__env--${esc(r.environment.name)}">${esc(r.environment.name)}</span>` : ''}${cur ? `<span class="rmark rmark--cur">${T('brShown')}</span>` : ''}${base ? `<span class="rmark rmark--base">${T('cmpBaseline')}</span>` : ''}${verdict === 'accepted' ? `<span class="rmark rmark--ok">✓ ${T('accepted')}</span>` : verdict === 'returned' ? `<span class="rmark rmark--back">↩ ${T('returned')}</span>` : ''}</span>${ref ? `<span class="rcard__git">${ref}</span>` : ''}${g.message ? `<span class="rcard__msg">${esc(g.message)}</span>` : ''}<span class="rcard__res">${bar5(c)}<span>${esc(c.pass || 0)}/${esc(tot)}</span>${r.open_comments ? `<span class="cmt" title="${esc(T('openCommentsN'))}: ${r.open_comments}">${ICON.comment}${r.open_comments}</span>` : ''}</span></button>${cmpIds.has(r.id) ? `<button class="btn rcard__cmp" data-cmp="${esc(r.id)}" aria-pressed="${on}" aria-label="${esc(`${on ? T('cmpStop') : T('cmpRun')} ${d.getDate()}. ${d.getMonth() + 1}. ${time}`)}">${on ? T('cmpActive') : T('compare')}</button>` : ''}</div>`);
+  }
+  $('brRuns').innerHTML = `<div class="rcards">${out.join('')}</div>`;
+}
+/** Which level of the explorer a phone shows: the scenarios ('sc') or the runs of one ('runs'). */
+function brLevel (level) {
+  S.brLevel = level; $('br').dataset.level = level;
+  renderBrowser();
+  if (!phoneBar()) return;
+  if (level === 'runs') {
+    $('brRuns').scrollTop = 0;
+    $('brRuns').querySelector('.rcard[aria-current="true"]')?.scrollIntoView({ block: 'center' });
+    $('brBack')?.focus({ preventScroll: true });
+  } else {
+    const sel = $('brList').querySelector('.sc[aria-selected="true"]');
+    if (sel) { sel.scrollIntoView({ block: 'nearest' }); sel.focus({ preventScroll: true }); }
+  }
+}
+/** Opens a run; the open step stays open when the run has it (same scenario). */
+function goRun (id) {
+  const href = runHref(id); if (href === '#') return;
+  const keep = S.open && !$('lb').hidden && S.brSc === RUN.scenario.id;
+  location.href = keep ? `${href}#${new URLSearchParams(Object.entries({ step: S.open, loc: S.loc, vp: S.lbVp }).filter(([, v]) => v)).toString()}` : href;
+}
+function openBrowser (opts = {}) {
   S.brProject = rememberedProject(); // the project picked in the lists applies here too
-  S.brSc = RUN.scenario.id; $('br').hidden = false; renderBrowser(); $('brSearch').value = S.brQ; $('brSearch').focus();
+  if (!$('br').contains(document.activeElement)) S.brFrom = document.activeElement;
+  S.brSc = RUN.scenario.id; $('br').hidden = false; $('brSearch').value = S.brQ;
+  brLevel(opts.level || 'sc');
+  // on a phone the keyboard would cover half of the list: the search field waits for a tap
+  if (!phoneBar() || !matchMedia('(pointer:coarse)').matches) $('brSearch').focus();
   // on the service the catalog of scenarios comes when the browser opens (the run itself loads without it)
   const a = APP();
-  if (a?.user && !RUN.catalog && !S.catLoading && !isDraft()) { S.catLoading = true; fetch(`${a.api}/orgs/${a.org}/scenarios?runs=60`, { credentials: 'same-origin' }).then((r) => r.ok ? r.json() : null).then((c) => { if (c) { RUN.catalog = c; if (!$('br').hidden) renderBrowser(); } }).catch(() => {}).finally(() => { S.catLoading = false; }); }
+  if (a?.user && !RUN.catalog && !S.catLoading && !isDraft()) { S.catLoading = true; fetch(`${a.api}/orgs/${a.org}/scenarios?runs=60`, { credentials: 'same-origin' }).then((r) => r.ok ? r.json() : null).then((c) => { if (c) { RUN.catalog = c; if (!$('br').hidden) renderBrowser({ runs: S.brSc !== RUN.scenario.id }); } }).catch(() => {}).finally(() => { S.catLoading = false; }); }
+}
+function closeBrowser () {
+  if ($('br').hidden) return;
+  $('br').hidden = true;
+  const from = S.brFrom; S.brFrom = null;
+  if (from?.isConnected && from.getClientRects().length) from.focus({ preventScroll: true });
 }
-function closeBrowser () { $('br').hidden = true; }
 function wireBrowser () {
-  $('picker').onclick = openBrowser; $('allRuns').onclick = openBrowser; $('brClose').onclick = closeBrowser;
-  $('br').addEventListener('click', (e) => { if (e.target === $('br')) closeBrowser(); });
+  $('picker').onclick = () => openBrowser(); $('allRuns').onclick = () => openBrowser(); $('brClose').onclick = closeBrowser;
+  $('br').addEventListener('click', (e) => { if (e.target === $('br') || e.target.closest('[data-br-close]')) closeBrowser(); else if (e.target.closest('#brBack')) brLevel('sc'); });
   $('brSearch').addEventListener('input', (e) => { S.brQ = e.target.value; renderBrowser(); });
-  $('brList').addEventListener('click', (e) => { const b = e.target.closest('[data-sc]'); if (!b) return; S.brSc = b.dataset.sc; renderBrowser(); });
-  $('brRuns').addEventListener('click', (e) => { if (e.target.closest('a')) return; const tr = e.target.closest('tr[data-run]'); if (!tr || tr.dataset.run === RUN.id) return; location.href = runHref(tr.dataset.run); });
+  $('brList').addEventListener('click', (e) => { const b = e.target.closest('[data-sc]'); if (!b) return; S.brSc = b.dataset.sc; if (phoneBar()) brLevel('runs'); else renderBrowser(); });
+  $('brRuns').addEventListener('click', (e) => {
+    if (e.target.closest('a')) return;
+    const cmp = e.target.closest('[data-cmp]');
+    if (cmp) { const id = S.cmp?.id === cmp.dataset.cmp ? '' : cmp.dataset.cmp; closeBrowser(); loadCmp(id); return; }
+    const tr = e.target.closest('tr[data-run], button[data-run]'); if (!tr) return;
+    if (tr.dataset.run === RUN.id) { if (phoneBar()) closeBrowser(); return; }
+    goRun(tr.dataset.run);
+  });
+  // turning the phone (or resizing the window) across the phone width redraws the open explorer in its layout
+  PHONE_MQ.addEventListener?.('change', () => { if (!$('br').hidden) brLevel(phoneBar() ? S.brLevel || 'sc' : 'sc'); });
 }
 
 /* ---------- design: drafts, versions, live steps, multiplayer (#42) ---------- */
@@ -3390,7 +3783,7 @@ function renderDesignBar () {
   const vs = (RUN.versions || []).slice(0, 8);
   const draftHref = `/${enc(a.org)}/scenarios/${enc(RUN.scenario.id)}/draft`;
   bar.innerHTML = `<div class="seg-label" style="margin:10px 0 6px">${T('versions')}</div><div class="dbar">`+`<a class="vchip vchip--draft" href="${draftHref}" ${isDraft() ? 'aria-current="true"' : ''} title="${T('openDraft')}">${T('draft')}${isDraft() ? ` #${esc(RUN.draft.seq)}` : ''}</a>`
-    + vs.map((v) => `<a class="vchip" href="${runHref(v.id)}" ${v.id === RUN.id ? 'aria-current="true"' : ''} title="${esc(v.name || '')} · ${esc(v.by)} · ${fmtDate(v.at)} · ${esc(T(v.verdict))}">v${esc(v.version)}${v.id === refId ? ' <span class="ref" title="' + T('designRef') + '">★</span>' : ''}${v.verdict === 'accepted' ? ' ✓' : ''}</a>`).join('')
+    + vs.map((v) => `<a class="vchip" href="${runHref(v.id)}" ${v.id === RUN.id ? 'aria-current="true"' : ''} title="${esc(v.name || '')} · ${esc(v.by)} · ${fmtDate(v.at)} · ${esc(T(v.verdict))}${noteTxt(v.notes) ? ' · ' + esc(noteTxt(v.notes)) : ''}">v${esc(v.version)}${v.id === refId ? ' <span class="ref" title="' + T('designRef') + '">★</span>' : ''}${v.verdict === 'accepted' ? ' ✓' : ''}</a>`).join('')
     + '</div><div id="dbranches"></div>'
     + (isDraft() ? `<p class="note" style="margin:8px 0 0">${T('publishHint').replace('%V', `v${(RUN.versions?.[0]?.version || 0) + 1}`)}</p>` : '')
     + '<div class="share__row" style="margin-top:8px">'
@@ -3450,9 +3843,12 @@ function fitLive () {
     const w = parseInt(f.style.width, 10);
     const cs = getComputedStyle(host);
     const focus = S.focus && host.id === 'lbScroll' && !$('lb').hidden;
+    // on a phone the detail's preview fills the room between the tools and the sheet; the page scrolls inside
+    const phone = !focus && host.id === 'lbScroll' && !$('lb').hidden && lbPhone();
     const k = Math.min(1, (host.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) - (focus ? 0 : 2)) / w);
     // in focus the live page fills the screen: its real width, scaled down to fit, and as tall as the screen allows
-    const h = focus ? Math.max(1, Math.floor(host.clientHeight / k)) : parseInt(f.dataset.h, 10);
+    const room = host.clientHeight - (phone ? parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + 2 : 0);
+    const h = focus || phone ? Math.max(1, Math.floor(room / k)) : parseInt(f.dataset.h, 10);
     f.style.height = `${h}px`;
     f.style.transformOrigin = '0 0'; f.style.transform = `scale(${k})`;
     box.style.width = `${Math.floor(w * k)}px`; box.style.height = `${Math.floor(h * k)}px`;
@@ -4257,6 +4653,90 @@ async function downloadSignoff (kind, b) {
 }
 document.addEventListener('click', (e) => { const b = e.target.closest?.('[data-signoff]'); if (b) downloadSignoff(b.dataset.signoff, b); });
 
+/* ---------- Jira and Linear (#21): an issue from a step, the issues of the run on the canvas ----------
+   GET …/runs/<id>/issues says which trackers take an issue from this run (connected and mapped for its project),
+   whether this person may create one (Developer / Tester), the run's issues and the issue its branch names. The
+   service writes the issue (screenshot, criterion, notes, link back) and a comment on the step that mirrors it. */
+Object.assign(I18N.cs, {
+  issTitle: 'Issues', issNew: (k) => `Založit issue v ${k === 'Jira' ? 'Jiře' : 'Linearu'}`, issFormTitle: 'Nové issue', issTracker: 'Kam',
+  issCriterion: 'Kritérium', issWholeStep: 'Celý krok', issName: 'Název', issNamePh: 'Prázdné: název se složí z kroku a kritéria', issNote: 'Poznámka pro vývoj',
+  issSend: 'Založit issue', issSending: 'Zakládám issue…', issSent: (k) => `Issue ${k} je založené`, issWhat: 'Do issue půjde snímek, kritérium, připomínky a odkaz zpět na krok. Až bude hotové, komentář u kroku se vyřeší.',
+  iss_open: 'otevřené', iss_done: 'hotové', iss_canceled: 'zrušené', issBranch: 'Issue z větve', issCount: (n) => `${n} ${n === 1 ? 'otevřené issue' : n < 5 ? 'otevřená issues' : 'otevřených issues'}`
+})
+Object.assign(I18N.en, {
+  issTitle: 'Issues', issNew: (k) => `Create a ${k} issue`, issFormTitle: 'New issue', issTracker: 'Where',
+  issCriterion: 'Criterion', issWholeStep: 'The whole step', issName: 'Title', issNamePh: 'Empty: made from the step and the criterion', issNote: 'Note for development',
+  issSend: 'Create the issue', issSending: 'Creating the issue…', issSent: (k) => `Issue ${k} created`, issWhat: 'The issue gets the screenshot, the criterion, the notes and a link back to the step. When it is done, the comment on the step is resolved.',
+  iss_open: 'open', iss_done: 'done', iss_canceled: 'cancelled', issBranch: 'Issue from the branch', issCount: (n) => `${n} open issue${n === 1 ? '' : 's'}`
+})
+var ISS = { data: null, form: null, busy: false }; // var: the footer may render before this line runs
+const issService = () => !!(APP()?.user && APP()?.run && !isDraft() && !APP()?.public);
+async function issLoad () {
+  if (!issService()) return;
+  try {
+    const res = await fetch(runApi('/issues'), { credentials: 'same-origin' });
+    if (!res.ok) return;
+    ISS.data = await res.json();
+    renderNodes(); issFoot();
+    if ((S.open && !$('lb').hidden) || RV.open) rerenderComments(false);
+  } catch {}
+}
+const issOf = (step) => (ISS.data?.issues || []).filter((i) => i.step === step);
+const issTrackers = () => (ISS.data?.trackers || []).filter((t) => t.target);
+/** The canvas card of a step with open issues. */
+function issBadge (id) {
+  const n = issOf(id).filter((i) => i.state === 'open').length;
+  return n ? `<span class="iss-badge" title="${esc(T('issCount')(n))}">⧉ ${n}</span>` : '';
+}
+/** The run's own issue (named by its branch or pull request) beside the GitHub issue in the footer. */
+function issFootHtml () {
+  const l = ISS?.data?.linked; if (!l) return '';
+  return `<span data-iss-linked title="${esc(T('issBranch'))}">${l.url ? `<a class="pr" href="${esc(l.url)}" target="_blank" rel="noopener">${esc(l.key)}</a>` : `<span class="mono">${esc(l.key)}</span>`}${l.state ? ` <span class="note">${esc(T('iss_' + l.state))}</span>` : ''} · </span>`;
+}
+function issFoot () { const f = $('scFoot'); if (f && !f.querySelector('[data-iss-linked]')) f.insertAdjacentHTML('afterbegin', issFootHtml()); }
+/** Issues of a step and the form to create one, in the step detail and in review mode. */
+function issuesBlock (n, v) {
+  if (!ISS.data || !n || n.kind === 'decision' || n.kind === 'stack') return '';
+  const list = issOf(n.id); const trackers = issTrackers();
+  const can = ISS.data.can_create && trackers.length && canWrite();
+  if (!list.length && !can) return '';
+  const items = list.length ? `<ul class="iss-list">${list.map((i) => `<li><a class="pr" href="${esc(i.url)}" target="_blank" rel="noopener">${esc(i.key)}</a> <span class="badge st-${i.state === 'open' ? 'partial' : i.state === 'done' ? 'pass' : 'skip'}">${esc(T('iss_' + i.state))}</span>${i.criterion ? ` <span class="id">${esc(i.criterion)}</span>` : ''} <span class="note">${esc(i.title)}</span></li>`).join('')}</ul>` : '';
+  let tail = '';
+  if (can && ISS.form === n.id) {
+    const crit = (n.criteria || []).slice().sort((a, b) => (a.verdict === 'fail' ? 0 : 1) - (b.verdict === 'fail' ? 0 : 1));
+    const pick = crit.find((c) => (c.by_locale?.[S.loc]?.[v?.name]?.verdict || c.verdict) === 'fail');
+    tail = `<div class="iss-form" data-iss-form="${esc(n.id)}"><p class="note">${esc(T('issWhat'))}</p>
+      ${trackers.length > 1 ? `<label>${esc(T('issTracker'))} <select id="issTracker">${trackers.map((t) => `<option value="${esc(t.kind)}">${esc(t.label)} · ${esc(t.target)}</option>`).join('')}</select></label>` : ''}
+      <label>${esc(T('issCriterion'))} <select id="issCrit"><option value="">${esc(T('issWholeStep'))}</option>${crit.map((c) => `<option value="${esc(c.id)}" ${pick && pick.id === c.id ? 'selected' : ''}>${esc(c.id)} · ${esc(String(critText(c)).slice(0, 60))}</option>`).join('')}</select></label>
+      <label>${esc(T('issName'))} <input id="issName" maxlength="200" placeholder="${esc(T('issNamePh'))}"></label>
+      <label>${esc(T('issNote'))} <textarea id="issNote" rows="2"></textarea></label>
+      <div class="share__row"><button class="btn btn--primary" data-iss-send="${esc(n.id)}" data-iss-vp="${esc(v?.name || '')}">${esc(T('issSend'))}</button><button class="btn" data-iss-cancel>${esc(T('cancel'))}</button></div></div>`;
+  } else if (can) tail = `<div class="share__row">${trackers.map((t) => `<button class="btn" data-iss-new="${esc(n.id)}" data-iss-kind="${esc(t.kind)}">${esc(T('issNew')(t.label))}</button>`).join('')}</div>`;
+  return `<div class="sec iss"><h4>${esc(T('issTitle'))}</h4>${items}${tail}</div>`;
+}
+async function issSend (step, vp) {
+  if (ISS.busy) return;
+  const a = APP(); const trackers = issTrackers();
+  const to = $('issTracker')?.value || ISS.kind || trackers[0]?.kind;
+  ISS.busy = true; toast(T('issSending'));
+  try {
+    const res = await fetch(`${a.api}/orgs/${a.org}/issues`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ run_id: a.run, step, to, criterion: $('issCrit')?.value || undefined, title: $('issName')?.value.trim() || undefined, note: $('issNote')?.value.trim() || undefined, locale: S.loc, viewport: vp || undefined }) });
+    const out = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(out.error || `HTTP ${res.status}`);
+    ISS.form = null;
+    toast(T('issSent')(out.key));
+    await issLoad();
+    await refreshComments();
+  } catch (e) { toast(e.message); } finally { ISS.busy = false; }
+}
+document.addEventListener('click', (e) => {
+  const nb = e.target.closest?.('[data-iss-new]');
+  if (nb) { ISS.form = nb.dataset.issNew; ISS.kind = nb.dataset.issKind; rerenderComments(false); setTimeout(() => { const s = $('issTracker'); if (s && ISS.kind) s.value = ISS.kind; $('issName')?.focus({ preventScroll: true }); }, 0); return; }
+  if (e.target.closest?.('[data-iss-cancel]')) { ISS.form = null; rerenderComments(false); return; }
+  const sb = e.target.closest?.('[data-iss-send]');
+  if (sb) issSend(sb.dataset.issSend, sb.dataset.issVp);
+});
+
 /* ---------- boot ---------- */
 /* ---------- review mode (Kontrola): one step at a time from the queue of steps that need a person ----------
    The queue comes from the service (GET …/runs/<id>/review-queue: order, reasons, decisions, approvals carried over
@@ -4456,9 +4936,9 @@ function rvRender () {
   const crit = n.kind === 'decision' ? '' : `<div class="sec"><h4>${T('criteria')} ${n.kind === 'stack' ? '' : critCounts(n, v)}</h4><ul class="ac">${(n.kind === 'stack' ? n.criteria : critOrder(n, v)).map((x) => { const r = x.by_locale?.[S.loc]?.[v.name] || {}; const st = n.kind === 'stack' ? critSt(x) : VSTAT[r.verdict || 'not_reached']; const ev = r.evidence || r.note || ''; return `<li class="st-${st}"><span class="mark">${MARK[st]}</span><span><span class="id">${esc(x.id)}</span>${esc(critText(x))}${r.score != null ? ` <span class="id">${esc(Number(r.score).toFixed(2))}</span>` : ''}</span>${ev ? (humanEvidence(ev) ? `<span class="ev ev--text">${esc(humanEvidence(ev))}</span>` : `<code class="ev">${esc(ev)}</code>`) : ''}</li>`; }).join('') || `<li class="st-pass"><span class="mark">–</span><span>—</span></li>`}</ul></div>`;
   const retBox = RV.ret && rvWritable() ? `<div class="sec rvm__ret"><h4><label for="rvRetNote">${esc(T('rvReturnTitle'))}</label></h4><textarea id="rvRetNote" rows="3" placeholder="${esc(T('rvReturnPh'))}">${esc(loadDraft(draftKey('step', n.id, 'return')))}</textarea><div class="share__row" style="margin-top:6px"><button class="btn btn--primary" id="rvRetSend">${esc(T('rvReturnSend'))}</button><button class="btn" id="rvRetCancel">${esc(T('cancel'))}</button><span class="note">${T('ctrlEnter')}</span></div></div>` : '';
   box.innerHTML = top + `<div class="rvm__body"><div class="rvm__stage" id="rvStage">${stage}</div>
-    <aside class="rvm__side" id="rvSide"><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">${esc(RV.idx + 1)} / ${esc(items.length)}</span></div>
+    <aside class="rvm__side" id="rvSide" aria-label="${esc(T('rvSideLabel'))}"><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">${esc(RV.idx + 1)} / ${esc(items.length)}</span></div>
       <h3 id="rvStepTitle">${esc(loc(n.title))}</h3><div class="node__path">${esc(cap?.url || loc(n.path) || '')}</div><div class="rvm__why">${chips}</div></div>
-      ${retBox}${rvDecisionHtml(it)}${changed}${n.purpose ? `<div class="sec"><h4>${T('purpose')}</h4><p class="purpose">${esc(n.purpose)}</p></div>` : ''}${crit}
+      ${retBox}${rvDecisionHtml(it)}${issuesBlock(n, v)}${changed}${n.purpose ? `<div class="sec"><h4>${T('purpose')}</h4><p class="purpose">${esc(n.purpose)}</p></div>` : ''}${crit}
       ${n.kind !== 'stack' ? commentsBlock({ scope: 'step', nodeId: n.id, compact: true }) : ''}</aside></div>${rvFootHtml(it)}`;
   rvWire(it, n, v);
   setHash({ review: it.step });
@@ -4525,7 +5005,7 @@ function rvWire (it, n, v) {
     box.addEventListener('touchend', (e) => {
       const s0 = sw; sw = null; if (!s0) return;
       const t = e.changedTouches[0], dx = t.clientX - s0.x, dy = t.clientY - s0.y, sc = $('rvStage');
-      if ((window.visualViewport?.scale || 1) > 1.05 || Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5 || Date.now() - s0.t > 900) return;
+      if ((window.visualViewport?.scale || 1) > 1.05 || (lbZoomSync(), LZ.k > 1.05) || Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5 || Date.now() - s0.t > 900) return;
       if (sc && sc.scrollWidth > sc.clientWidth + 2) return;
       rvGo(dx < 0 ? 1 : -1);
     }, { passive: true });
@@ -4717,27 +5197,31 @@ load().then((data) => {
   // the panels a person opens or closes are remembered (per screen class: wide or not)
   const panelKey = () => `qawalk-panels-${innerWidth >= 1600 ? 'wide' : 'narrow'}`;
   const savePanels = () => { try { localStorage.setItem(panelKey(), JSON.stringify({ left: S.left, right: S.right })); } catch {} };
-  $('togLeft').onclick = () => { S.left = !S.left; setPanels(); savePanels(); };
-  $('togRight').onclick = () => { S.right = !S.right; setPanels(); savePanels(); };
+  $('togLeft').onclick = () => { S.left = !S.left; if (S.left) S.lastPanel = 'left'; setPanels(); savePanels(); };
+  $('togRight').onclick = () => { S.right = !S.right; if (S.right) S.lastPanel = 'right'; setPanels(); savePanels(); };
+  // a window narrowed to a phone with both panels open keeps only the one opened last (drawers would overlap)
+  matchMedia('(max-width:1100px)').addEventListener?.('change', () => { if (narrowPanels() && S.left && S.right) setPanels(); });
   $('rpBtn').onclick = () => rpOpen(null);
   if (RUN.walkthrough?.file && !RUN.recordings_expired) { const w = $('wtBtn'); w.hidden = false; w.href = asset(RUN.walkthrough.file); w.title = T('walkthroughTitle'); }
   wireRecPreviews($('nodes'));
   $('ptBtn').hidden = !isDesign(); $('ptBtn').onclick = () => ptOpen(null);
   rvInit(); // review mode (Q)
+  if (issService()) setTimeout(() => { issLoad(); }, 0); // Jira and Linear issues of the run (#21)
   wireComments($('lb')); wireComments($('rside')); wireComments($('rp'));
   // small menus of the top bar: one open at a time, closed by a click elsewhere or Escape
   // wide screens show navigation, language and view options in the bar; narrower ones fold them into ☰
   const wideMq = matchMedia('(min-width:1500px)');
   const placeBar = () => {
-    const wide = wideMq.matches; document.body.classList.toggle('wide', wide);
+    const wide = wideMq.matches && !S.unwide; document.body.classList.toggle('wide', wide);
     if (wide) { $('navSlot').appendChild($('appNav')); $('viewSlot').appendChild($('viewCtls')); $('barMenu').hidden = true; }
     else { $('barMenu').appendChild($('appNav')); $('barMenu').appendChild($('viewCtls')); }
     renderPresence();
   };
-  wideMq.addEventListener('change', placeBar); placeBar();
+  wideMq.addEventListener('change', () => { S.unwide = false; placeBar(); }); placeBar(); S.placeBar = placeBar;
   const menus = [['menuBtn', 'barMenu'], ['helpBtn', 'helpPop']];
   const closeMenus = (except) => { for (const [b, m] of menus) if (m !== except) { $(m).hidden = true; $(b).setAttribute('aria-expanded', 'false'); } if (except !== 'pmenu' && PR.menu) { PR.menu = false; renderPresence(); } };
-  for (const [b, m] of menus) $(b).onclick = (e) => { e.stopPropagation(); const open = $(m).hidden; closeMenus(m); $(m).hidden = !open; $(b).setAttribute('aria-expanded', String(open)); };
+  for (const [b, m] of menus) $(b).onclick = (e) => { e.stopPropagation(); const open = $(m).hidden; closeMenus(m); $(m).hidden = !open; $(b).setAttribute('aria-expanded', String(open)); if (open) placePop($(m)); };
+  addEventListener('resize', () => document.querySelectorAll('.bar .menu:not([hidden])').forEach(placePop));
   document.addEventListener('click', (e) => { if (!e.target.closest('.popwrap, .presence')) closeMenus(null); });
   S.closeMenus = closeMenus;
   document.addEventListener('keydown', (e) => {
@@ -4786,9 +5270,15 @@ load().then((data) => {
   else { if (innerWidth < 1600) S.left = false; try { const p = JSON.parse(localStorage.getItem(panelKey()) || 'null'); if (p) { S.left = !!p.left; S.right = !!p.right; } } catch {} }
   if (window.QAWALK_APP?.embed) document.body.classList.add('embed');
   { const h = new URLSearchParams(location.hash.slice(1)).get('mode'); let pref = null; try { pref = localStorage.getItem('qawalk-mode'); } catch {} S.mode = (h || pref) === 'index' ? 'index' : 'map'; }
+  // drawers start under the top bar, so the bar (and its panel toggles) stays in view and in reach
+  { const bar = document.querySelector('.bar'); const setBarH = () => $('app').style.setProperty('--barh', `${bar.offsetHeight}px`); setBarH(); if (typeof ResizeObserver === 'function') new ResizeObserver(setBarH).observe(bar); }
+  $('main').addEventListener('click', (e) => { if (e.target === $('main') && narrowPanels() && (S.left || S.right)) { S.left = S.right = false; setPanels(); } });
+  addEventListener('resize', drawerInert);
   setPanels(); renderAll(); applyMode();
+  $('app').removeAttribute('data-boot');
   requestAnimationFrame(() => requestAnimationFrame(() => { startView(); applyHash(); presenceStart(); }));
   addEventListener('hashchange', applyHash);
+  modalA11y();
 }).catch((error) => { window.Sentry?.captureException(error); document.body.innerHTML = `<p style="padding:24px;font-family:sans-serif">Kaloko: ${esc(error.message)}</p>`; });
 </script>
 </body>