@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
.mint-generated-path-input[data-v-8c54d622] {
  display: grid;
  gap: 0.75rem;
}
.mint-generated-path-input__modes[data-v-8c54d622] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mint-generated-path-input__artifact-badge[data-v-8c54d622] {
  --badge-color: var(--color-primary);
}
.mint-generated-path-input__artifact .mint-file-uploader__remove-btn[data-v-8c54d622]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
  background: transparent;
}

.mint-runtime-update[data-v-9ca77e18] {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 16%);
  font-size: 13px;
  font-weight: 500;
}
.mint-runtime-update button[data-v-9ca77e18] {
  padding: 5px 9px;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.mint-plotly-chart__plot[data-v-81b7b355] {
  width: 100%;
  min-height: 24rem;
}

/* Plotly fills the hover label's trace-name box from plot/paper bgcolor combined over
   white (inline style, no hoverlabel option), so it stays light in dark mode. The token
   follows the theme; in light mode it resolves to the same white. */
.mint-plotly-chart__plot[data-v-81b7b355] .hovertext rect {
  fill: var(--bg-card) !important;
}
.mint-plotly-chart__error[data-v-81b7b355] {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--mint-error-border);
  border-radius: 0.75rem;
  background: var(--mint-error-bg);
  color: var(--mint-error-hover);
}
.mint-plotly-chart__error[data-v-81b7b355] p {
  margin: 0;
}

.mint-generated-result__image[data-v-2acc1080] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.mint-generated-result[data-v-9b682336] {
  width: 100%;
}
.mint-generated-result__text[data-v-9b682336],
.mint-generated-result__json[data-v-9b682336] {
  margin: 0;
  color: var(--text-primary);
}
.mint-generated-result__text[data-v-9b682336] {
  max-width: 72ch;
  white-space: pre-wrap;
  line-height: 1.65;
}
.mint-generated-result__json[data-v-9b682336] {
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: var(--bg-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.mint-generated-result__image[data-v-9b682336] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.mint-generated-result__artifact[data-v-9b682336] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}

.mint-generated-workspace[data-v-8c472f85] {
  position: relative;
  min-width: 0;
  min-height: calc(100vh - 5rem);
  padding: clamp(1rem, 2.5vw, 2.5rem);
  background: var(--bg-primary);
}
.mint-generated-workspace__loading[data-v-8c472f85] {
  display: flex;
  min-height: 24rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-secondary);
}
.mint-generated-workspace__header[data-v-8c472f85] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 76rem;
  margin: 0 auto 1.25rem;
}
.mint-generated-workspace__header h1[data-v-8c472f85] {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
}
.mint-generated-workspace__header p[data-v-8c472f85]:not(.mint-generated-workspace__eyebrow) {
  margin: 0.4rem 0 0;
  color: var(--text-secondary);
}
.mint-generated-workspace__eyebrow[data-v-8c472f85] {
  margin: 0 0 0.35rem;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}
.mint-generated-workspace__resources[data-v-8c472f85] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.mint-generated-workspace__resources span[data-v-8c472f85] {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.mint-generated-workspace__result[data-v-8c472f85] {
  max-width: 76rem;
  min-height: 24rem;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.75rem);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
.mint-generated-workspace__header[data-v-8c472f85] {
    flex-direction: column;
}
.mint-generated-workspace__resources[data-v-8c472f85] {
    justify-content: flex-start;
}
}

.mint-component-binding-renderer[data-v-c4a312d6] {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.mint-component-binding-renderer--grid[data-v-c4a312d6] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}
.mint-component-binding-renderer--stack[data-v-c4a312d6] {
  grid-template-columns: minmax(0, 1fr);
}
.mint-component-binding-renderer--dense[data-v-c4a312d6] {
  gap: 0.75rem;
}
.mint-component-binding-renderer__item[data-v-c4a312d6] {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--bg-card, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.06));
}
.mint-component-binding-renderer__header[data-v-c4a312d6] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f8fafc);
}
.mint-component-binding-renderer__title-group[data-v-c4a312d6] {
  min-width: 0;
}
.mint-component-binding-renderer__component[data-v-c4a312d6] {
  margin: 0;
  color: var(--text-primary, #0f172a);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
}
.mint-component-binding-renderer__source[data-v-c4a312d6],
.mint-component-binding-renderer__description[data-v-c4a312d6],
.mint-component-binding-renderer__empty[data-v-c4a312d6] {
  margin: 0;
  color: var(--text-secondary, #475569);
  font-size: 0.75rem;
  line-height: 1.4;
}
.mint-component-binding-renderer__description[data-v-c4a312d6] {
  max-width: 24rem;
  text-align: right;
}
.mint-component-binding-renderer__body[data-v-c4a312d6] {
  min-width: 0;
  padding: 1rem;
}
.mint-component-binding-renderer--dense .mint-component-binding-renderer__header[data-v-c4a312d6],
.mint-component-binding-renderer--dense .mint-component-binding-renderer__body[data-v-c4a312d6] {
  padding: 0.75rem;
}
.mint-component-binding-renderer__empty[data-v-c4a312d6] {
  padding: 1rem;
  border: 1px dashed var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--bg-secondary, #f8fafc);
  text-align: center;
}
@media (max-width: 720px) {
.mint-component-binding-renderer__header[data-v-c4a312d6] {
    display: block;
}
.mint-component-binding-renderer__description[data-v-c4a312d6] {
    max-width: none;
    margin-top: 0.25rem;
    text-align: left;
}
}

.mint-control-workspace-view[data-v-843d3e3e] {
  min-width: 0;
}
.mint-control-workspace-view__content[data-v-843d3e3e] {
  min-width: 0;
  padding: 1rem;
}

.mint-dose-design-workspace[data-v-cf34c3fb] {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px);
  gap: 1rem;
  align-items: start;
  min-width: 0;
}
@media (max-width: 900px) {
.mint-dose-design-workspace[data-v-cf34c3fb] {
    grid-template-columns: minmax(0, 1fr);
}
}

.mint-bio-template-experiment-workspace[data-v-d823d800] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.mint-bio-template-experiment-workspace__toolbar[data-v-d823d800] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mint-bio-template-experiment-workspace__status[data-v-d823d800] {
  flex: 1 1 auto;
  min-width: 0;
}
.mint-bio-template-experiment-workspace__actions[data-v-d823d800] {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}
.mint-bio-template-experiment-workspace__meta[data-v-d823d800],
.mint-bio-template-experiment-workspace__template-version[data-v-d823d800] {
  margin: 0;
  color: var(--text-secondary, #64748b);
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.75rem;
}
.mint-bio-template-experiment-workspace__templates[data-v-d823d800] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}
.mint-bio-template-experiment-workspace__template[data-v-d823d800] {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--bg-primary, #ffffff);
}
.mint-bio-template-experiment-workspace__template-id[data-v-d823d800] {
  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-experiment-workspace__toolbar[data-v-d823d800],
  .mint-bio-template-experiment-workspace__actions[data-v-d823d800] {
    align-items: stretch;
    flex-direction: column;
}
}

.mint-bio-template-preset-workspace[data-v-4c04c21f] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.mint-bio-template-preset-workspace__toolbar[data-v-4c04c21f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mint-bio-template-preset-workspace__status[data-v-4c04c21f] {
  flex: 1 1 auto;
  min-width: 0;
}
.mint-bio-template-preset-workspace__actions[data-v-4c04c21f] {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}
.mint-bio-template-preset-workspace__meta[data-v-4c04c21f],
.mint-bio-template-preset-workspace__sidebar-subtitle[data-v-4c04c21f],
.mint-bio-template-preset-workspace__template-meta[data-v-4c04c21f] {
  margin: 0;
  color: var(--text-secondary, #64748b);
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.75rem;
}
.mint-bio-template-preset-workspace__main[data-v-4c04c21f] {
  display: grid;
  grid-template-columns: minmax(16rem, max-content) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-width: 0;
}
.mint-bio-template-preset-workspace__sidebar-title[data-v-4c04c21f] {
  margin: 0;
  color: var(--text-primary, #0f172a);
  font-size: 0.875rem;
  font-weight: 600;
}
.mint-bio-template-preset-workspace__view-nav[data-v-4c04c21f] {
  margin-top: 0.5rem;
}
.mint-bio-template-preset-workspace__templates[data-v-4c04c21f] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}
.mint-bio-template-preset-workspace__template[data-v-4c04c21f] {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--bg-primary, #ffffff);
}
.mint-bio-template-preset-workspace__template-id[data-v-4c04c21f] {
  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-4c04c21f],
  .mint-bio-template-preset-workspace__actions[data-v-4c04c21f] {
    align-items: stretch;
    flex-direction: column;
}
.mint-bio-template-preset-workspace__main[data-v-4c04c21f] {
    grid-template-columns: minmax(0, 1fr);
}
}




/* MINT SDK Styles - Main entry point
 * This file combines all SDK styles for proper bundling
 */

/* CSS Variables and base styles */

/* MINT SDK CSS Variables & Utility Classes
 * Import this file in your plugin's main CSS/entry point:
 * @import '@morscherlab/mint-sdk/styles';
 */

/* ==========================================================================
   CSS Variables - Light Mode
   ========================================================================== */
:root {
  /* Shared control values (SDK control refresh, 2026-09-25) — private aliases,
     not new colors. Declared here: `html.dark` is the same element as
     `:root`, so the var() references resolve against the dark palette too
     (only the ink aliases need a dark value of their own).
     Two focus rules only (never as `outline` — --focus-ring* are box-shadows):
     - Field focus (input, select, textarea, popover triggers):
         border-color: var(--color-primary); box-shadow: var(--focus-ring-soft);
     - Pressable focus (buttons, checkbox, radio, toggle, slider thumb, chips):
         box-shadow: var(--focus-ring-offset); */
  /* Strong control border — unchecked checkbox/radio, toggle off track, dashed outlines (~3.2:1 light, ~4.2:1 dark). */
  --_control-border-strong: color-mix(in srgb, var(--text-secondary) 75%, var(--border-color));
  /* Field border on hover. */
  --_field-border-hover: color-mix(in srgb, var(--text-secondary) 60%, var(--border-color));
  /* Ink: primary / error text on card and tinted surfaces. The -hover tokens
     have no dark value, so html.dark lifts these toward --text-primary. */
  --_ink-primary: var(--color-primary-hover);
  --_ink-error: var(--mint-error-hover);

  /* Background colors */
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-hover: #F1F5F9;
  --border-color: #E5E7EB;
  --border-light: #F3F4F6;

  /* Text colors */
  --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: #14B8A6;
  --color-primary-hover: #0F766E;
  --color-primary-soft: rgba(20, 184, 166, 0.12);
  --color-cta: #06B6D4;
  --color-cta-hover: #0891B2;
  --color-purple: #8B5CF6;

  /* Entity accent colors — experiments (cyan) and projects (sky), from the
     MINT 1.1 card system. -soft backs icon chips and pills, -border outlines
     pills that sit on a card surface. */
  --color-experiment: #06B6D4;
  --color-experiment-hover: #0891B2;
  --color-experiment-soft: rgba(6, 182, 212, 0.12);
  --color-experiment-border: rgba(6, 182, 212, 0.3);
  --color-project: #0EA5E9;
  --color-project-hover: #0284C7;
  --color-project-soft: rgba(14, 165, 233, 0.12);
  --color-project-border: rgba(14, 165, 233, 0.32);

  /* MINT brand mark — used for browser theme-color, marketing chrome, app icon background */
  --mint-brand: #7BD0B5;
  --mint-brand-hover: #5FB89A;
  --mint-brand-soft: rgba(123, 208, 181, 0.12);

  /* Scrollbar */
  --scrollbar-track: #F3F4F6;
  --scrollbar-thumb: #D1D5DB;
  --scrollbar-hover: #9CA3AF;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* The MINT 1.1 card system uses exactly one shadow for every card. */
  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);

  /* Categorical sample scale — mirrored by SAMPLE_COLOR_SCALE in
     src/utils/color.ts. The JS constant carries the same hexes as a
     canvas/SVG/persistence-safe fallback; change both together. */
  --mint-sample-1: #3B82F6;
  --mint-sample-2: #10B981;
  --mint-sample-3: #EF4444;
  --mint-sample-4: #F59E0B;
  --mint-sample-5: #8B5CF6;
  --mint-sample-6: #F97316;
  --mint-sample-7: #06B6D4;
  --mint-sample-8: #14B8A6;
  --mint-sample-9: #6B7280;

  /* Rack / plate slot positions — mirrored by SLOT_COLORS in
     src/utils/color.ts. */
  --mint-slot-r: #ef4444;
  --mint-slot-g: #22c55e;
  --mint-slot-b: #3b82f6;
  --mint-slot-y: #eab308;

  /* Motion — the SDK's standard easing curve. */
  --mint-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Typography — Fira Sans for UI text, Fira Code for data, code and routes. */
  --font-sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Form element heights */
  --form-height-sm: 2rem;
  --form-height-md: 2.25rem;
  --form-height-lg: 3rem;

  /* Semantic colors */
  --mint-success: #10B981;
  --mint-success-hover: #059669;
  --mint-success-bg: rgba(16, 185, 129, 0.1);
  --mint-success-border: rgba(16, 185, 129, 0.3);
  --mint-error: #EF4444;
  --mint-error-hover: #DC2626;
  --mint-error-bg: rgba(239, 68, 68, 0.1);
  --mint-error-border: rgba(239, 68, 68, 0.3);
  --mint-warning: #F59E0B;
  --mint-warning-hover: #D97706;
  --mint-warning-bg: rgba(245, 158, 11, 0.1);
  --mint-warning-border: rgba(245, 158, 11, 0.3);
  /* Readable warning label on --mint-warning-bg (amber-700, 5.9:1). */
  --mint-warning-text: #B45309;
  --mint-info: #3B82F6;
  --mint-info-bg: rgba(59, 130, 246, 0.1);
  --mint-info-border: rgba(59, 130, 246, 0.3);

  /* Extended brand tokens */
  --color-primary-light: #93C5FD;

  /* Shared component tokens */
  --mint-disabled-opacity: 0.6;

  /* Focus ring tokens */
  --focus-ring: 0 0 0 2px var(--color-primary);
  --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
  --focus-ring-error: 0 0 0 2px var(--mint-error);

  /* Soft focus rings — 3px translucent. Used by all form primitives
     post-0.16 visual refresh. Solid variants above kept for legacy
     components that haven't migrated yet. */
  --focus-ring-soft: 0 0 0 3px rgba(20, 184, 166, 0.20);
  /* Red is perceptually brighter than teal at equal alpha; drop 2pp to keep visual weight matched. */
  --focus-ring-soft-error: 0 0 0 3px rgba(239, 68, 68, 0.18);

  /* Legacy aliases — still consumed by components that haven't migrated to the
     canonical --bg-*, --text-*, --color-*, --border-*, --shadow-*, --radius-*
     names. Each alias here has at least one caller; aliases with zero callers
     have been removed (see R-6 cleanup). Migrating remaining callers and
     deleting these aliases is tracked as follow-up work. */
  --mint-bg-primary: var(--bg-primary);
  --mint-bg-secondary: var(--bg-secondary);
  --mint-bg-card: var(--bg-card);
  --mint-bg-hover: var(--bg-tertiary);
  --mint-bg-input: var(--bg-secondary);
  --mint-text-primary: var(--text-primary);
  --mint-text-secondary: var(--text-secondary);
  --mint-text-muted: var(--text-muted);
  --mint-text-inverse: #FFFFFF;
  --mint-border: var(--border-color);
  --mint-border-focus: var(--color-primary);
  --mint-transition: 150ms ease;
}

/* ==========================================================================
   CSS Variables - Dark Mode
   ========================================================================== */
html.dark {
  /* Background colors */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-card: #1E293B;
  --bg-hover: #334155;
  --border-color: #334155;
  --border-light: #1E293B;

  /* Ink aliases (see :root): ~7:1 on --bg-card, tints included. */
  --_ink-primary: color-mix(in srgb, var(--color-primary) 50%, var(--text-primary));
  --_ink-error: color-mix(in srgb, var(--mint-error) 50%, var(--text-primary));

  /* Text colors */
  --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;
  --scrollbar-thumb: #475569;
  --scrollbar-hover: #64748B;

  /* Shadows - Dark mode */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.24), 0 1px 3px 0 rgb(0 0 0 / 0.32);

  /* Entity accent colors - Dark mode */
  --color-experiment: #22D3EE;
  --color-experiment-hover: #67E8F9;
  --color-experiment-soft: rgba(34, 211, 238, 0.16);
  --color-experiment-border: rgba(34, 211, 238, 0.36);
  --color-project: #38BDF8;
  --color-project-hover: #7DD3FC;
  --color-project-soft: rgba(56, 189, 248, 0.16);
  --color-project-border: rgba(56, 189, 248, 0.38);

  /* Semantic colors - Dark mode */
  --mint-success-bg: rgba(16, 185, 129, 0.15);
  --mint-error-bg: rgba(239, 68, 68, 0.15);
  --mint-warning-bg: rgba(245, 158, 11, 0.15);
  --mint-warning-text: #FCD34D;
  --mint-info-bg: rgba(59, 130, 246, 0.15);

  /* Focus ring - dark mode offset uses bg-primary instead of white */
  --focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
  --focus-ring-soft: 0 0 0 3px rgba(129, 140, 248, 0.28);
  --focus-ring-soft-error: 0 0 0 3px rgba(248, 113, 113, 0.26);

  /* Legacy aliases */
  --mint-text-inverse: #1E293B;
  --mint-border-focus: #60A5FA;

  color-scheme: dark;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
html {
  font-family: var(--font-sans);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background-color 0.15s, color 0.15s;
}

code, pre {
  font-family: var(--font-mono);
}

/* Native controls do not inherit the page font; Tailwind preflight covers this
   in the platform, but SDK consumers without it render buttons and selects in
   the UA font. */
button, input, select, textarea {
  font-family: inherit;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-cta);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}

.btn-cta:hover {
  background-color: var(--color-cta-hover);
}

.btn-cta:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--bg-tertiary);
}

.btn-secondary:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--mint-success);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}

.btn-success:hover {
  background-color: var(--mint-success-hover);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--mint-error);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}

.btn-danger:hover {
  background-color: var(--mint-error-hover);
}

/* ==========================================================================
   Card Styles
   ========================================================================== */
.card {
  background-color: var(--bg-card);
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s, border-color 0.15s;
}

.card-hover:hover {
  box-shadow: var(--shadow);
}

/* Floating card layout pattern */
.floating-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}

/* ==========================================================================
   Input Styles
   ========================================================================== */
.input-modern {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  outline: none;
}

.input-modern:hover {
  border-color: var(--color-primary);
}

.input-modern:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.input-modern::placeholder {
  color: var(--text-muted);
}

/* Select styles */
.select-modern {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  appearance: none;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.select-modern:hover {
  border-color: var(--color-primary);
}

.select-modern:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* Label styles */
.label-modern {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

/* ==========================================================================
   Toggle Switch
   ========================================================================== */
.toggle-switch {
  position: relative;
  width: 2rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: var(--bg-tertiary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.toggle-switch.active {
  background-color: var(--color-primary);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: white;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s ease;
}

.toggle-switch.active::after {
  transform: translateX(1rem);
}

/* ==========================================================================
   Checkbox Styles
   ========================================================================== */
.checkbox-modern {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--border-color);
  border-radius: 0.25rem;
  background-color: var(--bg-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: none;
  position: relative;
}

.checkbox-modern:hover {
  border-color: var(--color-primary);
}

.checkbox-modern:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-modern:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */
/* Hidden until hover: the thumb is transparent by default and appears on hover
   (or focus) of the scroll area. The gutter is always reserved so the reveal
   never reflows content. Standard properties first; the ::-webkit-* rules are
   the Safari fallback (Chrome ignores them once scrollbar-color is set). */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover,
*:focus-within {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

:hover::-webkit-scrollbar-thumb,
:focus-within::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover);
}

/* ==========================================================================
   Score/Status Colors
   ========================================================================== */
.score-good { color: #22c55e; }
.score-warning { color: #eab308; }
.score-bad { color: #ef4444; }

.score-bg-good { background-color: rgba(34, 197, 94, 0.15); }
.score-bg-warning { background-color: rgba(234, 179, 8, 0.15); }
.score-bg-bad { background-color: rgba(239, 68, 68, 0.15); }

/* ==========================================================================
   Alert/Badge Colors
   ========================================================================== */
.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
  background-color: var(--mint-info-bg);
  color: #3B82F6;
  border: 1px solid var(--mint-info-border);
}

/* ==========================================================================
   Page Transitions
   ========================================================================== */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ==========================================================================
   Hover States
   ========================================================================== */
.hover-bg:hover {
  background-color: var(--bg-tertiary);
}

/* ==========================================================================
   MINT Utility Classes (for Tailwind v4 compatibility)
   ========================================================================== */
.rounded-mint {
  border-radius: 0.5rem;
}

.rounded-mint-sm {
  border-radius: 0.375rem;
}

.rounded-mint-lg {
  border-radius: 0.75rem;
}

.bg-bg-hover {
  background-color: var(--bg-tertiary);
}

.bg-bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-bg-input {
  background-color: var(--bg-secondary);
}

.text-text-primary {
  color: var(--text-primary);
}

.text-text-secondary {
  color: var(--text-secondary);
}

.text-text-muted {
  color: var(--text-muted);
}

.border-border {
  border-color: var(--border-color);
}

.bg-mint-primary {
  background-color: var(--color-primary);
}

.text-mint-primary {
  color: var(--color-primary);
}

.border-mint-primary {
  border-color: var(--color-primary);
}

.bg-mint-primary\/5 {
  background-color: rgba(20, 184, 166, 0.05);
}

.hover\:border-mint-primary\/50:hover {
  border-color: rgba(20, 184, 166, 0.5);
}

/* Danger/error color utilities */
.text-mint-danger {
  color: var(--mint-error);
}

.bg-mint-danger {
  background-color: var(--mint-error);
}

.hover\:text-mint-danger:hover {
  color: var(--mint-error);
}

.hover\:bg-mint-danger\/10:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.hover\:bg-bg-hover:hover {
  background-color: var(--bg-tertiary);
}

.hover\:text-text-primary:hover {
  color: var(--text-primary);
}

.duration-mint {
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: ease;
}

/* ==========================================================================
   Background Color Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.bg-mint-primary-hover {
  background-color: var(--color-primary-hover);
}

.hover\:bg-mint-primary-hover:hover {
  background-color: var(--color-primary-hover);
}

.hover\:bg-mint-primary:hover {
  background-color: var(--color-primary);
}

.bg-mint-cta {
  background-color: var(--color-cta);
}

.hover\:bg-mint-cta-hover:hover {
  background-color: var(--color-cta-hover);
}

.bg-mint-success {
  background-color: var(--mint-success);
}

.hover\:bg-mint-success-hover:hover {
  background-color: var(--mint-success-hover);
}

.hover\:bg-mint-danger-hover:hover {
  background-color: var(--mint-error-hover);
}

.bg-mint-primary\/10 {
  background-color: rgba(20, 184, 166, 0.1);
}

.hover\:bg-mint-primary\/20:hover {
  background-color: rgba(20, 184, 166, 0.2);
}

.bg-mint-info {
  background-color: var(--mint-info);
}

.bg-mint-warning {
  background-color: var(--mint-warning);
}

.bg-mint-error {
  background-color: var(--mint-error);
}

/* ==========================================================================
   Text Color Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.text-mint-success {
  color: var(--mint-success);
}

.text-mint-warning {
  color: var(--mint-warning);
}

.text-mint-info {
  color: var(--mint-info);
}

.text-mint-error {
  color: var(--mint-error);
}

.hover\:text-mint-primary:hover {
  color: var(--color-primary);
}

.text-mint-primary\/80 {
  color: rgba(20, 184, 166, 0.8);
}

.hover\:text-mint-primary\/70:hover {
  color: rgba(20, 184, 166, 0.7);
}

/* ==========================================================================
   Border Color Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.border-mint-danger {
  border-color: var(--mint-error);
}

.border-mint-success {
  border-color: var(--mint-success);
}

.border-mint-warning {
  border-color: var(--mint-warning);
}

.border-mint-info {
  border-color: var(--mint-info);
}

.hover\:border-mint-primary:hover {
  border-color: var(--color-primary);
}

/* ==========================================================================
   Focus & Ring Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.focus\:ring-2:focus {
  box-shadow: var(--focus-ring);
}

.focus\:ring-mint-primary:focus {
  --tw-ring-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.focus\:ring-mint-danger:focus {
  box-shadow: var(--focus-ring-error);
}

.focus\:ring-offset-2:focus {
  box-shadow: var(--focus-ring-offset);
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:outline-none:focus {
  outline: none;
}

.ring-1 {
  box-shadow: 0 0 0 1px var(--color-primary);
}

.ring-2 {
  box-shadow: var(--focus-ring);
}

.ring-mint-primary {
  --tw-ring-color: var(--color-primary);
}

/* ==========================================================================
   Focus-within Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.focus-within\:ring-2:focus-within {
  box-shadow: var(--focus-ring);
}

.focus-within\:ring-mint-primary:focus-within {
  box-shadow: var(--focus-ring);
}

.focus-within\:ring-mint-danger:focus-within {
  box-shadow: var(--focus-ring-error);
}

.focus-within\:border-transparent:focus-within {
  border-color: transparent;
}

/* ==========================================================================
   Placeholder Utilities (Tailwind v4 compatibility)
   ========================================================================== */
.placeholder\:text-text-muted::placeholder {
  color: var(--text-muted);
}

/* ==========================================================================
   Core Layout Utilities (Tailwind v4 compatibility)
   ========================================================================== */

/* Flexbox */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* Gap */
.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

/* Width/Height */
.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-8 {
  height: 2rem;
}

.min-w-0 {
  min-width: 0;
}

/* Spacing */
.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.space-y-1 > * + * {
  margin-top: 0.25rem;
}

/* Positioning */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top-4 {
  top: 1rem;
}

.right-4 {
  right: 1rem;
}

.left-4 {
  left: 1rem;
}

.-bottom-2 {
  bottom: -0.5rem;
}

.-translate-x-1\/2 {
  transform: translateX(-50%);
}

.z-10 {
  z-index: 10;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.text-white {
  color: white;
}

/* Border */
.rounded-sm {
  border-radius: 0.125rem;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-dashed {
  border-style: dashed;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

/* Opacity */
.opacity-0 {
  opacity: 0;
}

/* Pointer Events */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* Transforms */
.rotate-180 {
  transform: rotate(180deg);
}

/* Animations */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Max Width */
.max-w-sm {
  max-width: 24rem;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Shared surfaces — before component styles so components can refine them */
/* Shared popover surface + menu item (SDK control refresh 2d).
 * One floating surface and one row style for every menu, listbox and picker
 * dropdown. Positioning (fixed/absolute, z-index, width) stays with the
 * component; this file owns only the look.
 *
 *   <div class="mint-popover" role="menu">
 *     <button class="mint-menu-item" role="menuitem">Rename</button>
 *     <div class="mint-menu-separator" role="separator"></div>
 *     <button class="mint-menu-item mint-menu-item--danger" role="menuitem">Delete</button>
 *   </div>
 *
 * Rich rows: __text > __label + __description, then __meta, then __check
 * (render __check on every row of a selectable list so the column is
 * reserved; it shows only on --selected). A danger item is always preceded
 * by a .mint-menu-separator.
 */

.mint-popover {
  display: flex;
  box-sizing: border-box; /* component widths (e.g. 100% of the trigger) include the padding and border */
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.mint-menu-item {
  display: flex;
  box-sizing: border-box; /* <a>/<li> rows are content-box by default and would overflow the list by the padding */
  width: 100%;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

/* Two-line rows keep the 32px floor and grow with 6px vertical padding. */
.mint-menu-item:has(.mint-menu-item__description) {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Pointer hover and keyboard highlight look the same. */
.mint-menu-item:hover:not(:disabled, [aria-disabled='true']),
.mint-menu-item:focus-visible,
.mint-menu-item--active {
  outline: none;
  background: var(--bg-hover);
}

/* Real focus also gets the ring; --active (aria-activedescendant) keeps focus on its input. */
.mint-menu-item:focus-visible {
  box-shadow: var(--focus-ring-offset);
}

.mint-menu-item:disabled,
.mint-menu-item[aria-disabled='true'] {
  color: var(--text-muted);
  cursor: not-allowed;
}

.mint-menu-item__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.mint-menu-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-menu-item:has(.mint-menu-item__description) .mint-menu-item__label {
  font-weight: 500;
}

.mint-menu-item__description {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* --text-secondary drops to ~4.3:1 on --bg-hover in both themes. */
.mint-menu-item:hover:not(:disabled, [aria-disabled='true']) .mint-menu-item__description,
.mint-menu-item:focus-visible .mint-menu-item__description,
.mint-menu-item--active .mint-menu-item__description {
  color: var(--text-secondary-strong);
}

.mint-menu-item__meta {
  flex: none;
  color: var(--text-secondary-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.mint-menu-item__check {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-primary);
  visibility: hidden;
}

/* Selected = trailing check + primary text, never a filled row. */
.mint-menu-item--selected {
  color: var(--_ink-primary);
}

.mint-menu-item--selected .mint-menu-item__check {
  visibility: visible;
}

.mint-menu-item--danger {
  color: var(--_ink-error);
}

/* Dark: the check matches the lifted selected ink. */
:where(html.dark) .mint-menu-item__check {
  color: var(--_ink-primary);
}

.mint-menu-item--danger:hover:not(:disabled, [aria-disabled='true']),
.mint-menu-item--danger:focus-visible,
.mint-menu-item--danger.mint-menu-item--active {
  background: color-mix(in srgb, var(--mint-error) 10%, transparent);
}

/* Light danger ink on the red tint is ~4.2:1; darken it toward --text-primary (>= 6:1). */
:where(html:not(.dark)) .mint-menu-item--danger:hover:not(:disabled, [aria-disabled='true']),
:where(html:not(.dark)) .mint-menu-item--danger:focus-visible,
:where(html:not(.dark)) .mint-menu-item--danger.mint-menu-item--active {
  color: color-mix(in srgb, var(--mint-error-hover) 70%, var(--text-primary));
}

.mint-menu-separator {
  height: 1px;
  flex: none;
  margin: 4px 0;
  background: var(--border-light);
}

/* Dark --border-light equals --bg-card, which hides every hairline inside a popover
   (separators, search and footer dividers); alias it to --border-color there. */
:where(html.dark) .mint-popover {
  --border-light: var(--border-color);
}
/* Component styles - alphabetically ordered */
/* ActionMenu — compact square trigger with a teleported, viewport-safe menu.
   Surface and rows come from .mint-popover / .mint-menu-item (popover.css, 2d);
   __panel and __item stay as aliases and own only placement. */

.mint-action-menu {
  display: inline-flex;
  flex-shrink: 0;
}

.mint-action-menu__trigger-icon {
  width: 1rem;
  height: 1rem;
}

.mint-action-menu__panel {
  position: fixed;
  z-index: 1000;
  min-width: 10rem;
  max-width: min(18rem, calc(100vw - 1rem));
}

.mint-action-menu__check {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Unchecked radio rows keep the check's width so labels stay aligned. */
.mint-action-menu__check--off {
  visibility: hidden;
}
.mint-adduct-text {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-adduct-text--mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }
.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; font-weight: 650; }

.mint-adduct-text--xs {
  font-size: 0.6875rem;
  line-height: 1rem;
}

.mint-adduct-text--inherit {
  font-size: inherit;
  line-height: inherit;
}

.mint-adduct-text--badge {
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

/* On a filled surface the text inherits that surface's ink (9c: the old
   white literal went white-on-white on light cards). */
.mint-adduct-text--on-primary {
  color: inherit;
}

.mint-adduct-text--badge.mint-adduct-text--on-primary {
  background: color-mix(in srgb, currentColor 20%, transparent);
}

/* Charge as a superscript by relative offset, so the line box keeps its height. */
.mint-adduct-text__charge {
  position: relative;
  top: -0.5em;
  font-size: 0.72em;
  line-height: 0;
  vertical-align: baseline;
  color: inherit;
}

.mint-adduct-text--muted,
.mint-adduct-text--empty {
  color: var(--text-muted);
}

/* AlertBox Component Styles */

.mint-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid;
  border-radius: var(--radius-md);
}

.mint-alert--success {
  background-color: var(--mint-success-bg);
  border-color: var(--mint-success-border);
}

.mint-alert--error {
  background-color: var(--mint-error-bg);
  border-color: var(--mint-error-border);
}

.mint-alert--warning {
  background-color: var(--mint-warning-bg);
  border-color: var(--mint-warning-border);
}

.mint-alert--info {
  background-color: var(--mint-info-bg);
  border-color: var(--mint-info-border);
}

/* Semantic color stays in the surface and the icon only (1h, same rule as Toast). */
.mint-alert__icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;   /* centers on the first 13px/1.5 text line */
  flex-shrink: 0;
}

.mint-alert__icon--success { color: var(--mint-success-hover); }
.mint-alert__icon--error   { color: var(--_ink-error); }
.mint-alert__icon--warning { color: var(--mint-warning-text); }
.mint-alert__icon--info    { color: var(--mint-info); }

.mint-alert__content {
  flex: 1;
  min-width: 0;
}

.mint-alert__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: 0 !important;
  margin-bottom: 0.125rem !important;
  padding: 0 !important;
}

.mint-alert__message {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary-strong);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.mint-alert__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.mint-alert__dismiss {
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mint-alert__dismiss:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.mint-alert__dismiss:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-alert__dismiss-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Base: shared by both roles */
.mint-container {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Card role (default — no direction prop) */
.mint-container--card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  padding: 1rem;
}

.mint-container--scrollable {
  overflow-y: auto;
}

/* Layout role (direction prop set) */
.mint-container--layout {
  display: flex;
}

.mint-container--row {
  flex-direction: row;
}

.mint-container--column {
  flex-direction: column;
}

/* AppLayout Component Styles */

.mint-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.mint-layout__topbar {
  flex-shrink: 0;
}

.mint-layout__body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

.mint-layout--sidebar-right .mint-layout__body {
  flex-direction: row-reverse;
}

.mint-layout__sidebar {
  flex-shrink: 0;
  overflow: hidden;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
}

/* Hide layout wrapper when inner sidebar is hidden (no panels for active view) */
.mint-layout__sidebar:has(.mint-sidebar--hidden) {
  display: none;
}

.mint-layout__main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mint-layout__sidebar-toggle,
.mint-layout__sidebar-backdrop {
  display: none;
}

/* Strip topbar card variant inside layout — layout handles containment */
.mint-layout .mint-topbar--card {
  margin: 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
}

/* Floating variant: all sections appear as separate cards on a background */
.mint-layout--floating {
  background-color: var(--bg-primary);
  padding: 1rem;
  gap: 1rem;
}

.mint-layout--floating .mint-layout__topbar {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.mint-layout--floating .mint-layout__body {
  gap: 1rem;
}

.mint-layout--floating .mint-layout__sidebar {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.mint-layout--floating .mint-layout__main {
  gap: 1rem;
}

/* In floating mode, inner components don't need borders since the wrapper provides them */
.mint-layout--floating .mint-sidebar {
  border-right: none;
  border-left: none;
}

.mint-layout--floating .mint-topbar {
  border: none;
  border-bottom: none;
  margin: 0;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

@media (max-width: 1023.98px) {
  .mint-layout--responsive-sidebar .mint-layout__sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 42;
    width: min(20rem, calc(100vw - 3rem));
    max-width: calc(100vw - 3rem);
    transform: translateX(calc(-100% - 1rem));
    transition: transform 180ms ease;
  }

  .mint-layout--responsive-sidebar.mint-layout--sidebar-right .mint-layout__sidebar {
    right: 0;
    left: auto;
    transform: translateX(calc(100% + 1rem));
  }

  .mint-layout--responsive-sidebar.mint-layout--sidebar-open .mint-layout__sidebar {
    transform: translateX(0);
  }

  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 43;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }

  .mint-layout--responsive-sidebar.mint-layout--sidebar-right .mint-layout__sidebar-toggle {
    right: 0.75rem;
    left: auto;
  }

  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-card);
  }

  .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-offset);
  }

  .mint-layout__sidebar-toggle-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .mint-layout--responsive-sidebar .mint-layout__sidebar-backdrop {
    position: absolute;
    inset: 0;
    z-index: 41;
    display: block;
    background: rgba(15, 23, 42, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-layout--responsive-sidebar .mint-layout__sidebar {
    transition: none;
  }
}

/* AppSidebar Component Styles */

.mint-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-secondary);
  transition: width 180ms ease, background-color 150ms ease;
}

.mint-sidebar--hidden {
  display: none;
}

.mint-sidebar--right:not(.mint-sidebar--floating) {
  border-right: none;
  border-left: 1px solid var(--border-color);
}

/* Floating shell — the platform's layout language. Kept as-is; only the
   nested per-section card inside it was removed. */
.mint-sidebar--floating {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  z-index: 40;
}

.mint-sidebar--floating.mint-sidebar--left {
  left: 0;
}

.mint-sidebar--floating.mint-sidebar--right {
  right: 0;
}

.mint-sidebar--static {
  height: 100%;
  border-right: 1px solid var(--border-color);
}

/* Header / Footer slots */
.mint-sidebar__header {
  padding: 0.625rem 0.875rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.mint-sidebar--comfortable .mint-sidebar__header {
  padding: 0.875rem 1rem;
}

.mint-sidebar__heading {
  min-width: 0;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
}

.mint-sidebar__heading-copy {
  min-width: 0;
  flex: 1;
}

.mint-sidebar__title {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-sidebar__subtitle {
  margin: 0.125rem 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-sidebar__badge {
  flex-shrink: 0;
  min-width: 1.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-cta) 14%, transparent);
  color: var(--color-cta);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mint-sidebar__collapse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.mint-sidebar__collapse-button:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mint-sidebar__collapse-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-sidebar__collapse-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 160ms ease;
}

.mint-sidebar__collapse-icon--collapsed {
  transform: rotate(180deg);
}

.mint-sidebar--collapsed .mint-sidebar__header {
  justify-content: center;
  padding-inline: 0.5rem;
}

.mint-sidebar__footer {
  padding: 0.625rem 0.875rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
}

/* Scrollable sections area */
.mint-sidebar__sections {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ---------- Flat section groups: header rows separated by one hairline ---------- */

.mint-sidebar__group {
  flex-shrink: 0;
}

.mint-sidebar__group + .mint-sidebar__group {
  border-top: 1px solid var(--border-light);
}

.mint-sidebar__group-head {
  display: flex;
  align-items: center;
  transition: background-color 120ms ease;
}

.mint-sidebar__group-head:hover {
  background: var(--bg-hover);
}

.mint-sidebar__group-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.4375rem 0.5rem 0.4375rem 0.875rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.mint-sidebar__group-toggle:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring-soft);
}

.mint-sidebar__group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
}

.mint-sidebar__group-svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sidebar__group-text-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.mint-sidebar__group-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
}

.mint-sidebar__group-label {
  flex: 0 1 auto;
  min-width: max-content;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 120ms ease;
}

.mint-sidebar__group--closed .mint-sidebar__group-label {
  color: var(--text-secondary);
}

/* Subtitle carries file names and parameter values, not prose: mono, and the
   disposable half when the row truncates. */
.mint-sidebar__group-subtitle {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mint-sidebar__group-tail {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.375rem;
  padding-right: 0.625rem;
}

.mint-sidebar__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 0.1875rem;
  background: color-mix(in srgb, var(--mint-sidebar-tone) 14%, transparent);
  color: var(--mint-sidebar-tone);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mint-sidebar__group-action,
.mint-sidebar__chevron-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.mint-sidebar__group-action {
  color: var(--mint-sidebar-tone, var(--text-secondary));
}

.mint-sidebar__group-action:hover:not(:disabled),
.mint-sidebar__chevron-button:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mint-sidebar__group-action:focus-visible,
.mint-sidebar__chevron-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-sidebar__group-action:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-sidebar__group-action-icon,
.mint-sidebar__chevron {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sidebar__chevron {
  transition: transform 180ms var(--mint-ease-out-quart);
}

.mint-sidebar__chevron--open {
  transform: rotate(180deg);
}

/* Inline enable switch: 26×15 track, 11px knob. */
.mint-sidebar__switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 26px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.mint-sidebar__switch--on {
  background: var(--color-primary);
}

.mint-sidebar__switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sidebar__switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: white;
  box-shadow: var(--shadow-sm);
  transition: left 180ms var(--mint-ease-out-quart);
}

.mint-sidebar__switch--on .mint-sidebar__switch-knob {
  left: 13px;
}

.mint-sidebar__group-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.125rem 0.875rem 0.75rem;
}

/* Comfortable density: the old roomier spacing as an opt-in. */
.mint-sidebar--comfortable .mint-sidebar__group-toggle {
  min-height: 2.625rem;
  padding: 0.625rem 0.5rem 0.625rem 1rem;
}

.mint-sidebar--comfortable .mint-sidebar__group-tail {
  padding-right: 0.75rem;
}

.mint-sidebar--comfortable .mint-sidebar__group-body {
  gap: 0.875rem;
  padding: 0.25rem 1rem 1rem;
}

/* ---------- Collapsed rail ---------- */

.mint-sidebar__collapsed {
  flex: 1 1 0;
  min-height: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.mint-sidebar__collapsed--default {
  padding-top: 0.75rem;
}

.mint-sidebar__rail-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.mint-sidebar__rail-item:hover {
  background: var(--bg-tertiary);
  transform: translateY(-1px);
}

.mint-sidebar__rail-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-sidebar__rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  transition: transform 150ms ease;
}

.mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
  transform: scale(1.04);
}

.mint-sidebar__rail-svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.mint-sidebar__rail-text-icon {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.mint-sidebar__rail-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--mint-sidebar-tone);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Semantic tones shared by the rail badge, the inline tag and section actions. */
.mint-sidebar__rail-badge--primary,
.mint-sidebar__tag--primary,
.mint-sidebar__group-action--primary {
  --mint-sidebar-tone: var(--color-primary);
}

.mint-sidebar__rail-badge--cta,
.mint-sidebar__tag--cta,
.mint-sidebar__group-action--cta {
  --mint-sidebar-tone: var(--color-cta);
}

.mint-sidebar__rail-badge--success,
.mint-sidebar__tag--success,
.mint-sidebar__group-action--success {
  --mint-sidebar-tone: var(--mint-success);
}

.mint-sidebar__rail-badge--warning,
.mint-sidebar__tag--warning,
.mint-sidebar__group-action--warning {
  --mint-sidebar-tone: var(--mint-warning);
}

.mint-sidebar__tag--warning {
  color: var(--mint-warning-text);
}

.mint-sidebar__rail-badge--error,
.mint-sidebar__tag--error,
.mint-sidebar__group-action--error {
  --mint-sidebar-tone: var(--mint-error);
}

.mint-sidebar__rail-badge--info,
.mint-sidebar__tag--info,
.mint-sidebar__group-action--info {
  --mint-sidebar-tone: var(--mint-info);
}

.mint-sidebar__rail-badge--neutral,
.mint-sidebar__tag--neutral,
.mint-sidebar__group-action--neutral {
  --mint-sidebar-tone: var(--text-secondary);
}

.mint-sidebar__footer--collapsed {
  padding: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-sidebar,
  .mint-sidebar__rail-item,
  .mint-sidebar__rail-icon,
  .mint-sidebar__chevron,
  .mint-sidebar__switch,
  .mint-sidebar__switch-knob {
    transition: none;
  }

  .mint-sidebar__rail-item:hover,
  .mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
    transform: none;
  }
}

/* AppTopBar - BEM-style naming for external package consumers */

/* Motion tokens — shared across AppTopBar subcomponents */
:root {
  --mint-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base topbar styles */
.mint-topbar {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--bg-secondary);
  box-sizing: border-box;
}

/* Main container layout — relative so the center can anchor to viewport midline */
.mint-topbar__container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
  position: relative;
}

/* Brand container */
.mint-topbar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mint-topbar__identity {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Slotted logos sized above 36px shrink to fit instead of stretching the tile. */
.mint-topbar__identity > * {
  max-width: 100%;
  max-height: 100%;
}

/* Left and right fields share the 36px identity tile height. */
.mint-topbar .mint-experiment-popover__trigger,
.mint-topbar .mint-experiment-popover__save-trigger {
  height: 2.25rem;
}

.mint-topbar .mint-experiment-popover__save-trigger {
  width: 2.25rem;
}

/* Centered section — absolute so asymmetric left/right weight never shifts the
   pill-nav off the topbar midline. Pointer-events: none lets the pill-nav
   overlay the background while remaining interactive via its own children. */
.mint-topbar__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.mint-topbar__center > * {
  pointer-events: auto;
}

.mint-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: auto;
}

/* Logo styles */
.mint-topbar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-topbar__logo-icon {
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-topbar__logo-text {
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}

.mint-topbar__title-only {
  font-weight: 600;
  color: var(--text-primary);
}

/* Static plugin identity: name only, not a control (5a) */
.mint-topbar__plugin-identity {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.375rem 0 0;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.mint-topbar__plugin-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variant: card - inline card with margins and rounded corners */
.mint-topbar--card {
  width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
}

/* Variant: default - basic inline header */
.mint-topbar--default {
  border-bottom: 1px solid var(--border-color);
}

.mint-topbar-home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.mint-topbar-home-link:hover {
  opacity: 0.8;
}

/* Title + subtitle stay inside the 36px control row. */
.mint-topbar-title-group {
  display: flex;
  flex-direction: column;
}

.mint-topbar-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.15;
}

.mint-topbar-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.2;
}

/* Right-side buttons (notifications, settings, admin) share the IconButton
   ghost look: 32px, --radius-md, 16px icons, neutral ink, offset focus ring. */
.mint-topbar__icon-btn,
.mint-topbar__settings-btn,
.mint-topbar__admin-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

.mint-topbar__icon-btn:hover,
.mint-topbar__settings-btn:hover,
.mint-topbar__admin-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-topbar__icon-btn:focus-visible,
.mint-topbar__settings-btn:focus-visible,
.mint-topbar__admin-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-topbar__icon-btn-icon,
.mint-topbar__settings-icon,
.mint-topbar__admin-icon {
  width: 1rem;
  height: 1rem;
}

/* The ring takes the bar color so the dot reads cut out of the icon. */
.mint-topbar__icon-btn-dot {
  position: absolute;
  top: 0.4375rem;
  right: 0.4375rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background: var(--color-cta);
  box-shadow: 0 0 0 2px var(--bg-secondary);
  pointer-events: none;
}

.mint-topbar__icon-btn:hover .mint-topbar__icon-btn-dot {
  box-shadow: 0 0 0 2px var(--bg-hover);
}

/* Divider before the account menu. */
.mint-topbar__right > .mint-avatar-menu {
  display: inline-flex;
  align-items: center;
}

.mint-topbar__right > .mint-avatar-menu::before {
  content: '';
  width: 1px;
  height: 1.25rem;
  margin: 0 0.375rem;
  background: var(--border-color);
}

@media (prefers-reduced-motion: reduce) {
  .mint-topbar__icon-btn,
  .mint-topbar__settings-btn,
  .mint-topbar__admin-btn {
    transition: none;
  }
}

/* Standalone mode badge */
.mint-topbar__standalone-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mint-warning-text);
  background: var(--mint-warning-bg);
  border: 1px solid var(--mint-warning-border);
  border-radius: 9999px;
  white-space: nowrap;
  user-select: none;
}
/* BaseButton Component Styles */

.mint-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  /* Tactile physicality: 150ms ease-out-quart for rising states (default → hover).
     Dimension comes from a soft colored shadow (added per-variant below) plus a
     1px translateY lift on hover — no gradient overlay. Press is snapped to 50ms
     via the :active override so the down-stroke feels instantaneous. */
  transition:
    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  /* Pre-stage transform so initial paint and active state share the same
     transform layer — prevents a 1px flicker on first press. */
  transform: translateY(0);
}

/* Hover: gentle lift. Per-variant shadows deepen on hover below. */
.mint-button:hover:not(.mint-button--disabled) {
  transform: translateY(-1px);
}

/* Press: 50ms snap back to baseline, shadow off.
   The asymmetry between 50ms press and 150ms rise creates the spring-release
   sensation users recognize from mechanical keyboards. */
.mint-button:active:not(.mint-button--disabled) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.05s;
}

.mint-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-button--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
.mint-button--primary.mint-button--disabled,
.mint-button--cta.mint-button--disabled,
.mint-button--danger.mint-button--disabled,
.mint-button--success.mint-button--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.mint-button--full-width {
  width: 100%;
}

/* Variants */
.mint-button--primary {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 1px 2px rgba(20, 184, 166, 0.20);
}

.mint-button--primary:hover:not(.mint-button--disabled) {
  background-color: var(--color-primary-hover);
  box-shadow: 0 2px 5px rgba(20, 184, 166, 0.28);
}

.mint-button--secondary {
  background-color: var(--bg-secondary);
  color: var(--text-secondary-strong);
  border: 1px solid var(--border-color);
  /* Secondary is lower-emphasis through surface, border, and shadow, but keeps
     medium label weight so it still reads as an actionable button. */
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}

.mint-button--secondary:hover:not(.mint-button--disabled) {
  background-color: var(--bg-tertiary);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.mint-button--cta {
  background-color: var(--color-cta);
  color: white;
  box-shadow: 0 1px 2px rgba(249, 115, 22, 0.20);
}

.mint-button--cta:hover:not(.mint-button--disabled) {
  background-color: var(--color-cta-hover);
  box-shadow: 0 2px 5px rgba(249, 115, 22, 0.28);
}

.mint-button--danger {
  background-color: var(--mint-error);
  color: white;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.20);
}

.mint-button--danger:hover:not(.mint-button--disabled) {
  background-color: var(--mint-error-hover);
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.28);
}

