/* castomFLOW — editor. Only what castomo-dashkit does not already draw.
 *
 * The workflow editor (js/views/editor.js): the toolbar, the canvas beside a
 * side panel, the banner over a preview, the drawer a step opens in on a
 * narrow screen — and the windows and panes the editor's modules draw into it
 * (editor-todo.js, editor-settings.js, editor-simulate.js, editor-propose.js,
 * editor-versions.js, editor-dialog.js). The canvas has its own sheet
 * (canvas.css), the step panel too (step-panel.css).
 *
 * Tokens only; the kit's breakpoints only (§0.36): 860 puts the side panel
 * under the canvas (the shell goes phone there too), 640 is where the kit's
 * drawer becomes a bottom sheet, 420 where a row of actions gives its primary
 * a row of its own (§5f).
 */

/* The editor takes the page's whole width: a drawing and its panel need it more than a column of text does. */
.page:has(> .ed) { max-width: none; }

.ed { min-inline-size: 0; }
.ed .page-head { margin: 0; align-items: flex-start; }
.ed .page-head h1 { overflow-wrap: anywhere; }

/* ---------- the toolbar ---------- */
.ed-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); font-size: var(--t-1); }
.ed-save { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); color: var(--ink-3); }
.ed-save-words { display: inline-flex; align-items: center; gap: var(--s-2); }
.ed-save-words .ci { --ci-size: 16px; }
.ed-save[data-state="failed"] .ed-save-words { color: var(--bad); font-weight: 650; }
.ed-save[data-state="saved"] .ed-save-words .ci { color: var(--ok); }
.ed-actions { display: flex; flex-wrap: wrap; gap: var(--s0); align-items: center; }
/* A preview is decided in its banner; the toolbar waits, visibly, until it is over. */
.ed-actions[inert] { opacity: .45; }
.ed-more { display: inline-flex; }
.ed-menu-hint { display: block; color: var(--ink-3); font-size: var(--t-2); font-weight: 500; }
.menu-item.ed-menu-danger:not([disabled]) { color: var(--bad); }
.menu-item.ed-menu-danger:not([disabled]) .ci { color: var(--bad); }
.menu-item[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- notices and the preview banner ---------- */
.ed-notices[hidden], .ed-banner-host[hidden] { display: none; }
.ed-notice { position: relative; }
.ed-notice > .alert { padding-inline-end: calc(var(--target) + var(--s0)); }
.ed-notice-close { position: absolute; inset-block-start: var(--s-1); inset-inline-end: var(--s-1); }
.ed-banner { --tone: var(--accent-ink); outline: 2px solid var(--accent); outline-offset: -2px; }
.ed-banner-actions { margin-block-start: var(--s0); }

/* ---------- the canvas and the side panel ---------- */
.ed-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--gap);
  align-items: start;
}
.ed-main { display: grid; gap: var(--s1); min-inline-size: 0; }
.ed-canvas-bar { display: flex; justify-content: flex-end; min-block-size: 0; }
.ed-canvas-host { min-inline-size: 0; }
/* The drawing gets the screen's height, less the toolbar above it; never less than a working minimum. */
.ed-canvas-host .cv-surface { min-block-size: max(440px, calc(100dvh - 320px)); }
.ed-side {
  position: sticky;
  inset-block-start: var(--s1);
  max-block-size: calc(100dvh - var(--s3));
  overflow-y: auto;
  overscroll-behavior: contain;
  min-inline-size: 0;
}
.ed-side .tabs { margin-block-end: var(--s2); }
.ed-tab-panel { min-inline-size: 0; }
.ed.is-previewing .ed-canvas-host .cv-surface { border-color: var(--accent); border-style: dashed; }

