Billnotes note-page interaction: hover glow, click-lock, DON/DOFF; note titles + card-ref styling — TDD

- note-page.js: click-lock (_lockedItem + notes-locked body class); DON auto-DOFFs prev donned; _setGreeting updates navbar; _donnedItem exposed for test API
- NotePageSpec.js: 18 Jasmine specs covering lock/unlock, DON/DOFF state, auto-DOFF, greeting update, initial load; flushPromises helper for chained fetch .then()
- _note.scss: DON/DOFF opacity:0 by default; hover + locked + donned states show them; body:not(.notes-locked) hover suppression
- views.py: Super-Schizo/Super-Nomad card titles; recognition_title field (display_title) separate from card title; mark_safe descriptions w. card-ref spans
- my_notes.html: |safe on description; recognition_title for Recognitions block
- _navbar.html: id_greeting_prefix/id_greeting_name spans for JS greeting update
- _base.scss: global .card-ref rule (--terUser, font-weight 600, !important)

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_base.scss

@@ -596,3 +596,8 @@ body {
         gap: 0.5rem;
     }
 }
+
+.card-ref {
+    color: rgba(var(--terUser), 1) !important;
+    font-weight: 600 !important;
+}

src/static_src/scss/_note.scss

@@ -70,6 +70,8 @@
     flex-direction: column;
     gap: 0.4rem;
     z-index: 1;
+    opacity: 0;
+    transition: opacity 0.15s;
 
     .btn { margin: 0; }
 }
@@ -85,19 +87,33 @@
     backdrop-filter: blur(6px);
     border: 0.1rem solid rgba(var(--secUser), 0.4);
     border-radius: 0.5rem;
-    cursor: help;
+    cursor: pointer;
     transition: border-color 0.15s, box-shadow 0.15s;
 
-    &:hover,
-    &:active,
+    // Hover glow — only when no note is click-locked on the page
+    body:not(.notes-locked) &:hover {
+        border-color: rgba(var(--terUser), 1);
+        box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
+        .note-item__title { color: rgba(var(--terUser), 1); }
+        .note-don-doff { opacity: 1; }
+    }
+
+    // Palette modal open (existing)
     &.note-item--active {
         border-color: rgba(var(--terUser), 1);
-        opacity: 1;
         box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
-
         .note-item__title { color: rgba(var(--terUser), 1); }
     }
 
+    // Click-locked: glow + DON/DOFF always visible
+    &.note-item--locked,
+    &.note-item--donned {
+        border-color: rgba(var(--terUser), 1);
+        box-shadow: 0 0 10px rgba(var(--ninUser), 0.35);
+        .note-item__title { color: rgba(var(--terUser), 1); }
+        .note-don-doff { opacity: 1; }
+    }
+
     .note-item__body {
         flex: 1;
         min-width: 0;
@@ -168,11 +184,11 @@
     &--label {
         font-size: 1.1rem;
         font-weight: bold;
-        font-style: italic;
-        color: rgba(var(--terUser), 1);
+        color: rgba(var(--secUser), 0.6);
         opacity: 1;
         cursor: default;
         border-style: solid;
+        border-color: rgba(var(--secUser), 0.6);
         &:hover { opacity: 1; }
     }
 }