@morscherlab/mint-sdk 1.1.8 → 1.1.10

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 (91) hide show
  1. package/dist/__tests__/components/RetiredStyles.test.d.ts +1 -0
  2. package/dist/__tests__/composables/autoGroup/groupByOrder.test.d.ts +1 -0
  3. package/dist/__tests__/composables/useSampleGroups.tree.test.d.ts +1 -0
  4. package/dist/components/AppTopBar.vue.d.ts +6 -11
  5. package/dist/components/AutoGroupModal.adapter.d.ts +22 -7
  6. package/dist/components/PluginIcon.vue.d.ts +2 -2
  7. package/dist/components/PluginWorkspaceView.props.d.ts +5 -7
  8. package/dist/components/PluginWorkspaceView.vue.d.ts +0 -3
  9. package/dist/components/SampleSelector.groups.d.ts +7 -7
  10. package/dist/components/SampleSelector.selection.d.ts +6 -12
  11. package/dist/components/SampleSelector.tree.d.ts +39 -0
  12. package/dist/components/SampleSelectorGroupNode.vue.d.ts +9 -0
  13. package/dist/components/SmartGroup.types.d.ts +5 -0
  14. package/dist/components/SmartGroupFieldRecipe.groups.d.ts +3 -2
  15. package/dist/components/SmartGroupFieldRecipe.vue.d.ts +2 -0
  16. package/dist/components/index.js +1 -1
  17. package/dist/{components-CDomhGSj.js → components-HXV-ZkBg.js} +939 -948
  18. package/dist/components-HXV-ZkBg.js.map +1 -0
  19. package/dist/composables/index.d.ts +1 -1
  20. package/dist/composables/index.js +1 -1
  21. package/dist/composables/useAutoGroup.d.ts +3 -0
  22. package/dist/composables/usePlatformContext.d.ts +3 -0
  23. package/dist/composables/useSampleGroups.d.ts +25 -0
  24. package/dist/index.js +2 -2
  25. package/dist/install.js +1 -1
  26. package/dist/styles.css +130 -557
  27. package/dist/types/platform.d.ts +1 -0
  28. package/dist/{useProtocolTemplates-BMt0LlXf.js → useProtocolTemplates-D3IZKLqr.js} +198 -24
  29. package/dist/useProtocolTemplates-D3IZKLqr.js.map +1 -0
  30. package/dist/utils/pluginIcon.d.ts +1 -1
  31. package/dist/utils/sampleGroupPath.d.ts +6 -0
  32. package/package.json +1 -1
  33. package/src/__tests__/components/AppAvatarMenu.test.ts +11 -0
  34. package/src/__tests__/components/AppTopBar.test.ts +84 -10
  35. package/src/__tests__/components/AppTopBarPageSelector.test.ts +1 -1
  36. package/src/__tests__/components/AutoGroupModal.adapter.test.ts +47 -7
  37. package/src/__tests__/components/PluginIcon.test.ts +19 -0
  38. package/src/__tests__/components/PluginWorkspaceView.test.ts +8 -0
  39. package/src/__tests__/components/RetiredStyles.test.ts +82 -0
  40. package/src/__tests__/components/SampleSelector.drag.test.ts +26 -0
  41. package/src/__tests__/components/SampleSelector.groups.test.ts +19 -6
  42. package/src/__tests__/components/SampleSelector.selection.test.ts +9 -23
  43. package/src/__tests__/components/SampleSelector.test.ts +35 -0
  44. package/src/__tests__/components/SmartGroupFieldRecipe.groups.test.ts +5 -0
  45. package/src/__tests__/composables/autoGroup/compose.test.ts +9 -10
  46. package/src/__tests__/composables/autoGroup/groupByOrder.test.ts +278 -0
  47. package/src/__tests__/composables/autoGroup/integration.test.ts +3 -7
  48. package/src/__tests__/composables/useSampleGroups.tree.test.ts +145 -0
  49. package/src/components/AppTopBar.story.vue +9 -7
  50. package/src/components/AppTopBar.vue +79 -72
  51. package/src/components/AutoGroupModal.adapter.ts +69 -13
  52. package/src/components/AutoGroupModal.story.vue +89 -0
  53. package/src/components/AutoGroupModal.vue +18 -8
  54. package/src/components/PluginIcon.story.vue +11 -9
  55. package/src/components/PluginIcon.vue +3 -3
  56. package/src/components/PluginWorkspaceView.props.ts +5 -7
  57. package/src/components/PluginWorkspaceView.vue +0 -4
  58. package/src/components/SampleSelector.drag.ts +5 -5
  59. package/src/components/SampleSelector.groups.ts +15 -15
  60. package/src/components/SampleSelector.selection.ts +7 -46
  61. package/src/components/SampleSelector.story.vue +37 -0
  62. package/src/components/SampleSelector.tree.ts +48 -0
  63. package/src/components/SampleSelector.vue +52 -320
  64. package/src/components/SampleSelectorGroupNode.vue +197 -0
  65. package/src/components/SmartGroup.types.ts +5 -0
  66. package/src/components/SmartGroupFieldRecipe.groups.ts +6 -2
  67. package/src/components/SmartGroupFieldRecipe.vue +76 -4
  68. package/src/components/internal/AppTopBarPageSelectorInternal.vue +2 -2
  69. package/src/composables/autoGroup/compose.ts +31 -10
  70. package/src/composables/index.ts +1 -0
  71. package/src/composables/useAutoGroup.ts +112 -5
  72. package/src/composables/useSampleGroups.ts +118 -33
  73. package/src/styles/components/app-avatar-menu.css +2 -1
  74. package/src/styles/components/app-plugin-switcher.css +0 -13
  75. package/src/styles/components/app-top-bar.css +13 -54
  76. package/src/styles/components/dose-calculator.css +0 -4
  77. package/src/styles/components/experiment-popover.css +2 -104
  78. package/src/styles/components/experiment-selector-modal.css +0 -7
  79. package/src/styles/components/plugin-icon.css +3 -0
  80. package/src/styles/components/protocol-step-editor.css +0 -6
  81. package/src/styles/components/reagent-editor.css +0 -5
  82. package/src/styles/components/sample-hierarchy-tree.css +0 -4
  83. package/src/styles/components/sample-selector.css +0 -96
  84. package/src/styles/components/schedule-calendar.css +0 -6
  85. package/src/styles/components/smart-group.css +22 -0
  86. package/src/styles/components/well-plate.css +1 -27
  87. package/src/types/platform.ts +1 -0
  88. package/src/utils/pluginIcon.ts +5 -2
  89. package/src/utils/sampleGroupPath.ts +19 -0
  90. package/dist/components-CDomhGSj.js.map +0 -1
  91. package/dist/useProtocolTemplates-BMt0LlXf.js.map +0 -1
