/* Zero Mile Instruments: compare and merge. ASSEMBLED FILE: do not edit. Written by assemble.mjs from CodeMirror's own
   styles (cut from page.js, 4 style modules) and src/page.css. */
/* CodeMirror styles begin (MIT, (c) Marijn Haverbeke and others) */
.\37c 1.cm-focused {outline: 1px dotted #212121;}
.\37c 1 {position: relative !important; box-sizing: border-box; display: flex !important; flex-direction: column;}
.\37c 1 .cm-scroller {display: flex !important; align-items: flex-start !important; font-family: monospace; line-height: 1.4; height: 100%; overflow-x: auto; position: relative; z-index: 0; overflow-anchor: none;}
.\37c 1 .cm-content[contenteditable=true] {-webkit-user-modify: read-write-plaintext-only;}
.\37c 1 .cm-content {margin: 0; flex-grow: 2; flex-shrink: 0; display: block; white-space: pre; word-wrap: normal; box-sizing: border-box; min-height: 100%; padding: 4px 0; outline: none;}
.\37c 1 .cm-lineWrapping {white-space: pre-wrap; white-space: break-spaces; word-break: break-word; overflow-wrap: anywhere; flex-shrink: 1;}
.\37c 2 .cm-content {caret-color: black;}
.\37c 3 .cm-content {caret-color: white;}
.\37c 1 .cm-line {display: block; padding: 0 2px 0 6px;}
.\37c 1 .cm-layer > * {position: absolute;}
.\37c 1 .cm-layer {user-select: none; position: absolute; left: 0; top: 0; contain: size style;}
.\37c 2 .cm-selectionBackground {background: #d9d9d9;}
.\37c 3 .cm-selectionBackground {background: #222;}
.\37c 2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {background: #d7d4f0;}
.\37c 3.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {background: #233;}
.\37c 1 .cm-cursorLayer {pointer-events: none;}
.\37c 1.cm-focused > .cm-scroller > .cm-cursorLayer {animation: steps(1) cm-blink 1.2s infinite;}
@keyframes cm-blink {50% {opacity: 0;}}
@keyframes cm-blink2 {50% {opacity: 0;}}
.\37c 1 .cm-cursor, .\37c 1 .cm-dropCursor {border-left: 1.2px solid black; margin-left: -0.6px; pointer-events: none;}
.\37c 1 .cm-cursor {display: none;}
.\37c 3 .cm-cursor {border-left-color: #ddd;}
.\37c 1 .cm-selectionHandle {background-color: currentColor; width: 1.5px;}
.\37c 1 .cm-selectionHandle-start::before, .\37c 1 .cm-selectionHandle-end::before {content: ""; background-color: inherit; border-radius: 50%; width: 8px; height: 8px; position: absolute; left: -3.25px;}
.\37c 1 .cm-selectionHandle-start::before {top: -8px;}
.\37c 1 .cm-selectionHandle-end::before {bottom: -8px;}
.\37c 1 .cm-dropCursor {position: absolute;}
.\37c 1.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor {display: block;}
.\37c 1 .cm-iso {unicode-bidi: isolate;}
.\37c 1 .cm-announced {position: fixed; top: -10000px;}
@media print {.\37c 1 .cm-announced {display: none;}}
.\37c 2 .cm-activeLine {background-color: #cceeff44;}
.\37c 3 .cm-activeLine {background-color: #99eeff33;}
.\37c 2 .cm-specialChar {color: red;}
.\37c 3 .cm-specialChar {color: #f78;}
.\37c 1 .cm-gutters {flex-shrink: 0; display: flex; height: 100%; box-sizing: border-box; z-index: 200;}
.\37c 1 .cm-gutters-before {inset-inline-start: 0;}
.\37c 1 .cm-gutters-after {inset-inline-end: 0;}
.\37c 2 .cm-gutters.cm-gutters-before {border-right-width: 1px;}
.\37c 2 .cm-gutters.cm-gutters-after {border-left-width: 1px;}
.\37c 2 .cm-gutters {background-color: #f5f5f5; color: #6c6c6c; border: 0px solid #ddd;}
.\37c 3 .cm-gutters {background-color: #333338; color: #ccc;}
.\37c 1 .cm-gutter {display: flex !important; flex-direction: column; flex-shrink: 0; box-sizing: border-box; min-height: 100%; overflow: hidden;}
.\37c 1 .cm-gutterElement {box-sizing: border-box;}
.\37c 1 .cm-lineNumbers .cm-gutterElement {padding: 0 3px 0 5px; min-width: 20px; text-align: right; white-space: nowrap;}
.\37c 2 .cm-activeLineGutter {background-color: #e2f2ff;}
.\37c 3 .cm-activeLineGutter {background-color: #222227;}
.\37c 1 .cm-panels {box-sizing: border-box; position: sticky; left: 0; right: 0; z-index: 300;}
.\37c 2 .cm-panels {background-color: #f5f5f5; color: black;}
.\37c 1 .cm-panels-top {top: 0;}
.\37c 1 .cm-panels-bottom {bottom: 0;}
.\37c 2 .cm-panels-top {border-bottom: 1px solid #ddd;}
.\37c 2 .cm-panels-bottom {border-top: 1px solid #ddd;}
.\37c 3 .cm-panels {background-color: #333338; color: white;}
.\37c 1 .cm-dialog label {font-size: 80%;}
.\37c 1 .cm-dialog {padding: 2px 19px 4px 6px; position: relative;}
.\37c 1 .cm-dialog-close {position: absolute; top: 3px; right: 4px; background-color: inherit; border: none; font: inherit; font-size: 14px; padding: 0;}
.\37c 1 .cm-tab {display: inline-block; overflow: hidden; vertical-align: bottom;}
.\37c 1 .cm-widgetBuffer {vertical-align: text-top; height: 1em; width: 0; display: inline;}
.\37c 1 .cm-placeholder {color: #888; display: inline-block; vertical-align: top; user-select: none;}
.\37c 1 .cm-highlightSpace {background: radial-gradient(circle at 50% 55%, #aaa 20%, transparent 0) no-repeat; background-size: .4em; background-position: calc(min(50%, 0px)) center;}
.\37c 1 .cm-highlightTab {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>'); background-size: auto 100%; background-position: right 90%; background-repeat: no-repeat;}
.\37c 1 .cm-trailingSpace {background-color: #ff332255;}
.\37c 1 .cm-button {vertical-align: middle; color: inherit; font-size: 70%; padding: .2em 1em; border-radius: 1px;}
.\37c 2 .cm-button:active {background-image: linear-gradient(#b4b4b4, #d0d3d6);}
.\37c 2 .cm-button {background-image: linear-gradient(#eff1f5, #d9d9df); border: 1px solid #888;}
.\37c 3 .cm-button:active {background-image: linear-gradient(#111, #333);}
.\37c 3 .cm-button {background-image: linear-gradient(#393939, #111); border: 1px solid #888;}
.\37c 1 .cm-textfield {vertical-align: middle; color: inherit; font-size: 70%; border: 1px solid silver; padding: .2em .5em;}
.\37c 2 .cm-textfield {background-color: white;}
.\37c 3 .cm-textfield {border: 1px solid #555; background-color: inherit;}
.\37c 4 .cm-line ::selection, .\37c 4 .cm-line::selection {background-color: transparent !important;}
.\37c 4 .cm-line {caret-color: transparent !important;}
.\37c 4 .cm-content :focus::selection, .\37c 4 .cm-content :focus ::selection {background-color: Highlight !important;}
.\37c 4 .cm-content :focus {caret-color: initial !important;}
.\37c 4 .cm-content {caret-color: transparent !important;}
.\37c 5 {color: #404740;}
.\37c 6 {text-decoration: underline;}
.\37c 7 {text-decoration: underline; font-weight: bold;}
.\37c 8 {font-style: italic;}
.\37c 9 {font-weight: bold;}
.\37c a {text-decoration: line-through;}
.\37c b {color: #708;}
.\37c c {color: #219;}
.\37c d {color: #164;}
.\37c e {color: #a11;}
.\37c f {color: #e40;}
.\37c g {color: #00f;}
.\37c h {color: #30a;}
.\37c i {color: #085;}
.\37c j {color: #167;}
.\37c k {color: #256;}
.\37c l {color: #00c;}
.\37c m {color: #940;}
.\37c n {color: #f00;}
.\37c o {color: #10202f; font-weight: 500;}
.\37c p {color: #1d6b45;}
.\37c q {color: #1f5fbf;}
.\37c r {color: #8a5a00;}
.\37c s {color: #6b7884; font-style: italic;}
.\37c t {color: #1f5fbf;}
.\37c u {color: #8a5a00;}
.\37c v {color: #10202f; font-weight: 600;}
.\37c w {font-style: italic;}
.\37c x {color: #1f5fbf; text-decoration: underline;}
.\37c y {color: #5b43a8;}
.\37c z {color: #55636f;}
.\37c 10 {color: #b42318;}
.\37c 11 {color: #10202f; font-weight: 500;}
/* CodeMirror styles end */

/* Compare and merge, the page's own rules (assemble.mjs puts CodeMirror's styles above them in page.css). Layout:
   a sticky toolbar (count, current difference, actions), the two sides in one scroll box with a move column between
   them, the table under the sides at full width. The frame, fonts, colours and shared classes come from site.css;
   only what site.css does not have is here. One light look, as the site. */
:root {
  /* comparison colours: meaning only */
  --chg-bg: #fbf1dc; --chg-word: #f1d58f; --onlyl-bg: #fbe9e7; --onlyr-bg: #e3f2e9; --kept-bg: #eef1f4; --sel: #1f5fbf;
  --move-bg: #efebfa; --move-word: #d8cef3; --move: #5b43a8;
}
/* what the page scrolls to (a focused row, the sides after a row click) stays below the sticky toolbar; --mg-top is
   the toolbar's height, set by the page while the toolbar is sticky */
html { scroll-padding-top: var(--mg-top, 0px); }
.mute { color: var(--mute); }
.btn.sm { min-height: 34px; padding: 4px 11px; font-size: 14px; }
.btn.act { border-color: var(--blue); color: var(--blue); }
.btn.act:disabled { color: var(--mute); border-color: var(--rule); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.chips button { min-height: 30px; padding: 4px 10px; }
.st { font-size: 12.5px; }
.note-block { line-height: 1.7; max-width: 70em; }

/* ---- the tool ---- */
.mg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mg > * { min-width: 0; }
.mg-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: var(--sheet); border: 1px solid var(--ink); display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) auto; }
.mg-bar > div { padding: 10px 14px; min-width: 0; }
.mg-bar > div + div { border-left: 1px solid var(--rule); }
.mg-side { max-width: 400px; }
.mg-big { margin: 0; color: var(--ink); font: 600 26px/1.1 var(--mono); }
.mg-big .of { font: 500 14px var(--sans); color: var(--mute); }
.meter { height: 6px; background: var(--chip); border: 1px solid var(--rule); margin: 8px 0 6px; }
.meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--ok); }
.mg-break { margin: 0; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.lbl { margin: 0; font: 600 11.5px var(--mono); color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
.mg-cur { margin: 2px 0 8px; color: var(--ink); font-size: 13.5px; min-height: 1.5em; overflow-wrap: anywhere; }
.mg-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.opts { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13.5px; }
.opts legend { float: left; font: 600 11.5px var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; padding: 3px 0 0; }
.opts label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; white-space: nowrap; }
.opts input { accent-color: var(--ink); margin: 0; }

.mg-note { margin: 0; padding: 9px 14px; background: var(--note-bg); border: 1px solid var(--rule); font-size: 14.5px; color: var(--ink); }
.mg-note.warn { background: var(--warn-bg); border-color: var(--warn); }
.mg-note.setup { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mg-note.setup p { margin: 0; }

.mg-heads { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); font: 600 12.5px var(--mono); color: var(--ink); margin-bottom: -10px; }
.mg-heads > div { padding: 6px 10px; background: var(--sheet); border: 1px solid var(--ink); border-bottom: 0; min-width: 0; }
.mg-heads > .mid { color: var(--mute); text-align: center; font-weight: 500; border-inline: 0; }
.hd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.hd p { margin: 0; min-width: 0; }
.hd-t { overflow-wrap: anywhere; }
.hd-t strong { font-weight: 600; }
.hd .fname { font-weight: 500; }
.hd .eol { font: 400 12px var(--sans); color: var(--mute); white-space: nowrap; }
.hd-acts { display: flex; gap: 4px; }
.mg-switch { display: none; }
.mg-filehint { margin: 0; font-size: 12.5px; color: var(--mute); }
.mg-scroll { height: min(62vh, 760px); min-height: 280px; overflow: auto; background: var(--sheet); border: 1px solid var(--ink); }
.mg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); align-items: start; min-height: 100%; }
.mg-mid { position: relative; align-self: stretch; background: var(--tint); border-inline: 1px solid var(--rule); }
.mg-ed { min-width: 0; }
.mg-ed .cm-editor { font-size: 13px; }
.mg-ed .cm-editor.cm-focused { outline: 2px solid var(--blue); outline-offset: -2px; }
.mg-ed .cm-scroller { font-family: var(--mono); line-height: 1.45; overflow-y: visible !important; height: auto !important; }
.mg-ed .cm-content { padding-block: 4px; caret-color: var(--ink); }
.mg-ed .cm-gutters { background: var(--tint); border-right: 1px solid var(--rule); color: var(--field); }
.mg-ed .cm-line { padding-left: 6px; }
.is-setup .mg-ed .cm-content:empty::before { content: ''; }
.zm-chg { background: var(--chg-bg); }
.zm-onlyl { background: var(--onlyl-bg); }
.zm-onlyr { background: var(--onlyr-bg); }
.zm-kept { background: var(--kept-bg); }
.zm-move { background: var(--move-bg); }
.zm-mword { background: var(--move-word); border-radius: 1px; }
.zm-spacer.zm-movegap { background-color: var(--move-bg); background-image: repeating-linear-gradient(135deg, var(--move-word) 0 1px, transparent 1px 7px); }
.zm-word { background: var(--chg-word); border-radius: 1px; }
.zm-kept .zm-word { background: #dfe4ea; }
.zm-sel { box-shadow: inset 3px 0 0 var(--sel); }
.zm-spacer { background-color: var(--tint); background-image: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 7px); }
.zm-spacer.zm-sel { box-shadow: inset 3px 0 0 var(--sel); }
.ctl { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; padding-top: 1px; }
.mini { font: 500 12.5px var(--sans); min-height: 22px; min-width: 26px; padding: 0 6px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; line-height: 1; }
.mini:hover { border-color: var(--ink); background: var(--press); }
.ctl .mini { font: 600 13px var(--mono); padding: 0 4px; }
.ctl .mini.on { background: var(--ok); border-color: var(--ok); color: var(--sheet); }
.ctl.is-move .mini { border-color: var(--move); }
.mg-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12.5px; color: var(--mute); }
.sw { display: inline-block; width: 14px; height: 12px; border: 1px solid var(--rule); margin-right: -8px; vertical-align: -1px; }
.sw.chg { background: var(--chg-bg); } .sw.word { background: var(--chg-word); } .sw.onlyl { background: var(--onlyl-bg); } .sw.onlyr { background: var(--onlyr-bg); }
.sw.move { background: var(--move-bg); border-color: var(--move); }
.sw.gap { background-color: var(--tint); background-image: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 5px); } .sw.kept { background: var(--kept-bg); }

.mg-table { background: var(--sheet); border: 1px solid var(--ink); margin-top: 6px; }
.mg-thead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--ink); }
.mg-thead h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.mg-thead h2 .mute { font: 500 13px var(--mono); margin-left: 8px; }
.tscroll { max-height: 460px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th { position: sticky; top: 0; background: var(--sheet); text-align: left; font: 600 12px var(--mono); color: var(--mute); padding: 8px 12px; border-bottom: 1px solid var(--ink); z-index: 1; }
td { padding: 7px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
td.num { font: 500 13px var(--mono); color: var(--mute); width: 3.5em; }
td.mono { font: 400 13px var(--mono); color: var(--ink); }
td .det { display: block; color: var(--mute); font-size: 12px; overflow-wrap: anywhere; }
td.acts { white-space: nowrap; text-align: right; }
td.acts .mini + .mini { margin-left: 4px; }
td.empty { color: var(--mute); padding: 16px 12px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--tint); }
tr.is-sel { box-shadow: inset 3px 0 0 var(--sel); background: var(--press); }
tr.is-undone td { color: var(--mute); }
tr.is-undone td.mono { text-decoration: line-through; text-decoration-color: var(--rule); }
.kind { font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.kind.k-onlyLeft { color: var(--bad); } .kind.k-onlyRight { color: var(--ok); } .kind.k-changed { color: var(--warn); } .kind.k-moved { color: var(--move); }
.blocked { font-size: 12.5px; color: var(--warn); white-space: normal; display: inline-block; max-width: 22em; text-align: left; }
.mg-store { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--ink); }
.mg-store p { margin: 0; flex: 1 1 24em; }
.confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 900px) {
  .mg-bar { grid-template-columns: minmax(0, 1fr); position: static; }
  .mg-bar > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
/* Phone: one column. One side shown at a time with a Left / Right switch; the sides stay level, so switching keeps
   the place. The actions sit in a bar at the bottom of the screen, in reach of a thumb. */
@media (max-width: 700px) {
  body { padding-bottom: 116px; }
  .mg-switch { display: flex; }
  .mg-switch button { min-height: 40px; min-width: 88px; font-size: 14px; }
  .mg-heads, .mg-grid { grid-template-columns: minmax(0, 1fr); }
  .mg-heads > .mid, .mg-mid { display: none; }
  body[data-side="left"] .hd-right, body[data-side="left"] #mg-right, body[data-side="right"] .hd-left, body[data-side="right"] #mg-left { display: none; }
  .mg-scroll { height: 58vh; }
  .hd-acts .mini { min-height: 36px; padding: 0 10px; }
  .mg-current .mg-btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sheet); border-top: 2px solid var(--ink); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mg-current .mg-btns .btn { min-height: 44px; padding: 4px 6px; font-size: 14px; }
  td.acts { white-space: normal; }
  .opts label { white-space: normal; }
  .mg-side { max-width: none; }
  td.acts .mini { min-height: 32px; margin: 2px 0; }
  /* the table: each row on its own lines inside the box (number, state and what; where; then the buttons), so
     nothing lies outside the box (review 2026-10-03, reviewer major 3); the column names are kept for screen readers */
  .tscroll table, .tscroll tbody { display: block; }
  .tscroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tscroll tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 12px; border-bottom: 1px solid var(--rule); }
  .tscroll td { padding: 0; border-bottom: 0; }
  .tscroll td.num { width: auto; }
  .tscroll td.mono, .tscroll td.acts { flex: 1 0 100%; }
  .tscroll td.acts { text-align: left; }
  .tscroll td.empty { padding: 9px 0; }
  .spec dl { grid-template-columns: minmax(0, 1fr); }
  .spec dt { border-right: 0; border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* version 2: the format menu over each side, the Format both sides panel */
.fmt-sel { font: 500 12px var(--sans); color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 2px; max-width: 13em; vertical-align: baseline; }
.ff { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 8px 0; font-size: 14px; }
.ff select { font: 400 13px var(--sans); }
.ff-msg { margin: 6px 0; font-size: 14px; }
.ff-msg.bad { color: var(--bad, #b42318); font-weight: 500; }