.mint-button--success {
  background-color: var(--mint-success);
  color: white;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.20);
}

.mint-button--success:hover:not(.mint-button--disabled) {
  background-color: var(--mint-success-hover);
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.28);
}

.mint-button--ghost {
  background-color: transparent;
  color: var(--text-secondary-strong);
  /* Lowest-emphasis variant: regular (400) weight, below secondary. */
  font-weight: 400;
}

.mint-button--ghost:hover:not(.mint-button--disabled) {
  background-color: var(--bg-tertiary);
}

/* Sizes */
.mint-button--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: var(--form-height-sm);
}

.mint-button--secondary.mint-button--sm {
  font-weight: 500;
}

.mint-button--md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-button--lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

/* Spinner */
.mint-button__spinner {
  animation: mint-button-spin 1s linear infinite;
  width: 1rem;
  height: 1rem;
}

@keyframes mint-button-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Respect motion preferences: disable lift/press but keep color/shadow
   transitions (those don't trigger vestibular responses). */
@media (prefers-reduced-motion: reduce) {
  .mint-button {
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
  .mint-button:hover:not(.mint-button--disabled),
  .mint-button:active:not(.mint-button--disabled) {
    transform: none;
  }
}
/* BaseCheckbox Component Styles */

.mint-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.mint-checkbox--default {
  width: fit-content;
}

.mint-checkbox--row {
  width: 100%;
  min-height: 2rem;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  background: transparent;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.mint-checkbox--row:hover {
  background: var(--bg-hover);
}

.mint-checkbox--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-checkbox--disabled.mint-checkbox--row:hover {
  background: transparent;
}

.mint-checkbox__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.mint-checkbox--row:hover .mint-checkbox__row-icon {
  transform: scale(1.04);
}

.mint-checkbox__row-svg {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-checkbox__row-text-icon {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.mint-checkbox__copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.mint-checkbox__copy .mint-tooltip {
  max-width: 100%;
}

.mint-checkbox--row .mint-checkbox__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-checkbox__label--tooltip {
  cursor: help;
}

.mint-checkbox__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mint-checkbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mint-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1.5px solid var(--_control-border-strong);
  background-color: var(--bg-card);
  color: var(--color-primary); /* SVG checkmark inherits currentColor */
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
  cursor: pointer;
}

.mint-checkbox__box--checked,
.mint-checkbox__box--indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.mint-checkbox__native:focus-visible + .mint-checkbox__box {
  box-shadow: var(--focus-ring-offset);
}

.mint-checkbox__native:disabled + .mint-checkbox__box {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--checked,
.mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
  background-color: var(--text-muted);
  border-color: var(--text-muted);
  color: #FFFFFF;
}

.mint-checkbox__box--sm {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}

.mint-checkbox__box--md {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.mint-checkbox__box--lg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.mint-checkbox__icon {
  color: inherit;
}

.mint-checkbox__icon--sm {
  width: 10px;
  height: 10px;
}

.mint-checkbox__icon--md {
  width: 12px;
  height: 12px;
}

.mint-checkbox__icon--lg {
  width: 14px;
  height: 14px;
}

.mint-checkbox__label {
  color: var(--text-primary);
  line-height: 1.25;
}

.mint-checkbox__label--sm {
  font-size: 0.875rem;
}

.mint-checkbox__label--md {
  font-size: 0.875rem;
}

.mint-checkbox__label--lg {
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-checkbox--row,
  .mint-checkbox__row-icon,
  .mint-checkbox__box {
    transition: none;
  }

  .mint-checkbox--row:hover .mint-checkbox__row-icon {
    transform: none;
  }
}

/* CollapsibleCard Component Styles */

.mint-collapsible-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-card);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.mint-collapsible-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--border-color));
  box-shadow: var(--shadow-sm);
}

.mint-collapsible-card__header-shell {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--bg-card);
  transition: background-color 0.15s ease;
}

.mint-collapsible-card__header-shell:hover {
  background-color: var(--bg-hover);
}

.mint-collapsible-card__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  padding: 0.75rem;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  gap: 0.75rem;
  font-family: inherit;
  min-height: 3rem;
}

.mint-collapsible-card__header:hover {
  background-color: transparent;
}

.mint-collapsible-card__header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.mint-collapsible-card__header--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-collapsible-card__title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.mint-collapsible-card__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: transform 180ms ease, background-color 150ms ease;
}

.mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge {
  transform: scale(1.04);
}

.mint-collapsible-card__icon {
  width: 1rem;
  height: 1rem;
}

.mint-collapsible-card__icon-text {
  font-size: 1rem;
  line-height: 1;
}

.mint-collapsible-card__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.mint-collapsible-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-collapsible-card__subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-collapsible-card__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  padding-right: 0.625rem;
}

.mint-collapsible-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--mint-sidebar-badge-color) 14%, transparent);
  color: var(--mint-sidebar-badge-color);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mint-collapsible-card__badge--primary,
.mint-collapsible-card__action--primary {
  --mint-sidebar-badge-color: var(--color-primary);
}

.mint-collapsible-card__badge--cta,
.mint-collapsible-card__action--cta {
  --mint-sidebar-badge-color: var(--color-cta);
}

.mint-collapsible-card__badge--success,
.mint-collapsible-card__action--success {
  --mint-sidebar-badge-color: var(--mint-success);
}

.mint-collapsible-card__badge--warning,
.mint-collapsible-card__action--warning {
  --mint-sidebar-badge-color: var(--mint-warning);
}

.mint-collapsible-card__badge--error,
.mint-collapsible-card__action--error {
  --mint-sidebar-badge-color: var(--mint-error);
}

.mint-collapsible-card__badge--info,
.mint-collapsible-card__action--info {
  --mint-sidebar-badge-color: var(--mint-info);
}

.mint-collapsible-card__badge--neutral,
.mint-collapsible-card__action--neutral {
  --mint-sidebar-badge-color: var(--text-secondary);
}

.mint-collapsible-card__action,
.mint-collapsible-card__chevron-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--mint-sidebar-badge-color, var(--text-muted));
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.mint-collapsible-card__action:hover,
.mint-collapsible-card__chevron-button:hover {
  color: var(--mint-sidebar-badge-color, var(--text-secondary));
  background: color-mix(in srgb, var(--mint-sidebar-badge-color, var(--text-secondary)) 10%, transparent);
}

.mint-collapsible-card__action:focus-visible,
.mint-collapsible-card__chevron-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-collapsible-card__action:disabled,
.mint-collapsible-card__action--disabled,
.mint-collapsible-card__chevron-button:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-collapsible-card__action-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-collapsible-card__action-text-icon {
  font-size: 0.8125rem;
  line-height: 1;
}

.mint-collapsible-card__toggle {
  display: flex;
  align-items: center;
}

/* `toggleColor` reaches the BaseToggle track through this private property (10a). */
.mint-collapsible-card__toggle .mint-toggle__track--on {
  background-color: var(--_cc-toggle-on, var(--color-primary));
}

.mint-collapsible-card__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.mint-collapsible-card__chevron--open {
  transform: rotate(180deg);
}

.mint-collapsible-card__header-shell:hover .mint-collapsible-card__chevron {
  color: var(--text-secondary);
}

.mint-collapsible-card__body {
  border-top: 1px solid var(--border-color);
}

.mint-collapsible-card__content {
  padding: 0.75rem;
}

/* --------------------------------------------------------------------------
   Dense variant — compact headers, no badge bg, tighter content
   -------------------------------------------------------------------------- */
.mint-collapsible-card--dense .mint-collapsible-card__header {
  padding: 0.5rem 0.75rem;
  min-height: auto;
  gap: 0.5rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__title-section {
  gap: 0.5rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__icon-badge {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius);
}

.mint-collapsible-card--dense .mint-collapsible-card__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__title {
  font-size: 0.8125rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__subtitle {
  font-size: 0.6875rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__actions {
  gap: 0.25rem;
  padding-right: 0.5rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__chevron {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-collapsible-card--dense .mint-collapsible-card__content {
  padding: 0.5rem 0.75rem 0.75rem;
  gap: 0.625rem;
}

/* Collapse transition */
.collapse-enter-active,
.collapse-leave-active {
  transition: all 0.2s ease;
  overflow: hidden;
}

.collapse-enter-from,
.collapse-leave-to {
  opacity: 0;
  max-height: 0;
}

.collapse-enter-to,
.collapse-leave-from {
  opacity: 1;
  max-height: 500px;
}

@media (prefers-reduced-motion: reduce) {
  .mint-collapsible-card__chevron {
    transition: none;
  }

  .mint-collapsible-card,
  .mint-collapsible-card__icon-badge,
  .mint-collapsible-card__action,
  .mint-collapsible-card__chevron-button {
    transition: none;
  }

  .mint-collapsible-card:hover,
  .mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge {
    transform: none;
  }

  .collapse-enter-active,
  .collapse-leave-active {
    transition: none;
  }
}

/* DatePicker Component Styles
   The calendar grid (header, weekdays, days) is shared with DateTimePicker via
   CalendarGridPanelInternal. Dropdown surface = .mint-popover (2d). */

.mint-date-picker {
  position: relative;
}

/* Input wrapper */
.mint-date-picker__input-wrapper {
  position: relative;
}

/* Trigger follows the field rules (1e): hover border, field focus, flat disabled. */
.mint-date-picker__input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  padding-right: 2.5rem;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.25;
}

.mint-date-picker__input:hover:not(:disabled) {
  border-color: var(--_field-border-hover);
}

.mint-date-picker__input:focus-visible,
.mint-date-picker__input[aria-expanded='true'] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-date-picker__input--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  min-height: var(--form-height-sm);
}

.mint-date-picker__input--md {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-date-picker__input--lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

.mint-date-picker__input--error,
.mint-date-picker__input--error:hover:not(:disabled) {
  border-color: var(--mint-error);
}

.mint-date-picker__input--error:focus-visible,
.mint-date-picker__input--error[aria-expanded='true'] {
  border-color: var(--mint-error);
  box-shadow: var(--focus-ring-soft-error);
}

.mint-date-picker__input--disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.mint-date-picker__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  pointer-events: none;
}

.mint-date-picker__icon svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

/* Calendar dropdown (teleported to body, positioned via JS). */
.mint-date-picker__dropdown {
  position: fixed;
  z-index: 9999;
  width: 16.5rem;
  padding: 0.625rem;
}

/* Calendar header — month label left, 28px ghost nav right. */
.mint-date-picker__header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0 0.125rem;
}

.mint-date-picker__month-year {
  order: -1;
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mint-date-picker__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background-color 150ms ease, color 150ms ease;
}

.mint-date-picker__nav-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-date-picker__nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-date-picker__nav-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Week days header */
.mint-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mint-date-picker__weekday {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
}

/* Calendar grid — 32px days, mono tabular numbers. */
.mint-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mint-date-picker__day {
  position: relative;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mint-date-picker__day:hover:not(:disabled, :focus-visible, .mint-date-picker__day--selected) {
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.mint-date-picker__day:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-date-picker__day--other-month {
  color: var(--text-muted);
}

.mint-date-picker__day--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Today = primary number + 4px dot; selected = filled. The two never share a shape. */
.mint-date-picker__day--today {
  color: var(--_ink-primary);
  font-weight: 600;
}

.mint-date-picker__day--today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 9999px;
  background: currentColor;
}

.mint-date-picker__day--selected {
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
}

.mint-date-picker__day--selected:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

/* Footer */
.mint-date-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

.mint-date-picker__footer-btn {
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 150ms ease;
}

.mint-date-picker__footer-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-date-picker__today-btn {
  color: var(--color-primary);
  font-weight: 500;
}

.mint-date-picker__today-btn:hover {
  color: var(--_ink-primary);
}

.mint-date-picker__clear-btn {
  color: var(--text-secondary);
}

.mint-date-picker__clear-btn:hover {
  color: var(--text-primary);
}

/* Transition classes */
.mint-date-picker__dropdown-enter-active {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.mint-date-picker__dropdown-leave-active {
  transition: opacity 0.075s ease-in, transform 0.075s ease-in;
}

.mint-date-picker__dropdown-enter-from,
.mint-date-picker__dropdown-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.mint-date-picker__dropdown-enter-to,
.mint-date-picker__dropdown-leave-from {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mint-date-picker__input,
  .mint-date-picker__nav-btn,
  .mint-date-picker__day,
  .mint-date-picker__footer-btn,
  .mint-date-picker__dropdown-enter-active,
  .mint-date-picker__dropdown-leave-active {
    transition: none;
  }
}

/* ExperimentTimeline Component Styles */

.mint-timeline {
  display: flex;
  flex-direction: column;
}

.mint-timeline--horizontal {
  flex-direction: row;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

/* Step item. The status rail runs through the icon centres (3d); the card
   padding and icon size per size variant place it. */
.mint-timeline__step {
  position: relative;
  --_tl-pad: 0.75rem;
  --_tl-icon: 2rem;
}

.mint-timeline__step:has(> .mint-timeline__card--sm) {
  --_tl-pad: 0.5rem;
  --_tl-icon: 1.5rem;
}

.mint-timeline__step:has(> .mint-timeline__card--lg) {
  --_tl-pad: 1rem;
  --_tl-icon: 2.5rem;
}

.mint-timeline--horizontal .mint-timeline__step {
  flex-shrink: 0;
}

/* Connector line: 1px, primary once the step is done. */
.mint-timeline__connector {
  position: absolute;
  background-color: var(--border-color);
}

.mint-timeline__step:has(> .mint-timeline__card--completed) > .mint-timeline__connector {
  background-color: var(--color-primary);
}

.mint-timeline--vertical .mint-timeline__connector {
  left: calc(var(--_tl-pad) + 1px + var(--_tl-icon) / 2);
  top: calc(var(--_tl-pad) + 1px + var(--_tl-icon));
  bottom: calc(-1 * (var(--_tl-pad) + 1px));
  width: 1px;
  transform: translateX(-50%);
}

.mint-timeline--horizontal .mint-timeline__connector {
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2rem;
  transform: translateY(-50%);
}

/* Step card */
.mint-timeline__card {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.mint-timeline--horizontal .mint-timeline__card {
  min-width: 180px;
}

.mint-timeline--vertical .mint-timeline__card {
  width: 100%;
}

.mint-timeline__card--sm {
  padding: 0.5rem;
}

.mint-timeline__card--md {
  padding: 0.75rem;
}

.mint-timeline__card--lg {
  padding: 1rem;
}

.mint-timeline__card--dragging {
  opacity: 0.5;
}

.mint-timeline__card--drag-over {
  box-shadow: var(--focus-ring);
}

.mint-timeline__card--editable {
  cursor: grab;
}

.mint-timeline__card--editable:active {
  cursor: grabbing;
}

/* Status lives on the rail icon; only the running step is a card (3d). */
.mint-timeline__card--in-progress {
  background-color: var(--bg-card);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
}

/* Vertical: the running step's rail icon stays on the rail, outside its card.
   The box is painted by ::before starting one gap past the icon, so the icon
   (and the connector math above) keep their place (3d). */
.mint-timeline--vertical .mint-timeline__card--in-progress {
  background-color: transparent;
  border-color: transparent;
  isolation: isolate;
}

.mint-timeline--vertical .mint-timeline__card--in-progress::before {
  content: '';
  position: absolute;
  inset: -1px -1px -1px calc(var(--_tl-pad) * 2 + var(--_tl-icon));
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
}

.mint-timeline--vertical .mint-timeline__card--in-progress > .mint-timeline__header {
  gap: calc(var(--_tl-pad) * 2);
}

.mint-timeline--vertical .mint-timeline__card--in-progress > .mint-timeline__expanded {
  margin-left: calc(var(--_tl-pad) * 2 + var(--_tl-icon));
}

/* Header */
.mint-timeline__header {
  display: flex;
  align-items: center;
}

.mint-timeline__header--sm {
  gap: 0.5rem;
}

.mint-timeline__header--md {
  gap: 0.75rem;
}

.mint-timeline__header--lg {
  gap: 1rem;
}

/* Icon */
.mint-timeline__icon {
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-timeline__icon--sm {
  width: 1.5rem;
  height: 1.5rem;
}

.mint-timeline__icon--md {
  width: 2rem;
  height: 2rem;
}

.mint-timeline__icon--lg {
  width: 2.5rem;
  height: 2.5rem;
}

.mint-timeline__icon svg {
  stroke: currentColor;
}

.mint-timeline__icon--sm svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-timeline__icon--md svg {
  width: 1rem;
  height: 1rem;
}

.mint-timeline__icon--lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Rail icon by status: upcoming = strong ring, running = primary ring,
   done = primary fill, failed = error ring, skipped = dashed ring. */
.mint-timeline__icon--pending,
.mint-timeline__icon--skipped {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
  color: var(--text-secondary);
}

.mint-timeline__icon--skipped {
  box-shadow: none;
  border: 1.5px dashed var(--_control-border-strong);
}

.mint-timeline__icon--in-progress {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  color: var(--color-primary);
}

.mint-timeline__icon--completed {
  background-color: var(--color-primary);
  color: white;
}

.mint-timeline__icon--failed {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--mint-error);
  color: var(--_ink-error);
}

.mint-timeline__card--completed .mint-timeline__title,
.mint-timeline__card--skipped .mint-timeline__title {
  color: var(--text-secondary-strong);
  font-weight: 400;
}

.mint-timeline__card--in-progress .mint-timeline__title {
  font-weight: 600;
}

/* Title and meta */
.mint-timeline__content {
  flex: 1;
  min-width: 0;
}

.mint-timeline__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-timeline__title {
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-timeline__title--sm {
  font-size: 0.75rem;
}

.mint-timeline__title--md {
  font-size: 0.875rem;
}

.mint-timeline__title--lg {
  font-size: 1rem;
}

.mint-timeline__duration {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.mint-timeline__duration--sm {
  font-size: 0.6875rem;
}

.mint-timeline__type {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.mint-timeline__type--sm {
  font-size: 0.6875rem;
}

.mint-timeline__type--md {
  font-size: 0.75rem;
}

.mint-timeline__type--lg {
  font-size: 0.75rem;
}

/* Running-step progress: 2px primary bar + mono percent (3d). */
.mint-timeline__progress-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mint-timeline__progress {
  height: 2px;
  margin-top: 0.375rem;
  border-radius: 9999px;
  background-color: var(--bg-tertiary);
  overflow: hidden;
}

.mint-timeline__progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mint-timeline__progress-fill {
    transition: none;
  }
}

/* Expand indicator */
.mint-timeline__expand-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.mint-timeline__expand-icon--expanded {
  transform: rotate(180deg);
}

/* Remove button */
.mint-timeline__remove-btn {
  padding: 0.25rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease;
}

.mint-timeline__remove-btn:hover {
  color: var(--mint-error);
}

.mint-timeline__remove-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Expanded content */
.mint-timeline__expanded {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.mint-timeline__description {
  color: var(--text-secondary);
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

.mint-timeline__description--sm {
  font-size: 0.75rem;
}

.mint-timeline__description--md {
  font-size: 0.875rem;
}

.mint-timeline__parameters {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mint-timeline__param {
  display: flex;
  justify-content: space-between;
}

.mint-timeline__param--sm {
  font-size: 0.6875rem;
}

.mint-timeline__param--md {
  font-size: 0.75rem;
}

.mint-timeline__param-key {
  color: var(--text-muted);
}

.mint-timeline__param-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Status controls */
.mint-timeline__status-controls {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mint-timeline__status-btn {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--text-muted);
}

.mint-timeline__status-btn:hover {
  background-color: var(--bg-tertiary);
}

.mint-timeline__status-btn--active {
  font-weight: 500;
}

.mint-timeline__status-btn--pending.mint-timeline__status-btn--active {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.mint-timeline__status-btn--in_progress.mint-timeline__status-btn--active,
.mint-timeline__status-btn--completed.mint-timeline__status-btn--active {
  background-color: var(--color-primary-soft);
  color: var(--_ink-primary);
}

.mint-timeline__status-btn--failed.mint-timeline__status-btn--active {
  background-color: var(--mint-error-bg);
  color: var(--_ink-error);
}

.mint-timeline__status-btn--skipped.mint-timeline__status-btn--active {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Add step button (inline) */
.mint-timeline__add-inline {
  position: absolute;
  left: calc(var(--_tl-pad) + 1px + var(--_tl-icon) / 2);
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 10;
}

.mint-timeline__step:hover .mint-timeline__add-inline,
.mint-timeline__add-inline:focus-visible {
  opacity: 1;
}

.mint-timeline__add-inline:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.mint-timeline__add-inline svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Spacer */
.mint-timeline__spacer--vertical {
  height: 1rem;
}

.mint-timeline__spacer--horizontal {
  width: 2rem;
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-timeline__state {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
}

/* Add step button (end) */
.mint-timeline__add-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mint-timeline__add-end--sm {
  padding: 0.5rem;
}

.mint-timeline__add-end--md {
  padding: 0.75rem;
}

.mint-timeline__add-end--lg {
  padding: 1rem;
}

.mint-timeline--horizontal .mint-timeline__add-end {
  min-width: 120px;
  flex-shrink: 0;
}

.mint-timeline--vertical .mint-timeline__add-end {
  width: 100%;
  margin-top: 1rem;
}

.mint-timeline__add-end:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.mint-timeline__add-end svg {
  width: 1rem;
  height: 1rem;
}

.mint-timeline__add-end-text--sm {
  font-size: 0.75rem;
}

.mint-timeline__add-end-text--md {
  font-size: 0.875rem;
}

.mint-timeline__add-end-text--lg {
  font-size: 1rem;
}

/* ==========================================================================
   FileUploader Component Styles
   ========================================================================== */

.mint-file-uploader {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
   Dropzone
   ========================================================================== */

.mint-file-uploader__dropzone {
  position: relative;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--bg-secondary);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mint-file-uploader__dropzone:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
}

.mint-file-uploader__dropzone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mint-file-uploader__dropzone--dragover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
}

.mint-file-uploader__dropzone--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-file-uploader__dropzone--sm {
  padding: 1.25rem;
}

.mint-file-uploader__dropzone--md {
  padding: 1.5rem;
}

.mint-file-uploader__dropzone--lg {
  padding: 2rem;
}

/* ==========================================================================
   Content area
   ========================================================================== */

.mint-file-uploader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mint-file-uploader__input {
  display: none;
}

.mint-file-uploader__icon {
  width: 2rem;
  height: 2rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
  color: var(--color-primary);
}

.mint-file-uploader__text {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Actions slot
   ========================================================================== */

.mint-file-uploader__actions {
  display: flex;
  gap: 0.5rem;
}

/* ==========================================================================
   File list with transitions
   ========================================================================== */

.mint-file-uploader__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mint-file-uploader-item-enter-active {
  transition: all 0.2s ease-out;
}

.mint-file-uploader-item-leave-active {
  transition: all 0.15s ease-in;
}

.mint-file-uploader-item-enter-from {
  opacity: 0;
  transform: translateX(-8px);
}

.mint-file-uploader-item-leave-to {
  opacity: 0;
  transform: translateX(8px);
}

.mint-file-uploader-item-move {
  transition: transform 0.2s ease-out;
}

/* File row */
.mint-file-uploader__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: border-color 0.15s ease;
}

.mint-file-uploader__file:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
}

.mint-file-uploader__file-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}

/* File type badge */
.mint-file-uploader__file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.75rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--badge-color);
  background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
}

.mint-file-uploader__file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.mint-file-uploader__file-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-file-uploader__file-size {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   Remove button (shared between file rows and folder summary)
   ========================================================================== */

.mint-file-uploader__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mint-file-uploader__remove-btn:hover {
  color: var(--mint-error);
  background-color: var(--mint-error-bg);
}

.mint-file-uploader__remove-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* ==========================================================================
   Folder summary
   ========================================================================== */

.mint-file-uploader__folder-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: border-color 0.15s ease;
}

.mint-file-uploader__folder-summary:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
}

.mint-file-uploader__folder-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mint-file-uploader__folder-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mint-file-uploader__folder-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
}

.mint-file-uploader__folder-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.mint-file-uploader__folder-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-file-uploader__folder-count {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mint-file-uploader__dropzone {
    transition: none;
  }

  .mint-file-uploader-item-enter-active,
  .mint-file-uploader-item-leave-active,
  .mint-file-uploader-item-move {
    transition: none;
  }
}

/* FormField Component Styles */

.mint-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Row layout: label left, control in a fixed 120px column. For numbers, toggles
   and short enums; anything that would truncate in 120px stays stacked. */
.mint-form-field--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.mint-form-field--row .mint-form-field__label-row {
  flex: 1;
  min-width: 0;
}

/* Row labels read as prose beside the control (3b, 6c). */
.mint-form-field--row .mint-form-field__label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary-strong);
}

.mint-form-field--row .mint-form-field__control {
  flex: 0 0 7.5rem;
  min-width: 0;
}

.mint-form-field--row .mint-form-field__error,
.mint-form-field--row .mint-form-field__hint {
  flex-basis: 100%;
}

.mint-form-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.mint-form-field__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.mint-form-field__required {
  color: var(--mint-error);
  margin-left: 0.125rem;
}

.mint-form-field__optional {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.mint-form-field__error {
  font-size: 0.8125rem;
  color: var(--mint-error);
  margin: 0 !important;
}

.mint-form-field__hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 !important;
}

/* IconButton Component Styles */

.mint-icon-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  /* Flat surface (1d): no gradient overlay, no hover lift. */
  transition:
    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  cursor: pointer;
  border: none;
  box-sizing: border-box;
}

.mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost):not(:focus-visible) {
  box-shadow: var(--shadow-sm);
}

.mint-icon-button:active:not(.mint-icon-button--disabled) {
  box-shadow: none;
  transition-duration: 0.05s;
}

.mint-icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-icon-button--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
.mint-icon-button--primary.mint-icon-button--disabled,
.mint-icon-button--cta.mint-icon-button--disabled,
.mint-icon-button--danger.mint-icon-button--disabled,
.mint-icon-button--success.mint-icon-button--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Variants */
.mint-icon-button--primary {
  background-color: var(--color-primary);
  color: white;
}

.mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
  background-color: var(--color-primary-hover);
}

.mint-icon-button--secondary {
  background-color: var(--bg-secondary);
  color: var(--text-secondary-strong);
  border: 1px solid var(--border-color);
}

.mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
  background-color: var(--bg-tertiary);
}

.mint-icon-button--cta {
  background-color: var(--color-cta);
  color: white;
}

.mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
  background-color: var(--color-cta-hover);
}

