kaloko 0.6.0 → 0.7.1

package/viewer/index.html

@@ -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,7 +39,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;
 }
 html,body{height:100%}
 /* the canvas is an app with its own zoom: the page itself never pans sideways or zooms (the canvas, screenshots
@@ -50,8 +50,22 @@ html,body{overflow-x:clip;touch-action:pan-x pan-y}
 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 */
@@ -79,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)}
@@ -155,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}
@@ -236,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}
 }
@@ -267,7 +323,8 @@ body.embed .helpwrap{display:none}
   .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}.picker .kchip{display:none}
+  .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}
@@ -310,6 +367,7 @@ body.embed .helpwrap{display:none}
 .presence{display:flex;align-items:center;gap:4px;margin-left:6px}
 .presence .pav{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);background:var(--c);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;cursor:pointer;padding:0;margin-left:-6px;box-shadow:0 0 0 1px var(--line)}
 .presence .pav[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
+.pav:focus-visible{position:relative;z-index:3} /* the avatars overlap: the focused one rises so its ring shows */
 .presence .pvis{background:none;border:1px solid var(--line);border-radius:999px;font-size:11px;padding:2px 8px;margin-left:6px;cursor:pointer;color:var(--muted)}
 .cur{position:absolute;transform:scale(var(--inv,1));transform-origin:0 0;transition:left .08s linear,top .08s linear}
 .cur svg{width:18px;height:18px;display:block}.cur path{fill:var(--c);stroke:#fff;stroke-width:1.5}
@@ -673,7 +731,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}
@@ -726,7 +784,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)}}
@@ -737,6 +795,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}
@@ -751,8 +811,12 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
   .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}
@@ -770,7 +834,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}
@@ -780,7 +844,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}
@@ -879,7 +943,8 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 </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>
@@ -887,7 +952,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>
@@ -917,7 +982,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>
@@ -942,22 +1007,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>
@@ -989,7 +1054,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.',
@@ -997,9 +1062,9 @@ 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: { 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',
@@ -1015,7 +1080,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.',
@@ -1023,9 +1088,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' }
 };
@@ -1035,18 +1100,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>',
@@ -1260,6 +1338,10 @@ addEventListener('resize', () => {
   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);
@@ -1386,7 +1468,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) : ''}
@@ -1530,12 +1612,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' }));
 }
 
@@ -2007,7 +2112,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;
@@ -2040,24 +2145,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;
@@ -2143,7 +2270,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;
@@ -2174,14 +2301,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;
@@ -2193,7 +2322,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) {
@@ -2432,7 +2561,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;
@@ -2441,6 +2577,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)
@@ -2472,6 +2609,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`;
@@ -2910,7 +3049,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);
@@ -2965,7 +3104,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)
@@ -2989,6 +3128,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); } };
@@ -3099,6 +3239,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. */
@@ -3106,6 +3247,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. */
@@ -3198,7 +3340,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) => {
@@ -3210,12 +3352,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);
 }
@@ -3226,12 +3401,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; }
@@ -3243,6 +3420,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 ---------- */
@@ -3287,7 +3465,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>
@@ -3428,8 +3606,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(); });
@@ -3437,11 +3616,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 = [];
@@ -3453,20 +3634,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) ---------- */
@@ -3600,9 +3844,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`;
@@ -4690,7 +4937,7 @@ 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)}${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)}`;
@@ -4951,8 +5198,10 @@ 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'));
@@ -5022,9 +5271,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>