rename: Note→Post/Line (dashboard); Recognition→Note (drama); new-post/my-posts to billboard

- dashboard: Note→Post, Item→Line across models, forms, views, API, urls & tests
- new-post (9×3) & my-posts (3×3) applets migrate from dashboard→billboard context; billboard view passes form & recent_posts
- drama: Recognition→Note, related_name notes; billboard URL /recognition/→/my-notes/, set-palette at /note/<slug>/set-palette
- recognition.js→note.js (module Note, data.note key); recognition-page.js→note-page.js; .recog-*→.note-*
- _recognition.scss→_note.scss; BillNotes page header; applet slug billboard-recognition→billboard-notes (My Notes)
- NoteSpec.js replaces RecognitionSpec.js; test_recognition.py→test_applet_my_notes.py
- 4 migrations applied: dashboard 0004, applets 0011+0012, drama 0005; 683 ITs green

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

src/static_src/scss/_billboard.scss

@@ -1,3 +1,28 @@
+// ── My Posts applet ────────────────────────────────────────────────────────
+
+#id_applet_my_posts {
+    display: flex;
+    flex-direction: column;
+
+    .my-posts-container {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        &::-webkit-scrollbar { display: none; }
+        mask-origin: padding-box;
+        mask-clip: padding-box;
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0%,
+            black 5%,
+            black 85%,
+            transparent 100%
+        );
+    }
+}
+
 // ── Shared aperture fill for both billboard pages ──────────────────────────
 
 %billboard-page-base {
@@ -87,20 +112,20 @@ body.page-billscroll {
 }
 
 // ── Billboard applet placement ─────────────────────────────────────────────
-// Left column (4-wide): My Scrolls → Contacts → Recognition stacked.
+// Left column (4-wide): My Scrolls → Contacts → Notes stacked.
 // Right column (8-wide): Most Recent spans full height.
 // Portrait override (container query) restores stacked full-width layout.
 
 #id_billboard_applets_container {
     #id_applet_billboard_my_scrolls  { grid-column: 1 / span 4; grid-row:  1 / span 3; }
     #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row:  4 / span 3; }
-    #id_applet_billboard_recognition { grid-column: 1 / span 4; grid-row:  7 / span 4; }
+    #id_applet_billboard_notes { grid-column: 1 / span 4; grid-row:  7 / span 4; }
     #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row:  1 / span 10; }
 
     @container (max-width: 550px) {
         #id_applet_billboard_my_scrolls,
         #id_applet_billboard_my_contacts,
-        #id_applet_billboard_recognition,
+        #id_applet_billboard_notes,
         #id_applet_billboard_most_recent {
             grid-column: 1 / span 12;
             grid-row: span var(--applet-rows, 3);
@@ -108,9 +133,9 @@ body.page-billscroll {
     }
 }
 
-// ── Recognition applet — vertical title ───────────────────────────────────
+// ── Notes applet — vertical title ─────────────────────────────────────────
 
-#id_applet_billboard_recognition {
+#id_applet_billboard_notes {
     h2 {
         writing-mode: vertical-rl;
         transform: rotate(180deg);