/* ========================================================
   Diff — unified and side-by-side diff viewers.
   ======================================================== */

/* Diff container */
.diff-viewer {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--spacing-sm) 0;
}

.diff-viewer .diff-header {
  background: var(--c-surface-hover);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--c-text-secondary);
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-family);
}

/* Unified diff line */
.diff-line {
  padding: 2px var(--spacing-md);
  white-space: pre;
  line-height: 1.5;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.diff-line.add {
  background: #dcfce7;
  color: #15803d;
}

.diff-line.remove {
  background: #fee2e2;
  color: #dc2626;
}

.diff-line.context {
  color: var(--c-text-secondary);
}

.diff-line.header {
  background: #f0f4ff;
  color: var(--c-accent);
  font-weight: 600;
}

.diff-line .line-number {
  display: inline-block;
  width: 40px;
  text-align: right;
  margin-right: var(--spacing-md);
  color: var(--c-text-tertiary);
  user-select: none;
}

/* Side-by-side diff */
.diff-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.diff-side-by-side .diff-pane {
  overflow-x: auto;
}

.diff-side-by-side .diff-pane:first-child {
  border-right: 1px solid var(--c-border);
}

.diff-side-by-side .diff-pane-header {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--c-surface-hover);
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-family);
}

/* Inline change highlight */
.diff-inline-add { background: #bbf7d0; }
.diff-inline-remove { background: #fecaca; }

/* Diff stats */
.diff-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.diff-stats .stat-add { color: #15803d; }
.diff-stats .stat-remove { color: #dc2626; }
.diff-stats .stat-file { color: var(--c-text-secondary); }