.mint-icon-button--danger {
  background-color: var(--mint-error);
  color: white;
}

.mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
  background-color: var(--mint-error-hover);
}

.mint-icon-button--success {
  background-color: var(--mint-success);
  color: white;
}

.mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
  background-color: var(--mint-success-hover);
}

.mint-icon-button--ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.mint-icon-button--ghost:hover:not(.mint-icon-button--disabled) {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Pressed: one step darker than hover, since the flat surface has no lift. */
.mint-icon-button--ghost:active:not(.mint-icon-button--disabled) {
  background-color: color-mix(in srgb, var(--text-primary) 10%, var(--bg-tertiary));
}

/* Sizes — icons 16px at sm/md, 20px at lg, matching BaseButton icons (1d). */
.mint-icon-button--sm {
  width: var(--form-height-sm);
  height: var(--form-height-sm);
  padding: 0.375rem;
}

.mint-icon-button--md {
  width: var(--form-height-md);
  height: var(--form-height-md);
  padding: 0.5rem;
}

.mint-icon-button--lg {
  width: var(--form-height-lg);
  height: var(--form-height-lg);
  padding: 0.75rem;
}

.mint-icon-button__icon--sm,
.mint-icon-button__icon--md,
.mint-icon-button__icon--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mint-icon-button__icon--sm {
  width: 1rem;
  height: 1rem;
}

.mint-icon-button__icon--md {
  width: 1rem;
  height: 1rem;
}

.mint-icon-button__icon--lg {
  width: 1.25rem;
  height: 1.25rem;
}

/* A bare <svg> in the slot has no intrinsic size and collapses to 0 width as a
   flex item; fill the sized icon box so callers need not size their icon. */
.mint-icon-button__icon--sm > svg,
.mint-icon-button__icon--md > svg,
.mint-icon-button__icon--lg > svg {
  width: 100%;
  height: 100%;
}

/* Spinner */
.mint-icon-button__spinner {
  animation: mint-spin 1s linear infinite;
}

@keyframes mint-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-icon-button {
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }
}

/* Instrument state badge (4a): a tone dot + neutral text, no tinted fill.
   Only the fault state colors its text. */
.mint-instrument-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary-strong);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.mint-instrument-state__dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--mint-instrument-tone);
}

.mint-instrument-state--success { --mint-instrument-tone: var(--mint-success); }
.mint-instrument-state--warning { --mint-instrument-tone: var(--mint-warning); }
.mint-instrument-state--info    { --mint-instrument-tone: var(--mint-info); }
.mint-instrument-state--muted   { --mint-instrument-tone: var(--text-muted); }

.mint-instrument-state--error {
  --mint-instrument-tone: var(--mint-error);
  color: var(--_ink-error);
  font-weight: 600;
}

/* Offline: hollow dot — shape, not a fainter color. */
.mint-instrument-state--offline .mint-instrument-state__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
}

/* Never reported: a short dash. */
.mint-instrument-state--never .mint-instrument-state__dot {
  width: 0.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--_control-border-strong);
}

/* Inactive: a hollow square. */
.mint-instrument-state--inactive .mint-instrument-state__dot {
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
}

.mint-instrument-state--pulse .mint-instrument-state__dot {
  animation: mint-instrument-pulse 1.6s ease-in-out infinite;
}

@keyframes mint-instrument-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .mint-instrument-state--pulse .mint-instrument-state__dot {
    animation: none;
  }
}

.mint-jobs-tray {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 1000;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-jobs-tray {
  --border-light: var(--border-color);
}

.mint-jobs-tray__trigger {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 9999px;
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background var(--mint-transition), box-shadow var(--mint-transition);
}

.mint-jobs-tray__trigger:hover {
  background: var(--color-primary-hover);
}

.mint-jobs-tray__trigger:focus-visible,
.mint-jobs-tray__panel:focus-visible,
.mint-jobs-tray button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-jobs-tray__trigger-icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mint-jobs-tray__trigger-icon--active {
  animation: mint-jobs-tray-pulse 1.8s ease-in-out infinite;
}

.mint-jobs-tray__trigger-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.mint-jobs-tray__count,
.mint-jobs-tray__tab-count {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.375rem;
  border-radius: 9999px;
  font: 600 0.6875rem/1 var(--font-mono);
}

.mint-jobs-tray__count {
  /* Darken, not lighten: white text keeps >= 4.5:1 on any primary (indigo or the platform teal). */
  background: rgb(0 0 0 / 0.4);
  color: inherit;
}

.mint-jobs-tray__backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: rgb(15 23 42 / 0.22);
  backdrop-filter: blur(2px);
}

.mint-jobs-tray__panel {
  position: absolute;
  right: 0;
  bottom: 3.75rem;
  display: flex;
  width: min(27.5rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 7rem));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.mint-jobs-tray__header,
.mint-jobs-tray__job-heading,
.mint-jobs-tray__job-footer,
.mint-jobs-tray__header-actions,
.mint-jobs-tray__clear-row {
  display: flex;
  align-items: center;
}

.mint-jobs-tray__header {
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.mint-jobs-tray__header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.mint-jobs-tray__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.mint-jobs-tray__subtitle {
  margin: 0;
  color: var(--text-secondary);
  font: 0.6875rem/1.3 var(--font-mono);
}

.mint-jobs-tray__header-actions {
  gap: 0.25rem;
}

.mint-jobs-tray__icon-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: background var(--mint-transition), color var(--mint-transition);
}

.mint-jobs-tray__icon-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-jobs-tray__icon-button svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mint-jobs-tray__icon-button--danger {
  color: var(--mint-error);
}

.mint-jobs-tray__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
}

.mint-jobs-tray__tab {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: transparent;
  color: var(--text-secondary-strong);
  font: 500 0.8125rem/1 var(--font-sans);
  cursor: pointer;
}

.mint-jobs-tray__tab--active {
  color: var(--color-primary);
}

.mint-jobs-tray__tab--active::after {
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 2px;
  background: var(--color-primary);
  content: '';
}

.mint-jobs-tray__tab-count {
  background: var(--bg-tertiary);
  color: currentColor;
}

.mint-jobs-tray__error {
  margin: 0.75rem 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--mint-error-border);
  border-radius: var(--radius-md);
  background: var(--mint-error-bg);
  color: var(--mint-error);
  font-size: 0.75rem;
}

.mint-jobs-tray__body {
  flex: 1;
  overflow-y: auto;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.mint-jobs-tray__empty {
  margin: 0;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.8125rem;
}

/* 2f: rows + hairlines, no card per job. */
.mint-jobs-tray__job {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

/* The one state that needs a person: tinted and pinned first. */
.mint-jobs-tray__job--awaiting-input {
  background: var(--mint-warning-bg);
}

.mint-jobs-tray__job-heading,
.mint-jobs-tray__job-footer {
  justify-content: space-between;
  gap: 0.75rem;
}

.mint-jobs-tray__job-identity {
  flex: 1;
  min-width: 0;
}

.mint-jobs-tray__job-select {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-jobs-tray__kind {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-secondary);
  font: 0.6875rem/1.3 var(--font-mono);
}

/* Status: tone dot + neutral text. Only "waiting for input" and "failed"
   color their text. */
.mint-jobs-tray__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary-strong);
  font-size: 0.75rem;
  --mint-jobs-tray-tone: var(--text-muted);
}

.mint-jobs-tray__status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--mint-jobs-tray-tone);
}

.mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--mint-info); }
.mint-jobs-tray__status--completed { --mint-jobs-tray-tone: var(--mint-success); }

.mint-jobs-tray__status--awaiting-input {
  --mint-jobs-tray-tone: var(--mint-warning);
  color: var(--mint-warning-text);
  font-weight: 600;
}

.mint-jobs-tray__status--failed {
  --mint-jobs-tray-tone: var(--mint-error);
  color: var(--_ink-error);
}

.mint-jobs-tray__percent {
  flex: 0 0 auto;
  min-width: 2.125rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mint-jobs-tray__progress {
  height: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--bg-tertiary);
}

.mint-jobs-tray__progress span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transition: width var(--mint-transition);
}

.mint-jobs-tray__job-footer {
  min-height: 1.75rem;
  margin-top: 0.375rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.mint-jobs-tray__action {
  min-height: 1.75rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary-strong);
  font: 500 0.75rem/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--mint-transition), border-color var(--mint-transition), color var(--mint-transition);
}

.mint-jobs-tray__job-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 2f: the inline action of a row waiting for input is the primary one. */
.mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger):hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.mint-jobs-tray__action--danger {
  border-color: var(--mint-error-border);
  color: var(--mint-error);
}

.mint-jobs-tray__action--danger:hover {
  background: var(--mint-error-bg);
}

.mint-jobs-tray__clear-row {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-jobs-tray button:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-jobs-tray-fade-enter-active,
.mint-jobs-tray-fade-leave-active,
.mint-jobs-tray-slide-enter-active,
.mint-jobs-tray-slide-leave-active {
  transition: opacity var(--mint-transition), transform var(--mint-transition);
}

.mint-jobs-tray-fade-enter-from,
.mint-jobs-tray-fade-leave-to {
  opacity: 0;
}

.mint-jobs-tray-slide-enter-from,
.mint-jobs-tray-slide-leave-to {
  opacity: 0;
  transform: translateY(0.5rem) scale(0.98);
}

@keyframes mint-jobs-tray-pulse {
  50% { opacity: 0.55; }
}

@media (max-width: 480px) {
  .mint-jobs-tray {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .mint-jobs-tray__panel {
    position: fixed;
    right: 1rem;
    bottom: 4.75rem;
    left: 1rem;
    width: auto;
    max-height: calc(100vh - 6.75rem - env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-jobs-tray *,
  .mint-jobs-tray *::before,
  .mint-jobs-tray *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.mint-layout-resize-handle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: col-resize;
}

.mint-layout-resize-handle--vertical { width: 1rem; min-height: 2.75rem; }
.mint-layout-resize-handle--horizontal { min-width: 2.75rem; height: 1rem; cursor: row-resize; }
.mint-layout-resize-handle--edge-left,
.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; z-index: 10; height: auto; }
.mint-layout-resize-handle--edge-left { left: 0; transform: translateX(-100%); }
.mint-layout-resize-handle--edge-right { right: 0; transform: translateX(100%); }

.mint-layout-resize-handle__bar {
  display: block;
  width: 0.25rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--border-color);
  opacity: 0.72;
  transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.mint-layout-resize-handle--horizontal .mint-layout-resize-handle__bar {
  width: 2.75rem;
  height: 0.25rem;
}

.mint-layout-resize-handle:hover .mint-layout-resize-handle__bar,
.mint-layout-resize-handle:focus-visible .mint-layout-resize-handle__bar {
  background: var(--color-primary);
  opacity: 1;
}

.mint-layout-resize-handle--vertical:hover .mint-layout-resize-handle__bar,
.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: scaleX(1.35); }
.mint-layout-resize-handle--horizontal:hover .mint-layout-resize-handle__bar,
.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: scaleY(1.35); }

.mint-layout-resize-handle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mint-layout-resize-handle--edge-left:focus-visible,
.mint-layout-resize-handle--edge-right:focus-visible { outline-offset: -2px; }

.mint-layout-resize-handle[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .mint-layout-resize-handle__bar { transition: none; }
}

@media (pointer: coarse) {
  .mint-layout-resize-handle--vertical { width: 2.75rem; }
  .mint-layout-resize-handle--horizontal { height: 2.75rem; }
}

/* BaseInput Component Styles */

.mint-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.mint-input::placeholder {
  color: var(--text-muted);
}

.mint-input:hover:not(:focus):not(.mint-input--disabled):not(.mint-input--error):not(:disabled) {
  border-color: var(--_field-border-hover);
}

.mint-input:focus,
.mint-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-input--error {
  border-color: var(--mint-error);
}

.mint-input--error:focus,
.mint-input--error:focus-visible {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-input--disabled,
.mint-input:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Size variants */
.mint-input--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  min-height: var(--form-height-sm);
}

.mint-input--md {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-input--lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

/* Prefix / suffix group (1e). The group owns border, hover, focus, error and
   disabled; the inner input is borderless. Segments: --bg-primary, hairline
   divider, mono 12px — the same unit look UnitInput uses (4b). */
.mint-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-input-group--sm { min-height: var(--form-height-sm); }
.mint-input-group--md { min-height: var(--form-height-md); }
.mint-input-group--lg { min-height: var(--form-height-lg); }

.mint-input-group:hover:not(:focus-within):not(.mint-input-group--disabled):not(.mint-input-group--error) {
  border-color: var(--_field-border-hover);
}

.mint-input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-input-group--error {
  border-color: var(--mint-error);
}

.mint-input-group--error:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-input-group--disabled {
  background-color: var(--bg-tertiary);
  cursor: not-allowed;
}

.mint-input.mint-input-group__control {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mint-input-group__prefix,
.mint-input-group__suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0 0.625rem;
  background-color: var(--bg-primary);
  color: var(--text-secondary-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Prefix is a bare leading glyph (search icon, currency), not a shaded segment. */
.mint-input-group__prefix {
  padding: 0 0 0 0.625rem;
  background-color: transparent;
  color: var(--text-secondary);
}

.mint-input-group__prefix svg {
  width: 14px;
  height: 14px;
}

.mint-input-group__prefix + .mint-input.mint-input-group__control {
  padding-left: 0.5rem;
}

.mint-input-group__suffix {
  border-left: 1px solid var(--border-light);
}

.mint-input-group--disabled .mint-input-group__prefix,
.mint-input-group--disabled .mint-input-group__suffix {
  color: var(--text-muted);
}

/* BaseModal Component Styles — aligned with SDK Component Refresh · V1 Refined */

/* ========================================================================
   Modal Backdrop — variant-agnostic outer wrapper
   ========================================================================
   The outer .mint-modal positions the modal in the viewport. Variant
   modifiers (.mint-modal--drawer / .mint-modal--sheet) repoint the
   flex alignment so the container slides in from the relevant edge.
   ======================================================================== */

.mint-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  padding: 1rem;
}

.mint-modal--centered {
  align-items: center;
  justify-content: center;
}

.mint-modal--drawer {
  align-items: stretch;   /* fill viewport height */
  justify-content: flex-end;
  padding: 0;             /* drawer flush to the right edge */
}

.mint-modal--sheet {
  align-items: flex-end;
  justify-content: center;
  padding: 0;             /* sheet flush to the bottom edge */
}

.mint-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px) saturate(0.6);
  -webkit-backdrop-filter: blur(4px) saturate(0.6);
}

/* ========================================================================
   Modal Container — shared card DNA
   ======================================================================== */

.mint-modal__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---------- Centered variant — card DNA with height cap (unchanged visually) ---------- */

.mint-modal__container--centered {
  max-height: calc(100vh - 2rem);
}

/* ---------- Drawer variant — fills viewport height, right-edge anchored ---------- */

.mint-modal__container--drawer {
  max-height: 100vh;
  height: 100vh;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);   /* radius drops on right edge */
  border-right: none;
  box-shadow: var(--shadow-lg);
}

/* ---------- Sheet variant — bottom-edge anchored, top-only radius ---------- */

.mint-modal__container--sheet {
  max-height: calc(100vh - 3rem);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* top corners only */
  border-bottom: none;
  box-shadow: var(--shadow-lg);
}

/* ========================================================================
   Size scale — widened across sm/md/lg/xl per spec §7
   ========================================================================
   Before: sm 24 · md 30 · lg 34 · xl 38 · full 56
   After:  sm 28 · md 35 · lg 45 · xl 57.5 · full 56 (unchanged)
   ======================================================================== */

.mint-modal__container--sm   { max-width: 28rem; }
.mint-modal__container--md   { max-width: 35rem; }
.mint-modal__container--lg   { max-width: 45rem; }
.mint-modal__container--xl   { max-width: 57.5rem; }
.mint-modal__container--full { max-width: 56rem; }

/* Drawer width ramps — narrower than centered widths since drawer fills height */
.mint-modal__container--drawer.mint-modal__container--sm   { max-width: 21.25rem; /* 340px */ }
.mint-modal__container--drawer.mint-modal__container--md   { max-width: 30rem;    /* 480px */ }
.mint-modal__container--drawer.mint-modal__container--lg   { max-width: 40rem;    /* 640px */ }
.mint-modal__container--drawer.mint-modal__container--xl   { max-width: 48rem;    /* 768px */ }
.mint-modal__container--drawer.mint-modal__container--full { max-width: 100%;     /* full-drawer */ }

/* Sheet widths — wider than drawer but still centered horizontally. Mobile override drops to 100% below */
.mint-modal__container--sheet.mint-modal__container--sm   { max-width: 23.75rem; /* 380px */ }
.mint-modal__container--sheet.mint-modal__container--md   { max-width: 28.75rem; /* 460px */ }
.mint-modal__container--sheet.mint-modal__container--lg   { max-width: 36rem;    /* 576px */ }
.mint-modal__container--sheet.mint-modal__container--xl   { max-width: 45rem;    /* 720px */ }
.mint-modal__container--sheet.mint-modal__container--full { max-width: 100%; }

/* ========================================================================
   Grab-hint bar (sheet only)
   ======================================================================== */

.mint-modal__grab-hint {
  width: 2.5rem;
  height: 3px;
  background-color: var(--border-color);
  border-radius: 9999px;
  margin: 0.5rem auto 0;
  flex-shrink: 0;
}

/* ========================================================================
   Header / body / footer (shared — unchanged vs. current modal.css)
   ======================================================================== */

.mint-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-modal__header-text {
  flex: 1;
  min-width: 0;
}

.mint-modal__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.mint-modal__subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0.125rem 0 0;
}

.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;
  border-radius: 0.4375rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--mint-transition), background-color var(--mint-transition);
}

.mint-modal__close:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mint-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-modal__close-icon {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}

.mint-modal__body {
  padding: 1.125rem 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.55;
}

.mint-modal__footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

/* ========================================================================
   Tab strip (layout="tabs")
   ========================================================================
   A shell region, not body content: full-bleed, flush with both edges,
   never scrolls with the fields.
   ======================================================================== */

.mint-modal__tabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 0.75rem;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.mint-modal__tabs::-webkit-scrollbar {
  display: none;
}

.mint-modal__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.375rem;              /* 38px */
  padding: 0 0.75rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;          /* 13px */
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  /* Underline drawn INSIDE the box — no margin-bottom:-1px overlap hack. */
  transition: color var(--mint-transition), box-shadow var(--mint-transition);
}

.mint-modal__tab:hover:not(.mint-modal__tab--disabled) {
  color: var(--text-primary);
}

.mint-modal__tab--active {
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.mint-modal__tab--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.mint-modal__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-soft), inset 0 -2px 0 var(--color-primary);
}

.mint-modal__tab-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Fixed body height: switching tabs must not resize the card. */
.mint-modal__body--tabbed {
  height: clamp(14rem, 45vh, 26rem);
  overflow-y: auto;
}

/* Header rule is redundant once a strip or rail follows it. */
.mint-modal__container--tabs .mint-modal__header,
.mint-modal__container--rail .mint-modal__header {
  border-bottom: none;
}

/* ========================================================================
   Rail (layout="rail") — sidebar sections + pane as the shell's middle row
   ======================================================================== */

.mint-modal__split {
  flex: 1 1 auto;              /* basis = the fixed height below; `flex: 1` (basis 0) let the pane size to its content */
  min-height: 0;
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  height: clamp(20rem, 62vh, 34rem);
}

.mint-modal__rail {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.625rem 0.5rem;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;            /* rail scrolls independently of the pane */
  scrollbar-width: thin;
}

.mint-modal__rail-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Section heading + divider between rail sections (e.g. Plugin / Personal). */
.mint-modal__rail-section {
  padding: 0.25rem 0.5rem 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.mint-modal__rail-divider {
  height: 1px;
  margin: 0.5rem;
  background-color: var(--border-color);
}

.mint-modal__rail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary-strong);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

.mint-modal__rail-item:hover:not(.mint-modal__rail-item--disabled, .mint-modal__rail-item--active) {
  background-color: var(--bg-hover);
}

.mint-modal__rail-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Active = raised card, matching the 1.1 card language (not a primary fill). */
.mint-modal__rail-item--active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.mint-modal__rail-item--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.mint-modal__rail-item-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

.mint-modal__rail-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* v-html markup icons arrive wrapped in a span — size it like the svg. */
.mint-modal__rail-item-icon > span {
  display: block;
  width: 100%;
  height: 100%;
}

.mint-modal__rail-item--active .mint-modal__rail-item-icon {
  color: var(--color-primary);
}

.mint-modal__rail-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.mint-modal__rail-item-label {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mint-modal__rail-item-description {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
}

.mint-modal__rail-item-meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* ---------- Pane ---------- */

.mint-modal__pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mint-modal__pane:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-soft);
}

.mint-modal__pane-header {
  flex-shrink: 0;
  padding: 0.875rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-modal__pane-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.3;
}

.mint-modal__pane-subtitle {
  margin: 0.1875rem 0 0 !important;
  padding: 0 !important;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.mint-modal__pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 1.25rem 1.125rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.55;
}

/* Rail collapses to the tab-strip pattern on narrow screens — one behaviour. */
@media (max-width: 640px) {
  .mint-modal__split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .mint-modal__rail {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .mint-modal__rail-items {
    flex-direction: row;
    flex-shrink: 0;
  }

  /* Items keep their label width and the strip scrolls, instead of squeezing labels letter by letter. */
  .mint-modal__rail-item {
    flex-shrink: 0;
    width: auto;
    min-height: 2.375rem;
    white-space: nowrap;
  }

  /* Strip stays compact */
  .mint-modal__rail-item-description,
  .mint-modal__rail-section,
  .mint-modal__rail-divider {
    display: none;
  }

  .mint-modal__pane-body {
    max-height: 60vh;
  }
}

/* ========================================================================
   Per-variant transitions
   ========================================================================
   Each variant uses its own Vue <Transition name> so enter/leave
   animations can be independently tuned.
   ======================================================================== */

/* Centered — opacity fade on backdrop, scale+opacity on card (unchanged behavior) */
.modal-centered-enter-active,
.modal-centered-leave-active {
  transition: opacity 0.2s ease;
}
.modal-centered-enter-active .mint-modal__container,
.modal-centered-leave-active .mint-modal__container {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.modal-centered-enter-from,
.modal-centered-leave-to {
  opacity: 0;
}
.modal-centered-enter-from .mint-modal__container,
.modal-centered-leave-to .mint-modal__container {
  transform: scale(0.95);
  opacity: 0;
}

/* Drawer — slide in from right */
.modal-drawer-enter-active,
.modal-drawer-leave-active {
  transition: opacity 0.25s ease;
}
.modal-drawer-enter-active .mint-modal__container,
.modal-drawer-leave-active .mint-modal__container {
  transition: transform 0.25s ease;
}
.modal-drawer-enter-from,
.modal-drawer-leave-to {
  opacity: 0;
}
.modal-drawer-enter-from .mint-modal__container,
.modal-drawer-leave-to .mint-modal__container {
  transform: translateX(100%);
}

/* Sheet — slide in from bottom */
.modal-sheet-enter-active,
.modal-sheet-leave-active {
  transition: opacity 0.25s ease;
}
.modal-sheet-enter-active .mint-modal__container,
.modal-sheet-leave-active .mint-modal__container {
  transition: transform 0.25s ease;
}
.modal-sheet-enter-from,
.modal-sheet-leave-to {
  opacity: 0;
}
.modal-sheet-enter-from .mint-modal__container,
.modal-sheet-leave-to .mint-modal__container {
  transform: translateY(100%);
}

/* Reduced-motion — collapse to instant opacity swap on all variants */
@media (prefers-reduced-motion: reduce) {
  .modal-centered-enter-active,
  .modal-centered-leave-active,
  .modal-drawer-enter-active,
  .modal-drawer-leave-active,
  .modal-sheet-enter-active,
  .modal-sheet-leave-active {
    transition: opacity 0.1s ease;
  }

  .modal-centered-enter-active .mint-modal__container,
  .modal-centered-leave-active .mint-modal__container,
  .modal-drawer-enter-active .mint-modal__container,
  .modal-drawer-leave-active .mint-modal__container,
  .modal-sheet-enter-active .mint-modal__container,
  .modal-sheet-leave-active .mint-modal__container {
    transition: opacity 0.1s ease;
    transform: none !important;
  }
}

/* ========================================================================
   Mobile auto-sheet — applies to any variant on narrow viewports
   ========================================================================
   When the viewport is < 768px, every modal behaves like a sheet:
   - Backdrop aligns to bottom.
   - Container fills width, sheet-shaped top corners, no side radius.
   - Non-sheet variants pick up the sheet's slide-up animation.
   Pure CSS — no JS detection needed.
   ======================================================================== */

@media (max-width: 767px) {
  .mint-modal {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .mint-modal__container,
  .mint-modal__container--centered,
  .mint-modal__container--drawer,
  .mint-modal__container--sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 3rem);
    height: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    border-right: 1px solid var(--border-color);   /* restore right border for full-width */
    box-shadow: var(--shadow-lg);
  }

  /* All size variants collapse to 100% width under mobile */
  .mint-modal__container--sm,
  .mint-modal__container--md,
  .mint-modal__container--lg,
  .mint-modal__container--xl,
  .mint-modal__container--full {
    max-width: 100%;
  }

  /* Non-sheet variants flip to sheet-like slide-up animation under mobile */
  .modal-centered-enter-from .mint-modal__container,
  .modal-centered-leave-to .mint-modal__container,
  .modal-drawer-enter-from .mint-modal__container,
  .modal-drawer-leave-to .mint-modal__container {
    transform: translateY(100%);
  }

  /* Sheets keep their natural height; the strip already scrolls horizontally */
  .mint-modal__body--tabbed {
    height: auto;
    max-height: 60vh;
  }
}

/* NumberInput Component Styles — one object: the field is the slider. */

.mint-number-input {
  display: flex;
  max-width: 100%;
}

/* ---------- Field wrapper (scrub area + steppers) ---------- */

.mint-number-input__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-number-input--sm .mint-number-input__field { min-height: var(--form-height-sm); }
.mint-number-input--md .mint-number-input__field { min-height: var(--form-height-md); }
.mint-number-input--lg .mint-number-input__field { min-height: var(--form-height-lg); }

.mint-number-input__field:hover:not(:has(:disabled)) {
  border-color: var(--text-muted);
}

.mint-number-input__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-number-input--error .mint-number-input__field {
  border-color: var(--mint-error);
}

.mint-number-input--error .mint-number-input__field:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-number-input--disabled .mint-number-input__field {
  opacity: var(--mint-disabled-opacity);
  background-color: var(--bg-tertiary);
}

/* ---------- Scrub area: range fill (wash + rule) lives under the value ---------- */

.mint-number-input__scrub {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
}

.mint-number-input--slider .mint-number-input__scrub {
  cursor: ew-resize;
  touch-action: none;
}

.mint-number-input--slider .mint-number-input__scrub:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring-soft);
}

.mint-number-input__wash,
.mint-number-input__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--mint-number-input-fill, 0%);
  pointer-events: none;
  transition: width 0.1s ease;
}

.mint-number-input__wash {
  top: 0;
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.mint-number-input__rule {
  height: 2px;
  background: var(--color-primary);
}

/* ---------- Numeric input — left-aligned, Fira Code ---------- */

.mint-number-input__input {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  outline: none;
  line-height: 1.25;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: ew-resize;
  touch-action: pan-y;
}

.mint-number-input__input::-webkit-outer-spin-button,
.mint-number-input__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mint-number-input__input:disabled { cursor: not-allowed; }

/* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
   12px label indent aligns with the numeric text across all input types. */
.mint-number-input__input--sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.mint-number-input__input--md { padding: 0.5rem 0.75rem;    font-size: 0.875rem; }
.mint-number-input__input--lg { padding: 0.75rem 1rem;      font-size: 1rem; }

/* ---------- Unit suffix ---------- */

.mint-number-input__unit {
  position: relative;
  flex-shrink: 0;
  padding-right: 0.5rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  user-select: none;
  white-space: nowrap;
}

/* ---------- Steppers — always visible, horizontal, hairline-divided ---------- */

.mint-number-input__steppers {
  display: flex;
  flex-shrink: 0;
}

.mint-number-input__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  padding: 0;
  background: transparent;
  color: var(--text-secondary-strong);
  border: none;
  border-left: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.mint-number-input__stepper:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--_ink-primary);
}

.mint-number-input__stepper:disabled {
  color: var(--text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.mint-number-input__stepper svg {
  width: 0.625rem;
  height: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-number-input__field,
  .mint-number-input__wash,
  .mint-number-input__rule,
  .mint-number-input__stepper {
    transition: none;
  }
}

/* PlateEditor (SDK control refresh 7a).
 * Wells are WellPlate's (2b, 3a); this file owns the shell: tabs, toolbar, rail. */

.mint-plate-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

/* Focus lands on the root only when a disabled Undo/Redo hands it back; ringed for keyboard users. */
.mint-plate-editor:focus {
  outline: none;
}

.mint-plate-editor:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Tab bar */
.mint-plate-editor__tabbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--border-color);
}

/* Underline tabs: slot dot + name + bare mono count; the item (tab + ×) carries the underline. */
.mint-plate-editor__tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
}

.mint-plate-editor__tab-item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding-right: 4px;
}

.mint-plate-editor__tab-item--active {
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.mint-plate-editor__tab {
  display: inline-flex;
  box-sizing: border-box;
  height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--mint-transition);
}

.mint-plate-editor__tab:hover,
.mint-plate-editor__tab-item--active .mint-plate-editor__tab {
  color: var(--text-primary);
}

.mint-plate-editor__tab-item--active .mint-plate-editor__tab {
  font-weight: 600;
}

.mint-plate-editor__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-plate-editor__tab-count {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.mint-plate-editor__tab--dragging {
  opacity: 0.5;
}

.mint-plate-editor__tab--drag-over {
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.mint-plate-editor__tab-close {
  display: grid;
  width: 18px;
  height: 18px;
  align-self: center;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

.mint-plate-editor__tab-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-plate-editor__tab-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-plate-editor__tabbar-end,
.mint-plate-editor__toolbar-end {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Slot colors: the R/G/B/Y rack positions (--mint-slot-*). */
.mint-plate-editor__slot-dot,
.mint-plate-editor__slot {
  --_slot: var(--mint-slot-r);
}

.mint-plate-editor__slot-dot--g,
.mint-plate-editor__slot--g {
  --_slot: var(--mint-slot-g);
}

.mint-plate-editor__slot-dot--b,
.mint-plate-editor__slot--b {
  --_slot: var(--mint-slot-b);
}

.mint-plate-editor__slot-dot--y,
.mint-plate-editor__slot--y {
  --_slot: var(--mint-slot-y);
}

.mint-plate-editor__slot-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--_slot);
}

/* Toolbar */
.mint-plate-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
}

.mint-plate-editor__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mint-plate-editor__label {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* Well counts read as data. */
.mint-plate-editor__field--format .mint-segmented-control__label {
  font-family: var(--font-mono);
}

.mint-plate-editor__slots {
  display: inline-flex;
  gap: 2px;
}

/* Rack's slot buttons, kept as they were: tinted outline, filled when active. */
.mint-plate-editor__slot {
  display: grid;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--_slot) 25%, transparent);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--_slot);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition), box-shadow var(--mint-transition);
}

.mint-plate-editor__slot--active {
  border-color: transparent;
  background: var(--_slot);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mint-plate-editor__slot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Text actions: Import, Fill Series, Drag, Clear */
.mint-plate-editor__action {
  display: inline-flex;
  box-sizing: border-box;
  height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary-strong);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition), border-color var(--mint-transition);
}

.mint-plate-editor__action:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-plate-editor__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Drag is a mode toggle: outlined while off, primary while on. */
.mint-plate-editor__action[data-action="drag"] {
  border-color: var(--border-color);
  background: var(--bg-card);
}

.mint-plate-editor__action:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-plate-editor__action.mint-plate-editor__action--on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--_ink-primary);
}

.mint-plate-editor__action--danger {
  color: var(--_ink-error);
}

.mint-plate-editor__action--danger:hover:not(:disabled) {
  background: var(--mint-error-bg);
  color: var(--_ink-error);
}

.mint-plate-editor__file {
  display: none;
}

/* Plate + footer, and the rail beside them when the editor is wide enough */
.mint-plate-editor__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mint-plate-editor--rail .mint-plate-editor__body {
  grid-template-columns: minmax(0, 1fr) 232px;
}

.mint-plate-editor__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  min-width: 0;
}

.mint-plate-editor__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--border-light);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
  background: var(--bg-primary);
}

