/*
 * Conflict sheet (templates/macros/record_conflict.html): each field as two
 * labelled boxes, what the record says now and what the user typed, with the
 * words that differ marked in each so the two read as a comparison.
 * Rows are built by static/js/controllers/esm/record_conflict_controller.js.
 */

.record-conflict-field + .record-conflict-field {
    margin-top: 1rem;
}

.record-conflict-field-label {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.record-conflict-value {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.record-conflict-value + .record-conflict-value {
    margin-top: 0.5rem;
}

.record-conflict-value-caption {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.record-conflict-value--yours {
    border-color: var(--bs-success);
}

/* Words only in the current value, and words only in the user's. */
.record-conflict-value del {
    text-decoration: line-through;
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-radius: 0.2rem;
}

.record-conflict-value ins {
    text-decoration: none;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border-radius: 0.2rem;
}