note palette modal: NVM closes confirm only; confirm visibility via style.display; swatch labels from _PALETTE_DEFS; recognitions block — TDD

- note-page.js: NVM hides confirm (style.display='none') — swatch modal stays open;
  _showConfirm/_hideConfirm use style.display to bypass CSS specificity issues;
  _doSetPalette reads data-palette-label before modal closes; appends
  .note-recognitions__palette-line w. dim+bold markup after OK
- billboard/views.py: import _PALETTE_DEFS; _PALETTE_LABELS dict; _palette_opts()
  enriches palette_options w. {name, label}; my_notes adds palette_label to note_items
- _note.scss: confirmed palette swatch uses gradient (palette vars cascade from
  palette-* class); hardcoded bardo/sheol bg overrides removed; .note-recognitions block
  w. .note-recognitions__header (tt-sign-section-header style) & __dim (tt-dim style);
  .note-swatch-label in terUser bold; .note-item__palette gradient; confirm display:none default
- my_notes.html: p.name/p.label replaces slice hack; data-palette-label on swatch rows;
  Recognitions block w. dim spans & strong values; removes hidden attr from confirm
- IT: test_palette_modal_renders_swatch_labels; test_also_saves_user_palette
- FT: NVM test corrected — modal stays open, confirm is_displayed() False; T2a URL fix

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/_note.scss

@@ -101,6 +101,36 @@
         font-size: 0.8rem;
         opacity: 0.75;
     }
+
+    .note-recognitions {
+        margin-top: 0.5rem;
+    }
+
+    .note-recognitions__header {
+        font-size: 0.65rem;
+        font-weight: 600;
+        opacity: 0.55;
+        letter-spacing: 0.04em;
+        margin-bottom: 0.15rem;
+    }
+
+    .note-recognitions__list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 0.75rem;
+        opacity: 0.8;
+        display: flex;
+        flex-direction: column;
+        gap: 0.1rem;
+
+        strong { font-weight: 700; }
+    }
+
+    .note-recognitions__dim {
+        opacity: 0.6;
+        font-size: 0.65rem;
+    }
 }
 
 // Image box — right-side; must have a defined size so Selenium can interact with it.
@@ -112,22 +142,35 @@
     align-items: center;
     justify-content: center;
     background: rgba(var(--priUser), 0.12);
-    border: 1px dashed rgba(var(--priUser), 0.7);
+    border: 1px dashed rgba(var(--terUser), 0.75);
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 1.2rem;
+    color: rgba(var(--terUser), 0.75);
     opacity: 0.6;
 
     &:hover { opacity: 1; }
 }
 
-// Unlocked palette swatch (right side, same footprint as image-box)
+// Confirmed palette swatch — right-side thumbnail, same gradient as .note-swatch-body.
+// palette-* class is on the element so CSS vars cascade from that palette automatically.
 .note-item__palette {
     width: 3rem;
     height: 3rem;
     flex-shrink: 0;
-    border-radius: 2px;
-    border: 2px solid rgba(var(--priUser), 0.4);
+    border-radius: 0.25rem;
+    border: 0.15rem solid rgba(var(--secUser), 0.5);
+    background: linear-gradient(
+        to bottom,
+        rgba(var(--secUser), 1) 0%,
+        rgba(var(--secUser), 1) 30%,
+        rgba(var(--priUser), 1) 30%,
+        rgba(var(--priUser), 1) 70%,
+        rgba(var(--terUser), 1) 70%,
+        rgba(var(--terUser), 1) 85%,
+        rgba(var(--quaUser), 1) 85%,
+        rgba(var(--quaUser), 1) 100%
+    );
 }
 
 // ── Palette modal ──────────────────────────────────────────────────────────
@@ -143,7 +186,7 @@
     border-radius: 0.5rem;
     padding: 0.75rem;
     gap: 0.5rem;
-    min-width: 10rem;
+    min-width: 14rem;
 
     &:not([hidden]) { display: flex; flex-direction: column; }
 
@@ -151,11 +194,11 @@
     > [class*="palette-"] {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
 
         .note-swatch-body {
-            width: 2.5rem;
-            height: 2.5rem;
+            width: 3.25rem;
+            height: 3.25rem;
             border-radius: 0.25rem;
             cursor: pointer;
             // Gradient uses vars scoped to the parent palette-* class,
@@ -185,24 +228,26 @@
                 box-shadow: 0 0 0.75rem rgba(var(--ninUser), 0.6);
             }
         }
+
+        .note-swatch-label {
+            flex: 1;
+            min-width: 0;
+            color: rgba(var(--terUser), 1);
+            font-size: 1rem;
+            font-weight: bold;
+            line-height: 1.2;
+        }
     }
 }
 
-// ── Palette swatch color fills ─────────────────────────────────────────────
-
-.palette-bardo .note-swatch-body,
-.note-item__palette.palette-bardo {
-    background: #2a1a2e;
-}
-
-.palette-sheol .note-swatch-body,
-.note-item__palette.palette-sheol {
-    background: #1a1a2e;
-}
-
 // ── Confirm submenu — floats below modal, out of its flow ─────────────────
 
 .note-palette-confirm {
+    // display controlled entirely by JS (style.display) — hidden until a swatch is previewed
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
@@ -213,9 +258,6 @@
     border: 0.1rem solid rgba(var(--secUser), 0.4);
     border-radius: 0.5rem;
     padding: 0.5rem 0.75rem;
-    gap: 0.4rem;
-
-    &:not([hidden]) { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
 
     p {
         flex: 1;