.mint-plate-editor__rail-title {
  padding: 0 6px 6px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.mint-plate-editor__rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mint-plate-editor__rail-row,
.mint-plate-editor__rail-add {
  display: flex;
  box-sizing: border-box;
  height: 30px;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-size: 0.8125rem;
}

.mint-plate-editor__rail-row {
  color: var(--text-primary);
}

/* Group: a color square; sample type: the 3a marker (shape, Q / i glyph). */
.mint-plate-editor__rail-swatch {
  display: grid;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  place-items: center;
  border-radius: var(--radius-sm);
}

.mint-plate-editor__rail-swatch--marker {
  width: 16px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.mint-plate-editor__rail-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-plate-editor__rail-count {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.mint-plate-editor__rail-add {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

.mint-plate-editor__rail-add:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-plate-editor__rail-add:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Reserves the selection bar's height so the plate never jumps. */
.mint-plate-editor__footer {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.mint-plate-editor__hint {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.mint-plate-editor__selection {
  display: inline-flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
}

.mint-plate-editor__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mint-plate-editor__divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
}

.mint-plate-editor__group {
  display: inline-flex;
  box-sizing: border-box;
  height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow var(--mint-transition);
}

.mint-plate-editor__group:hover {
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.mint-plate-editor__group:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-plate-editor__group-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.mint-plate-editor__icon-action {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

.mint-plate-editor__icon-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mint-plate-editor__icon-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-plate-editor__icon-action--danger,
.mint-plate-editor__icon-action--danger:hover {
  color: var(--_ink-error);
}

.mint-plate-editor__icon-action--danger:hover {
  background: var(--mint-error-bg);
}

/* BaseRadioGroup Component Styles */

.mint-radio-group {
  display: flex;
  gap: 1rem;
}

.mint-radio-group--vertical {
  flex-direction: column;
}

.mint-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.mint-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.mint-radio-option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-radio-option__input-wrapper {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hit area grows past the 16px circle without moving the layout (1b). */
.mint-radio-option__input-wrapper::before {
  content: '';
  position: absolute;
  inset: -0.5rem;
}

.mint-radio-option__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mint-radio-option__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--_control-border-strong);
  background-color: var(--bg-card);
  flex-shrink: 0;
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mint-radio-option__circle--sm {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-radio-option__circle--md {
  width: 1rem;
  height: 1rem;
}

.mint-radio-option__circle--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-radio-option__circle--checked {
  border-color: var(--color-primary);
}

.mint-radio-option__native:focus-visible + .mint-radio-option__circle {
  box-shadow: var(--focus-ring-offset);
}

.mint-radio-option__native:disabled + .mint-radio-option__circle {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.mint-radio-option__native:disabled + .mint-radio-option__circle.mint-radio-option__circle--checked {
  border-color: var(--text-muted);
}

.mint-radio-option__native:disabled + .mint-radio-option__circle.mint-radio-option__circle--checked .mint-radio-option__dot {
  background-color: var(--text-muted);
}

.mint-radio-option__dot {
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.mint-radio-option__dot--sm {
  width: 0.4375rem;
  height: 0.4375rem;
}

.mint-radio-option__dot--md {
  width: 0.5rem;
  height: 0.5rem;
}

.mint-radio-option__dot--lg {
  width: 0.625rem;
  height: 0.625rem;
}

.mint-radio-option__content {
  display: flex;
  flex-direction: column;
}

.mint-radio-option__label {
  color: var(--text-primary);
}

.mint-radio-option__label--sm {
  font-size: 0.875rem;
}

.mint-radio-option__label--md {
  font-size: 0.875rem;
}

.mint-radio-option__label--lg {
  font-size: 1rem;
}

.mint-radio-option__description {
  color: var(--text-muted);
}

.mint-radio-option__description--sm {
  font-size: 0.75rem;
}

.mint-radio-option__description--md {
  font-size: 0.75rem;
}

.mint-radio-option__description--lg {
  font-size: 0.875rem;
}

/* ========================================================================
   Variant: Card Tile
   ========================================================================
   Each option is a full card with title + description; rad + title share
   one flex row with align-items: center (circles locked to title's vertical
   center, not at the top). Description sits below, indented to match the
   title's left edge (rad width + gap).
   ======================================================================== */

.mint-radio-group--tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mint-radio-group--tile .mint-radio-option {
  display: block;
  padding: 0.875rem 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mint-radio-group--tile .mint-radio-option:hover:not(.mint-radio-option--disabled) {
  border-color: var(--text-muted);
}

.mint-radio-group--tile .mint-radio-option--selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.mint-radio-group--tile .mint-radio-option__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mint-radio-group--tile .mint-radio-option__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.mint-radio-group--tile .mint-radio-option__description {
  display: block;
  /* md circle (1rem) + flex gap (0.75rem) = 28px — aligns with title's left edge. */
  padding-left: calc(1rem + 0.75rem);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 0.25rem;
}

.mint-radio-group--tile .mint-radio-option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-radio-group--tile .mint-radio-option__native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* SampleLegend Component Styles */

.mint-sample-legend {
  display: flex;
}

.mint-sample-legend--vertical {
  flex-direction: column;
  gap: 0.25rem;
}

.mint-sample-legend--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mint-sample-legend__item {
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.mint-sample-legend__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sample-legend__item:hover {
  background-color: var(--bg-tertiary);
}

.mint-sample-legend__item--selected {
  background-color: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.mint-sample-legend__item--sm {
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
}

.mint-sample-legend__item--md {
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
}

.mint-sample-legend__item--lg {
  gap: 0.625rem;
  padding: 0.5rem 1rem;
}

.mint-sample-legend__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.mint-sample-legend__swatch--sm {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sample-legend__swatch--md {
  width: 1rem;
  height: 1rem;
}

.mint-sample-legend__swatch--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-sample-legend__name {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-sample-legend__name--sm {
  font-size: 0.75rem;
}

.mint-sample-legend__name--md {
  font-size: 0.875rem;
}

.mint-sample-legend__name--lg {
  font-size: 1rem;
}

.mint-sample-legend__count {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  background-color: var(--bg-secondary);
  border-radius: 9999px;
  padding: 0 0.375rem;
  min-width: 1.5rem;
  text-align: center;
}

.mint-sample-legend__count--sm {
  font-size: 0.6875rem;
}

.mint-sample-legend__count--md {
  font-size: 0.75rem;
}

.mint-sample-legend__count--lg {
  font-size: 0.75rem;
}

.mint-sample-legend__remove {
  margin-left: auto;
  padding: 0.125rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.mint-sample-legend__remove:hover {
  color: var(--mint-error);
}

.mint-sample-legend__remove-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Add button */
.mint-sample-legend__add {
  display: flex;
  align-items: center;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mint-sample-legend__add:hover {
  color: var(--text-primary);
  border-color: var(--_control-border-strong);
}

.mint-sample-legend__add:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sample-legend__add--sm {
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
}

.mint-sample-legend__add--md {
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
}

.mint-sample-legend__add--lg {
  gap: 0.625rem;
  padding: 0.5rem 1rem;
}

.mint-sample-legend__add-icon--sm {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sample-legend__add-icon--md {
  width: 1rem;
  height: 1rem;
}

.mint-sample-legend__add-icon--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-sample-legend__add-text--sm {
  font-size: 0.75rem;
}

.mint-sample-legend__add-text--md {
  font-size: 0.875rem;
}

.mint-sample-legend__add-text--lg {
  font-size: 1rem;
}

/* SectionCard — the MINT 1.1 one-card system.
 *
 * One card per page region: 12px radius, one shadow token (--card-shadow),
 * a single header strip, and hairline-separated regions inside — never a
 * card nested in a card.
 */

.mint-section-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: background-color var(--mint-transition), border-color var(--mint-transition);
}

/* Fill the height the parent offers: the body takes the slack and scrolls,
 * so the header and footer stay pinned to the card's edges. */
.mint-section-card--fill {
  flex: 1;
  min-height: 0;
}

.mint-section-card--fill .mint-section-card__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.mint-section-card__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.mint-section-card__header--divider-light {
  border-bottom-color: var(--border-light);
}

.mint-section-card__icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius);
}

.mint-section-card__icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.mint-section-card__icon-chip--primary {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mint-section-card__icon-chip--experiment {
  background: var(--color-experiment-soft);
  color: var(--color-experiment);
}

.mint-section-card__icon-chip--project {
  background: var(--color-project-soft);
  color: var(--color-project);
}

.mint-section-card__icon-chip--success {
  background: var(--mint-success-bg);
  color: var(--mint-success);
}

.mint-section-card__icon-chip--error {
  background: var(--mint-error-bg);
  color: var(--mint-error);
}

.mint-section-card__icon-chip--warning {
  background: var(--mint-warning-bg);
  color: var(--mint-warning);
}

.mint-section-card__icon-chip--info {
  background: var(--mint-info-bg);
  color: var(--mint-info);
}

.mint-section-card__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mint-section-card__title--uppercase {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-section-card__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.mint-section-card__spacer {
  flex: 1;
}

.mint-section-card__toolbar {
  flex-shrink: 0;
}

.mint-section-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
  flex-shrink: 0;
}

/* Hairline row helpers — regions inside a card separate with 1px lines,
 * rendered by a 1px gap over a hairline-colored track. */
.mint-section-card__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-light);
}

.mint-section-card__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 1rem;
  background: var(--bg-secondary);
  transition: background-color var(--mint-transition);
}

a.mint-section-card__row,
button.mint-section-card__row {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a.mint-section-card__row:hover,
button.mint-section-card__row:hover {
  background: var(--bg-primary);
}

/* SecretInput — plugin secret settings field with a set / not set / environment status.
   Status = dot + text, the BasePill dot form (10b): color lives in the dot only. */

.mint-secret-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mint-secret-input__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mint-secret-input__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary-strong);
}

.mint-secret-input__dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  box-sizing: border-box;
}

.mint-secret-input__badge--set .mint-secret-input__dot { background-color: var(--mint-success); }
.mint-secret-input__badge--environment .mint-secret-input__dot { background-color: var(--mint-info); }
.mint-secret-input__badge--pending .mint-secret-input__dot { background-color: var(--mint-warning); }

/* Unset = hollow dot in the strong control border color. */
.mint-secret-input__badge--unset .mint-secret-input__dot {
  border: 1.5px solid var(--_control-border-strong);
}

.mint-secret-input__hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-secret-input__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-secret-input--error .mint-secret-input__dot {
  background-color: var(--mint-error);
  border: none;
}

/* BaseSelect Component Styles */

.mint-select {
  position: relative;
}

.mint-select__control {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  padding-right: 2.5rem;
  box-sizing: border-box;
  line-height: 1.25;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-select__control:hover:not(:focus):not(.mint-select__control--disabled):not(.mint-select__control--error) {
  border-color: var(--_field-border-hover);
}

.mint-select__control:focus,
.mint-select__control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-select__control--error {
  border-color: var(--mint-error);
}

.mint-select__control--error:focus,
.mint-select__control--error:focus-visible {
  border-color: var(--mint-error);
  box-shadow: var(--focus-ring-soft-error);
}

.mint-select__control--disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.mint-select__control--sm {
  padding: 0.375rem 0.625rem;
  padding-right: 2.5rem;
  font-size: 0.8125rem;
  min-height: var(--form-height-sm);
}

.mint-select__control--md {
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-select__control--lg {
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

.mint-select__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 0.625rem;
  pointer-events: none;
}

.mint-select__icon svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

.mint-select__control--disabled + .mint-select__icon svg {
  color: var(--text-muted);
}

.mint-searchable-select { position: relative; min-width: 0; }

.mint-searchable-select__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--form-height-md);
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.3rem 0.5rem; font-size: 0.75rem; }
.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.75rem 1rem; font-size: 1rem; }
.mint-searchable-select__trigger:hover:not(:disabled) { border-color: var(--_field-border-hover); }
.mint-searchable-select__trigger:focus-visible,
.mint-searchable-select__trigger[aria-expanded='true'] { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
.mint-searchable-select__trigger:disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; }
.mint-searchable-select__trigger svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--text-secondary); }
.mint-searchable-select__value { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.mint-searchable-select__value--placeholder { color: var(--text-muted); }

/* Surface = .mint-popover (2d); this alias keeps only placement. */
.mint-searchable-select__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: min(38rem, 80vh);
  overflow: hidden;
}

.mint-searchable-select__search-wrap { position: relative; margin: 0 0 0.25rem; padding: 0.25rem 0.25rem 0.5rem; border-bottom: 1px solid var(--border-light); }
.mint-searchable-select__search-wrap svg { position: absolute; top: calc(50% - 0.125rem); left: 0.75rem; width: 0.875rem; height: 0.875rem; color: var(--text-secondary); transform: translateY(-50%); pointer-events: none; }
.mint-searchable-select__search { width: 100%; min-height: var(--form-height-sm); padding: 0.375rem 0.625rem 0.375rem 1.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; transition: border-color 150ms ease, box-shadow 150ms ease; }
.mint-searchable-select__search:hover { border-color: var(--_field-border-hover); }
.mint-searchable-select__search:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
.mint-searchable-select__list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
/* Rows = .mint-menu-item (2d); __option* stay as aliases. */
.mint-searchable-select__empty { padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.75rem; }
.mint-searchable-select__footer { margin: 0.25rem -0.25rem -0.25rem; padding: 0.625rem; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .mint-searchable-select__trigger,
  .mint-searchable-select__search { transition: none; }
}

/* Skeleton Component Styles */

/* ========================================================================
   Breathing animation — opacity 1 ↔ 0.55 over 1.6s (3e)
   ========================================================================
   Theme-independent: it never
   relies on one surface token being lighter than another (a shimmer band
   of --bg-secondary reads as a dark stripe in dark mode). Works for atoms
   (.sk--*) and for the Skeleton.vue component's `animation='wave'` setting.
   ======================================================================== */

.skeleton-wave,
[class*='sk--'] {
  background-color: var(--bg-tertiary);
  animation: mint-skeleton-breathe 1.6s ease-in-out infinite;
}

@keyframes mint-skeleton-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-wave,
  [class*='sk--'] {
    animation: none;
  }
}

/* ========================================================================
   Atoms — reusable skeleton shapes consumers can compose for loading layouts
   Text bars are 8px so a loading line keeps the rhythm of 13/20 text.
   ======================================================================== */

.sk--line       { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
.sk--line-sm    { height: 8px;  border-radius: var(--radius-sm); width: 100%; }
.sk--title      { height: 8px;  border-radius: var(--radius-sm); width: 60%; }
.sk--avatar     { width: 36px; height: 36px; border-radius: 50%; }
.sk--btn        { width: 80px; height: 32px; border-radius: var(--radius-md); }
.sk--pill       { width: 64px; height: 20px; border-radius: 9999px; }

/* ========================================================================
   Skeleton.vue shapes. Inline width/height from the props override these.
   ======================================================================== */

.mint-skeleton               { background-color: var(--bg-tertiary); }
.mint-skeleton--text         { width: 100%; height: 8px; border-radius: var(--radius-sm); }
.mint-skeleton--circular     { width: 40px; height: 40px; border-radius: 50%; }
.mint-skeleton--rectangular  { height: 96px; border-radius: 0; }
.mint-skeleton--rounded      { height: 96px; border-radius: var(--radius-md); }
/* BaseSlider Component Styles */

.mint-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mint-slider--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-slider__container {
  position: relative;
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
}

.mint-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--text-secondary) 22%, var(--bg-tertiary));
}

.mint-slider__fill {
  position: absolute;
  left: 0;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.mint-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  margin: 0;
}

.mint-slider--disabled .mint-slider__input {
  cursor: not-allowed;
}

/* One thumb for the plain and the colorStops track (1f, 9c). */
.mint-slider__thumb {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.mint-slider__input:focus-visible ~ .mint-slider__thumb {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-offset);
}

.mint-slider__thumb--dragging {
  transform: translateX(-50%) translateY(-50%) scale(1.1);
}

.mint-slider__value {
  min-width: 2rem;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary-strong);
}

.mint-slider:focus-within .mint-slider__value:not(.mint-slider__value--success, .mint-slider__value--warning, .mint-slider__value--error) {
  color: var(--text-primary);
}

.mint-slider__value--success,
.mint-slider__value--warning,
.mint-slider__value--error {
  min-width: 28px;
  padding: 0.125rem 0.375rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.mint-slider__value--success {
  background: color-mix(in srgb, var(--mint-success) 15%, transparent);
  border-color: color-mix(in srgb, var(--mint-success) 30%, transparent);
  color: var(--mint-success);
}

.mint-slider__value--warning {
  background: color-mix(in srgb, var(--mint-warning) 15%, transparent);
  border-color: color-mix(in srgb, var(--mint-warning) 30%, transparent);
  color: var(--mint-warning);
}

.mint-slider__value--error {
  background: color-mix(in srgb, var(--mint-error) 15%, transparent);
  border-color: color-mix(in srgb, var(--mint-error) 30%, transparent);
  color: var(--mint-error);
}

.mint-slider--labeled {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.mint-slider__labels {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .mint-slider__thumb {
    transition: none;
  }

  .mint-slider__thumb--dragging {
    transform: translateX(-50%) translateY(-50%);
  }
}

/* BaseTabs Component Styles — underline only; SegmentedControl owns the card look */

.mint-tabs {
  display: flex;
}

.mint-tabs--underline {
  border-bottom: 1px solid var(--border-color);
}

.mint-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  background: none;
  border: none;
  cursor: pointer;
}

.mint-tab:focus {
  outline: none;
}

.mint-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-tab--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Underline variant */
.mint-tabs--underline .mint-tab {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-secondary);
}

.mint-tabs--underline .mint-tab:hover:not(.mint-tab--disabled) {
  color: var(--text-primary);
}

.mint-tabs--underline .mint-tab--active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* Tab content */
.mint-tab__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-tab__icon {
  color: currentColor;
}

.mint-tab__icon--svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Mono count block */
.mint-tab__badge {
  padding: 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mint-tab--active .mint-tab__badge {
  background-color: var(--color-primary-soft);
  color: var(--_ink-primary);
}

/* TagsInput Component Styles */

.mint-tags-input {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  position: relative;
}

/* ---------- Category switcher (variant="categorized") ---------- */
/* 3f: neutral chips; the category is carried by the group-color dot. */

.mint-tags-input__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mint-tags-input__category {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.625rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mint-tags-input__category:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.mint-tags-input__category--active { background: var(--bg-tertiary); color: var(--text-primary); }
.mint-tags-input__category:focus-visible { outline: none; box-shadow: var(--focus-ring-offset); }
.mint-tags-input__category:disabled { cursor: not-allowed; opacity: var(--mint-disabled-opacity); }

/* ---------- Field (1e) ---------- */

.mint-tags-input__field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 3px;
  min-height: var(--form-height-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: text;
}

.mint-tags-input--sm .mint-tags-input__field { min-height: var(--form-height-sm); }
.mint-tags-input--md .mint-tags-input__field { min-height: var(--form-height-md); }
.mint-tags-input--lg .mint-tags-input__field { min-height: var(--form-height-lg); }

.mint-tags-input__field:hover { border-color: var(--_field-border-hover); }
.mint-tags-input__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-tags-input--error .mint-tags-input__field {
  border-color: var(--mint-error);
}
.mint-tags-input--error .mint-tags-input__field:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-tags-input--disabled .mint-tags-input__field {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ---------- Tag ---------- */

.mint-tags-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.625rem;
  padding: 0 0.125rem 0 0.5rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.mint-tags-input__tag--sm { height: 1.375rem; }
.mint-tags-input__tag--lg { height: 1.875rem; font-size: 0.8125rem; }

.mint-tags-input--disabled .mint-tags-input__tag {
  padding-right: 0.5rem;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.mint-tags-input__tag-dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}

/* 20px hit area. */
.mint-tags-input__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mint-tags-input__tag-remove:hover {
  background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
  color: var(--text-primary);
}

.mint-tags-input__tag-remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-tags-input__tag-remove-icon {
  width: 0.625rem;
  height: 0.625rem;
}

/* ---------- Input (grows to fill) ---------- */

.mint-tags-input__input {
  flex: 1;
  min-width: 6rem;
  background: transparent;
  border: none;
  outline: none;
  height: 1.625rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  padding: 0 0.375rem;
}

.mint-tags-input__input:disabled { cursor: not-allowed; }

.mint-tags-input--sm .mint-tags-input__input { height: 1.375rem; font-size: 0.75rem; }
.mint-tags-input--lg .mint-tags-input__input { height: 1.875rem; font-size: 0.875rem; }

/* ---------- Autocomplete dropdown ---------- */

.mint-tags-input__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.25rem;
}

.mint-tags-input__dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.1s ease;
}

.mint-tags-input__dropdown-item:hover,
.mint-tags-input__dropdown-item--highlighted {
  background-color: var(--bg-hover);
}

.mint-tags-input__dropdown-count {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* BaseTextarea Component Styles */

.mint-textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
  min-height: 5rem;
  box-sizing: border-box;
}

.mint-textarea::placeholder {
  color: var(--text-muted);
}

.mint-textarea:hover:not(:focus):not(.mint-textarea--disabled):not(.mint-textarea--error):not(:disabled) {
  border-color: var(--_field-border-hover);
}

.mint-textarea:focus,
.mint-textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-textarea--error {
  border-color: var(--mint-error);
}

.mint-textarea--error:focus,
.mint-textarea--error:focus-visible {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-textarea--disabled,
.mint-textarea:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
  resize: none;
}

/* Size variants */
.mint-textarea--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

.mint-textarea--md {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.mint-textarea--lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.mint-textarea--resize-none {
  resize: none;
}

.mint-textarea--resize-vertical {
  resize: vertical;
}

.mint-textarea--resize-horizontal {
  resize: horizontal;
}

.mint-textarea--resize-both {
  resize: both;
}

/* ThemeToggle Component Styles */

.mint-theme-toggle__icon {
  width: 100%;
  height: 100%;
}

/* ToastNotification Component Styles — neutral surface, accent only on icon + TTL bar */

.mint-toast__container {
  position: fixed;
  /* AppTopBar publishes its bottom edge + 1rem so toasts clear its controls. */
  top: var(--mint-toast-offset-top, 1rem);
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.mint-toast__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  padding: 0.625rem 1.75rem 0.6875rem 0.75rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
}

/* Dark mode: near-black bg so the toast always contrasts with the page */
html.dark .mint-toast__item {
  background-color: var(--bg-primary);
}

/* Severity reads from the icon and the TTL bar only */
.mint-toast__item--success { --mint-toast-tone: var(--mint-success); }
.mint-toast__item--error   { --mint-toast-tone: var(--mint-error); }
.mint-toast__item--warning { --mint-toast-tone: var(--mint-warning); }
.mint-toast__item--info    { --mint-toast-tone: var(--mint-info); }

/* Collapsed stack: one offset sheet drawn with box-shadow, not a second node. */
.mint-toast__item--stacked {
  box-shadow:
    0 3px 0 -1px var(--bg-card),
    0 3px 0 0 var(--border-color),
    var(--card-shadow);
}

.mint-toast__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--mint-toast-tone);
}

.mint-toast__body {
  flex: 1;
  min-width: 0;
}

.mint-toast__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.mint-toast__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.125rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 0.1875rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mint-toast__detail {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mint-toast__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4375rem;
}

.mint-toast__action {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mint-toast__action:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.mint-toast__action--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.mint-toast__action--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mint-toast__action:focus-visible,
.mint-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-toast__close {
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.mint-toast__close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mint-toast__close svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* TTL progress bar — shrinks 100% → 0 over duration */
.mint-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--mint-toast-tone);
  transform-origin: left center;
  animation: mint-toast-progress linear forwards;
  /* animation-duration set inline via toast.duration */
}

.mint-toast__progress--indeterminate {
  animation: mint-toast-indeterminate 1.4s ease-in-out infinite;
}

@keyframes mint-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes mint-toast-indeterminate {
  0%   { transform: translateX(-100%) scaleX(0.4); }
  100% { transform: translateX(250%) scaleX(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .mint-toast__progress { animation: none; opacity: 0.4; }
}

.toast-enter-active { transition: all 0.2s ease-out; }
.toast-leave-active { transition: all 0.15s ease-in; }
.toast-enter-from { opacity: 0; transform: translateX(30px); }
.toast-leave-to   { opacity: 0; transform: translateX(30px); }
/* BaseToggle Component Styles */

.mint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.mint-toggle--default {
  width: fit-content;
}

.mint-toggle--row {
  width: 100%;
  min-height: 2rem;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  background: transparent;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.mint-toggle--row:hover {
  background: var(--bg-hover);
}

.mint-toggle--reverse {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

/* Reverse label refinement for sidebar use */
.mint-toggle--reverse .mint-toggle__label {
  font-weight: 500;
  color: var(--text-secondary);
}

.mint-toggle--reverse .mint-toggle__label--sm {
  font-size: 0.8125rem;
}

.mint-toggle--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-toggle--disabled.mint-toggle--row:hover {
  background: transparent;
}

.mint-toggle__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.mint-toggle--row:hover .mint-toggle__row-icon {
  transform: scale(1.04);
}

.mint-toggle__row-svg {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-toggle__row-text-icon {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.mint-toggle__copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.mint-toggle__copy .mint-tooltip {
  max-width: 100%;
}

.mint-toggle--row .mint-toggle__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-toggle__label--tooltip {
  cursor: help;
}

.mint-toggle__track {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 9999px;
  /* Explicit border-box — the --_knob-travel math assumes the declared width/height
     are the outer dimensions. Without this, a consumer without a global
     box-sizing reset (e.g. raw Histoire) renders the track 4px too wide and
     the on-state knob falls short of the right edge. */
  box-sizing: border-box;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.mint-toggle__track--off {
  background-color: var(--_control-border-strong);
}

.mint-toggle__track--on {
  background-color: var(--color-primary);
}

.mint-toggle__track:focus {
  outline: none;
}

.mint-toggle__track:focus-visible {
  box-shadow: var(--focus-ring-offset);
  outline: none;
}

/* Knob travel = track width - 2 x 2px inset - knob size. */
.mint-toggle__track--sm {
  width: 28px;
  height: 16px;
  --_knob-travel: 12px;
}

.mint-toggle__track--md {
  width: 32px;
  height: 18px;
  --_knob-travel: 14px;
}

.mint-toggle__track--lg {
  width: 52px;
  height: 28px;
  --_knob-travel: 24px;
}

.mint-toggle__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.mint-toggle__track--on .mint-toggle__knob {
  transform: translateX(var(--_knob-travel));
}

.mint-toggle__knob--sm {
  width: 12px;
  height: 12px;
  margin-top: -6px;
}

.mint-toggle__knob--md {
  width: 14px;
  height: 14px;
  margin-top: -7px;
}

.mint-toggle__knob--lg {
  width: 24px;
  height: 24px;
  margin-top: -12px;
}

.mint-toggle__label {
  color: var(--text-primary);
  line-height: 1.25;
}

.mint-toggle__label--sm {
  font-size: 0.875rem;
}

.mint-toggle__label--md {
  font-size: 0.875rem;
}

.mint-toggle__label--lg {
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-toggle--row,
  .mint-toggle__row-icon,
  .mint-toggle__track,
  .mint-toggle__knob {
    transition: none;
  }

  .mint-toggle--row:hover .mint-toggle__row-icon {
    transform: none;
  }
}

/* WellPlate Component Styles */

.mint-well-plate {
  user-select: none;
}

.mint-well-plate--inline {
  display: inline-block;
}

.mint-well-plate--fill {
  width: 100%;
}

.mint-well-plate__scroll {
  overflow-x: auto;
}

.mint-well-plate__content {
  display: inline-block;
}

.mint-well-plate--fill .mint-well-plate__content {
  display: block;
  width: 100%;
}

/* Table - reset consumer/framework styles (VitePress, Tailwind preflight, etc.) */
.mint-well-plate__table {
  display: table !important;
  overflow: visible !important;
  border-collapse: separate;
  border: none !important;
  margin: 0 !important;
  user-select: none;
  -webkit-user-select: none;
}

.mint-well-plate__table thead {
  display: table-header-group !important;
}

.mint-well-plate__table tbody {
  display: table-row-group !important;
}

.mint-well-plate__table tr {
  border: none !important;
  background: transparent !important;
}

.mint-well-plate__table th,
.mint-well-plate__table td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Header cells */
.mint-well-plate__col-header,
.mint-well-plate__row-header {
  font-weight: 500;
  text-align: center;
  color: var(--text-muted);
}

.mint-well-plate__row-header {
  vertical-align: middle;
}

/* Well cell */
.mint-well-plate__cell {
  padding: 0;
}

/* Well */
.mint-well-plate__well {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  background-color: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
}

.mint-well-plate__well--rounded {
  border-radius: var(--radius-md);
}

.mint-well-plate__well--circle {
  border-radius: 9999px;
}

.mint-well-plate__well--filled {
  border-style: solid;
}

.mint-well-plate__well--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Well states */
.mint-well-plate__well--selected {
  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
}

.mint-well-plate__well--drag-over {
  box-shadow: 0 0 0 2px var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.mint-well-plate__well--hovered {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-success) 50%, transparent);
}

.mint-well-plate__well--drag-source {
  box-shadow: 0 0 0 2px var(--mint-warning);
  opacity: 0.5;
}

.mint-well-plate__well--drag-target {
  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
  background-color: color-mix(in srgb, var(--mint-success) 20%, transparent);
}

/* Optional semantic classes for `wellClass` callbacks. */
.mint-well-plate__well--outlier {
  box-shadow: inset 0 0 0 1.6px var(--mint-warning);
}

.mint-well-plate__well--conflict {
  box-shadow: inset 0 0 0 1.6px var(--mint-error);
}

/* Draggable well — explicit -webkit-user-drag for Chrome inside <table> cells */
.mint-well-plate__well--draggable {
  cursor: grab;
  -webkit-user-drag: element;
}

.mint-well-plate__well--draggable:active {
  cursor: grabbing;
}

/* Well label */
.mint-well-plate__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
  pointer-events: none;
  color: var(--text-primary);
}

/* Sample type indicator */
.mint-well-plate__indicator {
  font-weight: 700;
  pointer-events: none;
  color: var(--text-primary);
}

/* Well ID text */
.mint-well-plate__well-id {
  font-weight: 500;
  pointer-events: none;
  color: var(--text-primary);
}

/* Condition header - drug label row */
.mint-well-plate__condition-label {
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  padding: 2px 4px !important;
}

/* Condition cell - inner span with gradient bg (avoids table !important reset) */
.mint-well-plate__condition-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

/* Row condition label cell (rotated text) */
.mint-well-plate__row-condition-label {
  text-align: center;
  vertical-align: middle;
  padding: 0 !important;
  position: relative;
  height: 1px; /* Trick: allows absolute child to use 100% height in rowspan cells */
}

.mint-well-plate__row-condition-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-well-plate__row-condition-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

/* Heatmap legend */
.mint-well-plate__legend {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.mint-well-plate__legend-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mint-well-plate__legend-bar {
  flex: 1;
  height: 0.75rem;
  border-radius: 0.125rem;
  overflow: hidden;
  display: flex;
  min-width: 0;
}

.mint-well-plate__legend-segment {
  flex: 1;
}

/* Badge (injection count / custom method indicator) */
.mint-well-plate__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  line-height: 1;
}

/* Sample type legend bar */
.mint-well-plate__sample-legend {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.25rem;
}

.mint-well-plate__sample-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mint-well-plate__sample-legend-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.mint-well-plate__sample-legend-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-well-plate__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
/* SampleSelector Component Styles - RFA Design */

.mint-sample-selector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  /* No padding/background/border - let parent container provide styling */
}

/* Select-all header row (7c): a table header, not a button */
.mint-sample-selector__select-all {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  cursor: pointer;
}

/* Over the group tree the header takes the tree's columns: its checkbox sits over the
   group checkboxes (header pad + chevron + gap) and its count over the group counts
   (scroll gutter + header pad + delete button + gap). */
.mint-sample-selector__select-all--grouped {
  padding-left: 1.875rem;
  padding-right: 2.375rem;
}

.mint-sample-selector__select-all-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mint-sample-selector__select-all-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Checkboxes are BaseCheckbox sm; only keep them from shrinking in flex rows. */
.mint-sample-selector__checkbox {
  flex-shrink: 0;
}

/* Action Buttons Row */
.mint-sample-selector__actions {
  position: relative;
}

.mint-sample-selector__actions-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

/* Layout only; BaseButton sm owns size, padding and type. */
.mint-sample-selector__action-btn {
  width: 100%;
  min-width: 0; /* Allow labels to ellipsize inside tight containers */
}

.mint-sample-selector__action-btn--reset {
  width: auto;
}

.mint-sample-selector__action-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.mint-sample-selector__action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grouped View */
.mint-sample-selector__grouped {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
}

.mint-sample-selector__groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mint-sample-selector__groups-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mint-sample-selector__groups-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mint-sample-selector__expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.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;
}

/* Shared scrollbar styles */
.mint-sample-selector__tree,
.mint-sample-selector__flat-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.mint-sample-selector__tree::-webkit-scrollbar,
.mint-sample-selector__flat-list::-webkit-scrollbar {
  width: 6px;
}

.mint-sample-selector__tree::-webkit-scrollbar-track,
.mint-sample-selector__flat-list::-webkit-scrollbar-track {
  background: transparent;
}

.mint-sample-selector__tree::-webkit-scrollbar-thumb,
.mint-sample-selector__flat-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

.mint-sample-selector__tree::-webkit-scrollbar-thumb:hover,
.mint-sample-selector__flat-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* Tree View */
.mint-sample-selector__tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Major Group */
.mint-sample-selector__major-group {
  margin-bottom: 0.25rem;
}

.mint-sample-selector__major-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.mint-sample-selector__major-header:active {
  cursor: grabbing;
}

.mint-sample-selector__major-header:hover {
  background-color: var(--bg-hover);
}

.mint-sample-selector__major-header:hover .mint-sample-selector__delete-btn--hidden {
  opacity: 1;
}

.mint-sample-selector__major-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */
.mint-sample-selector__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mint-sample-selector__chevron--small {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sample-selector__chevron--open {
  transform: rotate(90deg);
}

/* Color Dot */
/* Group color chip (7c) */
.mint-sample-selector__color-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.mint-sample-selector__color-dot--large {
  width: 0.625rem;
  height: 0.625rem;
}

.mint-sample-selector__color-dot--clickable {
  cursor: pointer;
  transition: transform 0.15s ease;
  border: none;
  padding: 0;
  background: none;
}

.mint-sample-selector__color-dot--clickable:hover {
  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 */
/* Selected / total, mono (7c) */
.mint-sample-selector__count-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Delete Button */
.mint-sample-selector__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--mint-error);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mint-sample-selector__delete-btn:hover {
  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;
}

.mint-sample-selector__delete-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Sub Groups */
.mint-sample-selector__sub-groups {
  margin-left: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid;
}

.mint-sample-selector__sub-group {
  margin-bottom: 0.125rem;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-sample-selector__sub-group--drag-over {
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.mint-sample-selector__sub-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.mint-sample-selector__sub-header:active {
  cursor: grabbing;
}

.mint-sample-selector__sub-header:hover {
  background-color: var(--bg-hover);
}

.mint-sample-selector__sub-header:hover .mint-sample-selector__delete-btn--hidden {
  opacity: 1;
}

.mint-sample-selector__sub-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Samples */
.mint-sample-selector__samples {
  margin-left: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid;
}

.mint-sample-selector__sample {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, opacity 0.15s ease;
  cursor: grab;
}

.mint-sample-selector__sample:hover {
  background-color: var(--bg-hover);
}

.mint-sample-selector__sample:hover .mint-sample-selector__remove-btn {
  opacity: 1;
}

.mint-sample-selector__sample:hover .mint-sample-selector__drag-handle {
  opacity: 1;
}

.mint-sample-selector__sample--dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Drag Handle */
.mint-sample-selector__drag-handle {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: grab;
}

.mint-sample-selector__sample-name {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-sample-selector__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--mint-warning);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.mint-sample-selector__remove-btn:hover {
  background-color: var(--mint-warning-bg);
  color: var(--mint-warning);
}

.mint-sample-selector__remove-btn svg {
  width: 0.625rem;
  height: 0.625rem;
}

/* Inline hint shown inside the grouped/flat sub-lists */
.mint-sample-selector__hint {
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-sample-selector__state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ungrouped Section */
.mint-sample-selector__ungrouped {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.mint-sample-selector__ungrouped-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mint-sample-selector__ungrouped-header:hover {
  background-color: var(--bg-hover);
}

.mint-sample-selector__ungrouped-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.mint-sample-selector__ungrouped-count {
  /* Joins the group count column: the groups' delete button + gap and the tree's scroll gutter. */
  margin-right: 1.875rem;
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

.mint-sample-selector__ungrouped-list {
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border-color);
}

/* New Group Input */
.mint-sample-selector__new-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mint-sample-selector__new-group-input {
  flex: 1;
  min-width: 0;
}

.mint-sample-selector__new-group-btn {
  flex-shrink: 0;
}

/* Hidden color input */
.mint-sample-selector__color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flat View */
.mint-sample-selector__flat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.5rem;
}

.mint-sample-selector__search {
  position: relative;
}

.mint-sample-selector__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

.mint-sample-selector__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s ease;
}

.mint-sample-selector__search-input:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: var(--color-primary);
}

.mint-sample-selector__search-input::placeholder {
  color: var(--text-muted);
}

.mint-sample-selector__flat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.mint-sample-selector__flat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.mint-sample-selector__flat-item:hover {
  background-color: var(--bg-hover);
}

.mint-sample-selector__flat-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-collapse-enter-active {
  transition: all 0.2s ease-out;
  overflow: hidden;
}

.mint-collapse-leave-active {
  transition: all 0.15s ease-in;
  overflow: hidden;
}

.mint-collapse-enter-from,
.mint-collapse-leave-to {
  opacity: 0;
  max-height: 0;
}

.mint-collapse-enter-to,
.mint-collapse-leave-from {
  opacity: 1;
  max-height: 500px;
}

/* Group reorder: source row + drop indicators */
.mint-sample-selector__header--dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.mint-sample-selector__header--drag-over-before {
  box-shadow: inset 0 2px 0 0 var(--color-primary);
}

.mint-sample-selector__header--drag-over-after {
  box-shadow: inset 0 -2px 0 0 var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .mint-sample-selector__chevron {
    transition: none;
  }

  .mint-sample-selector__color-dot--clickable {
    transition: none;
  }

  .mint-sample-selector__major-header,
  .mint-sample-selector__sub-header {
    transition: none;
  }

  .mint-collapse-enter-active,
  .mint-collapse-leave-active {
    transition: none;
  }
}

/* ==========================================================================
   Smart Group — Full View modal (auto "Field Recipe" + manual cohort modes).
   Ported from the MINT design-system project; all values resolve against the
   SDK token set in styles/variables.css. Fira Sans for UI, Fira Code for
   sample identifiers (data). Group colors are --mint-sample-1…8 (3a).
   ========================================================================== */

.sg-modal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---- Header ---- */
.sg-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.sg-head__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sg-head__sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}
.sg-head__spacer { flex: 1; }
.sg-head__close {
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 1.25rem; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.sg-head__close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---- Mode pill (Auto / Manual) — the single mode switch ---- */
.sg-mode {
  display: inline-flex; padding: 0.1875rem; gap: 0.125rem;
  background: var(--bg-tertiary); border-radius: var(--radius-md);
}
.sg-mode__btn {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary);
  padding: 0.25rem 0.625rem; border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.sg-mode__btn:hover { color: var(--text-primary); }
.sg-mode__btn--on {
  background: var(--bg-secondary); color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.sg-mode__btn--on:hover { color: var(--text-primary); }

/* ---- Body ---- */
.sg-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}
.sg-body__main {
  padding: 1rem 1.25rem;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.sg-body__side {
  border-left: 1px solid var(--border-color);
  background: var(--bg-primary);
  padding: 1.125rem 1.25rem;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  gap: 0.75rem;
}

/* Section lead */
.sg-lead { display: flex; flex-direction: column; gap: 0.25rem; }
.sg-lead__q {
  font-size: 0.9375rem; font-weight: 600; color: var(--text-primary);
}
.sg-lead__hint {
  font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.45;
}

/* Plain-english summary callout */
.sg-summary {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.625rem 0.75rem;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  font-size: 0.8125rem; line-height: 1.5; color: var(--text-primary);
}
.sg-summary b { font-weight: 600; }
.sg-summary__icon {
  flex-shrink: 0; width: 1rem; height: 1rem; color: var(--color-primary);
  margin-top: 0.0625rem;
}
.sg-summary--warn {
  background: var(--mint-warning-bg);
  box-shadow: inset 0 0 0 1px var(--mint-warning-border);
}
.sg-summary--warn .sg-summary__icon { color: var(--mint-warning); }

/* ==========================================================================
   Field Recipe (auto mode) — field toggle list
   ========================================================================== */
.sg-recipe { display: flex; flex-direction: column; gap: 0.25rem; }
.sg-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sg-field--on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.sg-field__name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.sg-field__role {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-secondary);
  padding: 0.0625rem 0.375rem; border-radius: 9999px;
  background: var(--bg-tertiary); margin-left: 0.5rem;
}
.sg-field__role--rep { color: var(--mint-warning); background: var(--mint-warning-bg); }
.sg-field__vals {
  grid-column: 1 / 2;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-field__toggle { grid-row: 1 / 3; grid-column: 2; align-self: center; }

/* ==========================================================================
   Shared — live group preview (right rail)
   ========================================================================== */
.sg-preview__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-secondary);
}
.sg-preview__count {
  margin-left: auto; font-size: 0.6875rem; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.sg-grouplist { display: flex; flex-direction: column; gap: 0.25rem; }
.sg-group {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.5rem; border-radius: var(--radius);
  transition: background 0.15s ease;
}
.sg-group:hover { background: var(--bg-hover); }
.sg-dot {
  box-sizing: border-box;
  width: 0.6875rem; height: 0.6875rem; border-radius: 50%;
  flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.sg-group__name {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-group__count {
  font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 0.0625rem 0.4375rem; border-radius: 9999px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sg-group__bar {
  flex-shrink: 0; height: 0.25rem; border-radius: 9999px;
  background: var(--g, var(--text-muted)); opacity: 0.85;
}

.sg-qc {
  margin-top: 0.5rem; padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}
.sg-qc__head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.sg-qc__title {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-secondary);
}
.fr-qc__route { margin-left: auto; }
.fr-qc__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sg-qc__chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.5rem; border-radius: var(--radius);
  background: var(--bg-tertiary);
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-secondary);
}
.sg-qc__chip .sg-dot { width: 0.5rem; height: 0.5rem; }

/* ---- Footer ---- */
.sg-foot {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.sg-foot__spacer { flex: 1; }
.sg-foot__hint {
  font-size: 0.75rem; color: var(--text-muted);
}
.sg-foot__link {
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  color: var(--color-primary); background: none; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.5rem; border-radius: var(--radius); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.sg-foot__link:hover { background: var(--color-primary-soft); color: var(--_ink-primary); }
.sg-btn {
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: var(--radius-md);
  border: 1px solid transparent; transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 0.4375rem;
}
.sg-btn--primary { background: var(--color-primary); color: #fff; }
.sg-btn--primary:hover { background: var(--color-primary-hover); }
.sg-btn--ghost {
  background: var(--bg-secondary); color: var(--text-primary);
  border-color: var(--border-color);
}
.sg-btn--ghost:hover { background: var(--bg-tertiary); }

/* ==========================================================================
   Field Recipe refinements (layered on the shared chrome above)
   ========================================================================== */
/* Section label above the anatomy and each field list. */
.fr-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }

/* One-line field row: [grip] [layer] name [rename] values [hint] [toggle]. */
.fr .sg-field {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.625rem;
}
.fr .sg-field__name { white-space: nowrap; }
.fr .sg-field__role { margin-left: 0; white-space: nowrap; }
.fr .sg-field__vals { flex: 1; min-width: 0; }
.fr-row__grip,
.fr-row__rename {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; padding: 0; flex-shrink: 0;
  border: none; border-radius: var(--radius-sm); background: none;
  color: var(--text-muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fr-row__grip { cursor: grab; }
.fr-row__grip:hover,
.fr-row__rename:hover { color: var(--text-primary); background: var(--bg-hover); }
.fr-row__grip:focus-visible,
.fr-row__rename:focus-visible { outline: none; box-shadow: var(--focus-ring-soft); }
/* Which hierarchy layer this field forms (1 = the sample selector's major group). */
.fr-row__layer {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  border: 1px solid var(--color-primary);
  background: var(--bg-secondary); color: var(--_ink-primary);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fr-row__name-input {
  width: 9rem; padding: 0.0625rem 0.375rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}
.fr-row__name-input:focus-visible { outline: none; box-shadow: var(--focus-ring-soft); }
/* Groups that remain when this field is switched off. */
.fr-row__hint {
  font-size: 0.75rem; font-weight: 500; color: var(--text-secondary-strong);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* The message is dark text (AA on the tinted row); the input border carries the error colour. */
.fr-row__error { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.fr-row__name-input[aria-invalid='true'] { border-color: var(--_ink-error); box-shadow: var(--focus-ring-error); }
.fr-row--dragging { opacity: 0.5; }
.fr-row--over { box-shadow: inset 0 2px 0 var(--color-primary); }

/* Replicate-on: the field row itself warns instead of silently shattering. */
.fr-field--warn.sg-field--on {
  border-color: var(--mint-warning-border);
  background: var(--mint-warning-bg);
}
.fr-field--warn.sg-field--on .fr-row__layer { border-color: var(--mint-warning); color: var(--text-primary); }

/* Name anatomy: the tokens of one example sample and the role of each. */
.fr-anatomy { display: flex; flex-direction: column; gap: 0.375rem; }
.fr-anatomy__tokens { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; }
.fr-token { display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.fr-token__text {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  padding: 0.125rem 0.375rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-color); background: var(--bg-tertiary);
  color: var(--text-secondary-strong);
}
.fr-token__caption { font-size: 0.6875rem; color: var(--text-secondary-strong); white-space: nowrap; }
.fr-token--on .fr-token__text {
  border-color: var(--color-primary); background: var(--color-primary-soft);
  color: var(--text-primary);
}
.fr-token--on .fr-token__caption { color: var(--_ink-primary); font-weight: 700; }
.fr-token--off .fr-token__text { border-style: dashed; background: transparent; }

/* No samples: say what to do. */
.fr-blank {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 1rem 0;
}

/* Neutral (no-selection) summary variant. */
.fr-summary--mute {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.fr-summary--mute .sg-summary__icon { color: var(--text-muted); }
.sg-summary code {
  font-family: var(--font-mono); font-size: 0.78em;
  background: rgba(0, 0, 0, 0.06); padding: 0 0.25rem; border-radius: 3px;
}
html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }

/* Rail header: wrap the count under the label rather than clip it. */
.fr .sg-preview__head { flex-wrap: wrap; row-gap: 0.15rem; }

/* QC chip when excluded reads as struck-through / dimmed. */
.fr-qc__chip--off {
  opacity: 0.5; text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.fr .sg-qc__chip { white-space: nowrap; }

.fr-empty {
  font-size: 0.8125rem; color: var(--text-muted);
  padding: 0.75rem 0.5rem; font-style: italic;
}

/* Disabled primary. */
.sg-btn--primary:disabled {
  /* Disabled = opacity AND a visual cue: shift to a neutral surface (mirrors
     the SDK button.css approach) so it reads as non-actionable, not just faded. */
  background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-color);
  opacity: 0.7; cursor: not-allowed;
}
.sg-btn--primary:disabled:hover { background: var(--bg-tertiary); }

/* ==========================================================================
   Manual grouping (manual mode) — selection-first layout
   ========================================================================== */
.mg2-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
}

/* ───────── LEFT · find & select ───────── */
.mg2-find {
  display: flex; flex-direction: column; min-width: 0;
  /* min-height:0 lets this grid item shrink below content so .mg2-list scrolls
     inside the fixed modal height instead of growing the grid track. */
  min-height: 0;
  border-right: 1px solid var(--border-color);
}

.mg2-search {
  position: relative; display: flex; align-items: center;
  margin: 0.875rem 1rem 0.625rem;
}
.mg2-search > svg {
  position: absolute; left: 0.6875rem; color: var(--text-muted); pointer-events: none;
}
.mg2-search input {
  width: 100%; font: inherit; font-size: 0.8125rem;
  padding: 0.5rem 2rem 0.5rem 2.125rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-tertiary); color: var(--text-primary); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mg2-search input:focus {
  border-color: var(--color-primary); background: var(--bg-secondary);
  box-shadow: var(--focus-ring-soft);
}
.mg2-search__clr {
  position: absolute; right: 0.5rem; display: flex; padding: 0.1875rem;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  border-radius: 9999px;
}
.mg2-search__clr:hover { background: var(--bg-hover); color: var(--text-primary); }

.mg2-chips {
  display: flex; gap: 0.375rem; padding: 0 1rem 0.625rem;
}
.mg2-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
  padding: 0.3125rem 0.625rem; cursor: pointer;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: 9999px;
  transition: all 0.13s ease;
}
.mg2-chip:hover { border-color: var(--text-muted); }
.mg2-chip--on {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.mg2-chip__n {
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 0.6875rem; color: var(--text-muted);
}
.mg2-chip--on .mg2-chip__n { color: rgba(255, 255, 255, 0.8); }

.mg2-selbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0; margin: 0 1rem;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.mg2-check {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
}
.mg2-check input { width: 0.9375rem; height: 0.9375rem; accent-color: var(--color-primary); cursor: pointer; }
.mg2-selbar__n {
  margin-left: auto; font-size: 0.75rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mg2-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.375rem 0.5rem 0.5rem;
}
.mg2-list__empty {
  padding: 1.5rem 0.75rem; font-size: 0.8125rem; color: var(--text-muted);
  font-style: italic; text-align: center;
}
.mg2-row {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.5rem; border-radius: var(--radius);
  cursor: pointer; transition: background 0.12s ease;
}
.mg2-row:hover { background: var(--bg-hover); }
.mg2-row--on { background: var(--color-primary-soft); }
.mg2-cb {
  width: 0.9375rem; height: 0.9375rem; accent-color: var(--color-primary);
  flex-shrink: 0; pointer-events: none;
}
.mg2-row__name {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg2-row__tag {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary);
  padding: 0.125rem 0.5rem 0.125rem 0.375rem; border-radius: 9999px;
  background: var(--bg-tertiary);
  white-space: nowrap;
}
.mg2-row__tag .sg-dot { width: 0.5rem; height: 0.5rem; }
.mg2-row__tag--none {
  background: none; color: var(--text-muted); font-weight: 400;
  font-style: italic; padding-left: 0.5rem;
}

/* ───────── RIGHT · cohorts rail ───────── */
.mg2-cohorts {
  display: flex; flex-direction: column; min-width: 0;
  /* min-height:0 lets this grid item shrink so .mg2-tree scrolls within height. */
  min-height: 0;
  background: var(--bg-primary);
  padding: 0.875rem 1.125rem 1rem;
  gap: 0.75rem;
}
.mg2-cohorts__head { display: flex; align-items: baseline; gap: 0.5rem; }
.mg2-cohorts__t {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-secondary);
}
.mg2-cohorts__n {
  margin-left: auto; font-size: 0.75rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.mg2-progress { display: flex; flex-direction: column; gap: 0.4375rem; }
.mg2-progress__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap;
}
.mg2-progress__top b { color: var(--text-primary); font-weight: 600; }
.mg2-progress__pct {
  font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.mg2-progress__track {
  height: 0.4375rem; border-radius: 9999px; background: var(--bg-tertiary); overflow: hidden;
}
.mg2-progress__fill {
  height: 100%; border-radius: 9999px;
  background: var(--color-primary);
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.mg2-tree { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.mg2-tree__empty {
  font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5;
  padding: 0.5rem 0; font-style: italic;
}
.mg2-grp {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); overflow: hidden;
}
.mg2-grp__row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
}
.mg2-grp__name { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.mg2-grp__n {
  font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-tertiary); padding: 0.0625rem 0.4375rem; border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.mg2-sub {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3125rem 0.625rem 0.3125rem 1.625rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.75rem; color: var(--text-secondary);
}
.mg2-sub__name { flex: 1; font-family: var(--font-mono); }
.mg2-sub__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mg2-sub2 {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 2.625rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.6875rem; color: var(--text-muted);
}
.mg2-sub2__name { flex: 1; font-family: var(--font-mono); }
.mg2-sub2__name::before { content: '└ '; color: var(--border-color); }
.mg2-sub2__n { font-variant-numeric: tabular-nums; }

.mg2-unassigned {
  display: flex; align-items: center; gap: 0.5rem;
  font: inherit; font-size: 0.8125rem; color: var(--text-secondary);
  padding: 0.5625rem 0.625rem; cursor: pointer; text-align: left; width: 100%;
  border: 1px dashed var(--border-color); border-radius: var(--radius-md);
  background: none; transition: all 0.13s ease;
}
.mg2-unassigned:hover { border-color: var(--text-muted); background: var(--bg-hover); }
.mg2-unassigned--on { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
.mg2-unassigned b { color: var(--text-primary); font-weight: 600; }
.mg2-unassigned__act {
  margin-left: auto; font-size: 0.6875rem; font-weight: 600;
  color: var(--color-primary);
}

/* ───────── contextual assignment bar ───────── */
.mg2-bar {
  flex-shrink: 0; overflow: hidden;
  max-height: 0; opacity: 0;
  border-top: 1px solid transparent;
  background: linear-gradient(0deg, var(--color-primary-soft), var(--color-primary-soft)), var(--bg-secondary);
  transition: max-height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease, border-color 0.2s ease;
}
.mg2-bar--open {
  max-height: 160px; opacity: 1;
  border-top-color: var(--color-primary);
}
.mg2-bar__inner {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.625rem 0.75rem;
  padding: 0.6875rem 1.25rem; color: var(--text-secondary);
}
.mg2-bar .sg-btn { white-space: nowrap; flex-shrink: 0; }
.mg2-bar__count {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.8125rem; color: var(--text-primary); padding-bottom: 0.4375rem;
}
.mg2-bar__count b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mg2-bar__inner > svg { color: var(--color-primary); margin-bottom: 0.5rem; flex-shrink: 0; }

.mg2-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.mg2-field--grow { flex: 1 1 7rem; }
.mg2-field__l {
  font-size: 0.75rem; font-weight: 600;
  color: var(--text-secondary);
}
.mg2-combo {
  position: relative; display: flex; align-items: center; gap: 0.4375rem;
  padding: 0 0.625rem; height: 2.125rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius);
}
.mg2-combo:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
.mg2-combo input {
  flex: 1; min-width: 4rem; border: none; background: none; outline: none;
  font: inherit; font-size: 0.8125rem; color: var(--text-primary);
}
.mg2-combo__chev { color: var(--text-muted); pointer-events: none; display: flex; }

.mg2-swatches { display: flex; gap: 0.3125rem; align-items: center; height: 2.125rem; }
.mg2-swatch {
  width: 1.125rem; height: 1.125rem; border-radius: 9999px; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition: transform 0.12s ease;
}
.mg2-swatch:hover { transform: scale(1.12); }
.mg2-swatch--on {
  border-color: var(--bg-secondary);
  box-shadow: 0 0 0 2px currentColor, inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.mg2-bar__spacer { flex: 1; }
.mg2-bar__clear {
  font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary);
  background: none; border: none; cursor: pointer; padding: 0.5rem 0.625rem;
  border-radius: var(--radius); margin-bottom: 0.0625rem;
}
.mg2-bar__clear:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ==========================================================================
   CSV upload control (Field Recipe header) + drag-and-drop zone
   ========================================================================== */
.fr-upload {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font: inherit; font-size: 0.75rem; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  padding: 0.25rem 0.5rem; border-radius: var(--radius);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fr-upload:hover {
  background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--text-muted);
}
.fr-upload:focus-visible { outline: none; box-shadow: var(--focus-ring-soft); }
/* anchor the drop overlay to the main panel */
.sg-body__main { position: relative; }
.fr-dropzone {
  position: absolute; inset: 0.5rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; pointer-events: none;
  border: 2px dashed var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--_ink-primary); font-size: 0.8125rem; font-weight: 600;
}
.fr-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.625rem;
  background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 0.8125rem;
}

/* ==========================================================================
   Host adapter — when AutoGroupModal renders the Smart Group card inside
   BaseModal, strip BaseModal's own chrome/padding so the .sg-modal card is the
   only visible frame, and size it to the design.
   ========================================================================== */
/* Keyed on the presence of .sg-modal (not the fallthrough `.sg-host` class,
   which doesn't reliably reach BaseModal's Teleport root) so the flatten always
   applies under BaseModal, and never matches the bare-rendered standalone
   stories (they have no .mint-modal ancestor). After this there is exactly one
   card edge — the .sg-modal one. */
.mint-modal__container:has(.sg-modal) {
  width: 980px;
  max-width: calc(100vw - 2rem);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.mint-modal__body:has(.sg-modal) {
  padding: 0;
  background: transparent;
}
.mint-modal__container:has(.sg-modal) .sg-modal {
  height: min(640px, calc(100vh - 4rem));
}
.sg-host__error { margin: 0 0 0.75rem; }
/* GroupAssigner Component Styles */

.mint-group-assigner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Zones container */
.mint-group-assigner__zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Zone */
.mint-group-assigner__zone {
  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));
}

.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-group-assigner__zone-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--zone-color);
}

.mint-group-assigner__zone-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mint-group-assigner__zone-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.375rem;
}

.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);
}

/* 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-group-assigner__pill:hover {
  box-shadow: var(--shadow-sm);
}

.mint-group-assigner__pill:active {
  cursor: grabbing;
}

.mint-group-assigner__pill--unassigned {
  background-color: var(--bg-tertiary);
}

.mint-group-assigner__pill--dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.mint-group-assigner__pill-color {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.mint-group-assigner__pill-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.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 {
  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);
}

/* 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-secondary);
}

.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);
}

/* 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);
}
/* MoleculeInput Component Styles */

.mint-molecule-input {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-molecule-input {
  --border-light: var(--border-color);
}

/* Field rules (1a / 1e). */
.mint-molecule-input:hover:not(:focus-within):not(.mint-molecule-input--error) {
  border-color: var(--_field-border-hover);
}

.mint-molecule-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-molecule-input--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  pointer-events: none;
}

.mint-molecule-input--readonly {
  pointer-events: none;
}

.mint-molecule-input--error {
  border-color: var(--mint-error);
}

.mint-molecule-input--error:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

/* Editor container */
.mint-molecule-input__editor {
  position: relative;
  width: 100%;
  min-height: 200px;
  background-color: var(--bg-secondary);
}

.mint-molecule-input__editor iframe {
  border: none;
  display: block;
}

/* Skeleton loader */
.mint-molecule-input__skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  min-height: 200px;
  background-color: var(--bg-tertiary);
}

.mint-molecule-input__skeleton-icon {
  width: 3rem;
  height: 3rem;
  color: var(--text-muted);
  animation: mint-molecule-pulse 1.5s ease-in-out infinite;
}

.mint-molecule-input__skeleton-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}

@keyframes mint-molecule-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Readonly SVG display */
.mint-molecule-input__readonly {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 1rem;
  background-color: var(--bg-tertiary);
}

.mint-molecule-input__readonly svg {
  max-width: 100%;
  max-height: 100%;
}

/* Empty state */
.mint-molecule-input__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 200px;
  padding: 1rem;
  color: var(--text-muted);
}

.mint-molecule-input__empty-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.mint-molecule-input__empty-text {
  font-size: 0.875rem;
}

/* SMILES preview */
.mint-molecule-input__smiles {
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
  border-top: 1px solid var(--border-light);
  word-break: break-all;
  user-select: all;
}

.mint-molecule-input__smiles-label {
  color: var(--text-secondary);
  margin-right: 0.5rem;
}

/* Error state */
.mint-molecule-input__error {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--mint-error);
  background-color: var(--mint-error-bg);
  border-top: 1px solid var(--mint-error);
}

.mint-molecule-input__error-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Actions toolbar */
.mint-molecule-input__actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem;
  border-top: 1px solid var(--border-light);
}

.mint-molecule-input__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mint-molecule-input__action-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mint-molecule-input__action-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-molecule-input__action-btn:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-molecule-input__action-btn svg {
  width: 1rem;
  height: 1rem;
}

/* ConcentrationInput composes UnitInput; the hint is UnitInput's nearest-unit hint (4b). */

.mint-concentration-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* DoseCalculator Component Styles */

.mint-dose-calculator {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
}

.mint-dose-calculator--disabled {
  opacity: var(--mint-disabled-opacity);
  pointer-events: none;
}

/* Tabs */
.mint-dose-calculator__tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

.mint-dose-calculator__tab {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mint-dose-calculator__tab:hover:not(.mint-dose-calculator__tab--active) {
  color: var(--text-secondary);
  background-color: var(--bg-hover);
}

.mint-dose-calculator__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color: var(--bg-secondary);
}

/* Form */
.mint-dose-calculator__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Row fields: labels in a fixed column, controls fill the rest. Layout only (6c). */
.mint-dose-calculator__form > .mint-form-field--row > .mint-form-field__label-row {
  flex: 0 0 7rem;
}

.mint-dose-calculator__form > .mint-form-field--row > .mint-form-field__control {
  flex: 1 1 0;
}

/* Divider */
.mint-dose-calculator__divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.5rem 0;
}

/* Result section */
.mint-dose-calculator__result {
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius);
}

.mint-dose-calculator__result-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.mint-dose-calculator__result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
}

