/* ============================================================================
   MOQ Config Editor (MOQ v2, Phase 1 — spec/TODO_moq_v2.md §12–13).

   Two-pane admin surface: a searchable style-group rail (left) + a product-first
   editor (right). This stylesheet loads GLOBALLY via the :app glob, so EVERY
   class is `.mqe-`-prefixed to avoid cross-page collisions (design-system §19).
   Warm-minimal tokens only — NO inline styles, no hard-coded palette outside the
   documented status tints.

   The `.moq-inline__*` / `.moq-group-card__*` meter-pill classes are REUSED (not
   redefined) from replenishment_v2.css so the editor preview and the By-MOQ-Group
   floor are one visual language. This file only adds the width-quantizer classes
   the static mockup needs (a live surface sets width via JS, not inline style).
   ========================================================================== */

.mqe {
  max-width: 1500px;
  margin: 0 auto;
}

/* Focused editor page (new/edit) — the editor card at a comfortable reading width,
   left-aligned under the header (reached from the list view). */
.mqe-editor-page { max-width: 920px; }

/* "← MOQ groups" back link above the editor header. */
.mqe-back {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.mqe-back:hover { color: var(--ink); }

/* ── List (index) table cells ────────────────────────────────────────────── */
.mqe-row-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.mqe-row-name:hover { color: var(--accent); text-decoration: underline; }
.mqe-floors {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.mqe-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.mqe-status--ready { color: var(--green); background: #f0fdf4; }
.mqe-status--attention { color: var(--orange); background: #fff7ed; }

/* Clickable product count → opens the products lightbox. */
.mqe-count-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mqe-count-btn:hover { text-decoration: underline; }

/* ── Products lightbox (list-view modal) ─────────────────────────────────── */
.mqe-pm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(24, 22, 20, 0.45);
}
.mqe-pm[hidden] { display: none; }
.mqe-pm__card {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.mqe-pm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
}
.mqe-pm__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.mqe-pm__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.mqe-pm__close:hover { color: var(--ink); }
.mqe-pm__body { padding: 8px 18px 18px; overflow-y: auto; }
.mqe-pm__count {
  margin: 8px 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mqe-pm__list { list-style: none; margin: 0; padding: 0; }
.mqe-pm__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.mqe-pm__row:last-child { border-bottom: none; }
.mqe-pm__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mqe-pm__meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mqe-pm__empty { font-size: 13px; color: var(--muted); padding: 12px 0; }

/* ============================================================================
   RIGHT PANE — EDITOR
   ========================================================================== */
.mqe-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.mqe-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

/* Selected-style IDENTITY — the primary "what am I editing" cue. */
.mqe-editor__identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mqe-editor__eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
}
.mqe-editor__idline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.mqe-editor__style-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mqe-editor__idmeta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.mqe-editor__iddot { color: var(--light); }

.mqe-editor__head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}


/* Three-state save indicator: draft / live / error */
.mqe-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.mqe-save__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mqe-save[data-state="draft"] {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border-hover);
}
.mqe-save[data-state="draft"] .mqe-save__pip { background: var(--light); }

.mqe-save[data-state="live"] {
  background: #dcfce7;
  color: var(--green);
  border-color: #bbf7d0;
}
.mqe-save[data-state="live"] .mqe-save__pip { background: var(--green); }

.mqe-save[data-state="error"] {
  background: #fef2f2;
  color: var(--red);
  border-color: #fecaca;
}
.mqe-save[data-state="error"] .mqe-save__pip { background: var(--red); }

/* ── Editor body + blocks ────────────────────────────────────────────────── */
.mqe-body {
  padding: 8px 20px 20px;
}
.mqe-body--hidden { display: none; }

.mqe-block {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
}
.mqe-block:last-child { border-bottom: none; }

.mqe-block--preview {
  /* Bleed to the card's side edges (the tinted preview panel spans full width);
     normal bottom margin so the Apply/Delete actions sit below it with padding. */
  margin: 8px -20px 18px;
  padding: 18px 20px 22px;
  background: linear-gradient(180deg, #fafaf8 0%, #fff 100%);
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.mqe-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mqe-block__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
/* Helper copy sits UNDER its block title, not floated right (no eye-jump). */
.mqe-block__sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Fields */
.mqe-field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.mqe-field-label--inline {
  display: inline;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.mqe-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
}
.mqe-input:read-only, .mqe-input:disabled { cursor: default; }
.mqe-input--style { width: 100%; font-weight: 600; }
.mqe-input--num {
  width: 96px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  text-align: right;
}

/* Product chips */
.mqe-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.mqe-prodchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.mqe-prodchip__x {
  color: var(--light);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.mqe-prodsearch {
  flex: 1;
  min-width: 160px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px dashed var(--border-hover);
  border-radius: 7px;
  padding: 6px 10px;
}
.mqe-prodsearch::placeholder { color: var(--light); }
.mqe-prodsearch:disabled { cursor: not-allowed; }

.mqe-spanline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.mqe-spanline svg { color: var(--light); flex-shrink: 0; }
.mqe-spanline strong { color: var(--ink); font-weight: 700; }
.mqe-vendor { font-family: "JetBrains Mono", monospace; }

/* Style-floor row + toggle */
.mqe-floor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mqe-floor-row--inner { margin-top: 0; }
.mqe-floor-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
/* Gloss now sits UNDER its floor input (block), not floated to the right. */
.mqe-floor-gloss {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Toggle switch (design-system 36×20, 10px radius) */
.mqe-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mqe-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mqe-toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-hover);
  transition: background 0.15s;
  flex-shrink: 0;
}
.mqe-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
/* Visual on-state is driven declaratively by the checkbox (and still by the
   explicit --on modifier), so the mockup's `checked` attribute is the source of
   truth — no class/state drift. */
.mqe-toggle--on .mqe-toggle__track,
.mqe-toggle:has(.mqe-toggle__input:checked) .mqe-toggle__track { background: var(--ink); }
.mqe-toggle--on .mqe-toggle__thumb,
.mqe-toggle:has(.mqe-toggle__input:checked) .mqe-toggle__thumb { transform: translateX(16px); }
.mqe-toggle__text { font-size: 12px; font-weight: 600; color: var(--muted); }
.mqe-toggle--on .mqe-toggle__text,
.mqe-toggle:has(.mqe-toggle__input:checked) .mqe-toggle__text { color: var(--ink); }

/* Segmented pill (None · By {OptionType} …) — option-type-driven inner dimension */
.mqe-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.mqe-seg__btn {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mqe-seg__btn:hover:not(.is-active) { color: var(--ink); }
.mqe-seg__btn.is-active {
  background: var(--ink);
  color: #fff;
}
.mqe-seg__btn:disabled { cursor: default; }
/* Empty-state hint inside the segmented control (no products picked yet). */
.mqe-seg__hint {
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* Mode toggle (Each value | Grouped) — revealed once an option type is picked.
   Quieter than the primary segmented dimension pill: it's a secondary refinement,
   so it reads as a small labelled toggle rather than a full segmented control. */
.mqe-modetoggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.mqe-modetoggle__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
}
.mqe-modetoggle__tabs {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.mqe-modetoggle__tab {
  padding: 4px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mqe-modetoggle__tab:hover:not(.is-active) { color: var(--ink); }
.mqe-modetoggle__tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.mqe-modetoggle__tab:disabled { cursor: default; }

/* ── Two-layer NESTING (inner grouping → rolls up into the style floor) ─────
   The inner-grouping block and the style-floor block are drawn as ONE nested
   unit: the inner floors are visually CONTAINED, and a "↑ rolls up" affordance
   sits between them pointing at the style floor above. This makes the two-layer
   relationship legible instead of reading as two independent settings. */
.mqe-nest {
  display: flex;
  flex-direction: column;
}
/* Inner grouping is the contained child; the style floor is the parent target
   drawn ABOVE it in the visual stack (order swapped so the arrow reads "up"). */
.mqe-nest__style { order: 1; }
.mqe-nest__rollup { order: 2; }
.mqe-nest__inner { order: 3; }

.mqe-nest__style {
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.mqe-nest__style .mqe-block__head { margin-bottom: 8px; }

.mqe-nest__inner {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

/* The roll-up seam: a thin band between the two blocks carrying the ↑ cue. */
.mqe-nest__rollup {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px;
  background: var(--surface-alt);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--muted);
}
.mqe-nest__rollup svg { color: var(--accent); flex-shrink: 0; }
.mqe-nest__rollup-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--muted);
}

/* Flat variant (shell style — no style floor): the inner block stands alone,
   the style-floor block is a muted "off" footnote, and there is NO ↑ seam. */
.mqe-nest--flat .mqe-nest__inner {
  order: 1;
  border-top: 1px solid var(--border);
  border-radius: 10px;
}
.mqe-nest--flat .mqe-nest__style {
  order: 2;
  margin-top: 14px;
  background: transparent;
  border: 1px dashed var(--border-hover);
  border-radius: 10px;
}
.mqe-nest__style--off .mqe-block__title { color: var(--muted); }

/* Discovered value chips (distinct values of the chosen OptionType, e.g. colors) */
.mqe-discovered { margin-top: 16px; }
.mqe-discovered__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 8px;
}
.mqe-chiprow--values { margin-top: 0; }
.mqe-valchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mqe-valchip__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  background: var(--light);
}
.mqe-valchip__swatch[data-color="black"]  { background: #1a1a1a; }
.mqe-valchip__swatch[data-color="silver"] { background: #c4c4c4; }
.mqe-valchip__swatch[data-color="green"]  { background: #2f6f3e; }
.mqe-valchip__swatch[data-color="rust"]   { background: #9a4a26; }
.mqe-valchip__name { font-size: 12px; font-weight: 600; color: var(--ink); }
.mqe-valchip__demand {
  font-size: 11px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
}
.mqe-valchip__edit {
  display: inline-flex;
  padding: 3px;
  color: var(--light);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.mqe-valchip__edit:hover:not(:disabled) { color: var(--ink); background: var(--surface-alt); }
.mqe-valchip__edit:disabled { cursor: default; }
/* Compact per-value floor override input inside a value chip (identity mode). */
.mqe-valchip__ovr {
  width: 62px;
  padding: 3px 6px;
  font-size: 12px;
}
.mqe-valchip__ovr:disabled { opacity: 0.5; cursor: default; }
/* A chip carrying a saved override reads as an exception vs. the uniform floor. */
.mqe-valchip--override {
  border-color: var(--accent);
  background: var(--red-tint);
}

/* Composable visibility: a block shows only when NEITHER its dimension nor its
   mode is hidden (moq-inner-dim toggles dim-hidden; moq-mode toggles mode-hidden). */
.mqe-dim-hidden,
.mqe-mode-hidden { display: none; }

/* ── Boundary-rail range builder (Grouped mode — Chunk 4) ────────────────────
   An ordered value strip with clickable dividers between values; below it, the
   resulting group cards with per-group floor inputs. User-facing copy says
   "groups"/"split", never "shell". */
.mqe-rangeblock { margin-top: 14px; }
.mqe-rangeblock__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 10px;
}
.mqe-rangerail {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0;
}
.mqe-rangechip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}
/* The clickable divider slot between two values — faint until activated. */
.mqe-rangecut {
  position: relative;
  width: 16px;
  align-self: stretch;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mqe-rangecut::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 60%;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.12s, height 0.12s;
}
.mqe-rangecut:hover::before { background: var(--muted); height: 80%; }
.mqe-rangecut.is-on::before { background: var(--accent); height: 100%; width: 3px; }

.mqe-rangegroups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.mqe-rangegroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mqe-rangegroup__label { font-size: 12px; font-weight: 700; color: var(--ink); }
.mqe-rangegroup__floor { width: 62px; padding: 3px 6px; font-size: 12px; }

/* Static grouping-mode label (replaces a single-option toggle; "Grouped" ships
   in a later chunk). Reads as a quiet caption, not an interactive control. */
.mqe-mode-note {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.mqe-mode-note__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mqe-mode-note__value { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ============================================================================
   LIVE PREVIEW — mirrors the By-MOQ-Group meter-pill
   ========================================================================== */
.mqe-preview-scope {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue);
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 4px;
}
.mqe-preview-summary {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
}
.mqe-preview-summary__delta {
  font-weight: 700;
  color: var(--green);
}

/* Impact line — the COST of padding over demand. Neutral (not green/red): it's a
   fact, not a win. The $ is the boldest, largest figure; units + note trail it. */
.mqe-impact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.mqe-impact__money {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.mqe-impact__units {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.mqe-impact__note {
  font-size: 12px;
  color: var(--light);
}
/* Zero-padding case — demand already meets the floors. */
.mqe-impact--none {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
}
/* Live-preview injection target — a min-height keeps the card from jumping while
   a debounced re-solve is in flight. */
.mqe-preview-body { min-height: 44px; }

.mqe-preview-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mqe-prow {
  display: grid;
  /* col 3 == the meter track width (.mqe-prow .mqe-meter is 46px) so the fixed
     meter doesn't overflow its column and shove the math/bound columns. */
  grid-template-columns: 44px 72px 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.mqe-prow[data-state="deferred"] {
  background: var(--surface-alt);
  border-style: dashed;
}
.mqe-prow__key {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.mqe-prow__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mqe-prow[data-state="deferred"] .mqe-prow__label,
.mqe-prow[data-state="deferred"] .mqe-prow__key { color: var(--muted); }

.mqe-prow__math {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.mqe-prow__demand { color: var(--muted); }
.mqe-prow__arrow { color: var(--light); }
.mqe-prow__order { font-weight: 700; color: var(--ink); }
.mqe-prow__pad { color: var(--green); font-weight: 600; }
.mqe-prow[data-state="deferred"] .mqe-prow__order { color: var(--muted); }

.mqe-prow__bound {
  justify-self: end;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  background: #dcfce7;
  color: var(--green);
}
.mqe-prow__bound[data-state="deferred"] {
  background: #fffbeb;
  color: #92400e;
}

/* Style-floor roll-up */
.mqe-preview-rollup {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mqe-preview-rollup--nostyle { background: var(--surface-alt); }
.mqe-preview-rollup__meter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mqe-rollup-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.mqe-rollup-note {
  font-size: 11px;
  color: var(--muted);
}
.mqe-rollup-note--full { flex: 1; }

/* ── Meter-pill (mirrors the By-MOQ-Group card) ──────────────────────────
   Byte-for-byte the SAME visual language as replenishment_v2.css's
   `.moq-inline__*` / `.moq-group-card__*` meter-pill, but under `.mqe-`-prefixed
   names so the editor is self-contained (replenishment_v2.css is per-page and
   never loads on /moq_groups). Kept in visual sync with that sheet so the editor
   preview and the replenishment floor read as one system. */
.mqe-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
}
.mqe-pill[data-state="below"] {
  background: #fffbeb;
  border-color: #fde68a;
}
.mqe-pill__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--green);
}
.mqe-pill__status[data-state="below"] { color: #c47e00; }
.mqe-pill__status[data-state="met"]::before { content: "\2713"; font-size: 12px; }
.mqe-pill__status[data-state="below"]::before { content: "\26A0"; font-size: 12px; }

.mqe-meter {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-light);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.mqe-meter__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--green);
  transition: width 200ms ease-out;
}
.mqe-meter[data-state="below"] .mqe-meter__fill { background: var(--amber); }

.mqe-nums {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Meter-fill width quantizer ──────────────────────────────────────────
   The live surface sets fill width in JS; the static mockup can't inline-style
   it, so these classes drive width off the parent meter. Steps of ~8% cover the
   sample values. */
.mqe-meter--w0   .mqe-meter__fill { width: 0; }
.mqe-meter--w8   .mqe-meter__fill { width: 8%; }
.mqe-meter--w17  .mqe-meter__fill { width: 17%; }
.mqe-meter--w20  .mqe-meter__fill { width: 20%; }
.mqe-meter--w25  .mqe-meter__fill { width: 25%; }
.mqe-meter--w33  .mqe-meter__fill { width: 33%; }
.mqe-meter--w42  .mqe-meter__fill { width: 42%; }
.mqe-meter--w50  .mqe-meter__fill { width: 50%; }
.mqe-meter--w58  .mqe-meter__fill { width: 58%; }
.mqe-meter--w66  .mqe-meter__fill { width: 66%; }
.mqe-meter--w75  .mqe-meter__fill { width: 75%; }
.mqe-meter--w83  .mqe-meter__fill { width: 83%; }
.mqe-meter--w92  .mqe-meter__fill { width: 92%; }
.mqe-meter--w100 .mqe-meter__fill { width: 100%; }

/* Slightly larger meter in the preview than the collapsed replen header. */
.mqe-prow .mqe-meter,
.mqe-preview-rollup .mqe-meter { width: 46px; height: 5px; }

/* ============================================================================
   REAL EDITOR FORM (Chunk 1 — create/edit surface)
   ========================================================================== */
.mqe-form { display: block; }

/* The prodchip remove control is a real <button> in the live form — reset it
   so it matches the mockup's span styling. */
.mqe-prodchip__x {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.mqe-prodchip__x:hover { color: var(--red); }

/* Inner-floor panel reveal (shown only when "By Color" is selected) */
.mqe-inner-floor-wrap { margin-top: 12px; }

/* Live-preview placeholder copy (real allocator preview is a later chunk) */
.mqe-preview-empty {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}
/* One-line nesting-rule summary above the preview rows. */
.mqe-preview-rule {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--ink);
}
.mqe-preview-rule strong { font-weight: 700; }
/* The demand-basis caption (reorder need vs typical demand). */
.mqe-preview-basis {
  margin: 0 0 12px;
  font-size: 11px;
  font-style: italic;
  color: var(--light);
}

/* ── Actions row (Apply / Cancel) ─────────────────────────────────────────── */
.mqe-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.mqe-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mqe-apply-btn:hover { opacity: 0.85; }
.mqe-apply-btn--move { margin-top: 10px; }

/* Danger footer — separated from the card body, aligned with its 20px padding. */
.mqe-delete-form {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
}
.mqe-delete-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: 1px solid var(--red);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mqe-delete-btn svg { flex-shrink: 0; }
.mqe-delete-btn:hover { color: #fff; background: var(--red); }

/* ── Collision banner ─────────────────────────────────────────────────────── */
.mqe-collision {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  border: 1px solid var(--amber);
  border-radius: 10px;
}
.mqe-collision__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.mqe-collision__list {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink);
}
.mqe-collision__list li { margin-bottom: 3px; }
.mqe-collision__hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Product picker popover (JS-positioned; not a mockup) ─────────────────── */
.mqe-pp-popover {
  position: absolute;
  z-index: 1000;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}
.mqe-pp__results { padding: 6px; }
.mqe-pp__empty {
  padding: 14px;
  font-size: 12px;
  color: var(--muted);
}
.mqe-pp__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.mqe-pp__row:hover:not(:disabled) { background: var(--surface-alt); }
.mqe-pp__row.is-disabled { opacity: 0.6; cursor: default; }
.mqe-pp__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mqe-pp__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.mqe-pp__meta {
  font-size: 11px;
  color: var(--muted);
}
.mqe-pp__badge {
  flex-shrink: 0;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  border-radius: 20px;
}
.mqe-pp__added {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
}

/* ============================================================================
   Buy-sheet review-queue deep-link (spec/PLAN_moq_csv_upload_ui.md §6 / Chunk B)
   — editor-side pieces: the read-only import-context panel, candidate chips
   (confirm-required), prefill notes, and the "Apply & next" submit. Warm-minimal
   tokens only; NO inline styles.
   ========================================================================== */

/* ── Import-context panel (above the form) ───────────────────────────────── */
.mqe-import-context { margin-bottom: 16px; }
.mqe-import-context__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.mqe-import-context__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.mqe-import-context__back { font-size: 12px; }
.mqe-import-context__reasons { margin-bottom: 8px; }
.mqe-import-context__notes {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
}
.mqe-import-context__floors {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}
.mqe-import-context__label { font-size: 12px; color: var(--muted); }
.mqe-import-context__rows summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}

/* ── Prefill note (dimension fell back to None) ──────────────────────────── */
.mqe-import-note {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--amber);
  background: #fffbeb;
  border: 1px solid #fde68a;
}

/* ── Candidate chips (confirm-required — D9-conf) ────────────────────────── */
.mqe-candidates {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px dashed var(--border-hover);
}
.mqe-candidates__intro {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.mqe-candidate-group { margin-bottom: 10px; }
.mqe-candidate-group:last-child { margin-bottom: 0; }
.mqe-candidate-group__label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12px;
}
.mqe-candidate-group__name { font-weight: 600; color: var(--ink); }
.mqe-candidate-group__reason { color: var(--muted); }
.mqe-candidate-group__hint { color: var(--light); }
.mqe-chiprow--candidates { margin-top: 0; }

/* The candidate chip is VISUALLY DISTINCT from a confirmed chip (dashed border,
   tinted) so a MEDIUM match reads as "not yet added". It carries NO
   product_ids[] input — only the Confirm button promotes it to a real chip. */
.mqe-prodchip--candidate {
  background: var(--surface);
  border-style: dashed;
  border-color: var(--border-hover);
  color: var(--muted);
}
.mqe-prodchip--candidate .mqe-prodchip__name { color: var(--ink); }
.mqe-prodchip__sim {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
.mqe-prodchip__confirm {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
}
.mqe-prodchip__confirm:hover { text-decoration: underline; }

/* ── "Apply & next unresolved" ───────────────────────────────────────────── */
.mqe-apply-btn--next {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .mqe-prow {
    grid-template-columns: 40px 1fr;
    row-gap: 6px;
  }
  .mqe-prow .mqe-meter { grid-column: 1 / -1; width: 100%; }
  .mqe-prow__math { grid-column: 1 / -1; }
  .mqe-prow__bound { grid-column: 1 / -1; justify-self: start; }
}

/* Candidate-chip name → product-page link (opens a new tab so the draft form
   survives; QA 2026-08-23 — lets near-identical candidates be told apart). */
.mqe-prodchip__name-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.mqe-prodchip__name-link:hover { color: var(--accent); }

/* Candidate list — ONE matched product per line (2026-08-23: room for the
   inactive badge + publish date without horizontal crowding). */
.mqe-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.mqe-candidate-list .mqe-prodchip--candidate {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* Inactive/discontinued badge on a candidate line. Informational, not a block —
   pre-launch products are legitimately inactive and still confirmable. */
.mqe-prodchip__badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber);
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mqe-prodchip__pub {
  font-size: 11px;
  color: var(--muted);
}

/* Verbatim sheet MOQ text — the QA anchor for constraint flags (2026-08-23).
   pre-line keeps the cell's own line breaks ("500 per style\n150 per color"). */
.mqe-import-context__moqtext { margin: 8px 0; }
.mqe-import-context__raw {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  white-space: pre-line;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

/* Notes textarea on the editor (stores to moq_group_minimums.notes). */
.mqe-notes-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  resize: vertical;
}
.mqe-notes-input:focus { outline: none; border-color: var(--border-hover); }