@kevin5251984/guild 0.2.12 → 0.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,10 +16,148 @@
16
16
  --thread-max: 1600px;
17
17
  --thread-gutter: 28px;
18
18
  --you-max: min(56rem, 86%);
19
+ --press: 0.97;
20
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
21
+ --press-ms: 140ms;
22
+ --hover-ms: 160ms;
23
+ --danger: #f0a8a8;
24
+ --ok: #9fdfb2;
19
25
  --focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
20
26
  }
21
27
  * { box-sizing: border-box; }
22
28
  html, body { margin: 0; height: 100%; }
29
+ /* Enamel press language: paper / steel / ghost. Wood rail and tavern stay out. */
30
+ .icon-btn,
31
+ .add-ch,
32
+ .bot-card-btn,
33
+ .create-row button,
34
+ .traj-btn,
35
+ .members-btn,
36
+ .invite-btn,
37
+ .jump-bottom,
38
+ .turn-actions button,
39
+ .msg-actions button,
40
+ .composer-add,
41
+ .composer-reply-clear,
42
+ .primary,
43
+ .model-btn,
44
+ .dialog-actions button,
45
+ .queue-chip button,
46
+ .attach-chip-x,
47
+ .attach-item,
48
+ .attach-back,
49
+ .attach-row,
50
+ .attach-term button,
51
+ .assign-list button,
52
+ .mention-item,
53
+ .model-row,
54
+ .model-choice,
55
+ .stats-ico,
56
+ .html-zoom-close,
57
+ .assistant-text .md-fence-btn,
58
+ .assistant-text .md-fence-tab {
59
+ transition:
60
+ background-color var(--hover-ms) ease,
61
+ border-color var(--hover-ms) ease,
62
+ color var(--hover-ms) ease,
63
+ transform var(--press-ms) var(--ease-out),
64
+ opacity var(--hover-ms) ease;
65
+ }
66
+ .icon-btn:active:not(:disabled),
67
+ .add-ch:active:not(:disabled),
68
+ .bot-card-btn:active:not(:disabled),
69
+ .create-row button:active:not(:disabled),
70
+ .traj-btn:active:not(:disabled),
71
+ .members-btn:active:not(:disabled),
72
+ .invite-btn:active:not(:disabled),
73
+ .jump-bottom:active:not(:disabled),
74
+ .turn-actions button:active:not(:disabled),
75
+ .msg-actions button:active:not(:disabled),
76
+ .composer-add:active:not(:disabled),
77
+ .composer-reply-clear:active:not(:disabled),
78
+ .primary:active:not(:disabled),
79
+ .model-btn:active:not(:disabled),
80
+ .dialog-actions button:active:not(:disabled),
81
+ .queue-chip button:active:not(:disabled),
82
+ .attach-chip-x:active:not(:disabled),
83
+ .attach-item:active:not(:disabled),
84
+ .attach-back:active:not(:disabled),
85
+ .attach-row:active:not(:disabled),
86
+ .attach-term button:active:not(:disabled),
87
+ .assign-list button:active:not(:disabled),
88
+ .mention-item:active:not(:disabled),
89
+ .model-row:active:not(:disabled),
90
+ .model-choice:active:not(:disabled),
91
+ .stats-ico:active:not(:disabled),
92
+ .html-zoom-close:active:not(:disabled),
93
+ .assistant-text .md-fence-btn:active:not(:disabled),
94
+ .assistant-text .md-fence-tab:active:not(:disabled) {
95
+ transform: scale(var(--press));
96
+ }
97
+ @media (prefers-reduced-motion: reduce) {
98
+ .icon-btn,
99
+ .add-ch,
100
+ .bot-card-btn,
101
+ .create-row button,
102
+ .traj-btn,
103
+ .members-btn,
104
+ .invite-btn,
105
+ .jump-bottom,
106
+ .turn-actions button,
107
+ .msg-actions button,
108
+ .composer-add,
109
+ .composer-reply-clear,
110
+ .primary,
111
+ .model-btn,
112
+ .dialog-actions button,
113
+ .queue-chip button,
114
+ .attach-chip-x,
115
+ .attach-item,
116
+ .attach-back,
117
+ .attach-row,
118
+ .attach-term button,
119
+ .assign-list button,
120
+ .mention-item,
121
+ .model-row,
122
+ .model-choice,
123
+ .stats-ico,
124
+ .html-zoom-close,
125
+ .assistant-text .md-fence-btn,
126
+ .assistant-text .md-fence-tab {
127
+ transition: none;
128
+ }
129
+ .icon-btn:active:not(:disabled),
130
+ .add-ch:active:not(:disabled),
131
+ .bot-card-btn:active:not(:disabled),
132
+ .create-row button:active:not(:disabled),
133
+ .traj-btn:active:not(:disabled),
134
+ .members-btn:active:not(:disabled),
135
+ .invite-btn:active:not(:disabled),
136
+ .jump-bottom:active:not(:disabled),
137
+ .turn-actions button:active:not(:disabled),
138
+ .msg-actions button:active:not(:disabled),
139
+ .composer-add:active:not(:disabled),
140
+ .composer-reply-clear:active:not(:disabled),
141
+ .primary:active:not(:disabled),
142
+ .model-btn:active:not(:disabled),
143
+ .dialog-actions button:active:not(:disabled),
144
+ .queue-chip button:active:not(:disabled),
145
+ .attach-chip-x:active:not(:disabled),
146
+ .attach-item:active:not(:disabled),
147
+ .attach-back:active:not(:disabled),
148
+ .attach-row:active:not(:disabled),
149
+ .attach-term button:active:not(:disabled),
150
+ .assign-list button:active:not(:disabled),
151
+ .mention-item:active:not(:disabled),
152
+ .model-row:active:not(:disabled),
153
+ .model-choice:active:not(:disabled),
154
+ .stats-ico:active:not(:disabled),
155
+ .html-zoom-close:active:not(:disabled),
156
+ .assistant-text .md-fence-btn:active:not(:disabled),
157
+ .assistant-text .md-fence-tab:active:not(:disabled) {
158
+ transform: none;
159
+ }
160
+ }
23
161
  button:focus-visible,
