/* text-diff: two editors side by side and the line-by-line result table. Family styles in ../text-tools.css. */
.diff-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--matrix-space-16); }
.diff-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.diff-table { width: 100%; border-collapse: collapse; font-family: var(--matrix-font-mono); font-size: 0.875rem; line-height: 1.5; }
.diff-table th { position: sticky; top: 0; background: var(--matrix-surface-subtle); color: var(--matrix-muted); font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); }
.diff-table td { padding: 0 8px; vertical-align: top; }
.diff-table .diff-num { width: 1%; text-align: right; color: var(--matrix-muted); white-space: nowrap; user-select: none; border-right: 1px solid var(--matrix-border); }
.diff-table .diff-marker { width: 1%; text-align: center; user-select: none; }
.diff-table .diff-text { white-space: pre; }
.diff-table tr.diff-delete { background: var(--matrix-danger-background); }
.diff-table tr.diff-insert { background: var(--matrix-success-background); }
.diff-table tr.diff-delete .diff-marker { color: var(--matrix-danger); font-weight: 700; }
.diff-table tr.diff-insert .diff-marker { color: var(--matrix-success); font-weight: 700; }
.diff-table tr.diff-skip td { text-align: center; color: var(--matrix-muted); background: var(--matrix-surface-subtle); font-family: inherit; font-size: var(--matrix-type-caption); padding: 4px 8px; border-block: 1px solid var(--matrix-border); }
.diff-hl-del { background: color-mix(in srgb, var(--matrix-danger) 28%, transparent); border-radius: 2px; }
.diff-hl-add { background: color-mix(in srgb, var(--matrix-success) 28%, transparent); border-radius: 2px; }
@media (max-width: 480px) {
  .diff-table { font-size: 0.8125rem; }
  .diff-table .diff-num, .diff-table th.diff-num { padding: 0 4px; }
  .diff-table th { font-size: var(--matrix-type-caption); }
}

/* the layout switch, and the side-by-side table (Jack's register T37-03): the two texts in columns of equal width, long lines
   wrapped, each side's cells coloured as its line is removed (left) or added (right); on a phone the table scrolls across */
.diff-layouts { margin: var(--matrix-space-12) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-24); }
.diff-layouts legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.diff-table.diff-split { table-layout: fixed; min-width: 36rem; }
.diff-split th.diff-num { width: calc(var(--diff-digits, 6ch) + 16px); }
.diff-split th.diff-marker { width: 2em; }
.diff-split .diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-split th:nth-child(4), .diff-split td:nth-child(4) { border-left: 1px solid var(--matrix-border); }
.diff-split td.diff-del { background: var(--matrix-danger-background); }
.diff-split td.diff-add { background: var(--matrix-success-background); }
.diff-split td.diff-none { background: var(--matrix-surface-subtle); }
.diff-split td.diff-marker.diff-del { color: var(--matrix-danger); font-weight: 700; }
.diff-split td.diff-marker.diff-add { color: var(--matrix-success); font-weight: 700; }