@morscherlab/mint-sdk 1.0.43 → 1.0.45

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.
Files changed (49) hide show
  1. package/dist/__tests__/components/SmartGroupFieldRecipe.groups.test.d.ts +1 -0
  2. package/dist/__tests__/components/SmartGroupManual.cohorts.test.d.ts +1 -0
  3. package/dist/components/AutoGroupModal.adapter.d.ts +42 -0
  4. package/dist/components/AutoGroupModal.vue.d.ts +1 -105
  5. package/dist/components/SmartGroup.types.d.ts +71 -0
  6. package/dist/components/SmartGroupFieldRecipe.groups.d.ts +53 -0
  7. package/dist/components/SmartGroupFieldRecipe.vue.d.ts +37 -0
  8. package/dist/components/SmartGroupManual.cohorts.d.ts +52 -0
  9. package/dist/components/SmartGroupManual.vue.d.ts +17 -0
  10. package/dist/components/SmartGroupModal.vue.d.ts +27 -0
  11. package/dist/components/index.d.ts +3 -0
  12. package/dist/components/index.js +2 -2
  13. package/dist/{components-BGVwavdd.js → components-DjfatNJv.js} +2519 -2335
  14. package/dist/components-DjfatNJv.js.map +1 -0
  15. package/dist/composables/index.js +2 -2
  16. package/dist/{composables-C_hPF0Gn.js → composables-CpBhNKHf.js} +7 -147
  17. package/dist/composables-CpBhNKHf.js.map +1 -0
  18. package/dist/index.js +4 -4
  19. package/dist/install.js +1 -1
  20. package/dist/styles.css +12711 -12222
  21. package/dist/{useProtocolTemplates-BbvlHoPD.js → useProtocolTemplates-C8-YlHj1.js} +206 -66
  22. package/dist/useProtocolTemplates-C8-YlHj1.js.map +1 -0
  23. package/package.json +1 -1
  24. package/src/__tests__/components/AutoGroupModal.adapter.test.ts +164 -0
  25. package/src/__tests__/components/SampleSelector.test.ts +176 -16
  26. package/src/__tests__/components/SmartGroupFieldRecipe.groups.test.ts +96 -0
  27. package/src/__tests__/components/SmartGroupManual.cohorts.test.ts +97 -0
  28. package/src/components/AutoGroupModal.adapter.ts +147 -0
  29. package/src/components/AutoGroupModal.vue +176 -1321
  30. package/src/components/SampleSelector.vue +8 -23
  31. package/src/components/SmartGroup.types.ts +93 -0
  32. package/src/components/SmartGroupFieldRecipe.groups.ts +105 -0
  33. package/src/components/SmartGroupFieldRecipe.story.vue +58 -0
  34. package/src/components/SmartGroupFieldRecipe.vue +427 -0
  35. package/src/components/SmartGroupManual.cohorts.ts +112 -0
  36. package/src/components/SmartGroupManual.story.vue +55 -0
  37. package/src/components/SmartGroupManual.vue +398 -0
  38. package/src/components/SmartGroupModal.story.vue +61 -0
  39. package/src/components/SmartGroupModal.vue +61 -0
  40. package/src/components/index.ts +3 -0
  41. package/src/styles/components/sample-selector.css +1 -5
  42. package/src/styles/components/smart-group.css +708 -0
  43. package/src/styles/index.css +1 -1
  44. package/dist/components-BGVwavdd.js.map +0 -1
  45. package/dist/composables-C_hPF0Gn.js.map +0 -1
  46. package/dist/useProtocolTemplates-BbvlHoPD.js.map +0 -1
  47. package/src/__tests__/components/AutoGroupModal.preview.test.ts +0 -46
  48. package/src/styles/components/auto-group-modal.css +0 -1336
  49. /package/dist/__tests__/components/{AutoGroupModal.preview.test.d.ts → AutoGroupModal.adapter.test.d.ts} +0 -0
