fix(client): the folder picker had no background, and its field no layout

Two defects from one screenshot, and a test for the class behind the first.

**The modal was transparent.** `.ftp-panel` asked for `var(--bg-panel,
var(--bg))` and this stylesheet defines neither — the palette is `--bg-base`,
`--bg-surface`, `--bg-raised`. An unknown custom property makes the whole
declaration invalid while the rule around it still applies, so the panel simply
had no background and the page showed straight through it. Three more of mine
were the same: `--bg-hover`, `--bg-input`, `--danger`.

**The field had no layout.** It was built on `.settings-row`, which is
`display:flex; justify-content:space-between` — so a label, a hint and a value
inside one end up spread across a single line in source order, which is how it
read as three unrelated fragments per app. It is its own block now, and the
chosen folders are a table borrowing `.shared-dirs-tbl`: these are lists, and a
wrapped run of chips gives nothing to scan and nowhere to put a per-row remove.
The operator is looking at two lists of directories on one page and they should
read alike.

`test_css_variables.py` is the general form. CSS fails silently and generously
here, and nothing checked. It found four more that predate this branch: the
unread-count badge (`--danger`) had white text on nothing, a transfer link had
no colour, a notification card had no rounding and no unread marker. Fixed, and
`--warn` and `--accent-bg` are promoted from literal fallbacks to real palette
entries at exactly their current light values.

Two of its own regexes were wrong before they were right — a scoped definition
written inline, and one preceded by a comment, were both reported as undefined.
A third check comparing the two palettes fired on `--border-focus`, a focus
ring the themes share deliberately; a heuristic that has to be explained away
on its first run is worse than no test, so it is gone rather than exempted.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011pvMdvLBG92jyhvD5pD6us

1 files changed, 49 insertions, 17 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 1354340..0441e14 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -24,6 +24,11 @@
   --nav-brand: #23b1f0;
   --sidebar-bg: #f1f5f9;
   --sidebar-hover: #e2e8f0;
+  /* Used with a literal fallback in a handful of rules before they were
+     defined here — same values, so nothing moves; now themeable, and the
+     names in those rules are real. */
+  --warn: #d97706;
+  --accent-bg: rgba(59, 130, 246, 0.1);
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
@@ -36,6 +41,8 @@
   --text-secondary: #94a3b8;
   --text-dim: #64748b;
   --border: #334155;
+  --warn: #f59e0b;
+  --accent-bg: rgba(59, 130, 246, 0.18);
   --error-bg: #450a0a;
   --nav-bg: #020617;
   --sidebar-bg: #1e293b;
@@ -1910,7 +1917,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   white-space: nowrap;
 }
 a.transfer-name {
-  color: var(--link);
+  /* `--link` is not defined here; the palette's link colour is `--accent`. */
+  color: var(--accent);
   text-decoration: underline;
   cursor: pointer;
 }
@@ -2138,7 +2146,11 @@ a.transfer-name {
   position: absolute;
   top: -6px;
   right: -8px;
-  background: var(--danger);
+  /* `--danger` is not one of this stylesheet's variables — the palette calls
+     it `--error`. The declaration was invalid, so the unread-count badge had
+     white text on no background at all. Pre-existing; found while fixing four
+     more of the same in the folder picker. */
+  background: var(--error);
   color: #fff;
   font-size: 0.65rem;
   padding: 1px 5px;
@@ -2160,7 +2172,8 @@ a.transfer-name {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-radius: var(--radius);
+  /* `--radius` was never defined — 8px is what the other cards use. */
+  border-radius: 8px;
   background: var(--bg-surface);
   margin-bottom: 4px;
   cursor: pointer;
@@ -2170,7 +2183,8 @@ a.transfer-name {
   background: var(--bg-raised);
 }
 .notif-unread {
-  border-left: 3px solid var(--primary);
+  /* `--primary` is not defined here either; it is `--accent`. */
+  border-left: 3px solid var(--accent);
   font-weight: 600;
 }
 .notif-kind {
@@ -2578,7 +2592,7 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 .sdt-add-input {
   flex: 1 1 auto; min-width: 0; padding: 5px 8px;
   border: 1px solid var(--border); border-radius: 4px;
-  background: var(--bg-input, transparent); color: var(--text);
+  background: var(--bg-surface); color: var(--text);
   font-family: inherit; font-size: 0.9em;
 }
 .sdt-col-toggle { width: 90px; text-align: center; }
@@ -2591,9 +2605,9 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   line-height: 1; vertical-align: middle;
 }
 .sdt-action-btn + .sdt-action-btn { margin-left: 6px; }
-.sdt-action-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.sdt-action-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text); }
 .sdt-action-btn:disabled { opacity: 0.3; cursor: default; }