24
162
  a:focus-visible,
25
163
  input:focus-visible,
@@ -35,6 +173,10 @@ select:focus-visible,
35
173
  .icon-btn:hover { background: var(--lift); }
36
174
  .add-ch:hover { color: var(--text); background: var(--lift); }
37
175
  }
176
+ body.grok .sidebar .add-ch:active:not(:disabled),
177
+ body.grok .sidebar .create-row button:active:not(:disabled) {
178
+ transform: none;
179
+ }
38
180
  body.grok {
39
181
  display: grid;
40
182
  grid-template-columns: var(--sidebar-w, 292px) 1fr;
@@ -252,26 +394,6 @@ body.resizing-sidebar iframe { pointer-events: none; }
252
394
  padding: 0;
253
395
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel) 38%, transparent);
254
396
  }
255
- .avatar img,
256
- .queue-av img,
257
- .traj-av img,
258
- .bot-card-av img,
259
- .mention-glyph img {
260
- width: 100%;
261
- height: 100%;
262
- object-fit: cover;
263
- object-position: center 18%;
264
- display: block;
265
- pointer-events: none;
266
- }
267
- .avatar.has-photo,
268
- .queue-av.has-photo,
269
- .traj-av.has-photo,
270
- .bot-card-av.has-photo,
271
- .mention-glyph.has-photo {
272
- color: transparent;
273
- font-size: 0;
274
- }
275
397
  .nav-av .avatar { font-size: 15px; letter-spacing: 0; }
276
398
  .avatar.sm { width: 28px; height: 28px; font-size: 12px; }