package/dist/styles.css CHANGED
@@ -4812,95 +4812,6 @@ html.dark .mint-pill__remove:hover {
4812
4812
  color: var(--mint-error);
4813
4813
  background: rgba(239, 68, 68, 0.08);
4814
4814
  }
4815
-
4816
- /* Divider */
4817
- .mint-experiment-popover__divider {
4818
- height: 1px;
4819
- background: var(--border-light);
4820
- margin: 0;
4821
- }
4822
-
4823
- /* Save footer */
4824
- .mint-experiment-popover__footer {
4825
- padding: 0.75rem 1rem;
4826
- }
4827
- .mint-experiment-popover__save-btn {
4828
- display: flex;
4829
- align-items: center;
4830
- justify-content: center;
4831
- gap: 0.375rem;
4832
- width: 100%;
4833
- height: 2.125rem;
4834
- padding: 0 0.75rem;
4835
- border: none;
4836
- background-color: var(--color-primary);
4837
- background-image: linear-gradient(
4838
- to bottom,
4839
- rgba(255, 255, 255, 0.12),
4840
- rgba(255, 255, 255, 0)
4841
- );
4842
- border-radius: var(--radius-md);
4843
- color: white;
4844
- font-size: 0.8125rem;
4845
- font-weight: 500;
4846
- font-family: inherit;
4847
- cursor: pointer;
4848
- transform: translateY(0);
4849
- transition:
4850
- background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
4851
- box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
4852
- opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
4853
- transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
4854
- background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
4855
- }
4856
- .mint-experiment-popover__save-btn:hover:not(:disabled) {
4857
- background-color: var(--color-primary-hover);
4858
- box-shadow: var(--shadow-sm);
4859
- transform: translateY(-1px);
4860
- }
4861
- .mint-experiment-popover__save-btn:active:not(:disabled) {
4862
- transform: translateY(0);
4863
- box-shadow: none;
4864
- background-image: none;
4865
- transition-duration: 0.05s;
4866
- }
4867
- .mint-experiment-popover__save-btn:disabled {
4868
- opacity: 0.45;
4869
- cursor: not-allowed;
4870
- background-image: none;
4871
- }
4872
- .mint-experiment-popover__save-btn--loading {
4873
- opacity: 0.8;
4874
- pointer-events: none;
4875
- }
4876
- .mint-experiment-popover__save-btn--success {
4877
- background-color: var(--color-primary-soft);
4878
- background-image: none;
4879
- border: 1px solid rgba(16, 185, 129, 0.3);
4880
- color: var(--mint-success, #10b981);
4881
- }
4882
- .mint-experiment-popover__save-btn--success:hover {
4883
- background-color: rgba(16, 185, 129, 0.18);
4884
- }
4885
- .mint-experiment-popover__save-icon,
4886
- .mint-experiment-popover__check-icon {
4887
- width: 1rem;
4888
- height: 1rem;
4889
- }
4890
- .mint-experiment-popover__save-hint {
4891
- font-size: 0.6875rem;
4892
- color: var(--text-muted);
4893
- text-align: center;
4894
- margin-top: 0.5rem;
4895
- }
4896
- .mint-experiment-popover__spinner {
4897
- width: 0.875rem;
4898
- height: 0.875rem;
4899
- border: 2px solid rgba(255, 255, 255, 0.3);
4900
- border-top-color: white;
4901
- border-radius: 50%;
4902
- animation: mint-experiment-popover-spin 0.6s linear infinite;
4903
- }
4904
4815
  @keyframes mint-experiment-popover-spin {
4905
4816
  to { transform: rotate(360deg);
4906
4817
  }
@@ -4916,8 +4827,7 @@ to { transform: rotate(360deg);
4916
4827
  @media (prefers-reduced-motion: reduce) {
4917
4828
  .mint-experiment-popover__trigger,
4918
4829
  .mint-experiment-popover__save-trigger,
4919
- .mint-experiment-popover__select-btn,
4920
- .mint-experiment-popover__save-btn {
4830
+ .mint-experiment-popover__select-btn {
4921
4831
  transition-property: background-color, border-color, box-shadow, color, opacity;
4922
4832
  transition-duration: 0.15s;
4923
4833
  transition-timing-function: ease;
@@ -4929,9 +4839,7 @@ to { transform: rotate(360deg);
4929
4839
  .mint-experiment-popover__save-trigger:hover,
4930
4840
  .mint-experiment-popover__save-trigger:active,
4931
4841
  .mint-experiment-popover__select-btn:hover,
4932
- .mint-experiment-popover__select-btn:active,
4933
- .mint-experiment-popover__save-btn:hover,
4934
- .mint-experiment-popover__save-btn:active {
4842
+ .mint-experiment-popover__select-btn:active {
4935
4843
  transform: none;
4936
4844
  }
4937
4845
  .mint-experiment-popover__trigger-chevron {
@@ -4994,17 +4902,10 @@ to { transform: rotate(360deg);
4994
4902
  gap: 0.5rem;
4995
4903
  flex-wrap: wrap;
4996
4904
  }
4997
-
4998
- /* Base filters row */
4999
- .mint-experiment-selector__filters {
5000
- display: flex;
5001
- gap: 0.5rem;
5002
- }
5003
4905
  .mint-experiment-selector__search {
5004
4906
  flex: 1;
5005
4907
  min-width: 10rem;
5006
4908
  }
5007
- .mint-experiment-selector__status-filter,
5008
4909
  .mint-experiment-selector__filter-select {
5009
4910
  flex-shrink: 0;
5010
4911
  width: 10rem;
@@ -7348,6 +7249,8 @@ to {
7348
7249
  }
7349
7250
  .mint-plugin-icon--md { width: 2rem; height: 2rem;
7350
7251
  }
7252
+ .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem;
7253
+ }
7351
7254
  .mint-plugin-icon--lg { width: 3rem; height: 3rem; border-radius: 0.75rem;
7352
7255
  }
7353
7256
 
@@ -7368,6 +7271,9 @@ to {
7368
7271
  .mint-plugin-icon--md .mint-plugin-icon__svg,
7369
7272
  .mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem; height: 1.125rem;
7370
7273
  }
7274
+ .mint-plugin-icon--topbar .mint-plugin-icon__svg,
7275
+ .mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem;
7276
+ }
7371
7277
  .mint-plugin-icon--lg .mint-plugin-icon__svg,
7372
7278
  .mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem; height: 1.5rem;
7373
7279
  }
@@ -7685,7 +7591,7 @@ to {
7685
7591
  }
7686
7592
 
7687
7593
  /* Pill trigger — avatar circle + username text on the right. Matches the
7688
- legacy `.mint-topbar__profile-btn` convention (GitHub/Linear-style). */
7594
+ shared TopBar account-trigger convention (GitHub/Linear-style). */
7689
7595
  .mint-avatar-menu__trigger {
7690
7596
  display: inline-flex;
7691
7597
  align-items: center;
@@ -7716,6 +7622,7 @@ to {
7716
7622
  align-items: center;
7717
7623
  justify-content: center;
7718
7624
  font-size: 0.75rem;
7625
+ line-height: 1;
7719
7626
  font-weight: 500;
7720
7627
  color: white;
7721
7628
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
@@ -7861,18 +7768,6 @@ to {
7861
7768
  border-color: var(--color-primary);
7862
7769
  box-shadow: 0 0 0 3px var(--color-primary-soft);
7863
7770
  }
7864
- .mint-plugin-switcher__swatch {
7865
- width: 1.5rem;
7866
- height: 1.5rem;
7867
- border-radius: 0.375rem;
7868
- color: white;
7869
- display: grid;
7870
- place-items: center;
7871
- font-family: var(--font-mono, ui-monospace, monospace);
7872
- font-weight: 700;
7873
- font-size: 0.65625rem;
7874
- flex-shrink: 0;
7875
- }
7876
7771
  .mint-plugin-switcher__label {
7877
7772
  font-weight: 600;
7878
7773
  color: var(--text-primary);
@@ -8024,12 +7919,20 @@ to {
8024
7919
  position: relative;
8025
7920
  }
8026
7921
 
8027
- /* New: brand container (flex-shrink: 0) */
7922
+ /* Brand container */
8028
7923
  .mint-topbar__brand {
8029
7924
  display: flex;
8030
7925
  align-items: center;
8031
7926
  flex-shrink: 0;
8032
7927
  }
7928
+ .mint-topbar__identity {
7929
+ width: 2.25rem;
7930
+ height: 2.25rem;
7931
+ display: inline-flex;
7932
+ align-items: center;
7933
+ justify-content: center;
7934
+ flex-shrink: 0;
7935
+ }
8033
7936
 
8034
7937
  /* Centered section — absolute so asymmetric left/right weight never shifts the
8035
7938
  pill-nav off the topbar midline. Pointer-events: none lets the pill-nav
@@ -8064,8 +7967,8 @@ to {
8064
7967
  gap: 0.5rem;
8065
7968
  }
8066
7969
  .mint-topbar__logo-icon {
8067
- width: 2rem;
8068
- height: 2rem;
7970
+ width: 2.25rem;
7971
+ height: 2.25rem;
8069
7972
  background-color: var(--color-primary);
8070
7973
  border-radius: var(--radius-md);
8071
7974
  display: flex;
@@ -8077,11 +7980,6 @@ to {
8077
7980
  font-weight: 700;
8078
7981
  font-size: 0.875rem;
8079
7982
  }
8080
- .mint-topbar__logo-svg {
8081
- width: 1.125rem;
8082
- height: 1.125rem;
8083
- color: white;
8084
- }
8085
7983
  .mint-topbar__title-only {
8086
7984
  font-weight: 600;
8087
7985
  color: var(--text-primary);
@@ -8127,7 +8025,7 @@ to {
8127
8025
  line-height: 1.25;
8128
8026
  }
8129
8027
 
8130
- /* New: generic icon button (notifications, etc.) */
8028
+ /* Generic icon button (notifications, etc.) */
8131
8029
  .mint-topbar__icon-btn {
8132
8030
  position: relative;
8133
8031
  display: inline-flex;
@@ -8211,46 +8109,6 @@ to {
8211
8109
  height: 1.25rem;
8212
8110
  }
8213
8111
 
8214
- /* Profile button */
8215
- .mint-topbar__profile-btn {
8216
- display: inline-flex;
8217
- align-items: center;
8218
- gap: 0.5rem;
8219
- padding: 0.25rem 0.75rem 0.25rem 0.25rem;
8220
- border: none;
8221
- background: transparent;
8222
- border-radius: var(--radius);
8223
- cursor: pointer;
8224
- transition: background-color 0.15s ease;
8225
- }
8226
- .mint-topbar__profile-btn:hover {
8227
- background: var(--bg-hover);
8228
- }
8229
- .mint-topbar__profile-avatar {
8230
- width: 1.75rem;
8231
- height: 1.75rem;
8232
- border-radius: 9999px;
8233
- display: flex;
8234
- align-items: center;
8235
- justify-content: center;
8236
- font-size: 0.75rem;
8237
- font-weight: 500;
8238
- color: white;
8239
- background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
8240
- flex-shrink: 0;
8241
- }
8242
- .mint-topbar__profile-name {
8243
- font-size: 0.875rem;
8244
- font-weight: 500;
8245
- color: var(--text-primary);
8246
- white-space: nowrap;
8247
- }
8248
- @media (max-width: 640px) {
8249
- .mint-topbar__profile-name {
8250
- display: none;
8251
- }
8252
- }
8253
-
8254
8112
  /* Standalone mode badge */
8255
8113
  .mint-topbar__standalone-badge {
8256
8114
  display: inline-flex;
@@ -10091,9 +9949,6 @@ to {
10091
9949
  color: var(--text-muted);
10092
9950
  margin-bottom: 0.375rem;
10093
9951
  }
10094
- .mint-dose-calculator__mw-input {
10095
- width: 100%;
10096
- }
10097
9952
  /* ExperimentTimeline Component Styles */
10098
9953
  .mint-timeline {
10099
9954
  display: flex;
@@ -10869,7 +10724,7 @@ to {
10869
10724
  box-shadow: 0 0 0 2px #6366f1;
10870
10725
  background-color: rgba(99, 102, 241, 0.2);
10871
10726
  }
10872
- .mint-well-plate__well--hovered:not(.mint-well-plate__well--readonly) {
10727
+ .mint-well-plate__well--hovered {
10873
10728
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
10874
10729
  }
10875
10730
  .mint-well-plate__well--drag-source {
@@ -10915,28 +10770,6 @@ to {
10915
10770
  color: var(--text-primary);
10916
10771
  }
10917
10772
 
10918
- /* Sample type colors */
10919
- .mint-well-plate__well--sample {
10920
- background-color: rgba(16, 185, 129, 0.15);
10921
- border: 1px solid rgba(16, 185, 129, 0.4);
10922
- }
10923
- .mint-well-plate__well--control {
10924
- background-color: rgba(59, 130, 246, 0.15);
10925
- border: 1px solid rgba(59, 130, 246, 0.4);
10926
- }
10927
- .mint-well-plate__well--blank {
10928
- background-color: rgba(249, 115, 22, 0.15);
10929
- border: 1px solid rgba(249, 115, 22, 0.4);
10930
- }
10931
- .mint-well-plate__well--qc {
10932
- background-color: rgba(139, 92, 246, 0.15);
10933
- border: 1px solid rgba(139, 92, 246, 0.4);
10934
- }
10935
- .mint-well-plate__well--iqc {
10936
- background-color: rgba(236, 72, 153, 0.15);
10937
- border: 1px solid rgba(236, 72, 153, 0.4);
10938
- }
10939
-
10940
10773
  /* Condition header - drug label row */
10941
10774
  .mint-well-plate__condition-label {
10942
10775
  font-weight: 600;
@@ -12316,6 +12149,30 @@ to {
12316
12149
  .fr-switch { grid-column: 2; grid-row: 1 / 3; align-self: center;
12317
12150
  }
12318
12151
 
12152
+ /* Layer-order controls: which hierarchy layer this field forms, plus reorder. */
12153
+ .sg-field__order {
12154
+ grid-column: 1 / 3;
12155
+ display: flex; align-items: center; gap: 0.25rem;
12156
+ }
12157
+ .sg-field__layer {
12158
+ font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
12159
+ letter-spacing: 0.04em; color: var(--color-primary);
12160
+ padding: 0.0625rem 0.375rem; border-radius: 9999px;
12161
+ background: var(--color-primary-soft);
12162
+ margin-right: auto;
12163
+ }
12164
+ .sg-field__order-btn {
12165
+ display: inline-flex; align-items: center; justify-content: center;
12166
+ width: 1.25rem; height: 1.25rem; padding: 0;
12167
+ border: 1px solid var(--border-color); border-radius: 0.375rem;
12168
+ background: var(--bg-primary); color: var(--text-secondary);
12169
+ cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
12170
+ }
12171
+ .sg-field__order-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary);
12172
+ }
12173
+ .sg-field__order-btn:disabled { opacity: 0.4; cursor: default;
12174
+ }
12175
+
12319
12176
  /* Replicate-on: the field card itself warns instead of silently shattering. */
12320
12177
  .fr-field--warn.sg-field--on {
12321
12178
  border-color: var(--mint-warning-border);
@@ -13080,6 +12937,30 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
13080
12937
  .fr-switch { grid-column: 2; grid-row: 1 / 3; align-self: center;
13081
12938
  }
13082
12939
 
12940
+ /* Layer-order controls: which hierarchy layer this field forms, plus reorder. */
12941
+ .sg-field__order {
12942
+ grid-column: 1 / 3;
12943
+ display: flex; align-items: center; gap: 0.25rem;
12944
+ }
12945
+ .sg-field__layer {
12946
+ font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
12947
+ letter-spacing: 0.04em; color: var(--color-primary);
12948
+ padding: 0.0625rem 0.375rem; border-radius: 9999px;
12949
+ background: var(--color-primary-soft);
12950
+ margin-right: auto;
12951
+ }
12952
+ .sg-field__order-btn {
12953
+ display: inline-flex; align-items: center; justify-content: center;
12954
+ width: 1.25rem; height: 1.25rem; padding: 0;
12955
+ border: 1px solid var(--border-color); border-radius: 0.375rem;
12956
+ background: var(--bg-primary); color: var(--text-secondary);
12957
+ cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
12958
+ }
12959
+ .sg-field__order-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary);
12960
+ }
12961
+ .sg-field__order-btn:disabled { opacity: 0.4; cursor: default;
12962
+ }
12963
+
13083
12964
  /* Replicate-on: the field card itself warns instead of silently shattering. */
13084
12965
  .fr-field--warn.sg-field--on {
13085
12966
  border-color: var(--mint-warning-border);
@@ -13844,6 +13725,30 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
13844
13725
  .fr-switch { grid-column: 2; grid-row: 1 / 3; align-self: center;
13845
13726
  }
13846
13727
 
13728
+ /* Layer-order controls: which hierarchy layer this field forms, plus reorder. */
13729
+ .sg-field__order {
13730
+ grid-column: 1 / 3;
13731
+ display: flex; align-items: center; gap: 0.25rem;
13732
+ }
13733
+ .sg-field__layer {
13734
+ font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
13735
+ letter-spacing: 0.04em; color: var(--color-primary);
13736
+ padding: 0.0625rem 0.375rem; border-radius: 9999px;
13737
+ background: var(--color-primary-soft);
13738
+ margin-right: auto;
13739
+ }
13740
+ .sg-field__order-btn {
13741
+ display: inline-flex; align-items: center; justify-content: center;
13742
+ width: 1.25rem; height: 1.25rem; padding: 0;
13743
+ border: 1px solid var(--border-color); border-radius: 0.375rem;
13744
+ background: var(--bg-primary); color: var(--text-secondary);
13745
+ cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
13746
+ }
13747
+ .sg-field__order-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary);
13748
+ }
13749
+ .sg-field__order-btn:disabled { opacity: 0.4; cursor: default;
13750
+ }
13751
+
13847
13752
  /* Replicate-on: the field card itself warns instead of silently shattering. */
13848
13753
  .fr-field--warn.sg-field--on {
13849
13754
  border-color: var(--mint-warning-border);
@@ -14380,77 +14285,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
14380
14285
  white-space: nowrap;
14381
14286
  }
14382
14287
 
14383
- /* Level Popover */
14384
- .mint-sample-selector__popover {
14385
- position: absolute;
14386
- left: 0;
14387
- right: 0;
14388
- top: 100%;
14389
- margin-top: 0.5rem;
14390
- background-color: var(--bg-primary);
14391
- border: 1px solid var(--border-color);
14392
- border-radius: var(--radius-lg);
14393
- box-shadow: var(--shadow-lg);
14394
- overflow: hidden;
14395
- z-index: 50;
14396
- }
14397
- .mint-sample-selector__popover-header {
14398
- padding: 0.5rem 0.75rem;
14399
- font-size: 0.6875rem;
14400
- font-weight: 600;
14401
- text-transform: uppercase;
14402
- letter-spacing: 0.05em;
14403
- color: var(--text-secondary);
14404
- background-color: var(--bg-secondary);
14405
- }
14406
- .mint-sample-selector__popover-body {
14407
- padding: 0.25rem 0;
14408
- }
14409
- .mint-sample-selector__level-btn {
14410
- width: 100%;
14411
- padding: 0.625rem 0.75rem;
14412
- text-align: left;
14413
- background: none;
14414
- border: none;
14415
- cursor: pointer;
14416
- transition: background-color 0.15s ease;
14417
- }
14418
- .mint-sample-selector__level-btn:hover {
14419
- background-color: var(--bg-hover);
14420
- }
14421
- .mint-sample-selector__level-info {
14422
- display: flex;
14423
- flex-direction: column;
14424
- gap: 0.125rem;
14425
- }
14426
- .mint-sample-selector__level-title {
14427
- display: flex;
14428
- align-items: center;
14429
- gap: 0.5rem;
14430
- font-size: 0.875rem;
14431
- font-weight: 500;
14432
- color: var(--text-primary);
14433
- }
14434
- .mint-sample-selector__level-badge {
14435
- font-size: 0.6875rem;
14436
- padding: 0.125rem 0.375rem;
14437
- background-color: var(--color-primary);
14438
- color: white;
14439
- border-radius: 9999px;
14440
- font-variant-numeric: tabular-nums;
14441
- }
14442
- .mint-sample-selector__level-desc {
14443
- font-size: 0.75rem;
14444
- color: var(--text-muted);
14445
- }
14446
- .mint-sample-selector__level-example {
14447
- margin-left: 0.25rem;
14448
- }
14449
- .mint-sample-selector__level-example code {
14450
- font-family: 'Fira Code', monospace;
14451
- font-size: 0.6875rem;
14452
- }
14453
-
14454
14288
  /* Grouped View */
14455
14289
  .mint-sample-selector__grouped {
14456
14290
  display: flex;
@@ -14907,19 +14741,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
14907
14741
  overflow: hidden;
14908
14742
  text-overflow: ellipsis;
14909
14743
  }
14910
-
14911
- /* Transitions */
14912
- .mint-popover-enter-active {
14913
- transition: all 0.15s ease-out;
14914
- }
14915
- .mint-popover-leave-active {
14916
- transition: all 0.1s ease-in;
14917
- }
14918
- .mint-popover-enter-from,
14919
- .mint-popover-leave-to {
14920
- opacity: 0;
14921
- transform: translateY(-0.25rem);
14922
- }
14923
14744
  .mint-collapse-enter-active {
14924
14745
  transition: all 0.2s ease-out;
14925
14746
  overflow: hidden;
@@ -15147,12 +14968,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
15147
14968
  background-color: var(--color-primary);
15148
14969
  color: white;
15149
14970
  }
15150
-
15151
- /* Grid lines / slots */
15152
- .mint-schedule__grid-line {
15153
- height: var(--slot-height, 2.5rem);
15154
- border-bottom: 1px solid var(--border-light, var(--border-color));
15155
- }
15156
14971
  .mint-schedule__slot {
15157
14972
  height: var(--slot-height, 2.5rem);
15158
14973
  border-bottom: 1px solid var(--border-light, var(--border-color));
@@ -16546,10 +16361,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
16546
16361
  width: 0;
16547
16362
  min-width: 0;
16548
16363
  }
16549
- .mint-reagent-editor__row {
16550
- display: flex;
16551
- gap: 0.75rem;
16552
- }
16553
16364
  .mint-reagent-editor__position-row {
16554
16365
  display: flex;
16555
16366
  gap: 0.625rem;
@@ -16913,9 +16724,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
16913
16724
  .mint-sample-tree__node-header:hover {
16914
16725
  background-color: var(--bg-hover);
16915
16726
  }
16916
- .mint-sample-tree__node--selected > .mint-sample-tree__node-header {
16917
- background-color: rgba(59, 130, 246, 0.1);
16918
- }
16919
16727
  .mint-sample-tree--sm .mint-sample-tree__node-header {
16920
16728
  padding: 0.25rem 0.375rem;
16921
16729
  gap: 0.25rem;
@@ -17336,11 +17144,6 @@ to {
17336
17144
  font-size: 0.75rem;
17337
17145
  color: var(--mint-error);
17338
17146
  }
17339
- .mint-protocol-editor__field-row {
17340
- display: grid;
17341
- grid-template-columns: repeat(2, 1fr);
17342
- gap: 0.75rem;
17343
- }
17344
17147
 
17345
17148
  /* Input styles */
17346
17149
  .mint-protocol-editor__input {
@@ -21794,12 +21597,20 @@ code, pre {
21794
21597
  min-height: 2.375rem;
21795
21598
  position: relative;
21796
21599
  }
21797
- /* New: brand container (flex-shrink: 0) */
21600
+ /* Brand container */
21798
21601
  .mint-topbar__brand {
21799
21602
  display: flex;
21800
21603
  align-items: center;
21801
21604
  flex-shrink: 0;
21802
21605
  }
21606
+ .mint-topbar__identity {
21607
+ width: 2.25rem;
21608
+ height: 2.25rem;
21609
+ display: inline-flex;
21610
+ align-items: center;
21611
+ justify-content: center;
21612
+ flex-shrink: 0;
21613
+ }
21803
21614
  /* Centered section — absolute so asymmetric left/right weight never shifts the
21804
21615
  pill-nav off the topbar midline. Pointer-events: none lets the pill-nav
21805
21616
  overlay the background while remaining interactive via its own children. */
@@ -21832,8 +21643,8 @@ code, pre {
21832
21643
  gap: 0.5rem;
21833
21644
  }
21834
21645
  .mint-topbar__logo-icon {
21835
- width: 2rem;
21836
- height: 2rem;
21646
+ width: 2.25rem;
21647
+ height: 2.25rem;
21837
21648
  background-color: var(--color-primary);
21838
21649
  border-radius: var(--radius-md);
21839
21650
  display: flex;
@@ -21845,11 +21656,6 @@ code, pre {
21845
21656
  font-weight: 700;
21846
21657
  font-size: 0.875rem;
21847
21658
  }
21848
- .mint-topbar__logo-svg {
21849
- width: 1.125rem;
21850
- height: 1.125rem;
21851
- color: white;
21852
- }
21853
21659
  .mint-topbar__title-only {
21854
21660
  font-weight: 600;
21855
21661
  color: var(--text-primary);
@@ -21892,7 +21698,7 @@ code, pre {
21892
21698
  color: var(--text-secondary);
21893
21699
  line-height: 1.25;
21894
21700
  }
21895
- /* New: generic icon button (notifications, etc.) */
21701
+ /* Generic icon button (notifications, etc.) */
21896
21702
  .mint-topbar__icon-btn {
21897
21703
  position: relative;
21898
21704
  display: inline-flex;
@@ -21973,45 +21779,6 @@ code, pre {
21973
21779
  width: 1.25rem;
21974
21780
  height: 1.25rem;
21975
21781
  }
21976
- /* Profile button */
21977
- .mint-topbar__profile-btn {
21978
- display: inline-flex;
21979
- align-items: center;
21980
- gap: 0.5rem;
21981
- padding: 0.25rem 0.75rem 0.25rem 0.25rem;
21982
- border: none;
21983
- background: transparent;
21984
- border-radius: var(--radius);
21985
- cursor: pointer;
21986
- transition: background-color 0.15s ease;
21987
- }
21988
- .mint-topbar__profile-btn:hover {
21989
- background: var(--bg-hover);
21990
- }
21991
- .mint-topbar__profile-avatar {
21992
- width: 1.75rem;
21993
- height: 1.75rem;
21994
- border-radius: 9999px;
21995
- display: flex;
21996
- align-items: center;
21997
- justify-content: center;
21998
- font-size: 0.75rem;
21999
- font-weight: 500;
22000
- color: white;
22001
- background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
22002
- flex-shrink: 0;
22003
- }
22004
- .mint-topbar__profile-name {
22005
- font-size: 0.875rem;
22006
- font-weight: 500;
22007
- color: var(--text-primary);
22008
- white-space: nowrap;
22009
- }
22010
- @media (max-width: 640px) {
22011
- .mint-topbar__profile-name {
22012
- display: none;
22013
- }
22014
- }
22015
21782
  /* Standalone mode badge */
22016
21783
  .mint-topbar__standalone-badge {
22017
21784
  display: inline-flex;
@@ -27229,7 +26996,7 @@ html.dark .mint-toast__item .mint-toast__message {
27229
26996
  box-shadow: 0 0 0 2px #6366f1;
27230
26997
  background-color: rgba(99, 102, 241, 0.2);
27231
26998
  }
27232
- .mint-well-plate__well--hovered:not(.mint-well-plate__well--readonly) {
26999
+ .mint-well-plate__well--hovered {
27233
27000
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
27234
27001
  }
27235
27002
  .mint-well-plate__well--drag-source {
@@ -27270,27 +27037,6 @@ html.dark .mint-toast__item .mint-toast__message {
27270
27037
  pointer-events: none;
27271
27038
  color: var(--text-primary);
27272
27039
  }
27273
- /* Sample type colors */
27274
- .mint-well-plate__well--sample {
27275
- background-color: rgba(16, 185, 129, 0.15);
27276
- border: 1px solid rgba(16, 185, 129, 0.4);
27277
- }
27278
- .mint-well-plate__well--control {
27279
- background-color: rgba(59, 130, 246, 0.15);
27280
- border: 1px solid rgba(59, 130, 246, 0.4);
27281
- }
27282
- .mint-well-plate__well--blank {
27283
- background-color: rgba(249, 115, 22, 0.15);
27284
- border: 1px solid rgba(249, 115, 22, 0.4);
27285
- }
27286
- .mint-well-plate__well--qc {
27287
- background-color: rgba(139, 92, 246, 0.15);
27288
- border: 1px solid rgba(139, 92, 246, 0.4);
27289
- }
27290
- .mint-well-plate__well--iqc {
27291
- background-color: rgba(236, 72, 153, 0.15);
27292
- border: 1px solid rgba(236, 72, 153, 0.4);
27293
- }
27294
27040
  /* Condition header - drug label row */
27295
27041
  .mint-well-plate__condition-label {
27296
27042
  font-weight: 600;
@@ -27496,76 +27242,6 @@ html.dark .mint-toast__item .mint-toast__message {
27496
27242
  text-overflow: ellipsis;
27497
27243
  white-space: nowrap;
27498
27244
  }
27499
- /* Level Popover */
27500
- .mint-sample-selector__popover {
27501
- position: absolute;
27502
- left: 0;
27503
- right: 0;
27504
- top: 100%;
27505
- margin-top: 0.5rem;
27506
- background-color: var(--bg-primary);
27507
- border: 1px solid var(--border-color);
27508
- border-radius: var(--radius-lg);
27509
- box-shadow: var(--shadow-lg);
27510
- overflow: hidden;
27511
- z-index: 50;
27512
- }
27513
- .mint-sample-selector__popover-header {
27514
- padding: 0.5rem 0.75rem;
27515
- font-size: 0.6875rem;
27516
- font-weight: 600;
27517
- text-transform: uppercase;
27518
- letter-spacing: 0.05em;
27519
- color: var(--text-secondary);
27520
- background-color: var(--bg-secondary);
27521
- }
27522
- .mint-sample-selector__popover-body {
27523
- padding: 0.25rem 0;
27524
- }
27525
- .mint-sample-selector__level-btn {
27526
- width: 100%;
27527
- padding: 0.625rem 0.75rem;
27528
- text-align: left;
27529
- background: none;
27530
- border: none;
27531
- cursor: pointer;
27532
- transition: background-color 0.15s ease;
27533
- }
27534
- .mint-sample-selector__level-btn:hover {
27535
- background-color: var(--bg-hover);
27536
- }
27537
- .mint-sample-selector__level-info {
27538
- display: flex;
27539
- flex-direction: column;
27540
- gap: 0.125rem;
27541
- }
27542
- .mint-sample-selector__level-title {
27543
- display: flex;
27544
- align-items: center;
27545
- gap: 0.5rem;
27546
- font-size: 0.875rem;
27547
- font-weight: 500;
27548
- color: var(--text-primary);
27549
- }
27550
- .mint-sample-selector__level-badge {
27551
- font-size: 0.6875rem;
27552
- padding: 0.125rem 0.375rem;
27553
- background-color: var(--color-primary);
27554
- color: white;
27555
- border-radius: 9999px;
27556
- font-variant-numeric: tabular-nums;
27557
- }
27558
- .mint-sample-selector__level-desc {
27559
- font-size: 0.75rem;
27560
- color: var(--text-muted);
27561
- }
27562
- .mint-sample-selector__level-example {
27563
- margin-left: 0.25rem;
27564
- }
27565
- .mint-sample-selector__level-example code {
27566
- font-family: 'Fira Code', monospace;
27567
- font-size: 0.6875rem;
27568
- }
27569
27245
  /* Grouped View */
27570
27246
  .mint-sample-selector__grouped {
27571
27247
  display: flex;
@@ -28006,18 +27682,6 @@ html.dark .mint-toast__item .mint-toast__message {
28006
27682
  overflow: hidden;
28007
27683
  text-overflow: ellipsis;
28008
27684
  }
28009
- /* Transitions */
28010
- .mint-popover-enter-active {
28011
- transition: all 0.15s ease-out;
28012
- }
28013
- .mint-popover-leave-active {
28014
- transition: all 0.1s ease-in;
28015
- }
28016
- .mint-popover-enter-from,
28017
- .mint-popover-leave-to {
28018
- opacity: 0;
28019
- transform: translateY(-0.25rem);
28020
- }
28021
27685
  .mint-collapse-enter-active {
28022
27686
  transition: all 0.2s ease-out;
28023
27687
  overflow: hidden;
@@ -28360,6 +28024,27 @@ html.dark .mint-toast__item .mint-toast__message {
28360
28024
  .fr .sg-field__role { margin-left: 0; }
28361
28025
  .fr .sg-field__vals { grid-column: 1 / 2; grid-row: 2; }
28362
28026
  .fr-switch { grid-column: 2; grid-row: 1 / 3; align-self: center; }
28027
+ /* Layer-order controls: which hierarchy layer this field forms, plus reorder. */
28028
+ .sg-field__order {
28029
+ grid-column: 1 / 3;
28030
+ display: flex; align-items: center; gap: 0.25rem;
28031
+ }
28032
+ .sg-field__layer {
28033
+ font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
28034
+ letter-spacing: 0.04em; color: var(--color-primary);
28035
+ padding: 0.0625rem 0.375rem; border-radius: 9999px;
28036
+ background: var(--color-primary-soft);
28037
+ margin-right: auto;
28038
+ }
28039
+ .sg-field__order-btn {
28040
+ display: inline-flex; align-items: center; justify-content: center;
28041
+ width: 1.25rem; height: 1.25rem; padding: 0;
28042
+ border: 1px solid var(--border-color); border-radius: 0.375rem;
28043
+ background: var(--bg-primary); color: var(--text-secondary);
28044
+ cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
28045
+ }
28046
+ .sg-field__order-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); }
28047
+ .sg-field__order-btn:disabled { opacity: 0.4; cursor: default; }
28363
28048
  /* Replicate-on: the field card itself warns instead of silently shattering. */
28364
28049
  .fr-field--warn.sg-field--on {
28365
28050
  border-color: var(--mint-warning-border);
@@ -29343,9 +29028,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
29343
29028
  color: var(--text-muted);
29344
29029
  margin-bottom: 0.375rem;
29345
29030
  }
29346
- .mint-dose-calculator__mw-input {
29347
- width: 100%;
29348
- }
29349
29031
  /* ReagentList Component Styles */
29350
29032
  .mint-reagent-list {
29351
29033
  border-radius: var(--radius-md);
@@ -29715,9 +29397,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
29715
29397
  .mint-sample-tree__node-header:hover {
29716
29398
  background-color: var(--bg-hover);
29717
29399
  }
29718
- .mint-sample-tree__node--selected > .mint-sample-tree__node-header {
29719
- background-color: rgba(59, 130, 246, 0.1);
29720
- }
29721
29400
  .mint-sample-tree--sm .mint-sample-tree__node-header {
29722
29401
  padding: 0.25rem 0.375rem;
29723
29402
  gap: 0.25rem;
@@ -30123,11 +29802,6 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
30123
29802
  font-size: 0.75rem;
30124
29803
  color: var(--mint-error);
30125
29804
  }
30126
- .mint-protocol-editor__field-row {
30127
- display: grid;
30128
- grid-template-columns: repeat(2, 1fr);
30129
- gap: 0.75rem;
30130
- }
30131
29805
  /* Input styles */
30132
29806
  .mint-protocol-editor__input {
30133
29807
  width: 100%;
@@ -34506,11 +34180,6 @@ html.dark .mint-settings-modal__option-btn--active {
34506
34180
  background-color: var(--color-primary);
34507
34181
  color: white;
34508
34182
  }
34509
- /* Grid lines / slots */
34510
- .mint-schedule__grid-line {
34511
- height: var(--slot-height, 2.5rem);
34512
- border-bottom: 1px solid var(--border-light, var(--border-color));
34513
- }
34514
34183
  .mint-schedule__slot {
34515
34184
  height: var(--slot-height, 2.5rem);
34516
34185
  border-bottom: 1px solid var(--border-light, var(--border-color));
@@ -35276,16 +34945,10 @@ html.dark .mint-settings-modal__option-btn--active {
35276
34945
  gap: 0.5rem;
35277
34946
  flex-wrap: wrap;
35278
34947
  }
35279
- /* Base filters row */
35280
- .mint-experiment-selector__filters {
35281
- display: flex;
35282
- gap: 0.5rem;
35283
- }
35284
34948
  .mint-experiment-selector__search {
35285
34949
  flex: 1;
35286
34950
  min-width: 10rem;
35287
34951
  }
35288
- .mint-experiment-selector__status-filter,
35289
34952
  .mint-experiment-selector__filter-select {
35290
34953
  flex-shrink: 0;
35291
34954
  width: 10rem;
@@ -36227,93 +35890,6 @@ html.dark .mint-experiment-selector__filters-toggle--active {
36227
35890
  color: var(--mint-error);
36228
35891
  background: rgba(239, 68, 68, 0.08);
36229
35892
  }
36230
- /* Divider */
36231
- .mint-experiment-popover__divider {
36232
- height: 1px;
36233
- background: var(--border-light);
36234
- margin: 0;
36235
- }
36236
- /* Save footer */
36237
- .mint-experiment-popover__footer {
36238
- padding: 0.75rem 1rem;
36239
- }
36240
- .mint-experiment-popover__save-btn {
36241
- display: flex;
36242
- align-items: center;
36243
- justify-content: center;
36244
- gap: 0.375rem;
36245
- width: 100%;
36246
- height: 2.125rem;
36247
- padding: 0 0.75rem;
36248
- border: none;
36249
- background-color: var(--color-primary);
36250
- background-image: linear-gradient(
36251
- to bottom,
36252
- rgba(255, 255, 255, 0.12),
36253
- rgba(255, 255, 255, 0)
36254
- );
36255
- border-radius: var(--radius-md);
36256
- color: white;
36257
- font-size: 0.8125rem;
36258
- font-weight: 500;
36259
- font-family: inherit;
36260
- cursor: pointer;
36261
- transform: translateY(0);
36262
- transition:
36263
- background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
36264
- box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
36265
- opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
36266
- transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
36267
- background-image 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
36268
- }
36269
- .mint-experiment-popover__save-btn:hover:not(:disabled) {
36270
- background-color: var(--color-primary-hover);
36271
- box-shadow: var(--shadow-sm);
36272
- transform: translateY(-1px);
36273
- }
36274
- .mint-experiment-popover__save-btn:active:not(:disabled) {
36275
- transform: translateY(0);
36276
- box-shadow: none;
36277
- background-image: none;
36278
- transition-duration: 0.05s;
36279
- }
36280
- .mint-experiment-popover__save-btn:disabled {
36281
- opacity: 0.45;
36282
- cursor: not-allowed;
36283
- background-image: none;
36284
- }
36285
- .mint-experiment-popover__save-btn--loading {
36286
- opacity: 0.8;
36287
- pointer-events: none;
36288
- }
36289
- .mint-experiment-popover__save-btn--success {
36290
- background-color: var(--color-primary-soft);
36291
- background-image: none;
36292
- border: 1px solid rgba(16, 185, 129, 0.3);
36293
- color: var(--mint-success, #10b981);
36294
- }
36295
- .mint-experiment-popover__save-btn--success:hover {
36296
- background-color: rgba(16, 185, 129, 0.18);
36297
- }
36298
- .mint-experiment-popover__save-icon,
36299
- .mint-experiment-popover__check-icon {
36300
- width: 1rem;
36301
- height: 1rem;
36302
- }
36303
- .mint-experiment-popover__save-hint {
36304
- font-size: 0.6875rem;
36305
- color: var(--text-muted);
36306
- text-align: center;
36307
- margin-top: 0.5rem;
36308
- }
36309
- .mint-experiment-popover__spinner {
36310
- width: 0.875rem;
36311
- height: 0.875rem;
36312
- border: 2px solid rgba(255, 255, 255, 0.3);
36313
- border-top-color: white;
36314
- border-radius: 50%;
36315
- animation: mint-experiment-popover-spin 0.6s linear infinite;
36316
- }
36317
35893
  @keyframes mint-experiment-popover-spin {
36318
35894
  to { transform: rotate(360deg); }
36319
35895
  }
@@ -36325,8 +35901,7 @@ html.dark .mint-experiment-selector__filters-toggle--active {
36325
35901
  @media (prefers-reduced-motion: reduce) {
36326
35902
  .mint-experiment-popover__trigger,
36327
35903
  .mint-experiment-popover__save-trigger,
36328
- .mint-experiment-popover__select-btn,
36329
- .mint-experiment-popover__save-btn {
35904
+ .mint-experiment-popover__select-btn {
36330
35905
  transition-property: background-color, border-color, box-shadow, color, opacity;
36331
35906
  transition-duration: 0.15s;
36332
35907
  transition-timing-function: ease;
@@ -36338,9 +35913,7 @@ html.dark .mint-experiment-selector__filters-toggle--active {
36338
35913
  .mint-experiment-popover__save-trigger:hover,
36339
35914
  .mint-experiment-popover__save-trigger:active,
36340
35915
  .mint-experiment-popover__select-btn:hover,
36341
- .mint-experiment-popover__select-btn:active,
36342
- .mint-experiment-popover__save-btn:hover,
36343
- .mint-experiment-popover__save-btn:active {
35916
+ .mint-experiment-popover__select-btn:active {
36344
35917
  transform: none;
36345
35918
  }
36346
35919
  .mint-experiment-popover__trigger-chevron {