Session 2026-05-30: task detail page overhaul

- New TaskDetail replaces /tasks/:id (was v2 at /requests/:id/v2)
- Overview tab: R00 request info, Requested By/Date/Sign Count inline row, Notes, Sign Family, files, amendments
- Revisions tab: R01+ from submissions, newest first, same layout as overview, per-entry Amend button
- Comments tab: single-line input, post on Enter, delete own comments, Supabase task_comments table
- Folder tab: placeholder for file sharing
- Tab badges showing revision/comment counts
- Amend Request modal: drag-drop file zone, popupOverlayStyle/Surface, Save+Cancel buttons
- Request Revision modal for clients on approved/invoiced/paid tasks
- JSZip download-all with progress popup for submission files
- Upload progress popup for Add Task and amend file uploads
- FileAttachment drop zone: 8px radius, transparent bg, label style fix (no all-caps override)
- PageLoader on task detail load
- task_comments migration with RLS policies

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

layout.md

@@ -36,6 +36,7 @@ This is the single source of truth for dashboard/profile visual structure and UI
 - Header title: `28px`, `500`, `line-height: 1.2`
 - Header subtitle: `13px`
 - Widget title: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
+- Section header (new standard): `18px`, `500`, Title Case, `letter-spacing: 0.2px`, `line-height: 1.1`
 - Body table text: `12px/13px` by column importance
 
 ## 5) Card System
@@ -98,6 +99,10 @@ This is the single source of truth for dashboard/profile visual structure and UI
 - Meta/date text: `11px`
 - Progress track: `height: 4px`, `radius: 2px`
 - Percentage width slot: `min-width: 28px`
+- Empty states in all cards (dashboard, profile, tasks, projects, file sharing, etc.):
+  - any `No ...` message is centered in the card body (`display:flex`, `align-items:center`, `justify-content:center`)
+  - use shared class treatment (`.card-empty-center`) for consistency
+  - avoid top-offset-only placement for empty text
 
 ## 11) Tables
 - General table layout in dashboard cards: `table-layout: fixed`, `border-collapse: collapse`
@@ -107,6 +112,10 @@ This is the single source of truth for dashboard/profile visual structure and UI
 - Header cells:
   - `font-size: 10px`, `font-weight: 500`, uppercase, `letter-spacing: 0.6px`
   - bottom spacing: `padding-bottom: 12px`
+  - sticky behavior for scrollable tables:
+    - table headers stay fixed while body scrolls
+    - use shared sticky-head treatment for all app tables (`position: sticky; top: 0`)
+  - table scrollbars are visually hidden for table scroll containers; wheel/trackpad scrolling remains active
 - Body cells:
   - primary text: `13px`
   - secondary/metrics text: `12px`
@@ -229,6 +238,37 @@ This is the single source of truth for dashboard/profile visual structure and UI
 - Calendar hover popover: `1002` within card context (`card can be 1001 active`)
 - Modal overlay: `1200`
 
+## 14.5) Loading Popup
+- Use shared `PageLoader` component for loading overlays instead of page-specific popup implementations.
+- Loading popups/overlays, including shared site-wide page loaders and file-sharing loading states, use the same widget shell as dashboard cards:
+  - `background: var(--popup-bg)`
+  - `border: 1px solid var(--border)`
+  - `border-radius: 8px`
+  - `padding: 18px 21px`
+  - `backdrop-filter: blur(12px)` + `-webkit-backdrop-filter`
+- Popup surface is theme-aware:
+  - dark mode: deep translucent dark surface
+  - light mode: bright translucent white surface
+- Loading overlay scrim is theme-aware:
+  - dark mode: `rgba(0,0,0,0.58)`
+  - light mode: soft light scrim via `--overlay-scrim`
+- Loading title uses widget header treatment: `11px`, `500`, uppercase, `letter-spacing: 0.8px`, secondary text
+- Progress track:
+  - height: `4px`
+  - radius: `2px`
+  - track color: secondary card tone (`var(--card-bg-2)`)
+  - progress fill: accent
+- Progress/meta text under the bar uses subtext sizing (`12px`) and secondary text
+
+## 14.6) Modal Form Fields
+- Modal forms that follow `Edit Profile` styling (including `Add Task`/`New Task`) share the same field typography and theme tokens:
+  - modal surface transparency matches `Edit Profile` card shell (`background: var(--card-bg)`), not a denser popup-specific override
+  - field labels: `11px`, `500`, uppercase, `letter-spacing: 0.8px`, color `var(--text-secondary)`
+  - input/select text: `13px`, color `var(--text-primary)`, left aligned
+  - textarea text: `13px`, color `var(--text-primary)`
+  - field surfaces and borders use global theme tokens (`var(--card-bg-2)` + `var(--border)`) for dark/light parity
+  - modal form action buttons use the standard outline geometry/style (`btn btn-outline`) unless a page explicitly defines a different role
+
 ## 15) Motion
 - Motion vars:
   - fast `160ms`