/* workflow.css — Workflows: the library, the recorder and the flow editor (workflow.js).
   Only .wf-* rules, and only design tokens. No colour word and no hex in this file: state colour
   arrives through stateWord()/.dot and .msg alone, and --accent is the busy state and a focus ring
   and nothing else. Everything else the pages use (.tpage .tbody .block .group .field .f .btn
   .btnrow .seg .stepper .switch .chip .state .hint .msg .empty .thumbs .thumb .bar4 .bigtime)
   is base.css and teach.css, untouched. */

/* ---------------------------------------------------------------- shared */
.wf-view{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
/* the phone's lead: the menu button on the library, a way back on every page under it.
   Hidden wider, where the rail is always there (see "the phone" at the foot of this file). */
.wf-lead{display:none}
#emp-head-lead:has(>.wf-lead){display:none}
.wf-scroll{flex:1;min-width:0;overflow-y:auto;min-height:0}
.wf-page{max-width:900px}
.wf-spinrow{display:inline-flex;align-items:center;gap:var(--s-m)}
.wf-pad{padding:var(--s-xl) 20px;display:flex;flex-direction:column;min-width:0}
.block.wf-card2{padding:0;overflow:hidden}
.wf-sub{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint);max-width:70ch}
.wf-plain{margin:0 0 var(--s-l);font-size:12.5px;line-height:1.55;color:var(--muted);max-width:70ch}
.wf-plain:last-child{margin-bottom:0}
.wf-sentence{margin:0 0 var(--s-s);font-size:14.5px;line-height:1.45;color:var(--text)}
.wf-errhost:empty,.wf-errpad:empty,.wf-dryhost:empty{display:none}
.wf-errpad{padding:0 20px var(--s-l)}
.msg.wf-err{margin:var(--s-m) 0 0;padding:var(--s-m) var(--s-l);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;min-height:0;background:var(--card)}
.wf-view>.tpage>.tbody>.wf-errhost>.msg.wf-err{margin:0}
.wf-field{margin-bottom:var(--s-l)}
.wf-field:last-child{margin-bottom:0}
.wf-field>label{display:flex;align-items:baseline;gap:var(--s-m);margin-bottom:var(--s-s);font-size:12.5px;font-weight:600;color:var(--muted)}
.wf-inline{display:inline-flex;align-items:center;gap:var(--s-m);min-width:0}
.wf-word2{font-size:12.5px;color:var(--faint);white-space:nowrap}
.wf-inline select.f{width:auto;min-width:96px}
.wf-inrow{display:flex;flex-wrap:wrap;gap:var(--s-l) var(--s-xl);align-items:center;margin-bottom:var(--s-l)}
.wf-back svg{width:12px;height:12px}

/* --------------------------------------------------------------- library */
.wf-cards{padding:0;display:flex;flex-direction:column}
.chip.wf-count{height:22px;padding:0 var(--s-m);font-variant-numeric:tabular-nums}
.wf-card{position:relative;display:flex;flex-direction:column;gap:var(--s-s);
  padding:var(--s-l) var(--s-xl);border-bottom:1px solid var(--line);transition:background .12s ease}
.wf-card:last-child{border-bottom:0}
.wf-card:hover{background:var(--card2)}
.wf-cardtop{display:flex;align-items:center;gap:var(--s-m);min-width:0}
.wf-bolt{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border-radius:var(--r-sm);background:var(--card2);color:var(--muted)}
.wf-card:hover .wf-bolt{color:var(--text)}
.wf-name{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the whole card is the link; the More button sits above it */
.wf-name::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm)}
.wf-name:focus-visible{outline:none}
.wf-name:focus-visible::after{outline:2px solid var(--line2);outline-offset:-3px}
.wf-cardtop .state{flex:none}
.wf-cardmore{position:relative;z-index:1;flex:none;font-size:15px;letter-spacing:.5px;color:var(--muted)}
.wf-when{font-size:12.5px;color:var(--muted);line-height:1.4}
/* one row, never wrapping: the chips share the width and each one ellipsises, so a long task
   never turns the strip into a stack of lines with an arrow dangling at the end of each */
.wf-strip{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--s-s);min-width:0}
.wf-stepchip{display:inline-flex;align-items:center;gap:var(--s-s);flex:1 1 auto;min-width:64px;height:var(--h-chip);
  padding:0 var(--s-m) 0 var(--s-xs);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-size:12.5px;color:var(--muted)}
