/* Zero Mile Instruments: format and colour. ASSEMBLED FILE: do not edit. Written by assemble.mjs from CodeMirror's own
   styles (cut from page.js, 6 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 1 .cm-foldPlaceholder {background-color: #eee; border: 1px solid #ddd; color: #888; border-radius: .2em; margin: 0 1px; padding: 0 1px; cursor: pointer;}
.\37c 1 .cm-foldGutter span {padding: 0 1px; cursor: pointer;}
.\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 1.cm-focused .cm-matchingBracket {background-color: #328c8252;}
.\37c 1.cm-focused .cm-nonmatchingBracket {background-color: #bb555544;}
.\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 */

/* Format and colour, the page's own rules (assemble.mjs puts CodeMirror's styles above them in page.css). Layout: a
   toolbar (actions, options, files), a status row (format with its reason, path at the cursor), the editor, the trust
   line, the how-it-works sheet. 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. */
.mute { color: var(--mute); }
.lbl { font: 500 12.5px var(--mono); color: var(--mute); }
.btn.sm { min-height: 34px; padding: 4px 11px; font-size: 14px; }

/* ---- the tool ---- */
.fm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--sheet); border: 1px solid var(--ink); }
.fm > * { min-width: 0; }
.fm-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--ink); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--sheet); }
.fm-group { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.fm-files { margin-left: auto; }
.fm-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.fm-opt select, .fm-detect select { min-height: 34px; padding: 2px 6px; border: 1px solid var(--rule); background: var(--sheet); font-size: 14px; color: var(--ink); }
.fm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.fm-check input { width: 16px; height: 16px; accent-color: var(--ink); }
.fm-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--rule); background: var(--tint); font-size: 14px; }
.fm-detect { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.fm-reason { color: var(--body); min-width: 0; overflow-wrap: anywhere; }
.st.high { color: var(--ok); } .st.medium { color: var(--warn); } .st.low { color: var(--mute); }
.fm-path { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fm-path code { font-size: 13px; color: var(--ink); background: var(--code); padding: 2px 6px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.fm-mini { min-height: 28px; padding: 2px 8px; font-size: 13px; }
.fm-note { padding: 8px 14px; font-size: 14px; background: var(--note-bg); color: var(--note); border-bottom: 1px solid var(--rule); }
.fm-msg { padding: 8px 14px; font-size: 14px; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.fm-msg.ok { background: var(--ok-bg); color: var(--ok); }
.fm-msg.bad { background: var(--bad-bg); color: var(--bad); }
.fm-msg.warn { background: var(--warn-bg); color: var(--warn); }
.fm-msg .btn { color: inherit; border-color: currentColor; }
.fm-editor { height: min(68vh, 760px); min-height: 320px; }
.fm-editor .cm-editor { height: 100%; font-size: 13.5px; }
.fm-editor .cm-editor.cm-focused { outline: 2px solid var(--blue); outline-offset: -2px; } /* as the merge page's editors (release 11 review, reviewer minor 2) */
.fm-editor .cm-scroller { font-family: var(--mono); line-height: 1.55; }
.fm-editor .cm-gutters { background: var(--tint); border-right: 1px solid var(--rule); color: var(--field); }
.fm-editor .cm-activeLine { background: #f3f6fa; }
.fm-editor .cm-activeLineGutter { background: var(--chip); color: var(--ink); }
.fm-editor .cm-foldGutter span { color: var(--mute); }
.fm-editor .cm-foldPlaceholder { background: var(--chip); border: 1px solid var(--rule); color: var(--mute); }
.fm-editor .fm-err { background: var(--bad-bg); text-decoration: wavy underline var(--bad); }
.fm-editor .fm-err-line { background: #fdf5f4; }
.fm-editor .cm-selectionBackground, .fm-editor .cm-focused .cm-selectionBackground { background: var(--press) !important; }
.fm-drop .fm-editor { outline: 2px dashed var(--blue); outline-offset: -4px; }
.fm-under { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--rule); font-size: 14px; }
.fm-trust { margin: 0; font-size: 14.5px; color: var(--ink); max-width: 70em; }
.fm-trust code { background: var(--code); padding: 1px 5px; font-size: 13px; }
@media (max-width: 820px) {
  .fm-status { grid-template-columns: minmax(0, 1fr); }
  .fm-files { margin-left: 0; }
  .fm-editor { height: 60vh; }
}
@media (max-width: 640px) {
  .btn.sm, .btn.fm-mini, .fm-opt select, .fm-detect select { min-height: 44px; }
  .fm-check { min-height: 44px; }
  .fm-check input { width: 22px; height: 22px; }
  .spec dl { grid-template-columns: minmax(0, 1fr); }
  .spec dt { border-right: 0; border-bottom: 0; padding-bottom: 0; }
}
