Applets: retitle My Sky → SkyDrive + My Sea → Sea of Cards w. planetary recolor; match the gear-menu entries — TDD

Applet titles + gear-menu toggle labels (Applet.name, via data migration 0014)
both retitled — a deliberate departure from the "My X" applet convention for
these two surfaces. Slugs (my-sky / my-sea) stay put.

Recolor (applet shells only — the standalone pages are tomorrow's todo):
• SkyDrive (uranium ramp): --sixU light-green title font, --priU deep-green
  shell bg; hover keeps the palette --ninUser highlight, glow takes the --sixU
  tint. Reverses to --priU font / --sixU bg on *-light palettes.
• Sea of Cards (neptunium ramp): --sixNp light-teal font, --priNp deep-teal shell;
  the conjunction "of" is a lowercase-italic span against the h2 uppercase
  transform. Reverses to --priNp / --sixNp on *-light palettes.

Mechanism: the shared applet title-link rule now reads --applet-title-fg (with a
--terUser fallback so every other applet is untouched); each applet sets that +
--applet-shell-bg, and a body[class*="-light"] override swaps the pair. No
specificity war.

Tests: data migration 0014 (reversible); FT/IT applet seeds + the My Sky heading
assertion updated to the new names; 531 dashboard/gameboard/applets ITs green.

[[feedback-applet-vs-page-naming-convention]] [[feedback-scss-id-context-specificity-trap]]

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

src/static_src/scss/_applets.scss

@@ -288,12 +288,17 @@
         z-index: 1;
 
         a {
-            color: rgba(var(--terUser), 1);
+            // Per-applet title tint: an applet may set --applet-title-fg (e.g.
+            // SkyDrive --sixU, Sea of Cards --sixNp) to recolor the link AND its
+            // hover glow; applets that don't fall back to the shared --terUser
+            // (unchanged). The hover COLOR stays the palette --ninUser highlight
+            // either way.
+            color: rgba(var(--applet-title-fg, var(--terUser)), 1);
             text-decoration: none;
 
             &:hover {
                 color: rgba(var(--ninUser), 1);
-                text-shadow: 0 0 0.5rem rgba(var(--terUser), 1);
+                text-shadow: 0 0 0.5rem rgba(var(--applet-title-fg, var(--terUser)), 1);
             }
         }
     }

src/static_src/scss/_gameboard.scss

@@ -952,7 +952,21 @@ body.page-gameboard {
     flex-direction: column;
     // Anchor for #id_applet_sky_delete_btn's absolute centering.
     position: relative;
-    background-color: rgba(var(--duoUser), 1) !important;
+    // Sea of Cards (neptunium ramp): a --sixNp light-teal title font over a
+    // --priNp deep-teal shell. The pair REVERSES on *-light palettes — see the
+    // body[class*="-light"] override below. --applet-title-fg is read by the
+    // shared applet title-link rule (_applets.scss); the hover keeps the palette
+    // --ninUser highlight, only its glow takes the --sixNp tint.
+    --applet-title-fg: var(--sixNp);
+    --applet-shell-bg: var(--priNp);
+    background-color: rgba(var(--applet-shell-bg), 1) !important;
+
+    // "Sea of Cards" — the conjunction stays lowercase + italic against the h2's
+    // uppercase transform (user-spec 2026-06-08).
+    > h2 .my-sea-title-of {
+        text-transform: none;
+        font-style: italic;
+    }
 
     h2 {
         flex-shrink: 0;
@@ -1216,3 +1230,11 @@ body.page-gameboard {
         margin: 0;
     }
 }
+
+// *-light palettes: reverse the Sea of Cards --sixNp/--priNp pair (deep --priNp
+// to the title font + glow, light --sixNp to the shell bg). Higher specificity
+// than #id_applet_my_sea.
+body[class*="-light"] #id_applet_my_sea {
+    --applet-title-fg: var(--priNp);
+    --applet-shell-bg: var(--sixNp);
+}

src/static_src/scss/_sky.scss

@@ -1113,7 +1113,14 @@ body[class*="-light"] #id_sky_tooltip_2 {
     flex-direction: column;
     // Anchor for #id_applet_sky_delete_btn's absolute centering.
     position: relative;
-    background-color: rgba(var(--duoUser), 1) !important;
+    // SkyDrive (uranium ramp): a --sixU light-green title font over a --priU
+    // deep-green shell. The pair REVERSES on *-light palettes (a deep bg swamps
+    // a light page) — see the body[class*="-light"] override below. --applet-
+    // title-fg is read by the shared applet title-link rule (_applets.scss); the
+    // hover keeps the palette --ninUser highlight, only its glow takes the tint.
+    --applet-title-fg: var(--sixU);
+    --applet-shell-bg: var(--priU);
+    background-color: rgba(var(--applet-shell-bg), 1) !important;
 
     h2 {
         flex-shrink: 0;
@@ -1155,6 +1162,14 @@ body[class*="-light"] #id_sky_tooltip_2 {
     }
 }
 
+// *-light palettes: reverse the SkyDrive --sixU/--priU pair so the deep --priU
+// drops to the title font + glow and the light --sixU lifts to the shell bg
+// (legible against a light page). Higher specificity than #id_applet_my_sky.
+body[class*="-light"] #id_applet_my_sky {
+    --applet-title-fg: var(--priU);
+    --applet-shell-bg: var(--sixU);
+}
+
 // ── Sky full page (column layout) ─────────────────────────────────────────
 //
 // Aperture foundation lives universally in _base.scss; nothing sky-specific