/* Workflows built with ReN (static/js/ren-workflows.js) — the prompt, the
   diagram and the run log inside the Workflow Agents screen. Colours follow
   the screen's own: white cards on --bg-page in light, navy panels in dark
   (the Portfolios overview's). The dashboard (workflows-dashboard.css) uses
   these tokens too. */

:root {
  --rf-card: #ffffff;
  --rf-card-2: #f7f8fb;
  --rf-line: #e6e8ee;
  --rf-line-2: #eef0f4;
  --rf-text: #01012c;
  --rf-text-2: #5f5b55;
  --rf-text-3: #7a756e;
  --rf-brand: #4369f4;
  --rf-brand-soft: #eef2ff;
  --rf-data: #4369f4;
  --rf-logic: #c27803;
  --rf-ai: #7c3aed;
  --rf-action: #0f9f6e;
  --rf-ok: #16a34a;
  --rf-err: #dc2626;
  --rf-warn: #b45309;
  --rf-warn-bg: #fff8eb;
  --rf-err-bg: #fef2f2;
  --rf-ok-bg: #f0fdf4;
  --rf-shadow: 0 1px 3px rgba(1, 1, 44, 0.08);
}
html[data-theme="dark"] {
  --rf-card: #131c2e;
  --rf-card-2: #182338;
  --rf-line: #273348;
  --rf-line-2: #1e2a3f;
  --rf-text: #e6edf3;
  --rf-text-2: #a9b4c4;
  --rf-text-3: #8290a6;
  --rf-brand: #6b8bff;
  --rf-brand-soft: rgba(67, 105, 244, 0.18);
  --rf-data: #6b8bff;
  --rf-logic: #e3a008;
  --rf-ai: #a78bfa;
  --rf-action: #34d399;
  --rf-ok: #4ade80;
  --rf-err: #f87171;
  --rf-warn: #fbbf24;
  --rf-warn-bg: rgba(251, 191, 36, 0.1);
  --rf-err-bg: rgba(248, 113, 113, 0.1);
  --rf-ok-bg: rgba(74, 222, 128, 0.1);
  --rf-shadow: none;
}

