Fix pack detail dark backgrounds: surface-inverse → surface-primary

All 6 pack detail components (dashboard, editor, rule-builder, yaml,
simulation, approvals) had :host background set to surface-inverse
(dark/black) or gradient variations of it. Fixed to surface-primary
(warm cream) to match the rest of the app. Also removed excessive
min-height: 100vh from all components.

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

src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts

@@ -212,9 +212,8 @@ import { PolicyApiService } from '../services/policy-api.service';
         `
       :host {
         display: block;
-        background: linear-gradient(145deg, var(--color-text-heading) 0%, var(--color-surface-inverse) 60%, var(--color-surface-inverse) 100%);
+        background: var(--color-surface-primary);
         color: var(--color-text-primary);
-        min-height: 100vh;
       }
 
       .approvals {

src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts

@@ -105,7 +105,7 @@ import {
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
       .dash { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .dash__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
       .dash__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -127,7 +127,7 @@ import {
       .heatmap__value { color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; }
       .heatmap__latency { color: var(--color-text-muted); font-size: 0.85rem; }
       .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
-      .chip { border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-inverse); }
+      .chip { border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); padding: 0.25rem 0.6rem; background: var(--color-surface-primary); }
       .chip--muted { opacity: 0.8; }
     `,
     ]

src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts

@@ -191,9 +191,8 @@ interface ChecklistItem {
         `
       :host {
         display: block;
-        background: var(--color-surface-inverse);
+        background: var(--color-surface-primary);
         color: var(--color-text-primary);
-        min-height: 100vh;
       }
 
       .policy-editor {
@@ -274,7 +273,7 @@ interface ChecklistItem {
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         overflow: hidden;
-        background: var(--color-surface-inverse);
+        background: var(--color-surface-primary);
       }
 
       .editor-shell__surface {
@@ -388,7 +387,7 @@ interface ChecklistItem {
 
       .diagnostics {
         margin-top: 1.25rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-surface-primary);
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 1rem;
@@ -497,7 +496,7 @@ interface ChecklistItem {
         border: 1px solid var(--color-border-primary);
         border-radius: var(--radius-xl);
         padding: 0.55rem 0.65rem;
-        background: var(--color-surface-inverse);
+        background: var(--color-surface-primary);
       }
 
       .checklist__status {

src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts

@@ -73,7 +73,7 @@ import jsPDF from './jspdf.stub';
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-elevated); color: var(--color-text-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-elevated); color: var(--color-text-primary); ; }
       .expl { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .expl__header { display: flex; justify-content: space-between; align-items: center; }
       .expl__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }

src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts

@@ -72,7 +72,7 @@ import { ActivatedRoute } from '@angular/router';
   `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
       .rb { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .rb__header { display: flex; justify-content: space-between; gap: 1rem; }
       .rb__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -80,9 +80,9 @@ import { ActivatedRoute } from '@angular/router';
       .rb__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 1rem; margin-top: 1rem; }
       .rb__form { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.65rem; }
       label { display: grid; gap: 0.25rem; color: rgba(212, 201, 168, 0.5); }
-      input, select { background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.5rem; }
+      input, select { background: var(--color-surface-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.5rem; }
       .rb__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
-      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
+      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
       @media (max-width: 1024px) { .rb__grid { grid-template-columns: 1fr; } }
     `,
     ]

src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts

@@ -221,10 +221,7 @@ import { PolicyApiService } from '../services/policy-api.service';
         `
       :host {
         display: block;
-        background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 25%),
+        background: var(--color-surface-primary);
-          radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.08), transparent 22%),
-          var(--color-surface-inverse);
-        min-height: 100vh;
         color: var(--color-text-primary);
       }
 
@@ -313,7 +310,6 @@ import { PolicyApiService } from '../services/policy-api.service';
       input[type='checkbox'] {
         width: 100%;
         border: 1px solid var(--color-border-primary);
-        background: var(--color-surface-inverse);
         color: var(--color-text-primary);
         border-radius: var(--radius-lg);
         padding: 0.65rem;
@@ -445,7 +441,6 @@ import { PolicyApiService } from '../services/policy-api.service';
       }
 
       th {
-        background: var(--color-surface-inverse);
         color: rgba(212, 201, 168, 0.5);
         position: sticky;
         top: 0;

src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts

@@ -77,7 +77,7 @@ interface YamlDiagnostic {
     `,
     styles: [
         `
-      :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; }
+      :host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); ; }
       .yaml { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
       .yaml__header { display: flex; justify-content: space-between; gap: 1rem; }
       .yaml__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
@@ -86,7 +86,7 @@ interface YamlDiagnostic {
       .yaml__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 1rem; margin-top: 1rem; }
       .yaml__editor { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; display: grid; gap: 0.5rem; }
       label { color: rgba(212, 201, 168, 0.5); font-weight: var(--font-weight-semibold); }
-      textarea { width: 100%; background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
+      textarea { width: 100%; background: var(--color-surface-primary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; }
       .toolbar { display: flex; gap: 0.5rem; align-items: center; }
       button { background: var(--color-btn-primary-bg); border: 1px solid var(--color-btn-primary-bg); color: var(--color-text-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; }
       button:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -94,7 +94,7 @@ interface YamlDiagnostic {
       .pill--ok { border-color: var(--color-status-success); color: var(--color-status-success); }
       .diag { list-style: none; margin: 0; padding: 0; color: var(--color-status-error-border); }
       .yaml__preview { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; }
-      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
+      pre { margin: 0; max-height: 420px; overflow: auto; background: var(--color-surface-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; }
       @media (max-width: 1024px) { .yaml__layout { grid-template-columns: 1fr; } }
     `,
     ]