fix(marimo): override One Dark syntax colours, widen editorial chrome

Several follow-up fixes to the marimo theme after visual review:

1. Code cells rendered in near-illegible salmon/pink because marimo ships
   CodeMirror with the One Dark theme, whose variable colour (#e06c75)
   is designed to contrast with a dark #282c34 background. On our cream
   canvas those colours disappeared. Override the obfuscated Lezer token
   classes (.ͼp, .ͼq .. .ͼ15) with editorial colours — indigo keywords,
   green strings, sepia numbers, near-black variables on a cream
   background. Also pin .ͼp's background to var(--card).

2. Form widget layout fixes: cap <select> at max-width 320px so the
   Locality dropdown (hundreds of long options) no longer sprawls across
   the hstack, force label whitespace: nowrap so HCPCS Code doesn't wrap,
   and scope flex overrides to [data-cell-role="output"] / .output-area
   to avoid breaking the top-level app layout (v4 went blank because the
   global flex override hit the marimo root).

3. Markdown body text: force .paragraph / strong / b / em / i to
   var(--foreground) so bold words inside mo.md() aren't rendered in
   marimo's default invert palette (the user saw "year, locality, HCPCS
   code" as white text on slate). Inline `code` now uses secondary bg
   with primary-coloured text and a cream pill.

4. Editorial chrome for sidebars, toolbars, and the runtime connection
   banner — cream bg + muted icons for .app-sidebar, near-black hover,
   indigo active state with left accent bar. Static-notebook banner
   forced to primary bg with cream text so the "Run or edit" CTA is
   legible.

5. CATCH-ALL sweep: output-area backgrounds forced transparent so no
   dark navy section-break leaks through, .cm-editor/.cm-line opacity
   locked to 1 so hide_code cell previews are never dimmed.

The notebooks container has been restarted to pick up the new CSS.

assets/css/marimo.css

@@ -372,9 +372,20 @@ body {
   font-family: var(--monospace-font) !important;
 }
 
-.cm-line {
+.cm-line,
+.cm-editor .cm-line,
+.marimo-cell .cm-content,
+.marimo-cell .cm-line {
   font-family: var(--monospace-font) !important;
   color: var(--foreground) !important;
+  opacity: 1 !important;
+}
+
+/* Force opaque text in CodeMirror — marimo may apply opacity
+   on hide_code or stale states which makes code illegible on cream. */
+.marimo-cell .cm-editor,
+.marimo-cell .cm-editor * {
+  opacity: 1 !important;
 }
 
 .cm-gutters {
@@ -402,6 +413,29 @@ body {
 .tok-typeName { color: #A85800 !important; }
 .tok-bool { color: #C0392B !important; }
 
+/* CodeMirror/Lezer obfuscated syntax token classes — override the
+   One Dark theme marimo ships with editorial colours that are legible
+   on the cream background. Class hashes (.ͼq, .ͼr, etc.) are stable for
+   a given marimo frontend version (0.21.x at time of writing). */
+.cm-editor .ͼp,
+.marimo-cell .cm-editor {
+  background-color: var(--card) !important;
+  color: var(--foreground) !important;
+}
+.cm-editor .ͼq { color: #2E3D8F !important; font-weight: 600 !important; }  /* keyword   → indigo dark */
+.cm-editor .ͼr { color: #1A1A18 !important; }                                /* variable  → near-black (was salmon!) */
+.cm-editor .ͼs { color: #2E3D8F !important; }                                /* function  → indigo dark */
+.cm-editor .ͼt { color: #A85800 !important; }                                /* number    → sepia */
+.cm-editor .ͼu { color: #1A1A18 !important; }                                /* default   → near-black */
+.cm-editor .ͼv { color: #A85800 !important; }                                /* type      → sepia */
+.cm-editor .ͼw { color: #4A5CB8 !important; }                                /* operator  → indigo */
+.cm-editor .ͼx { color: #6B6B68 !important; font-style: italic !important; } /* comment   → muted gray */
+.cm-editor .ͼ11 { color: #6B6B68 !important; text-decoration: underline !important; } /* link */
+.cm-editor .ͼ12 { color: #C0392B !important; font-weight: 700 !important; }  /* bold red  → destructive */
+.cm-editor .ͼ13 { color: #A85800 !important; }                               /* orange    → sepia */
+.cm-editor .ͼ14 { color: #237257 !important; }                               /* string    → green */
+.cm-editor .ͼ15 { color: #1A1A18 !important; }                               /* was #fff  → near-black */
+
 .cm-cursor {
   border-left: 2px solid var(--foreground) !important;
 }
@@ -504,6 +538,7 @@ select {
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   padding: 8px 12px !important;
+  max-width: 320px !important;
 }
 
 /* Search input stays mono */
@@ -774,6 +809,186 @@ button:active,
   color: var(--muted-foreground) !important;
 }
 
+/* Markdown body text — strong/em/code inherit correct colour */
+.markdown,
+.markdown .paragraph,
+.markdown p,
+.paragraph {
+  color: var(--foreground) !important;
+}
+
+.markdown strong,
+.markdown b,
+.paragraph strong,
+.paragraph b,
+strong,
+b {
+  color: var(--foreground) !important;
+  background: transparent !important;
+  font-weight: 700 !important;
+}
+
+.markdown em,
+.markdown i,
+.paragraph em,
+.paragraph i {
+  color: var(--foreground) !important;
+  background: transparent !important;
+}
+
+/* Inline code in markdown body */
+.markdown code,
+.paragraph code {
+  background: var(--secondary) !important;
+  color: var(--primary) !important;
+  padding: 0.1rem 0.3rem !important;
+  border-radius: var(--radius) !important;
+  font-family: var(--monospace-font) !important;
+  font-size: 0.92em !important;
+}
+
+/* Cell output area — don't wrap in its own background box */
+.output-area {
+  background: transparent !important;
+}
+
+/* Form label layout — prevent label text wrapping into multiple lines
+   and keep each widget at its natural width inside an hstack. */
+.mo-label,
+.mo-label-block,
+label {
+  white-space: nowrap !important;
+}
+
+.mo-label > .markdown,
+.mo-label-block > .markdown {
+  flex-shrink: 0 !important;
+}
+
+/* ============================================
+   APP SIDEBARS (left icon rail, right panels)
+   ============================================ */
+.app-sidebar,
+aside.app-sidebar,
+[class*="app-sidebar"] {
+  background: var(--card) !important;
+  border-right: 1px solid var(--border) !important;
+  color: var(--foreground) !important;
+}
+
+.app-sidebar button,
+.app-sidebar [role="button"],
+.app-sidebar a {
+  color: var(--muted-foreground) !important;
+  border-radius: 0 !important;
+  transition: all 0.15s ease !important;
+}
+
+.app-sidebar button:hover,
+.app-sidebar [role="button"]:hover,
+.app-sidebar a:hover {
+  color: var(--foreground) !important;
+  background: var(--secondary) !important;
+}
+
+.app-sidebar button[data-state="active"],
+.app-sidebar button[aria-pressed="true"],
+.app-sidebar button[aria-selected="true"] {
+  color: var(--primary) !important;
+  background: var(--secondary) !important;
+  border-left: 2px solid var(--primary) !important;
+}
+
+/* Sidebar headings / section labels */
+.app-sidebar h1,
+.app-sidebar h2,
+.app-sidebar h3,
+.app-sidebar .section-label {
+  font-family: var(--font-display) !important;
+  color: var(--foreground) !important;
+  font-weight: 600 !important;
+}
+
+/* Right-side control strip (settings, save, layout, run buttons) */
+.absolute.top-4.right-4 button,
+.absolute.top-3.right-5 button,
+[class*="toolbar"] button {
+  background: var(--card) !important;
+  color: var(--foreground) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 !important;
+}
+
+.absolute.top-4.right-4 button:hover,
+.absolute.top-3.right-5 button:hover,
+[class*="toolbar"] button:hover {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-color: var(--primary) !important;
+}
+
+/* Bottom status bar */
+[data-testid*="status"],
+[class*="status-bar"],
+[class*="StatusBar"] {
+  background: var(--card) !important;
+  border-top: 1px solid var(--border) !important;
+  color: var(--muted-foreground) !important;
+  font-family: var(--font-mono) !important;
+  font-size: 11px !important;
+}
+
+/* Resize handles */
+.resize-handle,
+.resize-handle-collapsed {
+  background: var(--border) !important;
+}
+
+.resize-handle:hover,
+.resize-handle[data-resize-handle-active],
+.resize-handle-collapsed:hover {
+  background: var(--primary) !important;
+}
+
+/* Dark navy runtime connection banner — keep dark navy bg but make text readable */
+[data-testid="static-notebook-banner"],
+[class*="runtime-banner"],
+[class*="disconnected-banner"] {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-bottom: 2px solid var(--foreground) !important;
+  font-family: var(--font-body) !important;
+}
+
+[data-testid="static-notebook-banner"] a,
+[data-testid="static-notebook-banner"] button {
+  color: var(--primary-foreground) !important;
+  background: transparent !important;
+  border-color: var(--primary-foreground) !important;
+}
+
+/* Keep labels on one line inside marimo form widgets */
+.mo-label,
+.mo-label-block,
+marimo-dropdown label,
+marimo-text label,
+marimo-number label {
+  white-space: nowrap !important;
+  flex-shrink: 0 !important;
+}
+
+/* Constrain the Radix Select trigger (the visible dropdown bar) to its
+   current value rather than growing to fit its longest option. Without
+   this, a Locality dropdown with 400 options sprawls across the row. */
+button[role="combobox"],
+[role="combobox"],
+marimo-dropdown [data-slot="select-trigger"],
+marimo-dropdown button {
+  max-width: 280px !important;
+  min-width: 0 !important;
+  width: auto !important;
+}
+
 /* ── Dashboard tiles — file browser as card grid ─────────── */
 
 /* Hide marimo resources / external links section */