.mint-dose-calculator__result-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.mint-dose-calculator__result-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.mint-dose-calculator__result-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Fira Code', monospace;
}

/* Error state */
.mint-dose-calculator__error {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--mint-error);
  background-color: var(--mint-error-bg);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

/* Serial dilution preview */
.mint-dose-calculator__preview {
  margin-top: 1rem;
}

.mint-dose-calculator__preview-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.mint-dose-calculator__preview-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mint-dose-calculator__preview-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.mint-dose-calculator__preview-step-num {
  font-weight: 600;
  color: var(--color-primary);
}

.mint-dose-calculator__preview-step-conc {
  font-family: 'Fira Code', monospace;
  color: var(--text-primary);
}

.mint-dose-calculator__preview-arrow {
  color: var(--text-muted);
}

/* Molecular weight input */
.mint-dose-calculator__mw-section {
  padding: 0.75rem 1rem;
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}

.mint-dose-calculator__mw-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

/* ReagentList Component Styles */

.mint-reagent-list {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-reagent-list {
  --border-light: var(--border-color);
}

/* Header */
.mint-reagent-list__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

/* Search */
.mint-reagent-list__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-reagent-list__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-reagent-list__search-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mint-reagent-list__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mint-reagent-list__search-input::placeholder {
  color: var(--text-muted);
}

/* Add button — a BaseButton (secondary, sm); only the icon size is local. */
.mint-reagent-list__add-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Table - reset consumer/framework styles */
.mint-reagent-list__table {
  display: table !important;
  overflow: visible !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-spacing: 0 !important;
}

.mint-reagent-list__table thead {
  display: table-header-group !important;
}

.mint-reagent-list__table tbody {
  display: table-row-group !important;
}

.mint-reagent-list__table tr {
  display: table-row !important;
  border: none !important;
  background: transparent !important;
}

.mint-reagent-list__table tr:nth-child(2n) {
  background: transparent !important;
}

.mint-reagent-list__table thead {
  background-color: var(--bg-primary) !important;
}

.mint-reagent-list__table th {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent !important;
}

.mint-reagent-list__table th.mint-reagent-list__col--sortable {
  cursor: pointer;
  user-select: none;
}

.mint-reagent-list__table th.mint-reagent-list__col--sortable:hover {
  color: var(--text-primary) !important;
}

/* Sortable headers are real buttons; strip the native chrome so the cell keeps
   its table-header look while staying keyboard-operable. */
.mint-reagent-list__sort-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: inherit;
}

.mint-reagent-list__sort-icon {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* 2a: an unsorted column shows its arrow only on hover; the sorted header is --text-primary. */
.mint-reagent-list__col--sortable:hover .mint-reagent-list__sort-icon:not(.mint-reagent-list__sort-icon--active) {
  opacity: 0.5;
}

.mint-reagent-list__table th[aria-sort="ascending"],
.mint-reagent-list__table th[aria-sort="descending"] {
  color: var(--text-primary) !important;
}

.mint-reagent-list__sort-icon--active {
  opacity: 1;
  color: var(--color-primary);
}

/* Row */
.mint-reagent-list__row {
  transition: background-color 0.15s ease;
}

.mint-reagent-list__row:hover {
  background-color: var(--bg-hover);
}

.mint-reagent-list__row:not(:last-child) td {
  border-bottom: 1px solid var(--border-light) !important;
}

/* Row status lives in the cells (dot / clock / strike), not a left border (3d). */

/* Cell */
.mint-reagent-list__cell {
  padding: 0.625rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
}

.mint-reagent-list__cell--name {
  font-weight: 500;
}

.mint-reagent-list__cell--muted {
  color: var(--text-secondary);
}

.mint-reagent-list__cell--actions {
  text-align: right;
  white-space: nowrap;
}

/* Expired text */
.mint-reagent-list__expired-text {
  text-decoration: line-through;
  color: var(--_ink-error);
}

/* Stock bar */
.mint-reagent-list__stock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-reagent-list__stock-bar {
  width: 60px;
  height: 6px;
  background-color: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

/* Fill is always primary (6b); low stock is the dot + "Low" text, not a red bar (3d). */
.mint-reagent-list__stock-fill {
  height: 100%;
  border-radius: 3px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.mint-reagent-list__stock-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
  min-width: 2.5rem;
  white-space: nowrap;
}

.mint-reagent-list__stock-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Low stock: a warning dot before the text. */
.mint-reagent-list__stock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.mint-reagent-list__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: var(--mint-warning);
  flex-shrink: 0;
}

/* Expiry status: text (+ clock for expiring), no badge fill. */
.mint-reagent-list__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.mint-reagent-list__badge--warning {
  color: var(--mint-warning-text);
}

.mint-reagent-list__badge--error {
  color: var(--_ink-error);
}

.mint-reagent-list__badge-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* Storage condition */
.mint-reagent-list__storage {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.mint-reagent-list__storage--RT {
  color: var(--mint-success);
}

.mint-reagent-list__storage--4C {
  color: var(--mint-info);
}

.mint-reagent-list__storage---20C {
  color: var(--color-primary);
}

.mint-reagent-list__storage---80C {
  color: var(--color-purple);
}

/* Action buttons */
.mint-reagent-list__action-btn {
  padding: 0.25rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mint-reagent-list__action-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mint-reagent-list__action-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-reagent-list__action-btn--danger:hover {
  color: var(--mint-error);
  background-color: var(--mint-error-bg);
}

.mint-reagent-list__action-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-reagent-list__state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drag handle */
/* The drag handle doubles as the keyboard reorder target (Alt+Arrow). */
.mint-reagent-list__drag-handle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: grab;
}

.mint-reagent-list__drag-handle-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-reagent-list__drag-handle-btn:focus-visible .mint-reagent-list__drag-handle {
  opacity: 1;
}

.mint-reagent-list__drag-handle {
  width: 1rem;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mint-reagent-list__row:hover .mint-reagent-list__drag-handle {
  opacity: 1;
}

.mint-reagent-list__drag-handle:active {
  cursor: grabbing;
}

/* Dragging state */
.mint-reagent-list__row--dragging {
  opacity: 0.5;
}

.mint-reagent-list__row--drag-over {
  background-color: var(--color-primary-soft);
}

/* External link */
.mint-reagent-list__link {
  color: var(--color-primary);
  text-decoration: none;
}

.mint-reagent-list__link:hover {
  text-decoration: underline;
}

/* SampleHierarchyTree Component Styles */

.mint-sample-tree {
  font-size: 0.8125rem;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-sample-tree {
  --border-light: var(--border-color);
}

.mint-sample-tree--sm {
  font-size: 0.75rem;
}

.mint-sample-tree--lg {
  font-size: 1rem;
}

/* Node */
.mint-sample-tree__node {
  user-select: none;
}

/* Node header (clickable row): 28px / 13px (4c) */
.mint-sample-tree__node-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  padding: 0 0.5rem 0 0.25rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mint-sample-tree__node-header:hover {
  background-color: var(--bg-hover);
}

/* Selection is the tree's only color: primary-soft row, primary ink text + icon (4c). */
.mint-sample-tree__node-header--selected,
.mint-sample-tree__node-header--selected:hover {
  background-color: var(--color-primary-soft);
}

.mint-sample-tree__node-header--selected .mint-sample-tree__label,
.mint-sample-tree__node-header--selected .mint-sample-tree__icon {
  color: var(--_ink-primary);
}

.mint-sample-tree__node-header--selected .mint-sample-tree__label {
  font-weight: 500;
}

.mint-sample-tree__node-header:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sample-tree--sm .mint-sample-tree__node-header {
  padding: 0.25rem 0.375rem;
  gap: 0.25rem;
}

.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-secondary);
  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:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sample-tree__toggle svg {
  width: 0.75rem;
  height: 0.75rem;
  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;
}

.mint-sample-tree--lg .mint-sample-tree__toggle {
  width: 1.5rem;
  height: 1.5rem;
}

.mint-sample-tree--lg .mint-sample-tree__toggle svg {
  width: 1rem;
  height: 1rem;
}

/* 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;
}

.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
  width: 1.5rem;
}

/* Icon: one neutral color, the node type reads from the glyph alone (4c). */
.mint-sample-tree__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.mint-sample-tree__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.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-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;
}

/* Label */
.mint-sample-tree__label {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sample nodes carry IDs. */
.mint-sample-tree__label--sample {
  font-family: var(--font-mono);
}

/* 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.6875rem;
  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.6875rem;
}

.mint-sample-tree--lg .mint-sample-tree__badge {
  min-width: 1.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
}

/* Counts are plain mono text; only the semantic variants stay pills (4c). */
.mint-sample-tree__badge--default,
.mint-sample-tree--sm .mint-sample-tree__badge--default,
.mint-sample-tree--lg .mint-sample-tree__badge--default {
  min-width: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  background: none;
  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-text);
}

.mint-sample-tree__badge--error {
  background-color: var(--mint-error-bg);
  color: var(--_ink-error);
}

/* Children container. A one-row grid so expand/collapse animates
   grid-template-rows 0fr ↔ 1fr with no max-height cap (4c). */
.mint-sample-tree__children {
  display: grid;
  grid-template-rows: 1fr;
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-light);
}

.mint-sample-tree__children-inner {
  min-height: 0;
  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;
    grid-template-rows: 0fr;
  }
  to {
    opacity: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes mint-tree-collapse {
  from {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  to {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-sample-tree__children--entering,
  .mint-sample-tree__children--leaving {
    animation: none;
  }
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-sample-tree__state {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ProtocolStepEditor Component Styles */

.mint-protocol-editor {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
}

/* Dark --border-light equals the card surface; the header hairline needs --border-color there. */
:where(html.dark) .mint-protocol-editor {
  --border-light: var(--border-color);
}

/* Header */
.mint-protocol-editor__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-protocol-editor__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mint-protocol-editor__counter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Form: SDK fields in FormField rows. Layout only — the fields keep their own look. */
.mint-protocol-editor__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Row labels in a fixed column, controls fill the rest (6c). */
.mint-protocol-editor__form > .mint-form-field--row > .mint-form-field__label-row {
  flex: 0 0 7rem;
}

.mint-protocol-editor__form > .mint-form-field--row > .mint-form-field__control {
  flex: 1 1 0;
}

/* Preview section */
.mint-protocol-editor__preview {
  margin-top: 0.5rem;
  padding: 1rem;
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
}

.mint-protocol-editor__preview-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.mint-protocol-editor__preview-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.mint-protocol-editor__preview-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  border-radius: 9999px;
  flex-shrink: 0;
}

.mint-protocol-editor__preview-icon svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
}

.mint-protocol-editor__preview-content {
  flex: 1;
  min-width: 0;
}

.mint-protocol-editor__preview-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.mint-protocol-editor__preview-params {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mint-protocol-editor__preview-duration {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

/* Actions */
.mint-protocol-editor__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

.mint-protocol-editor__actions-spacer {
  flex: 1;
}

/* SegmentedControl Component Styles */

.mint-segmented-control {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Card variant container - matches RFA design.
   `width: fit-content` is load-bearing: `inline-grid` alone gets blockified and
   stretched when the control is a stretching flex/grid item. */
.mint-segmented-control--card {
  display: inline-grid;
  box-sizing: border-box; /* full-width must include the padding */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  gap: 0.1875rem;
  padding: 0.1875rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-tertiary);
  overflow: visible;
}

.mint-segmented-control--full-width:not(.mint-segmented-control--card) {
  display: flex;
  width: 100%;
}

.mint-segmented-control--card.mint-segmented-control--full-width {
  display: grid;
  width: 100%;
}

.mint-segmented-control--disabled {
  opacity: var(--mint-disabled-opacity);
  pointer-events: none;
}

/* Options - shared styles */
.mint-segmented-control__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}

.mint-segmented-control__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
  z-index: 1;
}

.mint-segmented-control__option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Remove double borders between adjacent options (simple variant only) */
.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option + .mint-segmented-control__option {
  margin-left: -1px;
}

/* First and last option border radius (simple variant only) */
.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Simple variant */
.mint-segmented-control__option--simple {
  flex: 1;
  padding: 0.5rem 1rem;
  /* `flex: 1` (basis 0) would otherwise squeeze a longer label onto two lines. */
  white-space: nowrap;
}

.mint-segmented-control__option--simple:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
  background-color: var(--bg-hover);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  z-index: 1;
}

/* Card variant - matches RFA raised card design */
.mint-segmented-control__option--card {
  flex: 1;
  padding: 0.5rem 0.75rem;
  gap: 0.0625rem;
  border: none;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text-muted);
}

.mint-segmented-control__option--card:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-segmented-control__option--card.mint-segmented-control__option--active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Size variants - simple */
.mint-segmented-control__option--simple.mint-segmented-control__option--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: var(--form-height-sm);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

/* Size variants - card */
.mint-segmented-control__option--card.mint-segmented-control__option--sm {
  padding: 0.3125rem 0.625rem;
}

.mint-segmented-control__option--card.mint-segmented-control__option--md {
  padding: 0.5rem 0.75rem;
}

.mint-segmented-control__option--card.mint-segmented-control__option--lg {
  padding: 0.75rem 1rem;
}

/* Label */
.mint-segmented-control__label {
  font-weight: 500;
  line-height: 1.25;
}

.mint-segmented-control__option--sm .mint-segmented-control__label {
  font-size: 0.75rem;
}

.mint-segmented-control__option--md .mint-segmented-control__label {
  font-size: 0.875rem;
}

.mint-segmented-control__option--lg .mint-segmented-control__label {
  font-size: 1rem;
}

/* Optional color swatch (e.g. a group color) before the label. */
.mint-segmented-control__swatch {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: 0.0625rem;
}

/* Description (card variant only) */
.mint-segmented-control__description {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.25;
}

/* Description color in active state - use text-muted for card variant, primary for simple */
.mint-segmented-control__option--simple.mint-segmented-control__option--active .mint-segmented-control__description {
  color: color-mix(in srgb, white 80%, transparent);
}

.mint-segmented-control__option--card.mint-segmented-control__option--active .mint-segmented-control__description {
  color: var(--text-muted);
}

.mint-segmented-control__option--sm .mint-segmented-control__description {
  font-size: 0.6875rem;
}

.mint-segmented-control__option--md .mint-segmented-control__description {
  font-size: 0.75rem;
}

.mint-segmented-control__option--lg .mint-segmented-control__description {
  font-size: 0.875rem;
}

/* SequenceProgressBar (6b): mono counts and times, no colored percent, no ETA pill.
   The bar fill is --color-primary (ProgressBar). */
.mint-sequence-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.mint-sequence-progress__header,
.mint-sequence-progress__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.mint-sequence-progress__label,
.mint-sequence-progress__remaining {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-sequence-progress__label,
.mint-sequence-progress__percent {
  color: var(--text-primary);
}

.mint-sequence-progress__percent,
.mint-sequence-progress__eta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mint-sequence-progress__remaining,
.mint-sequence-progress__eta {
  color: var(--text-secondary);
}

/* MultiSelect Component Styles */

.mint-multi-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mint-multi-select--disabled {
  opacity: var(--mint-disabled-opacity);
  pointer-events: none;
}

/* Placeholder */
.mint-multi-select__placeholder {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mint-multi-select--sm .mint-multi-select__placeholder {
  font-size: 0.75rem;
}

.mint-multi-select--lg .mint-multi-select__placeholder {
  font-size: 1rem;
}

/* Options container */
.mint-multi-select__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Chip styles — a toggleable option, not a status pill (1i) */
.mint-multi-select__chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-secondary-strong);
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.mint-multi-select__chip:hover:not(.mint-multi-select__chip--active):not(.mint-multi-select__chip--disabled) {
  background-color: var(--bg-hover);
}

.mint-multi-select__chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-multi-select__chip--active {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--_ink-primary);
}

.mint-multi-select__chip--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Size variants — fixed heights line up with neighbouring fields */
.mint-multi-select__chip--sm {
  height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

.mint-multi-select__chip--md {
  height: 1.75rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  gap: 0.375rem;
}

.mint-multi-select__chip--lg {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  gap: 0.375rem;
}

/* Chip label */
.mint-multi-select__chip-label {
  line-height: 1.25;
}

/* Check icon — always rendered so the chip width never jumps */
.mint-multi-select__chip-check {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.28;
  transition: opacity 120ms ease;
}

.mint-multi-select__chip--active .mint-multi-select__chip-check {
  opacity: 1;
}

.mint-multi-select__chip--lg .mint-multi-select__chip-check {
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-multi-select__chip,
  .mint-multi-select__chip-check {
    transition: none;
  }
}

/* Summary text */
.mint-multi-select__summary {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mint-multi-select--sm .mint-multi-select__summary {
  font-size: 0.6875rem;
}

.mint-multi-select--lg .mint-multi-select__summary {
  font-size: 0.875rem;
}

/* BasePill Component Styles */

.mint-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Sizes */
.mint-pill--sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
}

.mint-pill--md {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.mint-pill--lg {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Semantic tones — every color resolves from a token. `--mint-pill-tone` is the
   accent (soft-tint background, dot, outline border); `--mint-pill-ink` the text. */
.mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
.mint-pill--success { --mint-pill-tone: var(--mint-success);  --mint-pill-ink: var(--mint-success-hover); }
.mint-pill--warning { --mint-pill-tone: var(--mint-warning);  --mint-pill-ink: var(--mint-warning-text); }
.mint-pill--error   { --mint-pill-tone: var(--mint-error);    --mint-pill-ink: var(--mint-error-hover); }
.mint-pill--info    { --mint-pill-tone: var(--mint-info);     --mint-pill-ink: color-mix(in srgb, var(--mint-info) 78%, black); }
.mint-pill--neutral { --mint-pill-tone: var(--text-secondary); --mint-pill-ink: var(--text-secondary-strong); }

html.dark .mint-pill--primary,
html.dark .mint-pill--success,
html.dark .mint-pill--warning,
html.dark .mint-pill--error,
html.dark .mint-pill--info {
  --mint-pill-ink: var(--mint-pill-tone);
}

/* Variants */
.mint-pill--default,
.mint-pill--neutral {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.mint-pill--primary,
.mint-pill--success,
.mint-pill--warning,
.mint-pill--error,
.mint-pill--info {
  background-color: color-mix(in srgb, var(--mint-pill-tone) 12%, transparent);
  color: var(--mint-pill-ink);
}

html.dark .mint-pill--primary,
html.dark .mint-pill--success,
html.dark .mint-pill--warning,
html.dark .mint-pill--error,
html.dark .mint-pill--info {
  background-color: color-mix(in srgb, var(--mint-pill-tone) 22%, transparent);
}

/* Status dot */
.mint-pill__dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--mint-pill-tone, currentColor);
}

/* ========================================================================
   Variant: Outline
   ========================================================================
   Transparent bg, 1px semantic border, semantic text. Quietest treatment.
   Good on tinted surfaces or in dense lists where Soft Tint's bg would
   clash.
   ======================================================================== */

.mint-pill--outline {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.mint-pill--outline.mint-pill--neutral { border-color: var(--text-muted); color: var(--text-primary); }

.mint-pill--outline.mint-pill--primary,
.mint-pill--outline.mint-pill--success,
.mint-pill--outline.mint-pill--warning,
.mint-pill--outline.mint-pill--error,
.mint-pill--outline.mint-pill--info {
  background-color: transparent;
  border-color: var(--mint-pill-tone);
  color: var(--mint-pill-ink);
}

/* Disabled */
.mint-pill--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: default;
}

/* Icon slot */
.mint-pill__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mint-pill--sm .mint-pill__icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-pill--md .mint-pill__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-pill--lg .mint-pill__icon {
  width: 1rem;
  height: 1rem;
}

.mint-pill__icon > svg {
  width: 100%;
  height: 100%;
}

/* Label */
.mint-pill__label {
  display: inline-flex;
  align-items: center;
}

/* Remove button */
.mint-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.0625rem;
  margin-left: 0.125rem;
  margin-right: -0.125rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.mint-pill__remove:hover {
  opacity: 1;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.mint-pill__remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-pill__remove-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-pill--sm .mint-pill__remove-icon {
  width: 0.625rem;
  height: 0.625rem;
}

.mint-pill--lg .mint-pill__remove-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Calendar Component Styles */

.mint-calendar {
  display: inline-block;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  user-select: none;
}

/* Header */
.mint-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.mint-calendar__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mint-calendar__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mint-calendar__nav-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-calendar__nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-calendar__nav-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Weekday labels */
.mint-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 0.25rem;
}

.mint-calendar__weekday {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.25rem 0;
}

/* Day grid */
.mint-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}

/* Day cells */
.mint-calendar__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  cursor: default;
  padding: 0;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.mint-calendar__day--interactive {
  cursor: pointer;
}

.mint-calendar__day--interactive:hover:not(.mint-calendar__day--disabled):not(.mint-calendar__day--selected) {
  background-color: var(--bg-hover);
}

/* Today */
.mint-calendar__day--today:not(.mint-calendar__day--selected) {
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

/* Selected */
.mint-calendar__day--selected {
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
}

.mint-calendar__day--selected:hover {
  background-color: var(--color-primary-hover);
}

/* In range */
.mint-calendar__day--in-range {
  background-color: var(--color-primary-soft);
  border-radius: 0;
}

/* Outside month */
.mint-calendar__day--outside {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Disabled */
.mint-calendar__day--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Day number */
.mint-calendar__day-number {
  line-height: 1;
}

/* Markers */
.mint-calendar__markers {
  display: flex;
  gap: 0.125rem;
  position: absolute;
  bottom: 0.125rem;
  left: 50%;
  transform: translateX(-50%);
}

.mint-calendar__marker {
  --marker-color: var(--color-primary);
}

.mint-calendar__marker--dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: var(--marker-color);
}

.mint-calendar__marker--bar {
  width: 0.75rem;
  height: 0.1875rem;
  border-radius: 9999px;
  background-color: var(--marker-color);
}

.mint-calendar__marker--highlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--marker-color);
  opacity: 0.15;
}

/* Focus states */
.mint-calendar__day:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  z-index: 1;
}
/* DataFrame Component Styles */

.mint-dataframe {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-dataframe {
  --border-light: var(--border-color);
}

.mint-dataframe--bordered {
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Search header */
.mint-dataframe__header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-light);
  background-color: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.mint-dataframe__search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.mint-dataframe__search-icon {
  position: absolute;
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

.mint-dataframe__search {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.5rem 0.625rem 0.5rem 2rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-primary);
  outline: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.mint-dataframe__search::placeholder {
  color: var(--text-muted);
}

.mint-dataframe__search:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--bg-primary);
  box-shadow: var(--focus-ring-soft);
}

/* Table wrapper */
.mint-dataframe__table-wrapper {
  position: relative;
  overflow-x: auto;
  background-color: var(--bg-card);
  scrollbar-width: thin;
}

.mint-dataframe__table-wrapper::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.mint-dataframe__table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.mint-dataframe__table-wrapper::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

/* Table */
.mint-dataframe__table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  display: table !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mint-dataframe__table thead {
  display: table-header-group !important;
}

.mint-dataframe__table tbody {
  display: table-row-group !important;
}

.mint-dataframe__table tr {
  display: table-row !important;
  border: none !important;
  background: transparent !important;
}

.mint-dataframe__table tr:nth-child(2n) {
  background: transparent !important;
}

/* Thead */
.mint-dataframe__thead {
  background-color: var(--bg-primary);
}

.mint-dataframe__thead--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border-color);
}

