feat(design): side panels open as a drawer on touch and below 768 (E28 S3f3)

C2 as decided: on a coarse pointer, or a window below 768, the panel's
tab (shown at every width, 44 wide on touch) opens the panel as a
start-edge drawer over the content, with a scrim. It is ui/Modal's new
drawer-start placement, so Esc, Back, the scrim, the focus trap and the
scroll lock are the dialog's own. A tap never peeks; pinning is a button
in the drawer's header, offered only at 1024 and up; a pin saved on a
desktop is left alone below that. A mouse on a wide window keeps
hover-to-peek and click-to-pin.

DESIGN: C2 as built, rows answer to their own width, phone-only layout
deferred to its own epic (principle 2).

frontend/src/index.css

@@ -895,8 +895,18 @@ html[data-perf="1"] .overlay-backdrop {
     opacity: 0;
   }
 }
+.overlay-drawer-start {
+  animation: drawer-in-start 180ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+@keyframes drawer-in-start {
+  from {
+    transform: translateX(-1.5rem);
+    opacity: 0;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
-  .overlay-drawer {
+  .overlay-drawer,
+  .overlay-drawer-start {
     animation: none;
   }
 }