feat: redesign card detail modal as 2-column dashboard grid

Replace 60/40 split layout with a 2x3 CSS grid where all sections
get equal weight. Cover color header, progress bar on checklist,
compact markdown editor, scroll containment on long lists.

docs/plans/2026-02-15-card-detail-redesign-design.md

@@ -0,0 +1,73 @@
+# Card Detail Modal Redesign — Design Document
+
+**Date:** 2026-02-15
+**Status:** Approved
+
+## Problem
+
+The current card detail modal uses a 60/40 split layout with a massive markdown editor on the left and all metadata (cover, labels, due date, checklist, attachments) crammed into a narrow right sidebar. This is unbalanced — the description field dominates despite being lightly used, while actionable sections like checklist are squeezed.
+
+## Design Decisions (from brainstorming)
+
+| Question | Answer |
+|----------|--------|
+| Primary use when opening card | Scan everything at once |
+| Description importance | Light use (short notes) |
+| Modal size | Go wider |
+| Layout style | Dashboard grid |
+| Section prominence | Equal weight |
+| Long checklist behavior | Scroll within cell |
+| Title position | Full-width header with cover color |
+| Attachment display | Compact list |
+| Description visibility | Always visible cell in grid |
+
+## Layout
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  ██████████████████████████████████████████████████  [×]  │  Cover color header
+│  Card Title (click to edit)                              │  Inline-editable
+├────────────────────────────┬─────────────────────────────┤
+│  LABELS                    │  DUE DATE                   │  Row 1: metadata
+│  [Tag] [Tag] [Tag] [+]    │  Feb 20 · 5 days left       │
+├────────────────────────────┼─────────────────────────────┤
+│  CHECKLIST          2/5   │  DESCRIPTION                 │  Row 2: content
+│  ✓ item 1                 │  Short notes here...         │
+│  ☐ item 2   (scroll)     │  (click to edit)             │
+│  + Add item               │                              │
+├────────────────────────────┼─────────────────────────────┤
+│  COVER                     │  ATTACHMENTS                 │  Row 3: secondary
+│  ○ ○ ○ ○ ○ ○ ○ ○ ×      │  file.pdf · doc.png          │
+│                            │  [+ Add file]                │
+└────────────────────────────┴─────────────────────────────┘
+```
+
+### Header
+- Full-width bar with cover color as background (or neutral `pylon-surface` if no cover)
+- White text on colored bg, normal text on surface bg
+- Inline-editable title (click → input → Enter/Escape)
+- Close [×] button top-right
+
+### Grid Body
+- CSS Grid: `grid-template-columns: 1fr 1fr`, `gap: 1rem`
+- Each cell: `rounded-lg bg-pylon-column/50 p-4`
+- Section headers: `font-mono text-xs uppercase tracking-widest text-pylon-text-secondary`
+- Row 1: Labels + Due Date (small metadata)
+- Row 2: Checklist + Description (main content, max-h ~200px with internal scroll)
+- Row 3: Cover Color + Attachments (secondary)
+
+### Modal
+- Width: `max-w-4xl` (up from `max-w-3xl`)
+- Max height: `max-h-[85vh]` with body scrollable
+- Shared layout animation preserved (`layoutId`)
+
+### Animation
+- Grid cells stagger in with `fadeSlideUp` + `staggerContainer(0.05)`
+- Backdrop blur + fade (existing)
+- Escape/click-outside to close (existing)
+
+## Files to Modify
+- `src/components/card-detail/CardDetailModal.tsx` — Full rewrite of layout
+- `src/components/card-detail/MarkdownEditor.tsx` — Remove min-h-200, adapt for grid cell
+- `src/components/card-detail/ChecklistSection.tsx` — Add max-height + scroll
+- Minor: LabelPicker, DueDatePicker, AttachmentSection — No structural changes needed