/* Th */
.mint-dataframe__th {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent !important;
}

.mint-dataframe__th--sm {
  padding: 0.375rem 0.5rem !important;
}

.mint-dataframe__th--md {
  padding: 0.5rem 0.75rem !important;
}

.mint-dataframe__th--lg {
  padding: 0.625rem 1rem !important;
}

.mint-dataframe__th--align-left {
  text-align: left !important;
}

.mint-dataframe__th--align-center {
  text-align: center !important;
}

.mint-dataframe__th--align-right {
  text-align: right !important;
}

.mint-dataframe__th--sortable {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

/* Sorting tints the header text and arrow only, never the column (2a). */
.mint-dataframe__th--sortable:hover {
  color: var(--text-primary) !important;
}

.mint-dataframe__th--sorted {
  color: var(--text-primary) !important;
}

.mint-dataframe__th--checkbox {
  width: 2.5rem;
  padding: 0.5rem;
  text-align: center !important; /* the base th rule is left !important; align with the row checkboxes */
}

/* Sortable headers are real buttons; strip the native chrome so the cell keeps
   its table-header appearance while staying keyboard-operable. */
.mint-dataframe__th-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: inherit;
}

.mint-dataframe__th-content {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.25rem;
}

/* Unit: its own mono element, never case-transformed (2a). */
.mint-dataframe__th-unit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
}

/* Sort icon */
.mint-dataframe__sort-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}

.mint-dataframe__th--sortable:hover .mint-dataframe__sort-icon {
  opacity: 0.6;
}

.mint-dataframe__sort-icon--asc,
.mint-dataframe__sort-icon--desc {
  opacity: 1;
  color: var(--color-primary);
}

/* Td */
.mint-dataframe__td {
  font-size: 0.8125rem !important;
  color: var(--text-primary) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  background: transparent !important;
  transition: background-color 0.15s ease;
}

.mint-dataframe__td--sm {
  padding: 0.375rem 0.5rem !important;
}

.mint-dataframe__td--md {
  padding: 0.5rem 0.75rem !important;
}

.mint-dataframe__td--lg {
  padding: 0.625rem 1rem !important;
}

.mint-dataframe__td--align-left {
  text-align: left;
}

.mint-dataframe__td--align-center {
  text-align: center;
}

.mint-dataframe__td--align-right {
  text-align: right;
}

/* Numeric columns: mono, tabular figures so decimals line up (2a). */
.mint-dataframe__td--number {
  font-family: var(--font-mono);
  font-size: 0.75rem !important;
  font-variant-numeric: tabular-nums;
}

.mint-dataframe__td--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

.mint-dataframe__td--checkbox {
  width: 2.5rem;
  padding: 0.5rem;
  text-align: center;
}

/* Row: hover = --bg-hover only; selected = primary 8% (2a). */
.mint-dataframe__row {
  transition: background-color 0.15s ease;
}

.mint-dataframe__row:hover {
  background-color: var(--bg-hover);
}

.mint-dataframe__row:hover > .mint-dataframe__td {
  background-color: var(--bg-hover) !important;
}

.mint-dataframe__row--clickable {
  cursor: pointer;
}

.mint-dataframe__row--clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.mint-dataframe__row--striped {
  background-color: color-mix(in srgb, var(--bg-primary) 62%, transparent);
}

.mint-dataframe__row--striped > .mint-dataframe__td {
  background-color: color-mix(in srgb, var(--bg-primary) 62%, transparent) !important;
}

.mint-dataframe__row--striped:hover {
  background-color: var(--bg-hover);
}

.mint-dataframe__row--striped:hover > .mint-dataframe__td {
  background-color: var(--bg-hover) !important;
}

.mint-dataframe__row--selected {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mint-dataframe__row--selected > .mint-dataframe__td {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

.mint-dataframe__row--selected:hover > .mint-dataframe__td {
  background-color: color-mix(in srgb, var(--color-primary) 11%, transparent) !important;
}

.mint-dataframe__row:last-child .mint-dataframe__td {
  border-bottom: none;
}

/* Empty / error placeholder host (content comes from EmptyState) */
.mint-dataframe__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  background-color: var(--bg-card);
}

/* Loading overlay */
.mint-dataframe__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--bg-primary) 74%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 3;
}

html.dark .mint-dataframe__loading {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Footer / Pagination */
.mint-dataframe__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border-light);
  background-color: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.mint-dataframe__page-info {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mint-dataframe__page-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-dataframe__page-number {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 3rem;
  text-align: center;
}

.mint-dataframe__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.mint-dataframe__page-btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.mint-dataframe__page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mint-dataframe__page-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-dataframe__page-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Resizable columns */
.mint-dataframe__th--resizable {
  position: relative;
}

.mint-dataframe__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 1;
}

.mint-dataframe__resize-handle::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 3px;
  width: 1px;
  height: 60%;
  background-color: var(--border-color);
  transition: background-color 0.15s ease;
}

.mint-dataframe__resize-handle:hover::after,
.mint-dataframe__resize-handle:focus-visible::after {
  width: 2px;
  background-color: var(--color-primary);
}

.mint-dataframe__resize-handle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Row delete action column */
.mint-dataframe__th--actions,
.mint-dataframe__td--actions {
  width: 2.75rem;
  text-align: center !important;
  white-space: nowrap;
}

.mint-dataframe__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.mint-dataframe__row:hover .mint-dataframe__delete-btn,
.mint-dataframe__delete-btn:focus-visible {
  opacity: 1;
}

.mint-dataframe__delete-btn:hover {
  background-color: color-mix(in srgb, var(--mint-error) 14%, transparent);
  color: var(--mint-error);
}

.mint-dataframe__delete-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-dataframe__delete-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* DataStateInternal — shared loading / error / empty presentation for data components */

.mint-data-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary);
}

.mint-data-state--loading {
  gap: 0.75rem;
  padding: 2.5rem 2rem;
  color: var(--text-muted);
}

.mint-data-state--loading.mint-data-state--sm {
  padding: 1.25rem 1rem;
}

.mint-data-state--loading.mint-data-state--lg {
  padding: 3.5rem 2rem;
}

.mint-data-state__loading-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 !important;
  padding: 0 !important;
}

/* WellEditPopup (SDK control refresh 3b).
 * Surface = .mint-popover; fields = FormField row + BaseInput / SegmentedControl /
 * NumberInput; buttons = BaseButton. This file owns placement and layout only. */

.mint-well-edit-popup__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.mint-well-edit-popup {
  position: fixed;
  z-index: 50;
  width: 300px;
  padding: 0;
  overflow: hidden;
  transition: opacity var(--mint-transition);
}

.mint-well-edit-popup--inline {
  position: static;
  width: auto;
  overflow: visible;
}

/* Inline, the host panel owns the padding and the surface. */
.mint-well-edit-popup--inline .mint-well-edit-popup__header {
  padding: 0 0 0 2px;
  border-bottom: 0;
}

/* 7a rail: round 18px swatch, group name at 12px. */
.mint-well-edit-popup--inline .mint-well-edit-popup__marker {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  font-weight: 700;
}

.mint-well-edit-popup--inline .mint-well-edit-popup__title {
  font-size: 0.75rem;
}

.mint-well-edit-popup--inline .mint-form-field__label {
  font-size: 0.75rem;
  font-weight: 400;
}

.mint-well-edit-popup--inline .mint-well-edit-popup__body {
  padding: 10px 0 12px;
}

.mint-well-edit-popup--inline .mint-well-edit-popup__footer {
  padding: 10px 0 0;
  background: transparent;
}

.mint-well-edit-popup:focus {
  outline: none;
}

.mint-well-edit-popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-bottom: 1px solid var(--border-light);
}

/* 3a marker: shape per type, group color. */
.mint-well-edit-popup__marker {
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
}

.mint-well-edit-popup__well-id {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mint-well-edit-popup__title {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.mint-well-edit-popup__close {
  margin-left: auto;
}

.mint-well-edit-popup__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* FormField row: a fixed label column, the control takes the rest. */
.mint-well-edit-popup .mint-form-field--row .mint-form-field__label-row {
  flex: 0 0 64px;
}

.mint-well-edit-popup .mint-form-field--row .mint-form-field__control {
  flex: 1 1 0;
}

/* The hint sits under the control, past the label column (FormField pins margin). */
.mint-well-edit-popup .mint-form-field--row .mint-form-field__hint {
  box-sizing: border-box;
  padding-left: calc(64px + 0.75rem);
  font-size: 0.75rem;
}

.mint-well-edit-popup__disclosure {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 2px 4px 2px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.mint-well-edit-popup__disclosure:hover {
  color: var(--text-primary);
}

.mint-well-edit-popup__disclosure:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-well-edit-popup__chevron {
  transition: transform var(--mint-transition);
}

.mint-well-edit-popup__disclosure[aria-expanded='true'] .mint-well-edit-popup__chevron {
  transform: rotate(90deg);
}

.mint-well-edit-popup__advanced {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mint-well-edit-popup__mono {
  font-family: var(--font-mono);
}

.mint-well-edit-popup__footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-primary);
}

@media (prefers-reduced-motion: reduce) {
  .mint-well-edit-popup,
  .mint-well-edit-popup__chevron {
    transition: none;
  }
}

/* LoadingSpinner Component Styles */

.mint-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mint-spinner__svg {
  animation: mint-spin 1s linear infinite;
}

/* Sizes */
.mint-spinner--xs .mint-spinner__svg {
  width: 16px;
  height: 16px;
}

.mint-spinner--sm .mint-spinner__svg {
  width: 20px;
  height: 20px;
}

.mint-spinner--md .mint-spinner__svg {
  width: 24px;
  height: 24px;
}

.mint-spinner--lg .mint-spinner__svg {
  width: 32px;
  height: 32px;
}

/* Variants */
.mint-spinner--primary {
  color: var(--color-primary);
}

.mint-spinner--cta {
  color: var(--color-cta);
}

.mint-spinner--muted {
  color: var(--text-muted);
}

/* Screen-reader only label */
.mint-spinner__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@keyframes mint-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Reduced motion: a slow opacity pulse instead of rotation (10c, same as 3e).
   !important outranks the global reduced-motion block, which caps every animation. */
@keyframes mint-spinner-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mint-spinner__svg {
    animation: mint-spinner-pulse 1.6s ease-in-out infinite !important;
  }
}

/* Divider Component Styles */

.mint-divider {
  display: flex;
  align-items: center;
  border: none;
}

/* Horizontal without label - single line */
.mint-divider:not(.mint-divider--vertical):not(.mint-divider--labeled) {
  border-top: 1px solid var(--border-color);
}

/* Line segments (for labeled variants) */
.mint-divider__line {
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}

/* ---------- Center-aligned label ---------- */
.mint-divider--center .mint-divider__label {
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------- Left-aligned label ---------- */
.mint-divider--left {
  gap: 0.75rem;
}

.mint-divider--left .mint-divider__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Vertical */
.mint-divider--vertical {
  display: inline-block;
  width: 1px;
  height: auto;
  align-self: stretch;
  background-color: var(--border-color);
  border: none;
}

/* Horizontal spacing */
.mint-divider--sm:not(.mint-divider--vertical) { margin: 0.5rem 0; }
.mint-divider--md:not(.mint-divider--vertical) { margin: 1rem 0; }
.mint-divider--lg:not(.mint-divider--vertical) { margin: 1.5rem 0; }

/* Vertical spacing */
.mint-divider--vertical.mint-divider--sm { margin: 0 0.5rem; }
.mint-divider--vertical.mint-divider--md { margin: 0 1rem; }
.mint-divider--vertical.mint-divider--lg { margin: 0 1.5rem; }
/* StatusIndicator Component Styles */

.mint-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

/* Status colors */
.mint-status__dot--success {
  background-color: var(--mint-success);
  color: var(--mint-success);
}

.mint-status__dot--warning {
  background-color: var(--mint-warning);
  color: var(--mint-warning);
}

.mint-status__dot--error {
  background-color: var(--mint-error);
  color: var(--mint-error);
}

.mint-status__dot--info {
  background-color: var(--mint-info);
  color: var(--mint-info);
}

.mint-status__dot--muted {
  background-color: var(--text-muted);
  color: var(--text-muted);
}

.mint-status__label {
  font-size: 0.8125rem;
  color: var(--text-primary);
}

/* Pulse — expanding ring via ::before pseudo, 1.8s loop */
.mint-status__dot--pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: currentColor;
  animation: mint-status-pulse 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes mint-status-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mint-status__dot--pulse::before { animation: none; opacity: 0; }
}

/* ProgressBar Component Styles */

.mint-progress {
  width: 100%;
}

.mint-progress__header {
  display: flex;
  justify-content: space-between;
  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(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */

.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%); }
}

@media (prefers-reduced-motion: reduce) {
  .mint-progress__bar--indeterminate { animation: none; }
}

/* 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.6875rem; }
.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); }
/* EmptyState Component Styles */

.mint-empty-state {
  padding: 2rem;
}

.mint-empty-state--illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mint-empty-state--inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  text-align: left;
}

/* Sizes (illustrated only — inline is single size) */
.mint-empty-state--sm { padding: 1rem; }
.mint-empty-state--md { padding: 2rem; }
.mint-empty-state--lg { padding: 3rem; }

/* Inline overrides size-based padding to keep it compact */
.mint-empty-state--inline.mint-empty-state--sm,
.mint-empty-state--inline.mint-empty-state--md,
.mint-empty-state--inline.mint-empty-state--lg {
  padding: 1rem 1.25rem;
}

/* Icon wrapper — illustrated: 40px neutral tile (2g). Semantic color survives
   only in the warning / error variants. */
.mint-empty-state--illustrated .mint-empty-state__icon-wrapper {
  width: 40px;
  height: 40px;
  margin-bottom: 0.625rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mint-empty-state__icon-wrapper--primary,
.mint-empty-state__icon-wrapper--cta,
.mint-empty-state__icon-wrapper--success,
.mint-empty-state__icon-wrapper--muted {
  background: var(--bg-tertiary);
}

.mint-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
.mint-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }

/* Inline: 44x44 icon box (left-aligned) */
.mint-empty-state--inline .mint-empty-state__icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon sizes */
.mint-empty-state__icon { width: 20px; height: 20px; stroke-width: 1.7; }

/* Icon colors */
.mint-empty-state__icon--primary,
.mint-empty-state__icon--cta,
.mint-empty-state__icon--success,
.mint-empty-state__icon--muted   { color: var(--text-secondary); }
.mint-empty-state__icon--warning { color: var(--mint-warning); }
.mint-empty-state__icon--error   { color: var(--mint-error); }

/* Body wrapper — in inline this is the flex-grow region */
.mint-empty-state--inline .mint-empty-state__body {
  flex: 1;
  min-width: 0;
}

/* Title */
.mint-empty-state__title {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 0.125rem !important;
  padding: 0 !important;
}

.mint-empty-state--sm .mint-empty-state__title { font-size: 0.8125rem; }
.mint-empty-state--md .mint-empty-state__title { font-size: 0.875rem; }
.mint-empty-state--lg .mint-empty-state__title { font-size: 1rem; }
.mint-empty-state--inline .mint-empty-state__title { font-size: 0.875rem; }

/* Description */
.mint-empty-state__description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 28rem;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 !important;
}

.mint-empty-state--inline .mint-empty-state__description {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Action — slotted content sits in a block so a child's own larger top margin collapses into this one. */
.mint-empty-state--illustrated .mint-empty-state__action,
.mint-empty-state--illustrated .mint-empty-state__content {
  margin-top: 0.625rem;
}

.mint-empty-state--inline .mint-empty-state__action {
  flex-shrink: 0;
}

/* Breadcrumb Component Styles */

/* One line, never wraps: long trails collapse their middle into "…" and the
   current segment ellipsizes (4e). */
.mint-breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
}

.mint-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-size: 0.8125rem;
}

.mint-breadcrumb__item:last-child {
  flex-shrink: 1;
  min-width: 0;
}

/* Ancestor link — text-secondary at rest, text-primary on --bg-hover when hovered */
.mint-breadcrumb__link {
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
  padding: 0.1875rem 0.375rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.8125rem;
}

.mint-breadcrumb__link:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mint-breadcrumb__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Current segment — text-primary + 500 weight */
.mint-breadcrumb__current {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
  padding: 0.1875rem 0.375rem;
}

/* ID segments (EXP-042) */
.mint-breadcrumb__segment--id {
  font-family: var(--font-mono);
}

/* Chevron separator — 12px, text-secondary */
.mint-breadcrumb__separator {
  color: var(--text-secondary);
  user-select: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mint-breadcrumb__chevron {
  width: 0.75rem;
  height: 0.75rem;
}

/* Tooltip — inverts with the theme (1g) */

.mint-tooltip {
  display: inline-flex;
}

.mint-tooltip__content {
  position: absolute;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--bg-card);
  background: var(--text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* Multi-line opt-in via maxWidth prop */
.mint-tooltip__content--multiline {
  white-space: normal;
  line-height: 1.4;
}

.mint-tooltip__body {
  display: inline;
}

/* Keyboard shortcut chip */
.mint-tooltip__shortcut {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.3125rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: color-mix(in srgb, var(--bg-card) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bg-card) 24%, transparent);
  border-radius: 3px;
  line-height: 1;
}

/* Arrow — same color as the tooltip bg */
.mint-tooltip__content::after {
  content: '';
  position: absolute;
  border-width: 4px;
  border-style: solid;
}

.mint-tooltip__content--top::after,
.mint-tooltip__content--top-start::after,
.mint-tooltip__content--top-end::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--text-primary) transparent transparent transparent;
}

.mint-tooltip__content--bottom::after,
.mint-tooltip__content--bottom-start::after,
.mint-tooltip__content--bottom-end::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--text-primary) transparent;
}

.mint-tooltip__content--left::after,
.mint-tooltip__content--left-start::after,
.mint-tooltip__content--left-end::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--text-primary);
}

.mint-tooltip__content--right::after,
.mint-tooltip__content--right-start::after,
.mint-tooltip__content--right-end::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--text-primary) transparent transparent;
}

/* ConfirmDialog — aligned with refresh design.
   - Title + optional subtitle live in BaseModal's header (top of modal)
   - Body is focused on the message (no forced icon/flex-row layout)
   - Variant intent is carried by the confirm button's color (see footer rules)
   - Optional `#icon` slot — if consumer passes one, it renders above the message
     in a variant-colored badge. */

.mint-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Opt-in icon — only rendered when the #icon slot is provided. */
.mint-confirm__icon {
  align-self: flex-start;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0.5rem;
}

.mint-confirm__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-confirm__icon--danger {
  background-color: var(--mint-error-bg);
  color: var(--mint-error);
}

.mint-confirm__icon--warning {
  background-color: var(--mint-warning-bg);
  color: var(--mint-warning);
}

.mint-confirm__icon--info {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.mint-confirm__message {
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}

/* ─── Footer buttons — refresh-design tactile system ─── */
.mint-confirm__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}
/* ChartContainer Component Styles */

.mint-chart {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Dark --border-light equals --bg-card; header hairline and Plotly grid need --border-color there. */
:where(html.dark) .mint-chart {
  --border-light: var(--border-color);
}

.mint-chart--frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg-card);
}

/* One header for both variants (9a): 13px 600 title + 12px description on one line,
   legend items, then tools. */
.mint-chart__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.mint-chart__header-text {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.mint-chart__title {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.mint-chart__description {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Header legend: each item toggles its series. */
.mint-chart__header-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.mint-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary-strong);
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.mint-chart__legend-item:hover {
  background-color: var(--bg-hover);
}

.mint-chart__legend-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-chart__legend-item--hidden {
  opacity: 0.45;
}

.mint-chart__legend-swatch {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 3px;
}

.mint-chart__toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Legend and tools stay right-aligned when a custom #header slot replaces the flex:1 title block. */
.mint-chart__header-legend,
.mint-chart__toolbar {
  margin-left: auto;
}

.mint-chart__header-legend + .mint-chart__toolbar {
  margin-left: 0;
}

/* Tools are 28px IconButtons (ghost). */
.mint-chart__toolbar .mint-icon-button {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.375rem;
}

.mint-chart__body {
  position: relative;
  min-height: 12rem;
}

.mint-chart--frame .mint-chart__body {
  flex: 1;
  min-height: 0;
}

.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-chart--frame .mint-chart__loading-overlay {
  z-index: 10;
  padding: 1.5rem;
}

.mint-chart--frame .mint-chart__body > .mint-empty-state {
  position: absolute;
  inset: 0;
  z-index: 10;
  max-width: none;
  padding: 1.5rem;
  background: var(--bg-card);
}

.mint-chart--frame .mint-empty-state__icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  background: transparent;
}

.mint-chart--frame .mint-empty-state__title {
  font-size: 0.8125rem;
}

.mint-chart__legend {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.mint-chart__footer {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.mint-chart--frame .mint-chart__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4375rem 0.875rem;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  flex-shrink: 0;
}

/* SettingsModal Component Styles
   Tab strip / rail / pane / footer chrome lives in BaseModal (modal.css);
   only pane content styles remain here. */

.mint-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Schema-driven content grid (used by both layouts)
 * Cols come from `--mint-settings-cols` set inline by the component;
 * keeps the data binding minimal and the styling in one place.
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__group-grid {
  display: grid;
  gap: 0 1.5rem;
  grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
}

/* ─────────────────────────────────────────────────────────────────────
 * Setting rows (5d): label + hint on the left, control on the right.
 * Numbers get a 120px right-aligned mono field, selects 220px; booleans
 * already render as row toggles; text-like fields stay full width.
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-light);
}

/* Dark --border-light equals the modal surface; the row hairline needs --border-color there. */
:where(html.dark) .mint-settings-modal__row {
  border-bottom-color: var(--border-color);
}

/* The field cell anchors the ↺ reset, which sits just left of the control (5d).
   --_settings-control-w is the control's width; stacked fields (text, custom slots)
   keep 0 and put the reset at the right end of their label line. */
.mint-settings-modal__row-field {
  --_settings-control-w: 0px;
  --_settings-reset-room: 1.875rem; /* 24px button + 6px gap */
  position: relative;
  min-width: 0;
}

.mint-settings-modal__row-field:has(> .mint-form-field > .mint-number-input) {
  --_settings-control-w: 7.5rem;
}

.mint-settings-modal__row-field:has(> .mint-form-field > .mint-select) {
  --_settings-control-w: 13.75rem;
}

.mint-settings-modal__row-field:has(.mint-toggle__track--md) {
  --_settings-control-w: 2rem;
}

/* Toggle rows: label + hint on the left, the switch centred on that block (as number / select rows). */
.mint-settings-modal__row-field:has(.mint-toggle--row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
}

.mint-settings-modal__row-field:has(.mint-toggle--row) > .mint-form-field,
.mint-settings-modal__row-field .mint-toggle--row {
  display: contents;
}

.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}

.mint-settings-modal__row-field .mint-toggle--row .mint-toggle__track {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mint-settings-modal__row-hint {
  grid-column: 1;
  grid-row: 2;
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Search results name their group above the label. */
.mint-settings-modal__row-group {
  position: relative;
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

/* Modified from default: 6px primary dot in the pane gutter, on the row's first text line. */
.mint-settings-modal__row--modified > .mint-settings-modal__row-group::before,
.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-form-field__label-row::before,
.mint-settings-modal__row--modified:not(:has(> .mint-settings-modal__row-group)) .mint-toggle__copy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.75rem;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.mint-settings-modal__row-field .mint-form-field__label-row {
  position: relative;
}

/* Keep label and hint clear of the reset. */
.mint-settings-modal__row--modified .mint-settings-modal__row-field:has(.mint-toggle--row),
.mint-settings-modal__row--modified .mint-form-field:has(> .mint-number-input, > .mint-select) {
  column-gap: calc(1rem + var(--_settings-reset-room));
}

.mint-settings-modal__row--modified .mint-form-field:not(:has(> .mint-number-input, > .mint-select)) > .mint-form-field__label-row {
  padding-right: var(--_settings-reset-room);
}

.mint-settings-modal__reset {
  position: absolute;
  top: 50%;
  right: calc(var(--_settings-control-w) + 0.375rem);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--mint-transition), color var(--mint-transition);
}

/* Stacked field: the reset ends the label line. */
.mint-settings-modal__row-field:not(:has(> .mint-form-field > .mint-number-input, > .mint-form-field > .mint-select, .mint-toggle--row)) > .mint-settings-modal__reset {
  top: -0.25rem;
  right: 0;
  transform: none;
}

.mint-settings-modal__reset:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-settings-modal__reset:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__reset svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-settings-modal__group-grid .mint-form-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mint-settings-modal__group-grid .mint-form-field__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.125rem;
  align-items: center;
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__label-row {
  grid-column: 1;
  grid-row: 1;
}

.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__hint,
.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select) > .mint-form-field__error {
  grid-column: 1;
  grid-row: 2;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input,
.mint-settings-modal__group-grid .mint-form-field > .mint-select {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input {
  width: 7.5rem;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-number-input .mint-number-input__input {
  text-align: right;
}

/* Settings rows show the plain 120px value field (no steppers, no range fill); arrow keys still step it. */
.mint-settings-modal__group-grid .mint-form-field > .mint-number-input :is(.mint-number-input__steppers, .mint-number-input__wash, .mint-number-input__rule) {
  display: none;
}

.mint-settings-modal__group-grid .mint-form-field > .mint-select {
  width: 13.75rem;
}

/* No hint or error: the label shares the control's centre line instead of sitting on top of an empty row. */
.mint-settings-modal__group-grid .mint-form-field:has(> .mint-number-input, > .mint-select):not(:has(> .mint-form-field__hint, > .mint-form-field__error)) > .mint-form-field__label-row {
  grid-row: 1 / span 2;
}

.mint-settings-modal__group-grid .mint-toggle__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* The pane header already shows the active group's description; the rail keeps icon + name (5d).
   BaseModal's Teleport root drops class fallthrough, so scope through :has(). */
.mint-modal__split:has(.mint-settings-modal) .mint-modal__rail-item-description {
  display: none;
}

/* Modified count in the rail: 5px primary dot + mono number (schema mode only). */
.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
}

.mint-modal__split:has(.mint-settings-modal--schema) .mint-modal__rail-item-meta::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Header: title + built-in search
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mint-settings-modal__search {
  position: relative;
  flex: 0 1 15rem;
  min-width: 0;
  margin-left: auto;
}

.mint-settings-modal__search-icon {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}

.mint-settings-modal__search .mint-input {
  box-sizing: border-box;
  width: 100%;
  padding-left: 2rem;
}

/* Native clear button drawn as the SDK's × in --text-secondary. */
.mint-settings-modal__search .mint-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────
 * Pane / group header: title + description, "Restore group defaults"
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.mint-settings-modal__head-text {
  flex: 1;
  min-width: 0;
}

.mint-settings-modal__head-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.mint-settings-modal__head-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.mint-settings-modal__head-description {
  margin: 0.125rem 0 0 !important;
  padding: 0 !important;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mint-settings-modal__restore-group {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-settings-modal__restore-group:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.mint-settings-modal__restore-group:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__restore-group:disabled {
  color: var(--text-muted);
  cursor: default;
}

.mint-settings-modal__restore-group svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* In the body (stacked / tab layouts) the header sits above its group's rows. */
.mint-settings-modal > .mint-settings-modal__head,
.mint-settings-modal__group > .mint-settings-modal__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

:where(html.dark) .mint-settings-modal > .mint-settings-modal__head,
:where(html.dark) .mint-settings-modal__group > .mint-settings-modal__head {
  border-bottom-color: var(--border-color);
}

.mint-settings-modal__empty {
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Appearance: theme preview cards, palette swatch strips, density preview
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__setting {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-light);
}

:where(html.dark) .mint-settings-modal__setting {
  border-bottom-color: var(--border-color);
}

.mint-settings-modal__setting:last-of-type {
  border-bottom: none;
}

/* Label left, control right, preview underneath. */
.mint-settings-modal__setting--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem 1rem;
  align-items: start;
}

.mint-settings-modal__setting-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mint-settings-modal__setting-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mint-settings-modal__setting-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-settings-modal__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.mint-settings-modal__theme {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* Fixed light / dark sample colours for the previews, built from the active
   theme's tokens: the opposite theme borrows the ink tokens, which are that
   theme's surfaces (dark ink #1E293B / light ink #F8FAFC). */
.mint-settings-modal__theme-preview {
  --_pv-light-bg: var(--bg-primary);
  --_pv-light-card: var(--bg-card);
  --_pv-light-line: var(--_control-border-strong);
  --_pv-light-border: var(--border-color);
  --_pv-dark-bg: var(--text-primary);
  --_pv-dark-card: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary-strong));
  --_pv-dark-line: var(--text-secondary-strong);
  --_pv-dark-border: var(--text-secondary-strong);

  display: flex;
  width: 8.25rem;
  height: 5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--border-color);
  transition: box-shadow var(--mint-transition);
}

:where(html.dark) .mint-settings-modal__theme-preview {
  --_pv-light-bg: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary-strong));
  --_pv-light-card: var(--text-primary);
  --_pv-light-line: var(--text-secondary-strong);
  --_pv-light-border: var(--text-secondary-strong);
  --_pv-dark-bg: var(--bg-primary);
  --_pv-dark-card: var(--bg-card);
  --_pv-dark-line: var(--_control-border-strong);
  --_pv-dark-border: var(--border-color);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-preview {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--color-primary);
}

.mint-settings-modal__theme:focus-visible {
  outline: none;
}

.mint-settings-modal__theme:focus-visible .mint-settings-modal__theme-preview {
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__theme-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.5rem;
}

.mint-settings-modal__theme-half + .mint-settings-modal__theme-half {
  padding-left: 0;
}

.mint-settings-modal__theme-half--light {
  --_pv-bg: var(--_pv-light-bg);
  --_pv-card: var(--_pv-light-card);
  --_pv-line: var(--_pv-light-line);
  --_pv-border: var(--_pv-light-border);
}

.mint-settings-modal__theme-half--dark {
  --_pv-bg: var(--_pv-dark-bg);
  --_pv-card: var(--_pv-dark-card);
  --_pv-line: var(--_pv-dark-line);
  --_pv-border: var(--_pv-dark-border);
}

.mint-settings-modal__theme-half {
  background-color: var(--_pv-bg);
}

.mint-settings-modal__theme-line {
  width: 60%;
  height: 6px;
  border-radius: 2px;
  background-color: var(--_pv-line);
}

.mint-settings-modal__theme-card {
  flex: 1;
  border: 1px solid var(--_pv-border);
  border-radius: var(--radius-sm);
  background-color: var(--_pv-card);
}

.mint-settings-modal__theme-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-label {
  font-weight: 600;
  color: var(--text-primary);
}

.mint-settings-modal__theme-radio {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
}

.mint-settings-modal__theme--active .mint-settings-modal__theme-radio {
  box-shadow: inset 0 0 0 4px var(--color-primary);
}

.mint-settings-modal__palettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mint-settings-modal__palette {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-color);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-settings-modal__palette:hover {
  background-color: var(--bg-hover);
}

.mint-settings-modal__palette:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-settings-modal__palette--active,
.mint-settings-modal__palette--active:hover {
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.mint-settings-modal__swatches {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
}

.mint-settings-modal__swatch {
  width: 0.75rem;
  height: 1.25rem;
  border-radius: 3px;
}

.mint-settings-modal__palette-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-settings-modal__palette--active .mint-settings-modal__palette-name {
  font-weight: 600;
}

.mint-settings-modal__palette-check {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-primary);
  visibility: hidden;
}

.mint-settings-modal__palette--active .mint-settings-modal__palette-check {
  visibility: visible;
}

.mint-settings-modal__density-preview {
  --_density-row: 2.125rem;

  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}

.mint-settings-modal__density-preview--compact {
  --_density-row: 1.75rem;
}

.mint-settings-modal__density-preview--comfortable {
  --_density-row: 2.625rem;
}

.mint-settings-modal__density-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 5rem;
  align-items: center;
  height: var(--_density-row);
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  transition: height 160ms ease;
}

