#mo-tree {
  flex: 1 1 42%;
  min-width: 0;
  height: 340px;
}

.mo-edge {
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.mo-arrowhead {
  fill: var(--color-border);
}

.mo-node rect {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 1.5;
  transition: stroke 0.3s ease, fill 0.3s ease, stroke-width 0.3s ease;
}

.mo-node text {
  font-size: 10.5px;
  text-anchor: middle;
  transition: fill 0.3s ease;
}

.mo-node.mo-trim rect {
  stroke-dasharray: 3, 3;
}

.mo-node.pending {
  opacity: 0.35;
}

.mo-node.active rect {
  stroke: var(--color-link);
  stroke-width: 2;
  fill: var(--color-bg-inset);
}

.mo-node.active text {
  fill: var(--color-fg);
}

.mo-node.done {
  opacity: 0.6;
}

.mo-node.mo-check.fail rect {
  stroke: var(--color-danger);
}

.mo-node.mo-check.fail text {
  fill: var(--color-danger);
}

.mo-node.mo-check.pass rect {
  stroke: var(--color-success);
}

.mo-node.mo-check.pass text {
  fill: var(--color-success);
}

.mo-side {
  flex: 1 1 58%;
  min-width: 0;
  height: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.mo-draft {
  flex: 0 0 auto;
  padding: 0.75em;
}

.mo-draft-text {
  font-family: var(--font-mono);
  font-size: 0.8em;
  line-height: 1.5;
  min-height: 3.6em;
  color: var(--color-fg);
}

.mo-budget {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.6em;
}

.mo-budget-bar {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.mo-budget-fill {
  height: 100%;
  width: 0;
  background: var(--color-link);
  transition: width 0.5s ease, background-color 0.3s ease;
}

.mo-budget-fill.over {
  background: var(--color-danger);
}

.mo-budget-fill.sent {
  background: var(--color-success);
}

.mo-budget-count {
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--color-fg-muted);
  white-space: nowrap;
}

.mo-log {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 560px) {
  #mo-tree,
  .mo-side {
    height: auto;
  }

  #mo-tree {
    height: 320px;
  }
}