277
399
  a.avatar { text-decoration: none; color: #fff; }
@@ -326,7 +448,6 @@ a.avatar { text-decoration: none; color: #fff; }
326
448
  font-size: 1.35rem;
327
449
  font-weight: 700;
328
450
  margin-bottom: 12px;
329
- overflow: hidden;
330
451
  }
331
452
  .bot-card-name {
332
453
  font-size: 1.15rem;
@@ -917,7 +1038,7 @@ a.invite-btn:hover { text-decoration: none; }
917
1038
  .prompt-rail {
918
1039
  position: absolute;
919
1040
  top: 8px;
920
- left: 4px;
1041
+ right: 3px;
921
1042
  bottom: 8px;
922
1043
  z-index: 5;
923
1044
  width: 16px;
@@ -928,14 +1049,14 @@ a.invite-btn:hover { text-decoration: none; }
928
1049
  content: "";
929
1050
  position: absolute;
930
1051
  top: 0;
931
- left: 7px;
1052
+ right: 7px;
932
1053
  bottom: 0;
933
1054
  width: 1px;
934
1055
  background: color-mix(in srgb, var(--steel) 22%, transparent);
935
1056
  }
936
1057
  .prompt-tick {
937
1058
  position: absolute;
938
- left: 0;
1059
+ right: 0;
939
1060
  width: 16px;
940
1061
  height: 12px;
941
1062
  margin: 0;
@@ -950,7 +1071,7 @@ a.invite-btn:hover { text-decoration: none; }
950
1071
  content: "";
951
1072
  position: absolute;
952
1073
  top: 50%;
953
- left: 3px;
1074
+ right: 3px;
954
1075
  width: 8px;
955
1076
  height: 2px;
956
1077
  border-radius: 1px;
@@ -965,7 +1086,7 @@ a.invite-btn:hover { text-decoration: none; }
965
1086
  .prompt-tick[data-preview]:hover::before {
966
1087
  content: attr(data-preview);
967
1088
  position: absolute;
968
- left: 18px;
1089
+ right: 18px;
969
1090
  top: 50%;
970
1091
  z-index: 8;
971
1092
  max-width: min(52vw, 280px);
@@ -1276,7 +1397,7 @@ a.invite-btn:hover { text-decoration: none; }
1276
1397
  align-items: center;
1277
1398
  justify-content: center;
1278
1399
  }
1279
- .assistant-text .md-fence-btn:hover { background: #2a2a2a; color: #fff; }
1400
+ .assistant-text .md-fence-btn:hover { background: var(--lift); color: var(--text); }
1280
1401
  .assistant-text .md-fence-btn[data-fence-input]:hover::after,
1281
1402
  .assistant-text .md-fence-btn[data-fence-copy]:hover::after,
1282
1403
  .assistant-text .md-fence-btn[data-html-expand]:hover::after {
@@ -1348,7 +1469,7 @@ a.invite-btn:hover { text-decoration: none; }
1348
1469
  cursor: pointer;
1349
1470
  }
1350
1471
  .assistant-text .md-fence-tab.on,
1351
- .assistant-text .md-fence-tab:hover { background: #2a2a2a; color: #eee; }
1472
+ .assistant-text .md-fence-tab:hover { background: var(--lift); color: var(--text); }
1352
1473
  .assistant-text .md-html-frame {
1353
1474
  display: block;
1354
1475
  width: 100%;
@@ -1385,12 +1506,12 @@ a.invite-btn:hover { text-decoration: none; }
1385
1506
  height: 36px;
1386
1507
  border: 0;
1387
1508
  border-radius: 50%;
1388
- background: #2a2a2a;
1389
- color: #eee;
1509
+ background: var(--fill);
1510
+ color: var(--text);
1390
1511
  font-size: 1.35rem;
1391
1512
  cursor: pointer;
1392
1513
  }
1393
- .html-zoom-close:hover { background: #3a3a3a; }
1514
+ .html-zoom-close:hover { background: var(--lift); }
1394
1515
  .html-zoom-frame {
1395
1516
  width: min(1100px, 100%);
1396
1517
  height: 100%;
@@ -1654,21 +1775,22 @@ a.invite-btn:hover { text-decoration: none; }
1654
1775
  .turn-actions button {
1655
1776
  height: 28px;
1656
1777
  padding: 0 10px;
1657
- border: 1px solid #3a3a3a;
1778
+ border: 1px solid var(--line);
1658
1779
  border-radius: 8px;
1659
- background: #1c1c1c;
1660
- color: #ddd;
1780
+ background: var(--fill);
1781
+ color: var(--text);
1661
1782
  font: inherit;
1662
1783
  font-size: 12px;
1663
1784
  line-height: 28px;
1664
1785
  cursor: pointer;
1665
1786
  }
1666
1787
  .turn-actions button:hover {
1667
- border-color: #555;
1668
- color: #fff;
1788
+ border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
1789
+ color: var(--text);
1790
+ background: var(--lift);
1669
1791
  }
1670
1792
  .turn-actions .turn-stop {
1671
- color: #e8b4b4;
1793
+ color: var(--danger);
1672
1794
  }
1673
1795
  .turn-actions .turn-steer {
1674
1796
  color: #b4c8e8;
@@ -1720,8 +1842,8 @@ body.grok .turn-actions .turn-steer { color: #c4b090; }
1720
1842
  font-size: 0.72rem;
1721
1843
  cursor: pointer;
1722
1844
  }
1723
- .msg-actions button:hover { background: #1c1c1c; color: var(--text); }
1724
- .msg-actions button.danger:hover { color: #f0a8a8; }
1845
+ .msg-actions button:hover { background: var(--lift); color: var(--text); }
1846
+ .msg-actions button.danger:hover { color: var(--danger); }
1725
1847
  .toast {
1726
1848
  position: fixed;
1727
1849
  left: calc(var(--sidebar-w, 292px) + (100vw - var(--sidebar-w, 292px)) / 2);
@@ -1755,18 +1877,18 @@ body.grok .turn-actions .turn-steer { color: #c4b090; }
1755
1877
  height: 22px;
1756
1878
  margin: 8px 0 0;
1757
1879
  padding: 0;
1758
- border: 1px solid #2a2a2a;
1880
+ border: 1px solid var(--line);
1759
1881
  border-radius: 6px;
1760
- background: #141414;
1761
- color: #8b8b8b;
1882
+ background: var(--fill);
1883
+ color: var(--muted);
1762
1884
  cursor: pointer;
1763
1885
  flex: none;
1764
1886
  }
1765
1887
  .stats-ico:hover,
1766
1888
  .stats-ico.on {
1767
1889
  color: var(--text);
1768
- border-color: #3a3a3a;
1769
- background: #1c1c1c;
1890
+ border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
1891
+ background: var(--lift);
1770
1892
  }
1771
1893
  .stats-panel {
1772
1894
  margin: 0.4rem 0 0.15rem;
@@ -1835,48 +1957,6 @@ body.grok .turn-actions .turn-steer { color: #c4b090; }
1835
1957
  padding: 4rem 1rem;
1836
1958
  font-size: 0.9rem;
1837
1959
  }
1838
- .empty-thread.setup-thread {
1839
- text-align: left;
1840
- max-width: 28rem;
1841
- margin: 3rem auto;
1842
- padding: 1.15rem 1.1rem 1.2rem;
1843
- border: 1px solid var(--line);
1844
- background: var(--panel);
1845
- color: var(--text);
1846
- }
1847
- .setup-kicker {
1848
- margin: 0 0 6px;
1849
- font-size: 10px;
1850
- letter-spacing: 0.08em;
1851
- text-transform: uppercase;
1852
- color: var(--muted);
1853
- }
1854
- .setup-title {
1855
- margin: 0 0 8px;
1856
- font-weight: 650;
1857
- }
1858
- .setup-body {
1859
- margin: 0 0 14px;
1860
- color: var(--muted);
1861
- font-size: 0.9rem;
1862
- }
1863
- .setup-acts {
1864
- display: flex;
1865
- flex-wrap: wrap;
1866
- gap: 8px;
1867
- margin: 0;
1868
- }
1869
- .setup-acts a {
1870
- display: inline-block;
1871
- padding: 6px 10px;
1872
- border: 1px solid var(--line);
1873
- color: inherit;
1874
- text-decoration: none;
1875
- font-size: 13px;
1876
- }
1877
- .setup-acts a:hover {
1878
- border-color: var(--text);
1879
- }
1880
1960
 
1881
1961
  .composer {
1882
1962
  position: sticky;
@@ -1972,7 +2052,7 @@ body.grok .composer.drop-on .composer-card::after {
1972
2052
  line-height: 1;
1973
2053
  cursor: pointer;
1974
2054
  }
1975
- .composer-reply-clear:hover { background: #2a2a2a; color: #fff; }
2055
+ .composer-reply-clear:hover { background: var(--lift); color: var(--text); }
1976
2056
  .mention-pop {
1977
2057
  position: absolute;
1978
2058
  left: 0;
@@ -2023,7 +2103,7 @@ body.grok .composer.drop-on .composer-card::after {
2023
2103
  font: inherit;
2024
2104
  cursor: pointer;
2025
2105
  }
2026
- .mention-item:hover, .mention-item.on { background: #2a2a2a; }
2106
+ .mention-item:hover, .mention-item.on { background: var(--lift); }
2027
2107
  .mention-item strong { display: block; font-size: 0.9rem; font-weight: 560; }
2028
2108
  .mention-item em {
2029
2109
  display: block;
@@ -2047,7 +2127,6 @@ body.grok .composer.drop-on .composer-card::after {
2047
2127
  color: #cfcfcf;
2048
2128
  font-size: 0.78rem;
2049
2129
  flex: none;
2050
- overflow: hidden;
2051
2130
  }
2052
2131
  .composer-scroll { max-height: 336px; overflow-y: auto; }
2053
2132
  .composer textarea {
@@ -2091,7 +2170,7 @@ body.grok .composer.drop-on .composer-card::after {
2091
2170
  margin: 0;
2092
2171
  border: 0;
2093
2172
  border-radius: 999px;
2094
- background: #2a2a2a;
2173
+ background: var(--lift);
2095
2174
  color: var(--text);
2096
2175
  font-size: 1.05rem;
2097
2176
  line-height: 1;
@@ -2131,7 +2210,7 @@ body.grok .composer.drop-on .composer-card::after {
2131
2210
  text-align: left;
2132
2211
  cursor: pointer;
2133
2212
  }
2134
- .attach-item:hover { background: #2a2a2a; }
2213
+ .attach-item:hover { background: var(--lift); }
2135
2214
  .attach-ico {
2136
2215
  width: 18px;
2137
2216
  color: #9a9a9a;
@@ -2195,7 +2274,6 @@ body.grok .composer.drop-on .composer-card::after {
2195
2274
  font-weight: 700;
2196
2275
  line-height: 1;
2197
2276
  margin-left: -5px;
2198
- overflow: hidden;
2199
2277
  box-shadow: 0 0 0 1px var(--bg);
2200
2278
  }
2201
2279
  .queue-avs .queue-av:first-child { margin-left: 0; }
@@ -2221,7 +2299,7 @@ body.grok .composer.drop-on .composer-card::after {
2221
2299
  line-height: 1;
2222
2300
  cursor: pointer;
2223
2301
  }
2224
- .queue-chip button:hover { color: #fff; }
2302
+ .queue-chip button:hover { color: var(--text); background: var(--lift); }
2225
2303
  .composer-steer {
2226
2304
  margin: 6px 16px 0;
2227
2305
  color: #6f6f6f;
@@ -2236,10 +2314,10 @@ body.grok .composer.drop-on .composer-card::after {
2236
2314
  max-width: 240px;
2237
2315
  margin: 0;
2238
2316
  padding: 0;
2239
- border: 1px solid #3a3a3a;
2317
+ border: 1px solid var(--line);
2240
2318
  border-radius: 999px;
2241
- background: #1c1c1c;
2242
- color: #ddd;
2319
+ background: var(--fill);
2320
+ color: var(--text);
2243
2321
  font: inherit;
2244
2322
  font-size: 12px;
2245
2323
  line-height: 1;
@@ -2268,8 +2346,8 @@ body.grok .composer.drop-on .composer-card::after {
2268
2346
  font-size: 13px;
2269
2347
  cursor: pointer;
2270
2348
  }
2271
- .attach-chip:hover { background: #2a2a2a; }
2272
- .attach-chip-x:hover { color: #fff; }
2349
+ .attach-chip:hover { background: var(--lift); }
2350
+ .attach-chip-x:hover { color: var(--text); }
2273
2351
  .attach-chip.has-preview { padding-left: 3px; }
2274
2352
  .attach-thumb {
2275
2353
  width: 22px;
@@ -2388,7 +2466,7 @@ body.grok .composer.drop-on .composer-card::after {
2388
2466
  font-size: 18px;
2389
2467
  cursor: pointer;
2390
2468
  }
2391
- .attach-back:hover { background: #2a2a2a; }
2469
+ .attach-back:hover { background: var(--lift); }
2392
2470
  .attach-q {
2393
2471
  width: 100%;
2394
2472
  margin: 0 0 8px;
@@ -2424,7 +2502,7 @@ body.grok .composer.drop-on .composer-card::after {
2424
2502
  text-align: left;
2425
2503
  cursor: pointer;
2426
2504
  }
2427
- .attach-row:hover { background: #2a2a2a; }
2505
+ .attach-row:hover { background: var(--lift); }
2428
2506
  .attach-row em {
2429
2507
  margin-left: auto;
2430
2508
  color: #8b8b8b;
@@ -2452,7 +2530,7 @@ body.grok .composer.drop-on .composer-card::after {
2452
2530
  padding: 0 12px;
2453
2531
  border: 0;
2454
2532
  border-radius: 8px;
2455
- background: #2a2a2a;
2533
+ background: var(--fill);
2456
2534
  color: var(--text);
2457
2535
  font: inherit;
2458
2536
  cursor: pointer;
@@ -2470,9 +2548,9 @@ body.grok .composer.drop-on .composer-card::after {
2470
2548
  color: var(--ink);
2471
2549
  cursor: pointer;
2472
2550
  }
2473
- .primary:hover:not(:disabled) { background: #F7F1E4; }
2551
+ .primary:hover:not(:disabled) { background: color-mix(in srgb, var(--paper) 88%, white); }
2474
2552
  .primary:disabled { opacity: 0.4; cursor: default; }
2475
- .primary.stopping { background: var(--paper); }
2553
+ .primary.stopping { background: var(--paper); color: var(--ink); }
2476
2554
  .primary .icon-stop { display: none; }
2477
2555
  .primary.stopping .icon-send { display: none; }
2478
2556
  .primary.stopping .icon-stop { display: block; }
@@ -2487,7 +2565,7 @@ body.grok .composer.drop-on .composer-card::after {
2487
2565
  padding: 0.38rem 0.7rem 0.38rem 0.9rem;
2488
2566
  border: 0;
2489
2567
  border-radius: 999px;
2490
- background: #2a2a2a;
2568
+ background: var(--lift);
2491
2569
  color: var(--text);
2492
2570
  font-size: 0.82rem;
2493
2571
  cursor: pointer;
@@ -2583,7 +2661,7 @@ body.grok .composer.drop-on .composer-card::after {
2583
2661
  cursor: pointer;
2584
2662
  text-align: left;
2585
2663
  }
2586
- .model-row:hover, .model-row.on { background: #3a3a3a; }
2664
+ .model-row:hover, .model-row.on { background: var(--lift); }
2587
2665
  .model-row > span:first-child { flex: none; }
2588
2666
  .model-row-val {
2589
2667
  margin-left: auto;
@@ -2618,7 +2696,7 @@ body.grok .composer.drop-on .composer-card::after {
2618
2696
  text-align: left;
2619
2697
  text-decoration: none;
2620
2698
  }
2621
- .model-choice:hover, .model-choice.on { background: #3a3a3a; }
2699
+ .model-choice:hover, .model-choice.on { background: var(--lift); }
2622
2700
  .model-choice.locked { opacity: 0.5; }
2623
2701
  .model-choice .glyph {
2624
2702
  flex: none;
@@ -2671,7 +2749,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2671
2749
  border-radius: 10px;
2672
2750
  color: var(--text);
2673
2751
  }
2674
- .pick label:hover { background: #1c1c1c; }
2752
+ .pick label:hover { background: var(--lift); }
2675
2753
  .pick input { width: auto; }
2676
2754
  #channel-md { width: min(40rem, calc(100vw - 2rem)); }
2677
2755
  #channel-md label {
@@ -2728,15 +2806,15 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2728
2806
  width: 100%;
2729
2807
  margin: 0;
2730
2808
  padding: 0.55rem 0.7rem;
2731
- border: 1px solid #2a2a2a;
2809
+ border: 1px solid var(--line);
2732
2810
  border-radius: 12px;
2733
- background: #1a1a1a;
2811
+ background: var(--fill);
2734
2812
  color: var(--text);
2735
2813
  font: inherit;
2736
2814
  text-align: left;
2737
2815
  cursor: pointer;
2738
2816
  }
2739
- .assign-list button:hover { background: #222; border-color: #3a3a3a; }
2817
+ .assign-list button:hover { background: var(--lift); border-color: color-mix(in srgb, var(--steel) 45%, var(--line)); }
2740
2818
  .assign-list .assign-copy {
2741
2819
  display: flex;
2742
2820
  flex-direction: column;
@@ -2759,7 +2837,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2759
2837
  cursor: pointer;
2760
2838
  font: inherit;
2761
2839
  border: 0;
2762
- background: #2a2a2a;
2840
+ background: var(--lift);
2763
2841
  color: var(--text);
2764
2842
  }
2765
2843
  .dialog-actions .ghost { background: transparent; color: var(--muted); }
@@ -2776,7 +2854,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2776
2854
  grid-column: 1;
2777
2855
  grid-row: 1 / -1;
2778
2856
  display: grid;
2779
- grid-template-rows: auto auto 1fr;
2857
+ grid-template-rows: auto 1fr;
2780
2858
  background: #0c0c0e;
2781
2859
  }
2782
2860
  .traj[hidden] { display: none !important; }
@@ -2812,36 +2890,6 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2812
2890
  font-size: 1.2rem;
2813
2891
  cursor: pointer;
2814
2892
  }
2815
- .traj-kinds {
2816
- display: flex;
2817
- flex-wrap: wrap;
2818
- gap: 0.35rem;
2819
- padding: 0.4rem 1rem 0.5rem;
2820
- border-bottom: 1px solid #222;
2821
- }
2822
- .traj-filter {
2823
- margin: 0;
2824
- padding: 0.18rem 0.5rem;
2825
- border: 1px solid #333;
2826
- border-radius: 4px;
2827
- background: #141416;
2828
- color: #bdbdbd;
2829
- font: inherit;
2830
- font-size: 0.72rem;
2831
- font-weight: 650;
2832
- cursor: pointer;
2833
- }
2834
- .traj-filter:hover { color: var(--text); border-color: #555; }
2835
- .traj-filter.on {
2836
- background: #1c1c20;
2837
- color: var(--text);
2838
- border-color: #555;
2839
- }
2840
- .traj-filter.spawn { color: var(--signal); border-color: #4a3d22; }
2841
- .traj-filter.spawn.on {
2842
- background: #2a2418;
2843
- color: var(--signal);
2844
- }
2845
2893
  .traj-main {
2846
2894
  display: grid;
2847
2895
  grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr);
@@ -2854,7 +2902,7 @@ dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
2854
2902
  }
2855
2903
  .traj-row {
2856
2904
  display: grid;
2857
- grid-template-columns: 20px 6.2rem 6.4rem minmax(0, 1fr);
2905
+ grid-template-columns: 20px 6.2rem 5.6rem minmax(0, 1fr);
2858
2906
  gap: 0.4rem;
2859
2907
  align-items: center;
2860
2908
  width: 100%;