/* ═══════════════════════════════════════════════════════════════
   Question Manager — admin surface
   Three views (Design · Assign · Preview) sharing a category strip
   and a header. All tokens come from the v2 system.
   ═══════════════════════════════════════════════════════════════ */

.qm {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
  /* Parent .body grid row is auto-sized — cap to viewport so internal
     scroll regions (tree, props, preview stage) actually scroll. */
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--bg);
}

/* ── Header ─────────────────────────────────────────────────── */
.qm-head {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  padding: 22px 32px 0;
  flex: none;
}
.qm-head-row {
  display: flex; align-items: flex-start; gap: 24px;
  padding-bottom: 18px;
}
.qm-title-block { flex: 1; min-width: 0; }
.qm-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
  margin-bottom: 6px;
}
.qm-crumbs .ms { font-size: 14px; color: var(--ink-4); }

.qm-title {
  font-family: var(--f-sans);
  font-size: 32px; line-height: 1.15; font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em;
  margin: 0;
}
.qm-subtitle {
  font-size: 13px; color: var(--ink-3);
  margin-top: 5px;
  max-width: 720px;
  line-height: 1.5;
}
.qm-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Save status chip */
.qm-save { display: flex; align-items: center; gap: 8px; }
.qm-save-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 500 11.5px var(--f-sans);
  background: var(--surface-sunken);
  color: var(--ink-3);
  border: 1px solid var(--divider);
}
.qm-save-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, transparent); }
.qm-save-chip .ms { font-size: 14px; }
.qm-spin { animation: qm-spin 1.1s linear infinite; }
@keyframes qm-spin { to { transform: rotate(360deg); } }

.qm-save-history {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 5px 9px; border-radius: 6px;
  color: var(--ink-3); font: 500 12px var(--f-sans);
  cursor: pointer;
}
.qm-save-history:hover { background: var(--surface-sunken); color: var(--ink); }
.qm-save-history .ms { font-size: 16px; }

/* Suppress legacy scrollbar arrow buttons (some browsers render them and
   they look like stray ▲▼ controls next to the category tabs row). */
.qm ::-webkit-scrollbar-button,
.qm-cat-tabs::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.qm ::-webkit-scrollbar { width: 8px; height: 8px; }
.qm ::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 4px; }
.qm ::-webkit-scrollbar-track { background: transparent; }

/* ── Category tabs (shared across views) ────────────────────── */
.qm-cat-tabs {
  display: flex; gap: 2px;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.qm-cat-tabs::-webkit-scrollbar { height: 0; }
.qm-cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3);
  font: 500 13px var(--f-sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  white-space: nowrap;
}
.qm-cat-tab .ms { font-size: 17px; }
.qm-cat-tab:hover { color: var(--ink); }
.qm-cat-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.qm-cat-tab.on .ms { font-variation-settings: 'FILL' 1; }
.qm-cat-count {
  font: 500 11px var(--f-mono);
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--ink-4);
}
.qm-cat-tab.on .qm-cat-count { background: var(--accent-soft); color: var(--accent); }
.qm-cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
  margin-left: -2px;
}

/* ════════ DESIGN VIEW ══════════════════════════════════════ */
.qm-design-frame {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.qm-frame-line {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 32px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border-bottom: 1px solid var(--divider-soft);
  font: 500 12px var(--f-sans);
  color: var(--ink-2);
  flex: none;
}
.qm-frame-line .ms { font-size: 16px; color: var(--accent); }

.qm-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
}
.qm-body-2col { grid-template-columns: 1fr 380px; }

/* Tree column */
.qm-tree-col {
  overflow-y: auto;
  padding: 22px 28px 80px;
  min-width: 0;
  background: var(--bg);
}
.qm-tree-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  margin-bottom: 14px;
}
.qm-tree-bar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 7px;
  color: var(--ink-2);
  font: 500 12px var(--f-sans);
  cursor: pointer;
}
.qm-tree-bar-btn:hover { background: var(--bg); color: var(--ink); }
.qm-tree-bar-btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.qm-tree-bar-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.qm-tree-bar-btn .ms { font-size: 16px; }
.qm-tree-bar-sp { flex: 1; }
.qm-tree-legend {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px var(--f-sans); color: var(--ink-4);
}
.qm-tree-legend .qm-life { display: inline-flex; align-items: center; gap: 4px; }

