/* 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);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015));
  border-radius: var(--border-radius-md);
  box-shadow: 0 6px 18px rgb(from var(--color-black) r g b / 0.32);
  color: var(--md-head-text);
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  min-height: 48px;
  padding: var(--spacing-sm) var(--spacing-md);
  position: relative;
  z-index: 1;
}
.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-radius: 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-bullet { color: var(--theme-text-secondary); }
.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. */
/* The page is what scrolls, not the document inside it. A box with a scrollbar of
   its own, inside a page with another, is two bars reporting different things, and
   it turns the bar above the cards into the lid of that box rather than something
   floating over them. So the editor grows to whatever the document needs, the
   container is the one scroll port, and the toolbar and the save bar hold their
   ends of it. */
.meeting-types-container.workflow-editor-container { background: var(--theme-bg-subtle); display: flex; flex-direction: column; height: calc(100dvh - 80px); min-height: 0; overflow-y: auto; }
.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); width: 100%; }
.workflow-editor-doc { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* 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 0 auto; flex-direction: column; min-width: 0; }
.workflow-editor-container .workflow-editor-page { flex: 1 0 auto; }
.workflow-editor-container .workflow-editor-doc { flex: none; }
.workflow-editor .markdown-editor { flex: none; min-width: 0; }
.workflow-editor .markdown-editor-head { min-width: 0; }
.workflow-editor .markdown-editor-mount { flex: none; min-width: 0; overflow: visible; }
.workflow-editor .markdown-editor-mount .cm-scroller { overflow: visible; }
.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 .markdown-editor-mount .cm-editor { height: auto; }
/* The document runs to the edges of its column here: the cards are what has a
   shape, and the bar below is what closes the page off. */
.workflow-editor .markdown-editor-mount { background: none; border: none; border-radius: 0; }
/* The bar holds the top of the page with the same air above it that it has
   before anything is scrolled, so it does not jump when it catches. The strip it
   carries above itself is what the cards go behind: without it they would show
   through the gap between the bar and the nav above it. */
.workflow-editor .markdown-editor-head { position: sticky; top: var(--spacing-xl); }
.workflow-editor .markdown-editor-head::before { background: var(--theme-bg-subtle); bottom: 100%; content: ""; height: calc(var(--spacing-xl) + 4px); left: 0; position: absolute; right: 0; }
.workflow-editor .workflow-editor-foot { bottom: 0; position: sticky; }
.workflow-editor-foot { align-items: center; background: var(--theme-bg); border-top: 1px solid var(--theme-border); box-shadow: 0 -2px 8px rgb(from var(--color-black) r g b / 0.06); display: flex; flex: none; gap: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-3xl); }
.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; }
/* Dragging a row. The row it came from stays where it is, greyed, so the list
   does not reshuffle under the pointer while it is being aimed, and the row
   itself travels with the pointer. The tilt is what makes it read as picked up:
   level, it looks like a row that has come loose. */
.markdown-sections-chip, .markdown-editor-mount .cm-card-drop-chip { align-items: center; background: var(--theme-bg); border-radius: var(--border-radius-md); box-shadow: 0 12px 28px rgb(from var(--color-black) r g b / 0.45); color: var(--theme-text); display: flex; font-size: 12px; font-weight: 600; gap: 9px; padding: 7px 11px; pointer-events: none; white-space: nowrap; }
.markdown-sections-chip { position: fixed; transform: rotate(-1.5deg); z-index: var(--z-modal, 1000); }
/* On the page the chip is moored to the insertion point, just past the dot that
   marks it, rather than to the pointer. */