@media (min-width: 1440px) {
  .ed-body { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* 860 px, where the kit's shell goes phone: the side panel goes under the canvas, in the page's
   flow, and a selected step opens in the drawer instead (views/editor.js). */
@media (max-width: 860px) {
  .ed-body { grid-template-columns: minmax(0, 1fr); }
  .ed-side { position: static; max-block-size: none; overflow: visible; }
  .ed-canvas-host .cv-surface { min-block-size: max(360px, 60dvh); }
}

/* 420 px: the toolbar's primary takes a row of its own, first, under the thumb (§5f). */
@media (max-width: 420px) {
  .ed-actions .btn-primary { order: -1; flex-basis: 100%; justify-content: center; }
}

/* ---------- the step's drawer on a narrow screen ---------- */
.ed-step-sheet .ed-sheet-body { padding-block: var(--s2) var(--s3); }
@media (max-width: 640px) {
  .ed-step-sheet .ed-sheet-body { padding-inline: var(--s2); padding-block-end: calc(var(--s3) + env(safe-area-inset-bottom)); }
}

/* ---------- to-do (editor-todo.js) ---------- */
.ed-todo { min-inline-size: 0; }
.ed-todo-group { display: grid; gap: var(--s0); }
.ed-todo-head { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t0); font-weight: 650; color: var(--ink); }
.ed-todo-head .ci { --ci-size: 18px; }
.ed-todo-group[data-kind="blocker"] .ed-todo-head .ci { color: var(--bad); }
.ed-todo-group[data-kind="guess"] .ed-todo-head .ci { color: var(--warn); }
.ed-todo-group[data-kind="note"] .ed-todo-head .ci { color: var(--info); }
.ed-todo-list > li.ed-todo-item { flex-wrap: wrap; align-items: flex-start; }
.ed-todo-item .list-icon[data-kind="blocker"] { color: var(--bad); }
.ed-todo-item .list-icon[data-kind="guess"] { color: var(--warn); }
.ed-todo-item .list-icon[data-kind="note"] { color: var(--info); }
.ed-todo-item .list-main { flex: 1 1 12rem; gap: var(--s-1); }
.ed-todo-said { color: var(--ink); overflow-wrap: anywhere; }
.ed-todo-fix { flex: none; margin-inline-start: auto; }
.ed-todo-fix .btn { max-inline-size: 100%; white-space: normal; text-align: start; }
.ed-todo-who { color: var(--ink-3); font-size: var(--t-1); }
/* A step named in a line: pressing it selects the step, so it reads as a link with its kind's icon. */
.ed-step-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: var(--t-1);
  font-weight: 600;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ed-step-link .ci { --ci-size: 16px; flex: none; }
.ed-step-link > span { overflow-wrap: anywhere; }
.ed-step-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- settings (editor-settings.js) ---------- */
.ed-settings { min-inline-size: 0; }
.ed-label { color: var(--ink); font-weight: 650; font-size: var(--t-1); }
/* The time zone list is 400 names long, some of them long: held to the panel (§4d). */
.select.ed-wide-select { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

/* ---------- windows (editor-dialog.js) ---------- */
.ed-sheet .dialog-head { position: relative; }
.ed-sheet-close { flex: none; margin-inline-start: auto; }
.ed-working { display: flex; align-items: flex-start; gap: var(--s1); color: var(--ink-2); }
.ed-working > .ci { --ci-size: 22px; flex: none; color: var(--accent-ink); animation: dk-spin 1.6s linear infinite; }
.ed-working b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ed-working > .ci { animation: none; } }
.textarea.ed-json { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-1); line-height: 1.5; }
.ed-quote { margin: 0; padding-inline-start: var(--s1); border-inline-start: 3px solid var(--rule-strong); color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }

/* ---------- a run's path (editor-simulate.js runPane) ---------- */
.ed-run-pane { min-inline-size: 0; }
.ed-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.ed-pane-head .card-title { margin-inline-end: auto; }

/* ---------- a proposed change (editor-propose.js) ---------- */
.ed-diff { min-inline-size: 0; }
.ed-diff-group { display: grid; gap: var(--s0); }
.ed-diff-group[data-kind="added"] .ed-todo-head .ci { color: var(--ok); }
.ed-diff-group[data-kind="removed"] .ed-todo-head .ci { color: var(--bad); }
.ed-diff-list > li { flex-wrap: wrap; align-items: flex-start; }
.ed-diff-step { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); min-inline-size: 0; }
.ed-diff-step > .ci { --ci-size: 18px; color: var(--ink-3); }
.ed-diff-step b { color: var(--ink); overflow-wrap: anywhere; }
.list > li.ed-diff-changed { display: grid; gap: var(--s0); }
.ed-diff-settings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-1); }
.ed-diff-settings > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s0); min-inline-size: 0; }
.ed-diff-settings .ci { --ci-size: 14px; color: var(--ink-3); }
.ed-diff-prop { font-weight: 650; color: var(--ink); }
.ed-diff-before { color: var(--ink-3); text-decoration: line-through; overflow-wrap: anywhere; }
.ed-diff-after { color: var(--ink); overflow-wrap: anywhere; }
.list > li.ed-diff-link { display: grid; gap: var(--s-1); }
.ed-diff-ends { list-style: none; margin: 0; padding: 0; }
.ed-diff-ends > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s0); overflow-wrap: anywhere; }
.ed-diff-ends .ci { --ci-size: 14px; color: var(--ink-3); }

/* ---------- versions (editor-versions.js) ---------- */
.ed-version-list > li { flex-wrap: wrap; }
.ed-version-list .list-main { flex: 1 1 12rem; }
.ed-version-note { color: var(--ink-2); overflow-wrap: anywhere; }