rename natus → sky across the codebase — natal chart abstraction is now sky throughout, since chart inputs aren't birthday-gated

Mechanical rename: 5 files (sky-wheel.js, _sky.scss, _sky_overlay.html, SkyWheelSpec.js x2), 24 in-place edits across templates/views/urls/SCSS/JS/tests/CLAUDE.md. URL names epic:natus_save → epic:sky_save (epic namespaced, no clash w. dashboard:sky_save), JS module NatusWheel → SkyWheel, DOM ids id_natus_* → id_sky_*, BEM classes natus-* → sky-*, dashboard sky_natus_data/sky_natus_preview collapsed to sky_data/sky_preview_data. No DB migration needed (User.sky_chart_data + GameEvent.SKY_SAVED already used sky-prefix). 778 ITs + Jasmine green.

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

src/static_src/scss/_card-deck.scss

@@ -926,7 +926,7 @@ html:has(.sig-backdrop) {
 }
 
 // ── PICK SEA overlay ─────────────────────────────────────────────────────────
-// Mirrors .natus-* structure but with columns reversed:
+// Mirrors .sky-* structure but with columns reversed:
 //   left = transparent (Celtic Cross card positions)
 //   right = rgba(--priUser) opaque (spread select)
 
@@ -1414,7 +1414,7 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
 
 }
 