.rf-ic { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.rf-ic-sm { width: 14px; height: 14px; vertical-align: -2px; }
.rf-ic-xl { width: 40px; height: 40px; opacity: 0.35; }
.rf-muted { color: var(--rf-text-3); }

/* ── Agent list section ─────────────────────────────────────────────── */
.rf-sec { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rf-line-2); }
.rf-sec-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rf-text-3); padding: 4px 4px 8px;
}
.rf-sec-hdr span { display: inline-flex; align-items: center; gap: 6px; }
.rf-sec-hdr-classic { padding-top: 6px; }
html[data-theme="dark"] .rf-sec-hdr, html[data-theme="dark"] .rf-empty-list { color: rgba(247, 245, 240, 0.45); }
.rf-sec-new {
  border: 1px solid var(--rf-brand); background: transparent; color: var(--rf-brand);
  border-radius: 6px; padding: 3px 8px; font: 600 11px "Work Sans", sans-serif; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.rf-sec-new:hover { background: var(--rf-brand-soft); }
.rf-item .wf-item-toprow { gap: 8px; }
.rf-item .wf-item-icon { color: var(--rf-ai); }
.rf-item .wf-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-empty-list { font-size: 11.5px; line-height: 1.5; color: var(--rf-text-3); padding: 4px 6px 8px; }
.rf-conn-link {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 2px;
  border: 0; background: transparent; color: var(--rf-text-2); padding: 6px;
  font: 500 12px "Work Sans", sans-serif; cursor: pointer; border-radius: 6px;
}
html[data-theme="dark"] .rf-conn-link { color: rgba(247, 245, 240, 0.6); }
.rf-conn-link:hover { background: var(--rf-brand-soft); color: var(--rf-brand); }

.rf-pill {
  display: inline-block; font: 600 10px "Work Sans", sans-serif; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; vertical-align: 1px;
  background: var(--rf-line-2); color: var(--rf-text-2);
}
.rf-pill-active { background: rgba(22, 163, 74, 0.12); color: var(--rf-ok); }
.rf-pill-paused { background: var(--rf-warn-bg); color: var(--rf-warn); }

/* ── Right panel shell ──────────────────────────────────────────────── */
.rf-wrap { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; font-family: "Work Sans", sans-serif; color: var(--rf-text); }
.rf-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0;
  background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--rf-shadow);
}
.rf-top-l { min-width: 0; }
.rf-title { font-size: 16px; font-weight: 700; }
.rf-sub { font-size: 12px; color: var(--rf-text-2); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rf-desc { font-size: 12.5px; color: var(--rf-text-2); margin-top: 6px; max-width: 640px; line-height: 1.45; }
.rf-dirty { color: var(--rf-warn); }
.rf-top-r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* The agent's header is navy, like a report agent's (index.html .wf-right-hdr)
   and the dashboard's KPI band. */
.rf-top { background: #01012c; border-color: #273348; box-shadow: 0 1px 3px rgba(1, 1, 44, 0.12); color: #f7f5f0; }
.rf-top .rf-title { color: #fff; }
.rf-top .rf-sub,
.rf-top .rf-desc { color: rgba(247, 245, 240, 0.68); }
.rf-top .rf-muted { color: rgba(247, 245, 240, 0.5); }
.rf-top .rf-dirty { color: #f5b955; }
.rf-top .rf-btn { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #f7f5f0; }
.rf-top .rf-btn:hover:not([disabled]) { background: rgba(255, 255, 255, 0.07); border-color: #a5b8f7; color: #fff; }
.rf-top .rf-btn-primary { background: #4369f4; border-color: #4369f4; color: #fff; }
.rf-top .rf-btn-primary:hover:not([disabled]) { background: #3558e0; border-color: #3558e0; }
.rf-top .rf-btn-ghost { border-color: transparent; color: rgba(247, 245, 240, 0.55); }
.rf-top .rf-pill-active { background: rgba(26, 122, 74, 0.22); color: #4ade80; }
.rf-top .rf-pill-paused { background: rgba(255, 255, 255, 0.1); color: rgba(247, 245, 240, 0.75); }
.rf-top .rf-pill-draft { background: rgba(232, 196, 106, 0.18); color: #e8c46a; }

.rf-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 7px; border: 1px solid var(--rf-line); background: var(--rf-card); color: var(--rf-text);
  font: 600 12.5px "Work Sans", sans-serif; cursor: pointer; white-space: nowrap;
}
.rf-btn:hover:not([disabled]) { border-color: var(--rf-brand); color: var(--rf-brand); }
.rf-btn[disabled] { opacity: 0.55; cursor: default; }
.rf-btn-primary { background: var(--rf-brand); border-color: var(--rf-brand); color: #fff; }
.rf-btn-primary:hover:not([disabled]) { color: #fff; filter: brightness(1.08); }
.rf-btn-ghost { border-color: transparent; background: transparent; color: var(--rf-text-3); padding: 0 8px; }
.rf-btn-sm { height: 26px; padding: 0 9px; font-size: 11.5px; }

.rf-banner {
  position: relative; border-radius: 10px; padding: 10px 36px 10px 14px; font-size: 12.5px; line-height: 1.5; flex-shrink: 0;
}
.rf-banner ul { margin: 4px 0 0; padding-left: 18px; }
.rf-banner .rf-btn { margin-top: 8px; }
.rf-banner-err { background: var(--rf-err-bg); color: var(--rf-err); border: 1px solid rgba(220, 38, 38, 0.25); }
.rf-banner-warn { background: var(--rf-warn-bg); color: var(--rf-warn); border: 1px solid rgba(180, 83, 9, 0.25); margin-bottom: 12px; }
.rf-banner-ok { background: var(--rf-ok-bg); color: var(--rf-ok); border: 1px solid rgba(22, 163, 74, 0.25); }
.rf-banner-inline { margin-top: 10px; padding-right: 14px; }
.rf-banner-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; }

.rf-main { flex: 1; min-height: 0; display: flex; gap: 14px; }

/* ── Prompt / conversation ──────────────────────────────────────────── */
.rf-chat {
  width: 360px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 14px; box-shadow: var(--rf-shadow);
}
.rf-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rf-intro-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.rf-intro-sub { font-size: 12.5px; color: var(--rf-text-2); line-height: 1.5; margin-bottom: 12px; }
.rf-example, .rf-question {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 9px 11px;
  border: 1px solid var(--rf-line); border-radius: 9px; background: var(--rf-card-2); color: var(--rf-text);
  font: 400 12.5px/1.45 "Work Sans", sans-serif; cursor: pointer;
}
.rf-example:hover, .rf-question:hover { border-color: var(--rf-brand); background: var(--rf-brand-soft); }
.rf-question { margin: 8px 0 0; font-size: 12px; background: var(--rf-card); }
.rf-msg { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 11px; max-width: 92%; white-space: pre-wrap; word-wrap: break-word; }
.rf-msg-user { align-self: flex-end; background: var(--rf-brand); color: #fff; border-bottom-right-radius: 4px; }
.rf-msg-ren { align-self: flex-start; background: var(--rf-card-2); border: 1px solid var(--rf-line-2); border-bottom-left-radius: 4px; }
.rf-msg-err { align-self: flex-start; background: var(--rf-err-bg); color: var(--rf-err); }
.rf-msg-who { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--rf-ai); margin-bottom: 3px; }
.rf-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.rf-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--rf-text-3); animation: rf-blink 1.2s infinite; }
.rf-typing span:nth-child(2) { animation-delay: 0.2s; }
.rf-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes rf-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.rf-compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--rf-line-2); }
.rf-compose textarea {
  flex: 1; resize: none; border: 1px solid var(--rf-line); border-radius: 10px; padding: 9px 11px; min-height: 64px;
  font: 400 13px/1.45 "Work Sans", sans-serif; background: var(--rf-card-2); color: var(--rf-text); outline: none;
}
.rf-compose textarea:focus { border-color: var(--rf-brand); }
.rf-send {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--rf-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rf-send[disabled] { opacity: 0.5; cursor: default; }

/* ── Diagram ────────────────────────────────────────────────────────── */
.rf-canvas {
  flex: 1; min-width: 0; overflow-y: auto; padding: 18px;
  background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 14px; box-shadow: var(--rf-shadow);
  background-image: radial-gradient(var(--rf-line-2) 1px, transparent 1px); background-size: 18px 18px;
}
.rf-canvas-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 13px; color: var(--rf-text-2); }
.rf-flow { display: flex; flex-direction: column; align-items: center; padding: 4px 0 12px; }
.rf-node {
  position: relative; width: min(520px, 100%); display: flex; gap: 12px; align-items: flex-start;
  background: var(--rf-card); border: 1px solid var(--rf-line); border-left: 4px solid var(--rf-data);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(1, 1, 44, 0.06); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rf-node:hover { box-shadow: 0 2px 8px rgba(1, 1, 44, 0.1); }
.rf-node.rf-open { border-color: var(--rf-brand); }
.rf-node-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--rf-brand-soft); color: var(--rf-data);
}
.rf-node-body { flex: 1; min-width: 0; }
.rf-node-kind { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rf-text-3); }
.rf-node-title { font-size: 13.5px; font-weight: 700; margin-top: 1px; }
.rf-node-sub { font-size: 12px; color: var(--rf-text-2); margin-top: 3px; line-height: 1.45; word-wrap: break-word; }
.rf-node-edit { font-size: 11.5px; font-weight: 600; color: var(--rf-brand); align-self: center; }
.rf-node-st { width: 18px; align-self: center; }
.rf-k-logic { border-left-color: var(--rf-logic); }
.rf-k-logic .rf-node-ic { color: var(--rf-logic); background: rgba(194, 120, 3, 0.1); }
.rf-k-ai { border-left-color: var(--rf-ai); }
.rf-k-ai .rf-node-ic { color: var(--rf-ai); background: rgba(124, 58, 237, 0.1); }
.rf-k-action { border-left-color: var(--rf-action); }
.rf-k-action .rf-node-ic { color: var(--rf-action); background: rgba(15, 159, 110, 0.1); }
.rf-trigger { border-left-color: var(--rf-text-3); width: min(380px, 100%); border-radius: 999px; padding: 8px 18px 8px 10px; align-items: center; }
.rf-trigger .rf-node-ic { border-radius: 50%; color: var(--rf-text-2); background: var(--rf-line-2); }
.rf-arrow { width: 2px; height: 22px; background: var(--rf-line); position: relative; flex-shrink: 0; }
.rf-arrow::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--rf-line); border-bottom: 0;
}
.rf-end {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--rf-text-2);
  background: var(--rf-card-2); border: 1px solid var(--rf-line); border-radius: 999px; padding: 5px 14px;
}
.rf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rf-badge { font-size: 11px; background: var(--rf-card-2); border: 1px dashed var(--rf-line); border-radius: 6px; padding: 2px 7px; color: var(--rf-text-2); }
.rf-badge-stop { border-color: rgba(194, 120, 3, 0.5); color: var(--rf-logic); }
.rf-ref {
  display: inline-block; font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rf-brand);
  background: var(--rf-brand-soft); border-radius: 4px; padding: 0 5px; white-space: nowrap;
}
.rf-code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Run state on a node */
.rf-node-run { font-size: 12px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rf-line-2); color: var(--rf-text-2); }
.rf-node-note { color: var(--rf-warn); margin-top: 3px; }
.rf-st-running { border-color: var(--rf-brand); animation: rf-pulse 1.4s ease-in-out infinite; }
@keyframes rf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(67, 105, 244, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(67, 105, 244, 0); } }
.rf-st-success .rf-node-st { color: var(--rf-ok); }
.rf-st-failed { border-color: var(--rf-err); }
.rf-st-failed .rf-node-st, .rf-st-failed .rf-node-run { color: var(--rf-err); }
.rf-st-stopped { border-color: var(--rf-logic); }
.rf-st-stopped .rf-node-st, .rf-st-stopped .rf-node-run { color: var(--rf-logic); }
.rf-st-skipped { opacity: 0.6; border-style: dashed; }