/* ── Lifecycle icons ───────────────────────────────────────── */
.qm-life {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  flex: none;
}
.qm-life .ms { font-size: 16px; }
.qm-life.draft   { background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent); }
.qm-life.changed { background: var(--warn-soft); color: var(--warn); }
.qm-life.pub     { background: var(--ok-soft); color: var(--ok); }
.qm-life.sys     { background: var(--surface-sunken); color: var(--ink-3); }
.qm-tree-legend .qm-life { width: 18px; height: 18px; }
.qm-tree-legend .qm-life .ms { font-size: 13px; }

/* ── Question rows (tree) ──────────────────────────────────── */
.qm-q {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: border-color .1s, box-shadow .1s;
}
.qm-q:hover { border-color: color-mix(in oklch, var(--accent) 35%, var(--divider)); }
.qm-q.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qm-q.sys { background: color-mix(in oklch, var(--ink) 2%, var(--surface)); }
.qm-q-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 8px;
  cursor: pointer;
}
.qm-q-handle {
  width: 18px; height: 26px;
  display: grid; place-items: center;
  color: var(--ink-4);
  cursor: grab; opacity: 0;
  transition: opacity .12s;
  flex: none;
}
.qm-q:hover .qm-q-handle { opacity: 1; }
.qm-q-handle.off { display: none; }
.qm-q-handle .ms { font-size: 16px; }

.qm-q-caret {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-3); flex: none;
  cursor: pointer;
}
.qm-q-caret.hidden { visibility: hidden; }
.qm-q-caret .ms { font-size: 18px; transition: transform .12s; }
.qm-q-caret.open .ms { transform: rotate(90deg); }
.qm-q-caret:hover { background: var(--surface-sunken); color: var(--ink-2); }

.qm-q-type {
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  color: var(--ink-3); flex: none;
}
.qm-q-type .ms { font-size: 16px; }
.qm-q.sel .qm-q-type { background: var(--accent-soft); color: var(--accent); }

.qm-q-label {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--ink);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qm-q-meta {
  display: flex; align-items: center; gap: 6px;
  flex: none;
}
.qm-q-req {
  font: 700 9px var(--f-sans);
  letter-spacing: 0.06em;
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 14%, transparent);
  padding: 2px 6px; border-radius: 4px;
}
.qm-q-scope {
  font: 500 10.5px var(--f-mono);
  color: var(--brand-ink);
  background: var(--brand-ink-soft);
  padding: 2px 6px; border-radius: 4px;
}
.qm-q-cond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
}
.qm-q-cond .ms { font-size: 14px; }
.qm-q-warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--err-soft); color: var(--err);
}
.qm-q-warn .ms { font-size: 14px; }
.qm-q-ann {
  display: inline-flex; align-items: center; gap: 3px;
  font: 500 11px var(--f-sans); color: var(--ink-4);
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-sunken);
}
.qm-q-ann .ms { font-size: 13px; }

.qm-q-actions {
  display: flex; gap: 2px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity .12s;
}
.qm-q:hover .qm-q-actions, .qm-q.sel .qm-q-actions { opacity: 1; }
.qm-q-actions button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); border-radius: 6px;
}
.qm-q-actions button:hover { background: var(--surface-sunken); color: var(--ink); }
.qm-q-actions button .ms { font-size: 16px; }

/* Children: indented, connected by dashed rail */
.qm-q-children {
  position: relative;
  margin: 0 0 0 28px;
  padding: 0 0 6px 14px;
  border-left: 1.5px dashed var(--divider);
}

/* Empty state */
.qm-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-3);
}
.qm-empty .ms { font-size: 32px; color: var(--ink-4); }
.qm-empty h3 { font-size: 16px; margin: 12px 0 6px; color: var(--ink-2); }
.qm-empty p { font-size: 13px; max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* ── Properties panel (right) ─────────────────────────────── */
.qm-props {
  border-left: 1px solid var(--divider);
  background: var(--surface);
  overflow-y: auto;
  min-width: 0;
  display: flex; flex-direction: column;
}
.qm-props-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--divider-soft);
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 2;
}
.qm-props-eyebrow {
  font: 600 10px var(--f-sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4);
  display: flex; align-items: center; gap: 8px;
}
.qm-props-eyebrow .ms { font-size: 14px; }
.qm-props-sys {
  margin-left: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 10px var(--f-sans);
  color: var(--ink-3);
  background: var(--surface-sunken);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: none; letter-spacing: 0;
}
.qm-props-sys .ms { font-size: 12px; }
.qm-props-title {
  font: 500 15px var(--f-sans);
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.35;
}
.qm-props-subtitle {
  font-size: 11px; color: var(--ink-4);
  margin-top: 4px;
}
.qm-props-subtitle code {
  font: 500 10.5px var(--f-mono);
  background: var(--surface-sunken);
  padding: 1px 5px;
  border-radius: 4px;
}

