/* A markdown editor that renders as you type: CodeMirror draws the document and
   the textarea it replaces stays behind it as the form field. Every rule is
   scoped to .markdown-editor so a page can hold several without them meeting. */

/* The editor is dropped into a light page and a dark one, so its own surfaces
   are named here and answered by whichever theme context holds it. */
.markdown-editor, .markdown-sections, .markdown-search-panel, .markdown-sections-controls {
  --md-head: var(--bg-main-solid);
  --md-head-text: var(--color-text-bright);
  --md-chip: var(--light-bg);
  --md-menu: var(--light-bg);
  --md-menu-text: var(--light-text);
  --md-menu-hover: var(--light-bg-muted);
  --md-accent: var(--light-accent);
  --md-accent-soft: var(--light-bg-blue);
  --md-accent-text: var(--light-bg);
}

.dark-bg .markdown-editor, .dark-bg .markdown-sections, .dark-bg .markdown-search-panel, .dark-bg .markdown-sections-controls {
  /* The head keeps its deep navy on a dark page too: it is the one surface that
     should read as the editor's own rather than as more of the page. */
  --md-chip: var(--bg-input-light);
  --md-menu: var(--color-surface);
  --md-menu-text: var(--color-text-bright);
  --md-menu-hover: var(--bg-hover);
  --md-accent: var(--color-primary);
  --md-accent-soft: var(--bg-hover);
  --md-accent-text: var(--color-on-primary);
}

.markdown-editor { container-name: editor; container-type: inline-size; display: flex; flex-direction: column; }
.markdown-editor-label { margin-bottom: var(--spacing-sm); }

/* The navy head: the toolbar is the top of the editor, not a strip above it. */
.markdown-editor-head,
.markdown-editor-raw-head {
  align-items: center;
  background: var(--md-head);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  color: var(--md-head-text);
  display: flex;
  gap: var(--spacing-md);
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-lg);
}
.markdown-editor-head .markdown-toolbar { flex: 1; min-width: 0; }
.markdown-editor-nav { flex: none; }
.markdown-editor-more { position: relative; }
.markdown-editor-menu {
  background: var(--md-menu);
  border: 1px solid var(--theme-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 32px rgb(from var(--color-black) r g b / 0.18);
  min-width: 220px;
  padding: var(--spacing-xs) 0;
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-sm));
  z-index: var(--z-dropdown);
}
.markdown-editor-menu-item { background: none; border: none; color: var(--md-menu-text); cursor: pointer; display: block; font-size: 14px; padding: var(--spacing-sm) var(--spacing-lg); text-align: left; width: 100%; }
.markdown-editor-menu-item:hover { background: var(--md-menu-hover); }

.markdown-editor-raw-title { font-weight: 600; }
.markdown-editor-raw-meta { color: var(--color-text-muted); font-size: 13px; }
.markdown-editor-raw-actions { display: flex; gap: var(--spacing-sm); margin-left: auto; }

.markdown-editor-mount { background: var(--theme-bg); border: 1px solid var(--theme-border); border-top: none; border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); overflow: hidden; }
.markdown-editor-mount .cm-editor { height: var(--markdown-editor-height, 520px); }
.markdown-editor-mount .cm-editor.cm-focused { outline: none; }
.markdown-editor-mount .cm-quoted { border-left: 3px solid var(--theme-border-strong); color: var(--theme-text-secondary); padding-left: var(--spacing-md); }
.markdown-editor-mount .cm-fenced { background: var(--theme-bg-subtle); font-family: var(--font-family-mono); font-size: 13px; }
/* The syntax that opens a line is drawn in the margin while that line is edited,
   so the words do not move sideways when the cursor arrives. */
.markdown-editor-mount .cm-line { position: relative; }
/* Every marker ends at the same place, whether it is one hash or three, so the
   margin reads as a column rather than as text pushed about. */
.markdown-editor-mount .cm-hanging-mark { color: var(--theme-text-muted); font-family: var(--font-family-mono); font-size: 11px; font-weight: 400; line-height: 1; position: absolute; text-align: right; top: 50%; transform: translate(calc(-100% - 6px), -50%); width: 20px; }
/* A quoted line carries its own border and padding, so its marker travels
   further to reach the same margin as a heading's. */
.markdown-editor-mount .cm-hanging-quote { transform: translate(calc(-100% - 21px), -50%); }
.markdown-editor-mount .cm-divider { border-bottom: 1px solid var(--theme-border-strong); color: transparent; line-height: 0.9; }