/* Node details */
.rf-detail {
  width: min(520px, 100%); margin-top: -4px; padding: 14px; font-size: 12.5px; line-height: 1.5;
  background: var(--rf-card-2); border: 1px solid var(--rf-line); border-top: 0; border-radius: 0 0 12px 12px;
}
.rf-detail-desc { color: var(--rf-text-2); margin-bottom: 10px; }
.rf-args { width: 100%; border-collapse: collapse; }
.rf-args th { text-align: left; font-weight: 600; color: var(--rf-text-3); padding: 4px 12px 4px 0; vertical-align: top; width: 120px; text-transform: capitalize; }
.rf-args td { padding: 4px 0; word-break: break-word; }
.rf-prewrap { white-space: pre-wrap; }
.rf-detail-out { margin-top: 10px; font-size: 11.5px; color: var(--rf-text-2); }
.rf-detail-lbl { font-weight: 600; margin-top: 12px; }
.rf-pre {
  white-space: pre-wrap; word-wrap: break-word; max-height: 320px; overflow: auto; margin: 6px 0 0;
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--rf-card);
  border: 1px solid var(--rf-line-2); border-radius: 8px; padding: 10px; color: var(--rf-text);
}
.rf-json { margin-top: 12px; }
.rf-json summary { cursor: pointer; font-weight: 600; color: var(--rf-text-2); }
.rf-wouldsend { margin-top: 12px; border: 1px solid rgba(15, 159, 110, 0.35); border-radius: 10px; padding: 10px; background: var(--rf-card); }
.rf-wouldsend-hdr { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rf-action); margin-bottom: 6px; }
.rf-wouldsend-meta { font-size: 12px; color: var(--rf-text-2); }
.rf-holdings-wrap { max-height: 360px; overflow: auto; margin-top: 6px; border: 1px solid var(--rf-line-2); border-radius: 8px; }
.rf-holdings { width: 100%; border-collapse: collapse; font-size: 12px; }
.rf-holdings th { position: sticky; top: 0; background: var(--rf-card); text-align: left; font-weight: 600; color: var(--rf-text-3); padding: 6px 8px; border-bottom: 1px solid var(--rf-line-2); white-space: nowrap; }
.rf-holdings td { padding: 4px 8px; border-bottom: 1px solid var(--rf-line-2); color: var(--rf-text); }
.rf-holdings tr:last-child td { border-bottom: 0; }
.rf-holdings .rf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-trg-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: 12px; border-top: 1px solid var(--rf-line); margin: 8px 0 0; width: min(460px, 100%); }
.rf-trg-edit label { display: inline-flex; align-items: center; gap: 6px; }
.rf-trg-edit label[hidden] { display: none; }
.rf-trg-edit select, .rf-trg-edit input { font: 12.5px "Work Sans", sans-serif; padding: 4px 6px; border: 1px solid var(--rf-line); border-radius: 6px; background: var(--rf-card); color: var(--rf-text); }

