/* THE DOCKED WORKFLOW PANEL (REFIT, 2026-09-22) — frontend/app/workflowpanel.js.
   Docked to the right of build mode, never over the floor: the canvas stays live beside it (build.js
   viewInsets reads this box as occluded glass, so FIT / pan-to-part frame the VISIBLE floor).
   MATERIAL (glass reskin, 2026-09-24): the same sheet as the Build Library dock opposite it (refit-polish.css:
   --refit-glass over --refit-sheet, blur(18px), one --refit-edge hairline, 12px shell) and the same control
   voice as COMMS glass (glass-comms.css): matte plates with a top hairline light, recessed wells for anything
   you type or read back, and state as a change of EDGE / FILL / RAIL — never an outer glow.
   READABLE AND ROOMY (2026-09-30, Andrew: "tiny text … the older uglier starnet look and buttons … easy to use,
   simplified … consistent with the rest of starnet"): the panel speaks at the STATION's size now — body 17px at a
   1.45 line (COMMS reads at that size), titles 22px, nothing a Commander reads under 14px — and wears the Build
   Library's keys: 8px glass buttons, 36px tall, one weight (no wide-tracked small caps). Cards breathe (10–12px
   radius, 10–14px padding) and the line diagram is a row of real cards, not thumbnails of cards.
   Theme tokens only, so every phosphor set re-tints it. The one local colour is the loop/edited cyan the
   prototypes use for "goes round" and "your words, not the agent's" — a semantic voice like --ok/--bad. */
.wf-panel {
  --wf-cyan: #5fd8ff;
  --wf-edge: var(--refit-edge, rgba(var(--ph-rgb),.2));            /* the one hairline */
  --wf-light: inset 0 1px 0 rgba(var(--ph-bright-rgb),.07);        /* the plate's top edge light */
  --wf-plate: rgba(var(--ph-rgb),.035);                            /* a resting card on the sheet */
  --wf-hover: rgba(var(--ph-rgb),.1);                              /* the Build Library's hover fill */
  --wf-on: rgba(var(--ph-rgb),.13);                                /* its active fill */
  --wf-well: rgba(0,0,0,.34);                                      /* a recessed field (darker than the Library search: reading text sits in it) */
  --wf-well-shadow: inset 0 1px 3px rgba(0,0,0,.15);
  --wf-ring: 0 0 0 2px rgba(var(--ph-rgb),.1);                     /* focus: a hairline ring, not a bloom */
  position: absolute; z-index: 4; right: 12px; top: 58px; bottom: 12px;
  width: min(calc(620px * var(--sn-unzoom,1)), 50%);
  display: flex; flex-direction: column; min-height: 0;
  font-family: 'VT323', 'Courier New', monospace; font-size: 17px; line-height: 1.45; color: var(--text);
  border: 1px solid var(--wf-edge); border-radius: 12px;
  background: var(--refit-glass, none), var(--refit-sheet, var(--panel));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4), inset 0 1px rgba(var(--ph-rgb),.08);
  text-shadow: none;
  user-select: text; overflow: hidden;
}
@media (max-width: 1100px) { .wf-panel { top: 88px; } }
@media (max-width: 900px) { .wf-panel { left: 12px; width: auto; top: auto; height: 58%; } }
.wf-panel [hidden] { display: none !important; }
.wf-panel :is(button,input,textarea,summary):focus-visible { outline: 2px solid var(--ph-bright); outline-offset: 2px; }
/* a text field shows focus as its own edge + ring (the Build Library / menu-glass field), not a second outline */
.wf-panel :is(input:not([type=checkbox]):not([type=radio]),textarea):focus-visible { outline: none; }

/* ---- the panel's keys: the Build Library's glass button, one voice for every .bb inside — 8px glass, 36px tall,
   read at 16px with a plain (not wide-tracked) label ---- */
.wf-panel .bb {
  min-height: 36px; padding: 7px 14px; font-size: 16px; line-height: 1.15; letter-spacing: .6px;
  color: var(--ph); border: 1px solid var(--wf-edge); border-radius: 8px;
  background: var(--refit-glass, var(--wf-plate)); box-shadow: var(--wf-light); text-shadow: none;
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.wf-panel .bb.sm { min-height: 34px; padding: 6px 13px; }
.wf-panel .bb:hover:not(:disabled) { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45); background: var(--wf-hover); box-shadow: var(--wf-light); }
.wf-panel .bb:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.wf-panel .bb:is(.active,.sel,[aria-pressed="true"]), .wf-panel .bb:is(.active,.sel,[aria-pressed="true"]):hover:not(:disabled) { color: var(--ph-bright); border-color: var(--ph); background: var(--wf-on); box-shadow: var(--wf-light), inset 0 -2px 0 rgba(var(--ph-rgb),.65); }
.wf-panel .bb:disabled, .wf-panel .bb:disabled:hover { opacity: .4; cursor: default; color: var(--ph); border-color: var(--wf-edge); background: var(--refit-glass, var(--wf-plate)); box-shadow: var(--wf-light); }
/* the primary key is lit glass, not a solid slab (app.css paints .refit-primary solid with !important) */
.wf-panel .bb.refit-primary { color: var(--ph-bright) !important; background: rgba(var(--ph-rgb),.16) !important; border-color: var(--ph) !important; text-shadow: none !important; }
.wf-panel .bb.refit-primary:hover:not(:disabled) { background: rgba(var(--ph-rgb),.24) !important; }
.wf-panel .bb.refit-primary:disabled { background: rgba(var(--ph-rgb),.16) !important; }
.wf-panel .wf-x:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
/* the WHEN picker's keys and fields, restated in the same glass (the shared .sp skin lights its keys with a bloom) */
.wf-panel :is(.sp-mode,.sp-day,.sp-unit) { border-color: var(--wf-edge); border-radius: 8px; background: var(--wf-plate); box-shadow: var(--wf-light); }
.wf-panel :is(.sp-mode,.sp-day,.sp-unit):hover { border-color: rgba(var(--ph-rgb),.45); background: var(--wf-hover); }
.wf-panel :is(.sp-mode.active,.sp-day.on,.sp-unit.on) { color: var(--ph-bright); border-color: var(--ph); background: var(--wf-on); box-shadow: var(--wf-light), inset 0 -2px 0 rgba(var(--ph-rgb),.65); }
.wf-panel :is(select,.sp .sp-num) { background-color: var(--wf-well); border: 1px solid var(--wf-edge); border-radius: 8px; box-shadow: var(--wf-well-shadow); text-shadow: none; font-size: 16px; }
.wf-panel .sp .sp-num { background-image: none; }
.wf-panel :is(select,.sp .sp-num):focus { border-color: var(--ph); box-shadow: var(--wf-ring); }

