/* The diff result, shared by every page that shows one (Text Compare, Compare JSON): the card, the marks, the line
   rows and their gutter, the split layout and the fold rule. lib/diff-view.js draws the markup. */
.result { unicode-bidi: plaintext; padding: var(--space-3); font-family: var(--font-mono); line-height: var(--leading-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
/* One mark style everywhere, in ink: added = green tint + underline, removed = grey tint + strike. A removed word and
   its replacement sit a hair apart, so "9am 8am" never reads as "9am8am". Line mode adds the coloured edges below. */
.result ins { color: inherit; background: var(--ins-bg); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.result del { color: inherit; background: var(--del-bg); text-decoration: line-through; text-decoration-color: currentColor; }
.result:not(.mode-line) ins, .result:not(.mode-line) del { padding: 0 1px; border-radius: var(--radius-sm); }
.result:not(.mode-line) del + ins { margin-inline-start: 0.5ch; }
.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; }
/* Line mode: every line is a row with one shared gutter (its number, then − or + on changed lines), so indentation
   lines up and wrapped text hangs under the text. The gutter is drawn from data attributes: it is never selected
   or copied, and its empty alternative text (the second content line) keeps screen readers from reading it before
   every line. A changed row carries the tint and the edge (solid for added, dashed for removed). */
.ln { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); padding-left: 4px; }
.ln::before { content: attr(data-n) " " attr(data-mark); content: attr(data-n) " " attr(data-mark) / ""; box-sizing: content-box; min-width: calc(var(--ln-digits, 2) * 1ch + 2ch); padding-left: var(--space-2); text-align: right; white-space: pre; color: var(--ink-muted); -webkit-user-select: none; user-select: none; }
/* Each line finds its own direction, so a right-to-left line reads from the right of its row. */
.ln > * { display: block; min-width: 0; unicode-bidi: plaintext; text-align: start; }
.ln-ins, .ln-del { padding-left: 0; }
.ln-ins { background: var(--ins-bg); border-left: 4px solid var(--ins-edge); }
.ln-del { background: var(--del-bg); border-left: 4px dashed var(--del-edge); }
.ln-ins::before, .ln-del::before { color: var(--ink); }
.result.mode-line ins, .result.mode-line del { display: block; min-width: 0; background: none; text-decoration: none; }
/* Screen-reader labels ("Removed: ") are not part of the text a visitor selects. */
.result .sr-only { -webkit-user-select: none; user-select: none; }
.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(--ink-muted); }
.result .current { outline: 2px solid var(--accent); outline-offset: 2px; }

.split-head, .split-flow, .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.split-head { margin-bottom: var(--space-2); font-family: var(--font); }
.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; }
}
/* Where one side of a change has fewer lines than the other (or none), the gap is a flat filler. */
.result.mode-line .row[data-change] > .cell { background: var(--surface-0); }

/* The unfold control is a quiet divider in the text: a dashed hairline rule with a small pill label in the middle.
   The whole row is the button, so it keeps the full control height as a tap target; hover lifts only the label. */
.result .unfold { display: flex; width: 100%; margin: var(--space-1) 0; padding: 0; border: 0; font-family: var(--font); font-size: var(--text-body-sm); color: var(--ink-muted); }
.result .unfold::before, .result .unfold::after { content: ""; flex: 1; border-top: 1px dashed var(--hairline); }
.unfold-label { padding: var(--space-1) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); line-height: var(--leading-body-sm); transition: background-color var(--motion-fast); }
@media (hover: hover) {
  .result .unfold:hover:not(:disabled) { background: none; }
  .result .unfold:hover .unfold-label { background: var(--surface-2); }
}
/* Folded lines get their own full-width row, so the button spans both columns and survives the phone layout. */
.fold-row > .unfold { grid-column: 1 / -1; }