From 577ef30f5cece8d369748cdba429b83e169e7f94 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Mon, 8 Jun 2026 18:55:34 -0400
Subject: [PATCH] room reelhouse: recolor per-view h2s; salvage POST's pill
 styling into YARN; revert POST to plain wash; colour-code ATLAS row accents;
 drop letter-spacing on the Sea of Cards italic 'of'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- _room.scss: SCROLL h2 --priUser/--sixUser, POST h2 --priUser/--sepUser, PULSE h2 --priUser/--octUser. New .room-view--yarn block = verbatim salvage of POST's --duoUser green-felt + input-pill styling (.post-* renamed .yarn-*, #id_post_table -> #id_yarn_table), ready for when YARN's backing model + markup land. POST reverts to the plain dark %applet-box wash — only its h2 override + a bare-<ul> reset on #id_post_table (no felt/pills/bullets) remain. ATLAS per-source row accents colour-coded to echo the source h2 bgs: [data-source=provenance] -> --sixUser, [data-source=post] -> --sepUser (YARN/PULSE don't feed it yet).

- _gameboard.scss: .my-sea-title-of gets letter-spacing: normal, dropping the h2's enforced 0.2em tracking so the short italic 'of' doesn't read gappy.

- bundled (parallel work): rootvars.scss chroma-hue primaries brightened (yellow/lime/cyan/indigo/violet/fuschia/magenta pri+ter ramps).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/static_src/scss/_gameboard.scss |  4 +-
 src/static_src/scss/_room.scss      | 99 +++++++++++++++++++----------
 src/static_src/scss/rootvars.scss   | 22 +++----
 3 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss
index 4b29052..bf59c31 100644
--- a/src/static_src/scss/_gameboard.scss
+++ b/src/static_src/scss/_gameboard.scss
@@ -997,10 +997,12 @@ body.page-gameboard {
     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).
+    // uppercase transform (user-spec 2026-06-08). letter-spacing: normal drops
+    // the h2's enforced 0.2em tracking so the short italic word doesn't read gappy.
     > h2 .my-sea-title-of {
         text-transform: none;
         font-style: italic;
+        letter-spacing: normal;
     }
 
     h2 {
diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index 4ab6f99..cbc3918 100644
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -197,26 +197,32 @@ html.sea-open .room-aperture.is-scrollable {
         }
     }
 
