Mail: swipe a message left to delete, right to archive. Books: page flip by tap and swipe works on touch screens

The page frame is wider than the screen (pages sit side by side inside it), so tap positions
were measured against the wrong width and taps on touch devices never turned the page.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaC9HmtHMdRP8dAbN4wAKj

public/style.css

@@ -874,3 +874,10 @@ kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); bo
 .rdseg { display: flex; gap: 6px; flex-wrap: wrap; } .rdseg button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 0 10px; white-space: nowrap; }
 .rdseg button.on { background: var(--accent); color: var(--accent-t); border-color: transparent; font-weight: 600; }
 .rdstep { display: flex; align-items: center; gap: 12px; } .rdstep span { min-width: 56px; text-align: center; font-weight: 600; } .rdstep .btn { min-width: 64px; justify-content: center; }
+
+/* Mail: swipe a message left to delete, right to archive */
+.mrow { position: relative; touch-action: pan-y; will-change: transform; background: var(--panel); }
+.mrow.swl { box-shadow: var(--sww, 100vw) 0 0 var(--danger); } .mrow.swr { box-shadow: calc(-1 * var(--sww, 100vw)) 0 0 #2f9e6e; }
+.mrow.swl.swgo { box-shadow: var(--sww, 100vw) 0 0 #b3261e; }
+.mrow.swl::after, .mrow.swr::after { content: attr(data-sw); position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: #fff; font-weight: 600; padding: 0 20px; white-space: nowrap; }
+.mrow.swl::after { left: 100%; } .mrow.swr::after { right: 100%; }