/* ============================================================================
   Merge UI — scoped styles for the new 3-step merge flow.
   Uses TMV design tokens; no decorative single-side borders.
   ============================================================================ */

/* ---- General flow modal ---- */

.merge-flow-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.merge-flow-instruction {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

/* ---- STEP 1: Search results & candidate radios ---- */

.merge-flow-search input {
  width: 100%;
}

/* ---- Scalar diff table (used by the consolidated merge-preview modal) ---- */

.merge-scalar-table {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr 24px 1fr auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
}

.merge-scalar-row {
  display: contents;
}

.merge-scalar-row.has-conflict .merge-scalar-source,
.merge-scalar-row.has-conflict .merge-scalar-target {
  font-weight: 600;
}

.merge-scalar-label {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  padding: var(--space-2) 0;
}

.merge-scalar-source,
.merge-scalar-target {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  word-break: break-word;
}

.merge-scalar-arrow {
  text-align: center;
  color: var(--color-text-muted);
}

.merge-scalar-keep {
  color: var(--color-text);
}

.merge-scalar-discarded {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.merge-scalar-toggle {
  font-size: 0.75rem;
  padding: 2px 6px;
}

/* ---- Mobile (< 768px) ---- */

@media (max-width: 767px) {
  .merge-scalar-table {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .merge-scalar-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .merge-scalar-row:last-child {
    border-bottom: none;
  }

  .merge-scalar-arrow {
    display: none;
  }

  .merge-scalar-source::before {
    content: 'Source: ';
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-right: var(--space-2);
  }

  .merge-scalar-target::before {
    content: 'Target: ';
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-right: var(--space-2);
  }
}
/* ============================================================================
   WS-C.2 — Consolidated merge preview (replaces step2 + step3 wizard)
   ============================================================================ */

.merge-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.merge-preview-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.merge-preview-pair-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.merge-preview-pair-label {
  flex-shrink: 0;
  min-width: 60px;
}

.merge-preview-pair-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Server merge warnings (archived-target rehab, group gap-fill) — audit C10.
   Subtle warning tint + icon, no border-left accent (matches .merge-preview-pair). */
.merge-preview-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-tint);
  border-radius: var(--radius-md);
}

.merge-preview-warning-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm, 0.875rem);
}

.merge-preview-warning-row i {
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.merge-preview-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.merge-preview-sources ul {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.merge-preview-sources li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.merge-preview-conflicts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.merge-preview-loading {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-secondary);
}

.merge-preview-error {
  padding: var(--space-3);
  color: var(--color-danger);
  font-size: 0.9375rem;
}