/* Run summary + history */
.rf-runbar { width: min(520px, 100%); margin: 0 auto 14px; font-size: 12.5px; padding: 9px 12px; border-radius: 10px; background: var(--rf-card-2); border: 1px solid var(--rf-line); }
.rf-runbar-success { border-color: rgba(22, 163, 74, 0.35); }
.rf-runbar-failed { border-color: rgba(220, 38, 38, 0.35); color: var(--rf-err); }
.rf-runbar-stopped { border-color: rgba(194, 120, 3, 0.4); }
.rf-runbar-err { margin-top: 4px; }
.rf-history { width: min(520px, 100%); margin: 18px auto 0; }
.rf-history-hdr { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rf-text-3); margin-bottom: 6px; }
.rf-history-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--rf-text-2); font: 12px "Work Sans", sans-serif; cursor: pointer;
}
.rf-history-row:hover { background: var(--rf-brand-soft); }
.rf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rf-text-3); flex-shrink: 0; }
.rf-dot-success { background: var(--rf-ok); }
.rf-dot-failed { background: var(--rf-err); }
.rf-dot-stopped { background: var(--rf-logic); }
.rf-dot-running { background: var(--rf-brand); }

/* ── Connections ────────────────────────────────────────────────────── */
.rf-conn { flex: 1; min-height: 0; display: flex; gap: 14px; }
.rf-conn-list, .rf-conn-form {
  background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 14px; box-shadow: var(--rf-shadow); overflow-y: auto;
}
.rf-conn-list { flex: 1; min-width: 0; padding: 8px; }
.rf-conn-form { width: 380px; flex-shrink: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rf-conn-form-hdr { font-size: 14px; font-weight: 700; }
.rf-conn-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 13px; }
.rf-conn-row:hover { background: var(--rf-card-2); }
.rf-conn-body { flex: 1; min-width: 0; }
.rf-conn-body .rf-muted { font-size: 12px; }
.rf-conn-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-kind {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--rf-line); background: var(--rf-card); color: var(--rf-text); font: 500 12px "Work Sans", sans-serif;
}
.rf-kind.active { border-color: var(--rf-brand); background: var(--rf-brand-soft); color: var(--rf-brand); }
.rf-help { font-size: 12px; line-height: 1.5; color: var(--rf-text-2); background: var(--rf-card-2); border-radius: 8px; padding: 9px 11px; }
.rf-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--rf-text-2); }
.rf-field input {
  font: 400 13px "Work Sans", sans-serif; padding: 8px 10px; border: 1px solid var(--rf-line); border-radius: 8px;
  background: var(--rf-card-2); color: var(--rf-text); outline: none;
}
.rf-field input:focus { border-color: var(--rf-brand); }
.rf-pad { padding: 14px; }

