Render the script surfaces correctly in dark mode

The explainer panel used var(--surface, #fff) and PCDetail's Run Scripts
and Corporate Tools styles used --text-primary, --text-secondary and
--bg-secondary. None of those four tokens exist in this app's theme, so
var() fell through: the explainer rendered a solid white block over the
dark background and the surrounding copy lost its intended contrast.

The real tokens are --bg-card, --text and --text-light. A fallback
colour is what made this hard to catch - it looks correct in light mode
and only misrenders on the theme the shop floor actually runs, so it
would not have shown up in authoring or in review.

Both files now carry a test asserting their styles reference only
defined tokens and contain no var(--x, #colour) fallbacks. That test
immediately caught a further dead --warning fallback in the banner.

The two long per-field explanations in the Add Script form are now
collapsed behind "How this works". The modal already scrolled, and
three paragraphs of standing prose between the inputs pushed Save off
screen, so the copy was being skimmed past rather than read.

plugins/endpoints/frontend/views/systemScriptsSettings.spec.js

@@ -96,6 +96,25 @@ describe('SystemScriptsSettings', () => {
     expect(source).not.toMatch(/<details class="explainer" open>/)
   })
 
+  it('collapses the long per-field prose in the form', () => {
+    // The modal is already tall enough to scroll. Three paragraphs of standing
+    // explanation between the inputs pushes Save off screen and gets skimmed
+    // past, which is the opposite of what the copy is for.
+    const helps = source.match(/<details class="field-help">/g) || []
+    expect(helps.length).toBeGreaterThanOrEqual(2)
+    expect(source).toMatch(/<summary>How this works<\/summary>/)
+  })
+
+  it('styles itself from defined theme tokens only', () => {
+    // --surface and --text-primary are not defined by this app's theme, so a
+    // var() fallback silently rendered a white panel on the dark background.
+    // A fallback colour is the bug: it looks correct in light mode and only
+    // shows up as a bright block for dark-mode users.
+    const styles = source.slice(source.indexOf('<style scoped>'))
+    expect(styles).not.toMatch(/--surface|--text-primary|--text-secondary|--bg-secondary/)
+    expect(styles).not.toMatch(/var\(--[a-z-]+,\s*#/)
+  })
+
   it('states that output is kept locally and only returned on failure', () => {
     // Operators otherwise assume either that nothing was captured or that
     // every run is shipped back to the server.