.qm-props-body {
  padding: 18px 22px 40px;
  display: flex; flex-direction: column;
  gap: 18px;
  flex: 1;
}

/* ── Status strip (Draft / Published / Changed) ─────────────
   Slim one-line strip at the top of the panel — no card chrome.
   Uses a left status dot (color-coded) + meta text. The "changed"
   variant is a button that toggles a detail disclosure below. */
.qm-status-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 0;
  font: 500 12px var(--f-sans);
  color: var(--ink-2);
  width: 100%;
  background: transparent; border: 0;
  text-align: left;
}
.qm-status-strip .qm-status-strip-title { color: var(--ink); }
.qm-status-strip-meta {
  color: var(--ink-3);
  font-weight: 400;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qm-status-strip.is-draft   .qm-status-strip-title { color: var(--brand-ink); }
.qm-status-strip.is-changed .qm-status-strip-title { color: var(--warn); }
.qm-status-strip.is-pub     .qm-status-strip-title { color: var(--ok); }
.qm-status-strip.is-button {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px; margin: -4px -6px;
  transition: background 120ms;
}
.qm-status-strip.is-button:hover { background: var(--surface-sunken); }
.qm-status-strip-chev {
  font-size: 16px !important; color: var(--ink-3);
  transition: transform 150ms;
}
.qm-status-strip-chev.is-open { transform: rotate(180deg); }

.qm-status-block {
  display: flex; flex-direction: column; gap: 12px;
}
.qm-status-detail {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--surface-sunken);
  border-radius: 8px;
  font-size: 12px;
}
.qm-status-detail-note {
  display: flex; gap: 8px;
  font-size: 11.5px; color: var(--ink-2);
  line-height: 1.5;
}
.qm-status-detail-note > .ms {
  color: var(--ink-3); flex-shrink: 0; margin-top: 1px;
}
.qm-status-detail-decision {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--divider-soft);
  color: var(--ink-2);
}
.qm-status-detail-decision > .ms { color: var(--ok); font-size: 14px !important; }
.qm-status-discard {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  padding: 0;
  color: var(--ink-3);
  font: 500 11.5px var(--f-sans);
  cursor: pointer;
}
.qm-status-discard:hover { color: var(--warn); }
.qm-status-discard > .ms { font-size: 14px !important; }

/* Diff blocks */
.qm-diff {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: 8px;
}
.qm-diff.inline { background: var(--surface-sunken); }
.qm-diff-row {
  display: grid;
  grid-template-columns: 80px 1fr 22px 1fr;
  gap: 6px;
  align-items: start;
  font-size: 11.5px;
}
.qm-diff-field {
  font: 500 10.5px var(--f-mono);
  color: var(--ink-4);
  padding-top: 2px;
  text-transform: lowercase;
}
.qm-diff-from {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--err);
  line-height: 1.45;
}
.qm-diff-to {
  color: var(--ink); font-weight: 500;
  line-height: 1.45;
}
.qm-diff-arrow { color: var(--ink-4); display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.qm-diff-arrow .ms { font-size: 14px; }

/* Impact block */
.qm-impact {
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.qm-impact-head {
  display: flex; align-items: center; gap: 6px;
  font: 500 12px var(--f-sans); color: var(--ink-2);
}
.qm-impact-head .ms { font-size: 16px; color: var(--ink-3); }
.qm-impact-help { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; }
.qm-impact-decision {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px var(--f-sans);
  color: var(--ink-2);
  background: var(--ok-soft);
  padding: 6px 10px; border-radius: 6px;
}
.qm-impact-decision .ms { font-size: 16px; }

.qm-discard-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--ink-2);
  font: 500 12px var(--f-sans);
  cursor: pointer;
}
.qm-discard-btn:hover { background: var(--surface); border-color: var(--err); color: var(--err); }
.qm-discard-btn .ms { font-size: 14px; }

