.panes { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .panes { grid-template-columns: 1fr 1fr; } }
.pane-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.pane-head label { font-weight: 700; }
.pane-stats { margin: var(--space-1) 0 0; font-size: var(--text-small); color: var(--text-muted); }

.options { margin: 0 0 var(--space-4); padding: 0 var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.options summary { display: flex; align-items: center; min-height: var(--control-height); font-weight: 700; cursor: pointer; }
.options fieldset { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; padding: var(--space-1) 0 var(--space-2); border: 0; }
.options legend { float: left; width: 100%; margin-bottom: var(--space-1); font-size: var(--text-small); font-weight: 700; color: var(--text-muted); }
.options label { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); }
.options label.wide { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 32rem; min-height: 0; font-weight: 700; }

.result-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; background: var(--bg); }
.result-head h2, .result-head p { margin: 0; }
.result-head p { color: var(--text-muted); }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-left: auto; }

.result { padding: var(--space-2); font-family: var(--font-mono); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.result ins { color: inherit; background: var(--ins-bg); text-decoration: underline; text-decoration-color: var(--ins-edge); text-underline-offset: 3px; }
.result del { color: inherit; background: var(--del-bg); text-decoration: line-through; text-decoration-color: var(--del-edge); }
.result ins .em { background: var(--ins-em); }
.result del .em { background: var(--del-em); }
/* A change wraps whole lines in line mode, so it must be a block too; an inline wrapper around block lines
   gives the .current outline nothing to draw around. */
.result.mode-line .chg { display: block; }
.result.mode-line ins, .result.mode-line del { display: block; padding-left: var(--space-1); text-decoration: none; }
.result.mode-line ins { border-left: 4px solid var(--ins-edge); }
.result.mode-line del { border-left: 4px dashed var(--del-edge); }
.result.mode-line ins .em { text-decoration: underline; text-underline-offset: 3px; }
.result.mode-line del .em { text-decoration: line-through; }
.result [data-ws="space"] { outline: 1px dashed currentColor; }
.result [data-ws="newline"]::after { content: "↵"; color: var(--text-muted); }
.result .current { outline: 2px solid var(--focus); outline-offset: 2px; }

.split-head, .split-flow, .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.split-head { margin-bottom: var(--space-1); font-family: var(--font); font-size: var(--text-small); font-weight: 700; color: var(--text-muted); }
.cell { min-width: 0; }
@media (max-width: 639px) {
  .split-flow, .row { grid-template-columns: 1fr; }
  .split-head { display: none; }
  /* Stacked split rows: show unchanged lines once (the changed side), not twice. */
  .row:not([data-change]) > .cell:first-child { display: none; }
}

.history { margin-top: var(--space-5); }
.history-toggle { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); }
.badge { padding: 2px var(--space-1); font-size: var(--text-small); font-weight: 400; color: var(--text-muted); vertical-align: middle; border: 1px solid var(--border); border-radius: var(--radius); }
.hint { font-size: var(--text-small); color: var(--text-muted); }
#history-list { padding: 0; list-style: none; }
#history-list li { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; border-bottom: 1px solid var(--border); }
#history-list .history-load { flex: 1; justify-content: flex-start; text-align: left; }
/* The unfold control is an ordinary secondary button, stretched across the result. */
.result .unfold { display: flex; width: 100%; margin: var(--space-1) 0; font-family: var(--font); font-size: var(--text-small); color: var(--text-muted); }
.result .unfold-spacer { display: block; min-height: var(--control-height); margin: var(--space-1) 0; }
.shortcut-hint { font-size: var(--text-small); color: var(--text-muted); }
/* Keyboard shortcuts mean nothing without a physical keyboard: hide every hint on touch-first devices. */
@media (pointer: coarse) { .kbd-hint { display: none; } }