/* one scroll for the card (header · strip · editor); the footer stays put */
.wf-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent; }
/* header: name · readiness · cost · how it runs */
.wf-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--wf-edge); display: grid; gap: 8px; flex: 0 0 auto; }
.wf-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-kick { font-size: 14px; letter-spacing: 1.8px; color: var(--ph-dim); }
.wf-panel .bb.wf-x { min-width: 36px; padding-inline: 0; }
.wf-name-in { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px dashed var(--ph-dim); color: var(--ph-bright);
  font: inherit; font-size: 26px; line-height: 1.2; letter-spacing: .6px; padding: 4px 10px; }
/* the name is a glass field (the generic input rule sizes it; only the material is restated here) */
.wf-panel input.wf-name-in { border: 1px solid var(--wf-edge); border-radius: 10px; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%), var(--bg); box-shadow: var(--wf-well-shadow); text-shadow: none; }
.wf-panel input.wf-name-in:hover { border-color: rgba(var(--ph-rgb),.38); }
.wf-panel input.wf-name-in:focus { outline: none; border-color: var(--ph); box-shadow: var(--wf-ring); }
.wf-name-none { font-size: 24px; color: var(--ph-dim); }
.wf-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wf-pill { font-size: 16px; line-height: 1.2; letter-spacing: 1.1px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 8px;
  color: var(--gold); background: rgba(var(--gold-rgb),.07); box-shadow: var(--wf-light); cursor: pointer; }
.wf-pill:not(.ok):hover { border-color: var(--gold); background: rgba(var(--gold-rgb),.12); }
.wf-pill.ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ok); background: rgba(var(--ok-rgb),.07); cursor: default; }
.wf-est { font-size: 15px; color: var(--ph-dim); font-variant-numeric: tabular-nums; }
.wf-sentence { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text); }
/* what starts the line is set up at the INBOX: the sentence's first clause opens it */
.wf-sentence .wf-st { cursor: pointer; }
.wf-sentence .wf-st:hover { color: var(--ph-bright); text-decoration: underline; text-underline-offset: 3px; }
.wf-sentence .wf-ag { font-weight: normal; color: var(--ph-bright); cursor: pointer; }
.wf-sentence .wf-lp { color: var(--wf-cyan); }
.wf-miss { font: inherit; color: var(--gold); background: rgba(var(--gold-rgb),.1); border: 0; border-radius: 5px; box-shadow: inset 0 -1px 0 var(--gold); padding: 0 6px; cursor: pointer; }
.wf-miss:hover { background: rgba(var(--gold-rgb),.18); }
.wf-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wf-hint { font: inherit; font-size: 15px; line-height: 1.25; color: var(--ph-dim); background: var(--wf-plate); border: 1px solid var(--wf-edge); border-radius: 7px; padding: 3px 10px; cursor: pointer; text-align: left;
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.wf-hint:hover { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.55); background: var(--wf-hover); }

/* THE LINE, DRAWN (the panel's "system view"): trigger ▸ docks in compiled order ▸ OUTBOX, loops as back-arcs. One
   recessed bay — a darker well with the faint layout grid — so the machine reads as set INTO the glass; every part is a
   full glass card a Commander can read and click, joined by a plain belt with the + that adds to it.
   THE MAP (2026-09-30): each card leads with the part's own floor art, so the diagram is this line's machines and not a
   wireframe of boxes; and a one-row diagram stays PINNED at the top of the scroll (.pin) while the picked part's editor
   moves under it — the well is opaque for that, the same dark bay over the panel's own sheet. */
.wf-strip-wrap { flex: 0 0 auto; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--ph-rgb),.24) transparent; border-bottom: 1px solid var(--wf-edge);
  background: linear-gradient(rgba(var(--ph-rgb),.03) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(var(--ph-rgb),.03) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--panel2);   /* --panel2 is opaque: nothing scrolling under the pinned map shows through */
  box-shadow: inset 0 2px 6px rgba(0,0,0,.28), inset 0 -1px 0 rgba(var(--ph-bright-rgb),.04); }