@media (max-width: 1100px) {
  .rf-main, .rf-conn { flex-direction: column; }
  .rf-chat, .rf-conn-form { width: auto; max-height: 46vh; }
}

.rf-btn-signin { justify-content: center; height: 38px; font-size: 13.5px; }
.rf-manual { border-top: 1px solid var(--rf-line-2); padding-top: 10px; }
.rf-manual > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--rf-text-2); margin-bottom: 4px; }
.rf-manual > :not(summary) { margin-top: 10px; }
.rf-conn-form > * { flex-shrink: 0; }
.rf-conn-pick {
  font: 500 12.5px "Work Sans", sans-serif; padding: 3px 6px; margin-left: 4px; max-width: 100%;
  border: 1px solid var(--rf-line); border-radius: 6px; background: var(--rf-card); color: var(--rf-text);
}
.rf-banner-warn .rf-conn-pick { border-color: rgba(180, 83, 9, 0.45); }

/* ReN's questions, in place of the prompt box */
.rf-ask { margin: 0 12px 12px; padding: 14px; border: 1px solid var(--rf-brand); border-radius: 12px;
  background: var(--rf-card); box-shadow: 0 4px 16px rgba(67, 105, 244, 0.12); outline: none; }
.rf-ask-hdr { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700;
  color: var(--rf-ai); text-transform: uppercase; letter-spacing: 0.05em; }