.markdown-editor-mount .cm-card-drop-chip { left: 12px; position: absolute; top: 50%; transform: translateY(-50%) rotate(-1.5deg); }
.markdown-sections-chip span, .markdown-editor-mount .cm-card-drop-chip span { background-image: radial-gradient(circle at 1.5px 1.5px, var(--theme-border-strong) 1.5px, transparent 1.6px); background-size: 5px 5px; flex: none; height: 15px; width: 9px; }
.markdown-sections-list { position: relative; }
.markdown-sections-item.lifted { opacity: 0.4; }
.is-reordering .markdown-sections-item { cursor: grabbing; }
.markdown-sections-drop { background: var(--md-accent); border-radius: 1px; height: 2px; left: 0; pointer-events: none; position: absolute; right: 0; }
.markdown-sections-drop::after { background: var(--md-accent); border-radius: 999px; color: var(--md-accent-text); content: ""; font-size: 10px; font-weight: 600; padding: 0; position: absolute; right: 0; top: -9px; }
/* Letting go here changes nothing, so the line stops promising that it will. */
.markdown-sections-drop.stays { background: var(--theme-border-strong); }
.markdown-sections-drop[data-depth="nests"] { left: var(--spacing-lg); }
.markdown-sections-drop[data-depth="nests"]::after { content: "nests here"; padding: 2px 7px; }
.markdown-sections-drop[data-depth="promotes"]::after { content: "promotes"; padding: 2px 7px; }
.markdown-sections-drop[data-depth="stays"]::after { background: var(--theme-border-strong); content: "leave here"; padding: 2px 7px; }
.markdown-sections-empty, .markdown-sections-hint { color: var(--theme-text-muted); font-size: 12px; margin: 0; }
.markdown-sections-hint { margin-top: auto; }
.markdown-sections-item { cursor: grab; }
.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. */
.document-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; }
.document-edited-by:hover { color: var(--md-accent); text-decoration: underline; }
/* A field's label with where its document stands at the far end of the row. */
.form-label-row { align-items: baseline; display: flex; gap: var(--spacing-md); }
/* 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-trigger svg { display: block; flex: none; }
.markdown-sections-trigger:hover { background: var(--md-accent); color: var(--md-accent-text); }

/* The list of sections keeps its place while the document moves past it. It has
   to be told to take only the room it needs: stretched down the page beside the
   document, as a grid item is by default, there is nothing for it to stick to
   until its own foot comes up, which is long after the document has gone. Below
   this width the list is a sheet from the header instead, and a sheet has no
   place in the flow to hold. */
@media (min-width: 1001px) {
  .workflow-editor-page > .markdown-sections { align-self: start; max-height: calc(100dvh - 140px); overflow-y: auto; position: sticky; top: var(--spacing-lg); }
}

@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; }
  .document-edited-by { flex-basis: 100%; margin-left: 0; order: 3; }
  .markdown-sections-controls { order: 2; }
  .workflow-editor-page { grid-template-columns: minmax(0, 1fr); }
  /* A phone gives the document what the description of the page was taking: it
     says the same thing as the title, over six lines. */
  .workflow-editor-container .meeting-types-subtitle { display: none; }
  /* The list does not become a second surface of its own here. The palette
     already opens on every section, searches the lines under them, and carries
     the actions besides, so a sheet holding a subset of it was one overlay too
     many to reach from one header. */
  .markdown-sections { display: none; }
}

/* 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; }

/* On a phone the same palette comes up from the bottom instead of down from the
   top, because that is where the thumb is. It is the one surface either way. */
@media (max-width: 1000px) {
  .markdown-search-panel { align-items: flex-end; padding-top: 0; }
  .markdown-search-dialog { border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; max-height: 80dvh; max-width: none; width: 100%; }
}
.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; }
/* Beside the text: one entry per thing changed, each with its own lines. */
.markdown-changes-item { border-top: 1px solid var(--theme-border); }
.markdown-changes-item-title { align-items: baseline; display: flex; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); }
.markdown-changes-item-kind { color: var(--theme-text-muted); font-size: 12px; text-transform: capitalize; }
.markdown-changes-item-name { font-weight: 600; }
.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; }

/* Section cards. A `##` heading and the lines under it are drawn as a card, a
   `###` heading and its lines as a block nested inside that one. The card is not
   a box in the document — CodeMirror's lines are siblings, and wrapping them
   would mean rebuilding the document as the structure changed — so it is built
   from the edges of the lines that make it up: the first line carries the top,
   the last the bottom, and every line the sides. A line that gains or loses a
   heading gains or loses its classes, and the card follows the keystroke.

   Everything here is measured off one set of columns, so the grip, the arrow,
   the hash hanging in the margin and the words all keep their own lane at both
   levels of nesting. */
.markdown-editor {
  --card-grip: 14px;
  --card-fold: 30px;
  --card-mark: 46px;
  --card-text: 66px;
  --sub-grip: 30px;
  --sub-fold: 46px;
  --sub-rail: 66px;
  --sub-mark: 70px;
  --sub-text: 96px;
}