.wf-stepchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wf-n{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--card2);color:var(--faint);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.wf-arrow{color:var(--faint);font-size:12.5px;flex:none}
.wf-stepmore{font-size:12.5px;color:var(--faint);flex:none;white-space:nowrap}
.wf-problem{font-size:12.5px;color:var(--faint);line-height:1.4}
.wf-meta{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.wf-emptywrap{display:flex;flex-direction:column;gap:var(--s-xxl)}
.wf-empty{margin:var(--s-xl) auto 0}
.wf-emptyrow{justify-content:center;margin-top:var(--s-xs)}
.wf-rows{overflow:hidden}
.wf-example{width:100%;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);
  font:inherit;font-size:14.5px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:var(--s-l)}
.wf-example:last-child{border-bottom:0}
.wf-example:hover{background:var(--card2)}
.wf-example .trail{margin-left:auto;display:inline-flex;color:var(--faint)}

/* -------------------------------------------------------------- recorder */
/* what is about to happen, before anything is recorded */
.wf-how{margin:0 0 var(--s-l);padding:0 0 0 var(--s-xl);font-size:12.5px;line-height:1.7;color:var(--muted);max-width:70ch}
.wf-how li::marker{color:var(--faint)}
.wf-doing{margin:0 0 var(--s-l);font-size:12.5px;line-height:1.5;color:var(--muted);max-width:70ch}
.wf-found{margin:0 0 var(--s-l);font-size:14.5px;line-height:1.45;color:var(--text)}
.wf-time{margin-bottom:var(--s-xs)}
.wf-count2{margin:0 0 var(--s-m)}
.msg.wf-recwarn{margin-bottom:var(--s-l);padding:var(--s-m) var(--s-l);border-radius:var(--r-sm);font-size:12.5px;min-height:0}
.wf-startrow,.wf-recrow,.wf-reviewrow{margin-top:var(--s-l)}
.wf-livestrip{display:flex;gap:var(--s-m);flex-wrap:wrap;min-height:60px;align-items:center}
.wf-livethumb{width:84px}
.wf-livethumb img{width:84px;height:53px}
.wf-nopics{font-size:12.5px;color:var(--faint)}
.wf-notes{list-style:none;margin:var(--s-m) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
.wf-noteline{display:flex;gap:var(--s-l);font-size:12.5px;color:var(--muted);line-height:1.45}
.wf-notet{flex:none;color:var(--faint);font-variant-numeric:tabular-nums}
.wf-noteshead{margin:var(--s-l) 0 0}
.wf-thumbs{margin-bottom:var(--s-l)}
.wf-cost{margin-top:var(--s-xl);color:var(--text)}
.wf-bar{margin:var(--s-s) 0 var(--s-l)}
.wf-thinkline{display:flex;align-items:center;gap:var(--s-m);margin:0;font-size:14.5px;color:var(--text)}
.msg.wf-from{margin:0;padding:var(--s-m) var(--s-xl);border-radius:var(--r-md)}

/* ----------------------------------------------------------- flow editor */
.wf-word{font-size:12.5px;color:var(--faint);white-space:nowrap}
.wf-more{font-size:15px;letter-spacing:.5px;color:var(--muted)}

/* The name IS the title: it is edited where it is written, in the page header, one press away —
   the same in-place rename a page title has elsewhere in the app. */
#view-title.wf-editable{cursor:text}
#view-title.wf-editable:hover{text-decoration:underline dotted var(--line2);text-underline-offset:4px}
.wf-headin{height:32px;min-width:220px;font-size:16px;font-weight:600;width:min(420px,60vw)}
/* who last touched it, at the foot where it belongs — not over the first field */
.wf-editedmeta{margin:0;padding:0 var(--s-xs);font-size:11px;color:var(--faint)}

/* The line that says what it is for, under the title. base.css hides a header caption under 1181,
   so it lives in the page and is there at every width. In the recorder, where there is no page
   header at all, the same bar carries the name above it. */
.wf-titlebar{display:flex;flex-direction:column;gap:var(--s-xxs);margin:0 calc(-1 * var(--s-s))}
.wf-titlebar input{width:100%;border:1px solid transparent;border-radius:var(--r-sm);background:none;
  font-family:inherit;color:var(--text);min-width:0}
.wf-titlebar .wf-name-in{height:36px;padding:0 var(--s-s);font-size:22px;font-weight:600;letter-spacing:-.01em}
.wf-titlebar .wf-desc-in{height:26px;padding:0 var(--s-s);font-size:13px;color:var(--muted)}
.wf-titlebar input::placeholder{color:var(--faint)}
.wf-titlebar input:hover:not(:read-only){border-color:var(--line);background:var(--card)}
.wf-titlebar input:focus{outline:none;border-color:var(--line2);background:var(--card)}

/* When it runs: Automations' half, said in one quiet line under the title and never edited here.
   It is a line of text with one link in it, not a card — this page is about what happens. */
.wf-sched{display:flex;flex-direction:column;gap:var(--s-s);margin-top:calc(-1 * var(--s-m))}
.wf-schedline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-xs) var(--s-s);margin:0;
  font-size:12.5px;line-height:1.5;color:var(--muted);min-width:0}