.rf-ask-hdr span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.rf-ask-q { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 8px 0 10px; }
.rf-ask-opts { display: flex; flex-direction: column; gap: 6px; }
.rf-ask-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px;
  border: 1px solid var(--rf-line); border-radius: 9px; background: var(--rf-card-2); color: var(--rf-text);
  font: 500 13px/1.35 "Work Sans", sans-serif; cursor: pointer; }
.rf-ask-opt:hover, .rf-ask-opt.chosen { border-color: var(--rf-brand); background: var(--rf-brand-soft); }
.rf-ask-n { flex: 0 0 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--rf-text-3); border: 1px solid var(--rf-line); background: var(--rf-card); }
.rf-ask-opt:hover .rf-ask-n { color: var(--rf-brand); border-color: var(--rf-brand); }
.rf-ask-other { display: flex; gap: 8px; margin-top: 8px; }
.rf-ask-other input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px dashed var(--rf-line); border-radius: 9px;
  background: var(--rf-card); color: var(--rf-text); font: 13px "Work Sans", sans-serif; outline: none; }
.rf-ask-other input:focus { border-style: solid; border-color: var(--rf-brand); }
.rf-ask-other .rf-send { width: 36px; height: 36px; }
.rf-ask-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.rf-link { border: 0; background: none; padding: 0; color: var(--rf-text-3); font: 500 12px "Work Sans", sans-serif; cursor: pointer; }
.rf-link:hover { color: var(--rf-brand); }
.rf-msg-answers { display: flex; flex-direction: column; gap: 1px; }
.rf-ans-q { font-size: 11.5px; opacity: 0.8; }
.rf-ans-a { font-weight: 600; margin-bottom: 5px; }
.rf-ans-a:last-child { margin-bottom: 0; }

/* The workflow's latest runs, above the diagram (runStripHtml) */
.rf-runstrip {
  width: min(520px, 100%); margin: 0 auto 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--rf-text-2);
}
.rf-runstrip-lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rf-text-3); }
.rf-runchip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--rf-line); background: var(--rf-card); color: var(--rf-text-2);
  font: 600 11.5px "Work Sans", sans-serif; cursor: pointer; font-variant-numeric: tabular-nums;
}
.rf-runchip:hover { border-color: var(--rf-brand); color: var(--rf-brand); }
.rf-runchip.rf-on { border-color: var(--rf-brand); background: var(--rf-brand-soft); color: var(--rf-brand); }
.rf-dot.rf-dot-test { background: transparent; border: 2px solid var(--rf-text-3); box-sizing: border-box; }
.rf-dot-test.rf-dot-success { border-color: var(--rf-ok); }
.rf-dot-test.rf-dot-failed { border-color: var(--rf-err); }
.rf-dot-test.rf-dot-stopped { border-color: var(--rf-logic); }

