shortcuts: board arrow-nav, enter→preview→edit, help screen polish, n/a/f/j hotkeys

Board arrow-key card navigation (public/js/app.js):
* ↑/↓/←/→ on the board (body focus, no overlay) move a single-card
  focus cursor (.card-focused, accent2 outline) through the visible
  card grid. Column count is computed live from the first row's
  offsetTop so it tracks the CSS grid columns at any viewport width.
* First arrow press focuses the first card; subsequent presses move
  in the grid. Focused card scrolls into view (smooth, nearest).
* Enter on a focused card → openDetail (preview). Focus cleared.
* Enter in detail view → closeDetail + openModal (editor). Card ref
  is captured before closeDetail nulls state.viewingCard.
* Click anywhere → focus cleared. Re-renders restore focus via
  window._restoreCardFocus() called from board.js renderBoard().

CSS (public/css/style.css):
* .card-focused: accent2 outline + glow, visually distinct from
  .card-selected (accent, multi-select) and .preview-active.
* .shortcut-table kbd keycaps: JetBrains Mono font (not pixel),
  10px, 3D raised look with gradient + bottom border + inner
  highlight + shadow.
* Responsive shortcut grid: 3 cols > 900px, 2 cols > 640px, 1 col.

New bare-key shortcuts (public/js/app.js):
* n → openModal(null) (new card, same as the + button)
* a → activateBucket('all')
* f → activateBucket('favorites')
* j → open today's journal card (find by YYYY-MM-DD prefix in
  state.cards), or create a new one (switch to journal view, open
  empty editor which auto-fills the date title)

Ctrl+N quick capture (public/js/app.js):
* Now sends bucket_id: state.activeBucket on the POST (unless the
  active view is a virtual filter like all/current/etc., in which
  case bucket_id stays null). Cards captured while viewing a user
  bucket land directly in that bucket.

Shortcuts help screen (public/index.php):
* max-w-4xl, 3-column grid layout.
* Complete shortcut inventory across all modules:
  - Navigation: a/f/j/n/t/c/m, 1-9, Tab/Shift+Tab, /
  - Global: Ctrl+K/N/Z, Esc, F1, ?, Del
  - Editor: Ctrl+S, Ctrl+Shift+S, Ctrl+Enter, Tab, Alt+↑↓,
    Shift+Alt+↑↓, Enter (list continue), [[ (link ac), # (tag ac),
    ?snippet
  - Search: ↑↓ navigate, Enter open, Esc close
  - Board+Detail: arrows focus, Enter→preview, Enter→editor,
    ←→ group nav, click/dbl/right/ctrl+click, drag edge/center
  - Canvas: b/e/l/r/o/f/t tool shortcuts, ⌫ delete
  - Mail: ⌫ delete selected, Shift+⌫ skip confirm
* kbd elements use normal font (JetBrains Mono) instead of pixel.
* Help overlay's old shortcuts section replaced with a one-liner
  pointing to ? for the full reference.
* #shortcuts added to runner.js closeAll() list.

chore: bump version to 0.9.12

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/css/style.css

@@ -457,6 +457,11 @@ body::after {
 }
 .card-glow:hover { box-shadow: var(--ui-shadow-card), var(--card-stack-shadow), 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); }
 .card-selected { outline: 2px solid var(--t-accent) !important; outline-offset: -2px; }
+.card-focused {
+    outline: 2px solid var(--t-accent2) !important;
+    outline-offset: -2px;
+    box-shadow: 0 0 0 1px var(--t-accent2), 0 0 16px -4px color-mix(in srgb, var(--t-accent2) 40%, transparent) !important;
+}
 .card-select-check {
     position: absolute; top: 6px; left: 6px; width: 18px; height: 18px;
     border-radius: 50%; background: var(--t-accent); z-index: 6;
@@ -804,6 +809,42 @@ body.anim-slow .board-card.card-pulse-new {
     gap: 2px;
 }
 
+/* Shortcut help table — table-fixed prevents column wobble when content
+   length varies between sections. kbd styling matches typical keyboard-cap
+   look (surface bg, border, mono font, tiny padding). */
+.shortcut-table { width:100%; table-layout:fixed; font-size:12px; border-collapse:collapse; }
+.shortcut-table td { padding:4px 0; vertical-align:middle; color:var(--t-text); }
+.shortcut-table td:first-child { width:48%; color:var(--t-dim); white-space:nowrap; font-size:11px; }
+/* Keycap look: 3D-ish raised surface with bottom shadow simulating
+   depth, subtle gradient, rounded corners. Min-width so single-letter
+   keys don't look squished. The "+" separator between combo keys sits
+   outside <kbd> and inherits the dim color from the td. */
+.shortcut-table kbd {
+    display:inline-block;
+    min-width:20px; text-align:center;
+    padding:3px 7px;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--t-raised) 90%, white 10%), var(--t-bg));
+    border:1px solid var(--t-border);
+    border-bottom-width:2px;
+    border-radius:4px;
+    font-family:var(--t-font-content, 'JetBrains Mono', monospace);
+    font-size:10px;
+    color:var(--t-bright);
+    line-height:1.4;
+    box-shadow: 0 1px 0 color-mix(in srgb, var(--t-border) 80%, black 20%),
+                inset 0 1px 0 color-mix(in srgb, var(--t-raised) 60%, white 15%);
+}
+.shortcut-table .mouse {
+    font-family:var(--t-font-pixel, 'Silkscreen', cursive);
+    font-size:9px; color:var(--t-dim);
+}
+@media (max-width: 900px) {
+    #shortcuts [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
+}
+@media (max-width: 640px) {
+    #shortcuts [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
+}
+
 /* Tag chips */
 .tag-chip {
     display: inline-flex; align-items: center; padding: 1px 6px;