Merge projects-control-styling: dark-theme controls, real theme tokens

public/style.css

@@ -1569,8 +1569,8 @@ body {
   display: flex;
   align-items: stretch;
   margin: 10px 0 4px;
-  background: var(--bg-sunk, rgba(0, 0, 0, 0.22));
+  background: var(--surface-1);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--border);
   border-radius: 9px;
   overflow: hidden;
   flex-wrap: wrap;
@@ -1582,7 +1582,7 @@ body {
   gap: 3px;
   padding: 11px 18px;
   min-width: 0;
-  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border-right: 1px solid var(--border);
 }
 
 .proj-sync-cell:last-child {
@@ -1598,14 +1598,14 @@ body {
   font-size: 10.5px;
   letter-spacing: 0.13em;
   text-transform: uppercase;
-  color: var(--fg-faint, #6f6a61);
+  color: var(--text-faint);
 }
 
 .proj-sync-v {
   display: flex;
   align-items: center;
   gap: 7px;
-  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 15px;
   font-variant-numeric: tabular-nums;
 }
@@ -1617,9 +1617,9 @@ body {
 }
 
 .proj-sync-sub {
-  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
-  color: var(--fg-faint, #6f6a61);
+  color: var(--text-faint);
 }
 
 .proj-sync-sub-bad {
@@ -1627,7 +1627,7 @@ body {
 }
 
 .proj-sync-upstream {
-  color: var(--fg-dim, #a8a299);
+  color: var(--text-dim);
 }
 
 .proj-sync-chip {
@@ -1645,7 +1645,7 @@ body {
 }
 
 .proj-sync-behind {
-  color: var(--fg-faint, #6f6a61);
+  color: var(--text-faint);
 }
 
 /* The one reassuring state. Reachable only with an upstream AND a fresh fetch. */
@@ -1689,7 +1689,7 @@ body {
   border-radius: 7px;
   border: 0;
   background: var(--accent);
-  color: var(--bg, #100f0d);
+  color: var(--on-accent);
 }
 
 .proj-sync-fetch:hover:not(:disabled) {
@@ -1702,7 +1702,7 @@ body {
 }
 
 .proj-sync-fetch:focus-visible {
-  outline: 2px solid var(--fg, #ece9e3);
+  outline: 2px solid var(--text);
   outline-offset: 2px;
 }
 
@@ -1713,7 +1713,7 @@ body {
 
   .proj-sync-cell {
     border-right: 0;
-    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+    border-bottom: 1px solid var(--border);
   }
 
   .proj-sync-actions {
@@ -1723,7 +1723,7 @@ body {
 
 /* ── w6: unpushed count beside the commit-list heading ───────────────────── */
 .proj-commitlog-count {
-  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11.5px;
   font-variant-numeric: tabular-nums;
   color: var(--accent);
@@ -1768,9 +1768,9 @@ body {
   cursor: pointer;
   padding: 4px 12px;
   border-radius: 6px;
-  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
+  border: 1px solid var(--border-strong);
   background: transparent;
-  color: var(--fg, #ece9e3);
+  color: var(--text);
 }
 
 .proj-wt-open:hover {
@@ -1779,7 +1779,7 @@ body {
 }
 
 .proj-wt-open:focus-visible {
-  outline: 2px solid var(--fg, #ece9e3);
+  outline: 2px solid var(--text);
   outline-offset: 2px;
 }
 
@@ -1819,8 +1819,8 @@ body {
 
 .proj-commit-boundary-label {
   font-size: 10.5px;
-  color: var(--fg-dim, #a8a299);
+  color: var(--text-dim);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border: 1px solid var(--border);
   border-radius: 999px;
   padding: 2px 10px;
   white-space: nowrap;
@@ -1830,7 +1830,7 @@ body {
 .proj-commit-boundary-rule {
   flex: 1;
   height: 1px;
-  background: var(--border-strong, rgba(255, 255, 255, 0.14));
+  background: var(--border-strong);
 }
 
 /* w6/G7: running sessions attributed to one worktree row. */
@@ -2281,6 +2281,102 @@ body {
   opacity: 0.5;
   cursor: not-allowed;
 }
+/* ── Projects panel controls ──────────────────────────────────────────────────
+   These eight controls shipped with class names but no visual rules, so they
+   rendered as raw user-agent widgets: white boxes and grey buttons in a dark
+   panel. Layout stays with each element's own rule above; this block only sets
+   the shared skin, so there is no duplicate declaration of the same property.
+
+   Two button roles, matching what the panel already established: filled accent
+   for the action that commits the form (like Fetch), outline for anything that
+   only reveals or toggles (like Open). */
+.proj-wt-branch-input,
+.proj-fanout-prompt,
+.proj-fanout-lanes,
+.proj-fanout-branch,
+.proj-fanout-mode {
+  font: inherit;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  padding: 8px 11px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.proj-wt-branch-input::placeholder,
+.proj-fanout-prompt::placeholder,
+.proj-fanout-branch::placeholder {
+  color: var(--text-faint);
+}
+
+.proj-wt-branch-input:focus,
+.proj-fanout-prompt:focus,
+.proj-fanout-lanes:focus,
+.proj-fanout-branch:focus,
+.proj-fanout-mode:focus {
+  border-color: var(--accent);
+}
+
+/* A branch name is an identifier, so it reads as one. */
+.proj-wt-branch-input,
+.proj-fanout-branch {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+}
+
+.proj-fanout-lanes {
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.proj-fanout-mode {
+  cursor: pointer;
+}
+
+.proj-wt-submit,
+.proj-fanout-submit {
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 560;
+  cursor: pointer;
+  padding: 8px 15px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+.proj-wt-submit:hover:not(:disabled),
+.proj-fanout-submit:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.proj-diff-toggle {
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border-strong);
+  background: transparent;
+  color: var(--text);
+}
+
+.proj-diff-toggle:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.proj-wt-submit:focus-visible,
+.proj-fanout-submit:focus-visible,
+.proj-diff-toggle:focus-visible {
+  outline: 2px solid var(--text);
+  outline-offset: 2px;
+}
+
 /* W5 fan-out status/error banner — fixed, dismissible, textContent only. */
 .fanout-banner {
   position: fixed;