/* ========================================================================
   workflow.js — the Workflow tab: expected workflow, agent to-do and comparison.
   Tokens from brand.css / tokens.css only.
   ======================================================================== */

.wf-score {
  font-size: var(--ui-meta);
  padding: 1px var(--sv-space-2);
  border-radius: 999px;
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  color: var(--sv-ink-secondary);
  white-space: nowrap;
}
.wf-score.good { color: var(--ws-working-ink, var(--sv-ink)); border-color: var(--ws-working, var(--sv-hairline-strong)); }
.wf-score.low { color: var(--sv-danger); border-color: var(--sv-danger); }

.wf-steps {
  list-style: none;
  margin: 0;
  flex: 1;
  min-height: 0;
  padding: var(--sv-space-2) var(--sv-space-3);
  overflow: auto;
}
.wf-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-2);
  padding: 3px 0;
}
.wf-mark {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-ink-tertiary);
}
.wf-mark .icon { width: 14px; height: 14px; }
.wf-mark.done { color: var(--sv-ink); }
.wf-mark.doing { color: var(--ws-working-ink, var(--sv-ink)); }
.wf-mark .c-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ws-working); animation: sv-dot-breathe var(--pulse) var(--sv-ease-inout) infinite; }
.wf-step.done .wf-name { color: var(--sv-ink-secondary); text-decoration: line-through; text-decoration-color: var(--sv-hairline-strong); }
.wf-step.skipped .wf-name { color: var(--sv-ink-tertiary); }
.wf-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wf-purpose, .wf-note { font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.wf-note::before { content: "— "; }
.wf-tag {
  flex: none;
  font-size: var(--ui-meta);
  padding: 0 var(--sv-space-2);
  border-radius: 999px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  margin-top: 2px;
}
.wf-tag.missing { color: var(--sv-danger); }
.wf-tag.out_of_order { color: var(--sv-attention); }
.wf-foot {
  margin: 0;
  padding: 0 var(--sv-space-4) var(--sv-space-2);
  font-size: var(--ui-meta);
  color: var(--sv-ink-tertiary);
}

/* The side panel's Workflow tab (window.panel.addTab). */
.wf-pane-head { padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-2); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.wf-pane-title { font-size: var(--ui-text); font-weight: 600; color: var(--sv-ink); }
.wf-pane-meta { font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }

/* Earlier requests' workflows, folded under the current one. */
.wf-past { flex: 0 1 auto; min-height: 0; max-height: 45%; overflow: auto; border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.wf-past[hidden] { display: none; }
.wf-past-summary { cursor: pointer; padding: var(--sv-space-2) var(--sv-space-3); font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.wf-past-group { opacity: 0.75; }
.wf-past-group + .wf-past-group { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.wf-past-head { padding: var(--sv-space-2) var(--sv-space-3) 0; font-size: var(--ui-meta); font-weight: 600; color: var(--sv-ink-secondary); }
.wf-past .wf-steps { flex: none; overflow: visible; }