.wf-strip-wrap.pin { position: sticky; top: 0; z-index: 3; }
@media (max-width: 900px), (max-height: 720px) { .wf-strip-wrap.pin { position: static; } }   /* a short panel keeps its height for the editor */
.wf-strip { position: relative; display: flex; align-items: center; padding: 14px 14px 16px; min-width: max-content; }   /* every part and every join sit on the line's middle (an INBOX → BAY → OUTBOX line fits the panel whole) */
.wf-strip.has-arcs { padding-bottom: 42px; }   /* a loop's way back is drawn under the tiles */
/* THE LINE'S MACHINES AS TILES (2026-09-30, Andrew on this diagram: "make this look way better"): the Build Library's glass tile —
   the machine's own art big in a lit well (a BAY's agent stands at it), its name, one short line; the lamp top-right, a BAY's
   number top-left. The sentences the old card spelled out are the tile's hover tip (a glass card, name first). */
.wf-node { position: relative; z-index: 1; flex: 0 0 auto; width: 124px; min-height: 128px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 9px; text-align: center;
  font: inherit; line-height: 1.2; color: var(--text); cursor: pointer;
  border: 1px solid var(--wf-edge); border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--ph-rgb),.075), rgba(var(--ph-rgb),.015)), rgba(0,0,0,.22);
  box-shadow: var(--wf-light);
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft); }
.wf-node:hover { border-color: rgba(var(--ph-rgb),.45); background: linear-gradient(135deg, rgba(var(--ph-rgb),.13), rgba(var(--ph-rgb),.04)), rgba(0,0,0,.22); }
/* the selected part keeps the floor highlight's gold, as an edge + inner ring (no bloom) */
.wf-node.sel { border-color: var(--gold); background: linear-gradient(135deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.03)), rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.3), var(--wf-light); }
.wf-node:disabled { opacity: .6; cursor: default; }
/* the art well: a soft pool of light under the machine (the props tile's), the machine drawn big and whole */
.wf-nart { position: relative; display: grid; place-items: center; width: 96px; height: 62px; margin-bottom: 4px; border-radius: 8px;
  background: radial-gradient(ellipse 72% 70% at 50% 64%, rgba(130,170,150,.11), transparent 76%); }
.wf-nart .wf-mthumb { display: block; width: 80px; height: 62px; object-fit: contain; }
/* a BAY's agent stands at its machine — the same skin the floor draws, the figure alone */
.wf-nart .wf-nthumb { position: absolute; right: -2px; bottom: -4px; background: none; box-shadow: none; }
.wf-nname { max-width: 100%; font-size: 16px; line-height: 1.15; letter-spacing: .7px; color: var(--ph-bright); overflow-wrap: anywhere; }
.wf-nmeta { max-width: 100%; font-size: 14px; line-height: 1.25; letter-spacing: .3px; color: var(--ph-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-nmeta.warn { color: var(--gold); }
.wf-nbadge { position: absolute; top: 7px; left: 9px; font-size: 14px; line-height: 1; letter-spacing: .4px; color: var(--ph-dim); }
.wf-nbadge.ok { color: var(--ok); }
/* status lamps: a small housed lamp — dark ring, top light, a faint spill (the glass session-lamp recipe) */
.wf-node .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3), 0 0 4px rgba(var(--gold-rgb),.3); }
.wf-node .dot.ok { background: var(--ok); box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3), 0 0 4px rgba(var(--ok-rgb),.3); }
/* a junction is a smaller machine: a narrower tile, the loop's cyan "goes round" edge */
.wf-node.gate { width: 110px; border-style: dashed; border-color: color-mix(in srgb, var(--wf-cyan) 60%, transparent); }
.wf-node.gate .wf-nname { color: var(--wf-cyan); }
.wf-node.gate.join { border-color: rgba(var(--ph-rgb),.35); }
.wf-node.gate.join .wf-nname { color: var(--ph-bright); }
/* no INBOX yet / + OUTBOX: a dashed place where the machine goes */
.wf-node.none { border-style: dashed; }
.wf-node.wf-addend { justify-content: center; border-style: dashed; color: var(--gold); font-size: 16px; letter-spacing: .8px; }
.wf-colgroup { position: relative; display: grid; gap: 8px; padding: 28px 8px 8px; border: 1px dashed rgba(var(--ph-rgb),.3); border-radius: 12px; background: rgba(var(--ph-rgb),.02); }
.wf-colmode { position: absolute; top: 7px; left: 11px; font-size: 14px; letter-spacing: 1.2px; color: var(--ph-dim); }
/* a join sits on the MIDDLE of the tiles (2026-09-30, Andrew: "CENTER THE ARROW IN THE MIDDLE NOT ON THE TOP"): three rows —
   what it carries over the line, the line with the + that adds to it ON it, and an empty row as tall as the first — so the
   line is the join's centre, and every join is centred on the tiles (beside stacked branches it meets them at their middle
   the same way). A join is as wide as what it carries needs, within reason: a label wraps between words, never inside one. */
.wf-belt { position: relative; flex: 0 0 auto; align-self: center; width: max-content; min-width: 60px; max-width: 112px; display: grid; grid-template-rows: 27px 28px 27px; justify-items: center; align-items: center; }
.wf-belt .carry { grid-row: 1; align-self: end; padding: 0 4px 3px; font-size: 14px; color: var(--ph-dim); text-align: center; line-height: 1.1; max-width: 112px; box-sizing: border-box; max-height: 2.3em; overflow: hidden; overflow-wrap: break-word; }
.wf-belt.gap .carry { grid-row: 2; align-self: center; padding-bottom: 0; }   /* a break in the line says so where the line would run */
.wf-belt :is(.rail,.wf-plus) { grid-row: 2; grid-column: 1; }
/* the join between two parts: ONE shape — a 2px line into a solid arrowhead whose tip touches the next part — a shade brighter
   once the line can run, never moving (2026-09-30: the floor's real conveyor art here was rejected outright — the diagram draws
   a line, not a belt). One clipped box with one fill, so the head never doubles over the line. */
