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; }