.mint-settings-modal__density-row:last-child {
  border-bottom: none;
}

.mint-settings-modal__density-row > span + span {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mint-settings-modal__density-row--head {
  height: 1.875rem;
  background-color: var(--bg-primary);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * Footer: applied status + Done
 * ───────────────────────────────────────────────────────────────────── */

.mint-settings-modal__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-settings-modal__status-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--mint-success-hover);
}

@media (prefers-reduced-motion: reduce) {
  .mint-settings-modal__density-row,
  .mint-settings-modal__theme-preview {
    transition: none;
  }
}

/* ScientificNumber Component Styles */

.mint-sci-number {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.mint-sci-number__mantissa,
.mint-sci-number__plain {
  font-variant-numeric: tabular-nums;
}

.mint-sci-number__times {
  margin: 0 0.125rem;
  color: var(--text-secondary);
}

/* Board 4b: plain digits at 0.72em, raised without growing the line box. Generated
   content is never copied, so a selection yields "10^23" from __sr, not "1023". */
.mint-sci-number__exponent::after {
  content: attr(data-exponent);
  position: relative;
  top: -0.5em;
  font-size: 0.72em;
  line-height: 0;
}

.mint-sci-number__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.mint-sci-number__suffix {
  color: var(--text-secondary);
  font-weight: 500;
}

.mint-sci-number__unit {
  color: var(--text-secondary);
  margin-left: 0.25rem;
}

.mint-sci-number__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 24px;
  height: 24px;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.mint-sci-number__copy-btn svg {
  width: 12px;
  height: 12px;
}

/* Visible on hover, on keyboard focus (4b), while confirming, and always on touch screens. */
.mint-sci-number:hover .mint-sci-number__copy-btn,
.mint-sci-number__copy-btn:focus-visible,
.mint-sci-number__copy-btn--copied {
  opacity: 1;
}

@media (pointer: coarse) {
  .mint-sci-number__copy-btn {
    opacity: 1;
  }
}

.mint-sci-number__copy-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.mint-sci-number__copy-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sci-number__copy-btn--copied,
.mint-sci-number__copy-btn--copied:hover {
  color: var(--mint-success-hover);
}

.mint-sci-number__copied {
  align-self: center;
  margin-left: 0.25rem;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mint-sci-number__copy-btn {
    transition: none;
  }
}

/* ChemicalFormula Component Styles */

.mint-chem-formula {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  max-width: 100%;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  white-space: nowrap;
}

.mint-chem-formula--block {
  display: flex;
  font-size: 1.25em;
  padding: 0.25rem 0;
}

.mint-chem-formula--xs { font-size: 0.6875rem; line-height: 1rem; }
.mint-chem-formula--sm { font-size: 0.75rem; line-height: 1rem; }
.mint-chem-formula--primary { color: var(--text-primary); }
.mint-chem-formula--secondary { color: var(--text-secondary); }
.mint-chem-formula--muted,
.mint-chem-formula--empty { color: var(--text-muted); }

.mint-chem-formula--pill {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.mint-chem-formula--pill.mint-chem-formula--sm {
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.mint-chem-formula__formula {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-chem-formula__element {
  /* default styling inherited */
}

.mint-chem-formula__subscript {
  vertical-align: sub;
  font-size: 0.75em;
  line-height: 0;
}

.mint-chem-formula__superscript {
  vertical-align: super;
  font-size: 0.75em;
  line-height: 0;
}

.mint-chem-formula__paren {
  color: var(--text-secondary);
}

.mint-chem-formula__dot {
  margin: 0 0.125em;
  color: var(--text-muted);
}

.mint-chem-formula__charge {
  position: relative;
  top: -0.5em;
  font-size: 0.72em;
  line-height: 0;
  vertical-align: baseline;
  color: inherit;
}

/* FormulaInput Component Styles (4b)
 * One field row: raw text while focused, rendered formula while blurred (sub/sup
 * shift with relative offsets so the line height never changes), then a fixed
 * "MW · value · g/mol" segment in the BaseInput #suffix look. Field states per 1e. */

.mint-formula-input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mint-formula-input__field {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-formula-input__field--sm { min-height: var(--form-height-sm); }
.mint-formula-input__field--md { min-height: var(--form-height-md); }
.mint-formula-input__field--lg { min-height: var(--form-height-lg); }

.mint-formula-input:not(.mint-formula-input--error):not(.mint-formula-input--disabled) .mint-formula-input__field:hover:not(:focus-within) {
  border-color: var(--_field-border-hover);
}

.mint-formula-input__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-formula-input--error .mint-formula-input__field {
  border-color: var(--mint-error);
}

.mint-formula-input--error .mint-formula-input__field:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

/* Disabled per 1e: tinted field + muted text, no opacity. */
.mint-formula-input--disabled .mint-formula-input__field {
  background-color: var(--bg-tertiary);
}

.mint-formula-input__entry {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.mint-formula-input__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  background: transparent;
  color: var(--text-primary);
  border: none;
  outline: none;
  font-family: var(--font-mono);
}

.mint-formula-input__input::placeholder {
  color: var(--text-muted);
}

.mint-formula-input__input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* The rendered formula sits over the input; the raw text stays for the caret and selection. */
.mint-formula-input__input--masked {
  color: transparent;
  caret-color: var(--text-primary);
}

.mint-formula-input__rendered {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.mint-formula-input--disabled .mint-formula-input__rendered {
  color: var(--text-muted);
}

.mint-formula-input__field--sm .mint-formula-input__input,
.mint-formula-input__field--sm .mint-formula-input__rendered {
  padding: 0 0.625rem;
  font-size: 0.8125rem;
}

.mint-formula-input__field--md .mint-formula-input__input,
.mint-formula-input__field--md .mint-formula-input__rendered {
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

.mint-formula-input__field--lg .mint-formula-input__input,
.mint-formula-input__field--lg .mint-formula-input__rendered {
  padding: 0 1rem;
  font-size: 1rem;
}

.mint-formula-input__sub,
.mint-formula-input__sup {
  position: relative;
  font-size: 0.72em;
  line-height: 0;
}

.mint-formula-input__sub {
  top: 0.3em;
}

.mint-formula-input__sup {
  top: -0.5em;
}

.mint-formula-input__dot {
  margin: 0 0.125em;
}

/* MW segment: fixed width so typing never shifts the field. */
.mint-formula-input__mw {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0 0.625rem;
  border-left: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.mint-formula-input__mw-label {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.mint-formula-input__mw-value {
  min-width: 52px;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mint-formula-input__mw-unit {
  color: var(--text-secondary);
}

.mint-formula-input__error-text {
  padding-left: 0.125rem;
  color: var(--_ink-error);
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-formula-input__field {
    transition: none;
  }
}

/* SequenceInput Component Styles */

.mint-sequence-input {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-sequence-input {
  --border-light: var(--border-color);
}

/* Field rules (1a / 1e). */
.mint-sequence-input:hover:not(:focus-within):not(.mint-sequence-input--error):not(.mint-sequence-input--disabled) {
  border-color: var(--_field-border-hover);
}

.mint-sequence-input:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-sequence-input--error {
  border-color: var(--mint-error);
}

.mint-sequence-input--error:focus-within {
  border-color: var(--mint-error);
  box-shadow: var(--focus-ring-soft-error);
}

.mint-sequence-input--disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Toolbar */
.mint-sequence-input__toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.375rem 0.25rem 0.625rem;
  border-bottom: 1px solid var(--border-light);
}

/* Small ghost buttons. */
.mint-sequence-input__tool-btn {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary-strong);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mint-sequence-input__tool-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-sequence-input__tool-btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-sequence-input__tool-btn:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-sequence-input__tool-sep {
  width: 1px;
  height: 0.875rem;
  background-color: var(--border-color);
  margin: 0 0.375rem;
}

/* Sequence type as plain mono text, not a badge. */
.mint-sequence-input__type-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary-strong);
}

/* Editor area */
.mint-sequence-input__editor {
  position: relative;
}

.mint-sequence-input__textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: none;
  outline: none;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: transparent;
}

.mint-sequence-input__textarea::placeholder {
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.mint-sequence-input__textarea:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
}

/* Viewer (readonly mode) */
.mint-sequence-input__viewer {
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-x: auto;
}

.mint-sequence-input__viewer-line {
  display: flex;
  padding: 0 0.75rem;
}

.mint-sequence-input__viewer-line:hover {
  background-color: var(--bg-hover);
}

.mint-sequence-input__line-number {
  width: 3rem;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-muted);
  font-size: 0.6875rem;
  padding-right: 0.75rem;
  user-select: none;
}

.mint-sequence-input__line-content {
  white-space: pre;
  word-break: break-all;
}

/* Base coloring */
.mint-sequence-input__base--a {
  color: var(--mint-success);
}

.mint-sequence-input__base--t,
.mint-sequence-input__base--u {
  color: var(--mint-error);
}

.mint-sequence-input__base--g {
  color: var(--mint-warning);
}

.mint-sequence-input__base--c {
  color: var(--mint-info);
}

.mint-sequence-input__base--n {
  color: var(--text-muted);
}

/* Stats bar */
.mint-sequence-input__stats {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.375rem 0.625rem;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary-strong);
}

.mint-sequence-input__stat-label {
  color: var(--text-secondary);
}

.mint-sequence-input__stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary-strong);
  margin-left: 0.25rem;
}

/* Problems (9c): icon shape + text; the count stays mono, the prose is sans. */
.mint-sequence-input__problem {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
}

.mint-sequence-input__problem--error {
  color: var(--_ink-error);
}

.mint-sequence-input__problem-icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.mint-sequence-input__problem--warning .mint-sequence-input__problem-shape { fill: var(--mint-warning); }
.mint-sequence-input__problem--error .mint-sequence-input__problem-shape { fill: var(--mint-error); }

.mint-sequence-input__problem-mark {
  stroke: white;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* UnitInput Component Styles */

.mint-unit-input {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ---------- Controls row (value input + unit chip) ---------- */

.mint-unit-input__controls {
  display: flex;
  align-items: stretch;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.mint-unit-input__controls--sm { min-height: var(--form-height-sm); }
.mint-unit-input__controls--md { min-height: var(--form-height-md); }
.mint-unit-input__controls--lg { min-height: var(--form-height-lg); }

.mint-unit-input__controls:hover:not(:focus-within):not(:has(:disabled)) {
  border-color: var(--_field-border-hover);
}

.mint-unit-input__controls:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-unit-input--error .mint-unit-input__controls,
.mint-unit-input--error .mint-unit-input__controls:hover {
  border-color: var(--mint-error);
}

.mint-unit-input--error .mint-unit-input__controls:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

/* Disabled per 1e: tinted field + muted text, no opacity. */
.mint-unit-input--disabled .mint-unit-input__controls {
  background-color: var(--bg-tertiary);
}

.mint-unit-input--disabled .mint-unit-input__value {
  color: var(--text-muted);
}

/* ---------- Value input — Fira Code, left-aligned ---------- */

.mint-unit-input__value {
  flex: 1;
  min-width: 0;
  text-align: left;
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.mint-unit-input__value::-webkit-outer-spin-button,
.mint-unit-input__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mint-unit-input__value:disabled { cursor: not-allowed; }

/* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
   12px label indent aligns with the value text across all input types. */
.mint-unit-input__value--sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
.mint-unit-input__value--md { padding: 0.5rem 0.75rem;    font-size: 0.875rem; }
.mint-unit-input__value--lg { padding: 0.75rem 1rem;      font-size: 1rem; }

/* ---------- Unit segment = BaseInput #suffix look (1e / 4b) ---------- */

.mint-unit-input__unit {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 64px; /* fixed: switching µL / mL / nL never changes the field width */
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.5rem 0 0.625rem;
  border: 0;
  border-left: 1px solid var(--border-light);
  border-radius: 0;
  background-color: var(--bg-primary);
  color: var(--text-secondary-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

button.mint-unit-input__unit {
  cursor: pointer;
}

/* Keyboard focus: the whole field carries the focus ring (:focus-within); the segment tints. */
button.mint-unit-input__unit:hover:not(:disabled),
button.mint-unit-input__unit:focus-visible,
.mint-unit-input__unit--open {
  background-color: var(--bg-hover);
}

button.mint-unit-input__unit:focus-visible {
  outline: none;
}

.mint-unit-input__unit:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.mint-unit-input__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

.mint-unit-input__unit--open .mint-unit-input__chevron {
  transform: rotate(180deg);
}

/* ---------- Unit menu (.mint-popover + .mint-menu-item) ---------- */

.mint-unit-input__menu {
  position: fixed;
  z-index: 1000;
  width: 148px;
}

.mint-unit-input__menu .mint-menu-item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.mint-unit-input__menu-group {
  padding: 4px 8px 2px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* ---------- Conversion hint: the number users check, so readable ---------- */

.mint-unit-input__hint {
  padding-left: 0.125rem;
  color: var(--text-secondary-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .mint-unit-input__controls,
  .mint-unit-input__unit,
  .mint-unit-input__chevron {
    transition: none;
  }
}

.mint-wizard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  outline: none;
  flex: 1;
  min-height: 0;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-wizard {
  --border-light: var(--border-color);
}

/* Progress indicator — one hue (2c): done = primary fill + check,
   current = primary ring + number, upcoming = strong control border. */
.mint-wizard__progress {
  flex-shrink: 0;
}

.mint-wizard__steps-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-wizard__step-connector {
  flex: 1;
  min-width: 0.75rem;
  height: 1px;
  background-color: var(--border-color);
  transition: background-color 150ms ease;
}

.mint-wizard__step-connector--completed {
  background-color: var(--color-primary);
}

.mint-wizard__step-indicator {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.mint-wizard__step-indicator--disabled {
  cursor: not-allowed;
  opacity: var(--mint-disabled-opacity);
}

.mint-wizard__step-dot {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: var(--bg-card);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.mint-wizard__step-dot svg {
  width: 0.6875rem;
  height: 0.6875rem;
}

/* Size variants for dot */
.mint-wizard--sm .mint-wizard__step-dot {
  width: 1.125rem;
  height: 1.125rem;
}

.mint-wizard--lg .mint-wizard__step-dot {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

.mint-wizard__step-indicator--active .mint-wizard__step-dot {
  color: var(--_ink-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.mint-wizard__step-indicator--completed .mint-wizard__step-dot {
  background-color: var(--color-primary);
  color: white;
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.mint-wizard__step-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mint-wizard__step-indicator--active .mint-wizard__step-label {
  color: var(--text-primary);
  font-weight: 600;
}

.mint-wizard__step-indicator--completed .mint-wizard__step-label {
  color: var(--text-secondary-strong);
}

/* Narrow widths keep only the current step's label. */
@media (max-width: 640px) {
  .mint-wizard__step-indicator:not(.mint-wizard__step-indicator--active) .mint-wizard__step-label {
    display: none;
  }
}

/* Body */
.mint-wizard__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Navigation */
.mint-wizard__navigation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.mint-wizard__counter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mint-wizard__cancel {
  margin-left: auto;
}

.mint-wizard--sm .mint-wizard__step-label {
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-wizard__step-connector,
  .mint-wizard__step-dot {
    transition: none;
  }
}

/* AuditTrail Component Styles */

.mint-audit-trail {
  position: relative;
}

.mint-audit-trail__filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mint-audit-trail__filter-select {
  width: auto;
}

/* 1px rail; dots ringed in the card color so they sit cleanly on --bg-card (4d). */
.mint-audit-trail__list {
  position: relative;
  padding-left: 1.375rem;
}

.mint-audit-trail__line {
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--border-color);
}

.mint-audit-trail__entry {
  position: relative;
  padding-bottom: 1.125rem;
  cursor: pointer;
}

.mint-audit-trail__entry:last-child {
  padding-bottom: 0;
}

.mint-audit-trail__dot {
  position: absolute;
  left: -1.375rem;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  box-shadow: 0 0 0 3px var(--bg-card);
  z-index: 1;
}

/* Dot colors by type */
.mint-audit-trail__entry--create .mint-audit-trail__dot { background-color: var(--mint-success); }
.mint-audit-trail__entry--update .mint-audit-trail__dot { background-color: var(--color-primary); }
.mint-audit-trail__entry--delete .mint-audit-trail__dot { background-color: var(--mint-error); }
.mint-audit-trail__entry--system .mint-audit-trail__dot { background-color: var(--text-muted); }

.mint-audit-trail__content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mint-audit-trail__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-audit-trail__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mint-audit-trail__sentence {
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.mint-audit-trail__user {
  font-weight: 600;
}

/* With a user, the action is the verb of the sentence. */
.mint-audit-trail__user + .mint-audit-trail__action {
  color: var(--text-secondary);
}

.mint-audit-trail__timestamp {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Detail renders as-is, aligned with the sentence text. */
.mint-audit-trail__detail {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-secondary-strong);
}

.mint-audit-trail__content:has(.mint-audit-trail__avatar) > .mint-audit-trail__detail,
.mint-audit-trail__content:has(.mint-audit-trail__avatar) > .mint-audit-trail__metadata {
  padding-left: 1.75rem;
}

.mint-audit-trail__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.6875rem;
}

.mint-audit-trail__metadata-item {
  color: var(--text-secondary);
}

.mint-audit-trail__metadata-key {
  color: var(--text-secondary);
  margin-right: 0.125rem;
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-audit-trail__state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size variants */
.mint-audit-trail--sm .mint-audit-trail__sentence { font-size: 0.75rem; }
.mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.75rem; }
.mint-audit-trail--sm .mint-audit-trail__entry { padding-bottom: 0.75rem; }

.mint-audit-trail--lg .mint-audit-trail__sentence { font-size: 0.9375rem; }
.mint-audit-trail--lg .mint-audit-trail__detail { font-size: 0.8125rem; }
.mint-audit-trail--lg .mint-audit-trail__entry { padding-bottom: 1.5rem; }
/* BatchProgressList Component Styles (6b)
   Rows + hairlines, status by shape, counts in mono. Progress fill is
   --color-primary; --mint-info appears only on the "processing" dot. */

.mint-batch-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-batch-progress {
  --border-light: var(--border-color);
}

.mint-batch-progress__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mint-batch-progress__title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mint-batch-progress__count,
.mint-batch-progress__percent {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.mint-batch-progress__count {
  color: var(--text-primary);
}

.mint-batch-progress__percent {
  margin-left: auto;
  color: var(--text-secondary);
}

.mint-batch-progress__overall {
  width: 100%;
  height: 4px;
  background-color: var(--bg-tertiary);
  border-radius: 9999px;
  overflow: hidden;
}

.mint-batch-progress__overall-bar {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.18s ease;
}

/* One line of shape + mono count + word. */
.mint-batch-progress__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
}

.mint-batch-progress__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.mint-batch-progress__summary-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mint-batch-progress__summary .mint-batch-progress__shape {
  width: 0.75rem;
  height: 0.75rem;
}

/* ---------- Shapes ---------- */

.mint-batch-progress__shape {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}

.mint-batch-progress__check {
  stroke: var(--mint-success-hover);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mint-batch-progress__error-disc { fill: var(--mint-error); }

.mint-batch-progress__error-mark {
  stroke: white;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.mint-batch-progress__arc-track {
  stroke: var(--bg-tertiary);
  stroke-width: 2;
}

.mint-batch-progress__arc {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.mint-batch-progress__dash {
  stroke: var(--text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
}

.mint-batch-progress__running-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--mint-info);
}

.mint-batch-progress__pending-ring {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
}

/* ---------- Rows ---------- */

.mint-batch-progress__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}

.mint-batch-progress__item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-light);
}

.mint-batch-progress__item-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0.5rem 0;
}

.mint-batch-progress__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-batch-progress__item-icon--processing .mint-batch-progress__shape {
  animation: mint-batch-spin 1s linear infinite;
}

@keyframes mint-batch-spin {
  to { transform: rotate(360deg); }
}

.mint-batch-progress__item-label {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-batch-progress__item--processing .mint-batch-progress__item-label,
.mint-batch-progress__item--error .mint-batch-progress__item-label {
  font-weight: 600;
}

.mint-batch-progress__item-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.mint-batch-progress__item-progress {
  width: 4.5rem;
  height: 2px;
  background-color: var(--bg-tertiary);
  border-radius: 9999px;
  overflow: hidden;
}

.mint-batch-progress__item-progress-bar {
  display: block;
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.18s ease;
}

/* Failed rows show the error in place. */
.mint-batch-progress__item-message {
  margin: 0 0 0.625rem 1.625rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  background: var(--mint-error-bg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--text-secondary-strong);
}

/* ---------- Text actions ---------- */

.mint-batch-progress__retry-btn,
.mint-batch-progress__cancel-btn,
.mint-batch-progress__completed-toggle {
  padding: 0.125rem 0.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mint-batch-progress__retry-btn,
.mint-batch-progress__completed-toggle {
  color: var(--_ink-primary);
}

.mint-batch-progress__cancel-btn {
  color: var(--text-secondary-strong);
}

.mint-batch-progress__retry-btn:hover,
.mint-batch-progress__cancel-btn:hover,
.mint-batch-progress__completed-toggle:hover {
  background-color: var(--bg-hover);
}

.mint-batch-progress__retry-btn:focus-visible,
.mint-batch-progress__cancel-btn:focus-visible,
.mint-batch-progress__completed-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-batch-progress__completed-toggle {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.375rem 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-batch-progress__item-icon--processing .mint-batch-progress__shape {
    animation: none;
  }

  .mint-batch-progress__overall-bar,
  .mint-batch-progress__item-progress-bar {
    transition: none;
  }
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-batch-progress__state {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* TimePicker Component Styles
   Dropdown = .mint-popover, slots = .mint-menu-item (2d, 8c); the __dropdown
   and __slot classes stay as aliases and own placement / slot specifics. */

.mint-time-picker {
  position: relative;
}

/* Input wrapper */
.mint-time-picker__input-wrapper {
  position: relative;
}

/* Trigger follows the field rules (1e) + clock icon; value in mono tabular. */
.mint-time-picker__input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  padding-right: 2.5rem;
  box-sizing: border-box;
}

.mint-time-picker__input::placeholder {
  font-family: var(--font-sans);
}

.mint-time-picker__input:hover:not(:disabled) {
  border-color: var(--_field-border-hover);
}

.mint-time-picker__input:focus-visible,
.mint-time-picker__input[aria-expanded='true'] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-time-picker__input--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

.mint-time-picker__input--md {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.mint-time-picker__input--lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.mint-time-picker__input--error,
.mint-time-picker__input--error:hover:not(:disabled) {
  border-color: var(--mint-error);
}

.mint-time-picker__input--error:focus-visible,
.mint-time-picker__input--error[aria-expanded='true'] {
  border-color: var(--mint-error);
  box-shadow: var(--focus-ring-soft-error);
}

.mint-time-picker__input--disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Clock icon */
.mint-time-picker__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  pointer-events: none;
}

.mint-time-picker__icon svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

/* Clear button */
.mint-time-picker__clear-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 150ms ease;
}

.mint-time-picker__clear-btn:hover {
  color: var(--text-primary);
}

.mint-time-picker__clear-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Dropdown — placement only; the look is .mint-popover. */
.mint-time-picker__dropdown {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  width: 100%;
  min-width: 10rem;
  overflow: hidden;
}

/* Slot list */
.mint-time-picker__list {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Slot = menu item; the time is mono tabular. Selected = trailing check + primary text. */
.mint-time-picker__slot {
  white-space: nowrap;
}

.mint-time-picker__slot-time {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mint-time-picker__slot--active .mint-time-picker__slot-time {
  font-weight: 600;
}

.mint-time-picker__slot .mint-menu-item__check {
  margin-left: auto;
}

/* Unavailable slots stay readable (no opacity). */
.mint-time-picker__slot[aria-disabled='true'] {
  color: var(--text-secondary);
}

/* The reason sits inline between the time and the check column (8c). */
.mint-time-picker__slot-reason {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

/* Transition classes */
.mint-time-picker__dropdown-enter-active {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.mint-time-picker__dropdown-leave-active {
  transition: opacity 0.075s ease-in, transform 0.075s ease-in;
}

.mint-time-picker__dropdown-enter-from,
.mint-time-picker__dropdown-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.mint-time-picker__dropdown-enter-to,
.mint-time-picker__dropdown-leave-from {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mint-time-picker__input,
  .mint-time-picker__clear-btn,
  .mint-time-picker__dropdown-enter-active,
  .mint-time-picker__dropdown-leave-active {
    transition: none;
  }
}

/* DateTimePicker Component Styles
   Calendar grid comes from date-picker.css (shared CalendarGridPanelInternal);
   dropdown surface = .mint-popover (2d). */

.mint-datetime-picker {
  position: relative;
}

.mint-datetime-picker__input-wrapper {
  position: relative;
}

/* Trigger follows the field rules (1e). */
.mint-datetime-picker__input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  box-sizing: border-box;
  font-family: inherit;
}

.mint-datetime-picker__input:hover:not(:disabled) {
  border-color: var(--_field-border-hover);
}

.mint-datetime-picker__input:focus-visible,
.mint-datetime-picker__input[aria-expanded='true'] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-datetime-picker__input--sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.8125rem;
}

.mint-datetime-picker__input--md {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
}

.mint-datetime-picker__input--lg {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
}

.mint-datetime-picker__input--error,
.mint-datetime-picker__input--error:hover:not(:disabled) {
  border-color: var(--mint-error);
}

.mint-datetime-picker__input--error:focus-visible,
.mint-datetime-picker__input--error[aria-expanded='true'] {
  border-color: var(--mint-error);
  box-shadow: var(--focus-ring-soft-error);
}

.mint-datetime-picker__input--disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.mint-datetime-picker__icon-calendar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  pointer-events: none;
}

.mint-datetime-picker__icon-calendar svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

.mint-datetime-picker__icon-clock {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  pointer-events: none;
}

.mint-datetime-picker__icon-clock svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

/* Dropdown — placement only; the look is .mint-popover. */
.mint-datetime-picker__dropdown {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  width: 18rem;
  padding: 0.625rem;
}

/* Calendar section */
.mint-datetime-picker__calendar-section {
  margin-bottom: 0;
}

/* Divider */
.mint-datetime-picker__divider {
  height: 1px;
  background-color: var(--border-light);
  margin: 0.5rem 0;
}

/* Time section */
.mint-datetime-picker__time-section {
  padding: 0;
}

.mint-datetime-picker__time-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.mint-datetime-picker__time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  max-height: 10rem;
  overflow-y: auto;
}

/* Time chips share the day cell language: mono tabular, --radius, filled when selected. */
.mint-datetime-picker__time-chip {
  height: 1.75rem;
  padding: 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius);
  border: none;
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.mint-datetime-picker__time-chip:hover:not(:disabled, :focus-visible, .mint-datetime-picker__time-chip--active) {
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.mint-datetime-picker__time-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-datetime-picker__time-chip--active {
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
}

.mint-datetime-picker__time-chip--active:hover {
  background-color: var(--color-primary-hover);
}

.mint-datetime-picker__time-chip--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Footer */
.mint-datetime-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

.mint-datetime-picker__footer-btn {
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 150ms ease;
  color: var(--color-primary);
}

.mint-datetime-picker__footer-btn:hover {
  color: var(--_ink-primary);
}

.mint-datetime-picker__footer-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-datetime-picker__footer-btn + .mint-datetime-picker__footer-btn {
  margin-left: 0.75rem;
}

.mint-datetime-picker__footer-btn--muted {
  color: var(--text-secondary);
  font-weight: 400;
}

.mint-datetime-picker__footer-btn--muted:hover {
  color: var(--text-primary);
}

/* Transition classes */
.mint-datetime-picker__dropdown-enter-active {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.mint-datetime-picker__dropdown-leave-active {
  transition: opacity 0.075s ease-in, transform 0.075s ease-in;
}

.mint-datetime-picker__dropdown-enter-from,
.mint-datetime-picker__dropdown-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.mint-datetime-picker__dropdown-enter-to,
.mint-datetime-picker__dropdown-leave-from {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mint-datetime-picker__input,
  .mint-datetime-picker__time-chip,
  .mint-datetime-picker__footer-btn,
  .mint-datetime-picker__dropdown-enter-active,
  .mint-datetime-picker__dropdown-leave-active {
    transition: none;
  }
}

/* TimeRangeInput Component Styles — start – end, then the mono duration (8c). */

.mint-time-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mint-time-range__start,
.mint-time-range__end {
  flex: 1;
  min-width: 0;
}

.mint-time-range__separator {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.mint-time-range__duration {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary-strong);
  white-space: nowrap;
}

.mint-time-range__duration--error {
  color: var(--_ink-error);
}

/* end ≤ start: message on its own line under the fields. */
.mint-time-range__error {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.75rem;
  color: var(--_ink-error);
}
/* ScheduleCalendar Component Styles */

.mint-schedule {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  overflow: hidden;
}

/* Header */
.mint-schedule__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.mint-schedule__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mint-schedule__nav-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-schedule__nav-btn:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.mint-schedule__nav-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-schedule__today-btn {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border-color);
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin-left: 0.5rem;
}

.mint-schedule__today-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--color-primary);
}

.mint-schedule__title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mint-schedule__view-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.mint-schedule__view-btn {
  padding: 0.25rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mint-schedule__view-btn:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.mint-schedule__view-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-schedule__view-btn--active {
  background-color: var(--color-primary);
  color: white;
}

.mint-schedule__view-btn--active:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Body (week/day view) */
.mint-schedule__body {
  display: flex;
  overflow: auto;
  max-height: 600px;
}

.mint-schedule__time-gutter {
  width: 3.5rem;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
}

.mint-schedule__time-label {
  height: var(--slot-height, 2.5rem);
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: right;
  padding-right: 0.5rem;
  position: relative;
  top: -0.5em;
  line-height: 1;
}

.mint-schedule__day-columns {
  display: flex;
  flex: 1;
  min-width: 0;
}

.mint-schedule__day-column {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border-color);
  position: relative;
}

.mint-schedule__day-column:first-child {
  border-left: none;
}

.mint-schedule__day-column--today {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Day headers */
.mint-schedule__day-headers {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.mint-schedule__day-header-gutter {
  width: 3.5rem;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
}

.mint-schedule__day-header {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-left: 1px solid var(--border-color);
}

.mint-schedule__day-header:first-child {
  border-left: none;
}

.mint-schedule__day-header--today {
  color: var(--color-primary);
}

.mint-schedule__day-header-name {
  display: block;
  font-size: 0.6875rem;
}

.mint-schedule__day-header-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.125rem;
}

.mint-schedule__day-header--today .mint-schedule__day-header-number {
  background-color: var(--color-primary);
  color: white;
}

.mint-schedule__slot {
  height: var(--slot-height, 2.5rem);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.mint-schedule__slot--interactive {
  cursor: pointer;
}

.mint-schedule__slot--interactive:hover {
  background-color: var(--bg-hover);
}

/* Events (3c): status tint over the card, text stays --text-primary in both
   themes; status is also written out in the time line. */
.mint-schedule__event {
  position: absolute;
  left: 2px;
  right: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--event-color) 16%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--event-color) 35%, transparent);
  transition: box-shadow 0.15s ease;
}

.mint-schedule__event:hover {
  box-shadow: var(--shadow-sm);
}

.mint-schedule__event--confirmed {
  --event-color: var(--mint-success);
}

.mint-schedule__event--pending {
  --event-color: var(--mint-warning);
}

.mint-schedule__event--in-progress {
  --event-color: var(--mint-info);
}

/* Cancelled: dashed hollow + strike, no status tint. */
.mint-schedule__event--cancelled {
  color: var(--text-secondary);
  background-color: var(--bg-card);
  border: 1px dashed var(--border-color);
}

.mint-schedule__event--cancelled .mint-schedule__event-title {
  font-weight: 400;
  text-decoration: line-through;
}

.mint-schedule__event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.mint-schedule__event-time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-secondary-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-schedule__event--cancelled .mint-schedule__event-time {
  color: var(--text-secondary);
}

/* Resize handles */
.mint-schedule__event-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 2;
}

.mint-schedule__event-resize-handle--top {
  top: 0;
}

.mint-schedule__event-resize-handle--bottom {
  bottom: 0;
}

/* Blocked slots */
.mint-schedule__blocked {
  position: absolute;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    var(--border-light) 4px,
    var(--border-light) 5px
  );
  z-index: 0;
  pointer-events: none;
}

.mint-schedule__blocked-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Now indicator */
.mint-schedule__now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--mint-error);
  z-index: 3;
  pointer-events: none;
}

.mint-schedule__now-dot {
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--mint-error);
}

/* Ghost (drag preview) */
.mint-schedule__ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 2px dashed var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  z-index: 4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mint-schedule__ghost {
    transition: none;
  }
}

/* Month view */
.mint-schedule__month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mint-schedule__month-weekday {
  text-align: center;
  padding: 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.mint-schedule__month-cell {
  min-height: 5rem;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mint-schedule__month-cell:nth-child(7n) {
  border-right: none;
}

.mint-schedule__month-cell:hover {
  background-color: var(--bg-hover);
}

.mint-schedule__month-cell--today {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.mint-schedule__month-cell--outside {
  opacity: 0.4;
}

.mint-schedule__month-date {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  padding: 0.125rem 0.25rem;
}

.mint-schedule__month-cell--today .mint-schedule__month-date {
  color: var(--color-primary);
  font-weight: 600;
}

.mint-schedule__month-event {
  box-sizing: border-box;
  height: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0 0.375rem;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--event-color) 16%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--event-color) 35%, transparent);
  line-height: calc(1.25rem - 2px);
}

.mint-schedule__month-event--confirmed {
  --event-color: var(--mint-success);
}

.mint-schedule__month-event--pending {
  --event-color: var(--mint-warning);
}

.mint-schedule__month-event--in-progress {
  --event-color: var(--mint-info);
}

.mint-schedule__month-event--cancelled {
  color: var(--text-secondary);
  background-color: var(--bg-card);
  border: 1px dashed var(--border-color);
  text-decoration: line-through;
}

.mint-schedule__month-more {
  font-size: 0.6875rem;
  color: var(--color-primary);
  padding: 0 0.375rem;
  cursor: pointer;
  font-weight: 500;
}

.mint-schedule__month-more:hover {
  text-decoration: underline;
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-schedule__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
/* ResourceCard Component Styles */

.mint-resource-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

/* Hover darkens the border only; the shadow stays --shadow-sm (10a). */
.mint-resource-card:hover {
  border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-color));
}

/* Compact mode */
.mint-resource-card--compact {
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  min-height: 40px;
}

.mint-resource-card--compact:hover {
  box-shadow: none;
  border-color: var(--border-color);
  background-color: var(--bg-hover);
}

/* Card layout (non-compact) */
.mint-resource-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  padding-bottom: 0;
}

/* Size variants for header padding */
.mint-resource-card--sm .mint-resource-card__header {
  padding: 0.75rem;
  padding-bottom: 0;
  gap: 0.625rem;
}

.mint-resource-card--lg .mint-resource-card__header {
  padding: 1.25rem;
  padding-bottom: 0;
  gap: 1rem;
}

/* Image / fallback icon */
.mint-resource-card__image {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.mint-resource-card--sm .mint-resource-card__image {
  width: 48px;
  height: 48px;
}

.mint-resource-card--lg .mint-resource-card__image {
  width: 80px;
  height: 80px;
}

.mint-resource-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mint-resource-card__image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.mint-resource-card__image-fallback svg {
  width: 50%;
  height: 50%;
}

/* Body section */
.mint-resource-card__body {
  flex: 1;
  min-width: 0;
}

.mint-resource-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mint-resource-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 0 !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-resource-card--sm .mint-resource-card__name {
  font-size: 0.8125rem;
}

.mint-resource-card--lg .mint-resource-card__name {
  font-size: 1.0625rem;
}

.mint-resource-card__description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.125rem !important;
  margin-bottom: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 0 !important;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-resource-card__location {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 0 !important;
}

/* Status indicator */
.mint-resource-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.mint-resource-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mint-resource-card__status-dot--available {
  background-color: var(--mint-success);
  color: var(--mint-success);
}

.mint-resource-card__status-dot--in-use {
  background-color: var(--color-primary);
  color: var(--color-primary);
  animation: mint-resource-pulse 2s ease-in-out infinite;
}

.mint-resource-card__status-dot--maintenance {
  background-color: var(--mint-warning);
  color: var(--mint-warning);
}

.mint-resource-card__status-dot--offline {
  background-color: var(--mint-error);
  color: var(--mint-error);
}

.mint-resource-card__status-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Compact status: colored text only */
.mint-resource-card--compact .mint-resource-card__status-label--available {
  color: var(--mint-success);
}

.mint-resource-card--compact .mint-resource-card__status-label--in-use {
  color: var(--color-primary);
}

.mint-resource-card--compact .mint-resource-card__status-label--maintenance {
  color: var(--mint-warning);
}

.mint-resource-card--compact .mint-resource-card__status-label--offline {
  color: var(--mint-error);
}

.mint-resource-card__next-available {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem !important;
  margin-bottom: 0 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 0 !important;
}

/* Specs grid */
.mint-resource-card__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
}

.mint-resource-card--sm .mint-resource-card__specs {
  padding: 0.5rem 0.75rem;
  gap: 0.375rem 0.75rem;
}

.mint-resource-card--lg .mint-resource-card__specs {
  padding: 0.75rem 1.25rem;
  gap: 0.5rem 1.25rem;
}

.mint-resource-card__spec {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.mint-resource-card__spec-label {
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.mint-resource-card__spec-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Footer (tags + action) */
.mint-resource-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-top: 0;
}

.mint-resource-card--sm .mint-resource-card__footer {
  padding: 0.5rem 0.75rem;
  padding-top: 0;
}

.mint-resource-card--lg .mint-resource-card__footer {
  padding: 0.75rem 1.25rem;
  padding-top: 0;
}

.mint-resource-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

.mint-resource-card__action {
  flex-shrink: 0;
}

/* Book button */
.mint-resource-card__book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.mint-resource-card__book-btn:hover {
  background-color: var(--color-primary-hover);
}

/* Compact book button: ghost style */
.mint-resource-card--compact .mint-resource-card__book-btn {
  background-color: transparent;
  color: var(--color-primary);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.mint-resource-card--compact .mint-resource-card__book-btn:hover {
  background-color: var(--bg-hover);
}

/* Compact layout overrides */
.mint-resource-card--compact .mint-resource-card__name {
  font-size: 0.875rem;
  flex: 1;
  min-width: 0;
}

/* Spacer between header and specs/footer */
.mint-resource-card__content {
  display: flex;
  flex-direction: column;
}

/* Pulse animation for in-use status */
@keyframes mint-resource-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mint-resource-card__status-dot--in-use {
    animation: none;
  }
}
/* FormBuilder */
.mint-form-builder {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mint-form-builder--sm {
  gap: 0.625rem;
}

.mint-form-builder--lg {
  gap: 2rem;
}

.mint-form-builder__step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* FormSection */
.mint-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mint-form-section--static {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mint-form-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.mint-form-section__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.mint-form-section__description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.mint-form-section__grid {
  display: grid;
  gap: 1rem;
}

/* FormActions */
.mint-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.mint-data-viewer {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mint-data-viewer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  gap: 8px;
}
.mint-data-viewer__controls { display: flex; gap: 8px; }
.mint-data-viewer__actions { display: flex; gap: 4px; align-items: center; }
.mint-data-viewer__content {
  padding: 12px;
  max-height: 600px;
  overflow-y: auto;
}
.mint-data-viewer__loading {
  padding: 24px 12px;
}
.mint-data-viewer__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mint-data-viewer__state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Summary view */
.mint-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Metadata pills row */
.mint-summary__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mint-summary__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1;
  border: 1px solid var(--border-color);
}

.mint-summary__pill--sm {
  font-size: 0.75rem;
}

.mint-summary__pill-key {
  padding: 4px 8px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  text-transform: capitalize;
  font-weight: 500;
}

.mint-summary__pill-value {
  padding: 4px 8px;
  color: var(--text-primary);
}

/* Section */
.mint-summary__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mint-summary__section-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mint-summary__section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 8px;
}

.mint-summary__table-header {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* Group cards */
.mint-summary__group-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mint-summary__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.mint-summary__group-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mint-summary__group-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

.mint-summary__group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
}

.mint-exp-code {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mint-exp-code--sm { padding: 1px 6px; font-size: 11px; }
.mint-exp-code--md { padding: 2px 8px; font-size: 12px; }
.mint-exp-code--lg { padding: 3px 10px; font-size: 14px; }

/* Copyable state */
.mint-exp-code--copyable {
  cursor: pointer;
  user-select: none;
}
.mint-exp-code--copyable:hover {
  background: var(--bg-hover);
}
.mint-exp-code--copyable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Copied feedback */
.mint-exp-code--copied {
  background: var(--mint-success-bg);
  color: var(--mint-success);
}
/* ResourcePickerList: shared list for ExperimentSelectorModal and ArtifactSelectorModal.
   No frame of its own (the modal is the card); rows are inset and rounded, groups are
   pinned bars. */

/* The modal is the only card: the list runs edge to edge, and the toolbar, group
   bars and row text keep the modal's 1.25rem gutter themselves. */
.mint-modal__body:has(> .mint-resource-picker) {
  padding: 0;
}
.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
  border-bottom: none;
  padding-bottom: 0.75rem;
}

.mint-resource-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.mint-resource-picker__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem;
}
.mint-resource-picker__search {
  flex: 1;
  min-width: 10rem;
}

.mint-resource-picker__frame {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
}
.mint-resource-picker__list {
  padding-bottom: 0.5rem;
  max-height: min(28rem, calc(100vh - 16rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mint-resource-picker__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 30px;
  padding: 0 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mint-resource-picker__group:hover {
  background-color: var(--bg-hover);
}
.mint-resource-picker__group:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.mint-resource-picker__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.mint-resource-picker__group[aria-expanded='false'] .mint-resource-picker__chevron {
  transform: rotate(-90deg);
}
.mint-resource-picker__group-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mint-resource-picker__group-count {
  font: 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.mint-resource-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: auto;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: 56px;
  margin: 2px 0.5rem;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mint-resource-picker__row:hover {
  background-color: var(--bg-hover);
}
.mint-resource-picker__row--selected,
.mint-resource-picker__row--selected:hover {
  background-color: var(--color-primary-soft);
}
/* Keyboard focus is the ring alone; it never adds a fill or a bar. */
.mint-resource-picker__row--active {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.mint-resource-picker__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  line-height: 1.25;
}
.mint-resource-picker__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.mint-resource-picker__row--selected .mint-resource-picker__title {
  color: var(--_ink-primary);
}
.mint-resource-picker__code {
  margin-right: 0.5rem;
}
.mint-resource-picker__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  line-height: 1.25;
  white-space: nowrap;
}
.mint-resource-picker__date {
  font: 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.mint-resource-picker__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.mint-resource-picker__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.mint-resource-picker__status--primary { color: var(--_ink-primary); }
.mint-resource-picker__status--success { color: var(--mint-success); }
.mint-resource-picker__status--warning { color: var(--mint-warning); }
.mint-resource-picker__status--error { color: var(--mint-error); }
.mint-resource-picker__status--info { color: var(--mint-info); }
.mint-resource-picker__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-secondary);
}
.mint-resource-picker__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mint-resource-picker__skeleton-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 1.25rem;
}
.mint-resource-picker__error {
  margin: 0 1.25rem 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--mint-error-border);
  border-radius: var(--radius-md);
  background-color: var(--mint-error-bg);
  font-size: 13px;
  color: var(--text-primary);
}

:where(html.dark) .mint-resource-picker {
  --border-light: var(--border-color);
}

/* ExperimentSelectorModal: filters beside the shared ResourcePickerList search (8b). */

.mint-experiment-selector__filters-advanced {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1.25rem;
}

.mint-experiment-selector__filter-select {
  flex-shrink: 0;
  width: 10rem;
}

/* "Filters" toggle button */
.mint-experiment-selector__filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.mint-experiment-selector__filters-toggle:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-experiment-selector__filters-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mint-experiment-selector__filters-toggle--active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

html.dark .mint-experiment-selector__filters-toggle--active {
  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* Active filter badge dot */
.mint-experiment-selector__filters-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

/* Group toggle checkbox label */
.mint-experiment-selector__group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  margin-left: auto;
}

.mint-experiment-selector__group-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.mint-experiment-selector__group-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Footer with clear selection */
.mint-experiment-selector__footer {
  display: flex;
  justify-content: flex-start;
  padding: 0.5rem 1.25rem 0.75rem;
  border-top: 1px solid var(--border-light);
}

.mint-experiment-selector__clear-btn {
  padding: 0.25rem 0;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--_ink-primary);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}

.mint-experiment-selector__clear-btn:hover {
  text-decoration-color: currentColor;
}

.mint-experiment-selector__clear-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ArtifactSelectorModal: filters beside the shared ResourcePickerList search (8b). */

.mint-artifact-selector__filter-select {
  flex-shrink: 0;
  width: 10rem;
}

.mint-artifact-save-dialog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mint-artifact-save-dialog__immutable {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mint-artifact-save-dialog__immutable code {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ExperimentPopover — aligned with refresh design (AppTopBar page selector) */

/* Container */
.mint-experiment-popover {
  position: relative;
}

/* Split trigger container */
.mint-experiment-popover__split {
  display: inline-flex;
  align-items: stretch;
}

/* When split has save, trigger loses its right border and radii so it meets
   the save button flush. */
.mint-experiment-popover__split--with-save .mint-experiment-popover__trigger {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ─── Trigger (left / main chip) ───
   Shows the experiment name, truncated to preserve topbar density. */
.mint-experiment-popover__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--form-height-sm);
  padding: 0 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
  box-sizing: border-box;
  transform: translateY(0);
  transition:
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

/* Hover (single-trigger mode) — lift + soft shadow. Gated :not(--active) so
   the chip doesn't bounce while its panel is open. */
.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
  background: var(--bg-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
  .mint-experiment-popover__trigger:active:not(.mint-experiment-popover__trigger--active) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.05s;
}

/* Active (panel open) — ring treatment, same language as the page selector */
.mint-experiment-popover__trigger--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.mint-experiment-popover__trigger--empty {
  color: var(--text-muted);
}

.mint-experiment-popover__trigger-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-icon {
  color: var(--text-muted);
}

.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-icon {
  color: var(--color-primary);
}

.mint-experiment-popover__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Experiment code fallback in the trigger — monospace, tabular */
.mint-experiment-popover__trigger-code {
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-code {
  color: var(--text-muted);
}

.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-code {
  color: var(--color-primary);
}

/* ─── Unresolved states ───
   An experiment is bound but has no name yet. The chip must not read "No
   experiment", and it must never fall back to the numeric id — a name only
   ever comes from the platform. */
.mint-experiment-popover__trigger--loading {
  cursor: progress;
}

.mint-experiment-popover__trigger--loading .mint-experiment-popover__trigger-icon {
  color: var(--text-muted);
}

.mint-experiment-popover__trigger--error {
  border-color: var(--mint-error-border);
  background: var(--mint-error-bg);
  color: var(--mint-error);
}

.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-icon,
.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-chevron {
  color: var(--mint-error);
}

/* Placeholder bar standing in for the name while it resolves. */
.mint-experiment-popover__trigger-skeleton {
  flex: 1;
  min-width: 4.5rem;
  height: 0.625rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  animation: mint-skeleton-breathe 1.6s ease-in-out infinite; /* 3e breathe, keyframes in skeleton.css */
}

.mint-experiment-popover__trigger-chevron {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* ─── Save trigger (right half of split) — filled-button treatment ─── */
.mint-experiment-popover__save-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--form-height-sm);
  height: var(--form-height-sm);
  border: 1px solid var(--color-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background-color: var(--color-primary);
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition:
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

.mint-experiment-popover__save-trigger--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mint-experiment-popover__save-trigger--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Success state: green surface */
.mint-experiment-popover__save-trigger--success {
  background-color: var(--mint-success);
  border-color: var(--mint-success);
  border-left-color: rgba(255, 255, 255, 0.3);
}

.mint-experiment-popover__save-trigger-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.mint-experiment-popover__spinner--inline {
  width: 0.8125rem;
  height: 0.8125rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: mint-experiment-popover-spin 0.6s linear infinite;
}

/* ─── Split unit ─── */
/* No lift: the save half is flat like every filled control (3g, per 1d). */

/* Per-half color-on-hover (only when the SPECIFIC half is being pointed at) */
.mint-experiment-popover__split--with-save
  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
  background: var(--bg-hover);
  border-color: var(--color-primary);
}

.mint-experiment-popover__split--with-save
  .mint-experiment-popover__save-trigger:hover:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.mint-experiment-popover__split--with-save
  .mint-experiment-popover__save-trigger--success:hover:not(:disabled) {
  background-color: var(--mint-success-hover);
  border-color: var(--mint-success-hover);
}

/* ─── Popover panel ─── */
.mint-experiment-popover__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 17.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
}

/* Header */
.mint-experiment-popover__header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-experiment-popover__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mint-experiment-popover__subtitle {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
}

.mint-experiment-popover__body {
  padding: 0.75rem 1rem;
}

/* Select experiment button (no experiment state) */
.mint-experiment-popover__select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  height: 2.125rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transform: translateY(0);
  transition:
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

.mint-experiment-popover__select-btn:hover {
  background-color: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.mint-experiment-popover__select-btn:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.05s;
}

/* Experiment card (selected state) */
.mint-experiment-popover__card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.mint-experiment-popover__card-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  display: grid;
  place-items: center;
}

.mint-experiment-popover__card-icon svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.mint-experiment-popover__card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Experiment code in the card — small mono badge at the top of info */
.mint-experiment-popover__card-code {
  align-self: flex-start;
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.mint-experiment-popover__card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.mint-experiment-popover__card-status {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ─── Card: unresolved variants ─── */
.mint-experiment-popover__card--error {
  background: var(--mint-error-bg);
}

.mint-experiment-popover__card-icon--error {
  background: transparent;
}

.mint-experiment-popover__card-icon--error svg {
  color: var(--mint-error);
}

.mint-experiment-popover__card-message {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Placeholder lines mirroring the code / name / status stack of a real card. */
.mint-experiment-popover__skeleton-line {
  display: block;
  height: 0.625rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-hover);
  animation: mint-skeleton-breathe 1.6s ease-in-out infinite; /* 3e breathe, keyframes in skeleton.css */
}

.mint-experiment-popover__skeleton-line--code {
  width: 3.5rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.mint-experiment-popover__skeleton-line--name {
  width: 100%;
  margin-top: 0.25rem;
}

.mint-experiment-popover__skeleton-line--status {
  width: 45%;
  margin-top: 0.25rem;
}

/* Action row sits BELOW the card (was inside) so the buttons have
   room to breathe and don't compete with the info stack. */
.mint-experiment-popover__card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.mint-experiment-popover__change-btn,
.mint-experiment-popover__detach-btn {
  padding: 0.3125rem 0.625rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

.mint-experiment-popover__change-btn {
  color: var(--color-primary);
}

.mint-experiment-popover__change-btn:hover {
  background: var(--color-primary-soft);
}

.mint-experiment-popover__detach-btn {
  color: var(--text-muted);
  font-weight: 400;
}

.mint-experiment-popover__detach-btn:hover {
  color: var(--mint-error);
  background: rgba(239, 68, 68, 0.08);
}

@keyframes mint-experiment-popover-spin {
  to { transform: rotate(360deg); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .mint-experiment-popover__trigger,
  .mint-experiment-popover__save-trigger,
  .mint-experiment-popover__select-btn {
    transition-property: background-color, border-color, box-shadow, color, opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }
  .mint-experiment-popover__trigger:hover,
  .mint-experiment-popover__trigger:active,
  .mint-experiment-popover__select-btn:hover,
  .mint-experiment-popover__select-btn:active {
    transform: none;
  }
  .mint-experiment-popover__trigger-chevron {
    transition: none;
  }
  /* Placeholders stay as flat blocks — still legible as "not loaded yet". */
  .mint-experiment-popover__trigger-skeleton,
  .mint-experiment-popover__skeleton-line {
    animation: none;
  }
}
/* FitPanel Component Styles */

.mint-fit-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
:where(html.dark) .mint-fit-panel {
  --border-light: var(--border-color);
}

/* Action bar */
.mint-fit-panel__actions {
  display: flex;
  gap: 0.5rem;
}

/* Progress */
.mint-fit-panel__progress {
  padding: 0.25rem 0;
}

/* Results (9b): values mono, tabular, never colored. */
.mint-fit-panel__results {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  overflow: hidden;
}

.mint-fit-panel__series {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

/* Series switch (9b): no track; the active series gets a tinted chip, no raised shadow. */
.mint-fit-panel__series .mint-segmented-control--card {
  padding: 0;
  background-color: transparent;
}

.mint-fit-panel__series .mint-segmented-control__option--card {
  color: var(--text-secondary);
}

.mint-fit-panel__series .mint-segmented-control__option--card.mint-segmented-control__option--active {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: none;
}

/* Parameter table: parameter (mono unit) / value / 95% CI. */
.mint-fit-panel__result-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.mint-fit-panel__result-head th {
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-primary);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
}

.mint-fit-panel__result-row > * {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.mint-fit-panel__result-row:last-child > * {
  border-bottom: none;
}

.mint-fit-panel__result-label {
  font-weight: 400;
  color: var(--text-primary);
  text-align: left;
}

.mint-fit-panel__result-unit {
  margin-left: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

/* Numeric columns hug their content and align right. */
.mint-fit-panel__result-list .mint-fit-panel__result-num {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.mint-fit-panel__result-value,
.mint-fit-panel__result-ci {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mint-fit-panel__result-ci {
  color: var(--text-secondary);
}

/* Verdicts: icon shape + text, below the table. */
.mint-fit-panel__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
}

.mint-fit-panel__result-list + .mint-fit-panel__checks {
  border-top: 1px solid var(--border-light);
}

.mint-fit-panel__check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary-strong);
}

.mint-fit-panel__check-icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.mint-fit-panel__check-stroke {
  stroke: var(--mint-success-hover);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mint-fit-panel__check-shape { fill: var(--text-secondary); }
.mint-fit-panel__check--warning .mint-fit-panel__check-shape { fill: var(--mint-warning); }
.mint-fit-panel__check--error .mint-fit-panel__check-shape { fill: var(--mint-error); }

.mint-fit-panel__check-mark {
  stroke: white;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* AppAvatarMenu — avatar button + dropdown.
   Panel = .mint-popover, rows = .mint-menu-item (2d, 5a); the __panel,
   __item and __divider classes stay as aliases. */

.mint-avatar-menu {
  position: relative;
  flex-shrink: 0;
}

/* Trigger — solid avatar circle + username, 32px like the other bar controls. */
.mint-avatar-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.625rem 0 0.125rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-avatar-menu__trigger:hover,
.mint-avatar-menu__trigger--open {
  background: var(--bg-hover);
}

.mint-avatar-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-avatar-menu__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  color: white;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Username next to the avatar — hidden below 640px to preserve space */
.mint-avatar-menu__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mint-avatar-menu__name {
    display: none;
  }

  .mint-avatar-menu__trigger {
    padding: 0 0.125rem;
  }
}

.mint-avatar-menu__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 13.75rem;
  z-index: 60;
}

.mint-avatar-menu__header {
  padding: 0.375rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.25rem;
}

.mint-avatar-menu__user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.mint-avatar-menu__user-email {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.0625rem;
  line-height: 1.25;
  word-break: break-all;
}

.mint-avatar-menu__item-icon {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mint-avatar-menu__item-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-avatar-menu__item--danger .mint-avatar-menu__item-icon {
  color: inherit;
}

.mint-avatar-menu__item-label {
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mint-avatar-menu__trigger {
    transition: none;
  }
}

/* AppTopBar page selector — left-side route/page dropdown.
   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */

.mint-page-selector {
  position: relative;
  flex-shrink: 0;
}

.mint-page-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.25rem;
  padding: 0 0.5rem 0 0.4375rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color var(--mint-transition),
    border-color var(--mint-transition),
    box-shadow var(--mint-transition);
}

.mint-page-selector__trigger:hover:not(.mint-page-selector__trigger--open) {
  background: var(--bg-hover);
}

.mint-page-selector__trigger:focus-visible,
.mint-page-selector__trigger--open {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

/* Page icon tile is neutral; the plugin carries the color. */
.mint-page-selector__icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mint-page-selector__icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-page-selector__icon--metadata {
  background: transparent;
  color: inherit;
}

.mint-page-selector__trigger-metadata-icon.mint-plugin-icon--sm {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
}

.mint-page-selector__icon-fallback {
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.mint-page-selector__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chevron sits inline; the wrap no longer draws a tile. */
.mint-page-selector__chevron-wrap {
  display: inline-flex;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mint-page-selector__chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform var(--mint-transition);
}

.mint-page-selector__chevron--open {
  transform: rotate(180deg);
}

.mint-page-selector__menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  width: 16.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  z-index: 50;
}

.mint-page-selector__menu-title {
  padding: 0.375rem 0.625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mint-page-selector__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  background: transparent;
  border-radius: 0.4375rem;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mint-transition);
}

.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
  background: var(--bg-hover);
}

.mint-page-selector__item--active {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.mint-page-selector__item--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-page-selector__item-icon {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.3125rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mint-page-selector__item--active .mint-page-selector__item-icon {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mint-page-selector__item-icon--metadata,
.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
  background: transparent;
  color: inherit;
}

.mint-page-selector__item-icon svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.mint-page-selector__metadata-icon.mint-plugin-icon--sm {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.3125rem;
}

.mint-page-selector__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mint-page-selector__trigger,
  .mint-page-selector__chevron {
    transition: none;
  }
}

/* AppTopBar pillNav — centered top-level navigation pills.
   Keeps the pill shape (the only pill in the bar, 5a); items are 26px to fit
   the 52px bar. Dropdown = .mint-popover + .mint-menu-item (2d). */

.mint-pill-nav {
  display: inline-flex;
  gap: 2px;
  padding: 0.1875rem;
  border-radius: 9999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.mint-pill-nav__item-wrap {
  position: relative;
  display: inline-flex;
}

.mint-pill-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  border: 0;
  padding: 0 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--mint-transition),
    background-color var(--mint-transition),
    box-shadow var(--mint-transition);
}

@media (prefers-reduced-motion: reduce) {
  .mint-pill-nav__item,
  .mint-pill-nav__chevron {
    transition: none;
  }
}

.mint-pill-nav__item:hover:not(.mint-pill-nav__item--active):not(.mint-pill-nav__item--disabled) {
  color: var(--text-primary);
}

.mint-pill-nav__item--active {
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.mint-pill-nav__item--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-pill-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.mint-pill-nav__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.mint-pill-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--mint-error);
  flex-shrink: 0;
}

.mint-pill-nav__chevron {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--mint-transition);
}

.mint-pill-nav__chevron--open {
  transform: rotate(180deg);
}

.mint-pill-nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 45;
  min-width: 18rem;
  transform: translateX(-50%);
}

.mint-pill-nav__dropdown-item {
  white-space: nowrap;
}

.mint-pill-nav__dropdown-label {
  flex-shrink: 0;
}

.mint-pill-nav__dropdown-description {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.mint-mobile-support-gate {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.mint-mobile-support-gate *,
.mint-mobile-support-gate *::before,
.mint-mobile-support-gate *::after {
  box-sizing: border-box;
}

.mint-mobile-support-gate__panel {
  width: 28rem;
  max-width: calc(100vw - 3rem);
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

.mint-mobile-support-gate__mark {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.mint-mobile-support-gate__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mint-mobile-support-gate__copy {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.mint-mobile-support-gate__eyebrow {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.mint-mobile-support-gate__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mint-mobile-support-gate__message {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mint-mobile-support-gate__hint {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mint-mobile-support-gate__hint-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.125rem;
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .mint-mobile-support-gate {
    padding: 1rem;
  }

  .mint-mobile-support-gate__panel {
    max-width: calc(100vw - 2rem);
    padding: 1.25rem;
  }

  .mint-mobile-support-gate__title {
    font-size: 1.25rem;
  }
}

/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip with two
   visual variants. Tintable via `--mint-plugin-icon-tone` custom property. */

.mint-plugin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

/* Sizes */
.mint-plugin-icon--sm { width: 1.5rem; height: 1.5rem; }
.mint-plugin-icon--md { width: 2rem;   height: 2rem;   }
.mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
.mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }

/* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
.mint-plugin-icon--solid {
  background-color: var(--mint-plugin-icon-tone, var(--color-primary));
  color: white;
}
.mint-plugin-icon--tinted {
  background-color: color-mix(in srgb, var(--mint-plugin-icon-tone, var(--color-primary)) 12%, transparent);
  color: var(--mint-plugin-icon-tone, var(--color-primary));
}

/* Inner svg/img — sized to ~62% of chip */
.mint-plugin-icon--sm .mint-plugin-icon__svg,
.mint-plugin-icon--sm .mint-plugin-icon__img { width: 0.9375rem; height: 0.9375rem; }
.mint-plugin-icon--md .mint-plugin-icon__svg,
.mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem;  height: 1.125rem;  }
.mint-plugin-icon--topbar .mint-plugin-icon__svg,
.mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem; }
.mint-plugin-icon--lg .mint-plugin-icon__svg,
.mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem;    height: 1.5rem;    }

.mint-plugin-icon__img {
  object-fit: contain;
}

.mint-plugin-icon .mint-plugin-icon__svg--structured {
  width: 100%;
  height: 100%;
}

/* 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;
}

/* Sections */

.mint-reagent-editor__section {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.mint-reagent-editor__section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.mint-reagent-editor__section-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--reagent-color, var(--color-primary));
  opacity: 0.7;
}

/* 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));
}

/* 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__position-row {
  display: flex;
  gap: 0.625rem;
  width: 100%;
}

.mint-reagent-editor .mint-select {
  width: 100%;
  min-width: 0;
}

.mint-reagent-editor__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: capitalize;
  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);
}

/* Inline field validation error */

.mint-reagent-editor__field-error {
  grid-column: 2;
  font-size: 0.6875rem;
  color: var(--mint-error);
  line-height: 1.2;
}

/* 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-reagent-editor__unit-select:hover {
  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
}

/* 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-reagent-editor__generator-inputs {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.mint-reagent-editor__generator-inputs > * {
  flex: 1;
  min-width: 0;
}

/* 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;
  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);
  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-reagent-editor__preset-btn:active {
  transform: scale(0.96);
}

/* Manual entry */

.mint-reagent-editor__manual {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.mint-reagent-editor__manual .mint-number-input {
  flex: 1;
  width: 0; /* flex-basis override so flex: 1 controls sizing */
}

.mint-reagent-editor__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  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-reagent-editor__add-btn:hover:not(:disabled) {
  filter: brightness(0.88);
}

.mint-reagent-editor__add-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.mint-reagent-editor__add-btn:disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* 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-reagent-editor__table-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.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-reagent-editor__table-header .mint-reagent-editor__table-col {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.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-reagent-editor__table-row:last-child {
  border-bottom: none;
}

.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-reagent-editor__table-col--level {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.mint-reagent-editor__table-col--reps {
  width: 5.5rem;
  flex-shrink: 0;
}

.mint-reagent-editor__table-col--action {
  width: 1.75rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.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;
}

.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;
  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-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
  opacity: 1;
}

.mint-reagent-editor__remove-level-btn: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;
  color: var(--text-muted);
  font-style: italic;
}

/* 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-reagent-editor__summary-item {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.mint-reagent-editor__summary-value {
  font-family: 'Fira Code', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--reagent-color, var(--text-primary));
}

.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);
}

.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
  color: var(--mint-warning-hover);
}

.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;
}

/* Footer */

.mint-reagent-editor__footer {
  padding: 0.75rem 1rem;
}

.mint-reagent-editor__footer .mint-button {
  width: 100%;
}

/* FilePicker (8a): BaseModal xl shell, header sources + search, flat list, preview and receipt. */

/* The list and preview run edge to edge. BaseModal's Teleport root drops class
   fallthrough, so the shell regions are reached through their content. */
.mint-modal__header:has(.mint-picker__head) {
  align-items: center;
  padding: 12px 16px;
}
.mint-modal__body:has(> .mint-picker) {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.mint-modal__footer:has(.mint-picker__footer) {
  padding: 10px 16px;
}

.mint-picker__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mint-picker__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.mint-picker__sources {
  flex-shrink: 1;
  min-width: 0;
  overflow-x: auto;
}
.mint-picker__search {
  width: 240px;
  min-width: 0;
  margin-left: auto;
}
.mint-picker__search .mint-input-group__suffix {
  border-left: 0;
  background: transparent;
}
.mint-picker__search kbd {
  padding: 0 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font: 11px var(--font-mono);
  color: var(--text-secondary);
}

.mint-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mint-picker__pathbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.mint-picker__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  font: 12px var(--font-mono);
}
.mint-picker__crumb {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mint-picker__crumb:hover {
  background: var(--bg-hover);
}
.mint-picker__crumb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}
.mint-picker__crumb[aria-current='location'] {
  color: var(--text-primary);
}
.mint-picker__crumb-separator {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.mint-picker__accepts {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mint-picker__scope,
.mint-picker__sort,
.mint-picker__link {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mint-picker__scope,
.mint-picker__sort {
  flex-shrink: 0;
  color: var(--text-secondary-strong);
}
.mint-picker__sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mint-picker__sort svg {
  width: 12px;
  height: 12px;
}
.mint-picker__link {
  color: var(--_ink-primary);
}
.mint-picker__refresh {
  display: inline-grid;
  place-items: center;
  padding: 4px;
}
.mint-picker__refresh svg {
  width: 14px;
  height: 14px;
}
.mint-picker__refresh:disabled {
  background: transparent;
  opacity: 0.5;
  cursor: not-allowed;
}
.mint-picker__scope:hover,
.mint-picker__sort:hover,
.mint-picker__sort[aria-expanded='true'],
.mint-picker__link:hover {
  background: var(--bg-hover);
}
.mint-picker__scope:focus-visible,
.mint-picker__sort:focus-visible,
.mint-picker__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}
.mint-picker__scope[aria-pressed='true'] {
  color: var(--_ink-primary);
  background: var(--color-primary-soft);
}

.mint-picker__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  height: 360px;
  min-height: 0;
}
.mint-picker__list {
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  background: var(--bg-card);
}
.mint-picker__list-head,
.mint-picker__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 80px 96px;
  gap: 8px;
  align-items: center;
  padding: 0 12px;
}
.mint-picker__list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 30px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.mint-picker__list-head > span:nth-child(n + 3) {
  text-align: right;
}
.mint-picker__truncated {
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-secondary);
}
.mint-picker__row {
  box-sizing: border-box;
  height: 34px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mint-picker__row:hover {
  background: var(--bg-hover);
}
.mint-picker__row--selected,
.mint-picker__row--selected:hover {
  background: var(--color-primary-soft);
}
.mint-picker__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.mint-picker__row--unreadable,
.mint-picker__row--unreadable:hover {
  background: transparent;
  color: var(--text-secondary);
  cursor: not-allowed;
}
.mint-picker__cell--check {
  display: flex;
  justify-content: center;
}
.mint-picker__lock {
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
}
.mint-picker__cell--name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: calc(var(--picker-depth, 0) * 16px);
}
.mint-picker__disclosure {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
}
.mint-picker__disclosure svg {
  width: 10px;
  height: 10px;
  transition: transform 120ms ease;
}
.mint-picker__chevron--open {
  transform: rotate(90deg);
}
.mint-picker__node-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.mint-picker__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 12px var(--font-mono);
}
.mint-picker__name mark {
  border-radius: 2px;
  background: color-mix(in srgb, var(--mint-warning) 30%, transparent);
  color: inherit;
}
.mint-picker__reason,
.mint-picker__parent-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.mint-picker__reason {
  font-size: 12px;
}
.mint-picker__parent-name {
  font: 11px var(--font-mono);
}
.mint-picker__cell--size,
.mint-picker__cell--time {
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  font: 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.mint-picker__partial {
  color: var(--mint-warning-text);
}
.mint-picker__branch-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 48px;
  font-size: 12px;
  color: var(--mint-error);
}
.mint-picker__skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
}
.mint-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  padding: 24px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.mint-picker__preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  border-left: 1px solid var(--border-light);
  background: var(--bg-primary);
}
.mint-picker__preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.mint-picker__preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mint-picker__preview-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.mint-picker__preview-icon svg {
  width: 18px;
  height: 18px;
}
.mint-picker__preview-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mint-picker__preview-name {
  font: 600 12px var(--font-mono);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.mint-picker__preview-kind,
.mint-picker__preview-status {
  font-size: 12px;
  color: var(--text-secondary);
}
.mint-picker__metadata {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}
.mint-picker__metadata dt {
  color: var(--text-secondary);
}
.mint-picker__metadata dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.mint-picker__preview-empty {
  margin: auto;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.mint-picker__skipped {
  align-self: flex-start;
  color: var(--mint-warning-text);
}
.mint-picker__exclusion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.mint-picker__exclusion strong {
  font-family: var(--font-mono);
  font-weight: 500;
}
.mint-picker__exclusion span {
  color: var(--text-secondary);
}
.mint-picker__preview-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--mint-error);
}

.mint-picker__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.mint-picker__receipt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.mint-picker__summary {
  color: var(--text-secondary-strong);
  font-variant-numeric: tabular-nums;
}
.mint-picker__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mint-picker__local-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.mint-picker__source-panel {
  animation: mint-picker-source-in 150ms ease-out;
}
@keyframes mint-picker-source-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mint-picker__source-panel {
    animation: none;
  }
}

@media (max-width: 640px) {
  .mint-picker__head {
    flex-wrap: wrap;
  }
  .mint-picker__search {
    width: 100%;
  }
  .mint-picker__search kbd,
  .mint-picker__accepts {
    display: none;
  }
  .mint-picker__workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .mint-picker__preview {
    display: none;
  }
  .mint-picker__list-head,
  .mint-picker__row {
    grid-template-columns: 28px minmax(0, 1fr) 72px;
  }
  .mint-picker__list-head > span:last-child,
  .mint-picker__cell--time {
    display: none;
  }
  .mint-picker__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mint-picker__actions {
    justify-content: flex-end;
  }
}
/*$vite$:1*/