.wf-belt .rail { position: relative; width: 100%; height: 10px; background: rgba(var(--ph-rgb),.34);
  clip-path: polygon(0 4px, calc(100% - 9px) 4px, calc(100% - 9px) 0, 100% 5px, calc(100% - 9px) 10px, calc(100% - 9px) 6px, 0 6px); }
.wf-strip.live .wf-belt .rail { background: rgba(var(--ph-rgb),.55); }
.wf-plus { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--wf-edge);
  background: linear-gradient(180deg, rgba(var(--ph-rgb),.08), rgba(var(--ph-rgb),.02)), var(--panel2); box-shadow: var(--wf-light), 0 1px 3px rgba(0,0,0,.4);
  color: var(--ph); font: inherit; font-size: 22px; line-height: 1; padding: 0; display: grid; place-items: center; cursor: pointer; z-index: 2;
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.wf-plus:hover { border-color: var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.04)), var(--panel2); }
.wf-plus.on { border-color: var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(var(--gold-rgb),.2), rgba(var(--gold-rgb),.08)), var(--panel2); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.4), 0 1px 3px rgba(0,0,0,.4); }
/* a "+" that can only refuse (2026-09-27 audit B3): dimmed and dashed; hover shows WHY (data-tip) */
.wf-plus.off { opacity: .45; border-style: dashed; cursor: not-allowed; }
.wf-plus.off:hover { border-color: var(--wf-edge); color: inherit; background: var(--panel2); opacity: .7; }
.wf-ins { flex: 0 0 auto; padding: 12px 18px; border-bottom: 1px solid var(--wf-edge); background: linear-gradient(180deg, rgba(var(--gold-rgb),.05), rgba(var(--gold-rgb),.015)); box-shadow: inset 0 1px 0 rgba(var(--gold-rgb),.12); }
.wf-inserter { display: grid; gap: 9px; }
.wf-inserter .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; letter-spacing: 1.2px; color: var(--gold); }
.wf-inserter .n { font-size: 15px; color: var(--ph-dim); line-height: 1.35; }
.wf-arcs { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.wf-arcs path { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 6; }
.wf-arcs path.chev { stroke: var(--wf-cyan); stroke-width: 2; stroke-dasharray: 6 8; opacity: .85; }
.wf-arcs path.stem { stroke: var(--wf-cyan); stroke-width: 2; opacity: .85; }
.wf-arcs .head { fill: var(--wf-cyan); stroke: none; opacity: .85; }   /* the way back ends in the joins' arrowhead on a solid stem, up into its part */
.wf-strip.live .wf-arcs path.chev { animation: wf-rollb 1s linear infinite; }   /* the way back moves only on a line that can run */
@keyframes wf-rollb { to { stroke-dashoffset: -14; } }
.wf-arcs text { font-family: 'VT323', monospace; font-size: 15px; fill: var(--wf-cyan); letter-spacing: .6px; }

/* body: the selected part's editor */
.wf-body { padding: 6px 18px 16px; }
.wf-sec { padding: 16px 0; display: grid; gap: 10px; }
.wf-sec + .wf-sec { border-top: 1px solid var(--wf-edge); }
.wf-panel h3::after, .wf-panel h4::after { display: none; }
.wf-sec h3 { margin: 0; padding: 0; border: 0; background: none; text-shadow: none; text-transform: none; letter-spacing: .4px; font-weight: normal; font-size: 22px; line-height: 1.25; color: var(--ph-bright); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.wf-sec h3 .n { font-size: 14px; letter-spacing: 1.2px; border: 1px solid var(--wf-edge); border-radius: 6px; background: var(--wf-plate); box-shadow: var(--wf-light); padding: 1px 8px; color: var(--ph); }
.wf-sec h4 { padding: 0; border: 0; background: none; text-transform: none; margin: 6px 0 0; font-weight: normal; font-size: 16px; letter-spacing: 1.4px; color: var(--ph-dim); }
.wf-help { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text); }
.wf-help.dim, .wf-panel .dim { color: var(--ph-dim); }
.wf-help b { font-weight: normal; color: var(--ph-bright); }
.wf-help.bad, .wf-warnline { color: var(--warn); font-size: 17px; line-height: 1.45; display: block; }
.wf-ok, .wf-okc { color: var(--ok); font-weight: normal; }
.wf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wf-link { font: inherit; background: none; border: 0; padding: 0; color: var(--ph-bright); text-decoration: underline; cursor: pointer; }
.wf-panel .refit-error { display: none; color: var(--bad); font-size: 16px; }
.wf-panel .refit-error.show { display: block; }
.wf-more { font-size: 17px; }
.wf-more summary { cursor: pointer; color: var(--ph-dim); padding: 4px 0; }
.wf-more summary:hover { color: var(--ph-bright); }
.wf-panel .refit-workflow-advanced summary { cursor: pointer; color: var(--ph-dim); }
.wf-panel .lb-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 17px; }
.wf-panel .lb-num { width: 92px; font-size: 17px; }

