@myrtilleio/redline 0.1.0

package/client/check.js

@@ -0,0 +1,926 @@
+// ---------------------------------------------------------------- check mode
+
+// Reviewing the agent's fixes, one at a time. The page dims, a thin outline moves
+// from fix to fix, and a card docked above the toolbar asks for one key: A to
+// accept, R to redo. Calm on purpose: you do this many times a round. The page
+// itself is the "after"; hold Space to lay the "before" over it. Approvals that
+// changed since you gave them (guards) come up the same way: send them back, or
+// keep the new look. At the end, the round's first-time accept rate.
+
+const checkReduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+const checkWait = (ms) => new Promise((ok) => setTimeout(ok, ms));
+
+/** An approval that changed (or vanished) since it was given, and hasn't been dealt with. */
+function guardBroken(a) {
+  return !!(a && !a.draft && a.guard && !a.guard.off && !a.guard.sentBack && a.guard.now && a.guard.now.status !== 'held' && (a.accepted || a.verdict === 'good') &&
+    a.guard.now.at > a.guard.base.at);
+}
+
+const checkKind = (a) =>
+  guardBroken(a) ? (a.guard.now.status === 'missing' ? 'gone' : 'guard') : 'fix';
+
+// Where the thing to look at is now: where the agent says it moved to, else the
+// element the mark was made on. Selectors break when the page is rebuilt around them
+// (a new section shifts every :nth-of-type), so as a last resort find the element by
+// its words. Nothing on screen: null, and the item is shown from its pictures.
+function checkEl(a) {
+  const el = (a.afterTarget && queryOne(a.afterTarget)) || anchorEl(a) || findByText(a);
+  return el && el.isConnected && el.getClientRects().length ? el : null;
+}
+
+const textFinds = new Map();
+function findByText(a) {
+  const t = a.target;
+  if (!t || !t.text || !t.selector) return null;
+  if (textFinds.has(a.id)) {
+    const hit = textFinds.get(a.id);
+    if (!hit || hit.isConnected) return hit;
+  }
+  // Compared without spaces: a stored innerText has them between links, textContent doesn't.
+  const norm = (x) => (x || '').replace(/\s+/g, '').toLowerCase();
+  const want = norm(t.text).slice(0, 40);
+  let best = null;
+  if (want.length >= 10) {
+    // Same kind of element (the selector's last tag), whose text starts the same way,
+    // closest in size to how it was when marked.
+    const tag = (t.selector.split(/[\s>+~]+/).pop().match(/^[a-z][a-z0-9-]*/i) || ['*'])[0];
+    let bestScore = Infinity;
+    const all = document.body.querySelectorAll(tag);
+    for (let i = 0; i < all.length && i < 3000; i++) {
+      const el = all[i];
+      if (!norm(el.textContent).startsWith(want)) continue;
+      const r = el.getBoundingClientRect();
+      if (!r.width && !r.height) continue;
+      const score = t.rect ? Math.abs(r.width - t.rect.w) + Math.abs(r.height - t.rect.h) : -el.querySelectorAll('*').length;
+      if (score < bestScore) (bestScore = score), (best = el);
+    }
+  }
+  textFinds.set(a.id, best);
+  return best;
+}
+
+// Top to bottom, so the spotlight travels one way down the page.
+function checkItems() {
+  const at = (a) => {
+    const el = checkEl(a);
+    const r = el && el.getBoundingClientRect();
+    return r && (r.width || r.height) ? r.top + scrollY : (a.target && a.target.rect ? a.target.rect.y : 1e9);
+  };
+  return state.annotations
+    .filter((a) => !a.draft && ((a.status === 'resolved' && !a.accepted) || guardBroken(a)))
+    .map((a) => ({ a, y: at(a) }))
+    .sort((x, y) => x.y - y.y)
+    .map((x) => x.a);
+}
+
+let chk = null;
+
+function startCheck(focusId) {
+  if (chk) return;
+  const items = checkItems();
+  if (!items.length) return toast('Nothing to check right now');
+  if (state.devices) toggleDevices();
+  closeComposer();
+  closeMenu();
+  closeCoach();
+  hideMarkChip(true);
+  toastEl.classList.remove('show');
+  if (state.panel) togglePanel();
+  setMode('browse');
+  const ui = {
+    stage: h('div', { class: 'check-stage', role: 'dialog', 'aria-label': 'Check the fixes', 'aria-modal': 'true' }),
+    soft: h('div', { class: 'check-soft' }),
+    spot: h('div', { class: 'check-spot' }),
+    peekBg: h('div', { class: 'check-peek-bg' }),
+    peek: h('img', { class: 'check-peek', alt: '' }),
+    card: h('section', { class: 'check-card' }),
+  };
+  ui.stage.append(ui.soft, ui.spot, ui.peekBg, ui.peek, ui.card);
+  chk = {
+    items,
+    i: Math.max(0, items.findIndex((a) => a.id === focusId)),
+    decided: new Map(), // id -> accepted | redo | sent-back | new-look | let-go
+    ui,
+    cur: null, // starts right on the item: nothing flies in from the toolbar
+    cardSize: { w: 340, h: 260 },
+    t: 0,
+    raf: 0,
+    phase: 'item', // item | redo | done | leaving
+    peeking: false,
+    busy: false,
+  };
+  new ResizeObserver(([e]) => {
+    if (!chk) return;
+    chk.cardSize = { w: e.target.offsetWidth, h: e.target.offsetHeight };
+    wakeCheck();
+  }).observe(ui.card);
+  host.dataset.check = '';
+  root.insertBefore(ui.stage, bar);
+  checkShow(chk.i, 0);
+  chk.raf = requestAnimationFrame(checkFrame);
+}
+
+const checkCurrent = () => chk && chk.items[chk.i];
+
+// ---- the spotlight: a critically damped follower, so it glides between items and
+// rides along with scrolling without a single hard jump.
+
+function targetRect() {
+  // Showing the before: the outline takes the old element's size and place, so a
+  // fix that resized something visibly grows or shrinks as you switch.
+  if (chk.peeking && chk.peekRect && chk.phase === 'item') {
+    // In place: a little room around it. As a framed picture: the outline is its frame.
+    const p = chk.peekRect, pad = chk.ui.stage.classList.contains('picture') ? 0 : 10;
+    return { x: p.x - pad, y: p.y - pad, w: p.w + pad * 2, h: p.h + pad * 2, r: 14 };
+  }
+  // Leaving: stay put and fade with the stage. Done, hopping far, or nothing to point
+  // at: the spotlight closes to the middle (its outline is hidden then).
+  if (chk.phase === 'leaving') return { ...chk.cur };
+  if (chk.hop || chk.ui.stage.classList.contains('lost')) return { x: innerWidth / 2, y: innerHeight / 2, w: 0, h: 0, r: 0 };
+  if (chk.phase === 'done') return { x: innerWidth / 2, y: innerHeight / 2, w: 0, h: 0, r: 0 };
+  const el = checkEl(checkCurrent());
+  const r = el && el.getBoundingClientRect();
+  if (!r || (!r.width && !r.height)) return { x: innerWidth / 2, y: innerHeight / 2, w: 0, h: 0, r: 0 };
+  const pad = 10, m = 8;
+  const x = Math.max(m, r.left - pad), y = Math.max(m, r.top - pad);
+  return { x, y, w: Math.min(innerWidth - m, r.right + pad) - x, h: Math.min(innerHeight - m, r.bottom + pad) - y, r: 14 };
+}
+
+function checkFrame(now) {
+  if (!chk) return;
+  const dt = Math.min(64, chk.t ? now - chk.t : 16);
+  chk.t = now;
+  const t = targetRect();
+  if (!chk.cur) chk.cur = { ...t };
+  // It glides from one item to the next close by; the rest of the time (scrolling,
+  // the page settling, a far hop) it sits exactly on the element, with no trail.
+  const k = checkReduced() || now > (chk.glideUntil || 0) ? 1 : 1 - Math.exp(-dt / 45);
+  let moving = false;
+  for (const p of ['x', 'y', 'w', 'h', 'r']) {
+    const d = t[p] - chk.cur[p];
+    if (Math.abs(d) > 0.25) moving = true;
+    chk.cur[p] = Math.abs(d) > 0.25 ? chk.cur[p] + d * k : t[p]; // snap the last quarter pixel
+  }
+  checkPaint();
+  // Once the spotlight has arrived, stop: no work at all until something moves
+  // (a new item, a scroll, a resize, the card changing size), which wakes it.
+  chk.raf = moving ? requestAnimationFrame(checkFrame) : 0;
+  if (!moving) chk.t = 0;
+}
+
+function wakeCheck() {
+  if (chk && !chk.raf) chk.raf = requestAnimationFrame(checkFrame);
+}
+addEventListener('scroll', wakeCheck, { capture: true, passive: true });
+addEventListener('resize', wakeCheck, { passive: true });
+
+function checkPaint() {
+  const { ui, cur } = chk;
+  const key = [cur.x, cur.y, cur.w, cur.h, cur.r].map((v) => Math.round(v * 2)).join() + chk.phase + (chk.peeking ? 1 : 0) + chk.cardSize.w + 'x' + chk.cardSize.h;
+  if (key === chk.painted) return; // nothing moved: leave the styles alone
+  chk.painted = key;
+  ui.spot.style.transform = `translate(${cur.x}px, ${cur.y}px)`;
+  ui.spot.style.width = Math.max(0, cur.w) + 'px';
+  ui.spot.style.height = Math.max(0, cur.h) + 'px';
+  ui.spot.style.borderRadius = Math.max(0, cur.r) + 'px';
+  // The soft-focus layer has a hole where the spotlight is.
+  ui.soft.style.setProperty('--hx', cur.x + 'px');
+  ui.soft.style.setProperty('--hy', cur.y + 'px');
+  ui.soft.style.setProperty('--hw', Math.max(0, cur.w) + 'px');
+  ui.soft.style.setProperty('--hh', Math.max(0, cur.h) + 'px');
+  placeCard();
+  if (chk.peeking) placePeek();
+}
+
+// The card is docked in one place, above the toolbar. It never jumps from side to
+// side; instead each item is scrolled into the free space above it.
+function placeCard() {
+  const { ui, cardSize } = chk;
+  const { w, h: ch } = cardSize;
+  const x = (innerWidth - w) / 2;
+  const y = chk.phase === 'done' ? (innerHeight - ch) / 2 : innerHeight - ch - CARD_BOTTOM;
+  ui.card.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+}
+const CARD_BOTTOM = 84; // clear of the toolbar
+
+// The free space above the docked card, where the item under review should sit.
+// How much of the top of the screen the page's own sticky or fixed header covers.
+function headerCover() {
+  let bottom = 0;
+  for (const fx of [0.2, 0.5, 0.8]) {
+    for (let el = pageElementAt(innerWidth * fx, 2); el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+      const pos = getComputedStyle(el).position;
+      if (pos === 'fixed' || pos === 'sticky') {
+        const r = el.getBoundingClientRect();
+        if (r.top <= 4 && r.bottom < innerHeight * 0.4) bottom = Math.max(bottom, r.bottom);
+        break;
+      }
+    }
+  }
+  return bottom;
+}
+
+function checkZone() {
+  const top = headerCover() + 24; // below the site's own sticky header
+  const bottom = Math.max(top + 120, innerHeight - (chk ? chk.cardSize.h : 260) - CARD_BOTTOM - 20);
+  return { top, bottom };
+}
+
+// ---- the card
+
+function checkProgress() {
+  return h('div', { class: 'check-progress', 'aria-hidden': 'true' },
+    chk.items.map((a, i) => h('i', { class: `${chk.decided.get(a.id) || ''}${i === chk.i && chk.phase !== 'done' ? ' now' : ''}` })));
+}
+
+function checkKbd(k) {
+  return h('kbd', {}, k);
+}
+
+// What you asked for, in a few words: your note, or what the mark means.
+function youSaid(a) {
+  if (a.comment) return a.comment;
+  if (a.kind === 'stroke') return markMeaning(a).split(':')[0];
+  return inkOf(a.verdict).name;
+}
+
+function imagesFor(a) {
+  const kind = checkKind(a);
+  const src = (path) => withVersion(assetSrc({ path }), a);
+  if (kind === 'fix') {
+    const shots = a.shots || {};
+    const boxes = a.shotBoxes || {};
+    // Laid over the page: the same moment without your mark on it, when it was taken.
+    const then = shots.plain ? { src: src(shots.plain), box: boxes.plain || boxes.before } : shots.before && { src: src(shots.before), box: boxes.before };
+    return {
+      then: then && { ...then, label: 'Before' },
+      now: shots.after && { src: src(shots.after), label: 'After the fix' },
+    };
+  }
+  const g = a.guard || {};
+  // The width that changed: its own, or the phone's (which can't be laid over this page).
+  const baseShot = (g.now && g.now.baseShot) || (g.base && g.base.shot);
+  const own = g.base && baseShot === g.base.shot;
+  return {
+    then: baseShot && { src: src(baseShot), label: own ? 'As approved' : 'As approved, on a phone', box: own ? g.base.box : null },
+    now: g.now && g.now.shot && { src: src(g.now.shot), label: 'Now' },
+  };
+}
+
+function checkHead() {
+  return h('header', {},
+    h('span', { class: 'check-count' }, `${chk.i + 1} of ${chk.items.length}`),
+    checkProgress(),
+    h('button', { type: 'button', class: 'check-close', title: 'Stop reviewing (Esc)', 'aria-label': 'Stop reviewing', html: ICONS.close, onclick: exitCheck }),
+  );
+}
+
+// The agent's note, as a title you can read at a glance and the rest underneath.
+// Split at the first natural break (a full stop, a colon, a semicolon, a comma) after
+// a few words; the title never cuts mid-phrase, and CSS clamps what's still too long.
+function splitNote(text) {
+  const t = (text || '').trim();
+  if (t.length <= 70) return { title: t, rest: '' };
+  const m = t.match(/^(.{16,100}?)(?:[.!?:;]|,(?=\s))\s+(.+)$/s);
+  if (!m) return { title: t, rest: '' };
+  const rest = m[2].charAt(0).toUpperCase() + m[2].slice(1);
+  return { title: m[1], rest };
+}
+
+function itemCard(a, lost = false) {
+  const kind = checkKind(a);
+  const imgs = imagesFor(a);
+  const note = kind === 'fix' ? splitNote(a.resolution || 'Fixed') : null;
+  const title = kind === 'fix' ? note.title : kind === 'gone' ? 'You approved this, and it has left the page' : 'You approved this. It changed since.';
+  // Before / After, right on the page: the live page is the after, and the before
+  // is laid over it where it was. Tap Space (or Before) to switch and stay; hold to peek.
+  const before = imgs.then && !lost
+    ? h('div', { class: 'check-ab' },
+        h('div', { class: 'ab-switch', role: 'group', 'aria-label': 'Show before or after' },
+          h('button', {
+            type: 'button',
+            class: 'ab before',
+            'aria-pressed': 'false',
+            onpointerdown: (e) => (e.preventDefault(), peekDown()),
+            onpointerup: () => peekUp(),
+            onpointerleave: () => chk && chk.peeking && !chk.peekSticky && peekUp(),
+          }, 'Before'),
+          h('button', { type: 'button', class: 'ab after', 'aria-pressed': 'true', onclick: () => checkPeek(false) }, 'After'),
+        ),
+        h('div', { class: 'ab-row' },
+          h('span', { class: 'ab-hint' }, h('span', { class: 'on-keys' }, checkKbd('Space'), ' switch · hold to peek'), h('span', { class: 'on-touch' }, 'tap to switch · hold to peek')),
+          imgs.now ? h('button', { type: 'button', class: 'check-link', onclick: () => openCompare(imgs.then, imgs.now) }, 'Side by side') : null))
+    : null;
+  // Not on the page anymore (rebuilt around it): judge it from its two pictures.
+  const pictures = lost && (imgs.then || imgs.now)
+    ? h('div', { class: 'check-lost' },
+        h('p', {}, 'It moved or changed too much to point at. Compare the pictures:'),
+        h('div', { class: 'check-thumbs' },
+          [imgs.then, imgs.now].filter(Boolean).map((im) =>
+            h('button', { type: 'button', class: 'check-thumb', onclick: () => (imgs.then && imgs.now ? openCompare(imgs.then, imgs.now) : null) },
+              h('img', { src: im.src, alt: im.label }), h('span', {}, im.label)))))
+    : null;
+  const [no, yes] = {
+    fix: ['Redo', 'Accept'],
+    guard: ['Send back', 'Keep new look'],
+    gone: ['Send back', 'Let it go'],
+  }[kind];
+  return h('div', { class: `check-body k-${kind}` },
+    checkHead(),
+    kind !== 'fix' ? h('p', { class: `check-kicker k-${kind}` }, kind === 'gone' ? 'Gone from the page' : 'Changed after you approved it') : null,
+    h('h2', { class: 'check-title' }, title),
+    note && note.rest ? h('p', { class: 'check-detail' }, note.rest) : null,
+    kind === 'fix'
+      ? h('p', { class: 'check-you' }, h('span', {}, 'You asked'), youSaid(a))
+      : h('ul', { class: 'check-diff' }, ((a.guard.now && a.guard.now.diff) || []).slice(0, 5).map((d) => h('li', {}, d.replace(/`/g, '')))),
+    // Words and pictures that change by themselves aren't a regression: say so once.
+    kind === 'guard' && !(a.guardIgnore || []).includes('text')
+      ? h('button', { type: 'button', class: 'check-live', onclick: checkLive }, 'Changes by itself (a feed, a date)? ', h('b', {}, 'Watch only its look'), checkKbd('L'))
+      : null,
+    before,
+    pictures,
+    h('div', { class: 'check-actions' },
+      h('button', { type: 'button', class: 'btn check-no', onclick: checkRedo }, no, checkKbd('R')),
+      h('button', { type: 'button', class: 'btn primary check-yes', onclick: checkAccept }, yes, checkKbd('A')),
+    ),
+  );
+}
+
+function redoCard(a) {
+  const text = h('textarea', { rows: 2, placeholder: 'What is still wrong? (optional)', 'aria-label': 'What is still wrong' });
+  const send = () => submitRedo(text.value.trim());
+  text.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) (e.preventDefault(), send());
+    else if (e.key === 'Escape') (e.preventDefault(), (chk.phase = 'item'), checkSwap(itemCard(a), 0));
+    e.stopPropagation();
+  });
+  queueMicrotask(() => text.focus({ preventScroll: true }));
+  return h('div', { class: 'check-body k-redo' },
+    checkHead(),
+    h('h2', { class: 'check-title' }, splitNote(a.resolution || 'Fixed').title),
+    text,
+    h('div', { class: 'check-actions' },
+      h('button', { type: 'button', class: 'btn', onclick: () => ((chk.phase = 'item'), checkSwap(itemCard(a), 0)) }, 'Cancel'),
+      h('button', { type: 'button', class: 'btn primary', onclick: send }, 'Add to next round', checkKbd('↵')),
+    ),
+  );
+}
+
+// Swap the card's content in place: a quick crossfade, never a slide across.
+function checkSwap(node, dir) {
+  wakeCheck(); // a new card (or phase) may move or resize the spotlight's companion
+  const card = chk.ui.card;
+  const h0 = card.offsetHeight;
+  const dy = checkReduced() ? 0 : 4;
+  const leaving = [...card.children];
+  for (const old of leaving) {
+    // Out of the way at once: no focus, no keys, no clicks; gone when its exit is over.
+    old.inert = true;
+    if (old.classList.contains('leaving')) continue;
+    old.classList.add('leaving');
+    if (!checkReduced()) old.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 90, easing: 'ease-out', fill: 'forwards' });
+    setTimeout(() => old.remove(), checkReduced() ? 0 : 100);
+  }
+  card.append(node);
+  // Grow or shrink to the new content instead of jumping (it's docked by its bottom edge).
+  if (h0 && !checkReduced()) {
+    const h1 = node.offsetHeight;
+    if (Math.abs(h1 - h0) > 2) card.animate([{ height: h0 + 'px' }, { height: h1 + 'px' }], { duration: 200, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' });
+  }
+  node.animate([{ opacity: 0, transform: `translateY(${dy}px)` }, { opacity: 1, transform: 'none' }], { duration: checkReduced() ? 1 : 180, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', delay: leaving.length ? 50 : 0, fill: 'backwards' });
+}
+
+function checkShow(i, dir) {
+  checkPeek(false); // every item starts on the live page, the after
+  chk.i = i;
+  chk.phase = 'item';
+  const a = checkCurrent();
+  const el = checkEl(a);
+  const stage = chk.ui.stage;
+  stage.classList.toggle('lost', !el);
+  stage.dataset.kind = checkKind(a);
+  checkSwap(itemCard(a, !el), dir);
+  if (!el) return wakeCheck();
+  // Into the space above the card, unless it already sits there; room for the taller
+  // of the two versions, so switching never hides behind the card.
+  const r0 = el.getBoundingClientRect();
+  const b = imagesFor(a).then && imagesFor(a).then.box;
+  const r = b && b.h > r0.height ? { top: r0.top, bottom: r0.top + b.h, height: b.h } : r0;
+  const z = checkZone();
+  let to = null;
+  if (r.top < z.top || r.bottom > z.bottom) {
+    const room = z.bottom - z.top;
+    to = Math.max(0, r.height > room ? scrollY + r.top - z.top - 16 : scrollY + r.top + r.height / 2 - (z.top + room / 2));
+    to = Math.min(to, document.documentElement.scrollHeight - innerHeight);
+  }
+  const far = to !== null && Math.abs(to - scrollY) > innerHeight * 0.5;
+  if (far && !checkReduced()) {
+    // A far hop: the outline steps out, the page travels quickly, and the outline
+    // appears where it belongs. It never sweeps across the screen with the scroll.
+    stage.classList.add('hop');
+    const hop = (chk.hop = {});
+    checkScrollTo(to, 340).then(() => {
+      if (!chk || chk.hop !== hop) return;
+      chk.hop = null;
+      stage.classList.remove('hop');
+      // Arrive by focusing: the hole opens a little wide and settles onto the element.
+      const t = targetRect();
+      chk.cur = { x: t.x - 16, y: t.y - 16, w: t.w + 32, h: t.h + 32, r: t.r + 8 };
+      chk.glideUntil = performance.now() + 300;
+      stage.classList.add('arrive');
+      setTimeout(() => stage.classList.remove('arrive'), 220);
+      wakeCheck();
+    });
+  } else {
+    chk.hop = null;
+    stage.classList.remove('hop');
+    chk.glideUntil = performance.now() + 420; // close by: glide there
+    if (to !== null) checkScrollTo(to, checkReduced() ? 0 : 260);
+  }
+  wakeCheck();
+}
+
+// Scroll the page ourselves: short, eased, and instant underneath (a page's own
+// scroll-behavior: smooth would otherwise stretch every step). A wheel or touch from
+// the reviewer takes over at once.
+function checkScrollTo(to, ms) {
+  cancelAnimationFrame(checkScrollTo.raf);
+  const from = scrollY, d = to - from;
+  if (!ms || Math.abs(d) < 2) {
+    scrollTo({ top: to, behavior: 'instant' });
+    return Promise.resolve();
+  }
+  return new Promise((done) => {
+    const t0 = performance.now();
+    let stop = false;
+    const cancel = () => (stop = true);
+    addEventListener('wheel', cancel, { once: true, passive: true });
+    addEventListener('touchstart', cancel, { once: true, passive: true });
+    const step = (now) => {
+      const p = Math.min(1, (now - t0) / ms);
+      const e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+      if (!stop) scrollTo({ top: from + d * e, behavior: 'instant' });
+      if (p < 1 && !stop) checkScrollTo.raf = requestAnimationFrame(step);
+      else {
+        removeEventListener('wheel', cancel);
+        removeEventListener('touchstart', cancel);
+        done();
+      }
+    };
+    checkScrollTo.raf = requestAnimationFrame(step);
+  });
+}
+
+function checkMove(d) {
+  if (!chk || chk.phase !== 'item' || chk.busy) return;
+  const j = chk.i + d;
+  if (j >= 0 && j < chk.items.length) checkShow(j, d);
+}
+
+// The next item without a verdict, looking forward first; none left: the finale.
+function checkAdvance() {
+  const n = chk.items.length;
+  for (let k = 1; k <= n; k++) {
+    const j = (chk.i + k) % n;
+    if (!chk.decided.has(chk.items[j].id)) return checkShow(j, j > chk.i ? 1 : -1);
+  }
+  checkFinale();
+}
+
+// ---- verdicts
+
+// A verdict shows as the outline taking its colour for a moment (and the bar
+// filling), then on to the next. Quiet: you will do this many times.
+function checkFlash(color) {
+  const stage = chk.ui.stage;
+  stage.style.setProperty('--ring', color);
+  clearTimeout(chk.flashTimer);
+  chk.flashTimer = setTimeout(() => stage.style.removeProperty('--ring'), 420);
+}
+
+async function checkDecide(a, patch, verdict, ms) {
+  chk.busy = true;
+  try {
+    await store.update(a.id, patch);
+  } catch (err) {
+    chk.busy = false;
+    return toast('Could not save: ' + err.message);
+  }
+  chk.decided.set(a.id, verdict);
+  const bar2 = chk.ui.card.querySelector('.check-progress');
+  if (bar2) bar2.children[chk.i].className = verdict;
+  await Promise.all([load(), checkWait(checkReduced() ? 0 : ms)]);
+  if (!chk) return;
+  chk.busy = false;
+  checkAdvance();
+}
+
+function checkAccept() {
+  if (!chk || chk.busy || chk.phase !== 'item') return;
+  const a = checkCurrent();
+  const kind = checkKind(a);
+  if (kind === 'fix') {
+    checkFlash(COLORS.good);
+    return checkDecide(a, { accepted: true }, 'accepted', 300);
+  }
+  checkFlash(COLORS.good);
+  // Keep the new look: it becomes the approved one. Gone for good: stop guarding it.
+  const done = a.status === 'resolved' && !a.accepted ? { accepted: true } : {};
+  return checkDecide(a, kind === 'gone' ? { unguard: true, ...done } : { rebaseline: true, ...done }, kind === 'gone' ? 'let-go' : 'new-look', 320);
+}
+
+// Live content: stop comparing its words and images, keep watching its look.
+function checkLive() {
+  if (!chk || chk.busy || chk.phase !== 'item') return;
+  const a = checkCurrent();
+  if (checkKind(a) !== 'guard') return;
+  checkFlash(COLORS.good);
+  const done = a.status === 'resolved' && !a.accepted ? { accepted: true } : {};
+  checkDecide(a, { dynamic: true, ...done }, 'new-look', 300);
+}
+
+function checkRedo() {
+  if (!chk || chk.busy || chk.phase !== 'item') return;
+  const a = checkCurrent();
+  if (checkKind(a) === 'fix') {
+    chk.phase = 'redo';
+  wakeCheck();
+    checkPeek(false);
+    return checkSwap(redoCard(a), 0);
+  }
+  // An approval that changed goes straight back: the difference says what to restore.
+  checkFlash(COLORS.fix);
+  const diff = (a.guard.now && a.guard.now.diff) || [];
+  checkDecide(a, {
+    sendBack: true, verdict: 'good', status: 'open', draft: true, accepted: false,
+    reply: `This changed after I approved it${diff.length ? ` (${diff.join('; ').replace(/`/g, '')})` : ''}. Put it back the way it was.`,
+  }, 'sent-back', 360);
+}
+
+function submitRedo(why) {
+  const a = checkCurrent();
+  const el = checkEl(a);
+  chk.phase = 'item';
+  wakeCheck();
+  checkFlash(COLORS.idea);
+  checkDecide(a, { status: 'open', draft: true, accepted: false, reply: why || 'Not quite yet.', ...(el ? { target: describeEl(el) } : {}) }, 'redo', 280);
+}
+
+// ---- peek: the "before" laid over the live page, where it was.
+
+const PEEK_HOLD = 260; // longer than this is a hold (peek); shorter is a tap (switch)
+
+// Space or the Before button went down: show the before, or (if a tap had left it
+// on) switch back to the after.
+function peekDown() {
+  if (!chk) return;
+  if (chk.peeking && chk.peekSticky) return checkPeek(false);
+  chk.peekDownAt = performance.now();
+  checkPeek(true);
+}
+
+// ...and came up: a hold returns to the after; a tap leaves the before showing.
+function peekUp() {
+  if (!chk || !chk.peeking || chk.peekSticky) return;
+  if (performance.now() - (chk.peekDownAt || 0) > PEEK_HOLD) checkPeek(false);
+  else chk.peekSticky = true;
+}
+
+function checkPeek(on) {
+  if (!chk) return;
+  const a = checkCurrent();
+  const then = on && chk.phase === 'item' && a && imagesFor(a).then;
+  const { peek: img, stage, card } = chk.ui;
+  const showing = !!then;
+  chk.peeking = showing;
+  if (!showing) stage.classList.remove('covering', 'picture');
+  if (!showing) chk.peekSticky = false;
+  stage.classList.toggle('peeking', showing);
+  chk.ui.spot.dataset.label = showing ? 'Before' : 'After';
+  for (const b of card.querySelectorAll('.ab')) b.setAttribute('aria-pressed', String(b.classList.contains('before') === showing));
+  wakeCheck();
+  if (!showing) return;
+  chk.peekBox = then.box || null;
+  chk.peekRect = null;
+  chk.glideUntil = performance.now() + 260; // the outline eases to the before's size and back
+  if (img.getAttribute('src') !== then.src) {
+    img.style.visibility = 'hidden'; // placed once its size is known, never at a guess
+    img.src = then.src;
+    chk.peekTone = null;
+  }
+  // Placing it changes where the outline should go: wake the spotlight to glide there.
+  const ready = () => {
+    if (!chk || !chk.peeking) return;
+    if (chk.peekTone === null) chk.peekTone = toneMismatch(img);
+    placePeek();
+    wakeCheck();
+  };
+  if (img.complete && img.naturalWidth) ready();
+  else img.onload = ready;
+}
+
+// Light page, dark picture (or the other way round): the before was taken in the other
+// theme, and laid over the page it would read as a black hole. Show it as a picture then.
+function toneMismatch(img) {
+  try {
+    const c = document.createElement('canvas');
+    c.width = c.height = 12;
+    const g = c.getContext('2d', { willReadFrequently: true });
+    g.drawImage(img, 0, 0, 12, 12);
+    const d = g.getImageData(0, 0, 12, 12).data;
+    let sum = 0, n = 0;
+    for (let i = 0; i < 144; i++) {
+      const x = i % 12, y = (i / 12) | 0;
+      if (x > 1 && x < 10 && y > 1 && y < 10) continue; // the edges: the page around the element
+      sum += (0.2126 * d[i * 4] + 0.7152 * d[i * 4 + 1] + 0.0722 * d[i * 4 + 2]) / 255;
+      n++;
+    }
+    return Math.abs(sum / n - lightness(pageBackground())) > 0.4;
+  } catch {
+    return false;
+  }
+}
+
+function lightness(css) {
+  const ok = /^oklch\(\s*([\d.]+)(%?)/.exec(css);
+  if (ok) return ok[2] ? +ok[1] / 100 : +ok[1];
+  const m = css.match(/[\d.]+/g);
+  if (!m || m.length < 3) return 1;
+  return (0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2]) / 255;
+}
+
+function pageBackground() {
+  for (const el of [document.body, document.documentElement]) {
+    const c = getComputedStyle(el).backgroundColor;
+    if (c && c !== 'rgba(0, 0, 0, 0)' && c !== 'transparent') return c;
+  }
+  return '#fff';
+}
+
+function placePeek() {
+  const img = chk.ui.peek;
+  const stage = chk.ui.stage;
+  const el = checkEl(checkCurrent());
+  const r = el && el.getBoundingClientRect();
+  const box = chk.peekBox;
+  const nw = img.naturalWidth, nh = img.naturalHeight;
+  // The card's full height (not its compact one), so covering can't flip back and forth.
+  const cardTop = innerHeight - Math.max(chk.cardFullH || 0, chk.cardSize.h) - CARD_BOTTOM;
+  const inPlace = !!(r && box && !chk.peekTone);
+  stage.classList.toggle('picture', !inPlace);
+  if (inPlace) {
+    // Same width: line up the corners. A fix that resized it: line up the top centres.
+    const x = Math.abs(box.w - r.width) < 4 ? r.left - box.x : r.left + r.width / 2 - (box.x + box.w / 2);
+    const y = r.top - box.y;
+    chk.peekRect = { x: x + box.x, y: y + box.y, w: box.w, h: box.h };
+    Object.assign(img.style, { transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`, width: nw + 'px', height: nh + 'px' });
+    // Cover the live element (the after) wherever the before doesn't reach, in the page's colour.
+    const u = unionRect({ x: r.left, y: r.top, w: r.width, h: r.height }, chk.peekRect);
+    Object.assign(chk.ui.peekBg.style, { transform: `translate(${u.x - 10}px, ${u.y - 10}px)`, width: u.w + 20 + 'px', height: u.h + 20 + 'px', borderRadius: '14px', background: pageBackground() });
+  } else {
+    // As a picture: scaled to the free space above the card, centred, clearly framed.
+    const top = headerCover() + 40, room = Math.max(120, cardTop - top - 24);
+    const k = Math.min(1, (innerWidth - 64) / nw, room / nh);
+    const w = Math.round(nw * k), h = Math.round(nh * k);
+    const x = Math.round((innerWidth - w) / 2), y = Math.round(top + (room - h) / 2);
+    chk.peekRect = { x, y, w, h };
+    Object.assign(img.style, { transform: `translate(${x}px, ${y}px)`, width: w + 'px', height: h + 'px' });
+  }
+  img.style.visibility = '';
+  // A before taller than the room above the card: the card becomes just its switch.
+  const pr = chk.peekRect;
+  const covers = inPlace && pr.y + pr.h + 10 > cardTop;
+  if (covers && !stage.classList.contains('covering')) chk.cardFullH = chk.cardSize.h;
+  stage.classList.toggle('covering', covers);
+}
+
+function unionRect(a, b) {
+  if (!a || !b) return a || b || null;
+  const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+  return { x, y, w: Math.max(a.x + a.w, b.x + b.w) - x, h: Math.max(a.y + a.h, b.y + b.h) - y };
+}
+
+// ---- the end of the round
+
+function checkFinale() {
+  checkPeek(false);
+  chk.phase = 'done';
+  wakeCheck();
+  delete chk.ui.stage.dataset.kind;
+  const v = [...chk.decided.values()];
+  const count = (k) => v.filter((x) => x === k).length;
+  const accepted = count('accepted'), redone = count('redo'), back = count('sent-back');
+  const judged = accepted + redone;
+  const rate = judged ? accepted / judged : 1;
+  const guarded = state.annotations.filter((a) => !a.draft && (a.accepted || a.verdict === 'good')).length;
+  const drafts = state.annotations.filter((a) => a.draft).length;
+  const round = state.rounds && state.rounds[state.rounds.length - 1];
+  const R = 44, C = 2 * Math.PI * R;
+  const ring = s('svg', { class: 'check-ring', viewBox: '0 0 104 104', 'aria-hidden': 'true' });
+  ring.append(s('circle', { cx: 52, cy: 52, r: R, class: 'track' }), s('circle', { cx: 52, cy: 52, r: R, class: 'fill', 'stroke-dasharray': C, 'stroke-dashoffset': C }));
+  const num = h('b', { class: 'check-rate' }, judged ? '0%' : '✓');
+  const done = () => exitCheck();
+  const sendNow = async () => {
+    exitCheck();
+    await load();
+    sendRound();
+  };
+  const body = h('div', { class: 'check-body finale' },
+    h('div', { class: 'check-ring-wrap' }, ring, num),
+    h('h2', { class: 'check-title' }, judged ? 'accepted first time' : 'All checked'),
+    h('p', { class: 'check-sum' },
+      [round ? `Round ${round.n}` : null, judged ? `${accepted} accepted` : null, redone ? `${redone} to redo` : null, back ? `${back} sent back` : null].filter(Boolean).join(' · ')),
+    guarded ? h('p', { class: 'check-guarded' }, h('i'), `${guarded} approval${guarded === 1 ? ' is' : 's are'} guarded now. If one changes, it comes back here.`) : null,
+    h('div', { class: 'check-actions' },
+      drafts ? h('button', { type: 'button', class: 'btn', onclick: done }, 'Later') : null,
+      h('span', { class: 'grow' }),
+      h('button', { type: 'button', class: 'btn primary', onclick: drafts ? sendNow : done }, drafts ? `Send ${drafts} to your agent` : 'Done', checkKbd('↵')),
+    ),
+  );
+  chk.finish = drafts ? sendNow : done;
+  checkSwap(body, 0);
+  // The ring fills to the rate while the number counts up with it.
+  const fill = ring.querySelector('.fill');
+  const ms = checkReduced() ? 1 : 900;
+  fill.animate([{ strokeDashoffset: C }, { strokeDashoffset: C * (1 - rate) }], { duration: ms, delay: 180, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', fill: 'forwards' });
+  if (judged) {
+    const t0 = performance.now() + 180;
+    const count2 = (now) => {
+      const p = Math.min(1, Math.max(0, (now - t0) / ms));
+      num.textContent = Math.round(rate * 100 * (1 - Math.pow(1 - p, 3))) + '%';
+      if (p < 1 && chk) requestAnimationFrame(count2);
+    };
+    requestAnimationFrame(count2);
+  }
+}
+
+function exitCheck() {
+  if (!chk || chk.phase === 'leaving') return;
+  checkPeek(false);
+  chk.phase = 'leaving';
+  wakeCheck();
+  const { stage } = chk.ui;
+  stage.classList.add('out');
+  delete host.dataset.check;
+  const c = chk;
+  setTimeout(() => {
+    cancelAnimationFrame(c.raf);
+    stage.remove();
+    if (chk === c) chk = null;
+    renderBar();
+  }, checkReduced() ? 0 : 280);
+}
+
+// Keys while checking: one per verdict. Returns true when the key was ours.
+function checkKey(e) {
+  // An open Compare slider (or image) owns the keyboard until it closes.
+  if (!chk || chk.phase === 'leaving' || galleryEl || isTyping(e) || e.metaKey || e.ctrlKey || e.altKey) return false;
+  const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+  const act = chk.phase === 'done'
+    ? { Enter: () => chk.finish(), Escape: exitCheck }
+    : {
+        a: checkAccept, Enter: checkAccept, r: checkRedo, l: checkLive,
+        ArrowRight: () => checkMove(1), ArrowDown: () => checkMove(1), ArrowLeft: () => checkMove(-1), ArrowUp: () => checkMove(-1),
+        ' ': () => !e.repeat && peekDown(),
+        Escape: exitCheck,
+      };
+  const fn = act[k];
+  // Swallow everything else too: the page's own shortcuts wait until you're done.
+  e.preventDefault();
+  e.stopPropagation();
+  if (fn) fn();
+  return true;
+}
+
+addEventListener('keyup', (e) => chk && e.key === ' ' && peekUp(), true);
+addEventListener('blur', () => chk && checkPeek(false));
+
+// ---- styles
+
+addStyles(`
+.check-stage { position: fixed; inset: 0; pointer-events: auto; --dim: 0 0 0 200vmax rgba(9,9,11,.5);
+  animation: check-in 140ms ease-out; }
+.check-stage.out { opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
+@keyframes check-in { from { opacity: 0; } }
+
+/* Everything but the spotlight goes soft: a touch of blur and less colour. */
+.check-soft { position: absolute; inset: 0; pointer-events: none; }
+@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
+  /* A flat tint, not a blur: re-blurring the whole page every frame while the spotlight glides costs 15fps. */
+  .check-soft { background: rgba(9, 9, 11, .12);
+    -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
+    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
+    mask-composite: exclude; }
+}
+.check-spot { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; /* above the before picture: its outline and label stay visible */ box-shadow: var(--dim), 0 0 0 1.5px var(--ring, rgba(255,255,255,.92));
+  transition: box-shadow 180ms ease; will-change: transform, width, height; }
+/* Hopping to a far item, or nothing to point at: the page stays dim, no outline, no label. */
+.check-stage:is(.hop, .lost) .check-spot { box-shadow: var(--dim), 0 0 0 1.5px transparent; transition: none; }
+.check-spot::after { transition: opacity 140ms ease; }
+.check-stage:is(.hop, .lost) .check-spot::after { opacity: 0; }
+.check-peek-bg { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 140ms ease; z-index: 1; }
+.check-stage.peeking .check-peek-bg { opacity: 1; }
+/* Which version the page shows, on the outline itself. */
+.check-spot::after { content: attr(data-label); position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 6px; font-size: 11px; font-weight: 650;
+  padding: 2px 8px; border-radius: 6px; background: rgba(24,24,27,.92); color: #fafafa; white-space: nowrap; }
+.check-stage.peeking .check-spot::after { background: #fafafa; color: #18181b; }
+.check-peek { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; opacity: 0; transition: opacity 140ms ease; z-index: 2;
+  border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 18px 50px rgba(0,0,0,.5);
+  -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent), linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
+  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent), linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
+  mask-composite: intersect; }
+.check-stage.peeking .check-peek { opacity: 1; }
+/* While you look at the before, the card steps back. */
+.check-card { transition: opacity 160ms ease; }
+/* The card stays readable while you look at the before: it is docked clear of the item.
+   Only when the before is too tall does it step back, keeping the switch usable. */
+.check-card { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
+/* The before reaches down to the card: the card becomes just its switch, never a ghost of itself. */
+.check-stage.peeking.covering .check-body > :not(.check-ab), .check-stage.peeking.covering .check-ab > :not(.ab-switch) { display: none; }
+/* Before as a picture (it can't line up with the page): framed, not blended in. */
+.check-stage.picture .check-peek-bg { opacity: 0 !important; }
+.check-stage.picture .check-peek { -webkit-mask: none; mask: none; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 24px 60px -14px rgba(0,0,0,.65); }
+.check-body > * { transition: opacity 140ms ease; }
+.check-card { position: absolute; left: 0; top: 0; z-index: 4; width: 340px; max-width: calc(100vw - 32px); background: var(--bg); border: 1px solid var(--line);
+  border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55); background: #18181b; /* opaque: a moving backdrop blur re-renders every frame */
+  overflow: hidden; display: grid; animation: card-in 180ms var(--ease-out) backwards; }
+@keyframes card-in { from { opacity: 0; translate: 0 6px; } }
+.check-card > * { grid-area: 1 / 1; }
+.check-body { padding: 12px 14px 14px; display: grid; gap: 10px; align-content: start; }
+.check-body > header { display: flex; align-items: center; gap: 10px; }
+.check-close { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #71717a; margin-right: -4px; }
+.check-close svg { width: 14px; height: 14px; }
+@media (hover: hover) and (pointer: fine) { .check-close:hover { color: #fafafa; background: rgba(255,255,255,.08); } }
+.check-ab { display: grid; gap: 6px; }
+.ab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
+.ab-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255,255,255,.07); }
+.check-ab .ab-hint { grid-column: 1 / -1; }
+.check-stage:not([data-kind]) .check-spot::after { display: none; } /* the finale has no page to label */
+.ab { height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #a1a1aa; user-select: none; -webkit-user-select: none; touch-action: none;
+  transition: background-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out); }
+.ab[aria-pressed="true"] { background: #fafafa; color: #18181b; }
+.ab:active { transform: scale(.97); }
+.ab-hint { font-size: 11.5px; color: #71717a; white-space: nowrap; }
+.ab-hint kbd { margin: 0 2px 0 0; }
+.check-kicker { margin: 0; font-size: 11.5px; font-weight: 600; color: #a1a1aa; }
+.check-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
+.check-kicker.k-guard, .check-kicker.k-gone { color: #fecdd3; } .check-kicker.k-guard i, .check-kicker.k-gone i { background: var(--fix); box-shadow: 0 0 0 4px rgba(244,63,94,.18); }
+.check-kicker.k-redo { color: #fde68a; } .check-kicker.k-redo i { background: var(--idea); box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
+.check-count { font-size: 12px; font-weight: 600; color: #a1a1aa; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.check-progress { display: flex; gap: 3px; flex: 1; }
+.check-progress i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background-color 260ms ease, transform 260ms var(--ease-out); transform-origin: left; }
+.check-progress i.now { background: rgba(255,255,255,.6); }
+.check-progress i.accepted, .check-progress i.new-look, .check-progress i.let-go { background: var(--good); }
+.check-progress i.redo { background: var(--idea); } .check-progress i.sent-back { background: var(--fix); }
+.check-title { margin: 2px 0 0; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.005em; color: #fafafa; text-wrap: pretty;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.check-detail { margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; color: #a1a1aa;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.check-you { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: #a1a1aa;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.check-lost { display: grid; gap: 8px; }
+.check-lost p { margin: 0; font-size: 12px; color: #a1a1aa; }
+.check-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.check-thumb { display: grid; gap: 4px; padding: 0; text-align: left; font-size: 11px; font-weight: 600; color: #a1a1aa; }
+.check-thumb img { width: 100%; height: 84px; object-fit: cover; object-position: top; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
+.check-you span { color: #71717a; margin-right: 6px; }
+.check-diff { margin: -2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e4e4e7; }
+.check-diff li { padding: 5px 8px; border-radius: 6px; background: rgba(244,63,94,.08); border-left: 2px solid var(--fix); overflow-wrap: anywhere; }
+.check-live { justify-self: start; margin-top: -4px; font-size: 11.5px; color: #a1a1aa; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; }
+.check-live b { color: #e4e4e7; font-weight: 600; }
+.check-link { color: #93c5fd; font-weight: 600; font-size: 11.5px; padding: 2px 4px; border-radius: 5px; }
+.check-actions { display: flex; gap: 8px; align-items: center; }
+.check-actions .grow { flex: 1; }
+.check-actions .btn { height: 34px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
+.check-actions .check-yes { flex: 1; justify-content: center; }
+.check-actions .check-no { color: #e4e4e7; }
+.check-body kbd { font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
+  display: inline-grid; place-items: center; background: rgba(255,255,255,.1); color: inherit; opacity: .75; margin-left: 2px; }
+.btn.primary kbd { background: rgba(0,0,0,.08); }
+.check-body.k-redo textarea { min-height: 64px; }
+.check-body.finale { padding: 26px 22px 18px; justify-items: center; text-align: center; gap: 10px; }
+.check-ring-wrap { position: relative; width: 104px; height: 104px; display: grid; place-items: center; margin-bottom: 4px; }
+.check-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
+.check-ring circle { fill: none; stroke-width: 7; }
+.check-ring .track { stroke: rgba(255,255,255,.1); }
+.check-ring .fill { stroke: var(--good); stroke-linecap: round; }
+.check-rate { font-size: 28px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fafafa; }
+.check-body.finale .check-title { font-size: 15px; font-weight: 600; color: #d4d4d8; }
+.check-sum { margin: 0; font-size: 12.5px; color: #a1a1aa; }
+.check-guarded { margin: 4px 0 2px; font-size: 12.5px; line-height: 1.45; color: #d4d4d8; display: flex; gap: 8px; text-align: left; padding: 10px 12px;
+  border-radius: 10px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); }
+.check-guarded i { flex: none; width: 14px; height: 16px; margin-top: 1px; background: var(--good);
+  clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
+.check-body.finale .check-actions { width: 100%; margin-top: 8px; }
+:host([data-check]) .bar { opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity 180ms ease, translate 220ms var(--ease-out); }
+.bar { transition: opacity 220ms ease, translate 260ms var(--ease-out); }
+:host([data-check]) .layer { opacity: 0; transition: opacity 160ms ease; }
+.layer { transition: opacity 240ms ease; }
+@media (hover: hover) and (pointer: fine) { .check-link:hover { background: rgba(147,197,253,.12); } }
+@media (max-width: 640px) { .check-card { width: calc(100vw - 32px); } }
+/* Touch: no keyboard to hint at; the picture is what you press and hold. */
+.on-touch { display: none; }
+@media (hover: none) and (pointer: coarse) {
+  .check-body kbd,   .on-touch { display: inline; }
+  }
+`);