/* Conditional card */
.qm-cond-card {
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--accent) 4%, var(--surface));
}
.qm-cond-head {
  display: flex; align-items: center; gap: 6px;
  font: 500 12px var(--f-sans);
  color: var(--accent);
}
.qm-cond-head .ms { font-size: 16px; }
.qm-cond-body { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* System note */
.qm-sys-note {
  display: flex; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-sunken);
  border: 1px dashed var(--divider);
  border-radius: 10px;
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.55;
}
.qm-sys-note .ms { color: var(--ink-3); font-size: 18px; flex: none; }

/* ── Field controls ───────────────────────────────────────── */
.qm-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.qm-field-label {
  font: 500 11px var(--f-sans);
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 6px;
}
.qm-input, .qm-textarea, .qm-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--divider);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px var(--f-sans);
  resize: none;
  outline: none;
}
.qm-input:focus, .qm-textarea:focus, .qm-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qm-textarea { font: 400 12.5px var(--f-sans); line-height: 1.5; min-height: 60px; }

/* Type chooser */
.qm-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.qm-type-opt {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 9px 4px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  color: var(--ink-2);
  font: 500 10px var(--f-sans);
  transition: all .1s;
}
.qm-type-opt:hover { border-color: var(--accent); color: var(--ink); }
.qm-type-opt.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qm-type-opt .ms { font-size: 17px; }
.qm-type-opt.on .ms { font-variation-settings: 'FILL' 1; }

/* Toggle rows — sibling settings inside the Behaviour section.
   No hairline between them; rely on whitespace + label/desc rhythm,
   matching the section-by-whitespace pattern used everywhere else. */
.qm-toggle-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
}
.qm-toggle-row + .qm-toggle-row { padding-top: 14px; }
.qm-toggle-row:first-of-type { padding-top: 0; }
.qm-toggle-info { flex: 1; min-width: 0; }
.qm-toggle-label { font: 500 13px var(--f-sans); color: var(--ink); }
.qm-toggle-desc {
  font-size: 11.5px; color: var(--ink-4);
  line-height: 1.45;
  margin-top: 2px;
}
.qm-switch {
  width: 34px; height: 20px; border-radius: 20px;
  background: var(--divider);
  position: relative; cursor: pointer; flex: none;
  transition: background .15s;
  margin-top: 2px;
}
.qm-switch::after {
  content: ''; 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: left .15s;
}
.qm-switch.on { background: var(--accent); }
.qm-switch.on::after { left: 16px; }

/* Options editor */
.qm-opts { display: flex; flex-direction: column; gap: 4px; }
.qm-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 7px;
}
.qm-opt:hover { border-color: var(--accent); }
.qm-opt-drag { width: 18px; color: var(--ink-4); cursor: grab; display: grid; place-items: center; }
.qm-opt-drag .ms { font-size: 14px; }
.qm-opt input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: 400 12.5px var(--f-sans); color: var(--ink);
  padding: 2px 0;
}
.qm-opt-x {
  width: 22px; height: 22px; border: 0; background: transparent;
  display: grid; place-items: center;
  color: var(--ink-4); cursor: pointer; border-radius: 5px;
}
.qm-opt-x:hover { background: var(--err-soft); color: var(--err); }
.qm-opt-x .ms { font-size: 14px; }
.qm-opts-add {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent; border: 1.5px dashed var(--divider); border-radius: 7px;
  color: var(--ink-3); font: 500 12px var(--f-sans);
  cursor: pointer; align-self: flex-start;
}
.qm-opts-add:hover { border-color: var(--accent); color: var(--accent); }
.qm-opts-add .ms { font-size: 14px; }