/* the agent picker: every agent, with an honest status — glass cards, the chosen one lit with a rail */
.wf-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.wf-agent { display: grid; grid-template-columns: 42px 1fr; gap: 0 10px; align-items: center; text-align: left; font: inherit; line-height: 1.2;
  background: var(--refit-glass, var(--wf-plate)); border: 1px solid var(--wf-edge); border-radius: 10px; padding: 8px 10px; color: var(--text); cursor: pointer; box-shadow: var(--wf-light);
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft); }
.wf-agent:hover:not(:disabled) { border-color: rgba(var(--ph-rgb),.45); background: var(--wf-hover); }
.wf-agent.on { border-color: var(--ph); background: var(--wf-on); box-shadow: inset 2px 0 0 var(--ph), var(--wf-light); }
.wf-agent:disabled { opacity: .5; cursor: not-allowed; }
/* the agent's SKIN in a recessed glass well (the panel's own --wf-well material; matte, no glow) — the same body the
   floor draws, never a letter. A disabled card dims it with the card (opacity). */
.wf-agent .av { grid-row: 1/3; width: 42px; height: 52px; border-radius: 6px; background: var(--wf-well); box-shadow: inset 0 0 0 1px var(--wf-edge), var(--wf-well-shadow); }
.wf-agent.on .av:not(.agt-wait) { box-shadow: inset 0 0 0 1px rgba(var(--ph-rgb),.45), var(--wf-well-shadow); }
.wf-agent .nm { font-size: 19px; color: var(--ph-bright); letter-spacing: .6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-agent .st { font-size: 15px; color: var(--ph-dim); line-height: 1.2; }
.wf-agent .st.free { color: var(--ok); }
.wf-agent.recruit { border-style: dashed; border-color: rgba(var(--ph-rgb),.3); background: transparent; box-shadow: none; }
.wf-agent.recruit:hover:not(:disabled) { border-color: rgba(var(--ph-rgb),.55); background: var(--wf-hover); }
.wf-agent.recruit .av { display: grid; place-items: center; font-size: 26px; background: transparent; border: 1px dashed rgba(var(--ph-rgb),.4); color: var(--ph); box-shadow: none; }
.wf-compute { display: grid; gap: 8px; justify-items: start; }

/* the contract: GETS → DOES → HANDS OFF → TO — one recessed form, labels on a quiet plate column */
.wf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wf-chip { display: inline-flex; align-items: center; min-height: 34px; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.15; letter-spacing: .5px; color: var(--ph); background: var(--refit-glass, var(--wf-plate)); border: 1px solid var(--wf-edge); border-radius: 8px; padding: 5px 12px; cursor: pointer; box-shadow: var(--wf-light);
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.wf-chip:hover { border-color: rgba(var(--ph-rgb),.45); color: var(--ph-bright); background: var(--wf-hover); }
.wf-chip[aria-pressed="true"] { background: var(--wf-on); border-color: var(--ph); color: var(--ph-bright); box-shadow: var(--wf-light), inset 0 -2px 0 rgba(var(--ph-rgb),.65); }
/* a line edit that cannot be made here (conveyor-links phase D): shown OFF, its reason in the tip — the same language as an OFF + */
.wf-chip.off, .wf-foot .bb.off { opacity: .45; border-style: dashed; cursor: not-allowed; }
/* an edit with no room where the line stands, ARMED: a second click tidies the line round it — the warn face ArmConfirm chips
   wear, matte: the panel's own pressed-chip bar in warn, no glow */
.wf-chip.armed, .wf-foot .bb.armed { color: var(--warn); border-color: var(--warn); box-shadow: var(--wf-light), inset 0 -2px 0 color-mix(in srgb, var(--warn) 55%, transparent); }
.wf-chip.off:hover { border-color: var(--wf-edge); color: inherit; background: var(--refit-glass, var(--wf-plate)); opacity: .7; }
.wf-shape .wf-chips { margin: 0 0 6px; }
/* a line that ends on a step: its OUTBOX place on the strip is the button that adds one */
.wf-node.wf-addend { border-style: dashed; color: var(--gold); justify-content: center; font-size: 17px; min-height: 64px; align-content: center; }
/* the SPLITTER mode switch (2026-09-28): two chips that each say what the choice does — a pressed one is the mode the floor has */
.wf-modepicks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.wf-modepick { display: grid; gap: 5px; text-align: left; padding: 11px 13px; align-items: start; align-content: start; min-height: 0; border-radius: 10px; }
.wf-modepick b { font-weight: normal; font-size: 17px; line-height: 1.2; letter-spacing: .8px; }
.wf-modepick small { font-size: 15px; line-height: 1.3; color: var(--muted, var(--text)); }
.wf-modepick.off { opacity: .5; border-style: dashed; cursor: not-allowed; }
.wf-modepick.off:hover { border-color: var(--wf-edge); color: var(--ph); background: var(--refit-glass, var(--wf-plate)); }
.wf-modepicks-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }   /* the TEST view: WATCH IT · STEP THROUGH · RUN ONE REAL JOB */
.wf-contract { display: grid; border: 1px solid var(--wf-edge); border-radius: 10px; overflow: hidden; background: var(--wf-well); box-shadow: var(--wf-well-shadow);
  transition: border-color var(--t-fast) var(--ease-soft); }
.wf-contract:focus-within { border-color: rgba(var(--ph-rgb),.55); }
.wf-contract .row { display: grid; grid-template-columns: 96px minmax(0,1fr); border-top: 1px solid var(--wf-edge); }
.wf-contract .row:first-child { border-top: 0; }
.wf-contract .lab { padding: 9px 11px; font-size: 14px; letter-spacing: 1.5px; color: var(--ph-dim); background: var(--wf-plate); border-right: 1px solid var(--wf-edge); }
.wf-contract .val { padding: 8px 11px; font-size: 17px; line-height: 1.4; color: var(--text); }
.wf-contract .val.ro { color: var(--ph-dim); }
.wf-contract .val.ro b { font-weight: normal; color: var(--ph-bright); }
.wf-contract textarea, .wf-contract input { width: 100%; box-sizing: border-box; background: transparent; border: 0; color: var(--ph-bright); font: inherit; font-size: 17px; line-height: 1.4; padding: 0; resize: vertical; box-shadow: none; text-shadow: none; }
.wf-contract textarea { min-height: 96px; }
.wf-contract textarea:focus, .wf-contract input:focus { outline: none; box-shadow: none; }
.wf-contract .row:focus-within { background: rgba(var(--ph-rgb),.05); }
.wf-contract .row:focus-within .lab { color: var(--ph-bright); background: var(--wf-hover); box-shadow: inset 2px 0 0 var(--ph); }

/* try this step + the step test */
.wf-io { display: block; width: 100%; box-sizing: border-box; background: rgba(0,0,0,.46); border: 1px solid var(--wf-edge); border-radius: 10px; box-shadow: var(--wf-well-shadow);
  padding: 9px 12px; font: inherit; font-size: 17px; line-height: 1.4; color: var(--text); text-shadow: none; white-space: pre-wrap; max-height: 240px; overflow: auto; resize: vertical;
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft); }
textarea.wf-io { color: var(--ph-bright); }
textarea.wf-io:hover { border-color: rgba(var(--ph-rgb),.38); }
textarea.wf-io:focus { outline: none; border-color: var(--ph); box-shadow: var(--wf-ring); }
.wf-io.out { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ph-bright); }
.wf-io.edited, textarea.wf-io.edited { border-color: var(--wf-cyan); }
.wf-from { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; letter-spacing: 1.2px; color: var(--ph-dim); }
.wf-from .src { color: var(--wf-cyan); letter-spacing: .4px; }
.wf-tag { color: var(--wf-cyan); background: color-mix(in srgb, var(--wf-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--wf-cyan) 50%, transparent); border-radius: 5px; padding: 0 6px; letter-spacing: 1px; }
.wf-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 16px; color: var(--ph-dim); font-variant-numeric: tabular-nums; }
.wf-meta b { font-weight: normal; color: var(--ph); }
.wf-flowon { border-left: 3px solid var(--wf-cyan); border-radius: 0 8px 8px 0; padding: 7px 11px; background: linear-gradient(90deg, color-mix(in srgb, var(--wf-cyan) 8%, transparent), color-mix(in srgb, var(--wf-cyan) 2%, transparent)); font-size: 17px; color: var(--ph-bright); }
.wf-flowon b { font-weight: normal; color: var(--wf-cyan); }
.wf-verdict { border-left: 3px solid var(--ok); border-radius: 0 8px 8px 0; padding: 6px 11px; background: linear-gradient(90deg, rgba(var(--ok-rgb),.08), rgba(var(--ok-rgb),.02)); font-size: 17px; }
.wf-verdict.revise { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(var(--gold-rgb),.08), rgba(var(--gold-rgb),.02)); }
.wf-log { font-size: 17px; color: var(--ph-dim); }
.wf-spin { display: inline-block; width: 10px; height: 10px; background: var(--ph); margin-right: 8px; animation: wf-blink .5s steps(2) infinite; }
@keyframes wf-blink { 50% { opacity: .2; } }
/* "continue with MY edit": the cyan voice as lit glass, same weight as the primary key */
.wf-panel .bb.cyan, .wf-panel .bb.refit-primary.cyan { color: var(--wf-cyan) !important; background: color-mix(in srgb, var(--wf-cyan) 14%, transparent) !important; border-color: var(--wf-cyan) !important; box-shadow: var(--wf-light); }
.wf-panel .bb.cyan:hover:not(:disabled), .wf-panel .bb.refit-primary.cyan:hover:not(:disabled) { background: color-mix(in srgb, var(--wf-cyan) 22%, transparent) !important; }
.wf-budget { display: flex; align-items: center; gap: 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.wf-budget .meter { flex: 0 0 110px; height: 8px; background: rgba(0,0,0,.4); border: 1px solid var(--wf-edge); border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.wf-budget .meter i { display: block; height: 100%; background: var(--ph); }
.wf-runlog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-top: 1px solid var(--wf-edge); }
.wf-runlog .lbl { font-size: 14px; letter-spacing: 1.5px; color: var(--ph-dim); margin-right: 4px; }
.wf-runlog .arr { color: var(--ph-dim); }
.wf-hop { display: inline-flex; align-items: center; min-height: 32px; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.15; color: var(--text); background: var(--refit-glass, var(--wf-plate)); border: 1px solid var(--wf-edge); border-radius: 8px; padding: 4px 10px; cursor: pointer; box-shadow: var(--wf-light);
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft); }
.wf-hop:hover { border-color: rgba(var(--ph-rgb),.45); background: var(--wf-hover); }
.wf-hop.sel { border-color: var(--gold); color: var(--ph-bright); background: rgba(var(--gold-rgb),.08); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.3), var(--wf-light); }
.wf-hop.edited { border-color: var(--wf-cyan); }
.wf-hop.revise { border-style: dashed; }

