Settings: collapse theme picker into a segmented control + move below command settings near Save

src/components/Settings.svelte

@@ -118,26 +118,6 @@
     {#if err}<div class="error">{err}</div>{/if}
 
     {#if settings}
-      <div class="field">
-        <div class="label">theme</div>
-        <div class="theme-grid">
-          {#each THEMES as t (t.id)}
-            <button
-              type="button"
-              class="theme-card"
-              class:selected={settings.theme === t.id}
-              data-theme-preview={t.id}
-              onclick={() => pickTheme(t.id)}
-              aria-pressed={settings.theme === t.id}
-            >
-              <span class="tp-name">{t.label}</span>
-              <span class="tp-sample">42%</span>
-              <span class="tp-blurb">{t.blurb}</span>
-            </button>
-          {/each}
-        </div>
-      </div>
-
       <div class="field">
         <div class="label">claude command</div>
         <input
@@ -213,6 +193,23 @@
         </div>
       {/if}
 
+      <div class="field">
+        <div class="label">theme</div>
+        <div class="seg" role="radiogroup" aria-label="Theme">
+          {#each THEMES as t (t.id)}
+            <button
+              type="button"
+              class="seg-item"
+              class:selected={settings.theme === t.id}
+              role="radio"
+              aria-checked={settings.theme === t.id}
+              onclick={() => pickTheme(t.id)}
+              title={t.blurb}
+            >{t.label}</button>
+          {/each}
+        </div>
+      </div>
+
       <div class="row spread actions">
         <button onclick={cancel}>Cancel</button>
         <button onclick={save} disabled={busy}>{busy ? "Saving…" : "Save"}</button>
@@ -248,114 +245,34 @@
   .roots code { font-size: 10px; word-break: break-all; }
   .hint { font-size: 10px; line-height: 1.3; }
 
-  /* ---- Theme picker ---- */
-  .theme-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 6px;
-  }
-  .theme-card {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    gap: 2px;
-    padding: 8px 10px;
-    border-radius: 8px;
+  /* ---- Theme picker (segmented control) ---- */
+  .seg {
+    display: flex;
     border: 1px solid var(--border);
-    cursor: pointer;
-    text-align: left;
+    border-radius: 6px;
     overflow: hidden;
-    position: relative;
-    min-height: 64px;
+    background: var(--input-bg);
   }
-  .theme-card .tp-name {
+  .seg-item {
+    flex: 1 1 0;
+    border: 0;
+    border-right: 1px solid var(--border);
+    border-radius: 0;
+    padding: 6px 4px;
+    background: transparent;
+    color: var(--fg-dim);
     font-size: 10px;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    opacity: 0.65;
+    letter-spacing: 0.6px;
+    cursor: pointer;
+    transition: background 120ms ease, color 120ms ease;
   }
-  .theme-card .tp-sample {
-    font-size: 22px;
-    line-height: 1;
+  .seg-item:last-child { border-right: 0; }
+  .seg-item:hover { background: var(--hover); color: var(--fg); }
+  .seg-item.selected {
+    background: var(--accent);
+    color: var(--bg);
     font-weight: 600;
-    margin-top: 2px;
-  }
-  .theme-card .tp-blurb {
-    font-size: 9px;
-    opacity: 0.55;
-    line-height: 1.2;
-  }
-  .theme-card.selected {
-    outline: 1.5px solid var(--accent);
-    outline-offset: -1.5px;
-  }
-  .theme-card.selected::after {
-    content: "✓";
-    position: absolute;
-    top: 4px;
-    right: 6px;
-    font-size: 11px;
-    color: var(--accent);
-  }
-
-  /* Per-theme card visuals (preview in their own typography & palette) */
-  .theme-card[data-theme-preview="anthropic"] {
-    background: linear-gradient(180deg, #1a1815 0%, #1a1815 100%);
-    color: #faf9f5;
-    font-family: "DM Sans", sans-serif;
-  }
-  .theme-card[data-theme-preview="anthropic"] .tp-sample {
-    font-family: "Newsreader Variable", "Newsreader", Georgia, serif;
-    font-weight: 500;
-    color: #cc785c;
-  }
-
-  .theme-card[data-theme-preview="instrument"] {
-    background:
-      repeating-linear-gradient(180deg, transparent 0 2px, rgba(212,255,61,0.04) 2px 3px),
-      #0e1014;
-    color: #d6e2d8;
-    font-family: "JetBrains Mono Variable", monospace;
-    border-color: rgba(212, 255, 61, 0.25);
-  }
-  .theme-card[data-theme-preview="instrument"] .tp-sample {
-    color: #d4ff3d;
-    font-family: "JetBrains Mono Variable", monospace;
-    font-weight: 700;
-  }
-
-  .theme-card[data-theme-preview="editorial"] {
-    background: #1a1813;
-    color: #f5f1e8;
-    font-family: "Fraunces Variable", Georgia, serif;
-    border-radius: 4px;
-  }
-  .theme-card[data-theme-preview="editorial"] .tp-name {
-    font-style: italic;
-    text-transform: none;
-    letter-spacing: 0;
-    font-size: 11px;
-  }
-  .theme-card[data-theme-preview="editorial"] .tp-sample {
-    color: #e8a02f;
-    font-family: "Fraunces Variable", serif;
-    font-weight: 500;
-    font-variation-settings: "opsz" 144;
-  }
-
-  .theme-card[data-theme-preview="retro"] {
-    background:
-      repeating-linear-gradient(180deg, transparent 0 1px, rgba(0,0,0,0.4) 1px 2px),
-      #0a0e0a;
-    color: #b8f0b8;
-    font-family: "IBM Plex Mono", monospace;
-    border-color: rgba(122, 240, 122, 0.3);
-    border-radius: 3px;
-    text-shadow: 0 0 4px rgba(122,240,122,0.4);
-  }
-  .theme-card[data-theme-preview="retro"] .tp-sample {
-    color: #7af07a;
-    font-family: "IBM Plex Mono", monospace;
-    font-weight: 700;
   }
   pre.raw {
     margin: 4px 0 0;