/* Reading the file means reading it as a file: one size, one leading, so the
   line numbers line up with the lines they count. */
.markdown-editor-raw .cm-content { font-family: var(--font-family-mono); font-size: 13px; }
.markdown-editor-raw .cm-line, .markdown-editor-raw .cm-line span { font-size: 13px; line-height: 1.7; }
.markdown-editor-raw .cm-gutters { background: var(--theme-bg); border-right: none; color: var(--theme-text-muted); }

/* Without javascript the textarea is the editor; with it, it is the form field. */
.markdown-editor-input { border: none; border-radius: 0; display: block; width: 100%; }
.markdown-editor-replaced { display: none; }

/* The toolbar never wraps: it fits, or it scrolls. Its controls are drawn for navy. */
.markdown-toolbar { align-items: center; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.markdown-toolbar::-webkit-scrollbar { display: none; }
/* Holding more than it shows: the far end fades so the bar reads as scrollable,
   and the near end fades once it has been scrolled off. */
.markdown-toolbar.is-scrollable { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.markdown-toolbar.is-scrollable.is-scrolled { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.markdown-toolbar-divider { background: rgb(255 255 255 / 0.18); flex: none; height: 18px; margin: 0 var(--spacing-sm); width: 1px; }
/* Undo and redo end the bar, so the divider before them takes up the slack. */
.markdown-toolbar-divider:last-of-type { margin-left: auto; }
/* The head is navy under either theme, so its selects are drawn for navy rather
   than for the page around them: a lifted navy chip, the colour the bar would
   have if it were raised. */
.markdown-select { background: var(--bg-elevated); border: 1px solid var(--border-white-lighter); box-shadow: 0 1px 2px rgb(from var(--color-black) r g b / 0.4); border-radius: var(--border-radius-sm); color: var(--md-head-text); flex: none; font-size: 13px; padding: 6px 8px; }
.markdown-select:hover { border-color: rgb(255 255 255 / 0.28); }
.markdown-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* A native select paints its option list with the control's own colours, which
   only some platforms honour, so the browsers that can hand over the picker are
   asked for it and given the bar's own navy. The rest keep their native list:
   ::picker() invalidates the selector where it is not understood, which leaves
   the select native too rather than dark-on-dark. */
.markdown-select option { background: var(--color-surface); color: var(--md-head-text); }
.markdown-select, .markdown-select::picker(select) { appearance: base-select; }
.markdown-select::picker(select) { background: var(--color-surface); border: 1px solid var(--border-white-lighter); border-radius: var(--border-radius-md); box-shadow: 0 12px 32px rgb(from var(--color-black) r g b / 0.45); padding: var(--spacing-xs) 0; }
.markdown-select option { padding: 6px var(--spacing-md); }
.markdown-select option:hover { background: var(--bg-hover); }
.markdown-select option:checked { background: rgb(from var(--color-primary) r g b / 0.16); box-shadow: inset 2px 0 0 var(--color-primary); color: var(--color-primary-light); }
.markdown-select option::checkmark { display: none; }
.markdown-tool { align-items: center; background: none; border: 1px solid transparent; border-radius: var(--border-radius-sm); color: var(--color-text-subtle); cursor: pointer; display: flex; flex: none; height: 30px; justify-content: center; padding: 0; width: 30px; }
.markdown-tool:hover { background: rgb(255 255 255 / 0.1); color: var(--color-text); }
.markdown-tool.active { background: var(--color-primary); color: var(--color-on-primary); }
.markdown-tool svg { display: block; }

/* The page holds the editor rather than the editor stretching the page: the
   column fills what the window gives it, the document is the only thing that
   scrolls, and Discard and Save stay where they were put. The container's own
   min-height would win over this height, so it is overridden by name. */
.meeting-types-container.workflow-editor-container { background: var(--theme-bg-subtle); display: flex; flex-direction: column; height: calc(100dvh - 80px); min-height: 0; overflow: hidden; }
.workflow-editor-page { display: flex; flex: 1; flex-direction: column; margin: 0 auto; max-width: 1000px; min-height: 0; min-width: 0; padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-3xl); width: 100%; }
/* Only where the container holds the page to the window does the editor stretch
   to fill it. Elsewhere it keeps whatever height it is given, or measures its
   own room, and these rules would override both. */
.workflow-editor-container .workflow-editor { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; }
.workflow-editor-container .markdown-editor { flex: 1; min-height: 0; min-width: 0; }
.workflow-editor .markdown-editor-head { min-width: 0; }
.workflow-editor-container .markdown-editor-mount { flex: 1; min-height: 0; min-width: 0; }
.workflow-editor-container .markdown-history, .workflow-editor-container .markdown-history-list,
.workflow-editor-container .markdown-changes, .workflow-editor-container .markdown-changes-list { flex: 1; max-height: none; min-height: 0; }
.workflow-editor-container .markdown-editor-mount .cm-editor { height: 100%; }
.workflow-editor .markdown-editor-mount { border-radius: 0; }
.workflow-editor-foot { align-items: center; background: var(--theme-bg); border: 1px solid var(--theme-border); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); border-top: none; display: flex; gap: var(--spacing-lg); padding: var(--spacing-lg); }
.workflow-editor-hint { color: var(--theme-text-muted); font-size: 13px; margin: 0; }
/* A save is answered beside the button that asked for it, at the size of a note.
   Above the editor it was a banner that pushed the document down the page to say
   the document had been kept. */
.workflow-editor-foot .flash-messages { margin: 0; max-width: none; padding: 0; }
.workflow-editor-foot .flash-message { border-radius: var(--border-radius-sm); font-size: 13px; margin: 0; padding: var(--spacing-xs) var(--spacing-md); }
.workflow-editor-foot .flash-notice { background: rgb(from var(--theme-accent) r g b / 0.1); border-color: rgb(from var(--theme-accent) r g b / 0.3); color: var(--theme-accent); }
.workflow-editor-buttons { display: flex; gap: var(--spacing-md); margin-left: auto; }

/* When the head cannot hold both, navigation takes a row of its own and the
   toolbar gets the full width, so scrolling it still reaches undo and redo. */
/* Room for every control rather than a bar that scrolls: smaller targets, no
   gaps, and only the divider that separates undo and redo from the rest. These
   measure the editor itself, because the sections list takes room a window
   width would claim it has. */
@container editor (max-width: 720px) {
  .markdown-toolbar { gap: 0; }
  .markdown-toolbar .markdown-tool { height: 28px; width: 28px; }
  .markdown-toolbar .markdown-select { font-size: 12px; padding: 5px 4px; }
  .markdown-toolbar-divider { display: none; }
  /* Keeping the auto margin: undo and redo hold the right end whenever the bar
     has room, and pack in with the rest only when it has none. */
  .markdown-toolbar-divider:last-of-type { display: block; margin-left: auto; margin-right: var(--spacing-xs); }
}

/* On a phone the page itself does not scroll: the column fills the viewport and
   the document is the only thing that moves, so Discard and Save stay put rather
   than drifting under a second scrollbar. */
@media (max-width: 700px) {
  .workflow-editor-page { padding: var(--spacing-md) var(--spacing-md) var(--spacing-md); }
  .workflow-editor-hint { display: none; }
  .markdown-editor-head, .markdown-editor-raw-head { padding: var(--spacing-sm) var(--spacing-md); }
}

/* The smallest phones: one more notch of tightening is what fits the last two
   controls, rather than leaving them behind a scroll. */
@container editor (max-width: 430px) {
  .markdown-editor-mount .cm-content { padding-left: 30px; }
  .markdown-editor-mount .cm-hanging-mark { transform: translate(calc(-100% - 5px), -50%); width: 18px; }
  .markdown-toolbar .markdown-tool { height: 26px; width: 26px; }
  .markdown-toolbar .markdown-select { padding: 5px 2px; }
}

/* The smallest phones still in use: the last divider goes too, which is what
   buys the final two controls their place on the bar. */
@container editor (max-width: 380px) {
  .markdown-editor-head { gap: var(--spacing-xs); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
  .markdown-toolbar .markdown-tool { height: 23px; width: 23px; }
  .markdown-toolbar-divider:last-of-type { display: none; }
  .markdown-toolbar .markdown-tool[aria-label^="Undo"] { margin-left: auto; }
}

@media (max-width: 380px) {
  .markdown-editor-raw-head { flex-wrap: wrap; row-gap: var(--spacing-sm); }
  .markdown-editor-raw-actions { flex: 1 0 100%; }
  .workflow-editor-foot { align-items: stretch; flex-direction: column; }
  .workflow-editor-buttons { margin-left: 0; }
  .workflow-editor-buttons .btn { flex: 1; }
}

/* The sections list: the document's own headings, next to the editor rather
   than inside its toolbar, so navigating does not cost a control on the bar. */
.workflow-editor-page { display: grid; gap: var(--spacing-xl); grid-template-columns: 200px minmax(0, 1fr); }
/* The admin page is already inset by its own chrome, so the editor takes the
   width it is given rather than centring inside it. */
.dashboard-container .workflow-editor-page { max-width: none; padding: 0 0 var(--spacing-2xl); }
.markdown-sections { display: flex; flex-direction: column; gap: var(--spacing-sm); max-height: var(--markdown-editor-height, 100%); min-width: 0; overflow-y: auto; padding-top: var(--spacing-sm); }
.markdown-sections-list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.markdown-sections-item { background: none; border: none; border-radius: var(--border-radius-sm); color: var(--theme-text-secondary); cursor: pointer; display: block; font-size: 13px; overflow: hidden; padding: 7px 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.markdown-sections-item:hover { background: var(--md-accent-soft); color: var(--md-accent); }
.markdown-sections-item.active { background: var(--theme-bg); color: var(--theme-text); font-weight: 600; }
.markdown-sections-empty, .markdown-sections-hint { color: var(--theme-text-muted); font-size: 12px; margin: 0; }
.markdown-sections-hint { margin-top: auto; }
.markdown-sections-hint code { font-family: var(--font-family-mono); }
.markdown-sections-add { align-items: center; background: none; border: none; color: var(--md-accent); cursor: pointer; display: flex; font-size: 13px; gap: var(--spacing-sm); padding: 7px 12px; }
.markdown-sections-add:hover { text-decoration: underline; }

/* Narrow: there is no room for the list next to the editor, so it opens as a
   sheet from a button in the page header. */
.workflow-editor-header { align-items: flex-start; display: flex; gap: var(--spacing-lg); }
.markdown-sections-controls { display: none; gap: var(--spacing-sm); margin-left: auto; }
/* Where the page stands, at the far end of its own header. Quiet text rather
   than a third bordered control: it reports, it does not act. */
.workflow-edited-by { background: none; border: none; color: var(--theme-text-muted); cursor: pointer; font-family: inherit; font-size: 13px; margin: 0 0 0 auto; padding: 0; text-align: left; white-space: nowrap; }
.workflow-edited-by:hover { color: var(--md-accent); text-decoration: underline; }
/* On the page header's own pale band a white button disappears, so these
   carry the accent they act in. */
.markdown-sections-trigger { align-items: center; background: var(--md-chip); border: 1px solid var(--md-accent); border-radius: var(--border-radius-sm); color: var(--md-accent); cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 600; gap: var(--spacing-sm); padding: 8px 14px; }
.markdown-sections-find { padding: 8px 10px; }
.markdown-sections-trigger svg { display: block; flex: none; }
.markdown-sections-trigger:hover { background: var(--md-accent); color: var(--md-accent-text); }

@media (max-width: 1000px) {
  .markdown-sections-controls { display: flex; }
  /* Once the buttons appear they share the title's row and keep the right edge
     they hold at every other width. Where the workflow stands wraps beneath the
     title it describes, so nothing takes a row of its own. */
  .workflow-editor-container .meeting-header-row, .workflow-editor-header { align-items: flex-start; flex-direction: row; flex-wrap: wrap; row-gap: var(--spacing-sm); }
  .workflow-header-heading { flex: 1; min-width: 0; }
  .workflow-edited-by { flex-basis: 100%; margin-left: 0; order: 3; }
  .markdown-sections-controls { order: 2; }
  .workflow-editor-page { grid-template-columns: minmax(0, 1fr); }
  .markdown-sections { background: var(--theme-bg); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; bottom: 0; box-shadow: 0 -12px 40px rgb(from var(--color-black) r g b / 0.25); left: 0; max-height: 70dvh; overflow-y: auto; padding: var(--spacing-lg); position: fixed; right: 0; transform: translateY(101%); transition: transform 160ms ease; z-index: var(--z-dropdown); }
  .sections-open .markdown-sections { transform: none; }
  .markdown-sections-hint { margin-top: var(--spacing-md); }
}

/* Finding a section or a line: the sidebar's box and ⌘K open the same palette. */
.markdown-sections-search { align-items: center; background: var(--theme-bg); border: 1px solid var(--theme-border-strong); border-radius: var(--border-radius-sm); color: var(--theme-text-muted); display: flex; gap: var(--spacing-sm); padding: 6px 10px; }
.markdown-sections-search input { background: none; border: none; color: var(--theme-text); flex: 1; font-size: 13px; min-width: 0; outline: none; }
.markdown-sections-shortcut { color: var(--theme-text-muted); font-size: 11px; }

.markdown-search-panel { align-items: flex-start; background: rgb(from var(--color-black) r g b / 0.35); bottom: 0; display: flex; justify-content: center; left: 0; padding-top: 12vh; position: fixed; right: 0; top: 0; z-index: var(--z-modal, 1000); }
.markdown-search-dialog { background: var(--md-menu); border: 1px solid var(--theme-border); border-radius: var(--border-radius-lg); box-shadow: 0 24px 60px rgb(from var(--color-black) r g b / 0.35); color: var(--md-menu-text); display: flex; flex-direction: column; max-height: 70vh; max-width: 560px; overflow: hidden; width: calc(100% - 32px); }
.markdown-search-field { align-items: center; border-bottom: 1px solid var(--theme-border); color: var(--theme-text-muted); display: flex; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.markdown-search-input { background: none; border: none; color: var(--md-menu-text); flex: 1; font-size: 15px; min-width: 0; outline: none; }
.markdown-search-esc { background: none; border: 1px solid var(--theme-border); border-radius: var(--border-radius-sm); color: var(--theme-text-muted); cursor: pointer; font-size: 11px; padding: 2px 6px; }
.markdown-search-results { overflow-y: auto; padding: var(--spacing-sm) 0; }
.markdown-search-group { color: var(--theme-text-muted); font-size: 11px; letter-spacing: 0.06em; margin: var(--spacing-sm) 0 2px; padding: 0 var(--spacing-lg); text-transform: uppercase; }
.markdown-search-result { align-items: baseline; background: none; border: none; color: var(--md-menu-text); cursor: pointer; display: flex; font-size: 14px; gap: var(--spacing-md); padding: 8px var(--spacing-lg); text-align: left; width: 100%; }
.markdown-search-result.marked, .markdown-search-result:hover { background: var(--md-accent-soft); }
.markdown-search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markdown-search-text mark { background: none; color: var(--md-accent); font-weight: 600; }
.markdown-search-meta { color: var(--theme-text-muted); font-size: 12px; }
.markdown-tool[disabled] { cursor: default; opacity: 0.35; }
.markdown-tool[disabled]:hover { background: none; color: var(--color-text-subtle); }

/* What the edit did to the saved workflow, and the ways to put it back. */
.markdown-editor-menu-item { align-items: center; display: flex; gap: var(--spacing-md); justify-content: space-between; }
.markdown-editor-menu-count { background: var(--md-accent-soft); border-radius: 10px; color: var(--md-accent); font-size: 11px; font-weight: 600; padding: 1px 7px; }

/* The changes take the editor's place rather than covering it, so the sections
   stay beside them and the page keeps its shape. */
.markdown-changes { display: flex; flex-direction: column; min-height: 0; }
.markdown-editor.showing-changes .markdown-editor-head,
.markdown-editor.showing-changes .markdown-editor-mount { display: none; }
.markdown-changes-bar { align-items: center; border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; background: var(--md-head); color: var(--md-head-text); display: flex; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.markdown-changes-title { font-weight: 600; }
.markdown-changes-summary { color: var(--color-text-muted); font-size: 13px; }
.markdown-changes-actions { display: flex; gap: var(--spacing-sm); margin-left: auto; }
.markdown-changes-list { background: var(--theme-bg); border: 1px solid var(--theme-border); border-top: none; border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); max-height: var(--markdown-editor-height, 520px); min-height: 200px; overflow-y: auto; padding: var(--spacing-lg); }
.markdown-changes-section { border: 1px solid var(--theme-border); border-radius: var(--border-radius-md); margin-bottom: var(--spacing-lg); overflow: hidden; }
.markdown-changes-head { align-items: center; background: var(--theme-bg-subtle); display: flex; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); }
.markdown-changes-name { font-weight: 600; }
.markdown-changes-meta { color: var(--theme-text-muted); font-size: 12px; }
.markdown-changes-line { align-items: baseline; border-top: 1px solid var(--theme-border); display: flex; font-family: var(--font-family-mono); font-size: 12px; gap: var(--spacing-md); padding: 6px var(--spacing-md); }
.markdown-changes-added { background: #e7f5e0; color: #2f5d1a; }
.markdown-changes-removed { background: #fde7e9; color: #8a1c28; }
.dark-bg .markdown-changes-added { background: rgb(from var(--color-success) r g b / 0.14); color: #c6e58a; }
.dark-bg .markdown-changes-removed { background: rgb(from var(--color-danger) r g b / 0.14); color: #ffb3b3; }
.markdown-changes-number { color: var(--theme-text-muted); flex: none; width: 3ch; }
.markdown-changes-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.markdown-changes-revert { background: none; border: none; color: var(--md-accent); cursor: pointer; flex: none; font-size: 12px; margin-left: auto; padding: 0 var(--spacing-xs); }
.markdown-changes-revert:hover { text-decoration: underline; }
.markdown-changes-head .markdown-changes-revert { margin-left: auto; }
.markdown-changes-hunk { border-top: 1px solid var(--theme-border); }
.markdown-changes-hunk-foot { display: flex; justify-content: flex-end; padding: 4px var(--spacing-md); }
.markdown-changes-line { border-top: none; }
.markdown-sections-item.changed::after { background: var(--color-danger); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-left: var(--spacing-sm); vertical-align: middle; width: 6px; }

.markdown-changes-hunk { border-top: 1px solid var(--theme-border); }
.markdown-changes-hunk-foot { display: flex; justify-content: flex-end; padding: 4px var(--spacing-md); }
.markdown-sections-item.changed::after { background: var(--color-danger); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-left: var(--spacing-sm); vertical-align: middle; width: 6px; }

/* A line this edit wrote, marked where it sits: the same information the changes
   view lists, without having to open it. */
.markdown-editor-mount .cm-changed { background: rgb(from var(--color-success) r g b / 0.08); box-shadow: inset 3px 0 0 var(--color-success); }

/* Every save of the document, in the editor's own place. Rows rather than cards:
   a history is read down, and the newest is the one being edited. */
.markdown-history { display: flex; flex-direction: column; min-height: 0; }
.markdown-editor.showing-history .markdown-editor-head,
.markdown-editor.showing-history .markdown-editor-mount { display: none; }
.markdown-history-bar { align-items: center; background: var(--md-head); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; color: var(--md-head-text); display: flex; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.markdown-history-title { font-weight: 600; }
.markdown-history-summary { color: var(--color-text-muted); font-size: 13px; }
.markdown-history-actions { display: flex; gap: var(--spacing-sm); margin-left: auto; }
.markdown-history-list { background: var(--theme-bg); border: 1px solid var(--theme-border); border-bottom: none; border-top: none; max-height: var(--markdown-editor-height, 520px); min-height: 200px; overflow-y: auto; }
.markdown-history-row { align-items: center; border-bottom: 1px solid var(--theme-border); display: flex; gap: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); }
.markdown-history-row:last-child { border-bottom: none; }
.markdown-history-of { min-width: 0; }
.markdown-history-when { color: var(--theme-text); font-size: 13px; font-weight: 600; }
.markdown-history-who { color: var(--theme-text-muted); font-size: 12px; }
/* The edit nobody has saved, marked as the one thing here that is still moving. */
.markdown-history-draft { background: var(--md-accent-soft); border-left: 2px solid var(--md-accent); }
.markdown-history-badge { background: var(--theme-bg-subtle); border-radius: 999px; color: var(--theme-text-muted); font-size: 11px; font-weight: 500; margin-left: var(--spacing-sm); padding: 2px 8px; }
.markdown-history-ways { display: grid; gap: var(--spacing-lg); grid-auto-flow: column; margin-left: auto; }
.markdown-history-space { font-size: 12px; visibility: hidden; }
.markdown-history-link { background: none; border: none; color: var(--md-accent); cursor: pointer; font-size: 12px; padding: 0; }
.markdown-history-link:hover { text-decoration: underline; }
.markdown-history-what { color: var(--theme-text-muted); }
.markdown-history-older { color: var(--theme-text-muted); font-size: 12px; margin: 0; padding: var(--spacing-md) var(--spacing-lg); }
.markdown-history-foot { background: var(--theme-bg); border: 1px solid var(--theme-border); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); border-top: none; color: var(--theme-text-muted); font-size: 12px; padding: var(--spacing-md) var(--spacing-lg); }
/* Two saves being read, not an edit being undone: there is nothing here to put
   back, so the controls that would offer it are not drawn. */
.markdown-changes.comparing .markdown-changes-revert,
.markdown-changes.comparing .markdown-changes-hunk-foot { display: none; }
.markdown-changes.comparing .markdown-changes-actions .btn-secondary { display: none; }