@morscherlab/mint-sdk 1.0.38 → 1.0.41

package/dist/styles.css

@@ -2855,10 +2855,12 @@
 }
 .mint-button--secondary {
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
   border: 1px solid var(--border-color);
   /* Intentionally tighter + fainter than the colored variants —
-     secondary shouldn't "float" the way filled buttons do. */
+     secondary shouldn't "float" the way filled buttons do. Regular (400)
+     weight de-emphasizes the label relative to the medium-weight filled variants. */
+  font-weight: 400;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }
 .mint-button--secondary:hover:not(.mint-button--disabled) {
@@ -2894,7 +2896,9 @@
 }
 .mint-button--ghost {
   background-color: transparent;
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
+  /* Lowest-emphasis variant: regular (400) weight, matching secondary. */
+  font-weight: 400;
 }
 .mint-button--ghost:hover:not(.mint-button--disabled) {
   background-color: var(--bg-tertiary);
@@ -2904,6 +2908,9 @@
 .mint-button--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  /* Small buttons live in dense/secondary contexts — regular (400) weight
+     keeps the compact label from reading too heavy. Applies to all variants. */
+  font-weight: 400;
   min-height: var(--form-height-sm);
 }
 .mint-button--md {
@@ -3113,6 +3120,9 @@ to {
 }
 .mint-modal__close {
   flex-shrink: 0;
+  /* Always pin the close affordance to the right edge of the header, even when
+     there is no title/subtitle (no flex-1 header-text to push it over). */
+  margin-left: auto;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
@@ -10971,185 +10981,456 @@ to {
     transform: rotate(360deg);
 }
 }
-/* AutoGroupModal - Smart grouping wizard */
-.mint-auto-group {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-height: 0;
-  min-width: 0;
+/* SampleHierarchyTree Component Styles */
+.mint-sample-tree {
+  font-size: 0.875rem;
 }
-.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
-  overflow: hidden;
+.mint-sample-tree--sm {
+  font-size: 0.75rem;
 }
-.mint-auto-group:has(.mint-auto-group__manual-mode) {
-  height: min(34rem, calc(100vh - 12rem));
-  min-height: min(26rem, calc(100vh - 12rem));
-  overflow: hidden;
+.mint-sample-tree--lg {
+  font-size: 1rem;
 }
 
-/* --- Workflow tabs --- */
-.mint-auto-group__workflow-bar {
+/* Node */
+.mint-sample-tree__node {
+  user-select: none;
+}
+
+/* Node header (clickable row) */
+.mint-sample-tree__node-header {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.25rem;
-  min-width: 0;
-  padding-bottom: 0;
-  border-bottom: 1px solid var(--border-color);
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
-.mint-auto-group__workflow-bar--manual {
-  gap: 0.75rem;
+.mint-sample-tree__node-header:hover {
+  background-color: var(--bg-hover);
 }
-.mint-auto-group__workflow-tabs {
-  display: flex;
-  flex-shrink: 0;
+.mint-sample-tree__node--selected > .mint-sample-tree__node-header {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+.mint-sample-tree--sm .mint-sample-tree__node-header {
+  padding: 0.25rem 0.375rem;
   gap: 0.25rem;
 }
-.mint-auto-group__workflow-tab {
-  min-height: 1.75rem;
-  margin-bottom: -1px;
-  padding: 0.25rem 0.625rem;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
+.mint-sample-tree--lg .mint-sample-tree__node-header {
+  padding: 0.5rem 0.625rem;
+  gap: 0.5rem;
+}
+
+/* Toggle button */
+.mint-sample-tree__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
   background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
-  font-size: 0.75rem;
-  font-weight: 600;
   cursor: pointer;
-  line-height: 1.25;
-  transition: border-color 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
 }
-.mint-auto-group__workflow-tab:hover {
+.mint-sample-tree__toggle:hover {
   color: var(--text-primary);
+  background-color: var(--bg-tertiary);
 }
-.mint-auto-group__workflow-tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-primary-soft);
-}
-.mint-auto-group__workflow-tab--active {
-  border-bottom-color: var(--color-primary);
-  color: var(--color-primary);
-}
-.mint-auto-group__manual-mode {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
-.mint-auto-group__manual-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  gap: 0.75rem;
-  min-width: 0;
-  padding-bottom: 0.25rem;
+.mint-sample-tree__toggle svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 0.15s ease;
 }
-.mint-auto-group__manual-summary-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
+  transform: rotate(90deg);
 }
-.mint-auto-group__manual-summary-text strong {
-  color: var(--text-primary);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  line-height: 1.25;
+.mint-sample-tree--sm .mint-sample-tree__toggle {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-eyebrow {
-  color: var(--text-muted);
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  line-height: 1.2;
-  text-transform: uppercase;
+.mint-sample-tree--sm .mint-sample-tree__toggle svg {
+  width: 0.75rem;
+  height: 0.75rem;
 }
-.mint-auto-group__manual-stats {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  color: var(--text-secondary);
-  font-size: 0.6875rem;
+.mint-sample-tree--lg .mint-sample-tree__toggle {
+  width: 1.5rem;
+  height: 1.5rem;
 }
-.mint-auto-group__manual-stats span {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  min-height: 1.375rem;
-  padding: 0.0625rem 0.4375rem;
-  border: 1px solid var(--border-light);
-  border-radius: 9999px;
-  background: var(--bg-secondary);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
+.mint-sample-tree--lg .mint-sample-tree__toggle svg {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-stats strong {
-  color: var(--text-primary);
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
+
+/* Placeholder for leaf nodes (no toggle) */
+.mint-sample-tree__toggle-placeholder {
+  width: 1.25rem;
+  flex-shrink: 0;
 }
-.mint-auto-group__manual-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
-  gap: 0.625rem;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
+.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
+  width: 1rem;
 }
-.mint-auto-group__manual-panel {
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.625rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-primary);
-  box-shadow: inset 0 1px 0 var(--bg-secondary);
+.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
+  width: 1.5rem;
 }
-.mint-auto-group__manual-panel-head {
+
+/* Icon */
+.mint-sample-tree__icon {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.625rem;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
 }
-.mint-auto-group__manual-panel-head > div:first-child {
-  display: flex;
-  align-items: center;
-  gap: 0.4375rem;
-  min-width: 0;
+.mint-sample-tree__icon svg {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-panel-head h3 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 0.78125rem;
-  font-weight: 600;
-  line-height: 1.35;
+.mint-sample-tree--sm .mint-sample-tree__icon {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-step {
-  display: inline-grid;
-  place-items: center;
+.mint-sample-tree--sm .mint-sample-tree__icon svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon svg {
   width: 1.25rem;
   height: 1.25rem;
-  border-radius: 9999px;
-  background: var(--color-primary-soft);
+}
+
+/* Icon colors by type */
+.mint-sample-tree__icon--study {
+  color: var(--text-muted);
+}
+.mint-sample-tree__icon--experiment {
   color: var(--color-primary);
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  flex-shrink: 0;
+}
+.mint-sample-tree__icon--plate {
+  color: var(--mint-info);
+}
+.mint-sample-tree__icon--sample {
+  color: var(--mint-success);
+}
+.mint-sample-tree__icon--cell_line {
+  color: var(--color-purple);
+}
+.mint-sample-tree__icon--passage {
+  color: var(--text-secondary);
+}
+.mint-sample-tree__icon--clone {
+  color: var(--mint-warning);
+}
+.mint-sample-tree__icon--treatment {
+  color: var(--color-cta);
+}
+.mint-sample-tree__icon--folder {
+  color: var(--text-muted);
+}
+.mint-sample-tree__icon--custom {
+  color: var(--text-secondary);
+}
+
+/* Label */
+.mint-sample-tree__label {
+  flex: 1;
+  min-width: 0;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Badge */
+.mint-sample-tree__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+.mint-sample-tree--sm .mint-sample-tree__badge {
+  min-width: 1rem;
+  padding: 0.0625rem 0.25rem;
+  font-size: 0.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__badge {
+  min-width: 1.5rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+.mint-sample-tree__badge--default {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+.mint-sample-tree__badge--success {
+  background-color: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+.mint-sample-tree__badge--warning {
+  background-color: var(--mint-warning-bg);
+  color: var(--mint-warning);
+}
+.mint-sample-tree__badge--error {
+  background-color: var(--mint-error-bg);
+  color: var(--mint-error);
+}
+
+/* Children container */
+.mint-sample-tree__children {
+  margin-left: 1.25rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid var(--border-color);
+  overflow: hidden;
+}
+.mint-sample-tree--sm .mint-sample-tree__children {
+  margin-left: 1rem;
+  padding-left: 0.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__children {
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+
+/* Animation */
+.mint-sample-tree__children--entering {
+  animation: mint-tree-expand 0.15s ease-out;
+}
+.mint-sample-tree__children--leaving {
+  animation: mint-tree-collapse 0.15s ease-out forwards;
+}
+@keyframes mint-tree-expand {
+from {
+    opacity: 0;
+    max-height: 0;
+}
+to {
+    opacity: 1;
+    max-height: 1000px;
+}
+}
+@keyframes mint-tree-collapse {
+from {
+    opacity: 1;
+    max-height: 1000px;
+}
+to {
+    opacity: 0;
+    max-height: 0;
+}
+}
+
+/* Empty state */
+.mint-sample-tree__empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+.mint-sample-tree__empty-icon {
+  width: 2rem;
+  height: 2rem;
+  margin: 0 auto 0.5rem;
+  opacity: 0.5;
+}
+.mint-sample-tree__empty-text {
+  font-size: 0.875rem;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+/* AutoGroupModal - Smart grouping wizard */
+.mint-auto-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-height: 0;
+  min-width: 0;
+}
+.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
+  overflow: hidden;
+}
+.mint-auto-group:has(.mint-auto-group__manual-mode) {
+  height: min(34rem, calc(100vh - 12rem));
+  min-height: min(26rem, calc(100vh - 12rem));
+  overflow: hidden;
+}
+
+/* --- Workflow tabs --- */
+.mint-auto-group__workflow-bar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.25rem;
+  min-width: 0;
+  padding-bottom: 0;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-auto-group__workflow-bar--manual {
+  gap: 0.75rem;
+}
+.mint-auto-group__workflow-tabs {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mint-auto-group__workflow-tab {
+  min-height: 1.75rem;
+  margin-bottom: -1px;
+  padding: 0.25rem 0.625rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  line-height: 1.25;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.mint-auto-group__workflow-tab:hover {
+  color: var(--text-primary);
+}
+.mint-auto-group__workflow-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+.mint-auto-group__workflow-tab--active {
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.mint-auto-group__manual-mode {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.mint-auto-group__manual-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: 0.75rem;
+  min-width: 0;
+  padding-bottom: 0.25rem;
+}
+.mint-auto-group__manual-summary-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.mint-auto-group__manual-summary-text strong {
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.mint-auto-group__manual-eyebrow {
+  color: var(--text-muted);
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.mint-auto-group__manual-stats {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+}
+.mint-auto-group__manual-stats span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 1.375rem;
+  padding: 0.0625rem 0.4375rem;
+  border: 1px solid var(--border-light);
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.mint-auto-group__manual-stats strong {
+  color: var(--text-primary);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+}
+.mint-auto-group__manual-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
+  gap: 0.625rem;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.mint-auto-group__manual-panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.625rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-primary);
+  box-shadow: inset 0 1px 0 var(--bg-secondary);
+}
+.mint-auto-group__manual-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.625rem;
+}
+.mint-auto-group__manual-panel-head > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+  min-width: 0;
+}
+.mint-auto-group__manual-panel-head h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+.mint-auto-group__manual-step {
+  display: inline-grid;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  flex-shrink: 0;
 }
 .mint-auto-group__manual-panel-meta {
   display: flex;
@@ -11738,7 +12019,7 @@ to {
   font-size: 0.8125rem;
   color: var(--mint-error);
   background: var(--mint-error-bg);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius);
 }
 
@@ -11759,7 +12040,7 @@ to {
 }
 .mint-auto-group__experiment-error {
   padding: 1.5rem;
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
   background: var(--mint-error-bg);
   font-size: 0.8125rem;
@@ -11790,7 +12071,7 @@ to {
 .mint-auto-group__link-btn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
 }
 .mint-auto-group__experiment-loaded {
   padding: 1.5rem;
@@ -12167,21 +12448,12 @@ to {
 }
 .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
 }
-.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;
-}
-.mint-auto-group__preview-group[open] { background: var(--bg-secondary);
-}
-.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem;
-}
-.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border);
-}
-.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0;
-}
-.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px;
-}
-.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem;
+
+/* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
+   its height so a large batch scrolls inside the panel instead of the modal. */
+.mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto;
 }
-.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px;
+.mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted);
 }
 .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px;
 }
@@ -12462,6 +12734,10 @@ to {
 .mint-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
+.mint-sample-selector__expand-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -12571,6 +12847,10 @@ to {
   transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
+.mint-sample-selector__color-dot--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 
 /* Count Badge */
 .mint-sample-selector__count-badge {
@@ -12602,6 +12882,13 @@ to {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
+
+/* Reveal the hover-hidden delete button when reached by keyboard, and ring it. */
+.mint-sample-selector__delete-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__delete-btn--hidden {
   opacity: 0;
 }
@@ -13582,1596 +13869,1325 @@ to {
   margin-bottom: 0.25rem;
 }
 .mint-progress__label {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-}
-.mint-progress__value {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ========================================================================
-   Rail variant (default) — single filled track, pill ends
-   ======================================================================== */
-.mint-progress__track {
-  width: 100%;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px; /* pill ends — spec */
-  overflow: hidden;
-}
-.mint-progress__track--sm { height: 4px;
-}
-.mint-progress__track--md { height: 8px;
-}
-.mint-progress__track--lg { height: 12px;
-}
-.mint-progress__bar {
-  height: 100%;
-  border-radius: 9999px;
-  transition: width 0.3s ease;
-}
-.mint-progress__bar--primary { background-color: var(--color-primary);
-}
-.mint-progress__bar--success { background-color: var(--mint-success);
-}
-.mint-progress__bar--warning { background-color: var(--mint-warning);
-}
-.mint-progress__bar--error   { background-color: var(--mint-error);
-}
-.mint-progress__bar--info    { background-color: var(--mint-info);
-}
-.mint-progress__bar--indeterminate {
-  width: 40% !important;
-  animation: mint-progress-indeterminate 1.5s ease-in-out infinite;
-}
-@keyframes mint-progress-indeterminate {
-0%   { transform: translateX(-100%);
-}
-50%  { transform: translateX(150%);
-}
-100% { transform: translateX(-100%);
-}
-}
-
-/* ========================================================================
-   Segmented variant — discrete step segments for pipelines / wizards
-   ======================================================================== */
-.mint-progress__segments {
-  display: flex;
-  width: 100%;
-  gap: 4px;
-}
-.mint-progress__segments--sm { height: 4px;
-}
-.mint-progress__segments--md { height: 8px;
-}
-.mint-progress__segments--lg { height: 12px;
-}
-.mint-progress__segment {
-  flex: 1;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px;
-  transition: background-color 0.2s ease;
-}
-.mint-progress__segment--done.mint-progress__segment--primary { background-color: var(--color-primary);
-}
-.mint-progress__segment--done.mint-progress__segment--success { background-color: var(--mint-success);
-}
-.mint-progress__segment--done.mint-progress__segment--warning { background-color: var(--mint-warning);
-}
-.mint-progress__segment--done.mint-progress__segment--error   { background-color: var(--mint-error);
-}
-.mint-progress__segment--done.mint-progress__segment--info    { background-color: var(--mint-info);
-}
-.mint-progress__segment--active {
-  animation: mint-progress-segment-pulse 1.4s ease-in-out infinite;
-}
-.mint-progress__segment--active.mint-progress__segment--primary { background-color: var(--color-primary);
-}
-.mint-progress__segment--active.mint-progress__segment--success { background-color: var(--mint-success);
-}
-.mint-progress__segment--active.mint-progress__segment--warning { background-color: var(--mint-warning);
-}
-.mint-progress__segment--active.mint-progress__segment--error   { background-color: var(--mint-error);
-}
-.mint-progress__segment--active.mint-progress__segment--info    { background-color: var(--mint-info);
-}
-@keyframes mint-progress-segment-pulse {
-0%, 100% { opacity: 0.55;
-}
-50%      { opacity: 1;
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.mint-progress__segment--active { animation: none; opacity: 1;
-}
-.mint-progress__bar--indeterminate { animation: none;
-}
-}
-
-/* Step labels under segmented bar */
-.mint-progress__step-labels {
-  display: flex;
-  width: 100%;
-  gap: 4px;
-  margin-top: 0.375rem;
-}
-.mint-progress__step-label {
-  flex: 1;
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-  text-align: center;
-  line-height: 1.3;
-  transition: color 0.15s ease;
-}
-.mint-progress__step-label--done {
-  color: var(--text-secondary);
-}
-.mint-progress__step-label--active {
-  color: var(--text-primary);
-  font-weight: 500;
-}
-/* Avatar Component Styles */
-
-/* Outer wrapper — anchors the status dot; NO overflow hidden */
-.mint-avatar {
-  position: relative;
-  display: inline-block;
-  flex-shrink: 0;
-  line-height: 0; /* prevents inline-baseline gap under the face */
-}
-
-/* Inner face — holds photo/initials; CLIPS its own contents */
-.mint-avatar__face {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  overflow: hidden;
-  /* font-weight 500 (medium) matches the platform's inline avatar typography
-     — text-sm font-medium text-white in admin/UserTable.vue:292. */
-  font-weight: 500;
-  color: white;
-  background: var(--bg-tertiary);
-}
-
-/* Sizes — applied on the wrapper so face fills 100%.
-   md = 32px to match the platform's canonical w-8 h-8 admin/user listing
-   size. Pre-0.16.5, md was 40px. */
-.mint-avatar--xs { width: 24px; height: 24px; font-size: 0.625rem;
-}
-.mint-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem;
-}
-.mint-avatar--md { width: 32px; height: 32px; font-size: 0.875rem;
-}
-.mint-avatar--lg { width: 40px; height: 40px; font-size: 1rem;
-}
-.mint-avatar--xl { width: 56px; height: 56px; font-size: 1.25rem;
-}
-
-/* Image */
-.mint-avatar__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* Initials */
-.mint-avatar__initials {
-  line-height: 1;
-  user-select: none;
-}
-
-/* Fallback SVG icon */
-.mint-avatar__fallback {
-  width: 60%;
-  height: 60%;
-  color: var(--text-muted);
-}
-
-/* Status dot — absolutely positioned on the outer wrapper, unclipped by face */
-.mint-avatar__status {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: 30%;
-  height: 30%;
-  min-width: 8px;
-  min-height: 8px;
-  border-radius: 50%;
-  border: 2px solid var(--bg-primary);
-  box-sizing: border-box;
-}
-.mint-avatar__status--online  { background-color: var(--mint-success);
-}
-.mint-avatar__status--away    { background-color: var(--mint-warning);
-}
-.mint-avatar__status--busy    { background-color: var(--mint-error);
-}
-.mint-avatar__status--offline { background-color: var(--text-muted);
-}
-/* Breadcrumb Component Styles */
-.mint-breadcrumb__list {
-  display: flex;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
-  gap: 0;
-}
-.mint-breadcrumb__item {
-  display: flex;
-  align-items: center;
-  font-size: 0.8125rem;
-}
-
-/* Ancestor link — text-secondary at rest, promoted to text-primary + soft pill on hover */
-.mint-breadcrumb__link {
-  color: var(--text-secondary);
-  cursor: pointer;
-  text-decoration: none;
-  transition: color 0.15s ease, background-color 0.15s ease;
-  background: none;
-  border: none;
-  padding: 0.1875rem 0.5rem;
-  margin: 0 -0.25rem;
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: 0.8125rem;
-}
-.mint-breadcrumb__link:hover {
-  color: var(--text-primary);
-  background-color: var(--bg-secondary);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
 }
-.mint-breadcrumb__link:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+.mint-progress__value {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
 }
 
-/* Current segment — text-primary + 500 weight */
-.mint-breadcrumb__current {
-  color: var(--text-primary);
-  font-weight: 500;
-  padding: 0.1875rem 0.5rem;
-  margin: 0 -0.25rem;
+/* ========================================================================
+   Rail variant (default) — single filled track, pill ends
+   ======================================================================== */
+.mint-progress__track {
+  width: 100%;
+  background-color: var(--bg-tertiary);
+  border-radius: 9999px; /* pill ends — spec */
+  overflow: hidden;
 }
-
-/* Chevron separator — thin, text-muted */
-.mint-breadcrumb__separator {
-  color: var(--text-muted);
-  user-select: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 0.25rem;
+.mint-progress__track--sm { height: 4px;
 }
-.mint-breadcrumb__chevron {
-  width: 0.875rem;
-  height: 0.875rem;
+.mint-progress__track--md { height: 8px;
 }
-/* ChartContainer Component Styles */
-.mint-chart {
-  background-color: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+.mint-progress__track--lg { height: 12px;
 }
-.mint-chart__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+.mint-progress__bar {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
 }
-.mint-chart__header-text {
-  flex: 1;
-  min-width: 0;
+.mint-progress__bar--primary { background-color: var(--color-primary);
 }
-.mint-chart__title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+.mint-progress__bar--success { background-color: var(--mint-success);
 }
-.mint-chart__description {
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  margin-top: 0.25rem !important;
-  margin-bottom: 0 !important;
-  line-height: 1.4;
-  padding: 0 !important;
+.mint-progress__bar--warning { background-color: var(--mint-warning);
 }
-.mint-chart__toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
+.mint-progress__bar--error   { background-color: var(--mint-error);
 }
-.mint-chart__body {
-  position: relative;
-  min-height: 12rem;
+.mint-progress__bar--info    { background-color: var(--mint-info);
 }
-.mint-chart__loading-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bg-card);
-  z-index: 1;
+.mint-progress__bar--indeterminate {
+  width: 40% !important;
+  animation: mint-progress-indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes mint-progress-indeterminate {
+0%   { transform: translateX(-100%);
+}
+50%  { transform: translateX(150%);
+}
+100% { transform: translateX(-100%);
 }
-.mint-chart__legend {
-  padding: 0.75rem 1.5rem;
-  border-top: 1px solid var(--border-color);
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
 }
 
-.mint-bio-template-experiment-workspace[data-v-9eb2d454] {
+/* ========================================================================
+   Segmented variant — discrete step segments for pipelines / wizards
+   ======================================================================== */
+.mint-progress__segments {
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 0;
+  width: 100%;
+  gap: 4px;
 }
-.mint-bio-template-experiment-workspace__toolbar[data-v-9eb2d454] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
+.mint-progress__segments--sm { height: 4px;
 }
-.mint-bio-template-experiment-workspace__status[data-v-9eb2d454] {
-  flex: 1 1 auto;
-  min-width: 0;
+.mint-progress__segments--md { height: 8px;
 }
-.mint-bio-template-experiment-workspace__actions[data-v-9eb2d454] {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 0.5rem;
+.mint-progress__segments--lg { height: 12px;
 }
-.mint-bio-template-experiment-workspace__meta[data-v-9eb2d454],
-.mint-bio-template-experiment-workspace__template-version[data-v-9eb2d454] {
-  margin: 0;
-  color: var(--text-secondary, #64748b);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
+.mint-progress__segment {
+  flex: 1;
+  background-color: var(--bg-tertiary);
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
 }
-.mint-bio-template-experiment-workspace__templates[data-v-9eb2d454] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-  gap: 0.75rem;
+.mint-progress__segment--done.mint-progress__segment--primary { background-color: var(--color-primary);
 }
-.mint-bio-template-experiment-workspace__template[data-v-9eb2d454] {
-  min-width: 0;
-  padding: 1rem;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 0.5rem;
-  background: var(--bg-primary, #ffffff);
+.mint-progress__segment--done.mint-progress__segment--success { background-color: var(--mint-success);
 }
-.mint-bio-template-experiment-workspace__template-id[data-v-9eb2d454] {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.875rem;
+.mint-progress__segment--done.mint-progress__segment--warning { background-color: var(--mint-warning);
 }
-@media (max-width: 48rem) {
-.mint-bio-template-experiment-workspace__toolbar[data-v-9eb2d454],
-  .mint-bio-template-experiment-workspace__actions[data-v-9eb2d454] {
-    align-items: stretch;
-    flex-direction: column;
+.mint-progress__segment--done.mint-progress__segment--error   { background-color: var(--mint-error);
 }
+.mint-progress__segment--done.mint-progress__segment--info    { background-color: var(--mint-info);
 }
-
-.mint-bio-template-preset-workspace[data-v-0cb9aa98] {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 0;
+.mint-progress__segment--active {
+  animation: mint-progress-segment-pulse 1.4s ease-in-out infinite;
 }
-.mint-bio-template-preset-workspace__toolbar[data-v-0cb9aa98] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
+.mint-progress__segment--active.mint-progress__segment--primary { background-color: var(--color-primary);
 }
-.mint-bio-template-preset-workspace__status[data-v-0cb9aa98] {
-  flex: 1 1 auto;
-  min-width: 0;
+.mint-progress__segment--active.mint-progress__segment--success { background-color: var(--mint-success);
 }
-.mint-bio-template-preset-workspace__actions[data-v-0cb9aa98] {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 0.5rem;
+.mint-progress__segment--active.mint-progress__segment--warning { background-color: var(--mint-warning);
 }
-.mint-bio-template-preset-workspace__meta[data-v-0cb9aa98],
-.mint-bio-template-preset-workspace__sidebar-subtitle[data-v-0cb9aa98],
-.mint-bio-template-preset-workspace__template-meta[data-v-0cb9aa98] {
-  margin: 0;
-  color: var(--text-secondary, #64748b);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
+.mint-progress__segment--active.mint-progress__segment--error   { background-color: var(--mint-error);
 }
-.mint-bio-template-preset-workspace__main[data-v-0cb9aa98] {
-  display: grid;
-  grid-template-columns: minmax(16rem, max-content) minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
-  min-width: 0;
+.mint-progress__segment--active.mint-progress__segment--info    { background-color: var(--mint-info);
 }
-.mint-bio-template-preset-workspace__sidebar-title[data-v-0cb9aa98] {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-size: 0.875rem;
-  font-weight: 600;
+@keyframes mint-progress-segment-pulse {
+0%, 100% { opacity: 0.55;
 }
-.mint-bio-template-preset-workspace__view-nav[data-v-0cb9aa98] {
-  margin-top: 0.5rem;
+50%      { opacity: 1;
 }
-.mint-bio-template-preset-workspace__templates[data-v-0cb9aa98] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-  gap: 0.75rem;
 }
-.mint-bio-template-preset-workspace__template[data-v-0cb9aa98] {
-  min-width: 0;
-  padding: 1rem;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 0.5rem;
-  background: var(--bg-primary, #ffffff);
+@media (prefers-reduced-motion: reduce) {
+.mint-progress__segment--active { animation: none; opacity: 1;
 }
-.mint-bio-template-preset-workspace__template-id[data-v-0cb9aa98] {
-  margin: 0;
-  color: var(--text-primary, #0f172a);
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.875rem;
+.mint-progress__bar--indeterminate { animation: none;
 }
-@media (max-width: 48rem) {
-.mint-bio-template-preset-workspace__toolbar[data-v-0cb9aa98],
-  .mint-bio-template-preset-workspace__actions[data-v-0cb9aa98] {
-    align-items: stretch;
-    flex-direction: column;
 }
-.mint-bio-template-preset-workspace__main[data-v-0cb9aa98] {
-    grid-template-columns: minmax(0, 1fr);
+
+/* Step labels under segmented bar */
+.mint-progress__step-labels {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  margin-top: 0.375rem;
+}
+.mint-progress__step-label {
+  flex: 1;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-align: center;
+  line-height: 1.3;
+  transition: color 0.15s ease;
 }
+.mint-progress__step-label--done {
+  color: var(--text-secondary);
 }
-/* RackEditor Component Styles */
-.mint-rack-editor {
-  display: flex;
-  flex-direction: column;
+.mint-progress__step-label--active {
+  color: var(--text-primary);
+  font-weight: 500;
 }
+/* Avatar Component Styles */
 
-/* Rack tabs bar */
-.mint-rack-editor__tabs {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 0.5rem 0;
-  border-bottom: 1px solid var(--border-color);
-  overflow-x: auto;
-}
-.mint-rack-editor__tabs-inner {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-.mint-rack-editor__tab {
+/* Outer wrapper — anchors the status dot; NO overflow hidden */
+.mint-avatar {
   position: relative;
-  display: flex;
+  display: inline-block;
+  flex-shrink: 0;
+  line-height: 0; /* prevents inline-baseline gap under the face */
+}
+
+/* Inner face — holds photo/initials; CLIPS its own contents */
+.mint-avatar__face {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  /* font-weight 500 (medium) matches the platform's inline avatar typography
+     — text-sm font-medium text-white in admin/UserTable.vue:292. */
   font-weight: 500;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-  border: 1px solid transparent;
-  cursor: grab;
-  transition: all 0.2s;
-  background: transparent;
-  color: var(--text-muted);
-  white-space: nowrap;
+  color: white;
+  background: var(--bg-tertiary);
 }
-.mint-rack-editor__tab:active {
-  cursor: grabbing;
+
+/* Sizes — applied on the wrapper so face fills 100%.
+   md = 32px to match the platform's canonical w-8 h-8 admin/user listing
+   size. Pre-0.16.5, md was 40px. */
+.mint-avatar--xs { width: 24px; height: 24px; font-size: 0.625rem;
 }
-.mint-rack-editor__tab:hover {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
+.mint-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem;
 }
-.mint-rack-editor__tab--active {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border-color: var(--border-color);
-  border-bottom-color: var(--bg-secondary);
-  margin-bottom: -1px;
-  z-index: 1;
+.mint-avatar--md { width: 32px; height: 32px; font-size: 0.875rem;
 }
-.mint-rack-editor__tab--dragging {
-  opacity: 0.5;
+.mint-avatar--lg { width: 40px; height: 40px; font-size: 1rem;
 }
-.mint-rack-editor__tab--drag-over {
-  box-shadow: 0 0 0 2px #6366f1, 0 0 0 3px white;
+.mint-avatar--xl { width: 56px; height: 56px; font-size: 1.25rem;
 }
 
-/* Slot color dot */
-.mint-rack-editor__slot-dot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 9999px;
-  flex-shrink: 0;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+/* Image */
+.mint-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-/* Sample count badge */
-.mint-rack-editor__count {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius);
-  font-weight: 500;
-}
-.mint-rack-editor__count--active {
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #10b981;
+/* Initials */
+.mint-avatar__initials {
+  line-height: 1;
+  user-select: none;
 }
-.mint-rack-editor__count--inactive {
-  background-color: var(--bg-tertiary);
+
+/* Fallback SVG icon */
+.mint-avatar__fallback {
+  width: 60%;
+  height: 60%;
   color: var(--text-muted);
 }
 
-/* Remove button on tab */
-.mint-rack-editor__tab-remove {
+/* Status dot — absolutely positioned on the outer wrapper, unclipped by face */
+.mint-avatar__status {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  border-radius: 9999px;
+  right: -2px;
+  bottom: -2px;
+  width: 30%;
+  height: 30%;
+  min-width: 8px;
+  min-height: 8px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-primary);
+  box-sizing: border-box;
+}
+.mint-avatar__status--online  { background-color: var(--mint-success);
+}
+.mint-avatar__status--away    { background-color: var(--mint-warning);
+}
+.mint-avatar__status--busy    { background-color: var(--mint-error);
+}
+.mint-avatar__status--offline { background-color: var(--text-muted);
+}
+/* Breadcrumb Component Styles */
+.mint-breadcrumb__list {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 700;
-  background-color: rgba(239, 68, 68, 0.9);
-  color: white;
-  border: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  gap: 0;
+}
+.mint-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  font-size: 0.8125rem;
+}
+
+/* Ancestor link — text-secondary at rest, promoted to text-primary + soft pill on hover */
+.mint-breadcrumb__link {
+  color: var(--text-secondary);
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, transform 0.15s;
+  text-decoration: none;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  background: none;
+  border: none;
+  padding: 0.1875rem 0.5rem;
+  margin: 0 -0.25rem;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: 0.8125rem;
 }
-.mint-rack-editor__tab:hover .mint-rack-editor__tab-remove {
-  opacity: 1;
+.mint-breadcrumb__link:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
 }
-.mint-rack-editor__tab-remove:hover {
-  transform: scale(1.1);
+.mint-breadcrumb__link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
-/* Add rack button */
-.mint-rack-editor__add-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-left: 0.25rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
+/* Current segment — text-primary + 500 weight */
+.mint-breadcrumb__current {
+  color: var(--text-primary);
   font-weight: 500;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-  background: transparent;
+  padding: 0.1875rem 0.5rem;
+  margin: 0 -0.25rem;
+}
+
+/* Chevron separator — thin, text-muted */
+.mint-breadcrumb__separator {
   color: var(--text-muted);
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.25rem;
 }
-.mint-rack-editor__add-btn:hover {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+.mint-breadcrumb__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
 }
-
-/* Toolbar */
-.mint-rack-editor__toolbar {
+/* ChartContainer Component Styles */
+.mint-chart {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.mint-chart__header {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
   border-bottom: 1px solid var(--border-color);
 }
-.mint-rack-editor__toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--radius-md);
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
+.mint-chart__header-text {
+  flex: 1;
+  min-width: 0;
 }
-.mint-rack-editor__toolbar-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+.mint-chart__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+.mint-chart__description {
+  font-size: 0.8125rem;
   color: var(--text-muted);
+  margin-top: 0.25rem !important;
+  margin-bottom: 0 !important;
+  line-height: 1.4;
+  padding: 0 !important;
 }
-.mint-rack-editor__toolbar-section {
+.mint-chart__toolbar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
 }
-.mint-rack-editor__toolbar-divider {
-  width: 1px;
-  height: 1.5rem;
-  background-color: var(--border-color);
+.mint-chart__body {
+  position: relative;
+  min-height: 12rem;
 }
-
-/* Format selector buttons */
-.mint-rack-editor__format-btns {
+.mint-chart__loading-overlay {
+  position: absolute;
+  inset: 0;
   display: flex;
-  border-radius: var(--radius);
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-}
-.mint-rack-editor__format-btn {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-}
-.mint-rack-editor__format-btn--active {
-  background-color: var(--color-primary, #10b981);
-  color: white;
-  font-weight: 600;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-card);
+  z-index: 1;
 }
-.mint-rack-editor__format-btn--inactive {
-  background-color: var(--bg-secondary);
+.mint-chart__legend {
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+  font-size: 0.8125rem;
   color: var(--text-secondary);
 }
 
-/* Slot selector buttons */
-.mint-rack-editor__slot-btns {
+.mint-bio-template-experiment-workspace[data-v-9eb2d454] {
   display: flex;
-  gap: 2px;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
 }
-.mint-rack-editor__slot-btn {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--radius);
-  font-size: 0.75rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: 1.5px solid transparent;
+.mint-bio-template-experiment-workspace__toolbar[data-v-9eb2d454] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
 }
-
-/* Toolbar spacer */
-.mint-rack-editor__toolbar-spacer {
-  flex: 1;
+.mint-bio-template-experiment-workspace__status[data-v-9eb2d454] {
+  flex: 1 1 auto;
+  min-width: 0;
 }
-
-/* Action buttons */
-.mint-rack-editor__action-btn {
+.mint-bio-template-experiment-workspace__actions[data-v-9eb2d454] {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.2s;
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
+  flex: 0 0 auto;
+  gap: 0.5rem;
 }
-.mint-rack-editor__action-btn:hover {
-  opacity: 0.8;
+.mint-bio-template-experiment-workspace__meta[data-v-9eb2d454],
+.mint-bio-template-experiment-workspace__template-version[data-v-9eb2d454] {
+  margin: 0;
+  color: var(--text-secondary, #64748b);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
 }
-
-/* Plate content area */
-.mint-rack-editor__plate {
+.mint-bio-template-experiment-workspace__templates[data-v-9eb2d454] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 0.75rem;
+}
+.mint-bio-template-experiment-workspace__template[data-v-9eb2d454] {
+  min-width: 0;
   padding: 1rem;
-  flex: 1;
-  overflow: auto;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-primary, #ffffff);
 }
-
-/* Readonly overlay */
-.mint-rack-editor--readonly {
-  pointer-events: none;
-  opacity: 0.7;
+.mint-bio-template-experiment-workspace__template-id[data-v-9eb2d454] {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875rem;
 }
-/* GroupAssigner Component Styles */
-.mint-group-assigner {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+@media (max-width: 48rem) {
+.mint-bio-template-experiment-workspace__toolbar[data-v-9eb2d454],
+  .mint-bio-template-experiment-workspace__actions[data-v-9eb2d454] {
+    align-items: stretch;
+    flex-direction: column;
 }
-
-/* Zones container */
-.mint-group-assigner__zones {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
 }
 
-/* Zone */
-.mint-group-assigner__zone {
+.mint-bio-template-preset-workspace[data-v-0cb9aa98] {
   display: flex;
   flex-direction: column;
-  min-height: 8rem;
-  padding: 0.75rem;
-  border: 2px dashed var(--border-color);
-  border-radius: var(--radius);
-  background-color: var(--bg-secondary);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-.mint-group-assigner__zone--dragover {
-  border-color: var(--zone-color);
-  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
+  gap: 1rem;
+  min-width: 0;
 }
-.mint-group-assigner__zone-header {
+.mint-bio-template-preset-workspace__toolbar[data-v-0cb9aa98] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-}
-.mint-group-assigner__zone-label {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--zone-color);
+  gap: 0.75rem;
 }
-.mint-group-assigner__zone-count {
-  font-size: 0.75rem;
-  color: var(--text-muted);
+.mint-bio-template-preset-workspace__status[data-v-0cb9aa98] {
+  flex: 1 1 auto;
+  min-width: 0;
 }
-.mint-group-assigner__zone-content {
-  flex: 1;
+.mint-bio-template-preset-workspace__actions[data-v-0cb9aa98] {
   display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 0.375rem;
+  flex: 0 0 auto;
+  gap: 0.5rem;
 }
-.mint-group-assigner__zone-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
+.mint-bio-template-preset-workspace__meta[data-v-0cb9aa98],
+.mint-bio-template-preset-workspace__sidebar-subtitle[data-v-0cb9aa98],
+.mint-bio-template-preset-workspace__template-meta[data-v-0cb9aa98] {
+  margin: 0;
+  color: var(--text-secondary, #64748b);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
 }
-
-/* Pills */
-.mint-group-assigner__pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: 9999px;
-  cursor: grab;
-  user-select: none;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+.mint-bio-template-preset-workspace__main[data-v-0cb9aa98] {
+  display: grid;
+  grid-template-columns: minmax(16rem, max-content) minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
 }
-.mint-group-assigner__pill:hover {
-  box-shadow: var(--shadow-sm);
+.mint-bio-template-preset-workspace__sidebar-title[data-v-0cb9aa98] {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
-.mint-group-assigner__pill:active {
-  cursor: grabbing;
+.mint-bio-template-preset-workspace__view-nav[data-v-0cb9aa98] {
+  margin-top: 0.5rem;
 }
-.mint-group-assigner__pill--unassigned {
-  background-color: var(--bg-tertiary);
+.mint-bio-template-preset-workspace__templates[data-v-0cb9aa98] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 0.75rem;
 }
-.mint-group-assigner__pill--dragging {
-  opacity: 0.5;
-  transform: scale(0.95);
+.mint-bio-template-preset-workspace__template[data-v-0cb9aa98] {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-primary, #ffffff);
 }
-.mint-group-assigner__pill-color {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
-  flex-shrink: 0;
+.mint-bio-template-preset-workspace__template-id[data-v-0cb9aa98] {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875rem;
+}
+@media (max-width: 48rem) {
+.mint-bio-template-preset-workspace__toolbar[data-v-0cb9aa98],
+  .mint-bio-template-preset-workspace__actions[data-v-0cb9aa98] {
+    align-items: stretch;
+    flex-direction: column;
 }
-.mint-group-assigner__pill-name {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  white-space: nowrap;
+.mint-bio-template-preset-workspace__main[data-v-0cb9aa98] {
+    grid-template-columns: minmax(0, 1fr);
 }
-.mint-group-assigner__pill-count {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-  padding: 0.125rem 0.375rem;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px;
 }
-.mint-group-assigner__pill-remove {
+/* RackEditor Component Styles */
+.mint-rack-editor {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
-}
-.mint-group-assigner__pill-remove:hover {
-  color: var(--mint-error);
-  background-color: var(--mint-error-bg);
+  flex-direction: column;
 }
 
-/* Unassigned section */
-.mint-group-assigner__unassigned {
+/* Rack tabs bar */
+.mint-rack-editor__tabs {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
 }
-.mint-group-assigner__unassigned-header {
+.mint-rack-editor__tabs-inner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 2px;
 }
-.mint-group-assigner__unassigned-title {
-  font-size: 0.75rem;
+.mint-rack-editor__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  border: 1px solid transparent;
+  cursor: grab;
+  transition: all 0.2s;
+  background: transparent;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+  white-space: nowrap;
 }
-.mint-group-assigner__clear-btn {
-  font-size: 0.75rem;
-  color: var(--color-primary);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
+.mint-rack-editor__tab:active {
+  cursor: grabbing;
 }
-.mint-group-assigner__clear-btn:hover {
-  text-decoration: underline;
+.mint-rack-editor__tab:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
 }
-.mint-group-assigner__unassigned-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  max-height: 8rem;
-  overflow-y: auto;
-  padding: 0.5rem;
+.mint-rack-editor__tab--active {
   background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+  border-bottom-color: var(--bg-secondary);
+  margin-bottom: -1px;
+  z-index: 1;
 }
-
-/* Validation */
-.mint-group-assigner__validation {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--mint-warning);
-  background-color: var(--mint-warning-bg);
-  border-radius: var(--radius-sm);
+.mint-rack-editor__tab--dragging {
+  opacity: 0.5;
 }
-/* ReagentEditor Component Styles */
-.mint-reagent-editor {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-color);
-  border-top: 3px solid var(--reagent-color, var(--color-primary));
-  overflow: hidden;
+.mint-rack-editor__tab--drag-over {
+  box-shadow: 0 0 0 2px #6366f1, 0 0 0 3px white;
 }
 
-/* Sections */
-.mint-reagent-editor__section {
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+/* Slot color dot */
+.mint-rack-editor__slot-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
 }
-.mint-reagent-editor__section-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  margin-bottom: 0.75rem;
+
+/* Sample count badge */
+.mint-rack-editor__count {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius);
+  font-weight: 500;
 }
-.mint-reagent-editor__section-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-  color: var(--reagent-color, var(--color-primary));
-  opacity: 0.7;
+.mint-rack-editor__count--active {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+.mint-rack-editor__count--inactive {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
 }
 
-/* Identity */
-.mint-reagent-editor__identity {
+/* Remove button on tab */
+.mint-rack-editor__tab-remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-}
-.mint-reagent-editor__color-wrapper {
-  position: relative;
-  flex-shrink: 0;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  background-color: rgba(239, 68, 68, 0.9);
+  color: white;
+  border: none;
   cursor: pointer;
-}
-.mint-reagent-editor__color-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
   opacity: 0;
-  cursor: pointer;
+  transition: opacity 0.15s, transform 0.15s;
 }
-.mint-reagent-editor__color-swatch {
-  display: block;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--radius);
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
-  transition: box-shadow 0.15s ease;
+.mint-rack-editor__tab:hover .mint-rack-editor__tab-remove {
+  opacity: 1;
 }
-.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
+.mint-rack-editor__tab-remove:hover {
+  transform: scale(1.1);
 }
-.mint-reagent-editor__name-input {
-  flex: 1;
-  min-width: 0;
-  background: transparent;
+
+/* Add rack button */
+.mint-rack-editor__add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
   border: none;
-  outline: none;
-  font-family: inherit;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  padding: 0.25rem 0;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.15s ease;
-}
-.mint-reagent-editor__name-input::placeholder {
+  background: transparent;
   color: var(--text-muted);
-  font-weight: 400;
 }
-.mint-reagent-editor__name-input:focus {
-  border-bottom-color: var(--reagent-color, var(--color-primary));
+.mint-rack-editor__add-btn:hover {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
 }
 
-/* Fields & layout */
-.mint-reagent-editor__field {
-  margin-bottom: 0.625rem;
-}
-.mint-reagent-editor__field:last-child {
-  margin-bottom: 0;
-}
-.mint-reagent-editor__field--flex {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1 1 0;
-  width: 0;
-  min-width: 0;
-}
-.mint-reagent-editor__row {
+/* Toolbar */
+.mint-rack-editor__toolbar {
   display: flex;
-  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-reagent-editor__position-row {
+.mint-rack-editor__toolbar-group {
   display: flex;
-  gap: 0.625rem;
-  width: 100%;
-}
-.mint-reagent-editor .mint-select {
-  width: 100%;
-  min-width: 0;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-md);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
-.mint-reagent-editor__label {
+.mint-rack-editor__toolbar-label {
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--text-secondary);
-}
-.mint-reagent-editor__inline-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--form-height-sm);
-  padding: 0 0.625rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
   text-transform: uppercase;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.mint-reagent-editor__inline-input::placeholder {
-  text-transform: none;
-}
-.mint-reagent-editor__inline-input:focus {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+  letter-spacing: 0.025em;
+  color: var(--text-muted);
 }
-.mint-reagent-editor__inline-input--error {
-  border-color: var(--mint-error);
+.mint-rack-editor__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
-.mint-reagent-editor__inline-input--error:focus {
-  border-color: var(--mint-error);
-  box-shadow: var(--focus-ring-error);
+.mint-rack-editor__toolbar-divider {
+  width: 1px;
+  height: 1.5rem;
+  background-color: var(--border-color);
 }
 
-/* Inline field validation error */
-.mint-reagent-editor__field-error {
-  grid-column: 2;
-  font-size: 0.6875rem;
-  color: var(--mint-error);
-  line-height: 1.2;
+/* Format selector buttons */
+.mint-rack-editor__format-btns {
+  display: flex;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
 }
-
-/* Unit select in section header — uses reagent color */
-.mint-reagent-editor__unit-select {
-  margin-left: auto;
-  padding: 0.125rem 0.375rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
+.mint-rack-editor__format-btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
   font-weight: 500;
-  color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
-  border: none;
-  border-radius: var(--radius-sm);
   cursor: pointer;
-  outline: none;
-  transition: background-color 0.15s ease;
+  transition: all 0.2s;
+  border: none;
 }
-.mint-reagent-editor__unit-select:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
+.mint-rack-editor__format-btn--active {
+  background-color: var(--color-primary, #10b981);
+  color: white;
+  font-weight: 600;
 }
-
-/* Dilution generator */
-.mint-reagent-editor__generator {
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  padding: 0.75rem;
-  margin-bottom: 0.625rem;
-  overflow: hidden;
+.mint-rack-editor__format-btn--inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
 }
-.mint-reagent-editor__generator-inputs {
+
+/* Slot selector buttons */
+.mint-rack-editor__slot-btns {
   display: flex;
-  gap: 0.625rem;
-  margin-bottom: 0.5rem;
+  gap: 2px;
 }
-.mint-reagent-editor__generator-inputs > * {
-  flex: 1;
-  min-width: 0;
+.mint-rack-editor__slot-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1.5px solid transparent;
 }
 
-/* Ensure all child controls fill their parent and can shrink */
-.mint-reagent-editor .mint-number-input {
-  width: 100%;
-  min-width: 0;
-}
-.mint-reagent-editor .mint-number-input__input {
-  min-width: 0;
-  width: 0;
+/* Toolbar spacer */
+.mint-rack-editor__toolbar-spacer {
   flex: 1;
 }
-.mint-reagent-editor .mint-number-input:focus-within {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
-}
-.mint-reagent-editor__presets {
-  display: flex;
-  gap: 0.375rem;
-}
-.mint-reagent-editor__preset-btn {
-  flex: 1;
+
+/* Action buttons */
+.mint-rack-editor__action-btn {
   display: flex;
   align-items: center;
-  justify-content: center;
-  height: 1.75rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.75rem;
-  font-weight: 500;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: var(--bg-tertiary);
   color: var(--text-secondary);
-  background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.12s ease;
 }
-.mint-reagent-editor__preset-btn:hover {
-  color: var(--reagent-color, var(--color-primary));
-  border-color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
+.mint-rack-editor__action-btn:hover {
+  opacity: 0.8;
 }
-.mint-reagent-editor__preset-btn:active {
-  transform: scale(0.96);
+
+/* Plate content area */
+.mint-rack-editor__plate {
+  padding: 1rem;
+  flex: 1;
+  overflow: auto;
 }
 
-/* Manual entry */
-.mint-reagent-editor__manual {
+/* Readonly overlay */
+.mint-rack-editor--readonly {
+  pointer-events: none;
+  opacity: 0.7;
+}
+/* GroupAssigner Component Styles */
+.mint-group-assigner {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.625rem;
+  flex-direction: column;
+  gap: 1rem;
 }
-.mint-reagent-editor__manual .mint-number-input {
-  flex: 1;
-  width: 0; /* flex-basis override so flex: 1 controls sizing */
+
+/* Zones container */
+.mint-group-assigner__zones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
 }
-.mint-reagent-editor__add-btn {
+
+/* Zone */
+.mint-group-assigner__zone {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--form-height-sm);
-  height: var(--form-height-sm);
-  flex-shrink: 0;
+  flex-direction: column;
+  min-height: 8rem;
+  padding: 0.75rem;
+  border: 2px dashed var(--border-color);
   border-radius: var(--radius);
-  background-color: var(--reagent-color, var(--color-primary));
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: filter 0.15s ease, transform 0.1s ease;
+  background-color: var(--bg-secondary);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
 }
-.mint-reagent-editor__add-btn:hover:not(:disabled) {
-  filter: brightness(0.88);
+.mint-group-assigner__zone--dragover {
+  border-color: var(--zone-color);
+  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
 }
-.mint-reagent-editor__add-btn:active:not(:disabled) {
-  transform: scale(0.92);
+.mint-group-assigner__zone-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-reagent-editor__add-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
+.mint-group-assigner__zone-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--zone-color);
 }
-
-/* Level table */
-.mint-reagent-editor__table {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-  max-height: 14rem;
-  display: flex;
-  flex-direction: column;
+.mint-group-assigner__zone-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
 }
-.mint-reagent-editor__table-body {
+.mint-group-assigner__zone-content {
   flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.375rem;
 }
-.mint-reagent-editor__table-header {
+.mint-group-assigner__zone-empty {
   display: flex;
   align-items: center;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
-}
-.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mint-reagent-editor__table-row {
-  display: flex;
+
+/* Pills */
+.mint-group-assigner__pill {
+  display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-  border-left: 2px solid transparent;
-  transition: background-color 0.1s ease, border-left-color 0.1s ease;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  cursor: grab;
+  user-select: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
-.mint-reagent-editor__table-row:last-child {
-  border-bottom: none;
+.mint-group-assigner__pill:hover {
+  box-shadow: var(--shadow-sm);
 }
-.mint-reagent-editor__table-row:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
-  border-left-color: var(--reagent-color, var(--color-primary));
+.mint-group-assigner__pill:active {
+  cursor: grabbing;
 }
-.mint-reagent-editor__table-col--level {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
+.mint-group-assigner__pill--unassigned {
+  background-color: var(--bg-tertiary);
 }
-.mint-reagent-editor__table-col--reps {
-  width: 5.5rem;
-  flex-shrink: 0;
+.mint-group-assigner__pill--dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
 }
-.mint-reagent-editor__table-col--action {
-  width: 1.75rem;
+.mint-group-assigner__pill-color {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
   flex-shrink: 0;
-  display: flex;
-  justify-content: center;
 }
-.mint-reagent-editor__level-value {
-  font-family: 'Fira Code', monospace;
+.mint-group-assigner__pill-name {
   font-size: 0.8125rem;
   font-weight: 500;
   color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mint-reagent-editor__level-unit {
-  font-family: 'Fira Code', monospace;
+.mint-group-assigner__pill-count {
   font-size: 0.6875rem;
   color: var(--text-muted);
+  padding: 0.125rem 0.375rem;
+  background-color: var(--bg-tertiary);
+  border-radius: 9999px;
 }
-.mint-reagent-editor__remove-level-btn {
+.mint-group-assigner__pill-remove {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
+  width: 1.125rem;
+  height: 1.125rem;
+  padding: 0;
+  background: none;
   border: none;
+  color: var(--text-muted);
+  border-radius: 50%;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
-}
-.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
-  opacity: 1;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
-.mint-reagent-editor__remove-level-btn:hover {
+.mint-group-assigner__pill-remove:hover {
   color: var(--mint-error);
   background-color: var(--mint-error-bg);
 }
 
-/* Empty state */
-.mint-reagent-editor__empty {
-  text-align: center;
-  padding: 1.25rem 0.75rem;
-  font-size: 0.8125rem;
+/* Unassigned section */
+.mint-group-assigner__unassigned {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mint-group-assigner__unassigned-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mint-group-assigner__unassigned-title {
+  font-size: 0.75rem;
+  font-weight: 500;
   color: var(--text-muted);
-  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mint-group-assigner__clear-btn {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.mint-group-assigner__clear-btn:hover {
+  text-decoration: underline;
+}
+.mint-group-assigner__unassigned-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  max-height: 8rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
 }
 
-/* Position summary — reagent-tinted background */
-.mint-reagent-editor__summary {
+/* Validation */
+.mint-group-assigner__validation {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
-  border-bottom: 1px solid var(--border-color);
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--mint-warning);
+  background-color: var(--mint-warning-bg);
+  border-radius: var(--radius-sm);
 }
-.mint-reagent-editor__summary-item {
+/* ReagentEditor Component Styles */
+.mint-reagent-editor {
   display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
+  flex-direction: column;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+  border-top: 3px solid var(--reagent-color, var(--color-primary));
+  overflow: hidden;
 }
-.mint-reagent-editor__summary-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--reagent-color, var(--text-primary));
+
+/* Sections */
+.mint-reagent-editor__section {
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-reagent-editor__summary-label {
+.mint-reagent-editor__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
   font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--text-muted);
+  margin-bottom: 0.75rem;
 }
-.mint-reagent-editor__summary-dot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: var(--reagent-color, var(--text-muted));
-  opacity: 0.5;
+.mint-reagent-editor__section-icon {
+  width: 0.875rem;
+  height: 0.875rem;
   flex-shrink: 0;
+  color: var(--reagent-color, var(--color-primary));
+  opacity: 0.7;
 }
 
-/* Overflow warning */
-.mint-reagent-editor__summary--overflow {
-  background-color: var(--mint-warning-bg);
+/* Identity */
+.mint-reagent-editor__identity {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.mint-reagent-editor__color-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-swatch {
+  display: block;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
+  transition: box-shadow 0.15s ease;
+}
+.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
+}
+.mint-reagent-editor__name-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  padding: 0.25rem 0;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease;
+}
+.mint-reagent-editor__name-input::placeholder {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.mint-reagent-editor__name-input:focus {
+  border-bottom-color: var(--reagent-color, var(--color-primary));
 }
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
-  color: var(--mint-warning-hover);
+
+/* Fields & layout */
+.mint-reagent-editor__field {
+  margin-bottom: 0.625rem;
 }
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
-  background-color: var(--mint-warning);
+.mint-reagent-editor__field:last-child {
+  margin-bottom: 0;
 }
-.mint-reagent-editor__summary-warning {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--mint-warning-hover);
-  margin-left: 0.25rem;
+.mint-reagent-editor__field--flex {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
 }
-
-/* Footer */
-.mint-reagent-editor__footer {
-  padding: 0.75rem 1rem;
+.mint-reagent-editor__row {
+  display: flex;
+  gap: 0.75rem;
 }
-.mint-reagent-editor__footer .mint-button {
+.mint-reagent-editor__position-row {
+  display: flex;
+  gap: 0.625rem;
   width: 100%;
 }
-/* SampleHierarchyTree Component Styles */
-.mint-sample-tree {
-  font-size: 0.875rem;
+.mint-reagent-editor .mint-select {
+  width: 100%;
+  min-width: 0;
 }
-.mint-sample-tree--sm {
+.mint-reagent-editor__label {
   font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
-.mint-sample-tree--lg {
-  font-size: 1rem;
+.mint-reagent-editor__inline-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--form-height-sm);
+  padding: 0 0.625rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  outline: none;
+  text-transform: uppercase;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mint-reagent-editor__inline-input::placeholder {
+  text-transform: none;
+}
+.mint-reagent-editor__inline-input:focus {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+}
+.mint-reagent-editor__inline-input--error {
+  border-color: var(--mint-error);
+}
+.mint-reagent-editor__inline-input--error:focus {
+  border-color: var(--mint-error);
+  box-shadow: var(--focus-ring-error);
 }
 
-/* Node */
-.mint-sample-tree__node {
-  user-select: none;
+/* Inline field validation error */
+.mint-reagent-editor__field-error {
+  grid-column: 2;
+  font-size: 0.6875rem;
+  color: var(--mint-error);
+  line-height: 1.2;
 }
 
-/* Node header (clickable row) */
-.mint-sample-tree__node-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
+/* Unit select in section header — uses reagent color */
+.mint-reagent-editor__unit-select {
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
+  border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
+  outline: none;
   transition: background-color 0.15s ease;
 }
-.mint-sample-tree__node-header:hover {
-  background-color: var(--bg-hover);
+.mint-reagent-editor__unit-select:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
 }
-.mint-sample-tree__node--selected > .mint-sample-tree__node-header {
-  background-color: rgba(59, 130, 246, 0.1);
+
+/* Dilution generator */
+.mint-reagent-editor__generator {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin-bottom: 0.625rem;
+  overflow: hidden;
 }
-.mint-sample-tree--sm .mint-sample-tree__node-header {
-  padding: 0.25rem 0.375rem;
-  gap: 0.25rem;
+.mint-reagent-editor__generator-inputs {
+  display: flex;
+  gap: 0.625rem;
+  margin-bottom: 0.5rem;
 }
-.mint-sample-tree--lg .mint-sample-tree__node-header {
-  padding: 0.5rem 0.625rem;
-  gap: 0.5rem;
+.mint-reagent-editor__generator-inputs > * {
+  flex: 1;
+  min-width: 0;
 }
 
-/* Toggle button */
-.mint-sample-tree__toggle {
+/* Ensure all child controls fill their parent and can shrink */
+.mint-reagent-editor .mint-number-input {
+  width: 100%;
+  min-width: 0;
+}
+.mint-reagent-editor .mint-number-input__input {
+  min-width: 0;
+  width: 0;
+  flex: 1;
+}
+.mint-reagent-editor .mint-number-input:focus-within {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+}
+.mint-reagent-editor__presets {
+  display: flex;
+  gap: 0.375rem;
+}
+.mint-reagent-editor__preset-btn {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  background: transparent;
-  border: none;
+  height: 1.75rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
-  color: var(--text-muted);
   cursor: pointer;
-  transition: color 0.15s ease, transform 0.15s ease;
-  flex-shrink: 0;
-}
-.mint-sample-tree__toggle:hover {
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-}
-.mint-sample-tree__toggle svg {
-  width: 0.875rem;
-  height: 0.875rem;
-  transition: transform 0.15s ease;
-}
-.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
-  transform: rotate(90deg);
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  transition: all 0.12s ease;
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle {
-  width: 1.5rem;
-  height: 1.5rem;
+.mint-reagent-editor__preset-btn:hover {
+  color: var(--reagent-color, var(--color-primary));
+  border-color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle svg {
-  width: 1rem;
-  height: 1rem;
+.mint-reagent-editor__preset-btn:active {
+  transform: scale(0.96);
 }
 
-/* Placeholder for leaf nodes (no toggle) */
-.mint-sample-tree__toggle-placeholder {
-  width: 1.25rem;
-  flex-shrink: 0;
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
-  width: 1rem;
+/* Manual entry */
+.mint-reagent-editor__manual {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.625rem;
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
-  width: 1.5rem;
+.mint-reagent-editor__manual .mint-number-input {
+  flex: 1;
+  width: 0; /* flex-basis override so flex: 1 controls sizing */
 }
-
-/* Icon */
-.mint-sample-tree__icon {
+.mint-reagent-editor__add-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--form-height-sm);
+  height: var(--form-height-sm);
   flex-shrink: 0;
+  border-radius: var(--radius);
+  background-color: var(--reagent-color, var(--color-primary));
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: filter 0.15s ease, transform 0.1s ease;
 }
-.mint-sample-tree__icon svg {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+.mint-reagent-editor__add-btn:hover:not(:disabled) {
+  filter: brightness(0.88);
 }
-.mint-sample-tree--lg .mint-sample-tree__icon {
-  width: 1.5rem;
-  height: 1.5rem;
+.mint-reagent-editor__add-btn:active:not(:disabled) {
+  transform: scale(0.92);
 }
-.mint-sample-tree--lg .mint-sample-tree__icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
+.mint-reagent-editor__add-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
 }
 
-/* Icon colors by type */
-.mint-sample-tree__icon--study {
-  color: var(--text-muted);
+/* Level table */
+.mint-reagent-editor__table {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  max-height: 14rem;
+  display: flex;
+  flex-direction: column;
 }
-.mint-sample-tree__icon--experiment {
-  color: var(--color-primary);
+.mint-reagent-editor__table-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
 }
-.mint-sample-tree__icon--plate {
-  color: var(--mint-info);
+.mint-reagent-editor__table-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-sample-tree__icon--sample {
-  color: var(--mint-success);
+.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
 }
-.mint-sample-tree__icon--cell_line {
-  color: var(--color-purple);
+.mint-reagent-editor__table-row {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  border-left: 2px solid transparent;
+  transition: background-color 0.1s ease, border-left-color 0.1s ease;
 }
-.mint-sample-tree__icon--passage {
-  color: var(--text-secondary);
+.mint-reagent-editor__table-row:last-child {
+  border-bottom: none;
 }
-.mint-sample-tree__icon--clone {
-  color: var(--mint-warning);
+.mint-reagent-editor__table-row:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
+  border-left-color: var(--reagent-color, var(--color-primary));
 }
-.mint-sample-tree__icon--treatment {
-  color: var(--color-cta);
+.mint-reagent-editor__table-col--level {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
 }
-.mint-sample-tree__icon--folder {
-  color: var(--text-muted);
+.mint-reagent-editor__table-col--reps {
+  width: 5.5rem;
+  flex-shrink: 0;
 }
-.mint-sample-tree__icon--custom {
-  color: var(--text-secondary);
+.mint-reagent-editor__table-col--action {
+  width: 1.75rem;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
 }
-
-/* Label */
-.mint-sample-tree__label {
-  flex: 1;
-  min-width: 0;
+.mint-reagent-editor__level-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 500;
   color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* Badge */
-.mint-sample-tree__badge {
-  display: inline-flex;
+.mint-reagent-editor__level-unit {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__remove-level-btn {
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.25rem;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  border-radius: 9999px;
-  flex-shrink: 0;
-}
-.mint-sample-tree--sm .mint-sample-tree__badge {
-  min-width: 1rem;
-  padding: 0.0625rem 0.25rem;
-  font-size: 0.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__badge {
-  min-width: 1.5rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-}
-.mint-sample-tree__badge--default {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-.mint-sample-tree__badge--success {
-  background-color: var(--mint-success-bg);
-  color: var(--mint-success);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
 }
-.mint-sample-tree__badge--warning {
-  background-color: var(--mint-warning-bg);
-  color: var(--mint-warning);
+.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
+  opacity: 1;
 }
-.mint-sample-tree__badge--error {
-  background-color: var(--mint-error-bg);
+.mint-reagent-editor__remove-level-btn:hover {
   color: var(--mint-error);
+  background-color: var(--mint-error-bg);
 }
 
-/* Children container */
-.mint-sample-tree__children {
-  margin-left: 1.25rem;
-  padding-left: 0.75rem;
-  border-left: 1px solid var(--border-color);
-  overflow: hidden;
-}
-.mint-sample-tree--sm .mint-sample-tree__children {
-  margin-left: 1rem;
-  padding-left: 0.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__children {
-  margin-left: 1.5rem;
-  padding-left: 1rem;
+/* Empty state */
+.mint-reagent-editor__empty {
+  text-align: center;
+  padding: 1.25rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
 }
 
-/* Animation */
-.mint-sample-tree__children--entering {
-  animation: mint-tree-expand 0.15s ease-out;
+/* Position summary — reagent-tinted background */
+.mint-reagent-editor__summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-sample-tree__children--leaving {
-  animation: mint-tree-collapse 0.15s ease-out forwards;
+.mint-reagent-editor__summary-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
 }
-@keyframes mint-tree-expand {
-from {
-    opacity: 0;
-    max-height: 0;
+.mint-reagent-editor__summary-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--reagent-color, var(--text-primary));
 }
-to {
-    opacity: 1;
-    max-height: 1000px;
+.mint-reagent-editor__summary-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__summary-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: var(--reagent-color, var(--text-muted));
+  opacity: 0.5;
+  flex-shrink: 0;
 }
+
+/* Overflow warning */
+.mint-reagent-editor__summary--overflow {
+  background-color: var(--mint-warning-bg);
 }
-@keyframes mint-tree-collapse {
-from {
-    opacity: 1;
-    max-height: 1000px;
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
+  color: var(--mint-warning-hover);
 }
-to {
-    opacity: 0;
-    max-height: 0;
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
+  background-color: var(--mint-warning);
 }
+.mint-reagent-editor__summary-warning {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--mint-warning-hover);
+  margin-left: 0.25rem;
 }
 
-/* Empty state */
-.mint-sample-tree__empty {
-  padding: 1rem;
-  text-align: center;
-  color: var(--text-muted);
-}
-.mint-sample-tree__empty-icon {
-  width: 2rem;
-  height: 2rem;
-  margin: 0 auto 0.5rem;
-  opacity: 0.5;
+/* Footer */
+.mint-reagent-editor__footer {
+  padding: 0.75rem 1rem;
 }
-.mint-sample-tree__empty-text {
-  font-size: 0.875rem;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+.mint-reagent-editor__footer .mint-button {
+  width: 100%;
 }
 /* ProtocolStepEditor Component Styles */
 .mint-protocol-editor {
@@ -17987,6 +18003,11 @@ to { transform: rotate(360deg);
   --text-primary: #1E293B;
   --text-secondary: #64748B;
   --text-muted: #94A3B8;
+  /* De-emphasized label for low-emphasis interactive controls (secondary/ghost
+     buttons). A true dark gray — softer than --text-primary's near-black — that
+     still clears WCAG AA (4.5:1) on the secondary hover surface (--bg-tertiary),
+     where --text-secondary would drop to ~4.35:1. */
+  --text-secondary-strong: #475569;
 
   /* Brand colors */
   --color-primary: #6366F1;
@@ -18093,6 +18114,9 @@ html.dark {
   --text-primary: #F8FAFC;
   --text-secondary: #94A3B8;
   --text-muted: #64748B;
+  /* Dark-mode analog: soft light-gray instead of near-white, AA-safe (7.2:1)
+     on the dark secondary hover surface (--bg-tertiary #334155). */
+  --text-secondary-strong: #CBD5E1;
 
   /* Scrollbar */
   --scrollbar-track: #1E293B;
@@ -19876,10 +19900,12 @@ code, pre {
 }
 .mint-button--secondary {
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
   border: 1px solid var(--border-color);
   /* Intentionally tighter + fainter than the colored variants —
-     secondary shouldn't "float" the way filled buttons do. */
+     secondary shouldn't "float" the way filled buttons do. Regular (400)
+     weight de-emphasizes the label relative to the medium-weight filled variants. */
+  font-weight: 400;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }
 .mint-button--secondary:hover:not(.mint-button--disabled) {
@@ -19915,7 +19941,9 @@ code, pre {
 }
 .mint-button--ghost {
   background-color: transparent;
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
+  /* Lowest-emphasis variant: regular (400) weight, matching secondary. */
+  font-weight: 400;
 }
 .mint-button--ghost:hover:not(.mint-button--disabled) {
   background-color: var(--bg-tertiary);
@@ -19924,6 +19952,9 @@ code, pre {
 .mint-button--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  /* Small buttons live in dense/secondary contexts — regular (400) weight
+     keeps the compact label from reading too heavy. Applies to all variants. */
+  font-weight: 400;
   min-height: var(--form-height-sm);
 }
 .mint-button--md {
@@ -22278,6 +22309,9 @@ code, pre {
 }
 .mint-modal__close {
   flex-shrink: 0;
+  /* Always pin the close affordance to the right edge of the header, even when
+     there is no title/subtitle (no flex-1 header-text to push it over). */
+  margin-left: auto;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
@@ -24612,6 +24646,10 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
+.mint-sample-selector__expand-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -24716,6 +24754,10 @@ html.dark .mint-toast__item .mint-toast__message {
   transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
+.mint-sample-selector__color-dot--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 /* Count Badge */
 .mint-sample-selector__count-badge {
   font-size: 0.625rem;
@@ -24745,6 +24787,12 @@ html.dark .mint-toast__item .mint-toast__message {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
+/* Reveal the hover-hidden delete button when reached by keyboard, and ring it. */
+.mint-sample-selector__delete-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__delete-btn--hidden {
   opacity: 0;
 }
@@ -25822,7 +25870,7 @@ html.dark .mint-toast__item .mint-toast__message {
   font-size: 0.8125rem;
   color: var(--mint-error);
   background: var(--mint-error-bg);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius);
 }
 /* --- Experiment mode --- */
@@ -25842,7 +25890,7 @@ html.dark .mint-toast__item .mint-toast__message {
 }
 .mint-auto-group__experiment-error {
   padding: 1.5rem;
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
   background: var(--mint-error-bg);
   font-size: 0.8125rem;
@@ -25873,7 +25921,7 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-auto-group__link-btn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
 }
 .mint-auto-group__experiment-loaded {
   padding: 1.5rem;
@@ -26188,14 +26236,10 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-auto-group__preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .mint-auto-group__preview-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
 .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
-.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
-.mint-auto-group__preview-group[open] { background: var(--bg-secondary); }
-.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem; }
-.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border); }
-.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; }
-.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px; }
-.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem; }
-.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px; }
+/* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
+   its height so a large batch scrolls inside the panel instead of the modal. */
+.mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto; }
+.mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
 .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .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; }
 .mint-auto-group__fingerprint { margin-top: 14px; }