/* ── Versions timeline ────────────────────────────────────── */
.qm-versions {
  margin-top: 8px;
  border-top: 1px solid var(--divider-soft);
  padding-top: 16px;
}
.qm-versions-head {
  display: flex; align-items: center; gap: 6px;
  font: 600 10px var(--f-sans);
  color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.qm-versions-head .ms { font-size: 14px; }
.qm-versions-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.qm-ver {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: 7px;
}
.qm-ver.current { border-color: var(--ok); background: color-mix(in oklch, var(--ok) 4%, var(--surface)); }
.qm-ver-num {
  font: 600 10px var(--f-mono); color: var(--ink-3);
  background: var(--surface-sunken);
  padding: 2px 6px; border-radius: 4px;
  align-self: start;
  text-align: center;
}
.qm-ver.current .qm-ver-num { background: var(--ok-soft); color: var(--ok); }
.qm-ver-body { min-width: 0; }
.qm-ver-note { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.qm-ver-meta { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.qm-ver-restore {
  background: transparent; border: 0;
  font: 500 11px var(--f-sans); color: var(--accent);
  cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  align-self: center;
}
.qm-ver-restore:hover { background: var(--accent-soft); }

/* Empty right panel */
.qm-props-empty {
  padding: 40px 24px;
  text-align: center; color: var(--ink-3);
}
.qm-props-empty .ms { font-size: 32px; color: var(--ink-4); }
.qm-props-empty h4 { font: 500 14px var(--f-sans); color: var(--ink-2); margin: 10px 0 4px; }
.qm-props-empty p { font-size: 12px; line-height: 1.5; max-width: 240px; margin: 0 auto; }

/* ════════ ASSIGN VIEW ══════════════════════════════════════ */
.qm-assign-frame {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 22px 32px 120px;
}

.qm-stage-head {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.qm-stage-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qm-stage-pick-note {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 11px var(--f-sans); color: var(--ink-4);
  padding: 4px 8px; border-radius: 999px;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--divider);
}
.qm-stage-pick-note .ms { font-size: 14px; }
.qm-stage-pick label, .qm-stage-filter label, .qm-prev-mode label {
  font: 500 11px var(--f-sans);
  color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.qm-stage-pick select {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--divider);
  border-radius: 7px;
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none'/></svg>") right 10px center / 10px 6px no-repeat;
  font: 500 13px var(--f-sans);
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  min-width: 220px;
}
.qm-stage-filter { display: flex; align-items: center; gap: 10px; }
.qm-seg {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: 7px;
  padding: 2px;
  border: 1px solid var(--divider);
}
.qm-seg button {
  padding: 5px 11px; background: transparent; border: 0;
  cursor: pointer;
  font: 500 12px var(--f-sans); color: var(--ink-3);
  border-radius: 5px;
}
.qm-seg button:hover { color: var(--ink); }
.qm-seg button.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.qm-stage-publish-when {
  margin-left: auto;
  font-size: 12px; color: var(--ink-4);
}

.qm-assign-info, .qm-cross-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.qm-assign-info {
  background: color-mix(in oklch, var(--accent) 5%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  color: var(--ink-2);
}
.qm-assign-info .ms { color: var(--accent); font-size: 18px; flex: none; }
.qm-cross-notice {
  background: var(--brand-ink-soft);
  border: 1px solid color-mix(in oklch, var(--brand-ink) 30%, transparent);
  color: var(--ink-2);
}
.qm-cross-notice .ms { color: var(--brand-ink); font-size: 18px; flex: none; }

/* Assign tree */
.qm-assign-tree {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
}
.qm-arow {
  display: grid;
  grid-template-columns: 22px 24px 28px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--divider-soft);
  position: relative;
  transition: background .1s;
}
.qm-arow:last-child { border-bottom: 0; }
.qm-arow:hover { background: var(--surface-sunken); }
.qm-arow.is-added   { background: color-mix(in oklch, var(--ok) 6%, var(--surface)); }
.qm-arow.is-added::before  { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--ok); }
.qm-arow.is-removed { background: color-mix(in oklch, var(--err) 6%, var(--surface)); }
.qm-arow.is-removed::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--err); }
.qm-arow.is-removed .qm-arow-label { text-decoration: line-through; color: var(--ink-3); }
.qm-arow.is-off .qm-arow-label, .qm-arow.is-off .qm-arow-type { opacity: 0.5; }

.qm-arow-prefix {
  text-align: center;
  font: 700 14px var(--f-mono);
}
.qm-prefix.added   { color: var(--ok); }
.qm-prefix.removed { color: var(--err); }