/* The document sits on a ground rather than on paper: the cards are the paper. */
.markdown-editor:not(.markdown-editor-raw) .markdown-editor-mount { background: var(--theme-bg-subtle); }
.markdown-editor:not(.markdown-editor-raw) .cm-content { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-3xl); }
/* A line that belongs to no card keeps a margin of its own, because the syntax
   that opens it still hangs there. The cards widen it; the raw view, which shows
   that syntax where it is written, does not need it at all. */
.markdown-editor-mount .cm-line { padding-left: 36px; }
.markdown-editor-raw .cm-line { padding-left: 0; }

.markdown-editor-mount .cm-card { background: var(--theme-bg); border-left: 1px solid var(--theme-border); border-right: 1px solid var(--theme-border); padding-left: var(--card-text); padding-right: var(--spacing-xl); }
.markdown-editor-mount .cm-card-open { border-top: 1px solid var(--theme-border); border-top-left-radius: var(--border-radius-md); border-top-right-radius: var(--border-radius-md); padding-top: var(--spacing-md); }
/* The space between cards, drawn between them rather than taken from a blank
   line, so it is there whether or not the document happens to hold one. */
/* The blank line a card ends on: half a line, so it reads as the card's foot
   rather than as a stray line asking to be tidied away. It opens to its full
   height while the caret is in it, because then it is a line being written. */
.markdown-editor-mount .cm-card-tail, .markdown-editor-mount .cm-subcard-tail { height: 9px; line-height: 9px; }
.markdown-editor-mount .cm-card-gap { height: var(--spacing-md); }
.markdown-editor-mount .cm-subcard-gap { height: var(--spacing-sm); }
.markdown-editor-mount .cm-card-close { border-bottom: 1px solid var(--theme-border); border-bottom-left-radius: var(--border-radius-md); border-bottom-right-radius: var(--border-radius-md); padding-bottom: var(--spacing-md); }

/* The nested block keeps the card's surface and takes a rail of its own, drawn as
   a fixed column rather than as a border, so it never moves with the indent. */
.markdown-editor-mount .cm-subcard { padding-left: var(--sub-text); }
.markdown-editor-mount .cm-subcard::before { background: var(--theme-border-strong); bottom: 0; content: ""; left: var(--sub-rail); position: absolute; top: 0; width: 2px; }
.markdown-editor-mount .cm-subcard-open::before { border-top-left-radius: 1px; border-top-right-radius: 1px; top: 6px; }
.markdown-editor-mount .cm-subcard-close::before { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; bottom: 6px; }
.markdown-editor-mount .cm-subcard-open { padding-top: var(--spacing-xs); }

/* A line's own block styling has to clear the card's padding rather than replace
   it, or a quote or a fence inside a card starts back at the card's edge. */
.markdown-editor-mount .cm-card.cm-quoted { padding-left: calc(var(--card-text) + var(--spacing-md)); }
.markdown-editor-mount .cm-subcard.cm-quoted { padding-left: calc(var(--sub-text) + var(--spacing-md)); }

/* The handle for a section lives on the section: this is the build where the grip
   is in the card rather than in a gutter or in the outline. It is drawn out of the
   line's flow, so the heading sits where it would without it. */
.markdown-editor-mount .cm-card-controls { display: contents; }
.markdown-editor-mount .cm-card-grip, .markdown-editor-mount .cm-card-fold { position: absolute; top: 50%; transform: translateY(-50%); }
.markdown-editor-mount .cm-card-grip { background-image: radial-gradient(circle at 1.5px 1.5px, var(--theme-border-strong) 1.5px, transparent 1.6px); background-size: 5px 5px; cursor: grab; height: 15px; left: var(--card-grip); width: 9px; }
.markdown-editor-mount .cm-card-fold { align-items: center; background: none; border: none; color: var(--theme-text-muted); cursor: pointer; display: flex; height: 18px; justify-content: center; left: var(--card-fold); padding: 0; width: 14px; }
.markdown-editor-mount .cm-card-fold::before { border-bottom: 1.5px solid currentcolor; border-right: 1.5px solid currentcolor; content: ""; height: 5px; margin-top: -2px; transform: rotate(45deg); width: 5px; }
.markdown-editor-mount .cm-card-fold[aria-expanded="false"]::before { margin: 0 0 0 -2px; transform: rotate(-45deg); }
.markdown-editor-mount .cm-card-fold:hover { color: var(--theme-text); }
.markdown-editor-mount .cm-subcard-controls .cm-card-grip { height: 12px; left: var(--sub-grip); }
.markdown-editor-mount .cm-subcard-controls .cm-card-fold { left: var(--sub-fold); }