-    // ── POST view — the room-scoped game-table thread ─────────────────────
-    // Reuses post.html's #id_post_table + composer markup (shared
-    // _post_line.html). The post styling proper is .post-page-scoped, so the
-    // essentials are restated here for the carousel card.
-    .room-view--post {
-        // New Post applet treatment (mirrors #id_applet_new_post in _applets.scss):
-        // a --duoUser green-felt card. The rotated room-name `> h2` gets the SAME
-        // green-tinted strip as the billboard New Post title — the felt shows
-        // through (see the `> h2` note). POST-scoped, so the SCROLL/ATLAS/YARN/PULSE
-        // cards keep their plain dark %applet-box wash.
+    // ── Per-view title recolor + view-specific card styling ───────────────
+    // Each reelhouse view's rotated room-name `> h2` carries a distinct
+    // font/bg pair (user-spec 2026-06-08) so the five views read as
+    // colour-coded sections. ATLAS's per-source row accents (further down)
+    // echo the SCROLL + POST h2 bgs so a merged row's origin is legible.
+
+    // SCROLL — provenance feed. --priUser font on a --sixUser strip.
+    .room-view--scroll .applet-scroll > h2 {
+        color: rgba(var(--priUser), 1);
+        background-color: rgba(var(--sixUser), 1);
+    }
+
+    // YARN view — the room-scoped chat thread (most of it forthcoming). Inherits
+    // the full green-felt input-pill treatment POST used to carry: a --duoUser
+    // card, the green-tinted h2 strip, the input-style line pills + composer.
+    // SALVAGED here verbatim (the .post-* selectors renamed .yarn-*) because POST
+    // reverts to the plain applet wash below — so the styling survives for when
+    // YARN's backing model + markup land. Reuses post.html's composer markup
+    // language; the line/buffer/form/table selectors are the future .yarn-* ones.
+    .room-view--yarn {
         .applet-scroll {
             background-color: rgba(var(--duoUser), 1);
 
             > h2 {
-                // Match the New Post title strip exactly: three translucent
-                // 0,0,0/0.125 layers and NO opaque --priUser base, so the --duoUser
-                // felt shows THROUGH for the same green-tinted "partial mask". (On
-                // the billboard #id_applet_new_post lands here by accident — its
-                // opaque base is out-specified by %applet-box > h2's background-color;
-                // here we do it on purpose.) bg-color 0.125 + two gradients = 3 layers.
+                // Three translucent 0,0,0/0.125 layers and NO opaque base, so the
+                // --duoUser felt shows THROUGH for a green-tinted "partial mask".
                 background-color: rgba(0, 0, 0, 0.125);
                 background-image:
                     linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
@@ -224,7 +230,7 @@ html.sea-open .room-aperture.is-scrollable {
             }
         }
 
-        #id_post_table {
+        #id_yarn_table {
             list-style: none;
             margin: 0;
             padding: 0;   // pills span the full card content width (= composer row)
@@ -235,12 +241,12 @@ html.sea-open .room-aperture.is-scrollable {
             flex-direction: column;
             justify-content: flex-end;   // bottom-anchor short threads
 
-            // Each line is styled to LOOK LIKE the "Enter a post line" composer
-            // input below it (mirrors .form-control, _base.scss): a --priUser fill +
-            // a 0.1rem --secUser border at the same border-radius, full width, an
-            // up/down margin and content-driven (dynamic) height — so the thread
-            // reads as a stack of input-style pills on the --duoUser felt.
-            .post-line {
+            // Each line is styled to LOOK LIKE the composer input below it
+            // (mirrors .form-control, _base.scss): a --priUser fill + a 0.1rem
+            // --secUser border at the same border-radius, full width, an up/down
+            // margin and content-driven (dynamic) height — so the thread reads as
+            // a stack of input-style pills on the --duoUser felt.
+            .yarn-line {
                 display: grid;
                 grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto);
                 align-items: baseline;
@@ -253,24 +259,24 @@ html.sea-open .room-aperture.is-scrollable {
                 padding: 0.5rem 0.75rem;
                 box-shadow: 1px 1px 0.125rem 1px rgba(0, 0, 0, 0.6);
 
-                .post-line-author {
+                .yarn-line-author {
                     font-weight: bold;
                     color: rgba(var(--quaUser), 1);
                     white-space: nowrap;
                     font-size: 0.85rem;
                 }
-                .post-line-text { min-width: 0; overflow-wrap: anywhere; }
-                .post-line-time {
+                .yarn-line-text { min-width: 0; overflow-wrap: anywhere; }
+                .yarn-line-time {
                     font-size: 0.75rem;
                     opacity: 0.5;
                     text-align: right;
                     white-space: nowrap;
                 }
             }
-            .post-line-buffer { flex-shrink: 0; height: 0.25rem; }
+            .yarn-line-buffer { flex-shrink: 0; height: 0.25rem; }
         }
 
-        .post-line-form {
+        .yarn-line-form {
             flex-shrink: 0;
             margin: 0;
             padding-top: 0.25rem;
@@ -284,6 +290,34 @@ html.sea-open .room-aperture.is-scrollable {
         }
     }
 
+    // POST view — reverts to the plain dark %applet-box wash (its green-felt
+    // input-pill styling moved to YARN above). Only its h2 is recoloured:
+    // --priUser font on a --sepUser strip.
+    .room-view--post {
+        .applet-scroll > h2 {
+            color: rgba(var(--priUser), 1);
+            background-color: rgba(var(--sepUser), 1);
+        }
+
+        // Bare-<ul> normalization only — no list bullets/indent (there's no
+        // global ul reset), so the thread reads as plain feed rows on the
+        // default wash rather than a bulleted list. The pill chrome is gone.
+        #id_post_table {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+        }
+    }
+
+    // PULSE view — forthcoming. --priUser font on an --octUser strip.
+    .room-view--pulse .applet-scroll > h2 {
+        color: rgba(var(--priUser), 1);
+        background-color: rgba(var(--octUser), 1);
+    }
+
     // ── ATLAS view — provenance + post-thread merged feed ─────────────────
     // room-views.js rebuilds the body from the live SCROLL + POST DOM on
     // activation; rows carry data-source so the two streams read distinctly.
@@ -327,10 +361,11 @@ html.sea-open .room-aperture.is-scrollable {
                 white-space: nowrap;
             }
         }
-        // Distinct per-source accent (border tint) — the styling hook the
-        // contract reserves for end-of-sprint polish.
-        .atlas-row[data-source="provenance"] { border-inline-start-color: rgba(var(--terUser), 0.6); }
-        .atlas-row[data-source="post"]       { border-inline-start-color: rgba(var(--quaUser), 0.6); }
+        // Distinct per-source accent (border tint), colour-coded to echo each
+        // source view's h2 bg: SCROLL (provenance) → --sixUser, POST → --sepUser.
+        // YARN + PULSE don't feed the ATLAS yet, so only these two are needed.
+        .atlas-row[data-source="provenance"] { border-inline-start-color: rgba(var(--sixUser), 0.6); }
+        .atlas-row[data-source="post"]       { border-inline-start-color: rgba(var(--sepUser), 0.6); }
     }
 
     // ── CHAT / PULSE stubs ────────────────────────────────────────────────
diff --git a/src/static_src/scss/rootvars.scss b/src/static_src/scss/rootvars.scss
index 13f48b3..bf08840 100644
--- a/src/static_src/scss/rootvars.scss
+++ b/src/static_src/scss/rootvars.scss
@@ -133,16 +133,16 @@
     --quiOr:  82,  47,  0;
     --sixOr:  51,  29,  0;
     // yellow (A-Time)
-    --priYl: 255, 207, 52;
+    --priYl: 255, 227, 82;
     --secYl: 211, 172, 44;
-    --terYl: 168, 138, 33;
+    --terYl: 148, 128, 29;
     --quaYl: 128, 106, 24;
     --quiYl:  91,  76, 15;
     --sixYl:  57,  49,  7;
     // lime (B-Time)
-    --priLm: 151, 174, 60;
+    --priLm: 181, 204, 90;
     --secLm: 124, 145, 48;
-    --terLm:  97, 117, 36;
+    --terLm:  92, 110, 31;
     --quaLm:  71,  90, 25;
     --quiLm:  47,  64, 15;
     --sixLm:  25,  40,  6;
@@ -161,9 +161,9 @@
     --quiTk:   0,  70,  61;
     --sixTk:   0,  45,  39;
     // cyan (A-Air)
-    --priCy:  13, 179, 200;
+    --priCy:  33, 209, 230;
     --secCy:  12, 150, 168;
-    --terCy:   0, 121, 136;
+    --terCy:   0, 101, 126;
     --quaCy:   0,  93, 106;
     --quiCy:   0,  67,  78;
     --sixCy:   0,  43,  52;
@@ -175,30 +175,30 @@
     --quiBl:   0,  52,  79;
     --sixBl:   0,  33,  51;
     // indigo (A-Water)
-    --priId:  111, 133, 244;
+    --priId:  121, 143, 244;
     --secId:  66,  88, 184;
     --terId:  53,  74, 156;
     --quaId:  44,  60, 131;
     --quiId:  32,  44, 106;
     --sixId:  21,  29,  71;
     // violet (B-Water)
-    --priVt: 120,  72, 183;
+    --priVt: 150,  102, 213;
     --secVt: 108,  65, 165;
     --terVt:  96,  58, 147;
     --quaVt:  80,  45, 124;
     --quiVt:  64,  30, 100;
     --sixVt:  43,  20,  66;
     // fuschia (A-Stone)
-    --priFs: 178,  71, 170;
+    --priFs: 208,  101, 200;
     --secFs: 138,  52, 131;
     --terFs: 107,  31, 101;
     --quaFs:  83,  17,  78;
     --quiFs:  61,   5,  56;
     --sixFs:  41,   0,  36;
     // magenta (B-Stone)
-    --priMe: 237,  30, 129;
+    --priMe: 257,  60, 159;
     --secMe: 196,  18, 108;
-    --terMe: 158,   1,  86;
+    --terMe: 148,   1,  80;
     --quaMe: 122,   0,  66;
     --quiMe:  89,   0,  48;
     --sixMe:  59,   0,  32;