.qm-acheck {
  width: 20px; height: 20px;
  border: 1.5px solid var(--divider);
  border-radius: 5px;
  background: var(--bg);
  display: grid; place-items: center;
  cursor: pointer;
  color: transparent;
  transition: all .1s;
}
.qm-acheck:hover { border-color: var(--accent); }
.qm-acheck.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qm-acheck.indet { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qm-acheck.locked { background: var(--surface-sunken); border-color: var(--divider); color: var(--ink-3); cursor: not-allowed; }
.qm-acheck .ms { font-size: 14px; }

.qm-arow-type {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--surface-sunken);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.qm-arow-type .ms { font-size: 14px; }
.qm-arow-label {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.qm-arow-meta {
  display: flex; align-items: center; gap: 8px;
}
.qm-changed-dot, .qm-warn, .qm-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
}
.qm-changed-dot { background: var(--warn-soft); color: var(--warn); }
.qm-warn        { background: var(--err-soft);  color: var(--err); }
.qm-lock        { background: var(--surface-sunken); color: var(--ink-4); }
.qm-changed-dot .ms, .qm-warn .ms, .qm-lock .ms { font-size: 14px; }
.qm-arow-ann {
  font: 500 11px var(--f-sans); color: var(--ink-4);
  padding: 2px 7px; border-radius: 4px;
  background: var(--surface-sunken);
}

/* Sticky bottom action bar */
.qm-assign-bar {
  position: sticky; bottom: 0;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.qm-assign-bar-stats {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  flex: 1; min-width: 0;
}
.qm-assign-bar-stats b { color: var(--ink); font-weight: 600; }
.qm-bar-sep { color: var(--ink-4); }
.qm-bar-pending {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--warn);
  font-weight: 500;
}
.qm-bar-pending .ms { font-size: 16px; }
.qm-bar-clean {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ok);
}
.qm-bar-clean .ms { font-size: 16px; }
.qm-assign-bar-actions { display: flex; gap: 8px; flex: none; }

/* Stage history strip */
.qm-stage-history { margin-top: 26px; }
.qm-stage-history-head {
  display: flex; align-items: center; gap: 6px;
  font: 600 10px var(--f-sans);
  color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.qm-stage-history-head .ms { font-size: 14px; }
.qm-stage-history-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.qm-stage-history-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: 8px;
}
.qm-update-num {
  font: 500 11px var(--f-mono);
  color: var(--ink-3);
  background: var(--surface-sunken);
  padding: 4px 8px; border-radius: 5px;
  align-self: start;
  text-align: center;
}
.qm-update-note { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.qm-update-meta { font-size: 11px; color: var(--ink-4); margin-top: 3px; }

/* ════════ PUBLISH WIZARD (modal) ═════════════════════════════ */
.qm-modal-bg {
  position: fixed; inset: 0;
  background: rgba(20, 20, 28, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 40px 20px;
}
.qm-modal {
  width: 100%; max-width: 760px;
  max-height: 90vh;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qm-modal-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: flex-start; gap: 12px;
}
.qm-modal-head > div:first-child { flex: 1; }
.qm-modal-title {
  font: 500 18px var(--f-sans);
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 4px 0 0;
}
.qm-modal-x {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 7px;
  color: var(--ink-3); cursor: pointer;
}
.qm-modal-x:hover { background: var(--surface-sunken); color: var(--ink); }
.qm-modal-x .ms { font-size: 18px; }

.qm-wiz-steps {
  list-style: none; padding: 14px 22px;
  margin: 0;
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--divider-soft);
  background: var(--surface-sunken);
}
.qm-wiz-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 12px var(--f-sans);
  color: var(--ink-4);
}
.qm-wiz-step + .qm-wiz-step::before {
  content: ''; width: 16px; height: 1px; background: var(--divider);
  margin-right: 4px;
}
.qm-wiz-step.on   { color: var(--accent); background: var(--accent-soft); }
.qm-wiz-step.done { color: var(--ok); }
.qm-wiz-step-n {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 10px var(--f-mono);
  background: var(--surface);
  color: var(--ink-3);
}
.qm-wiz-step.on .qm-wiz-step-n { background: var(--accent); color: #fff; }
.qm-wiz-step.done .qm-wiz-step-n { background: var(--ok); color: #fff; }
.qm-wiz-step.done .qm-wiz-step-n .ms { font-size: 13px; }

.qm-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 16px;
}
.qm-modal-lede {
  font-size: 13.5px; color: var(--ink-2);
  margin: 0; line-height: 1.55;
}
.qm-modal-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--divider);
  display: flex; gap: 8px; align-items: center;
}