-// NVM button — same positioning as .natus-modal-wrap > .btn-cancel
+// NVM button — same positioning as .sky-modal-wrap > .btn-cancel
 .sea-modal-wrap > .btn-cancel {
     position: absolute;
     top: -1rem;

src/static_src/scss/_sky.scss

@@ -1,13 +1,13 @@
-// ─── Natus (Pick Sky) overlay ────────────────────────────────────────────────
+// ─── Sky (Pick Sky) overlay ────────────────────────────────────────────────
 // Gaussian backdrop + centred modal, matching the gate/sig overlay pattern.
-// Open state: html.natus-open (added by JS on PICK SKY click).
+// Open state: html.sky-open (added by JS on PICK SKY click).
 //
 // Layout: header / two-column body (form | wheel) / footer
 // Collapses to stacked single-column below 600 px.
 
 // ── Scroll-lock ───────────────────────────────────────────────────────────────
 
-html.natus-open {
+html.sky-open {
     overflow: hidden;
 
     #id_aperture_fill { opacity: 1; }
@@ -15,7 +15,7 @@ html.natus-open {
 
 // ── Backdrop ──────────────────────────────────────────────────────────────────
 
-.natus-backdrop {
+.sky-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
@@ -23,18 +23,18 @@ html.natus-open {
     z-index: 100;
     pointer-events: none;
 
-    // Hidden until html.natus-open
+    // Hidden until html.sky-open
     opacity: 0;
     transition: opacity 0.15s ease;
 }
 
-html.natus-open .natus-backdrop {
+html.sky-open .sky-backdrop {
     opacity: 1;
 }
 
 // ── Overlay shell (positions + scrolls the modal) ─────────────────────────────
 
-.natus-overlay {
+.sky-overlay {
     position: fixed;
     inset: 0;
     display: flex;
@@ -45,7 +45,7 @@ html.natus-open .natus-backdrop {
     overscroll-behavior: contain;
     pointer-events: none;
 
-    // Hidden until html.natus-open
+    // Hidden until html.sky-open
     visibility: hidden;
 
     @media (orientation: landscape) {
@@ -55,7 +55,7 @@ html.natus-open .natus-backdrop {
     }
 }
 
-html.natus-open .natus-overlay {
+html.sky-open .sky-overlay {
     visibility: visible;
     pointer-events: none;   // modal itself is pointer-events: auto
 }
@@ -64,7 +64,7 @@ html.natus-open .natus-overlay {
 
 // Thin wrapper: position:relative so the NVM circle can sit on the corner
 // without being clipped by the modal's overflow:hidden.
-.natus-modal-wrap {
+.sky-modal-wrap {
     position: relative;
     pointer-events: none;   // overlay handles pointer-events; children re-enable
     width: 92vw;
@@ -76,16 +76,16 @@ html.natus-open .natus-overlay {
     transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
-html.natus-open .natus-modal-wrap {
+html.sky-open .sky-modal-wrap {
     opacity: 1;
     transform: translateY(0);
 }
 
-.natus-modal {
+.sky-modal {
     pointer-events: auto;
     display: flex;
     flex-direction: column;
-    width: 100%;      // fills .natus-modal-wrap
+    width: 100%;      // fills .sky-modal-wrap
     max-height: 96vh;
     border: 0.1rem solid rgba(var(--terUser), 0.25);
     border-radius: 0.5rem;
@@ -94,7 +94,7 @@ html.natus-open .natus-modal-wrap {
 
 // ── Header ────────────────────────────────────────────────────────────────────
 
-.natus-modal-header {
+.sky-modal-header {
     flex-shrink: 0;
     padding: 0.6rem 1rem;
     background: rgba(var(--priUser), 1);
@@ -121,7 +121,7 @@ html.natus-open .natus-modal-wrap {
 
 // ── Body: two columns ─────────────────────────────────────────────────────────
 
-.natus-modal-body {
+.sky-modal-body {
     flex: 1;
     min-height: 0;
     display: flex;
@@ -130,7 +130,7 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Form column — fixed width; form-main scrolls, confirm btn pinned at bottom
-.natus-form-col {
+.sky-form-col {
     flex: 0 0 240px;
     overflow: hidden;
     padding: 0.9rem 1rem;
@@ -142,7 +142,7 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Scrollable inner container (form fields + status)
-.natus-form-main {
+.sky-form-main {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -152,12 +152,12 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Confirm btn inside form-col — full width, pinned at column bottom
-.natus-form-col > #id_natus_confirm {
+.sky-form-col > #id_sky_confirm {
     flex-shrink: 0;
 }
 
 // Wheel column — fills remaining space
-.natus-wheel-col {
+.sky-wheel-col {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -168,7 +168,7 @@ html.natus-open .natus-modal-wrap {
     position: relative;
 }
 
-.natus-svg {
+.sky-svg {
     display: block;
     width: 100%;
     height: 100%;
@@ -179,7 +179,7 @@ html.natus-open .natus-modal-wrap {
 
 // ── Form fields ───────────────────────────────────────────────────────────────
 
-.natus-field {
+.sky-field {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -204,9 +204,9 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Place search field wrapper: text input + geo button inline
-.natus-place-field { position: relative; }
+.sky-place-field { position: relative; }
 
-.natus-place-wrap {
+.sky-place-wrap {
     display: flex;
     gap: 0.4rem;
     align-items: center;
@@ -216,7 +216,7 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Nominatim suggestion dropdown
-.natus-suggestions {
+.sky-suggestions {
     position: absolute;
     left: 0;
     right: 0;
@@ -230,7 +230,7 @@ html.natus-open .natus-modal-wrap {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
-.natus-suggestion-item {
+.sky-suggestion-item {
     display: block;
     width: 100%;
     padding: 0.4rem 0.6rem;
@@ -253,7 +253,7 @@ html.natus-open .natus-modal-wrap {
 }
 
 // Coords row: lat | lon (read-only, populated by place selection)
-.natus-coords {
+.sky-coords {
     flex-direction: row;
     align-items: flex-end;
     gap: 0.4rem;
@@ -282,7 +282,7 @@ html.natus-open .natus-modal-wrap {
 
 // ── Status line ───────────────────────────────────────────────────────────────
 
-.natus-status {
+.sky-status {
     font-size: 0.65rem;
     opacity: 0.6;
     min-height: 1rem;
@@ -295,11 +295,11 @@ html.natus-open .natus-modal-wrap {
 }
 
 // ── NVM corner btn ────────────────────────────────────────────────────────────
-// Absolutely pinned to top-right corner of .natus-modal-wrap.
+// Absolutely pinned to top-right corner of .sky-modal-wrap.
 // transform: translate(50%,-50%) centres the circle on the corner point.
-// Lives outside .natus-modal so overflow:hidden doesn't clip it.
+// Lives outside .sky-modal so overflow:hidden doesn't clip it.
 
-#id_natus_cancel {
+#id_sky_cancel {
     position: absolute;
     top: 0;
     right: 0;
@@ -312,22 +312,22 @@ html.natus-open .natus-modal-wrap {
 // ── Narrow / portrait ─────────────────────────────────────────────────────────
 
 @media (max-width: 600px) {
-    .natus-modal-wrap {
+    .sky-modal-wrap {
         width: 92vw;
     }
 
-    .natus-modal {
+    .sky-modal {
         max-height: 96vh;
     }
 
-    .natus-modal-body {
+    .sky-modal-body {
         flex-direction: column;
         overflow-y: auto;
     }
 
     // Form col stacks above wheel; internally becomes a flex-row so
     // form-main gets most of the width and confirm btn sits to its right.
-    .natus-form-col {
+    .sky-form-col {
         flex: 0 0 auto;
         flex-direction: row;
         align-items: flex-end;
@@ -337,19 +337,19 @@ html.natus-open .natus-modal-wrap {
         gap: 0.5rem;
     }
 
-    .natus-form-main {
+    .sky-form-main {
         flex: 1;
         min-width: 0;
         overflow-y: auto;
         max-height: 40vh;
     }
 
-    .natus-form-col > #id_natus_confirm {
+    .sky-form-col > #id_sky_confirm {
         flex-shrink: 0;
         align-self: flex-end;
     }
 
-    .natus-wheel-col {
+    .sky-wheel-col {
         flex: 0 0 280px;
     }
 }
@@ -512,10 +512,10 @@ body[class*="-light"] {
 
 // ── Planet hover tooltip — must live outside any ancestor with transform or
 //    container-type (both break position:fixed). Placed as a direct sibling of
-//    .natus-overlay in room.html; alongside #id_tooltip_portal in home.html. ──
+//    .sky-overlay in room.html; alongside #id_tooltip_portal in home.html. ──
 
-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
     position: fixed;
     z-index: 200;
     pointer-events: auto;
@@ -787,8 +787,8 @@ body[class*="-light"] {
 }
 
 // Element title colors — primary tier on dark palettes
-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
     .tt-title--el-fire  { color: rgba(var(--priRd), 1); }
     .tt-title--el-stone { color: rgba(var(--priFs), 1); }
     .tt-title--el-time  { color: rgba(var(--priYl), 1); }
@@ -798,8 +798,8 @@ body[class*="-light"] {
 }
 
 // Sign tooltip title + sign icon SVG — element border colors (Stone/Air/Fire/Water schema)
-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
     .tt-title--sign-fire  { color: rgba(var(--priOr), 1); }
     .tt-title--sign-stone { color: rgba(var(--priMe), 1); }
     .tt-title--sign-air   { color: rgba(var(--priBl), 1); }
@@ -816,8 +816,8 @@ body[class*="-light"] {
 }
 
 // On light palettes — switch to tertiary tier for legibility
-body[class*="-light"] #id_natus_tooltip,
-body[class*="-light"] #id_natus_tooltip_2 {
+body[class*="-light"] #id_sky_tooltip,
+body[class*="-light"] #id_sky_tooltip_2 {
     .tt-title--el-fire  { color: rgba(var(--terRd), 1); }
     .tt-title--el-stone { color: rgba(var(--terFs), 1); }
     .tt-title--el-time  { color: rgba(var(--terYl), 1); }
@@ -827,8 +827,8 @@ body[class*="-light"] #id_natus_tooltip_2 {
 }
 
 // On light palettes — switch to primary (darkest) tier for legibility
-body[class*="-light"] #id_natus_tooltip,
-body[class*="-light"] #id_natus_tooltip_2 {
+body[class*="-light"] #id_sky_tooltip,
+body[class*="-light"] #id_sky_tooltip_2 {
     .tt-title--au { color: rgba(var(--priAu), 1); }
     .tt-title--ag { color: rgba(var(--priAg), 1); }
     .tt-title--hg { color: rgba(var(--priHg), 1); }
@@ -849,7 +849,7 @@ body[class*="-light"] #id_natus_tooltip_2 {
 
     h2 { flex-shrink: 0; }
 
-    .natus-svg {
+    .sky-svg {
         flex: 1;
         min-height: 0;
         max-width: none;
@@ -866,7 +866,7 @@ body[class*="-light"] #id_natus_tooltip_2 {
         flex-direction: column;
         gap: 0.5rem;
 
-        #id_natus_confirm {
+        #id_sky_confirm {
             margin-top: -1.5rem;
             align-self: center;
             position: relative;
@@ -908,13 +908,13 @@ body.page-sky {
 }
 
 // Stack wheel above form; allow body to grow past viewport (page scrolls, not body)
-.sky-page .natus-modal-body {
+.sky-page .sky-modal-body {
     flex-direction: column;
     flex-shrink: 0;
 }
 
 // Wheel takes its natural square size from its width — never shrinks for the form
-.sky-page .natus-wheel-col {
+.sky-page .sky-wheel-col {
     order: -1;
     flex: 0 0 auto;
     width: 100%;
@@ -925,7 +925,7 @@ body.page-sky {
 }
 
 // Form col runs horizontally below the wheel (same compact pattern as narrow-portrait modal)
-.sky-page .natus-form-col {
+.sky-page .sky-form-col {
     flex: 0 0 auto;
     flex-direction: row;
     align-items: flex-end;
@@ -933,7 +933,7 @@ body.page-sky {
     border-top: 0.1rem solid rgba(var(--terUser), 0.12);
 }
 
-.sky-page .natus-form-main {
+.sky-page .sky-form-main {
     flex: 1;
     min-width: 0;
     overflow-y: visible;
@@ -942,8 +942,8 @@ body.page-sky {
 // ── Sidebar z-index sink (landscape sidebars must go below backdrop) ───────────
 
 @media (orientation: landscape) {
-    html.natus-open body .container .navbar,
-    html.natus-open body #id_footer {
+    html.sky-open body .container .navbar,
+    html.sky-open body #id_footer {
         z-index: 90;
     }
 }

src/static_src/scss/_tooltips.scss

@@ -1,6 +1,6 @@
 // ── Tooltip base styles ───────────────────────────────────────────────────────
-// Shared by wallet tokens, game-kit kit bag, and natus wheel tooltips.
-// Portal tooltips (#id_tooltip_portal, #id_natus_tooltip) are position:fixed
+// Shared by wallet tokens, game-kit kit bag, and sky wheel tooltips.
+// Portal tooltips (#id_tooltip_portal, #id_sky_tooltip) are position:fixed
 // and override z-index; inline .tt cards use position:absolute within their
 // parent token container.
 

src/static_src/scss/_tray.scss

@@ -258,7 +258,7 @@ $tray-bevel:    0.3rem;  // inner bevel ring; grid must sit inside this
     position: relative;
 
     // Whatever a cell holds (role-card img, sig stage card, future Celtic Cross
-    // / natus wheel / dice) gets a soft drop shadow to lift it off the felt.
+    // / sky wheel / dice) gets a soft drop shadow to lift it off the felt.
     // Applied to the child rather than the cell itself so the dotted grid
     // borders stay shadow-free.
     > * {

src/static_src/scss/core.scss

@@ -7,7 +7,7 @@
 @import 'palette-picker';
 @import 'room';
 @import 'card-deck';
-@import 'natus';
+@import 'sky';
 @import 'tray';
 @import 'billboard';
 @import 'note';