@@ -1,1336 +0,0 @@
1
- /* AutoGroupModal - Smart grouping wizard */
2
-
3
- .mint-auto-group {
4
- flex: 1;
5
- display: flex;
6
- flex-direction: column;
7
- gap: 0.625rem;
8
- min-height: 0;
9
- min-width: 0;
10
- }
11
-
12
- .mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
13
- overflow: hidden;
14
- }
15
-
16
- .mint-auto-group:has(.mint-auto-group__manual-mode) {
17
- height: min(34rem, calc(100vh - 12rem));
18
- min-height: min(26rem, calc(100vh - 12rem));
19
- overflow: hidden;
20
- }
21
-
22
- /* --- Workflow tabs --- */
23
- .mint-auto-group__workflow-bar {
24
- display: flex;
25
- align-items: flex-end;
26
- justify-content: space-between;
27
- gap: 0.25rem;
28
- min-width: 0;
29
- padding-bottom: 0;
30
- border-bottom: 1px solid var(--border-color);
31
- }
32
-
33
- .mint-auto-group__workflow-bar--manual {
34
- gap: 0.75rem;
35
- }
36
-
37
- .mint-auto-group__workflow-tabs {
38
- display: flex;
39
- flex-shrink: 0;
40
- gap: 0.25rem;
41
- }
42
-
43
- .mint-auto-group__workflow-tab {
44
- min-height: 1.75rem;
45
- margin-bottom: -1px;
46
- padding: 0.25rem 0.625rem;
47
- border: 0;
48
- border-bottom: 2px solid transparent;
49
- border-radius: 0;
50
- background: transparent;
51
- color: var(--text-muted);
52
- font-size: 0.75rem;
53
- font-weight: 600;
54
- cursor: pointer;
55
- line-height: 1.25;
56
- transition: border-color 0.15s ease, color 0.15s ease;
57
- }
58
-
59
- .mint-auto-group__workflow-tab:hover {
60
- color: var(--text-primary);
61
- }
62
-
63
- .mint-auto-group__workflow-tab:focus-visible {
64
- outline: none;
65
- box-shadow: 0 0 0 2px var(--color-primary-soft);
66
- }
67
-
68
- .mint-auto-group__workflow-tab--active {
69
- border-bottom-color: var(--color-primary);
70
- color: var(--color-primary);
71
- }
72
-
73
- .mint-auto-group__manual-mode {
74
- flex: 1;
75
- display: flex;
76
- flex-direction: column;
77
- gap: 0.625rem;
78
- min-height: 0;
79
- min-width: 0;
80
- overflow: hidden;
81
- }
82
-
83
- .mint-auto-group__manual-summary {
84
- display: flex;
85
- align-items: center;
86
- justify-content: space-between;
87
- flex: 1;
88
- gap: 0.75rem;
89
- min-width: 0;
90
- padding-bottom: 0.25rem;
91
- }
92
-
93
- .mint-auto-group__manual-summary-text {
94
- display: flex;
95
- flex-direction: column;
96
- gap: 0.125rem;
97
- min-width: 0;
98
- }
99
-
100
- .mint-auto-group__manual-summary-text strong {
101
- color: var(--text-primary);
102
- font-size: 0.8125rem;
103
- font-weight: 600;
104
- line-height: 1.25;
105
- }
106
-
107
- .mint-auto-group__manual-eyebrow {
108
- color: var(--text-muted);
109
- font-size: 0.625rem;
110
- font-weight: 700;
111
- letter-spacing: 0.05em;
112
- line-height: 1.2;
113
- text-transform: uppercase;
114
- }
115
-
116
- .mint-auto-group__manual-stats {
117
- display: flex;
118
- align-items: center;
119
- gap: 0.375rem;
120
- flex-wrap: wrap;
121
- justify-content: flex-end;
122
- color: var(--text-secondary);
123
- font-size: 0.6875rem;
124
- }
125
-
126
- .mint-auto-group__manual-stats span {
127
- display: inline-flex;
128
- align-items: center;
129
- gap: 0.25rem;
130
- min-height: 1.375rem;
131
- padding: 0.0625rem 0.4375rem;
132
- border: 1px solid var(--border-light);
133
- border-radius: 9999px;
134
- background: var(--bg-secondary);
135
- font-variant-numeric: tabular-nums;
136
- white-space: nowrap;
137
- }
138
-
139
- .mint-auto-group__manual-stats strong {
140
- color: var(--text-primary);
141
- font-family: 'Fira Code', monospace;
142
- font-size: 0.6875rem;
143
- }
144
-
145
- .mint-auto-group__manual-grid {
146
- display: grid;
147
- grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
148
- gap: 0.625rem;
149
- flex: 1;
150
- min-height: 0;
151
- min-width: 0;
152
- overflow: hidden;
153
- }
154
-
155
- .mint-auto-group__manual-panel {
156
- min-width: 0;
157
- min-height: 0;
158
- overflow: hidden;
159
- display: flex;
160
- flex-direction: column;
161
- gap: 0.5rem;
162
- padding: 0.625rem;
163
- border: 1px solid var(--border);
164
- border-radius: var(--radius);
165
- background: var(--bg-primary);
166
- box-shadow: inset 0 1px 0 var(--bg-secondary);
167
- }
168
-
169
- .mint-auto-group__manual-panel-head {
170
- display: flex;
171
- align-items: center;
172
- justify-content: space-between;
173
- gap: 0.625rem;
174
- }
175
-
176
- .mint-auto-group__manual-panel-head > div:first-child {
177
- display: flex;
178
- align-items: center;
179
- gap: 0.4375rem;
180
- min-width: 0;
181
- }
182
-
183
- .mint-auto-group__manual-panel-head h3 {
184
- margin: 0;
185
- color: var(--text-primary);
186
- font-size: 0.78125rem;
187
- font-weight: 600;
188
- line-height: 1.35;
189
- }
190
-
191
- .mint-auto-group__manual-step {
192
- display: inline-grid;
193
- place-items: center;
194
- width: 1.25rem;
195
- height: 1.25rem;
196
- border-radius: 9999px;
197
- background: var(--color-primary-soft);
198
- color: var(--color-primary);
199
- font-family: 'Fira Code', monospace;
200
- font-size: 0.6875rem;
201
- font-weight: 700;
202
- flex-shrink: 0;
203
- }
204
-
205
- .mint-auto-group__manual-panel-meta {
206
- display: flex;
207
- align-items: center;
208
- gap: 0.5rem;
209
- color: var(--text-muted);
210
- font-size: 0.75rem;
211
- white-space: nowrap;
212
- }
213
-
214
- .mint-auto-group__manual-filter {
215
- display: inline-flex;
216
- align-items: center;
217
- gap: 0.375rem;
218
- cursor: pointer;
219
- }
220
-
221
- .mint-auto-group__manual-checkbox {
222
- width: 0.875rem;
223
- height: 0.875rem;
224
- flex-shrink: 0;
225
- accent-color: var(--color-primary);
226
- cursor: pointer;
227
- }
228
-
229
- .mint-auto-group__manual-search {
230
- position: relative;
231
- display: flex;
232
- align-items: center;
233
- }
234
-
235
- .mint-auto-group__manual-search-icon {
236
- position: absolute;
237
- left: 0.6875rem;
238
- width: 0.875rem;
239
- height: 0.875rem;
240
- color: var(--text-muted);
241
- pointer-events: none;
242
- }
243
-
244
- .mint-auto-group__manual-search-input {
245
- width: 100%;
246
- min-height: 2rem;
247
- padding: 0.375rem 0.625rem 0.375rem 2rem;
248
- border: 1px solid var(--border);
249
- border-radius: var(--radius-sm);
250
- background: var(--bg-secondary);
251
- color: var(--text-primary);
252
- font-size: 0.8125rem;
253
- box-sizing: border-box;
254
- transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
255
- }
256
-
257
- .mint-auto-group__manual-search-input::placeholder {
258
- color: var(--text-muted);
259
- }
260
-
261
- .mint-auto-group__manual-search-input:focus-visible {
262
- outline: none;
263
- border-color: var(--color-primary);
264
- box-shadow: 0 0 0 2px var(--color-primary-soft);
265
- }
266
-
267
- .mint-auto-group__manual-selectbar {
268
- display: grid;
269
- grid-template-columns: auto minmax(0, 1fr) auto;
270
- align-items: center;
271
- gap: 0.5rem;
272
- min-height: 1.875rem;
273
- padding: 0.25rem 0.5rem;
274
- border: 1px solid var(--border-light);
275
- border-radius: var(--radius-sm);
276
- background: var(--bg-secondary);
277
- color: var(--text-secondary);
278
- cursor: pointer;
279
- font-size: 0.75rem;
280
- transition: border-color 0.15s ease, background-color 0.15s ease;
281
- }
282
-
283
- .mint-auto-group__manual-selectbar:hover {
284
- border-color: var(--border-color);
285
- background: var(--bg-primary);
286
- }
287
-
288
- .mint-auto-group__manual-selectbar-count {
289
- color: var(--text-muted);
290
- font-variant-numeric: tabular-nums;
291
- white-space: nowrap;
292
- }
293
-
294
- .mint-auto-group__manual-list,
295
- .mint-auto-group__manual-cohorts {
296
- scrollbar-width: thin;
297
- scrollbar-color: var(--scrollbar-thumb) transparent;
298
- }
299
-
300
- .mint-auto-group__manual-list::-webkit-scrollbar,
301
- .mint-auto-group__manual-cohorts::-webkit-scrollbar {
302
- width: 6px;
303
- }
304
-
305
- .mint-auto-group__manual-list::-webkit-scrollbar-track,
306
- .mint-auto-group__manual-cohorts::-webkit-scrollbar-track {
307
- background: transparent;
308
- }
309
-
310
- .mint-auto-group__manual-list::-webkit-scrollbar-thumb,
311
- .mint-auto-group__manual-cohorts::-webkit-scrollbar-thumb {
312
- background: var(--scrollbar-thumb);
313
- border-radius: 3px;
314
- }
315
-
316
- .mint-auto-group__manual-list::-webkit-scrollbar-thumb:hover,
317
- .mint-auto-group__manual-cohorts::-webkit-scrollbar-thumb:hover {
318
- background: var(--scrollbar-hover);
319
- }
320
-
321
- .mint-auto-group__manual-list {
322
- flex: 1;
323
- min-height: 0;
324
- overflow-y: auto;
325
- display: flex;
326
- flex-direction: column;
327
- gap: 0.25rem;
328
- padding-right: 0.25rem;
329
- }
330
-
331
- .mint-auto-group__manual-sample {
332
- position: relative;
333
- display: grid;
334
- grid-template-columns: auto minmax(0, 1fr) auto;
335
- align-items: center;
336
- gap: 0.5rem;
337
- min-height: 2rem;
338
- padding: 0.25rem 0.5rem;
339
- border: 1px solid var(--border-light);
340
- border-radius: var(--radius-sm);
341
- background: var(--bg-secondary);
342
- cursor: pointer;
343
- box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
344
- transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
345
- }
346
-
347
- .mint-auto-group__manual-sample:hover,
348
- .mint-auto-group__manual-sample--selected {
349
- border-color: var(--color-primary);
350
- background: var(--color-primary-soft);
351
- }
352
-
353
- .mint-auto-group__manual-sample--selected {
354
- box-shadow: inset 2px 0 0 var(--color-primary), 0 1px 0 rgba(15, 23, 42, 0.02);
355
- }
356
-
357
- .mint-auto-group__manual-sample-name {
358
- min-width: 0;
359
- overflow: hidden;
360
- color: var(--text-primary);
361
- font-family: 'Fira Code', monospace;
362
- font-size: 0.75rem;
363
- line-height: 1.4;
364
- text-overflow: ellipsis;
365
- white-space: nowrap;
366
- }
367
-
368
- .mint-auto-group__manual-status {
369
- display: inline-flex;
370
- align-items: center;
371
- gap: 0.375rem;
372
- max-width: 9rem;
373
- min-width: 0;
374
- overflow: hidden;
375
- padding: 0.125rem 0.5rem;
376
- border: 1px solid var(--border-light);
377
- border-radius: 9999px;
378
- background: var(--bg-primary);
379
- color: var(--text-secondary);
380
- font-size: 0.6875rem;
381
- line-height: 1.4;
382
- text-overflow: ellipsis;
383
- white-space: nowrap;
384
- }
385
-
386
- .mint-auto-group__manual-status--empty {
387
- border-color: transparent;
388
- background: var(--bg-tertiary);
389
- color: var(--text-muted);
390
- }
391
-
392
- .mint-auto-group__manual-dot,
393
- .mint-auto-group__manual-chip-dot {
394
- width: 0.5rem;
395
- height: 0.5rem;
396
- flex-shrink: 0;
397
- border-radius: 9999px;
398
- background: var(--text-muted);
399
- }
400
-
401
- .mint-auto-group__manual-tooltip {
402
- position: absolute;
403
- left: 2rem;
404
- bottom: calc(100% + 0.375rem);
405
- z-index: 30;
406
- display: none;
407
- max-width: min(34rem, calc(100vw - 3rem));
408
- padding: 0.375rem 0.5rem;
409
- border: 1px solid var(--border-color);
410
- border-radius: var(--radius-sm);
411
- background: var(--bg-primary);
412
- box-shadow: var(--shadow-md);
413
- color: var(--text-primary);
414
- font-family: 'Fira Code', monospace;
415
- font-size: 0.6875rem;
416
- line-height: 1.4;
417
- overflow-wrap: anywhere;
418
- pointer-events: none;
419
- }
420
-
421
- .mint-auto-group__manual-sample:hover .mint-auto-group__manual-tooltip,
422
- .mint-auto-group__manual-sample:focus-within .mint-auto-group__manual-tooltip {
423
- display: block;
424
- }
425
-
426
- .mint-auto-group__manual-empty {
427
- display: grid;
428
- place-items: center;
429
- min-height: 4rem;
430
- border: 1px dashed var(--border);
431
- border-radius: var(--radius-sm);
432
- color: var(--text-muted);
433
- font-size: 0.75rem;
434
- }
435
-
436
- .mint-auto-group__manual-selection-footer {
437
- display: flex;
438
- align-items: center;
439
- justify-content: space-between;
440
- gap: 0.5rem;
441
- padding-top: 0.5rem;
442
- border-top: 1px solid var(--border);
443
- color: var(--text-secondary);
444
- font-size: 0.75rem;
445
- }
446
-
447
- .mint-auto-group__manual-link {
448
- border: 0;
449
- background: transparent;
450
- color: var(--color-primary);
451
- cursor: pointer;
452
- font-size: 0.75rem;
453
- padding: 0;
454
- }
455
-
456
- .mint-auto-group__manual-link:disabled {
457
- color: var(--text-muted);
458
- cursor: not-allowed;
459
- }
460
-
461
- .mint-auto-group__manual-assignment {
462
- display: flex;
463
- flex-direction: column;
464
- gap: 0.5rem;
465
- padding: 0.625rem;
466
- border: 1px solid var(--border);
467
- border-radius: var(--radius-sm);
468
- background: var(--bg-secondary);
469
- box-shadow: inset 0 1px 0 var(--bg-primary);
470
- }
471
-
472
- .mint-auto-group__manual-assignment--empty {
473
- background: var(--bg-tertiary);
474
- }
475
-
476
- .mint-auto-group__manual-selected-summary {
477
- display: flex;
478
- align-items: center;
479
- gap: 0.5rem;
480
- color: var(--text-secondary);
481
- font-size: 0.75rem;
482
- }
483
-
484
- .mint-auto-group__manual-fields {
485
- display: grid;
486
- grid-template-columns: 1fr 1fr;
487
- gap: 0.5rem;
488
- }
489
-
490
- .mint-auto-group__manual-field {
491
- display: flex;
492
- flex-direction: column;
493
- gap: 0.25rem;
494
- min-width: 0;
495
- }
496
-
497
- .mint-auto-group__manual-field > span {
498
- color: var(--text-muted);
499
- font-size: 0.6875rem;
500
- font-weight: 700;
501
- letter-spacing: 0.05em;
502
- line-height: 1.2;
503
- text-transform: uppercase;
504
- }
505
-
506
- .mint-auto-group__manual-field small {
507
- color: var(--text-muted);
508
- font-size: 0.6875rem;
509
- font-weight: 500;
510
- letter-spacing: 0;
511
- text-transform: none;
512
- }
513
-
514
- .mint-auto-group__manual-combo {
515
- position: relative;
516
- display: flex;
517
- align-items: center;
518
- }
519
-
520
- .mint-auto-group__manual-combo .mint-input {
521
- width: 100%;
522
- padding-right: 2rem;
523
- border-color: var(--border-color);
524
- }
525
-
526
- .mint-auto-group__manual-combo > .mint-auto-group__manual-dot + .mint-input {
527
- padding-left: 1.75rem;
528
- }
529
-
530
- .mint-auto-group__manual-combo > .mint-auto-group__manual-dot {
531
- position: absolute;
532
- left: 0.625rem;
533
- z-index: 1;
534
- }
535
-
536
- .mint-auto-group__manual-combo-icon {
537
- position: absolute;
538
- right: 0.625rem;
539
- width: 0.875rem;
540
- height: 0.875rem;
541
- color: var(--text-muted);
542
- pointer-events: none;
543
- }
544
-
545
- .mint-auto-group__manual-swatches {
546
- display: flex;
547
- gap: 0.3125rem;
548
- flex-wrap: wrap;
549
- }
550
-
551
- .mint-auto-group__manual-swatch {
552
- width: 1.125rem;
553
- height: 1.125rem;
554
- padding: 0;
555
- border: 2px solid var(--bg-primary);
556
- border-radius: 9999px;
557
- box-shadow: 0 0 0 1px var(--border);
558
- cursor: pointer;
559
- }
560
-
561
- .mint-auto-group__manual-swatch:hover,
562
- .mint-auto-group__manual-swatch:focus-visible {
563
- outline: none;
564
- box-shadow: 0 0 0 2px var(--color-primary-soft);
565
- }
566
-
567
- .mint-auto-group__manual-swatch--active {
568
- box-shadow: 0 0 0 2px var(--color-primary);
569
- }
570
-
571
- .mint-auto-group__manual-target {
572
- display: flex;
573
- align-items: center;
574
- justify-content: space-between;
575
- gap: 0.75rem;
576
- min-width: 0;
577
- padding: 0.375rem 0.5rem;
578
- border: 1px dashed var(--border-color);
579
- border-radius: var(--radius-sm);
580
- color: var(--text-muted);
581
- font-size: 0.75rem;
582
- }
583
-
584
- .mint-auto-group__manual-target code {
585
- min-width: 0;
586
- overflow: hidden;
587
- color: var(--text-primary);
588
- font-family: 'Fira Code', monospace;
589
- font-size: 0.75rem;
590
- text-overflow: ellipsis;
591
- white-space: nowrap;
592
- }
593
-
594
- .mint-auto-group__manual-assign {
595
- display: inline-flex;
596
- align-items: center;
597
- justify-content: center;
598
- gap: 0.5rem;
599
- width: 100%;
600
- }
601
-
602
- .mint-auto-group__manual-btn-icon {
603
- width: 1rem;
604
- height: 1rem;
605
- flex-shrink: 0;
606
- }
607
-
608
- .mint-auto-group__manual-cohorts {
609
- flex: 0 1 auto;
610
- min-height: 0;
611
- overflow: visible;
612
- display: flex;
613
- flex-direction: column;
614
- gap: 0.25rem;
615
- padding-right: 0;
616
- }
617
-
618
- .mint-auto-group__manual-cohorts-head {
619
- position: sticky;
620
- top: 0;
621
- z-index: 1;
622
- display: flex;
623
- align-items: center;
624
- justify-content: space-between;
625
- gap: 0.5rem;
626
- padding: 0.125rem 0 0.25rem;
627
- background: var(--bg-primary);
628
- color: var(--text-muted);
629
- font-size: 0.6875rem;
630
- font-weight: 700;
631
- letter-spacing: 0.05em;
632
- text-transform: uppercase;
633
- }
634
-
635
- .mint-auto-group__manual-chip {
636
- display: grid;
637
- grid-template-columns: auto minmax(0, 1fr) auto;
638
- align-items: center;
639
- gap: 0.5rem;
640
- min-height: 1.875rem;
641
- width: 100%;
642
- padding: 0.25rem 0.5rem;
643
- border: 1px solid var(--border-light);
644
- border-radius: var(--radius-sm);
645
- background: var(--bg-secondary);
646
- color: var(--text-primary);
647
- cursor: pointer;
648
- font-size: 0.75rem;
649
- text-align: left;
650
- transition: border-color 0.15s ease, background-color 0.15s ease;
651
- }
652
-
653
- .mint-auto-group__manual-chip:hover {
654
- border-color: var(--color-primary);
655
- background: var(--bg-primary);
656
- }
657
-
658
- .mint-auto-group__manual-chip--major {
659
- background: var(--bg-primary);
660
- font-weight: 600;
661
- }
662
-
663
- .mint-auto-group__manual-chip--sub {
664
- grid-template-columns: minmax(0, 1fr) auto;
665
- margin-left: 1rem;
666
- width: calc(100% - 1rem);
667
- color: var(--text-secondary);
668
- }
669
-
670
- .mint-auto-group__manual-chip-main,
671
- .mint-auto-group__manual-chip-sub {
672
- min-width: 0;
673
- overflow: hidden;
674
- text-overflow: ellipsis;
675
- white-space: nowrap;
676
- }
677
-
678
- .mint-auto-group__manual-chip-sub {
679
- padding-left: 0.5rem;
680
- }
681
-
682
- .mint-auto-group__manual-chip-count {
683
- display: inline-grid;
684
- place-items: center;
685
- min-width: 1.5rem;
686
- min-height: 1.25rem;
687
- padding: 0 0.375rem;
688
- border: 1px solid var(--border-light);
689
- border-radius: 9999px;
690
- background: var(--bg-primary);
691
- color: var(--text-secondary);
692
- font-family: 'Fira Code', monospace;
693
- font-size: 0.6875rem;
694
- font-variant-numeric: tabular-nums;
695
- }
696
-
697
- /* --- Mode toggle --- */
698
- .mint-auto-group__mode-toggle {
699
- display: flex;
700
- flex-wrap: wrap;
701
- gap: 0.5rem;
702
- margin-bottom: 1rem;
703
- }
704
-
705
- /* --- Input step --- */
706
- .mint-auto-group__input-step {
707
- display: flex;
708
- flex-direction: column;
709
- }
710
-
711
- /* --- Paste: free-form textarea (the self-designed input path) --- */
712
- .mint-auto-group__paste {
713
- position: relative;
714
- }
715
-
716
- .mint-auto-group__textarea {
717
- width: 100%;
718
- font-family: 'Fira Code', monospace;
719
- font-size: 0.8125rem;
720
- line-height: 1.5;
721
- padding: 0.75rem;
722
- border: 1px solid var(--border-color);
723
- border-radius: var(--radius-md);
724
- background: var(--bg-secondary);
725
- color: var(--text-primary);
726
- resize: vertical;
727
- box-sizing: border-box;
728
- }
729
-
730
- .mint-auto-group__textarea:focus-visible {
731
- outline: none;
732
- border-color: var(--color-primary);
733
- box-shadow: 0 0 0 2px var(--color-primary-soft);
734
- }
735
-
736
- .mint-auto-group__textarea::placeholder {
737
- color: var(--text-muted);
738
- }
739
-
740
- .mint-auto-group__sample-count {
741
- position: absolute;
742
- bottom: 0.5rem;
743
- right: 0.75rem;
744
- font-size: 0.75rem;
745
- color: var(--text-muted);
746
- background: var(--bg-secondary);
747
- padding: 0.125rem 0.5rem;
748
- border-radius: var(--radius-sm);
749
- }
750
-
751
- /* --- CSV / Dropzone --- */
752
- .mint-auto-group__csv {
753
- display: flex;
754
- flex-direction: column;
755
- }
756
-
757
- .mint-auto-group__dropzone {
758
- position: relative;
759
- display: flex;
760
- flex-direction: column;
761
- align-items: center;
762
- justify-content: center;
763
- gap: 0.75rem;
764
- padding: 3rem 2rem;
765
- border: 2px dashed var(--border-color);
766
- border-radius: var(--radius-md);
767
- background: var(--bg-tertiary);
768
- cursor: pointer;
769
- transition: border-color 0.15s, background 0.15s;
770
- }
771
-
772
- .mint-auto-group__dropzone--dragover {
773
- border-color: var(--color-primary);
774
- background: var(--color-primary-soft);
775
- }
776
-
777
- .mint-auto-group__file-input {
778
- position: absolute;
779
- inset: 0;
780
- opacity: 0;
781
- cursor: pointer;
782
- }
783
-
784
- .mint-auto-group__upload-icon {
785
- width: 2.5rem;
786
- height: 2.5rem;
787
- color: var(--text-muted);
788
- }
789
-
790
- .mint-auto-group__upload-text {
791
- font-size: 0.875rem;
792
- color: var(--text-secondary);
793
- margin: 0;
794
- }
795
-
796
- .mint-auto-group__upload-highlight {
797
- color: var(--color-primary);
798
- font-weight: 500;
799
- }
800
-
801
- .mint-auto-group__upload-hint {
802
- font-size: 0.75rem;
803
- color: var(--text-muted);
804
- margin: 0;
805
- max-width: 28rem;
806
- text-align: center;
807
- line-height: 1.4;
808
- }
809
-
810
- .mint-auto-group__file-info {
811
- display: flex;
812
- align-items: center;
813
- gap: 0.5rem;
814
- padding: 0.75rem 1rem;
815
- background: var(--bg-tertiary);
816
- border-radius: var(--radius-md);
817
- border: 1px solid var(--border-color);
818
- }
819
-
820
- .mint-auto-group__file-icon {
821
- width: 1.25rem;
822
- height: 1.25rem;
823
- color: var(--text-muted);
824
- flex-shrink: 0;
825
- }
826
-
827
- .mint-auto-group__file-name {
828
- font-size: 0.875rem;
829
- font-weight: 500;
830
- color: var(--text-primary);
831
- overflow: hidden;
832
- text-overflow: ellipsis;
833
- white-space: nowrap;
834
- min-width: 0;
835
- }
836
-
837
- .mint-auto-group__file-rows {
838
- font-size: 0.75rem;
839
- color: var(--text-muted);
840
- margin-left: auto;
841
- }
842
-
843
- .mint-auto-group__file-clear {
844
- font-size: 0.75rem;
845
- color: var(--color-primary);
846
- background: none;
847
- border: none;
848
- cursor: pointer;
849
- padding: 0;
850
- margin-left: 0.5rem;
851
- }
852
-
853
- .mint-auto-group__file-clear:hover {
854
- text-decoration: underline;
855
- }
856
-
857
- .mint-auto-group__file-clear:focus-visible {
858
- outline: 2px solid var(--color-primary);
859
- outline-offset: 2px;
860
- border-radius: var(--radius-sm);
861
- }
862
-
863
- .mint-auto-group__csv-error {
864
- padding: 0.5rem 0.75rem;
865
- margin-top: 0.5rem;
866
- font-size: 0.8125rem;
867
- color: var(--mint-error);
868
- background: var(--mint-error-bg);
869
- border: 1px solid var(--mint-error-border);
870
- border-radius: var(--radius);
871
- }
872
-
873
- /* --- Experiment mode --- */
874
- .mint-auto-group__experiment {
875
- display: flex;
876
- flex-direction: column;
877
- gap: 0.75rem;
878
- }
879
-
880
- .mint-auto-group__experiment-loading {
881
- display: flex;
882
- align-items: center;
883
- justify-content: center;
884
- gap: 0.75rem;
885
- padding: 3rem 2rem;
886
- color: var(--text-secondary);
887
- font-size: 0.875rem;
888
- }
889
-
890
- .mint-auto-group__experiment-error {
891
- padding: 1.5rem;
892
- border: 1px solid var(--mint-error-border);
893
- border-radius: var(--radius-md);
894
- background: var(--mint-error-bg);
895
- font-size: 0.8125rem;
896
- color: var(--text-primary);
897
- overflow-wrap: break-word;
898
- word-break: break-word;
899
- }
900
-
901
- .mint-auto-group__experiment-error p {
902
- margin: 0;
903
- }
904
-
905
- .mint-auto-group__experiment-error p + p {
906
- margin-top: 0.5rem;
907
- color: var(--text-secondary);
908
- font-size: 0.75rem;
909
- }
910
-
911
- .mint-auto-group__link-btn {
912
- background: none;
913
- border: none;
914
- color: var(--color-primary);
915
- cursor: pointer;
916
- padding: 0;
917
- font-size: inherit;
918
- text-decoration: underline;
919
- }
920
-
921
- .mint-auto-group__link-btn:hover {
922
- color: var(--color-primary-hover);
923
- }
924
-
925
- .mint-auto-group__link-btn:focus-visible {
926
- outline: 2px solid var(--color-primary);
927
- outline-offset: 1px;
928
- border-radius: var(--radius-sm);
929
- }
930
-
931
- .mint-auto-group__experiment-loaded {
932
- padding: 1.5rem;
933
- border: 1px solid var(--border-color);
934
- border-radius: var(--radius-md);
935
- background: var(--bg-tertiary);
936
- display: flex;
937
- flex-direction: column;
938
- gap: 0.75rem;
939
- }
940
-
941
- .mint-auto-group__experiment-summary {
942
- display: flex;
943
- flex-wrap: wrap;
944
- gap: 0.5rem 1rem;
945
- }
946
-
947
- .mint-auto-group__experiment-stat {
948
- font-size: 0.8125rem;
949
- color: var(--text-secondary);
950
- }
951
-
952
- .mint-auto-group__experiment-stat strong {
953
- color: var(--text-primary);
954
- }
955
-
956
- .mint-auto-group__experiment-fields {
957
- display: flex;
958
- flex-wrap: wrap;
959
- gap: 0.375rem;
960
- }
961
-
962
- .mint-auto-group__field-value {
963
- font-family: 'Fira Code', monospace;
964
- font-size: 11.5px;
965
- background: var(--bg-primary);
966
- border: 1px solid var(--border);
967
- padding: 2px 8px;
968
- border-radius: 9999px;
969
- color: var(--text-secondary);
970
- }
971
-
972
- /* --- Navigation --- */
973
- .mint-auto-group__nav {
974
- display: flex;
975
- align-items: center;
976
- gap: 0.5rem;
977
- }
978
-
979
- .mint-auto-group__nav--manual {
980
- width: 100%;
981
- }
982
-
983
- .mint-auto-group__nav-spacer {
984
- flex: 1;
985
- }
986
-
987
- /* --- Workspace step --- */
988
- .mint-auto-group__workspace { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 480px; position: relative; }
989
- .mint-auto-group__classes { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
990
- .mint-auto-group__classes h3 { font-size: 11px; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; margin: 0 0 8px; }
991
- .mint-auto-group__class { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; background: transparent; border: 1px solid transparent; font-size: 13px; color: var(--text-primary); text-align: left; }
992
- .mint-auto-group__class:hover { background: var(--bg-tertiary); }
993
- .mint-auto-group__class--active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 500; }
994
- .mint-auto-group__class--qc .mint-auto-group__class-dot { background: var(--mint-warning); }
995
- .mint-auto-group__class-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--text-muted); }
996
- .mint-auto-group__class-count { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-secondary); padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--border); }
997
- .mint-auto-group__schema { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
998
-
999
- /* --- Suggestion banner --- */
1000
- .mint-auto-group__suggest { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); border: 1px dashed var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-size: 12.5px; }
1001
- .mint-auto-group__suggest-btn { margin-left: 8px; background: var(--bg-primary); border: 1px solid var(--color-primary); color: var(--color-primary); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; }
1002
- .mint-auto-group__suggest-btn--ghost { border-color: var(--border); color: var(--text-secondary); }
1003
-
1004
- /* --- 3-stat strip (Option B redesign) ---
1005
- *
1006
- * Three peer stats at the top of the schema panel:
1007
- * Groups (primary, with factor-chip composition below)
1008
- * Samples (active class size · class label · token count)
1009
- * Avg / group (with min/max sub)
1010
- *
1011
- * Replaces the old schema header + group summary bar. The strip is a
1012
- * single rounded card with 1px gap dividers so the three cells read as
1013
- * a unit, not three floating panels. */
1014
- .mint-auto-group__stats {
1015
- display: grid;
1016
- grid-template-columns: repeat(3, 1fr);
1017
- gap: 1px;
1018
- background: var(--border);
1019
- border: 1px solid var(--border);
1020
- border-radius: var(--radius);
1021
- overflow: hidden;
1022
- }
1023
- .mint-auto-group__stat {
1024
- background: var(--bg-primary);
1025
- padding: 12px 14px;
1026
- min-width: 0;
1027
- }
1028
- .mint-auto-group__stat-v {
1029
- font-size: 22px;
1030
- font-weight: 700;
1031
- color: var(--text-primary);
1032
- line-height: 1;
1033
- font-variant-numeric: tabular-nums;
1034
- }
1035
- .mint-auto-group__stat--primary .mint-auto-group__stat-v { color: var(--color-primary); }
1036
- .mint-auto-group__stat-l {
1037
- font-size: 11px;
1038
- color: var(--text-muted);
1039
- text-transform: uppercase;
1040
- letter-spacing: 0.05em;
1041
- margin-top: 4px;
1042
- font-weight: 600;
1043
- }
1044
- .mint-auto-group__stat-sub {
1045
- margin-top: 8px;
1046
- display: flex;
1047
- flex-wrap: wrap;
1048
- gap: 4px;
1049
- align-items: center;
1050
- font-size: 11.5px;
1051
- color: var(--text-secondary);
1052
- min-height: 22px;
1053
- }
1054
- .mint-auto-group__stat-sub--muted {
1055
- color: var(--text-muted);
1056
- font-size: 11.5px;
1057
- }
1058
- .mint-auto-group__stat-empty {
1059
- color: var(--text-muted);
1060
- font-style: italic;
1061
- }
1062
- .mint-auto-group__stat-empty strong {
1063
- color: var(--text-secondary);
1064
- font-style: normal;
1065
- font-weight: 600;
1066
- }
1067
- .mint-auto-group__group-chip {
1068
- font-size: 10.5px;
1069
- font-family: 'Fira Code', monospace;
1070
- padding: 2px 7px;
1071
- border-radius: 9999px;
1072
- background: var(--color-primary-soft);
1073
- color: var(--color-primary);
1074
- white-space: nowrap;
1075
- line-height: 1.4;
1076
- }
1077
-
1078
- /* --- QC routing radio group (replaces the two checkboxes) --- */
1079
- .mint-auto-group__routing {
1080
- margin-top: 14px;
1081
- padding-top: 14px;
1082
- border-top: 1px solid var(--border);
1083
- }
1084
- .mint-auto-group__routing-head {
1085
- margin: 0 0 8px;
1086
- font-size: 11px;
1087
- text-transform: uppercase;
1088
- letter-spacing: 0.05em;
1089
- color: var(--text-muted);
1090
- font-weight: 600;
1091
- }
1092
- .mint-auto-group__routing-radio {
1093
- display: flex;
1094
- align-items: flex-start;
1095
- gap: 8px;
1096
- font-size: 12.5px;
1097
- color: var(--text-primary);
1098
- padding: 5px 0;
1099
- cursor: pointer;
1100
- line-height: 1.4;
1101
- }
1102
- .mint-auto-group__routing-radio input {
1103
- margin-top: 2px;
1104
- accent-color: var(--color-primary);
1105
- flex-shrink: 0;
1106
- }
1107
- .mint-auto-group__routing-radio small {
1108
- display: block;
1109
- color: var(--text-muted);
1110
- font-size: 11px;
1111
- margin-top: 1px;
1112
- }
1113
-
1114
- /* --- Compact token table (replaces the horizontal cards row) ---
1115
- *
1116
- * One row per token position. Lets users scan a 6+ token batch without
1117
- * horizontal scrolling and without each row carrying redundant card chrome.
1118
- * Click the row to open the popover (rename, role override, value ops).
1119
- * The Use checkbox lives inline; @click.stop on the label prevents
1120
- * accidental popover triggering when toggling Use. */
1121
- .mint-auto-group__token-table {
1122
- flex: 1;
1123
- min-height: 0;
1124
- display: flex;
1125
- flex-direction: column;
1126
- border: 1px solid var(--border);
1127
- border-radius: var(--radius);
1128
- background: var(--bg-primary);
1129
- overflow: auto;
1130
- }
1131
- .mint-auto-group__token-row {
1132
- display: grid;
1133
- /* Column widths chosen to fit in the lg modal's ~440px schema panel.
1134
- * Token# stays narrow (single digit), Name + Preview share remaining
1135
- * flex space, Role pill is fixed for badge stability, # uses a glyph
1136
- * header so 32px is enough, Use is the checkbox, then the ⋯ trigger. */
1137
- grid-template-columns: 28px minmax(0, 1fr) 76px 48px minmax(0, 1.4fr) 28px 18px;
1138
- align-items: center;
1139
- gap: 8px;
1140
- padding: 9px 12px;
1141
- background: transparent;
1142
- border: 0;
1143
- border-bottom: 1px solid var(--border);
1144
- font-size: 12.5px;
1145
- color: var(--text-primary);
1146
- text-align: left;
1147
- cursor: pointer;
1148
- width: 100%;
1149
- font-family: inherit;
1150
- transition: background-color 150ms ease;
1151
- }
1152
- .mint-auto-group__token-row:last-child { border-bottom: 0; }
1153
- .mint-auto-group__token-row:hover { background: var(--bg-secondary); }
1154
- .mint-auto-group__token-row:focus-visible {
1155
- outline: 2px solid var(--color-primary);
1156
- outline-offset: -2px;
1157
- }
1158
- .mint-auto-group__token-row--active { background: var(--color-primary-soft); }
1159
- .mint-auto-group__token-row--head {
1160
- cursor: default;
1161
- background: var(--bg-secondary);
1162
- font-size: 11px;
1163
- font-weight: 600;
1164
- text-transform: uppercase;
1165
- letter-spacing: 0.05em;
1166
- color: var(--text-muted);
1167
- padding: 8px 14px;
1168
- }
1169
- .mint-auto-group__token-row--head:hover { background: var(--bg-secondary); }
1170
- .mint-auto-group__token-ix {
1171
- font-family: 'Fira Code', monospace;
1172
- font-size: 12px;
1173
- color: var(--text-muted);
1174
- }
1175
- .mint-auto-group__token-nm {
1176
- font-weight: 500;
1177
- overflow: hidden;
1178
- text-overflow: ellipsis;
1179
- white-space: nowrap;
1180
- min-width: 0;
1181
- }
1182
- .mint-auto-group__token-unique {
1183
- font-family: 'Fira Code', monospace;
1184
- font-size: 12.5px;
1185
- color: var(--text-secondary);
1186
- text-align: right;
1187
- font-variant-numeric: tabular-nums;
1188
- }
1189
- .mint-auto-group__token-num { text-align: right; }
1190
- .mint-auto-group__token-preview {
1191
- font-family: 'Fira Code', monospace;
1192
- font-size: 11.5px;
1193
- color: var(--text-secondary);
1194
- overflow: hidden;
1195
- text-overflow: ellipsis;
1196
- white-space: nowrap;
1197
- min-width: 0;
1198
- }
1199
- .mint-auto-group__token-more {
1200
- color: var(--text-muted);
1201
- font-style: italic;
1202
- }
1203
- .mint-auto-group__token-use,
1204
- .mint-auto-group__token-use-head { display: flex; justify-content: center; }
1205
- .mint-auto-group__token-use { cursor: pointer; }
1206
- .mint-auto-group__token-use input {
1207
- width: 16px;
1208
- height: 16px;
1209
- cursor: pointer;
1210
- accent-color: var(--color-primary);
1211
- }
1212
- .mint-auto-group__token-trigger {
1213
- color: var(--text-muted);
1214
- text-align: center;
1215
- font-size: 14px;
1216
- user-select: none;
1217
- }
1218
-
1219
- /* --- Role badge (used in token rows and inside the popover) --- */
1220
- .mint-auto-group__role { align-self: flex-start; display: inline-flex; padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 10.5px; text-transform: uppercase; cursor: pointer; }
1221
- .mint-auto-group__role--factor { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; }
1222
- .mint-auto-group__role--constant { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
1223
- .mint-auto-group__role--replicate { background: var(--mint-info-bg); color: var(--mint-info); border-color: var(--mint-info-border); }
1224
- .mint-auto-group__role--run-order { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
1225
- .mint-auto-group__role--numeric { background: rgba(249,115,22,.10); color: var(--color-cta); border-color: rgba(249,115,22,.30); }
1226
- .mint-auto-group__role--class-tag { background: rgba(123,208,181,.16); color: #0F766E; border-color: transparent; }
1227
- .mint-auto-group__role--ignore { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
1228
-
1229
- /* --- Column popover (token rename, role override, value ops) ---
1230
- * - bg-primary so it reads brighter than the surrounding bg-secondary panels.
1231
- * - Layered shadow (close + far) reads as elevated rather than recessed.
1232
- * - z-index 20 sits above schema cards but stays scoped to the modal's
1233
- * stacking context. */
1234
- .mint-auto-group__popover { position: absolute; right: 20px; top: 60px; width: 320px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px -8px rgba(15, 23, 42, .22); padding: 14px; z-index: 20; display: flex; flex-direction: column; gap: 12px; }
1235
- .mint-auto-group__popover-head { display: flex; align-items: center; gap: 8px; }
1236
- .mint-auto-group__popover-head .mono { font-family: 'Fira Code', monospace; font-size: 11px; color: var(--text-muted); margin-left: auto; }
1237
- .mint-auto-group__popover-close { background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); font-size: 16px; }
1238
- .mint-auto-group__popover-section { display: flex; flex-direction: column; gap: 6px; }
1239
- .mint-auto-group__popover-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
1240
- .mint-auto-group__pills { display: flex; flex-wrap: wrap; gap: 6px; }
1241
- .mint-auto-group__pill-btn { font-size: 11.5px; padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; }
1242
- .mint-auto-group__pill-btn--on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
1243
- .mint-auto-group__values-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
1244
- .mint-auto-group__value-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; align-items: center; }
1245
- .mint-auto-group__value-src { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-muted); text-align: right; }
1246
- .mint-auto-group__value-input { border: 1px solid var(--border); background: var(--bg-secondary); padding: 4px 8px; border-radius: var(--radius-sm); font-family: 'Fira Code', monospace; font-size: 12px; }
1247
- .mint-auto-group__value-excl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
1248
- .mint-auto-group__link { background: transparent; border: 0; color: var(--color-primary); font-size: 12.5px; cursor: pointer; text-align: left; padding: 0; }
1249
-
1250
- /* --- CSV download templates (Input step) --- */
1251
- .mint-auto-group__template { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 12px; }
1252
- .mint-auto-group__template-label { font-size: 12.5px; color: var(--text-secondary); }
1253
- .mint-auto-group__template-actions { display: flex; gap: 8px; }
1254
-
1255
- /* --- Preview step --- */
1256
- .mint-auto-group__preview { display: flex; flex-direction: column; gap: 14px; }
1257
- .mint-auto-group__preview-summary { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
1258
- .mint-auto-group__preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
1259
- .mint-auto-group__preview-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
1260
- .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
1261
- /* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
1262
- its height so a large batch scrolls inside the panel instead of the modal. */
1263
- .mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto; }
1264
- .mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
1265
- .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
1266
- .mint-auto-group__qc-chip { background: var(--mint-warning-bg); color: #92400E; border: 1px solid var(--mint-warning-border); padding: 4px 10px; border-radius: 9999px; font-size: 12px; }
1267
- .mint-auto-group__fingerprint { margin-top: 14px; }
1268
- .mint-auto-group__fingerprint summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
1269
- .mint-auto-group__fingerprint pre { font-family: 'Fira Code', monospace; font-size: 11px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; overflow-x: auto; }
1270
-
1271
- @media (max-width: 760px) {
1272
- .mint-auto-group__workflow-bar--manual {
1273
- align-items: stretch;
1274
- flex-direction: column;
1275
- gap: 0.5rem;
1276
- }
1277
-
1278
- .mint-auto-group__manual-summary,
1279
- .mint-auto-group__manual-panel-head,
1280
- .mint-auto-group__manual-panel-meta {
1281
- align-items: flex-start;
1282
- flex-direction: column;
1283
- }
1284
-
1285
- .mint-auto-group__manual-stats {
1286
- justify-content: flex-start;
1287
- }
1288
-
1289
- .mint-auto-group__manual-grid,
1290
- .mint-auto-group__manual-fields,
1291
- .mint-auto-group__preview-grid,
1292
- .mint-auto-group__workspace {
1293
- grid-template-columns: 1fr;
1294
- }
1295
-
1296
- .mint-auto-group__manual-grid {
1297
- min-height: 0;
1298
- }
1299
-
1300
- .mint-auto-group__manual-list {
1301
- max-height: 18rem;
1302
- }
1303
-
1304
- .mint-auto-group__manual-sample {
1305
- grid-template-columns: auto minmax(0, 1fr);
1306
- }
1307
-
1308
- .mint-auto-group__manual-status {
1309
- grid-column: 2;
1310
- justify-self: start;
1311
- max-width: 100%;
1312
- }
1313
-
1314
- .mint-auto-group__nav--manual {
1315
- display: grid;
1316
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1317
- gap: 0.5rem;
1318
- }
1319
-
1320
- .mint-auto-group__nav--manual .mint-auto-group__nav-spacer {
1321
- display: none;
1322
- }
1323
-
1324
- .mint-auto-group__nav--manual .mint-button {
1325
- width: 100%;
1326
- justify-content: center;
1327
- }
1328
- }
1329
-
1330
- @media (prefers-reduced-motion: reduce) {
1331
- .mint-auto-group__workflow-tab,
1332
- .mint-auto-group__manual-sample,
1333
- .mint-auto-group__token-row {
1334
- transition: none;
1335
- }
1336
- }