/* ═══════════════════════════════════════════════════════════════════════════
   Mocca — workflow diagram creator (B50-07). Pablo asked for this component by
   name: "add statuses (which I want a workflow diagram creator component for
   this too)".
   ═══════════════════════════════════════════════════════════════════════════ */

.wf{ display:flex;flex-direction:column;gap:10px;position:relative; }

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.wf-bar{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.wf-bar-sp{ flex:1 1 auto; }
.wf-btn{ display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;
  font:600 11.5px/1 var(--mk-font-ui);white-space:nowrap; }
.wf-btn:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent));background:var(--accent-soft); }
.wf-btn.on{ border-color:var(--accent);background:var(--accent);color:#fff; }
.wf-btn .mi{ font-size:15px; }
.wf-count{ font:600 10.5px var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap; }
@media (pointer:coarse){ .wf-btn{ min-height:44px; } }

/* ── canvas ──────────────────────────────────────────────────────────────── */
.wf-canvas{ position:relative;border:1px solid var(--border);border-radius:var(--mk-radius-lg);
  background:var(--bg-2);overflow:auto;
  /* B50-32 (RTL) — the diagram owns an LTR COORDINATE SPACE, declared rather than
     accidental. Node positions are stored as absolute `left`/`top` on each node
     and are dragged by the user, so mirroring the canvas per-locale would fight
     saved positions and flip a workflow the moment someone switched language.
     Charts and diagrams conventionally keep their own space in RTL locales for
     exactly this reason; only the TEXT inside a node follows the locale. Verified
     in AR-RTL: 4/4 nodes inside the canvas, edges aligned, no overflow. */
  direction:ltr;
  /* A faint dot grid reads as "a place things are placed" without competing with
     the nodes; it also makes a drag legible. */
  background-image:radial-gradient(color-mix(in srgb,var(--fg-3) 22%,transparent) 1px,transparent 1px);
  background-size:16px 16px;background-position:-1px -1px;outline:none; }
.wf-canvas:focus-visible{ box-shadow:0 0 0 2px var(--accent-soft);border-color:var(--accent); }
.wf-svg{ position:absolute;inset:0;overflow:visible;pointer-events:none; }
.wf-svg #wfArrow path{ fill:var(--fg-3); }

/* ── transitions ─────────────────────────────────────────────────────────── */
.wf-edge{ pointer-events:auto;cursor:pointer; }
/* A fat invisible stroke is the hit target — a 1.6px line is unclickable. */
.wf-edge-hit{ fill:none;stroke:transparent;stroke-width:16px; }
.wf-edge-line{ fill:none;stroke:var(--fg-3);stroke-width:1.6px;transition:stroke var(--mk-t-fast),stroke-width var(--mk-t-fast); }
.wf-edge:hover .wf-edge-line{ stroke:var(--accent);stroke-width:2.2px; }
.wf-edge.is-sel .wf-edge-line{ stroke:var(--accent);stroke-width:2.4px; }
/* B52-01 (Pablo: "hide the names of the transitions and the supporting text,
   everything would show either on a tooltip or on the side pane") — the wire's
   two <text> runs are no longer rendered at all, so `.wf-edge-t` / `.wf-edge-g`
   are retired. What replaces them: `.wf-tip` on hover, and the side pane's
   transition list (`.wf-trs`), which shows every name and guard at once. */
.wf-tip{ position:absolute;z-index:20;pointer-events:none;opacity:0;transition:opacity .12s;
  display:flex;flex-direction:column;gap:3px;max-width:260px;padding:7px 10px;border-radius:9px;
  background:var(--fg-1);color:var(--bg-1);box-shadow:0 6px 20px rgba(13,25,32,.24);
  font:600 11.5px/1.35 var(--mk-font-ui); }
.wf-tip.on{ opacity:1; }
.wf-tip b{ font-weight:800; }
.wf-tip .wf-tip-g{ display:flex;align-items:center;gap:4px;opacity:.82;font-weight:500; }
.wf-tip .wf-tip-g .mi{ font-size:13px; }
/* B51-06 — the TURN handle. Invisible at rest so the board stays quiet; it
   appears on hover or when the transition is selected, and is always draggable
   (a 6px circle plus the fat hit stroke behind it). */
.wf-bend{ fill:var(--bg-1);stroke:var(--accent);stroke-width:1.6px;
  opacity:0;cursor:grab;pointer-events:auto;transition:opacity var(--mk-t-fast); }
.wf-edge:hover .wf-bend,.wf-edge.is-sel .wf-bend{ opacity:1; }
.wf-bend:active{ cursor:grabbing;fill:var(--accent); }
@media (pointer:coarse){ .wf-bend{ r:11px;opacity:1; } }

/* B53-07 — the draggable ENDS of the selected transition. Same grammar as the
   turn handle (that is the point: one way to move a wire), but filled, and only
   on the selected edge — two handles per wire on every edge would be noise. */
.wf-endh{ fill:var(--accent);stroke:var(--bg-1);stroke-width:2px;cursor:grab;
  pointer-events:auto;touch-action:none; }
.wf-endh:active{ cursor:grabbing; }
@media (pointer:coarse){ .wf-endh{ r:11px; } }
/* While an end is being dragged the boxes are the drop target, so they stop
   competing for the pointer and read as targets. */
.wf-canvas.wf-retarget .wf-node{ pointer-events:none;border-color:var(--accent);
  border-style:dashed;cursor:grabbing; }

/* ── statuses ────────────────────────────────────────────────────────────── */
/* Pablo B51-06: "the status boxes don't look that nice, I want something more
   simple and very nice looking." The old box shouted — a 1.5px TINTED border, a
   double border for terminal, plus two pseudo-elements drawing a start marker
   OUTSIDE the box. Now: one quiet surface (bg-1, hairline, 12px radius, soft
   lift), the tint carried by a single dot, and the label at 500 rather than 700.
   Meaning lives in the dot, not in the frame. */
.wf-node{ position:absolute;width:138px;height:40px;box-sizing:border-box;
  display:flex;align-items:center;gap:9px;padding:0 12px;cursor:grab;touch-action:none;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-1);
  box-shadow:0 1px 2px rgba(13,37,48,.06),0 3px 8px -4px rgba(13,37,48,.10);
  transition:box-shadow var(--mk-t-fast),border-color var(--mk-t-fast),transform var(--mk-t-fast); }
