/* workflow.css — shared styles for the AI Workflows builder.
 * Used by the full /workflows page and by the inline panel that slides into the
 * homepage Build stage. Token-driven; dark-mode comes for free from tokens.css. */

/* ── Page chrome (full /workflows page only) ───────────────────────────── */
.wf-body { background: var(--bg); color: var(--fg); min-height: 100vh; }
.wf-main { max-width: 820px; margin: 0 auto; padding: var(--s-6, 24px) var(--s-4, 16px) 90px; }
.wf-toggle-row { display: flex; justify-content: center; margin: 18px 0 30px; }
.wf-hero { text-align: center; margin-bottom: 24px; }
.wf-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
.wf-hero h1 { font-size: clamp(27px, 4vw, 40px); line-height: 1.1; margin: 0 0 12px; font-weight: 800; letter-spacing: -.02em; }
.wf-hero h1 .accent { background: linear-gradient(90deg, var(--dp-blue, #2563eb), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wf-hero p { color: var(--fg-muted); font-size: 15.5px; line-height: 1.55; max-width: 580px; margin: 0 auto; }

/* ── Inline panel header (homepage swap) ───────────────────────────────── */
.wf-inline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wf-inline-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.wf-inline-title span { color: var(--fg-muted); font-weight: 600; font-size: 13px; }
.wf-expand { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.wf-expand:hover { color: var(--fg); border-color: var(--dp-blue, #2563eb); }

/* ── Build stage swap (homepage) — one container that resizes ────────────────
   The builders share a single frame whose height morphs from the old size to
   the new one (driven inline by build-mode-toggle.js); the content itself just
   does a quick, simple fade-in. Feels like one list changing size + contents. */
.tool-wrap { position: relative; }
.dp-build-panel { transition: opacity .2s ease, transform .2s ease; will-change: opacity, transform; }
.dp-build-panel[hidden] { display: none; }
.dp-build-panel.is-entering { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .dp-build-panel { transition: opacity .15s ease; }
  .dp-build-panel.is-entering { transform: none; }
}

/* ── Builder input panel ───────────────────────────────────────────────── */
.wf-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.wf-tt-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); font-weight: 700; margin: 0 0 8px; }
.wf-tasktype { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wf-tt { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.wf-tt:hover { color: var(--fg); border-color: var(--dp-blue, #2563eb); }
.wf-tt[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--dp-blue, #2563eb), #7c3aed); border-color: transparent; }
.wf-tt svg { width: 15px; height: 15px; flex: 0 0 auto; }
.wf-input-area { position: relative; }
.wf-textarea { width: 100%; box-sizing: border-box; min-height: 112px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; line-height: 1.55; padding: 14px; }
.wf-textarea:focus { outline: none; border-color: var(--dp-blue, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wf-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wf-lang-wrap { display: flex; align-items: center; gap: 7px; color: var(--fg-muted); font-size: 13px; }
.wf-lang { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.wf-spacer { flex: 1 1 auto; }
.wf-generate { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--dp-blue, #2563eb), #7c3aed); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 11px; transition: filter .15s ease, transform .05s ease, box-shadow .2s ease; box-shadow: 0 6px 18px -8px rgba(37,99,235,.6); }
.wf-generate:hover { filter: brightness(1.05); box-shadow: 0 8px 22px -8px rgba(124,58,237,.7); }
.wf-generate:active { transform: translateY(1px); }
.wf-generate:disabled { opacity: .6; cursor: default; box-shadow: none; }
.wf-generate.is-busy { pointer-events: none; }
.wf-cost-pill { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); padding: 2px 8px; border-radius: 999px; }
.wf-hint { font-size: 12px; color: var(--fg-muted); margin-top: 10px; text-align: center; }

.wf-loading { display: none; align-items: center; justify-content: center; gap: 12px; color: var(--fg-muted); font-size: 14px; padding: 44px 0; }
.wf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--dp-blue, #2563eb); animation: wf-spin 0.7s linear infinite; }
@keyframes wf-spin { to { transform: rotate(360deg); } }

.wf-empty { margin-top: 28px; }
.wf-empty-lead { text-align: center; font-size: 13px; color: var(--fg-muted); margin-bottom: 12px; }
.wf-empty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.wf-ex { display: flex; gap: 11px; align-items: flex-start; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; font: inherit; color: var(--fg); transition: border-color .15s ease, transform .12s ease, box-shadow .2s ease; }
.wf-ex:hover { border-color: var(--dp-blue, #2563eb); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wf-ex-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.wf-ex b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.wf-ex span { font-size: 12.5px; color: var(--fg-muted); }

.wf-results { display: none; margin-top: 34px; }
.wf-copyall-row { display: none; justify-content: center; gap: 10px; margin: 20px 0 0; }
.wf-copyall { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--fg); padding: 9px 15px; border-radius: 10px; cursor: pointer; transition: border-color .15s ease; }
.wf-copyall:hover { border-color: var(--dp-blue, #2563eb); }

/* ── Workflow map (results) ────────────────────────────────────────────── */
.wfm-intro { text-align: center; margin-bottom: 22px; }
.wfm-title { font-size: 23px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.wfm-sub { color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; margin: 0 auto; max-width: 600px; }
.wfm-guide { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 16px auto 0; max-width: 620px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--fg); background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(124,58,237,.06)); border: 1px solid rgba(37,99,235,.18); }
.wfm-guide svg { flex: 0 0 auto; color: var(--dp-blue, #2563eb); margin-top: 1px; }

.wfm-rail { position: relative; list-style: none; margin: 0; padding: 0; }
.wfm-rail::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; width: 2.5px; border-radius: 2px; background: linear-gradient(180deg, var(--dp-blue, #2563eb), #7c3aed); opacity: .55; }
.wfm-row { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 9px 0; }
.wfm-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--c, var(--dp-blue)); color: var(--c, var(--dp-blue)); box-shadow: 0 0 0 4px var(--bg), 0 4px 14px -6px var(--c, var(--dp-blue)); }
.wfm-num { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--c, var(--dp-blue)); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.wfm-cap .wfm-node { background: linear-gradient(135deg, var(--dp-blue, #2563eb), #7c3aed); border-color: transparent; color: #fff; }
.wfm-cap-body { align-self: center; }
.wfm-cap-body b { display: block; font-size: 14.5px; font-weight: 800; }
.wfm-cap-body span { font-size: 13px; color: var(--fg-muted); }
.wfm-cap-start .wfm-cap-body span { color: var(--fg); opacity: .85; }
.wfm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; box-shadow: var(--shadow-sm); animation: wfm-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wfm-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wfm-card { animation: none; } }
.wfm-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c, var(--fg-muted)); }
.wfm-step-title { font-size: 16px; font-weight: 700; margin: 3px 0 0; }
.wfm-explain { font-size: 14px; line-height: 1.55; color: var(--fg); margin: 9px 0 0; }
.wfm-tool { display: flex; align-items: center; gap: 11px; margin: 13px 0 0; padding: 9px 11px; background: var(--surface-2); border-radius: 11px; }
.wf-logo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.wfm-tool-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wfm-tool-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.wf-model-select { font: inherit; font-size: 14px; font-weight: 600; color: var(--fg); background: transparent; border: 0; padding: 0; cursor: pointer; max-width: 100%; }
.wf-model-name { font-size: 14px; font-weight: 600; }
.wf-open { margin-left: auto; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--dp-blue, #2563eb); text-decoration: none; white-space: nowrap; padding: 6px 11px; border-radius: 8px; border: 1px solid transparent; transition: border-color .15s ease; }
.wf-open:hover { border-color: var(--dp-blue, #2563eb); }
.wfm-prompt-block { margin-top: 12px; }
.wfm-prompt-toggle { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); background: transparent; border: 1px dashed var(--border); border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.wfm-prompt-toggle:hover { color: var(--fg); border-color: var(--dp-blue, #2563eb); }
.wfm-prompt-toggle .chev { transition: transform .2s ease; }
.wfm-prompt-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.wfm-prompt-wrap { position: relative; margin-top: 10px; }
.wfm-prompt { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; line-height: 1.6; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 42px 14px 14px; color: var(--fg); }
.wf-copy { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: color .15s, border-color .15s; }
.wf-copy:hover { color: var(--fg); border-color: var(--dp-blue, #2563eb); }
.wf-copy.is-copied { color: #059669; border-color: #059669; }
.wfm-next { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-left: 3px solid #7c3aed; background: rgba(124,58,237,.07); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.5; color: var(--fg); }
.wfm-next svg { flex: 0 0 auto; color: #7c3aed; margin-top: 1px; }
.wfm-next b { font-weight: 700; }

/* ── Automations launch panel (homepage inline) ────────────────────────── */
.au-launch { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); text-align: center; }
.au-launch-ic { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #f59e0b, #db2777); }
.au-launch h3 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.au-launch p { color: var(--fg-muted); font-size: 14px; line-height: 1.55; max-width: 480px; margin: 0 auto 16px; }
.au-launch-input { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; line-height: 1.5; padding: 12px; }
.au-launch-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
.au-launch-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; border: 0; cursor: pointer; background: linear-gradient(135deg, #f59e0b, #db2777); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 11px; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(219,39,119,.6); transition: filter .15s ease; }
.au-launch-cta:hover { filter: brightness(1.05); }
.au-launch-note { font-size: 12px; color: var(--fg-muted); margin-top: 10px; }

@media (max-width: 560px) {
  .wfm-row { grid-template-columns: 36px 1fr; gap: 12px; }
  .wfm-node { width: 36px; height: 36px; }
  .wfm-rail::before { left: 17px; }
}

/* ── AI Workflows canvas (Flora-style) ─────────────────────────────────── */
.wfc-host { margin-top: 18px; }
.wfc-stage { position: relative; height: 62vh; min-height: 440px; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 0) 0 0 / 22px 22px, var(--surface); }
.wfc-stage.is-grabbing { cursor: grabbing; }
.wfc-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.wfc-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.wfc-edge { fill: none; stroke: var(--dp-blue, #2563eb); stroke-width: 2; opacity: .5; }
.wfc-node { position: absolute; box-sizing: border-box; background: var(--surface); border: 1.5px solid var(--border);
  border-left: 4px solid var(--c, var(--dp-blue)); border-radius: 13px; padding: 11px 13px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; user-select: none; }
.wfc-node:hover { box-shadow: 0 8px 24px -10px var(--c, rgba(0,0,0,.3)); }
.wfc-node.is-selected { border-color: var(--c, var(--dp-blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.wfc-node-head { display: flex; align-items: center; gap: 8px; color: var(--c, var(--dp-blue)); }
.wfc-node-ic { display: inline-flex; }
.wfc-node-kicker { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.wfc-node-title { font-size: 14px; font-weight: 700; color: var(--fg); margin: 7px 0 0; line-height: 1.3; }
.wfc-node-model { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
.wfc-node-model .wf-logo { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.wfc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wfc-start, .wfc-finish { border-left-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface)); }

.wfc-toolbar { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; z-index: 5; padding: 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); }
.wfc-tb { width: 30px; height: 30px; border: 0; background: transparent; color: var(--fg); font-size: 16px; font-weight: 700; border-radius: 7px; cursor: pointer; line-height: 1; }
.wfc-tb:hover { background: var(--surface-2); }
.wfc-hint { position: absolute; bottom: 10px; left: 12px; font-size: 11px; color: var(--fg-muted); pointer-events: none;
  background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 3px 8px; border-radius: 7px; }

.wfc-inspector { position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: 56%; overflow: auto; z-index: 6;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.5); }
.wfc-insp-head { display: flex; align-items: center; justify-content: space-between; }
.wfc-insp-step { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.wfc-insp-close { width: 28px; height: 28px; border: 0; background: var(--surface-2); border-radius: 8px; color: var(--fg); font-size: 16px; cursor: pointer; }
.wfc-insp-title { font-size: 16px; font-weight: 700; margin: 6px 0 0; }
.wfc-insp-explain { font-size: 13.5px; line-height: 1.55; color: var(--fg); margin: 7px 0 0; }
.wfc-insp-tool { display: flex; align-items: center; gap: 10px; margin: 11px 0 0; padding: 9px 11px; background: var(--surface-2); border-radius: 11px; }
.wfc-insp-tool-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wfc-insp-tool-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.wfc-insp-prompt-wrap { position: relative; margin-top: 11px; }
.wfc-insp-prompt { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; line-height: 1.6; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 40px 12px 12px; color: var(--fg); }
.wfc-insp-next { margin-top: 11px; padding: 9px 11px; border-left: 3px solid #7c3aed; background: rgba(124,58,237,.07); border-radius: 0 9px 9px 0; font-size: 12.5px; color: var(--fg); }

/* unified-tool suggestion banner */
.wfm-unified { display: flex; align-items: center; gap: 11px; text-align: left; margin: 14px auto 0; max-width: 640px;
  padding: 12px 15px; border-radius: 13px; font-size: 13px; line-height: 1.5; color: var(--fg);
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(219,39,119,.1)); border: 1px solid rgba(245,158,11,.3); }
.wfm-unified > svg { flex: 0 0 auto; color: #f59e0b; }
.wfm-unified-go { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #db2777); padding: 7px 13px; border-radius: 9px; text-decoration: none; }

/* "tools you already have" chips */
.wf-subs-wrap { margin-bottom: 14px; }
.wf-subs { display: flex; flex-wrap: wrap; gap: 7px; }
.wf-sub { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.wf-sub:hover { color: var(--fg); border-color: var(--dp-blue, #2563eb); }
.wf-sub[aria-pressed="true"] { color: #fff; background: var(--dp-blue, #2563eb); border-color: transparent; }

/* Automations inline: target-platform picker */
.au-launch-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 2px 0 14px; }
.au-pf { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.au-pf:hover { color: var(--fg); border-color: #f59e0b; }
.au-pf[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #f59e0b, #db2777); border-color: transparent; }

/* ── AI Workflows step cards (clean + animated) ────────────────────────── */
.wfx-intro { text-align: center; margin-bottom: 22px; }
.wfx-title { font-size: 23px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.wfx-sub { color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; margin: 0 auto; max-width: 600px; }
.wfx-list { list-style: none; margin: 0; padding: 0; }
.wfx-step { margin: 0; opacity: 0; animation: wfx-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wfx-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wfx-step { animation: none; opacity: 1; } }
.wfx-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 18px 22px; box-shadow: var(--shadow-sm); overflow: hidden; }
.wfx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--dp-blue)); }
.wfx-top { display: flex; align-items: flex-start; gap: 13px; }
.wfx-badge { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--c, #2563eb), color-mix(in srgb, var(--c, #2563eb) 55%, #000)); box-shadow: 0 6px 16px -6px var(--c, #2563eb); }
.wfx-num { position: absolute; right: -5px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--surface); color: var(--c, var(--dp-blue));
  border: 1.5px solid var(--c, var(--dp-blue)); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.wfx-head { min-width: 0; padding-top: 2px; }
.wfx-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--c, var(--fg-muted)); }
.wfx-step-title { font-size: 17px; font-weight: 700; margin: 3px 0 0; line-height: 1.25; }
.wfx-explain { font-size: 14px; line-height: 1.55; color: var(--fg); margin: 12px 0 0; }
.wfx-tool { display: flex; align-items: center; gap: 11px; margin: 14px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.wfx-tool-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wfx-tool-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
/* Prompt shown in full by default — a clear, copy-ready block per step. */
.wfx-prompt-block { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.wfx-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.wfx-prompt-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--c, var(--fg-muted)); min-width: 0; }
.wfx-prompt-label svg { flex: 0 0 auto; }
.wfx-prompt-head .wf-copy { position: static; margin: 0; flex: 0 0 auto; }
.wfx-prompt { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px; line-height: 1.65; background: var(--bg); padding: 13px 14px; color: var(--fg); max-height: 340px; overflow: auto; }
.wfx-next { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; padding: 10px 12px; border-left: 3px solid var(--c, #7c3aed);
  background: color-mix(in srgb, var(--c, #7c3aed) 8%, transparent); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.5; color: var(--fg); }
.wfx-next svg { flex: 0 0 auto; color: var(--c, #7c3aed); margin-top: 1px; }
.wfx-conn { display: flex; justify-content: center; padding: 6px 0; }
.wfx-conn-line { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(var(--border), transparent); }

/* header credit meter — shared (was only inline on the homepage, so it broke on /workflows) */
.dp-credit-meter { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--fg); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dp-credit-meter small { color: var(--fg-muted); font-weight: 600; }
@media (max-width: 720px) { .dp-credit-meter { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } }

/* hero typewriter caret (homepage) */
.dp-caret { display: inline-block; width: 3px; height: .92em; background: var(--dp-blue, #2563eb); margin-left: 5px; vertical-align: -2px; border-radius: 2px; animation: dp-blink 1s steps(1) infinite; }
@keyframes dp-blink { 50% { opacity: 0; } }

/* ── Live run: Run button, progress, per-step run states ─────────────────── */
.wfx-runbar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.wfx-run-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid transparent; background: var(--dp-blue, #008ffe); color: #fff; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
.wfx-run-btn:hover { filter: brightness(1.05); }
.wfx-run-btn:disabled, .wfx-run-btn.is-busy { opacity: .65; cursor: default; }
.wfx-run-note { font-size: 12px; color: var(--fg-muted); max-width: 46ch; line-height: 1.4; }
.wfx-progress { width: min(420px, 100%); height: 6px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.12));
  overflow: hidden; }
.wfx-progress-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--dp-blue, #008ffe);
  transition: width .35s cubic-bezier(.2,.7,.2,1); }

/* run chip in the step kicker (Running… / Verified 90% / Manual step) */
.wfx-runchip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--dp-blue, #008ffe);
  background: var(--dp-blue-soft, rgba(0,143,254,.1)); vertical-align: middle; }
.wfx-runchip[data-pass="true"] { color: var(--success, #16a34a); background: var(--success-dim, rgba(22,163,74,.12)); }
.wfx-runchip[data-pass="false"] { color: var(--danger, #ef4444); background: rgba(239,68,68,.12); }

/* per-step run state — a coloured left rail + subtle tint on the card */
.wfx-step[data-run-state="running"] .wfx-card { box-shadow: 0 0 0 1.5px var(--dp-blue, #008ffe), var(--shadow-sm); }
.wfx-step[data-run-state="running"] .wfx-card::before { background: var(--dp-blue, #008ffe);
  animation: wfx-pulse 1.2s ease-in-out infinite; }
.wfx-step[data-run-state="done"] .wfx-card::before { background: var(--success, #16a34a); }
.wfx-step[data-run-state="failed"] .wfx-card::before { background: var(--danger, #ef4444); }
.wfx-step[data-run-state="manual"] .wfx-card::before { background: var(--fg-muted, #6b7280); }
@keyframes wfx-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .wfx-step[data-run-state="running"] .wfx-card::before { animation: none; } }

/* streamed result block under a step */
.wfx-result { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.wfx-result-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wfx-result-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.wfx-result-gaps { font-size: 11px; color: var(--danger, #ef4444); line-height: 1.4; }
.wfx-result-pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5;
  color: var(--fg); font-family: var(--font-body, system-ui, -apple-system, sans-serif); max-height: 260px; overflow: auto; }

/* canvas node run-states (the canvas module shares these tokens) */
.wfc-node[data-run-state="running"] { box-shadow: 0 0 0 1.5px var(--dp-blue, #008ffe); }
.wfc-node[data-run-state="done"] { box-shadow: 0 0 0 1.5px var(--success, #16a34a); }
.wfc-node[data-run-state="failed"] { box-shadow: 0 0 0 1.5px var(--danger, #ef4444); }
.wfc-node-spin { width: 12px; height: 12px; margin-left: auto; border-radius: 50%; border: 2px solid var(--dp-blue, #008ffe);
  border-top-color: transparent; animation: wfc-spin .7s linear infinite; }
@keyframes wfc-spin { to { transform: rotate(360deg); } }
.wfc-node-score { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px;
  font-weight: 800; color: var(--dp-blue, #008ffe); background: var(--dp-blue-soft, rgba(0,143,254,.1)); }
.wfc-node-score[data-pass="true"] { color: var(--success, #16a34a); background: var(--success-dim, rgba(22,163,74,.12)); }
.wfc-node-score[data-pass="false"] { color: var(--danger, #ef4444); background: rgba(239,68,68,.12); }
.wfc-insp-output, .wfc-insp-gaps { margin-top: 12px; }
.wfc-insp-output-label, .wfc-insp-gaps-label { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--fg-muted); }
.wfc-insp-output-pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5;
  max-height: 220px; overflow: auto; }
.wfc-insp-gaps ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--danger, #ef4444); line-height: 1.5; }

@media (pointer: coarse), (max-width: 720px) {
  .wf-tt,
  .wf-sub,
  .wf-lang,
  .wf-generate,
  .wf-copyall,
  .wfx-run-btn,
  .au-pf,
  .hb-build,
  .hb-expand,
  .au-launch-cta {
    min-height: 40px;
    touch-action: manipulation;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Homepage builder launch cards — per-builder identities. The three cards
   share .au-launch / .au-pf / .hb-build, so they used to read identical
   (all amber). These id-scoped rules give each its own accent, icon, focus
   and button — mirroring the dedicated builders: /automation (amber console),
   /agents (neural indigo→cyan) and /skill (violet editorial). Id specificity
   + document order win over the shared base above.
   ───────────────────────────────────────────────────────────────────────── */

/* A · Automations — amber "operations console" */
#dp-au-inline .au-launch-ic { background: linear-gradient(135deg, #fbbf24, #d97706); border-radius: 12px; }
#dp-au-inline .au-launch-input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
#dp-au-inline .au-pf:hover { border-color: #f59e0b; }
#dp-au-inline .au-pf[aria-pressed="true"] { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: transparent; color: #2a1c02; }
/* Squared physical "RUN" key with dark-espresso ink — matches the builder. */
#dp-au-inline .au-launch-cta {
  border-radius: 10px;
  color: #2a1c02;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, #f59e0b), #d97706 60%, color-mix(in srgb, #000 8%, #d97706));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 3px 0 #9a5a06, 0 6px 14px rgba(245, 158, 11, .34);
}
#dp-au-inline .au-launch-cta:hover { filter: brightness(1.03); }
#dp-au-inline .au-launch-cta:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 #9a5a06, 0 3px 8px rgba(245, 158, 11, .34); }

/* B · AI Agents — luminous neural indigo→cyan */
#dp-ag-inline .au-launch-ic { background: linear-gradient(135deg, #6366f1, #06b6d4); box-shadow: 0 6px 20px -6px rgba(99, 102, 241, .6); }
#dp-ag-inline .au-launch-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
#dp-ag-inline .au-pf:hover { border-color: #6366f1; }
#dp-ag-inline .au-pf[aria-pressed="true"] { background: linear-gradient(135deg, #6366f1, #06b6d4); border-color: transparent; color: #fff; }
/* Glowing capsule build button — the agents signature. */
#dp-ag-inline .hb-build { border-radius: 999px; box-shadow: 0 6px 18px -2px rgba(99, 102, 241, .5), 0 0 0 1px rgba(99, 102, 241, .25); }
#dp-ag-inline .hb-build:hover:not(:disabled) { box-shadow: 0 8px 26px -2px rgba(6, 182, 212, .55), 0 0 0 1px rgba(6, 182, 212, .3); filter: brightness(1.04); }

/* C · Skill.md — violet editorial manuscript */
#dp-sk-inline .au-launch { border-left: 3px solid #8b5cf6; }
#dp-sk-inline .au-launch-ic { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
#dp-sk-inline .au-launch-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
#dp-sk-inline .au-pf:hover { border-color: #8b5cf6; }
#dp-sk-inline .au-pf[aria-pressed="true"] { background: linear-gradient(135deg, #8b5cf6, #6d28d9); border-color: transparent; color: #fff; }
/* Editorial ink button — solid, restrained (no glow capsule). */
#dp-sk-inline .hb-build { border-radius: 10px; box-shadow: 0 4px 14px -4px rgba(109, 40, 217, .55); }