/* The hashes keep a lane of their own between the arrow and the words, so the
   heading does not move sideways when the caret arrives and shows them. */
.markdown-editor-mount .cm-card-head .cm-hanging-mark { left: var(--card-mark); transform: translateY(-50%); white-space: nowrap; width: auto; }
.markdown-editor-mount .cm-subcard-head .cm-hanging-mark { left: var(--sub-mark); transform: translateY(-50%); white-space: nowrap; width: auto; }

.markdown-editor-mount .cm-changed:not(.cm-card) { background: none; }

/* Dragging a card by its grip. The card it came from stays where it is, greyed,
   so the document does not reflow under the pointer while it is being aimed, and
   a single rule marks the gap it would drop into. */
.markdown-editor-mount .cm-reordering { cursor: grabbing; }
.markdown-editor-mount .cm-reordering .cm-content { user-select: none; }
.markdown-editor-mount .cm-card-lifted { opacity: 0.45; }
.markdown-editor-mount .cm-card-drop { background: var(--md-accent); border-radius: 1px; height: 2px; left: var(--spacing-lg); pointer-events: none; position: absolute; right: var(--spacing-lg); z-index: 2; }
.markdown-editor-mount .cm-card-drop::before { background: var(--md-accent); border-radius: 999px; content: ""; height: 8px; left: -3px; position: absolute; top: -3px; width: 8px; }
/* The rule says where, and the pill says what: mid-drag the section is off the
   page, so its name has to travel with the line that stands in for it. */
.markdown-editor-mount .cm-card-drop.stays { background: var(--theme-border-strong); }
.markdown-editor-mount .cm-card-drop.stays .cm-card-drop-name { border-color: var(--theme-border-strong); color: var(--theme-text-muted); }
.markdown-editor-mount .cm-card-drop-name { background: var(--theme-bg); border: 1px solid var(--md-accent); border-radius: 999px; color: var(--md-accent); font-size: 11px; font-weight: 600; padding: 2px 10px; position: absolute; right: 0; top: -11px; white-space: nowrap; }


/* How much of a card this edit has written, said where the card is named so a
   card that is shut still reports what is inside it. */
.markdown-editor-mount .cm-card-changed { color: var(--theme-text-secondary); font-size: 12px; font-weight: 400; margin-left: var(--spacing-md); white-space: nowrap; }
.markdown-editor-mount .cm-card-changed i { background: var(--color-danger); border-radius: 999px; display: inline-block; height: 6px; margin-right: 6px; vertical-align: middle; width: 6px; }

/* A collapsed card keeps its name and says what it is holding, in the place the
   body would have started. */
.markdown-editor-mount .cm-card-folded { color: var(--theme-text-muted); font-size: 12px; font-weight: 400; margin-left: var(--spacing-md); }
.markdown-editor-mount .cm-card-folded::before { content: "· "; }

/* A heading typed but not yet named: what it is about to make, and the one key
   that changes its mind. It is the only place the rule is written down. */
.markdown-editor-mount .cm-card-hint { color: var(--md-accent); font-size: 12px; font-weight: 400; margin-left: var(--spacing-md); }
.markdown-editor-mount .cm-card-hint kbd { background: var(--md-accent-soft); border-radius: var(--border-radius-sm); font-family: var(--font-family-mono); font-size: 11px; padding: 1px 4px; }

/* The menu holds a link among its buttons, and it has to read as one of them. */
a.markdown-editor-menu-item { box-sizing: border-box; text-decoration: none; }

/* The compiled prompt, set as the agent receives it: plain text, wrapped, with
   nothing hidden or drawn in place of its syntax. */
.workflow-prompt-text { background: var(--theme-bg); border: 1px solid var(--theme-border); border-radius: var(--border-radius-md); color: var(--theme-text); font-family: var(--font-family-mono); font-size: 13px; line-height: 1.6; margin: 0; overflow-x: auto; padding: var(--spacing-lg); white-space: pre-wrap; }