.wf-node:hover{ box-shadow:0 2px 4px rgba(13,37,48,.08),0 8px 18px -8px rgba(13,37,48,.20); }
.wf-node:active{ cursor:grabbing; }
.wf-node.is-sel{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); }
.wf-node.is-pending{ border-style:dashed;border-color:var(--accent);background:var(--accent-soft); }
.wf-dot{ width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--wf-tint); }
.wf-node-nm{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 12.5px var(--mk-font-ui);color:var(--fg-1);
  /* The canvas is LTR (see .wf-canvas), but a status NAME must still read in its
     own script — plaintext bidi gives an Arabic label RTL flow inside an LTR box. */
  unicode-bidi:plaintext; }
.wf-node-end{ font-size:13px;color:var(--fg-3);flex:0 0 auto; }
/* The initial status: the dot gains a halo instead of a marker drawn outside the
   box — same information, no extra geometry. */
.wf-node.is-initial .wf-dot{ box-shadow:0 0 0 3px color-mix(in srgb,var(--wf-tint) 26%,transparent); }
/* B53-06b — the DEFAULT status says so. A micro-label riding the top edge: it
   names the fact instead of hinting at it, and costs the name row no width. */
.wf-node-def{ position:absolute;top:-8px;left:10px;padding:1px 6px;border-radius:999px;
  font:800 8.5px var(--mk-font-ui);letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--wf-tint);white-space:nowrap;
  box-shadow:0 0 0 2px var(--bg-1); }
