.split-pane {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

.diff-col-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.diff-stat-count {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.diff-stat-value {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
}

.diff-stat-removed .diff-stat-value {
    color: var(--red-700);
}

.diff-stat-added .diff-stat-value {
    color: var(--emerald-700);
}

.code-editor.is-diff-view .code-scroll > .code-display,
.code-editor.is-diff-view .code-scroll-content > .code-display {
    z-index: 0;
}

.code-editor.is-diff-view .code-input-overlay {
    z-index: 1;
}

.code-editor .code-line.diff-line-remove {
    background-color: color-mix(in oklab, var(--red-500) 18%, var(--surface));
}

.code-editor .code-line.diff-line-add {
    background-color: color-mix(in oklab, var(--emerald-500) 18%, var(--surface));
}

.code-editor .code-line.diff-line-empty {
    opacity: 0.35;
}

@media (width < 48rem) {
    .split-pane {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .controls-column {
        order: 2;
        width: 100%;
    }

    .split-pane-col:first-child {
        order: 1;
    }

    .split-pane-col:last-child {
        order: 3;
    }

    .code-fill {
        min-height: 14rem;
    }
}