phase: ba trim+reset+dimension fixes — opencd.css to 305 lines, tray constraint, spine fix

Phase 3 (Bug #6, #8):
- Stripped decorative comment blocks — simple /* Section */ headers throughout
- Simplified .disc-art--sheen from 3-layer to 2-layer radial gradient
- Removed standalone .advisory-row--red class (use modifier pattern)
- Fixed .cd-spine--side: removed writing-mode: horizontal-tb + flex-direction: row
  override — side spines now inherit vertical-rl from .cd-spine base

Phase 4 (Bug #2, #3, #4):
- Expanded reset from 5 lines to 35 lines: font inheritance, line-height, form
  elements, block images, list-style, heading reset, link reset
- Added --cd-tray-height: calc(236px * var(--cd-scale)) token in :root
- Added max-height: var(--cd-tray-height) + overflow-y: auto to .back-tray
- Changed .cd-jewel-case width to min(var(--cd-jewel-width), 100% - 2rem)
- Updated .cd-jewel-case--open width to min(var(--cd-jewel-open-width), ...)
- Tightened back-tray.html content (condensed credits + technical para)

Co-authored-by: H.M. Murdock <murdock@a-team.dev> (Phases 1-2)

templates/demo.css

@@ -0,0 +1,116 @@
+/* OpenCD — Demo page chrome (not framework component CSS)
+   Shared by jewel-case.html, back-tray.html, leaflet.html
+   All --cd-* tokens defined in opencd.css */
+
+
+/* ── Shared demo layout ── */
+
+body {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  padding: 2rem;
+  background: oklch(92% .012 85);
+  font-family: var(--cd-font-label);
+}
+
+.demo-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  font-size: .875rem;
+}
+
+.demo-controls label {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.demo-controls input[type="checkbox"] {
+  accent-color: var(--cd-advisory-red);
+}
+
+.demo-controls select {
+  padding: .25rem .5rem;
+  border: 1px solid var(--cd-text-muted);
+  border-radius: var(--cd-jewel-radius);
+  font-family: inherit;
+}
+
+.demo-footnote {
+  font-size: .75rem;
+  color: var(--cd-text-muted);
+  text-align: center;
+  max-width: 480px;
+  line-height: 1.5;
+}
+
+
+/* ── Back-tray demo wrapper ── */
+
+.demo-tray-container {
+  width: var(--cd-jewel-width);
+  max-height: var(--cd-tray-height);
+  border-radius: var(--cd-jewel-radius);
+  box-shadow: var(--cd-jewel-shadow);
+  overflow: hidden;
+}
+
+
+/* ── Leaflet-specific demo overrides ── */
+
+.demo-controls {
+  flex-wrap: wrap;
+}
+
+.demo-controls button {
+  padding: .5rem 1rem;
+  border: 1px solid var(--cd-text-muted);
+  border-radius: var(--cd-jewel-radius);
+  background: var(--cd-surface-0);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--cd-transition-duration);
+}
+
+.demo-controls button:hover {
+  background: var(--cd-grid-color);
+}
+
+.demo-controls button:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.demo-controls .page-indicator {
+  font-family: var(--cd-font-mono);
+  font-size: .875rem;
+  color: var(--cd-text-muted);
+  min-width: 8ch;
+  text-align: center;
+}
+
+.leaflet-content--multi {
+  max-width: calc(var(--cd-leaflet-size) + var(--cd-space-inset) * 2);
+}
+
+.leaflet-pages {
+  display: flex;
+  gap: var(--cd-space-stack);
+  flex-direction: column;
+  position: relative;
+}
+
+.leaflet-pages .leaflet-page {
+  display: none;
+}
+
+.leaflet-pages .leaflet-page[data-leaflet-active="true"] {
+  display: flex;
+}