.wf-schedicon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--card);color:var(--faint)}
.wf-sched[data-on="1"] .wf-schedicon{color:var(--muted)}
.wf-schedtext{min-width:0;overflow-wrap:anywhere}
.wf-scheddot{color:var(--faint)}
.wf-schedgo{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--text);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.wf-schedgo:hover{text-decoration-color:var(--text)}
.wf-schedgo:disabled{color:var(--faint);cursor:default;text-decoration:none}
.wf-schedgo:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

/* Flow or List, in the section's own head */
.wf-viewseg{margin-left:auto;align-self:center}

.block.wf-stepscard{padding:0;overflow:hidden}
.wf-steps{list-style:none;margin:0;padding:0}
.wf-step{position:relative;display:flex;gap:var(--s-l);padding:var(--s-xl) 44px var(--s-xl) var(--s-xl);border-bottom:1px solid var(--line)}
.wf-step:last-child{border-bottom:0}
.wf-step.is-dragging{opacity:.45}
.wf-step.is-drop{box-shadow:inset 0 2px 0 0 var(--line2)}
.wf-steprail{display:flex;flex-direction:column;align-items:center;gap:var(--s-s);flex:none;width:26px}
/* .wf-stepn is .stepnum in base.css; only what is particular to this page lives here */
.wf-handle{color:var(--faint);cursor:grab;opacity:0;transition:opacity .12s ease}
.wf-handle:active{cursor:grabbing}
.wf-step:hover .wf-handle,.wf-step:focus-within .wf-handle,.wf-handle[aria-expanded="true"]{opacity:1}
.wf-stepbody{flex:1;min-width:0;display:flex;flex-direction:column}
/* the sentence that carries the step: the shared verb, then the one thing that tells it apart.
   Reading these down the page is reading the workflow. */
.wf-stephead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-s);margin:0 0 var(--s-l);
  font-size:14.5px;line-height:1.35;min-width:0}
.wf-stepverb{font-weight:600;color:var(--text)}
.wf-stepsay{color:var(--muted);min-width:0;overflow-wrap:anywhere}
/* an answer that sends the run its own way names itself over the steps it leads to */
.wf-branchlab{display:flex;align-items:center;gap:var(--s-m);padding:var(--s-l) var(--s-xl) var(--s-xs);
  font-size:12.5px;color:var(--faint);line-height:1.4}
.wf-branchlab[data-depth="1"]{padding-left:34px}
.wf-branchlab[data-depth="2"]{padding-left:52px}
.wf-branchlab[data-depth="3"],.wf-branchlab[data-depth="4"]{padding-left:70px}
/* a shape only the map can draw, said on the step it belongs to */
.wf-onlymap{margin-top:var(--s-m);padding:var(--s-m) var(--s-l);border:1px solid var(--line2);
  border-radius:var(--r-sm);background:var(--card2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-m)}
.wf-onlymap p{margin:0;flex:1;min-width:180px;font-size:12.5px;line-height:1.5;color:var(--text)}
.wf-stepx{position:absolute;right:var(--s-l);top:var(--s-xl);color:var(--faint);opacity:0;transition:opacity .12s ease}
.wf-step:hover .wf-stepx,.wf-step:focus-within .wf-stepx{opacity:1}
.wf-chars{margin-left:auto;font-size:11px;font-weight:400;color:var(--faint);font-variant-numeric:tabular-nums}
.wf-choices{display:flex;flex-direction:column;gap:var(--s-s);align-items:flex-start}
/* an answer, and where the run goes after it: "[Yes] then [go on to the next step ▾]" */
.wf-choice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-s);width:100%;max-width:620px}
.wf-choice .wf-choice-in{flex:1 1 140px;min-width:0;max-width:240px}
.wf-choice select.wf-answhere{flex:1 1 200px;min-width:0;width:auto}
.wf-then{flex:none}
/* in the chart's narrow panel, as on a phone: the answer on its own line, where it goes under it */
.wf-panel .wf-choice .wf-choice-in{flex:1 1 100%;max-width:none}