.wf-node.is-terminal .wf-node-end{ color:var(--wf-tint); }
/* Unreachable = nothing transitions INTO it. Drawn dashed and dimmed, which is
   the same fact `MoccaBackend.inconsistencies()` reports — the diagram and the
   production gate can't disagree. */
.wf-node.is-unreachable{ border-style:dashed;opacity:.62; }
.wf-node.is-unreachable .wf-node-nm{ color:var(--fg-2); }
@media (pointer:coarse){ .wf-node{ height:48px; } }

/* ── inspector ───────────────────────────────────────────────────────────── */
.wf-insp{ display:flex;flex-direction:column;gap:9px;padding:12px;
  border:1px solid var(--border);border-radius:var(--mk-radius-lg);background:var(--bg-1); }
.wf-insp-empty{ flex-direction:row;align-items:center;gap:8px;color:var(--fg-3);
  font:500 12px var(--mk-font-ui);border-style:dashed;background:transparent; }
.wf-insp-empty .mi{ font-size:17px; }
.wf-insp-hd{ display:flex;align-items:center;gap:7px;font:700 12.5px var(--mk-font-ui);color:var(--fg-1); }
.wf-insp-hd .mi{ font-size:17px;color:var(--fg-3); }
.wf-insp-hd b{ flex:1 1 auto; }
.wf-del{ width:26px;height:26px;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--fg-3);flex:0 0 auto; }
.wf-del:hover{ border-color:color-mix(in srgb,var(--mk-danger,#c0392b) 40%,transparent);
  color:var(--mk-danger,#c0392b);background:color-mix(in srgb,var(--mk-danger,#c0392b) 9%,transparent); }
.wf-del .mi{ font-size:16px; }
.wf-insp-path{ display:flex;align-items:center;gap:6px;font:700 11.5px var(--mk-font-ui);color:var(--fg-2);
  padding:5px 9px;border-radius:8px;background:var(--bg-2);align-self:flex-start; }
.wf-insp-path .mi{ font-size:14px;color:var(--fg-3); }
.wf-f{ display:flex;flex-direction:column;gap:4px; }
.wf-f > span{ font:700 10.5px var(--mk-font-ui);letter-spacing:.04em;color:var(--fg-3); }
/* B53-06 — the stage picker replaced the colour picker: the swatch is a READOUT
   of the stage's colour, the select is the only control. */
.wf-stage-row{ display:flex;align-items:center;gap:8px; }
.wf-stage-row select{ flex:1 1 auto;min-width:0; }
.wf-stage-sw{ width:14px;height:14px;border-radius:5px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(13,37,48,.12) inset; }
.wf-flags{ display:flex;gap:6px;flex-wrap:wrap; }
.wf-flag{ display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;font:600 11px var(--mk-font-ui); }
.wf-flag:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
.wf-flag.on{ border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text,var(--accent)); }
.wf-flag .mi{ font-size:15px; }
.wf-hint{ font:500 11px/1.5 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
@media (pointer:coarse){ .wf-del{ width:44px;height:44px; } .wf-flag{ min-height:44px; } }

/* B52-17 (Pablo: "I want to change the turn on the map, not the slider please
   remove the slider") — the side-panel turn control is gone; `.wf-turn`,
   `.wf-range` and `.wf-mini` were its only users. The turn is dragged on the
   canvas by `.wf-bend`, styled above. */
.wf-insp-tr{ font:600 10.5px var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }

/* B53-07 (Pablo: "I don't want to edit here, I should be able to drag the start
   or end of an arrow") — `.wf-anch` / `.wf-anch-b` are GONE with the pickers
   they styled. What's left is the line that points at the canvas, plus the one
   affordance dragging can't offer: back to automatic. */
.wf-ends-hint{ display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;
  background:var(--bg-2);font:500 11px/1.45 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty; }
.wf-ends-hint .mi{ font-size:16px;color:var(--fg-3);flex:0 0 auto; }
.wf-ends-auto{ margin-inline-start:auto;flex:0 0 auto;border:1px solid var(--border);
  background:var(--bg-1);border-radius:7px;padding:3px 8px;cursor:pointer;
  font:700 10.5px var(--mk-font-ui);color:var(--fg-2); }
.wf-ends-auto:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
@media (pointer:coarse),(max-width:520px){ .wf-ends-auto{ min-height:44px; } }

/* B52-01 — the transitions list: what the wires stopped saying. */
.wf-insp-n{ font:800 10.5px var(--mk-font-ui);color:var(--fg-3);background:var(--bg-2);
  padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums; }
.wf-insp-n:empty{ display:none; }   /* B67 R67-038 — a section with nothing to count (the reading with no findings) drew an empty pill */
.wf-trs{ display:flex;flex-direction:column;gap:4px; }
.wf-tr{ display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:start;
  padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg-1);cursor:pointer;width:100%; }
.wf-tr:hover{ border-color:var(--accent);background:var(--accent-soft); }
.wf-tr-nm{ font:700 12px var(--mk-font-ui);color:var(--fg-1); }
.wf-tr-rt{ display:flex;align-items:center;gap:4px;font:600 10.5px var(--mk-font-ui);color:var(--fg-3); }
.wf-tr-rt .mi{ font-size:13px; }
.wf-tr-g{ display:flex;align-items:center;gap:4px;font:500 10.5px var(--mk-font-ui);color:var(--fg-2); }
.wf-tr-g .mi{ font-size:13px;color:var(--fg-3); }
.wf-insp-empty-t{ font:500 12px var(--mk-font-ui);color:var(--fg-3);padding:4px 2px; }
@media (pointer:coarse),(max-width:520px){ .wf-tr{ min-height:44px; } }

/* ═══ B51-22 · FULL-SCREEN MODAL + B51-21 · THE EDITOR AS A SIDE PANEL ═══
   Pablo: "The whole flowchart component needs to be it's own full screen modal,
   this one looks horrible, it can simply be a button to configure that opens the
   modal" · "editing statuses and transitions should be some sort of 'side panel'
   within the full screen modal". The overlay uses the same scrim + card grammar
   as the app's other modals, at full size. */
.wf-modal-ov{ position:fixed;inset:0;z-index:1600;display:none;
  background:color-mix(in srgb,var(--fg-1) 42%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:22px;box-sizing:border-box; }
.wf-modal-ov.open{ display:block;animation:wfFade .16s var(--mk-ease,ease-out); }
@keyframes wfFade{ from{ opacity:0 } to{ opacity:1 } }
body.wf-modal-open{ overflow:hidden; }
.wf-modal{ width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--mk-radius-lg,14px);
  box-shadow:0 30px 80px -20px rgba(13,37,48,.5);overflow:hidden; }
.wf-modal-hd{ display:flex;align-items:center;gap:11px;padding:14px 16px;flex:0 0 auto;
  border-bottom:1px solid var(--divider,var(--border)); }
.wf-modal-ic{ font-size:20px;color:var(--fg-3); }
.wf-modal-ttl{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto; }
.wf-modal-ttl b{ font:700 14.5px var(--mk-font-ui);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.wf-modal-ttl span{ font:500 11.5px var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }
.wf-modal-x{ width:34px;height:34px;flex:0 0 auto;border-radius:9px;border:1px solid transparent;
  background:none;cursor:pointer;display:grid;place-items:center;color:var(--fg-2); }
.wf-modal-x:hover{ background:var(--bg-2);color:var(--fg-1); }
.wf-modal-x .mi{ font-size:19px; }
.wf-modal-b{ flex:1 1 auto;min-height:0;display:flex;align-items:stretch; }
.wf-modal-diag{ flex:1 1 auto;min-width:0;display:flex;padding:14px 16px;box-sizing:border-box; }
.wf-host-modal{ flex:1 1 auto;min-width:0;display:flex; }
/* Inside the modal the diagram fills its column: the toolbar pins, the board
   scrolls. `.wf-scroll` is the scroller so the canvas keeps its natural size. */
.wf-sided{ flex:1 1 auto;min-width:0; }
.wf-scroll{ flex:1 1 auto;min-height:0;overflow:auto;border-radius:var(--mk-radius-lg); }
.wf-sided .wf-canvas{ min-height:100%; }
.wf-side{ flex:0 0 auto;width:312px;max-width:42vw;box-sizing:border-box;overflow:auto;
  border-inline-start:1px solid var(--divider,var(--border));background:var(--bg-2);padding:14px; }
/* In the side panel the inspector IS the panel — no card inside a card. */
.wf-side .wf-insp{ border:0;background:transparent;padding:0;gap:12px; }
.wf-side .wf-insp-empty{ border:1px dashed var(--border);padding:12px;border-radius:var(--mk-radius-lg); }
@media (max-width:900px){
  .wf-modal-ov{ padding:0; }
  .wf-modal{ border-radius:0;border:0; }
  /* the side panel becomes a bottom sheet — the app's mobile pattern for panels */
  .wf-modal-b{ flex-direction:column; }
  .wf-side{ width:auto;max-width:none;max-height:46%;
    border-inline-start:0;border-top:1px solid var(--divider,var(--border)); }
}
@media (pointer:coarse){ .wf-modal-x{ width:44px;height:44px; } }

/* ══ B65 W10 (065-122 · 123 · 124) — the flowchart's side panel, conditions, guides ══ */
.wf-split{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:10px }
.wf-split > .wf-scroll{ flex:1 1 auto; min-height:260px }
.wf-panel{ display:flex; flex-direction:column; min-height:0; overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--border); border-radius:var(--mk-radius-lg); background:var(--bg-1) }
@media (min-width:1025px){
  .wf-split{ flex-direction:row; gap:0 }
  .wf-split > .wf-scroll{ border-radius:var(--mk-radius-lg) 0 0 var(--mk-radius-lg) }
  .wf-split > .wf-panel{ flex:0 0 340px; border-radius:0 var(--mk-radius-lg) var(--mk-radius-lg) 0; border-inline-start:0 }
}
@media (max-width:1024px){ .wf-panel{ max-height:48vh } }
.wf-psel{ padding:12px 14px; border-bottom:1px solid var(--divider, var(--border)); display:flex; flex-direction:column; gap:8px; background:var(--bg-2) }
.wf-psel-h{ font:700 11px/1 var(--mk-font-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3) }
.wf-panel .wf-insp{ padding:0; border:0; background:none; box-shadow:none }
.wf-psec{ border-bottom:1px solid var(--divider, var(--border)) }
.wf-psec > summary{ list-style:none; display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; user-select:none }
.wf-psec > summary::-webkit-details-marker{ display:none }
.wf-psec > summary > .mi:first-child{ font-size:17px; color:var(--fg-3) }
.wf-psec > summary > b{ flex:1; font:700 12.5px/1.2 var(--mk-font-ui); color:var(--fg-1) }
.wf-psec-tw{ font-size:18px; color:var(--fg-3); transition:transform .15s }
.wf-psec:not([open]) .wf-psec-tw{ transform:rotate(-90deg) }
[dir="rtl"] .wf-psec:not([open]) .wf-psec-tw{ transform:rotate(90deg) }
.wf-psec-b{ padding:0 8px 10px }
.wf-psec-b > .wl-note-row, .wf-psec-b > .wl-sech, .wf-psec-b > .fc-nums, .wf-psec-b > .fc-find, .wf-psec-b > .fc-path, .wf-psec-b > .wl-sumbox{ margin-inline:6px }
.wf-plist{ display:flex; flex-direction:column; gap:2px }
.wf-prow{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; width:100%; min-height:34px; padding:6px 8px; border:0; border-radius:8px; background:none; cursor:pointer; text-align:start; color:var(--fg-1) }
.wf-prow:hover{ background:var(--bg-2) }
.wf-prow.on{ background:var(--accent-soft); color:var(--accent-text) }
.wf-prow.is-sub{ padding-inline-start:28px; min-height:30px }
.wf-prow-d{ width:10px; height:10px; border-radius:50%; flex:0 0 10px }
.wf-prow-d.is-cond{ border-radius:2px; transform:rotate(45deg); width:9px; height:9px; flex-basis:9px }
.wf-prow-t{ flex:1 1 auto; min-width:0; font:600 12.5px/1.25 var(--mk-font-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html[dir="rtl"] .wf-prow-t{ unicode-bidi:plaintext; text-align:right; }   /* B67 R67-038 — a Latin name keeps its own punctuation in Arabic (R67-014) */
.wf-prow-k{ display:inline-flex; align-items:center; gap:3px; font:500 11px/1.2 var(--mk-font-ui); color:var(--fg-3); flex:0 1 auto; min-width:0 }
.wf-prow-k .mi{ font-size:13px }
.wf-prow-g{ flex:1 0 100%; display:inline-flex; align-items:center; gap:4px; font:500 11px/1.3 var(--mk-font-ui); color:var(--fg-2) }
.wf-prow-g .mi{ font-size:13px; color:var(--fg-3) }
.wf-pcond{ display:flex; flex-direction:column; padding-bottom:4px }
.wf-scns{ display:flex; flex-direction:column; gap:6px }
.wf-scn{ display:grid; grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) auto; gap:6px; align-items:center }
.wf-scn-n{ font:800 11px/1 var(--mk-font-ui); color:var(--fg-3); text-align:center }
.wf-scn-add{ align-self:flex-start }
/* a condition reads as a condition: a hexagon, not a pill */
.wf-node.is-cond{ border-radius:0; border:0; background:transparent }
.wf-node.is-cond::before{ content:''; position:absolute; inset:0; z-index:-1; clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background:color-mix(in srgb, var(--wf-tint) 22%, var(--bg-1)) }
.wf-node.is-cond.is-sel::before{ background:color-mix(in srgb, var(--wf-tint) 36%, var(--bg-1)) }
.wf-node.is-cond{ isolation:isolate; padding-inline:16px }
/* smart guides while a step is dragged */
.wf-guides{ position:absolute; inset:0; pointer-events:none; z-index:5 }
.wf-gl{ position:absolute; background:#FF3D7F }
.wf-gl.v{ width:1px } .wf-gl.h{ height:1px }
.wf-host-fc .wf{ min-height:0 }
.wf-node.is-cond, .wf-node.is-cond:hover, .wf-node.is-cond.is-sel{ box-shadow:none; filter:drop-shadow(0 1px 2px rgba(13,37,48,.14)) }
.wf-node.is-cond.is-sel{ filter:drop-shadow(0 0 1.5px var(--accent)) drop-shadow(0 0 1.5px var(--accent)) }
.wf-split > .wf-scroll > .wf-canvas{ min-height:100% }

/* B67 R21 (R67-079) — directional icons follow the reading direction in Arabic, as the rest of the app already does (Audit A:
   "forward points to the reading direction"; .ent-open · .pe-card-chev · .cal-period .gantt-step · .fp-back-btn …). Each was
   the only one of its kind still pointing the LTR way: "go" chevrons, forward/back arrows, prev/next steppers, crumbs, twists. */
html[dir="rtl"] .wf-prow-k .mi,
html[dir="rtl"] .wf-tr-rt .mi,
html[dir="rtl"] .wf-insp-path .mi,
html[dir="rtl"] .wf-insp-hd > .mi{ transform:scaleX(-1); }