/* Colors follow BRANDBOOK.md: primary #8F5AFF, hover #7142D4, border #DEDEDE, muted text #5F5F5F. */

.diff-pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.diff-pane-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #5F5F5F;
}

/* Each pane is ONE box holding a permanent line-number gutter plus two
   interchangeable content elements: the textarea (edit mode) and the
   rendered highlight view (result mode). The two content elements share
   identical font/padding/wrapping metrics ON PURPOSE - the result swaps in
   exactly where the text already is, so switching modes moves nothing.
   Gutter numbers can't be evenly spaced because long lines wrap, so they
   are positioned in JS from real per-line pixel offsets measured via a
   hidden mirror element (.diff-editor-mirror) - see diff-checker.js. */
.diff-editor {
    display: flex;
    align-items: stretch;
    height: 420px;
    border: 1px solid #DEDEDE;
    border-radius: 0.375rem;
    background: #fff;
    overflow: hidden;
}

.diff-editor:focus-within {
    box-shadow: inset 0 0 0 1px #8F5AFF;
    border-color: #8F5AFF;
}

/* In result mode the box is clickable (click = edit here); hint that. */
.diff-editor-viewing:hover {
    box-shadow: inset 0 0 0 1px #8F5AFF;
    border-color: #8F5AFF;
}

.diff-editor-gutter {
    position: relative;
    flex: 0 0 auto;
    min-width: 2.75em;
    box-sizing: border-box;
    padding: 0 0.6em;
    overflow: hidden;
    background: #FAFAFA;
    border-right: 1px solid #DEDEDE;
    color: #ADADAD;
    text-align: right;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    -webkit-user-select: none;
    user-select: none;
}

.diff-editor-gutter-inner {
    position: relative;
}

.diff-editor-gutter-number {
    position: absolute;
    left: 0;
    right: 0;
}

/* The metrics block shared by the textarea, the rendered view and the
   measuring mirror MUST stay identical across all three rules below:
   any font/padding/wrapping difference between them is a pixel offset the
   same character visibly jumps by when switching modes (textarea <-> view),
   or a misplaced gutter number (mirror). */
.diff-editor-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    resize: none;
    padding: 0 0.75em;
    box-sizing: border-box;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.diff-editor-view {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 0.75em;
    box-sizing: border-box;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: text;
    background: #fff;
}

.diff-editor-view .diff-line {
    min-height: 1.6em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Off-screen twin of the textarea/view content column, used only to measure
   where each logical line lands once wrapped, so the gutter numbers can be
   positioned to match - never shown, never interactive. */
.diff-editor-mirror {
    position: absolute;
    visibility: hidden;
    z-index: -1;
    top: 0;
    left: 0;
    height: auto;
    box-sizing: border-box;
    padding: 0 0.75em;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.diff-editor-mirror > span {
    display: block;
    min-height: 1.6em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-del {
    background-color: #fbdbdb;
    color: #7a1f1f;
    text-decoration: line-through;
    text-decoration-color: #c0392b;
    border-radius: 2px;
}

.diff-add {
    background-color: #d7f5df;
    color: #1e5f31;
    border-radius: 2px;
}

.diff-stat {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    margin: 0 0.25rem 0.25rem 0;
    border-radius: 1rem;
    background: #F1F1F4;
    font-size: 0.8125rem;
}

.diff-stat-add {
    background: #d7f5df;
    color: #1e5f31;
}

.diff-stat-del {
    background: #fbdbdb;
    color: #7a1f1f;
}

#diff-status {
    min-height: 1.25rem;
    font-size: 0.8125rem;
    color: #5F5F5F;
}

@media (max-width: 767.98px) {
    .diff-editor {
        height: 280px;
    }
}