/* "Insert a value": what a step may quote from the record, at the right of a field's label */
.wf-varbtn{margin-left:auto;padding:0;border:0;background:none;font:inherit;font-size:11px;font-weight:500;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.wf-varbtn:hover{color:var(--text)}
.wf-varbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.wf-varbtn+.wf-chars{margin-left:var(--s-m)}
/* a sentence that warns before it happens: the same quiet line, one step brighter, with a dot */
.wf-warns:empty{display:none}
.wf-sub.wf-warnline{display:flex;align-items:baseline;gap:var(--s-s);color:var(--muted)}
.wf-warnline>.dot{flex:none;transform:translateY(-1px)}
.wf-pick-in{max-width:420px}
.wf-waitrow{gap:var(--s-l) var(--s-xl)}
.wf-stepper{flex:none}
/* Add a step: the kinds said in the words of STEP_WORDS, each with the one line that explains it.
   Still one press per kind — the picker on the map is the same four, with a search. */
.wf-add{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-m);padding:var(--s-l) var(--s-xl) var(--s-xl);
  border-top:1px solid var(--line)}
.wf-add.is-first{border-top:0}
.wf-addlab{font-size:12.5px;font-weight:600;color:var(--muted)}
.wf-addbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-m)}
.btn.wf-addrow{height:auto;min-height:48px;padding:10px var(--s-l);align-items:flex-start;justify-content:flex-start;
  gap:10px;text-align:left;border-radius:var(--r-md)}
.btn.wf-addrow svg{margin-top:3px;flex:none;color:var(--faint)}
.btn.wf-addrow:hover:not(:disabled) svg{color:var(--text)}
.wf-addtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.wf-addverb{font-size:12.5px;font-weight:500;color:var(--text)}
.wf-addhint{font-size:11px;line-height:1.35;color:var(--faint)}

.wf-dryblock{display:flex;flex-direction:column}
.wf-dryrow{margin-top:0}
.wf-dryout{margin-top:var(--s-l);padding:var(--s-l) var(--s-xl);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.wf-drymsg{margin:0 0 var(--s-s);font-size:14.5px;font-weight:500}
.wf-drylist{margin:0;padding-left:20px;font-size:12.5px;color:var(--muted);line-height:1.7}

.block.wf-runscard{padding:0}
.wf-runshost{display:flex;flex-direction:column}
.wf-norun{margin:0;padding:var(--s-l) var(--s-xl);font-size:12.5px;color:var(--faint)}
.wf-run{padding:var(--s-l) var(--s-xl);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-s)}
.wf-run:last-child{border-bottom:0}
.wf-runtop{display:flex;align-items:center;gap:var(--s-l);flex-wrap:wrap}
.wf-runwhen{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.wf-runerr{margin:0;font-size:12.5px;color:var(--muted)}
.wf-rundetail{min-width:0}
.wf-runmore{margin-left:-10px}
.wf-trail{list-style:none;margin:var(--s-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
.wf-trailline{display:flex;gap:var(--s-m);font-size:12.5px;color:var(--muted);line-height:1.5}
.wf-trailline::before{content:"";width:5px;height:5px;margin-top:7px;flex:none;border-radius:50%;background:var(--line2)}
.wf-trailline.is-next{color:var(--faint)}

.wf-savebar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-l);justify-content:space-between;
  padding-top:var(--s-s);border-top:1px solid var(--line)}
.wf-savebtns{display:flex;flex-wrap:wrap;gap:var(--s-m);margin-left:auto}


/* ------------------------------------------------------------- the canvas
   The workflow as it runs: cards are DOM, wires are SVG, both inside ONE transform so they cannot
   drift apart. The box's contract is css/knowledge.css:56-61 — touch-action:none or the browser
   eats the gesture, grab/grabbing, overflow hidden, a focus ring. No colour word and no hex here
   either: a card's state arrives through stateWord() and .msg alone. */
.block.wf-cvcard{padding:0;overflow:visible;background:none;border:0}
.wf-cv{position:relative;height:clamp(340px,calc(100vh - 336px),700px);overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);
  background-size:22px 22px;touch-action:none;cursor:grab}
