/* Scoped functional styles for the Text Diff Checker page. */

.txtdiff-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.txtdiff-mono-size {
  font-size: 13px;
  line-height: 1.45;
}

.txtdiff-diff-pane {
  overflow: auto;
}

.txtdiff-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  border-bottom: 1px solid #f3f4f6;
}

.txtdiff-row--empty {
  background: repeating-linear-gradient(
    -45deg,
    #fafafa,
    #fafafa 6px,
    #f7f7f7 6px,
    #f7f7f7 12px
  );
}

.txtdiff-gutter {
  border-right: 1px solid #f3f4f6;
  padding: 10px 12px;
  text-align: right;
  color: #9ca3af;
  user-select: none;
}

.txtdiff-code {
  padding: 10px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.txtdiff-row--same .txtdiff-code {
  background: #ffffff;
}

.txtdiff-row--remove .txtdiff-code,
.txtdiff-row--remove .txtdiff-gutter {
  background: #fef2f2;
}

.txtdiff-row--add .txtdiff-code,
.txtdiff-row--add .txtdiff-gutter {
  background: #ecfdf5;
}

.txtdiff-row--change .txtdiff-code,
.txtdiff-row--change .txtdiff-gutter {
  background: #fffbeb;
}

.txtdiff-token--removed {
  background: #fecaca;
  color: #7f1d1d;
  border-radius: 4px;
}

.txtdiff-token--added {
  background: #bbf7d0;
  color: #14532d;
  border-radius: 4px;
}

.txtdiff-empty-state {
  padding: 48px 24px;
  text-align: center;
  color: #6b7280;
}