/* The editor's own chrome, in an editor that deliberately has almost none: the
   mode switch, the markdown toolbar, the dual pane, and the chip that says
   whether your typing is being saved.

   The touch query in here is mirrored by `touchLayout()` in ui/mdbar.js, and
   the two have to agree: one signal decides both where this toolbar goes and
   where the Comment button goes. */

/* --- the mode switch: live · source · dual-pane · view ---------------- */
.modes {
  display: inline-flex; gap: 2px; padding: 2px; flex: none;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
}
.modes button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 26px; padding: 0; border: 1px solid transparent;
  border-radius: 7px; background: none; color: var(--muted);
}
.modes button:hover { color: var(--fg); border-color: var(--line); }
.modes button[aria-pressed="true"] {
  background: var(--panel); border-color: var(--line); color: var(--accent);
}
.modes svg { width: 16px; height: 16px; display: block; }

/* --- the markdown toolbar: line-level markup, as buttons -------------- */
/* Chrome, in an editor that deliberately has almost none — so it exists only
   while you are editing, it is icons and no words, and every button says
   whether what it toggles is already on, which makes the row a read-out of
   the line as much as a way to change it.

   Same row on both platforms, in the place each one has room for: under the
   bar on a desktop, pinned to the bottom edge on a touch screen, where it
   lands above the keyboard (the Android shell insets its webview by the IME,
   MainActivity.kt) and within reach of a thumb. */
#mdbar {
  display: flex; align-items: center; gap: 2px; margin: 0 0 10px;
  overflow-x: auto; scrollbar-width: none;
}
#mdbar::-webkit-scrollbar { display: none; }
#mdbar button {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 28px; padding: 0; border: 1px solid transparent;
  border-radius: 7px; background: none; color: var(--muted);
}
#mdbar button:hover { color: var(--fg); border-color: var(--line); }
#mdbar button[aria-pressed="true"] {
  background: var(--panel); border-color: var(--line); color: var(--accent);
}
#mdbar svg { width: 17px; height: 17px; display: block; }
#mdbar .sep { flex: none; width: 1px; height: 18px; background: var(--line); margin: 0 5px; }

/* The touch layout, in one query that `touchLayout()` in the script mirrors —
   the two must agree, because the same signal decides where this bar goes and
   where the Comment button goes. */
@media (pointer: coarse), (max-width: 800px) {
  #mdbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 24; margin: 0;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  #mdbar button { width: 40px; height: 36px; }
  #mdbar svg { width: 20px; height: 20px; }
  /* Room under the document for the bar that is now sitting on top of it. */
  body.mdtools main { padding-bottom: 86px; }
}

/* Dual pane: the editor and its rendered mirror, equal halves. The panes
   scroll with the page — the editor grows with the document and a pane with
   its own scrollbar next to one without is worse than neither. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.split > * { min-width: 0; }
/* One hairline where the panes meet, rather than a box around each: the divider
   is the only thing the split actually needs to say. */
.split .preview {
  max-width: none; min-height: 62vh; overflow-x: auto;
  border-left: 1px solid var(--line); padding: 4px 0 0 24px;
}
.split .preview > :first-child { margin-top: 0; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split .preview {
    border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0;
  }
}

/* The editor's state, as a chip in the bar rather than a sentence on a row
   of its own.
   It used to be a whole line above the editor — `#edrow` — holding one phrase
   that changes a few times an hour, which is a lot of vertical space on a
   phone for something that is usually "carry on". The line was right about
   what it said and wrong about how much room it took to say it, so the
   sentence is now collapsed to a dot and the row it sat on is gone: in a live
   session `#edrow` has nothing in it at all and hides itself.
   Two things keep the collapse honest. A WARNING still expands to its full
   sentence in place, uncollapsed and coloured, because "not saving —
   reconnecting…" is the one state that has to be read without being asked for
   — that is the whole finding behind `WARN_AFTER`/`WARN_LINGER`, and hiding
   it behind a tap would spend the alarm exactly the way the red flash did.
   And the dot carries the state as colour meanwhile, so the row is not
   replaced by nothing.
   Pointing at the chip expands the sentence too, on a desktop where that is
   free. Tapping it opens `#edpop`, which is where the sentence, the build,
   and the marker button live — a phone has no hover and needed a gesture. */
.edchipwrap { position: relative; display: inline-flex; min-width: 0; }
#edchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; min-width: 0; font-size: 12px;
}
#edchip .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted); transition: background .18s ease;
}
/* Green is "your typing is safe", which is the only thing this row was ever
   able to tell anybody. Everything else is grey until it is a warning. */
#edchip[data-state="live"] .dot { background: var(--ins); }
#edchip[data-state="warn"] .dot { background: var(--orphan); }
#edstate {
  max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: max-width .18s ease;
}
#edchip[data-state="warn"] #edstate,
#edchip:hover #edstate,
#edchip:focus-visible #edstate { max-width: 32ch; }
#edstate.warn { color: var(--orphan); }

/* Tapping the chip: what the state means, which build is saying it, and the
   marker. Same shape as the `⋯` menu — one popover pattern in this page. */
#edpop {
  display: none; position: absolute; right: 0; top: 30px; z-index: 20;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); width: 290px; max-width: 78vw;
  padding: 12px; font-size: 12px; color: var(--muted); white-space: normal;
}
#edpop.open { display: block; }
#edpop .what { color: var(--fg); font-size: 13px; margin-bottom: 8px; }
#edpop button { width: 100%; margin-top: 4px; }
#edpop .build { margin-top: 10px; font-family: ui-monospace, monospace; font-size: 11px; }
#edpop .said { margin-top: 8px; color: var(--fg); }
#edpop .said code { font-size: 11px; word-break: break-all; }

/* The plain textarea, and the editor's colours.

   Here rather than in screens.css, where they ended up when the sync screen was
   inserted above them: what they style is the editor, and a file named after
   the two screens that are not a document is the wrong place to look for
   `cm-dossier-wikilink`. The cascade is unchanged — `.form textarea` outranks a
   bare `textarea` on specificity, not on order. */
textarea {
  width: 100%; min-height: 62vh; font: 13px/1.5 ui-monospace, monospace;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px;
}

/* CodeMirror editor (ADR-0023) — colors here, structure in the bundle */
/* No box: the editor sits in the page exactly as the rendered view does, and
   its text starts on the same left edge, so switching mode does not shift the
   document sideways. The caret says where you are; a frame around the whole
   thing only spent width. */
#ed .cm-editor { background: var(--bg); min-height: 62vh; }
#ed .cm-editor.cm-focused { outline: none; }
#ed .cm-scroller { font: 13px/1.5 ui-monospace, monospace; }
#ed .cm-content { caret-color: var(--fg); padding: 4px 0; }
#ed .cm-line { padding: 0; }
/* dossier inline syntax, mirroring the rendered view's colors */
.cm-dossier-hl { background: var(--hl-bg); border-radius: 2px; }
.cm-dossier-anchor { color: var(--accent); }
.cm-dossier-ins { background: var(--ins-bg); color: var(--ins); }
.cm-dossier-del { background: var(--del-bg); color: var(--del); }
.cm-dossier-wikilink { color: var(--accent); }
.cm-dossier-backmatter { color: var(--muted); opacity: .75; }