.wf-cv:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.wf-cv.is-panning{cursor:grabbing}
.wf-cv.is-wiring{cursor:crosshair}
.wf-cvfoot{margin:var(--s-m) 2px 0}

.wf-wires{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
.wf-bbr{fill:none;stroke:none}
.wf-wire{fill:none;stroke:var(--line2);stroke-width:1.6;stroke-linecap:round}
.wf-wire.is-sel{stroke:var(--text);stroke-width:2.2}
.wf-wire.is-ghost{stroke:var(--text);stroke-dasharray:5 4}
.wf-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.wf-hit:hover+.wf-wire{stroke:var(--text)}
.wf-arrhead{fill:var(--line2)}
.wf-arrhead.is-sel{fill:var(--text)}

.wf-nodes{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}
.wf-node{position:absolute;box-sizing:border-box;width:224px;display:flex;align-items:flex-start;gap:10px;
  padding:var(--s-l) var(--s-l) var(--s-m);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  pointer-events:auto;cursor:grab;user-select:none;outline:none;
  transition:border-color .12s ease,background .12s ease}
.wf-node:hover{border-color:var(--line2);background:var(--card2)}
.wf-node.is-sel{border-color:var(--text)}
.wf-node:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
.wf-node.is-dragging{cursor:grabbing;border-color:var(--line2);opacity:.92}
.wf-node.is-target{border-color:var(--text);box-shadow:0 0 0 3px var(--card2)}
.wf-node.is-loose{border-style:dashed;opacity:.72}
.wf-node.is-err{border-color:var(--line2);box-shadow:0 0 0 3px var(--card2)}
.wf-node.is-lit{border-color:var(--text);background:var(--card2)}
.wf-node[data-kind="trigger"]{border-radius:var(--r-lg)}
/* an ask wears its answers on its right edge, so it keeps a lane clear for them */
.wf-node[data-kind="ask"]{padding-right:62px}
.wf-ntile{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:var(--r-sm);background:var(--card2);color:var(--muted)}
.wf-node:hover .wf-ntile,.wf-node.is-sel .wf-ntile{color:var(--text)}
/* A card reads the way a step in the list reads: what it does, in the shared words, as its
   heading; which one it is under that; who, in the faintest line. */
.wf-ntext{display:flex;flex-direction:column;min-width:0;flex:1}
.wf-nverb{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-nname{margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wf-nname.is-empty{color:var(--faint);font-style:italic}
.wf-nsay{margin-top:3px;font-size:11px;line-height:1.35;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the start card and a step this page does not own have no name of their own: the server's
   sentence is their second line, and reads like one */
.wf-nverb+.wf-nsay{margin-top:2px;font-size:12.5px;color:var(--muted);white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wf-nstate{position:absolute;left:var(--s-l);top:100%;margin-top:5px;display:flex}
.wf-nstate .state{font-size:10.5px}
/* far away there is room for one line: the name that tells this card from the others (the tile
   already says what kind it is), or the heading when a card has no name of its own */
.wf-cv.is-terse .wf-nsay,.wf-cv.is-terse .wf-plab,.wf-cv.is-terse .wf-nstate{display:none}
.wf-cv.is-terse .wf-node{align-items:center}
.wf-cv.is-terse .wf-node:has(.wf-nname) .wf-nverb{display:none}
.wf-cv.is-terse .wf-nname{margin:0;font-size:14px;font-weight:600;color:var(--text);-webkit-line-clamp:2}
.wf-cv.is-terse .wf-nverb{font-size:14px}
.wf-cv.is-terse .wf-nerr,.wf-cv.is-terse .wf-nwalk{display:none}

/* with the map open the page is as wide as the screen allows */
.wf-page.wf-flow:has(.wf-cv){max-width:1280px}

/* the ports. An output holds exactly one wire, so a port with one keeps its + out of the way until
   you go looking for it; a port with none wears its + on a little stub, which is the whole "add". */
.wf-nin{position:absolute;left:-1px;top:50%;width:11px;height:11px;margin:-6px 0 0 -6px;
  border-radius:50%;border:1.5px solid var(--line2);background:var(--card2)}
.wf-node.is-target .wf-nin{border-color:var(--text);background:var(--text)}
.wf-cv.is-wiring .wf-nin{border-color:var(--text)}
.wf-nout{position:absolute;right:-1px;width:0;height:0}
.wf-nout:not(.is-linked)::before{content:"";position:absolute;left:6px;top:0;width:11px;height:1px;background:var(--line2)}
.wf-port{position:absolute;left:-6px;top:-6px;width:12px;height:12px;padding:0;border-radius:50%;
  border:1.5px solid var(--line2);background:var(--card2);cursor:crosshair}
.wf-port:hover:not(:disabled),.wf-port:focus-visible{border-color:var(--text);background:var(--text)}
.wf-port:disabled{cursor:default}
.wf-plab{position:absolute;right:9px;top:-9px;max-width:128px;height:18px;display:flex;align-items:center;
  padding:0 var(--s-s);border-radius:var(--r-sm);background:var(--card2);color:var(--muted);
  font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-padd{position:absolute;left:16px;top:-9px;display:inline-grid;place-items:center;width:18px;height:18px;
  padding:0;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--muted);
  cursor:pointer;transition:opacity .12s ease,color .12s ease,border-color .12s ease}
.wf-padd:hover,.wf-padd:focus-visible{color:var(--text);border-color:var(--text)}
.wf-nout.is-linked .wf-padd{opacity:0}
.wf-node:hover .wf-nout.is-linked .wf-padd,.wf-nout.is-linked .wf-padd:focus-visible{opacity:1}

/* where the first step goes, in a flow with none yet: the size of a card, drawn dashed */
.wf-ghost{position:absolute;box-sizing:border-box;width:224px;display:flex;align-items:flex-start;gap:10px;
  padding:var(--s-l) var(--s-l) var(--s-m);border:1px dashed var(--line2);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--card) 55%,transparent);color:var(--text);font:inherit;text-align:left;
  cursor:pointer;pointer-events:auto;transition:border-color .12s ease,background .12s ease}
.wf-ghost:hover{border-color:var(--text);background:var(--card)}
.wf-ghost:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
.wf-ghost .wf-nsay{white-space:normal}

/* a sentence about this card: a refusal, a problem, or the line from a Try it */
.wf-nerr,.wf-nwalk{position:absolute;left:0;top:100%;width:224px;margin-top:22px;padding:var(--s-s) var(--s-m);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-size:11px;line-height:1.4;color:var(--muted);pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wf-node.is-err .wf-nerr{border-color:var(--line2);color:var(--text)}
.wf-nwalk{margin-top:22px;border-color:var(--line2);color:var(--text)}
.wf-node:has(.wf-nstate) .wf-nerr,.wf-node:has(.wf-nstate) .wf-nwalk{margin-top:26px}

/* the bar in the corner, and the one line under it */
.wf-tools{position:absolute;left:var(--s-m);right:var(--s-m);top:var(--s-m);z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-m);pointer-events:none}
.wf-tools2{display:flex;align-items:center;gap:var(--s-s);pointer-events:auto}
.wf-cvbtn{height:28px;min-width:28px;padding:0 var(--s-m);border:1px solid var(--line2);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--muted);font-size:12.5px;line-height:1;
  cursor:pointer;font-family:inherit}
.wf-cvbtn:hover{color:var(--text);background:var(--card2)}
.wf-cvbtn[hidden]{display:none}
/* the two zoom steps and Fit are one control, so they sit as one */
.wf-zoomset{display:flex;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;
  background:color-mix(in srgb,var(--bg) 82%,transparent)}
.wf-zoomset .wf-cvbtn{border:0;border-radius:0;background:none}
.wf-zoomset .wf-cvbtn+.wf-cvbtn{border-left:1px solid var(--line)}
.wf-zoomset .wf-cvbtn:hover{background:var(--card2)}
.wf-zoomset .wf-cvbtn:focus-visible,.wf-cvbtn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.wf-cvhint{position:absolute;left:var(--s-l);right:var(--s-l);bottom:var(--s-m);z-index:2;margin:0;
  padding:var(--s-s) var(--s-l);border:1px solid var(--line);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bg) 88%,transparent);font-size:12px;line-height:1.45;color:var(--muted)}
