/* Thin scrollbars in the text areas, as in every tool */
.tool-code textarea {
    scrollbar-width: thin;
}

#input_original, #input_changed {
    height: 300px;
}

@media (max-width: 768px) {
    #input_original, #input_changed {
        height: 200px;
    }
}

/* The result: one grid row per line, original number and text, then changed number and text. A grid row
   gives its cells one height, so the two sides stay aligned at any width. */
.diff-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    overflow: hidden;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    line-height: 1.5;
}

.diff-num,
.diff-text {
    min-height: 1.5em;
    padding: 0 0.5rem;
}

.diff-num {
    color: var(--ck-text-3);
    text-align: right;
    user-select: none;
}

.diff-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The line between the two sides */
.diff-side {
    border-left: var(--bs-border-width) solid var(--ck-border-subtle);
}

.diff-removed {
    background-color: var(--bs-danger-bg-subtle);
}

.diff-added {
    background-color: var(--bs-success-bg-subtle);
}

.diff-empty {
    background-color: var(--bs-secondary-bg);
}

/* A line only one side has, and the changed characters of a paired line, take the stronger colour */
.diff-text.diff-removed.diff-whole,
.diff-char-removed {
    background-color: var(--bs-danger-border-subtle);
}

.diff-text.diff-added.diff-whole,
.diff-char-added {
    background-color: var(--bs-success-border-subtle);
}

.diff-char-removed,
.diff-char-added {
    border-radius: 2px;
}