/* footer: the Build Library's quiet base strip */
.wf-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 18px; border-top: 1px solid var(--wf-edge); background: rgba(0,0,0,.12); }
.wf-foot-note { flex: 1; min-width: 150px; font-size: 15px; line-height: 1.3; color: var(--ph-dim); }
.wf-sample-res { flex: 1 1 100%; font-size: 17px; line-height: 1.45; }
/* a job, read back (2026-09-30): the whole result, then how each step did it — each step's reply one click open */
.wf-job { flex: 1 1 100%; display: grid; gap: 8px; margin-top: 4px; }
.wf-help.wf-live { color: var(--ph-bright); }   /* where the job is now, while it rides */
/* the tile of the step working now (the floor lamp's WORKING): its own lamp turns the floor's working amber and pulses like the
   bay lamp does, and the tile's edge brightens — never the selection's gold, so "working" and "picked" never look alike */
.wf-node.working { border-color: rgba(var(--ph-rgb),.7); }
.wf-node.working .dot { background: #ffb23e; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3); animation: wf-working 1.2s ease-in-out infinite; }
@keyframes wf-working { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .wf-node.working .dot { animation: none; } }
.wf-job-h { font-size: 16px; letter-spacing: .6px; color: var(--ph-dim); }
.wf-job-h b { font-weight: normal; color: var(--ok); letter-spacing: 1.2px; }
.wf-job-h b.warn { color: var(--gold); }
.wf-step-out .src.warn { color: var(--gold); }
.wf-job-out { max-height: 320px; }
.wf-steps { display: grid; gap: 2px; }
.wf-step-out summary { display: flex; justify-content: space-between; gap: 10px; }
.wf-step-out .src { color: var(--ph-dim); font-size: 15px; letter-spacing: .4px; }
.wf-step-out .wf-io { margin: 4px 0 6px; }
/* a reply drawn as COMMS draws it (Chat.renderProse's classes, on the panel's scale) */
.wf-io.wf-md { white-space: normal; }
.wf-md .md-p { display: block; white-space: pre-wrap; margin: .35em 0; }
.wf-md .md-p:first-child { margin-top: 0; }
.wf-md .md-h { display: block; margin: .6em 0 .25em; color: var(--ph-bright); letter-spacing: .5px; }
.wf-md .md-b { color: var(--ph-bright); }
.wf-md .md-list { margin: .35em 0; padding-left: 1.6em; }
.wf-md .md-list li { margin: .15em 0; }
.wf-md .md-code { padding: 0 4px; border-radius: 4px; background: rgba(var(--ph-rgb),.08); }
.wf-md a { color: var(--wf-cyan); }
/* a READY line's next step: the ▶ SEND IT A JOB key beside the pill */
.wf-ready #wf-sendnow { padding: 0 12px; }
/* NOT RIGHT? — say what's wrong; each suggested change is a glass card to use or ignore (2026-09-30) */
.wf-notright { display: grid; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--wf-edge); }
.wf-fix { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--wf-edge); border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--ph-rgb),.06), rgba(var(--ph-rgb),.015)), rgba(0,0,0,.18); box-shadow: var(--wf-light); }
.wf-fix.applied { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.wf-fix-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .8px; color: var(--ph-bright); }
.wf-fix-h b { font-weight: normal; }
/* the real job's verdict (build.js finSampleHTML): RAN · COST · SAID as a result block — the panel's own left-rail voice
   (.wf-verdict): green when it reached the OUTBOX, gold when you stopped it, red when it was refused */
