/* Text Compare - per-tool styles (input pair + diff table). */

.df-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.df-col { display: flex; flex-direction: column; }
.df-results[hidden] { display: none; }
.df-identical {
    margin: 14px 0 0; padding: 14px 16px; border-radius: 12px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
    font-weight: 600; font-size: 0.95rem;
}
.df-identical[hidden] { display: none; }

.df-table {
    margin-top: 14px; border: 1px solid #e6e8eb; border-radius: 12px;
    background: #fff; max-height: 560px; overflow-y: auto;
    font-size: 0.88rem; line-height: 1.5;
}
.df-table[hidden] { display: none; }
.df-row {
    display: grid; grid-template-columns: 44px 1fr 44px 1fr;
    border-bottom: 1px solid #f1f4f7;
}
.df-row:last-child { border-bottom: 0; }
.df-num {
    padding: 5px 8px; text-align: right; color: #94a3b8;
    font-variant-numeric: tabular-nums; font-size: 0.78rem;
    background: #f8fafc; border-right: 1px solid #f1f4f7; user-select: none;
}
.df-cell {
    padding: 5px 10px; white-space: pre-wrap; overflow-wrap: break-word;
    min-width: 0; color: #334155;
}
.df-cell-a { border-right: 1px solid #f1f4f7; }

.df-changed .df-cell { background: #fffbeb; }
.df-removed .df-cell-a { background: #fef2f2; }
.df-removed .df-cell-b { background: #fafafa; }
.df-added .df-cell-b { background: #f0fdf4; }
.df-added .df-cell-a { background: #fafafa; }

/* Word-level marks: red-ish on the original side, green-ish on the new. */
.df-cell mark.ke-changed { border-radius: 4px; padding: 0 2px; }
.df-cell-a mark.ke-changed { background: #fecaca; color: #7f1d1d; }
.df-cell-b mark.ke-changed { background: #bbf7d0; color: #14532d; }

.df-tint-changed .tt-stat-num { color: #b45309; }
.df-tint-added .tt-stat-num { color: #15803d; }
.df-tint-removed .tt-stat-num { color: #b91c1c; }

@media (max-width: 640px) {
    .df-inputs { grid-template-columns: 1fr; }
    .df-row { grid-template-columns: 34px 1fr 34px 1fr; }
    .df-table { font-size: 0.8rem; }
}