.wf-cvhint.is-bad{border-color:var(--line2);color:var(--text)}
.wf-cvhint[hidden]{display:none}
.wf-cv.has-panel .wf-tools{right:calc(340px + var(--s-m))}
.wf-cv.has-panel .wf-cvhint{right:calc(340px + var(--s-l))}

/* the panel: one step, in the fields that already edit it */
.wf-panel{position:absolute;right:0;top:0;bottom:0;width:340px;z-index:3;display:flex;flex-direction:column;
  border-left:1px solid var(--line);background:var(--bg);min-width:0}
.wf-panel[hidden]{display:none}
.wf-phead{display:flex;align-items:flex-start;gap:var(--s-m);padding:var(--s-l) var(--s-l) var(--s-m);
  border-bottom:1px solid var(--line)}
.wf-pheadtext{display:flex;flex-direction:column;min-width:0;flex:1}
.wf-pheadname{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.wf-pclose{flex:none;color:var(--faint)}
.wf-pbody{flex:1;min-height:0;overflow-y:auto;padding:var(--s-l);display:flex;flex-direction:column}
.wf-pfoot{padding:var(--s-m) var(--s-l);border-top:1px solid var(--line);display:flex}
.wf-premove{color:var(--muted)}
.wf-emprow{display:flex;align-items:center;gap:var(--s-m);margin-bottom:var(--s-l);padding:var(--s-m) var(--s-l);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.wf-emptile{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--card2);color:var(--muted)}
.wf-emptext{display:flex;flex-direction:column;min-width:0;flex:1}
.wf-empname{font-size:13px;font-weight:600;color:var(--text)}
.wf-empsub{font-size:11px;line-height:1.4;color:var(--faint)}
.wf-empdesk{flex:none;text-decoration:none}

/* the picker: everything you can add, in four groups, with a search field and the arrow keys */
.wf-pick{position:fixed;z-index:90;width:320px;max-height:min(620px,86vh);display:flex;flex-direction:column;
  padding:var(--s-l);border:1px solid var(--line2);border-radius:var(--r-md);background:var(--card);
  box-shadow:0 18px 50px color-mix(in srgb,var(--bg) 70%,transparent)}
.wf-pickhead{margin:0 0 var(--s-m);font-size:12.5px;color:var(--faint);line-height:1.4;overflow-wrap:anywhere}
.wf-picksearch{flex:none}
.wf-picklist{margin-top:var(--s-m);overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:1px}
.wf-pickgroup{margin:var(--s-s) 0 1px;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.wf-pickgroup:first-child{margin-top:0}
.wf-pickrow{display:flex;align-items:flex-start;gap:var(--s-m);width:100%;padding:var(--s-s) var(--s-m);border:0;
  border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.wf-pickrow:hover,.wf-pickrow.is-on{background:var(--card2)}
.wf-picktile{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-sm);
  background:var(--card2);color:var(--muted)}
.wf-picktext{display:flex;flex-direction:column;min-width:0}
.wf-pickname{font-size:13px;font-weight:600}
.wf-picksay{font-size:11px;line-height:1.4;color:var(--faint)}
.wf-picknone{margin:var(--s-m) 0 0;font-size:12.5px;color:var(--faint)}

/* the list layout shows a branch by indenting it */
.wf-step[data-depth="1"]{padding-left:34px}
.wf-step[data-depth="2"]{padding-left:52px}
.wf-step[data-depth="3"],.wf-step[data-depth="4"]{padding-left:70px}
.wf-step[data-depth]:not([data-depth="0"])::before{content:"";position:absolute;left:20px;top:0;bottom:0;
  width:1px;background:var(--line)}
.wf-step.is-loose{opacity:.75}
.wf-step.is-loose .wf-stepn{background:none;border:1px dashed var(--line2)}

@media (max-width:1199px){
  .wf-panel{width:300px}
  .wf-cv.has-panel .wf-tools{right:calc(300px + var(--s-m))}
  .wf-cv.has-panel .wf-cvhint{right:calc(300px + var(--s-l))}
}
@media (prefers-reduced-motion:reduce){
  .wf-node,.wf-padd,.wf-ghost{transition:none}
}

/* ------------------------------------------------------------ the phone
   Below 600 the page takes the whole width: the rail becomes a menu over it, reached from the
   button in the header (wf_lead → emp_railBtn, which sets app[data-emp-rail]). This is the same
   rule Ontology and Automations carry for their own panes (css/ontology.css) — a surface that
   keeps the 240 px rail at 390 px is left with a 150 px strip, which is where the library card's
   title collided with its state word. Tighter gutters and wrapping control rows do the rest, so
   nothing ever pushes the page sideways. */
@media (max-width:599px){
  .app:has(.surf-pane[data-surf="workflow"]:not([hidden])){grid-template-columns:minmax(0,1fr)}
  .app:has(.surf-pane[data-surf="workflow"]:not([hidden]))>aside#rail{position:fixed;z-index:60;top:0;bottom:0;left:0;
    width:min(var(--rail),86vw);transform:translateX(-100%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s}
  .app[data-emp-rail="open"]:has(.surf-pane[data-surf="workflow"]:not([hidden]))>aside#rail{transform:none;visibility:visible;
    transition:transform .24s ease-out;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
  #emp-head-lead:has(>.wf-lead){display:flex}
  .wf-lead{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;margin-left:-6px;color:var(--text)}
}
@media (max-width:600px){
  /* base scrolls the header's tools sideways below 939; on a phone that clips "Build one step by
     step" and "Workflows" mid-word, so this surface's tools wrap onto a second row instead. Keyed
     off this file's own classes, so no other surface's header is touched. */
  #head-tools:has(>.wf-recbtn),#head-tools:has(>.wf-back){flex-wrap:wrap;overflow-x:visible;row-gap:var(--s-m)}
  #head-tools:has(>.wf-recbtn)>.btn{flex:1 1 calc(50% - var(--s-m))}
  /* the chevron beside the title already leads back, so the tools' own one would say it twice */
  #head-tools>.wf-back{display:none}
  .wf-page{padding:var(--s-xl) var(--s-l)}
  .wf-pad{padding:var(--s-l) var(--s-l)}
  .wf-card{padding:var(--s-l) var(--s-l)}
  /* the name wraps onto as many lines as it needs; the state word and the ⋯ keep their own room */
  .wf-cardtop{align-items:flex-start}
  .wf-bolt,.wf-cardtop .state,.wf-cardmore{margin-top:1px}
  .wf-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
  .wf-stepchip{flex:none;height:auto;min-height:var(--h-chip);padding:3px var(--s-m) 3px var(--s-xs);align-items:flex-start}
  .wf-stepchip>span{white-space:normal;line-height:1.4}
  .wf-n{margin-top:1px}
  .wf-arrow{display:none}
  .wf-strip{flex-direction:column;align-items:stretch}
  .wf-step{padding:var(--s-l) 40px var(--s-l) var(--s-l);gap:var(--s-m)}
  .wf-stepx,.wf-handle{opacity:1}
  .wf-add{padding:var(--s-l)}
  .wf-addbtns{width:100%;grid-template-columns:minmax(0,1fr)}
  .wf-branchlab{padding:var(--s-l) var(--s-l) var(--s-xs)}
  .wf-branchlab[data-depth="1"]{padding-left:30px}
  .wf-branchlab[data-depth="2"]{padding-left:44px}
  .wf-branchlab[data-depth="3"],.wf-branchlab[data-depth="4"]{padding-left:58px}
  .wf-titlebar .wf-name-in{font-size:20px}
  .wf-errpad{padding:0 var(--s-l) var(--s-l)}
  .wf-run,.wf-norun{padding:var(--s-l)}
  .wf-runwhen{margin-left:0}
  .wf-inrow{gap:var(--s-m)}
  .wf-inline{width:100%}
  .wf-inline select.f{flex:1;min-width:0;width:auto}
  .wf-sched{margin-top:calc(-1 * var(--s-s))}
  .wf-choice{max-width:none}
  /* the answer on its own line, "then" and where it goes under it */
  .wf-choice .wf-choice-in{flex:1 1 100%;max-width:none}
  .wf-startrow .btn,.wf-recrow .btn,.wf-reviewrow .btn,.wf-savebtns .btn,.wf-dryrow .btn{flex:1 1 100%;width:100%}
  .wf-savebar{flex-direction:column;align-items:stretch}
  .wf-savebtns{width:100%;margin-left:0}
  .wf-livethumb,.wf-livethumb img{width:72px}
  .wf-livethumb img{height:46px}
  .wf-emptyrow .btn{flex:1 1 100%;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .wf-card,.wf-handle,.wf-stepx{transition:none}
}