.wf-sample-res .fl-result { display: grid; gap: 3px; border-left: 3px solid var(--ok); border-radius: 0 8px 8px 0; padding: 8px 12px; background: linear-gradient(90deg, rgba(var(--ok-rgb),.08), rgba(var(--ok-rgb),.02)); color: var(--text); }
.wf-sample-res .fl-result.stopped { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(var(--gold-rgb),.08), rgba(var(--gold-rgb),.02)); }
.wf-sample-res .fl-result.bad { display: block; border-left-color: var(--bad); background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 9%, transparent), color-mix(in srgb, var(--bad) 2%, transparent)); }
.wf-sample-res .fl-result-k { display: inline-block; min-width: 76px; font-size: 14px; letter-spacing: 1.5px; color: var(--ph-dim); }
.wf-sample-res .fl-result-reply { color: var(--ph-bright); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }

/* WHAT STARTS THE LINE (2026-09-30): one glass block per way in — a schedule, a channel, a watched folder, a webhook. The
   header row carries the block's name, what it has ("none yet") and the key that adds one; rows and the add form open
   under it. The rows, the forms and the WHEN picker are shared pieces (refit.css / app.css) drawn for a 14px card: here
   they are restated on the panel's scale — nothing under 15px — in the panel's glass. */
.wf-start { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--wf-edge); border-radius: 10px; background: var(--wf-plate); box-shadow: var(--wf-light); }
.wf-start-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wf-panel .wf-start-h h4 { margin: 0; flex: 0 0 auto; font-size: 18px; line-height: 1.2; letter-spacing: .4px; color: var(--ph-bright); }
.wf-start-n { flex: 1 1 auto; font-size: 15px; color: var(--ph-dim); }
.wf-start-h .wf-row { margin-left: auto; }
.wf-start .trg-list { margin: 0; }
.wf-start .trg-list:empty { display: none; }
.wf-panel .trg-row { font-size: 17px; line-height: 1.35; letter-spacing: .2px; margin: 0; padding: 7px 0; }
.wf-panel .trg-row + .trg-row { border-top: 1px dashed var(--wf-edge); }
.wf-panel .lt-row { border-bottom: 0; }
.wf-panel .trg-row-meta { font-size: 15px; line-height: 1.35; }
.wf-panel .trg-armline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wf-panel .trg-form { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--wf-edge); border-radius: 10px; background: var(--wf-well); box-shadow: var(--wf-well-shadow); }
.wf-panel .trg-form[hidden] { display: none; }
.wf-panel .trg-form-k { margin: 0; font-size: 15px; line-height: 1.25; letter-spacing: .8px; text-transform: none; color: var(--ph); }
.wf-panel :is(.refit-input,.refit-brief) { width: 100%; box-sizing: border-box; margin: 0; padding: 9px 12px; font-size: 17px; line-height: 1.4; letter-spacing: .2px; border-radius: 10px; }
.wf-panel .refit-brief { min-height: 84px; max-height: 260px; }
.wf-panel .wf-row .refit-input { width: auto; flex: 1 1 180px; }
.wf-panel .trg-preview { margin: 0; font-size: 15px; line-height: 1.3; }
.wf-panel .trg-msg { margin: 0; }
.wf-panel .lb-note { margin: 0; font-size: 15px; line-height: 1.35; }
.wf-panel .refit-field { margin: 0; }
/* the WHEN picker, on the panel's scale: cadence keys the size of the panel's own keys, fields you can read */
.wf-panel .sp, .wf-panel .rt-when { gap: 8px; margin: 0; }
.wf-panel .sp-modes, .wf-panel .sp-days, .wf-panel .sp-units { gap: 6px; }
.wf-panel :is(.sp-mode,.sp-unit) { min-height: 34px; padding: 5px 12px; font-size: 16px; letter-spacing: .5px; }
.wf-panel .sp-day { width: 40px; height: 36px; font-size: 16px; }
.wf-panel .sp-pane.on { gap: 8px; }
.wf-panel :is(.sp-lbl,.sp-tz,.sp-hint,.sp-note) { font-size: 15px; letter-spacing: .4px; text-transform: none; }
.wf-panel .sp .sp-num { width: 72px; padding: 6px 8px; font-size: 17px; }
.wf-panel select { min-height: 36px; font-size: 17px; }   /* (its drawn chevron and padding stay the shared select's) */