/* Wizard groups */
.qm-wiz-group {
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface);
}
.qm-wiz-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider-soft);
  font: 500 12px var(--f-sans);
  color: var(--ink-2);
}
.qm-wiz-group-head .ms { font-size: 16px; }
.qm-wiz-q {
  padding: 12px 14px;
  border-top: 1px solid var(--divider-soft);
}
.qm-wiz-q:first-of-type { border-top: 0; }
.qm-wiz-q-name { font: 500 13px var(--f-sans); color: var(--ink); }
.qm-wiz-q-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.5; }

.qm-wiz-decide {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 10px;
}
.qm-radio-row {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.qm-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg);
}
.qm-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.qm-radio input { margin-top: 2px; flex: none; }
.qm-radio-title { font: 500 12.5px var(--f-sans); color: var(--ink); }
.qm-radio-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.5; }
.qm-radio-sub a { color: var(--accent); cursor: pointer; }

.qm-wiz-result {
  background: color-mix(in oklch, var(--ok) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--ok) 30%, transparent);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.qm-wiz-result-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.qm-wiz-result-line .ms { font-size: 16px; }

/* Draft history modal entries */
.qm-snap-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.qm-snap {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--divider-soft);
  border-radius: 8px;
}
.qm-snap-when { font: 500 12px var(--f-sans); color: var(--ink-2); }
.qm-snap-summary { font: 500 13px var(--f-sans); color: var(--ink); }
.qm-snap-sample { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.4; }

/* ════════ PREVIEW VIEW ═════════════════════════════════════ */
.qm-preview-frame {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qm-preview-bar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex: none;
}
.qm-preview-bar-left {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.qm-preview-bar-right {
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}
.qm-preview-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--divider);
  color: var(--ink-2);
  font: 600 11px var(--f-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qm-preview-eyebrow .ms { font-size: 14px; color: var(--ink-3); }
.qm-prev-mode { display: flex; align-items: center; gap: 10px; }
.qm-prev-publish { margin-left: 0; }

.qm-preview-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 32px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: none;
}
.qm-preview-banner.is-pub {
  background: color-mix(in oklch, var(--ok) 5%, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--ok) 25%, transparent);
}
.qm-preview-banner.is-pub .ms { color: var(--ok); font-size: 18px; }
.qm-preview-banner.is-changed {
  background: color-mix(in oklch, var(--warn) 8%, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--warn) 30%, transparent);
}
.qm-preview-banner.is-changed .ms { color: var(--warn); font-size: 18px; }
.qm-preview-banner b { color: var(--ink); font-weight: 600; }

.qm-preview-stage {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--bg);
}

/* ── Buttons (shared) ──────────────────────────────────────── */
.qm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 13px var(--f-sans);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface);
}
.qm-btn .ms { font-size: 16px; }
.qm-btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.qm-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.qm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.qm-btn-outline {
  background: transparent; color: var(--ink-2); border-color: var(--divider);
}
.qm-btn-outline:hover { background: var(--surface-sunken); color: var(--ink); border-color: var(--ink-3); }
.qm-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
.qm-btn-ghost {
  background: transparent; color: var(--ink-3); border-color: transparent;
}
.qm-btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); }

/* ── Sidenav "Questions" sub-group (preserved from prior) ──── */
.sn-sub {
  margin: 2px 0 6px 0;
  padding-left: 22px;
  position: relative;
}
.sn-sub::before {
  content: ""; position: absolute;
  left: 22px; top: 2px; bottom: 4px;
  width: 1.5px;
  background: var(--divider);
}
.sn-sub .sn-item {
  padding: 7px 12px 7px 16px;
  font-size: 12.5px;
  gap: 10px;
  color: var(--ink-3);
}
.sn-sub .sn-item .ms { font-size: 16px; }
.sn-sub .sn-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.sn-expand {
  margin-left: auto;
  color: var(--ink-4);
  transition: transform .12s;
  display: grid; place-items: center;
}
.sn-expand .ms { font-size: 16px; }
.sn-item.expanded .sn-expand { transform: rotate(90deg); color: var(--ink-2); }
.sn-item.parent-toggle { color: var(--ink-2); }
.sn-item.parent-toggle.has-active-child { color: var(--accent); }
.sn-item.parent-toggle.has-active-child .ms { color: var(--accent); }