From fa427d4a9e57f4c7022718f2dc9572c7acdd6075 Mon Sep 17 00:00:00 2001
From: Colonel John Hannibal Smith <hannibal@a-team.dev>
Date: Tue, 26 May 2026 00:47:48 +0200
Subject: [PATCH] =?UTF-8?q?ba:=20production=20fixes=20=E2=80=94=20calc()?=
 =?UTF-8?q?=20wraps,=20side=20spine=20grid,=20disc-art=20tokens,=20back-tr?=
 =?UTF-8?q?ay=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(1) All <style> blocks already removed by Murdock — verified zero across all 3 templates.
(2) CSS reset already comprehensive (8 rules) — applied globally via opencd.css.
(3) Jewel-case width: wrapped 100%%-2rem in calc() for proper min() parsing in all browsers.
(4) Back-tray fix: spines no longer overlap — left spine grid-column:1, right spine grid-column:3 via :first-child/:last-child. demo-tray-container overflow-y:auto so scrollbar visible. 280x236 CD dims correct.
(5) Leaflet width: wrapped calc() same as jewel-case.
(6) .cd-spine--side: class now defined (inherits vertical-rl from .cd-spine). Back-tray grid explicitly positions side spines.
(7) Token consistency: disc-art section converted from raw var(--gray-*) to 7 new --cd-disc-surface-* tokens. Zero raw OpenProps remain outside :root definitions in opencd.css.
---
 opencd.css         | 26 ++++++++++++++++++--------
 templates/demo.css |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/opencd.css b/opencd.css
index 4fa8e14..93d2429 100644
--- a/opencd.css
+++ b/opencd.css
@@ -80,6 +80,13 @@
   --cd-aspect-jewel:   280 / 245;
   --cd-aspect-leaflet: 1 / 1;
   --cd-aspect-disc:    1 / 1;
+  --cd-disc-surface-1: var(--gray-4);
+  --cd-disc-surface-2: var(--gray-2);
+  --cd-disc-surface-3: var(--gray-6);
+  --cd-disc-surface-4: var(--gray-5);
+  --cd-disc-surface-5: var(--gray-7);
+  --cd-disc-surface-6: var(--gray-3);
+  --cd-disc-hole-text: var(--gray-4);
 }
 
 /* 2. Reset */
@@ -95,7 +102,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
 /* 3. Jewel Case */
 .cd-jewel-case {
   display: grid; grid-template-columns: var(--cd-spine-width) 1fr; grid-template-rows: auto 1fr;
-  width: min(var(--cd-jewel-width), 100% - 2rem); min-height: var(--cd-jewel-height);
+  width: min(var(--cd-jewel-width), calc(100% - 2rem)); min-height: var(--cd-jewel-height);
   background: var(--cd-surface-0); border-radius: var(--cd-jewel-radius);
   box-shadow: var(--cd-jewel-shadow); overflow: hidden; position: relative;
   transition: width var(--cd-transition-duration) var(--cd-ease-default);
@@ -103,7 +110,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   container-type: inline-size;
 }
 .cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
-  width: min(var(--cd-jewel-open-width), 100% - 2rem);
+  width: min(var(--cd-jewel-open-width), calc(100% - 2rem));
 }
 .cd-jewel-case > .cd-jewel-inner {
   grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
@@ -123,7 +130,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
 }
 .cd-spine .spine-track { font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1); opacity: var(--cd-text-opacity-muted); }
-/* side spine: vertical-rl from base is correct */
+/* side spine: inherits vertical-rl from .cd-spine, positioned by back-tray grid */
+.cd-spine--side { }
 
 /* 5. Leaflet */
 .leaflet-content {
@@ -153,7 +161,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
   color: var(--cd-text-muted); margin-top: auto;
 }
-.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), 100% - 2rem); box-shadow: none; background: transparent; }
+.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(100% - 2rem)); box-shadow: none; background: transparent; }
 .cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
 .leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
 .leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
@@ -164,7 +172,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
 /* 6. Disc Art */
 .disc-art {
   width: var(--cd-disc-diameter); aspect-ratio: var(--cd-aspect-disc); border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, var(--gray-4) 0%, var(--gray-2) 40%, var(--gray-6) 70%, var(--gray-2) 100%);
+  background: radial-gradient(circle at 30% 30%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 40%, var(--cd-disc-surface-3) 70%, var(--cd-disc-surface-2) 100%);
   display: flex; align-items: center; justify-content: center; position: relative;
   box-shadow: var(--cd-disc-shadow);
 }
@@ -176,11 +184,11 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   position: absolute; width: calc(var(--cd-disc-hole) * var(--cd-disc-hole-scale));
   aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
   font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
-  color: var(--gray-4); z-index: var(--cd-z-stack-base); pointer-events: none;
+  color: var(--cd-disc-hole-text); z-index: var(--cd-z-stack-base); pointer-events: none;
 }
 .disc-art--sheen {
-  background: radial-gradient(circle at 25% 25%, var(--gray-4) 0%, var(--gray-2) 35%, var(--gray-5) 50%, transparent 65%),
-    radial-gradient(circle at 75% 75%, var(--gray-7) 0%, var(--gray-3) 40%, transparent 70%);
+  background: radial-gradient(circle at 25% 25%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 35%, var(--cd-disc-surface-4) 50%, transparent 65%),
+    radial-gradient(circle at 75% 75%, var(--cd-disc-surface-5) 0%, var(--cd-disc-surface-6) 40%, transparent 70%);
 }
 
 /* 7. Human Advisory */
@@ -215,6 +223,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
 .tray-credits .credits-label { font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs); color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1); }
 .tray-credits p { font-family: var(--cd-font-body); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); line-height: 1.5; }
 .back-tray .cd-spine { grid-row: 1; background: var(--cd-spine-bg); }
+.back-tray > .cd-spine:first-child { grid-column: 1; }
+.back-tray > .cd-spine:last-child { grid-column: 3; }
 
 /* 9. Grid */
 .cd-grid { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)); }
diff --git a/templates/demo.css b/templates/demo.css
index e2ae4e0..2c681f2 100644
--- a/templates/demo.css
+++ b/templates/demo.css
@@ -59,7 +59,7 @@ body {
   max-height: var(--cd-tray-height);
   border-radius: var(--cd-jewel-radius);
   box-shadow: var(--cd-jewel-shadow);
-  overflow: hidden;
+  overflow-y: auto;
 }