/* Connections screen: who uses each one; kind colours as on the dashboard */
.rf-conn-users { margin-top: 3px; font-size: 12px; color: var(--rf-text-2); }
.rf-ck-slack { background: rgba(224, 30, 90, 0.1); color: #c21a55; }
.rf-ck-teams { background: rgba(80, 89, 201, 0.12); color: #4b53bc; }
.rf-ck-jira { background: rgba(38, 132, 255, 0.12); color: #1868db; }
.rf-ck-webhook { background: rgba(15, 159, 110, 0.12); color: #0b7d57; }
html[data-theme="dark"] .rf-ck-slack { background: rgba(244, 114, 182, 0.14); color: #f49ac1; }
html[data-theme="dark"] .rf-ck-teams { background: rgba(139, 147, 255, 0.16); color: #a5abff; }
html[data-theme="dark"] .rf-ck-jira { background: rgba(106, 165, 255, 0.16); color: #8ab8ff; }
html[data-theme="dark"] .rf-ck-webhook { background: rgba(52, 211, 153, 0.14); color: #5ee0a0; }

/* White text needs the full brand blue in dark mode too (#6b8bff is ~3:1). */
html[data-theme="dark"] .rf-btn-primary,
html[data-theme="dark"] .rf-send,
html[data-theme="dark"] .rf-msg-user { background: #4369f4; border-color: #4369f4; }

/* If/else: the two lists of steps side by side under the condition */
.rf-branches { display: flex; gap: 12px; width: min(760px, 100%); align-items: flex-start; }
.rf-branch { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 1px dashed var(--rf-line); border-radius: 12px; padding: 6px 8px 10px; margin-top: 10px; }
.rf-branch > .rf-node { width: 100%; }
.rf-branch-lbl { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rf-text-3); }
.rf-branch-taken { border-style: solid; border-color: var(--rf-brand); }
.rf-branch-not { opacity: 0.55; }
.rf-branch-empty { font-size: 12px; color: var(--rf-text-3); padding: 6px 0; }
@media (max-width: 720px) { .rf-branches { flex-direction: column; } }

/* Shared workflows */
.rf-shared-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.rf-banner-info { background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.3); color: var(--rf-text); display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding-right: 14px; }
.rf-compose-ro { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-trg-tz select { max-width: 210px; }
.rf-trg-tz[hidden] { display: none; }

/* Event trigger: its conditions, and what a run ran on */
.rf-trg-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-size: 12.5px; }
.rf-trg-ev[hidden] { display: none; }
.rf-trg-ev label { display: inline-flex; align-items: center; gap: 6px; }
.rf-trg-ev input[type="number"] { width: 64px; }
.rf-runbar-ev { margin-top: 4px; font-size: 12px; color: var(--rf-text-2); }

/* Governance: the agent policy's decisions on a run (services/workflow_policy.py) */
.rf-ic-xs { width: 12px; height: 12px; vertical-align: -2px; }
.rf-st-blocked { border-color: var(--rf-err); }
.rf-st-blocked .rf-node-st, .rf-st-blocked .rf-node-run { color: var(--rf-err); }
.rf-st-awaiting_approval { border-color: var(--rf-warn); box-shadow: 0 0 0 3px var(--rf-warn-bg); }
.rf-st-awaiting_approval .rf-node-st, .rf-st-awaiting_approval .rf-node-run { color: var(--rf-warn); }
.rf-st-rejected { border-color: var(--rf-line); border-style: dashed; }
.rf-st-rejected .rf-node-st, .rf-st-rejected .rf-node-run { color: var(--rf-text-3); }
.rf-dot-blocked { background: var(--rf-err); }
.rf-dot-awaiting_approval { background: var(--rf-warn); }
.rf-dot-rejected { background: var(--rf-text-3); }
.rf-runbar-blocked { border-color: rgba(220, 38, 38, 0.35); }
.rf-runbar-blocked .rf-runbar-err { color: var(--rf-err); }
.rf-runbar-awaiting_approval { border-color: rgba(180, 83, 9, 0.45); background: var(--rf-warn-bg); }
.rf-runbar-rejected { border-color: var(--rf-line); }

.rf-policy-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rf-line); background: var(--rf-card); color: var(--rf-text-2);
}
.rf-policy-deny { border-color: rgba(220, 38, 38, 0.35); color: var(--rf-err); background: var(--rf-err-bg); }
.rf-policy-require_approval { border-color: rgba(180, 83, 9, 0.4); color: var(--rf-warn); background: var(--rf-warn-bg); }
.rf-policy-approved { border-color: rgba(22, 163, 74, 0.35); color: var(--rf-ok); background: var(--rf-ok-bg); }
.rf-policy-chip .rf-muted { font-weight: 500; }

.rf-approval {
  margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--rf-card); border: 1px solid rgba(180, 83, 9, 0.35);
  color: var(--rf-text); display: flex; flex-direction: column; gap: 8px;
}
.rf-approval-hdr { font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.rf-approval-hdr .rf-ic { color: var(--rf-warn); margin-top: 2px; }
.rf-approval-why { font-size: 12.5px; color: var(--rf-text-2); }
.rf-approval .rf-json { margin-top: 0; }
.rf-approval-note {
  width: 100%; box-sizing: border-box; resize: vertical; font: 12.5px "Work Sans", sans-serif; padding: 7px 9px;
  border: 1px solid var(--rf-line); border-radius: 8px; background: var(--rf-card-2); color: var(--rf-text);
}
.rf-approval-note:focus { outline: none; border-color: var(--rf-brand); }
.rf-approval-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-approval-who { font-size: 12px; color: var(--rf-text-2); display: flex; gap: 6px; align-items: flex-start; }
.rf-decision { margin-top: 8px; font-size: 12px; color: var(--rf-text-2); }
.rf-decision-approved { color: var(--rf-ok); }
.rf-decision-rejected, .rf-decision-expired { color: var(--rf-text-3); }
.rf-evidence { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.rf-holds { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12px; color: var(--rf-text-2); }