-.sdt-action-danger:hover:not(:disabled) { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
+.sdt-action-danger:hover:not(:disabled) { color: var(--error); border-color: var(--error); }
 .sdt-dir-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
 .sdt-dir-name .icon { width: 16px; height: 16px; flex-shrink: 0; }
 .sdt-row-ejected { opacity: 0.5; }
@@ -2603,7 +2617,7 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   padding: 2px 6px; cursor: pointer; font-size: 0.85em; color: var(--text-dim);
   line-height: 1;
 }
-.root-eject-btn:hover { background: var(--bg-hover); }
+.root-eject-btn:hover { background: var(--bg-raised); }
 .root-eject-btn { margin-left: 8px; }
 /* An ejected root in the Files table: still listed, deliberately — its files
    are frozen, not gone — but not somewhere you can walk into. */
@@ -4076,7 +4090,7 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   padding: 16px;
 }
 .ftp-panel {
-  background: var(--bg-panel, var(--bg)); color: var(--text);
+  background: var(--bg-surface); color: var(--text);
   border: 1px solid var(--border); border-radius: 8px;
   width: min(520px, 100%); max-height: min(70vh, 640px);
   display: flex; flex-direction: column; padding: 16px;
@@ -4093,8 +4107,11 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   padding: 4px 0; margin: 8px 0;
 }
 .ftp-row { display: flex; align-items: center; gap: 2px; }
-.ftp-row.chosen { background: var(--bg-hover); }
-.ftp-row.blocked { opacity: 0.4; }
+.ftp-row.chosen { background: var(--bg-raised); }
+/* 0.4 was low enough that a greyed-out root read as an artefact rather than
+   a disabled control — the names were barely legible in the screenshot that
+   prompted this. */
+.ftp-row.blocked { opacity: 0.55; }
 .ftp-twisty {
   flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
   background: none; border: none; color: var(--text-dim);
@@ -4111,11 +4128,14 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 .ftp-label .icon { width: 15px; height: 15px; flex-shrink: 0; }
 .ftp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ftp-badge {
-  flex: 0 0 auto; font-size: 0.72em; padding: 1px 5px; border-radius: 3px;
-  border: 1px solid var(--border); color: var(--text-dim);
+  flex: 0 0 auto; margin-left: 8px;
+  font-size: 0.72em; padding: 1px 5px; border-radius: 3px;
+  border: 1px solid var(--border); background: var(--bg-raised);
+  color: var(--text-dim); white-space: nowrap;
   text-transform: uppercase; letter-spacing: 0.03em;
 }
-.ftp-badge.warn { color: var(--danger, #ef4444); border-color: currentColor; }
+.ftp-badge.rw { color: var(--accent); border-color: currentColor; }
+.ftp-badge.warn { color: var(--error); border-color: currentColor; }
 .ftp-check { margin-left: auto; flex: 0 0 auto; }
 .ftp-selection {
   display: flex; flex-wrap: wrap; gap: 4px;
@@ -4123,8 +4143,20 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 }
 .ftp-chip {
   font-size: 0.82em; padding: 2px 6px; border-radius: 3px;
-  background: var(--bg-hover); border: 1px solid var(--border);
+  background: var(--bg-raised); border: 1px solid var(--border);
 }
 .ftp-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.ftp-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.ftp-field-value { flex: 1 1 200px; display: flex; flex-wrap: wrap; gap: 4px; }
+/* An app's chosen folders. Deliberately not a .settings-row: that is a
+   space-between flex row, and a label, a hint and a list laid out inside one
+   end up spread across a single line in source order. */
+.folder-field { padding: 8px 0; }
+.folder-field-head { margin-bottom: 6px; }
+.folder-field-label {
+  margin: 0 0 2px; font-size: 0.9em; font-weight: 600; color: var(--text);
+}
+.folder-field-head .settings-hint { margin-bottom: 0; }
+/* Borrows .shared-dirs-tbl so the two lists of directories on this page read
+   as the same kind of thing. */
+.folder-field-tbl { margin-bottom: 8px; }
+.folder-field-tbl .sdt-col-dir { font-size: 0.9em; }
+.folder-field-actions { display: flex; align-items: center; gap: 10px; }