/* LINE TRIGGERS (2026-09-23): folder / webhook rows on the INBOX. The URL and the once-only key are readouts the
   Commander copies, so they wrap anywhere and select as one token; the key box is the only lit (gold-edged) object. */
.lt-row { padding: 8px 0 10px; border-bottom: 1px dashed var(--wf-edge); }
.lt-row:last-child { border-bottom: 0; }
.lt-acts { padding-left: 1.15em; margin-top: 6px; }
.lt-url { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lt-code { font-family: 'VT323', monospace; font-size: 16px; color: var(--ph-bright); background: var(--wf-well); border: 1px solid var(--wf-edge); border-radius: 6px; box-shadow: var(--wf-well-shadow);
  padding: 1px 7px; overflow-wrap: anywhere; user-select: all; }
.lt-reveal { margin: 8px 0 4px 1.15em; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.08), rgba(var(--gold-rgb),.025)); box-shadow: inset 0 1px 0 rgba(var(--gold-rgb),.12); display: grid; gap: 6px; }
.lt-reveal .lt-key { font-size: 18px; color: var(--gold); }
.lt-form .lb-field { margin-top: 6px; }

/* MACHINE SECTIONS (2026-09-27 audit P1/P3/P4): each junction explains itself — its wiring drawn beside one plain sentence,
   the splitter's live MODE, the branches it feeds, and the FILTER's per-type belt picker (the old full-screen modal, docked) */
.wf-mode { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border: 1px solid var(--wf-edge); border-radius: 10px; background: var(--wf-plate); box-shadow: var(--wf-light); }
.wf-mode p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text); }
.wf-mode p b { font-weight: normal; color: var(--ph-bright); }
.wf-mode .refit-machinediagram { width: 60px; height: 36px; margin: 3px 0 0; color: var(--wf-cyan); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wf-mode .refit-machinediagram .md-fill { fill: currentColor; stroke: none; }
.wf-sub { margin: 4px 0 0 !important; }
.wf-branches { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 4px; font-size: 17px; color: var(--ph-bright); }
.wf-branches li::marker { color: var(--wf-cyan); }
.wf-routes { display: grid; gap: 8px; }
.wf-route { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 8px 12px; align-items: start; padding: 9px 0; border-bottom: 1px dashed var(--wf-edge); }
.wf-route:last-child { border-bottom: 0; }
.wf-route-k { font-size: 16px; letter-spacing: 1px; color: var(--ph); display: grid; gap: 2px; }
.wf-route-k small { font-size: 14px; line-height: 1.25; letter-spacing: .2px; color: var(--ph-dim); }

@media (prefers-reduced-motion: reduce) {
  .wf-strip.live .wf-arcs path.chev, .wf-spin { animation: none; }
  .wf-panel :is(.bb,.wf-node,.wf-agent,.wf-chip,.wf-hop,.wf-hint,.wf-plus,.wf-contract,.wf-io) { transition: none; }
}