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/components/ui/surfaces.ts

@@ -11,6 +11,8 @@ export const SURFACE = {
   panel: "glass rounded-2xl",
   /** A dialog that slides in from the edge: square on a phone, r16 on its open side. */
   drawer: "glass rounded-none sm:rounded-l-2xl",
+  /** The same, from the START edge (a side panel on touch, C2): r16 on its open side. */
+  drawerStart: "glass rounded-none sm:rounded-r-2xl",
   /** A card or a row card in the page (a video, a user, a download): r12. */
   card: "glass-card rounded-xl",
   /** A menu or a listbox: r12, 4px padding, so its r8 rows nest (12 − 4). */