/* ============================================================
   Workflow View — module styles (scoped under .wfv)
   Drop-in read-only diagram view for the SOP Builder.
   All selectors are namespaced so nothing leaks into the host app.
   ============================================================ */
.wfv{
  --wfv-ink:#E7E9ED; --wfv-label:#9CA3AF;
  /* the canvas + step FILL follow the app's theme tokens, so the diagram matches whatever dark
     theme/preset is active (default · graphite · navy · forest · plum). Only the FILL tracks the
     theme — the role outline, role chip, step-type pill and icons keep their own colours. Light
     mode overrides these below; PDF/print forces pure white (see app.css). */
  --wfv-canvas:var(--bg,#121212); --wfv-card-bg:var(--paper2,#1A1A1A); --wfv-card-border:var(--line,rgba(55,65,81,.72));
  --wfv-spine:#AEB5C1; --wfv-branch:#565E6B;
  font-family:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--wfv-ink); -webkit-font-smoothing:antialiased; position:relative;
}
.wfv *{box-sizing:border-box;}

/* sticky header: title-dropdown + role filter (stays put on long workflows) */
.wfv-header{position:sticky;top:0;z-index:40;margin:0 -8px;padding:10px 8px 8px;
  background:var(--wfv-canvas,#121212);
  border-radius:0 0 14px 14px;}
/* title row: [spacer] [title] [zoom slot]. The spacer and the zoom slot are flex twins
   (both flex:1 1 0), so they stay equal and the title sits optically centred on the header —
   until a long title needs the room, at which point it takes it and ellipses. The zoom lives
   IN the flow, so the title can never run underneath it. */
.wfv-titlebar{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 6px;}
.wfv-titlebar::before{content:"";flex:1 1 0;}
.wfv-titlebtn{display:inline-flex;align-items:center;gap:11px;max-width:100%;flex:0 1 auto;min-width:0;cursor:pointer;font-family:inherit;
  background:#1A1E27;border:1px solid var(--wfv-card-border);border-radius:12px;padding:9px 18px;
  color:#F4F6FA;font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.wfv-titlebtn:hover{border-color:#3a4150;}
.wfv-titlebtn.wfv-single{cursor:default;background:transparent;border-color:transparent;padding:9px 4px;}
.wfv-titletext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.wfv-chev{font-size:13px;color:var(--wfv-label);flex:none;transition:transform .15s;}
.wfv-titlebtn[aria-expanded="true"] .wfv-chev{transform:rotate(180deg);}
.wfv-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:50;margin:0;list-style:none;
  background:#161A22;border:1px solid var(--wfv-card-border);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.6);
  padding:6px;min-width:300px;max-width:min(560px,90vw);max-height:50vh;overflow:auto;}
.wfv-menu li{padding:9px 13px;border-radius:8px;font-size:14px;color:#C9D1DC;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wfv-menu li:hover{background:#1d2433;color:#fff;}
.wfv-menu li[aria-selected="true"]{background:#1d2433;color:#fff;font-weight:600;}
.wfv-sub{display:none;}

.wfv-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:0 auto;padding:10px 14px;max-width:960px;
  background:rgba(255,255,255,.02);border:1px solid var(--wfv-card-border);border-radius:12px;}
.wfv-filter .wfv-flabel{font-size:12px;color:var(--wfv-label);margin-right:4px;font-weight:500;}
.wfv-role{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;min-height:28px;border-radius:9999px;
  font-weight:600;font-size:12px;line-height:16px;white-space:nowrap;color:#F4F6FA;cursor:pointer;user-select:none;
  background:var(--wfv-r);
  border:1px solid rgba(255,255,255,.16);transition:opacity .12s,outline-color .12s;
  outline:2px solid transparent;outline-offset:1px;}
.wfv-role:hover{opacity:.92;}
.wfv-role[aria-pressed="true"]{outline-color:rgba(255,255,255,.82);}
.wfv-filter.wfv-active .wfv-role:not([aria-pressed="true"]){opacity:.45;}
.wfv-clear{font-size:12px;font-weight:600;color:var(--wfv-ink);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:8px;cursor:pointer;text-decoration:none;padding:5px 12px;min-height:28px;}
.wfv-clear:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.30);}

/* zoom controls — right-hand slot of the title row */
.wfv-zoomslot{flex:1 1 0;display:flex;justify-content:flex-end;}
.wfv-zoom{flex:0 0 auto;display:flex;align-items:center;gap:2px;
  background:#1A1E27;border:1px solid var(--wfv-card-border);border-radius:10px;padding:3px;}
.wfv-zbtn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:var(--wfv-ink);background:transparent;border:0;border-radius:7px;cursor:pointer;font-family:inherit;}
.wfv-zbtn:hover:not(:disabled){background:rgba(255,255,255,.08);}
.wfv-zbtn:disabled{opacity:.35;cursor:default;}
.wfv-zlabel{min-width:46px;height:28px;font-size:12px;font-weight:600;color:var(--wfv-label);background:transparent;border:0;cursor:pointer;font-family:inherit;}
.wfv-zlabel:hover{color:var(--wfv-ink);}
.wfv-zfit{height:28px;padding:0 11px;margin-left:2px;font-size:12px;font-weight:600;color:var(--wfv-ink);
  background:rgba(255,255,255,.04);border:1px solid var(--wfv-card-border);border-radius:7px;cursor:pointer;font-family:inherit;}
.wfv-zfit:hover{background:rgba(255,255,255,.08);border-color:#3a4150;}
/* phones: the centred title fills the width, so wrap the zoom cluster onto its own
   centred row underneath the title instead of squeezing it alongside. */
@media(max-width:720px){
  .wfv-titlebar{flex-wrap:wrap;}
  .wfv-titlebar::before{display:none;}
  .wfv-zoomslot{flex:0 0 100%;justify-content:center;margin:4px 0 2px;}
}

/* scalable stage */
.wfv-sizer{position:relative;}
.wfv-viewport{position:relative;width:100%;}
.wfv-stage{position:relative;transform-origin:top left;will-change:transform;}
.wfv-stage svg.wfv-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* card */
.wfv-card{position:absolute;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:120px;
  background:var(--wfv-card-bg);border:2.5px solid var(--wfv-card-border);border-radius:14px;overflow:hidden;
  transition:opacity .12s,filter .12s;}
/* box outline carries the ROLE colour (the assigned role's legend colour). Brightened toward
   light on the dark canvas so it reads; light mode deepens it instead (see below). */
.wfv-card{border-color:color-mix(in srgb, var(--wfv-r, var(--wfv-card-border)) 74%, #aeb5c1);}
/* the role now reads from the whole outline, so the old left rail is redundant */
.wfv-card .wfv-rail{display:none;}
/* step number — small, muted, in the bottom-left corner so each box stays referenceable (1, 2, 11.a)
   without pushing the role/type/icon head down; absolute so it stays out of the card's flex flow. */
.wfv-card>.wfv-stepno{position:absolute;left:var(--wfv-pad,60px);bottom:13px;z-index:2;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;color:#6F7884;}
/* keep the step number bottom-left (consistent with the square steps), but inset it past the pill's
   rounded cap so it clears the curve. The terminal card is widened in the engine to give the cap,
   role chip and icons their own breathing room. */
.wfv-card.wfv-terminal>.wfv-stepno{left:60px;color:#838b97;}
.wfv-card.wfv-dim{opacity:.26;filter:grayscale(.7);}
/* header: role left · step-type centre · icons right */
/* align-items:start keeps the role chip + step-type pill at the TOP (level with the first icon
   row) even when the icons wrap to a second row — only the icons drop, not the role/type. */
.wfv-card .wfv-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:10px;padding:22px var(--wfv-pad,60px) 0 var(--wfv-pad,60px);}
.wfv-card .wfv-head>.wfv-role-chip{justify-self:start;}
.wfv-card .wfv-head>.wfv-step{justify-self:center;}
.wfv-card .wfv-head>.wfv-icons{justify-self:end;}
/* icons stack two-per-row, right-aligned, growing DOWNWARD — capped width so they never widen
   the right column and push the centred step-type/role out of place (3 icons → 2 + 1 below). */
.wfv-card .wfv-icons{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;row-gap:6px;max-width:80px;flex:none;}
.wfv-card .wfv-body{padding:12px var(--wfv-pad,60px) 28px var(--wfv-pad,60px);font-size:13.5px;line-height:1.5;color:var(--wfv-ink);text-align:center;}
/* terminals (start / end): soft "pill" / stadium silhouette — rounded short ends, flat
   top/bottom (so vertical connectors still land cleanly). Extra side padding keeps the
   role chip + icons clear of the curved ends. */
.wfv-card.wfv-terminal{border-radius:999px;background:var(--wfv-card-bg);}
.wfv-card.wfv-terminal .wfv-head{padding-left:60px;padding-right:60px;}
.wfv-card.wfv-terminal .wfv-body{padding-left:60px;padding-right:60px;}

/* decision: same rectangular footprint, but the outline is a soft rounded-tip hexagon
   drawn as an SVG behind the content (see decisionHexPath in the JS). The card's own
   rect border + fill are dropped; the hexagon carries the role-coloured outline + fill. */
.wfv-card.wfv-decision{background:transparent;border-color:transparent;overflow:visible;}
.wfv-card.wfv-decision .wfv-body{font-weight:500;}
/* keep head + body inside the hexagon's narrower top/bottom band */
.wfv-card.wfv-decision .wfv-head{padding-left:60px;padding-right:60px;position:relative;z-index:1;}
.wfv-card.wfv-decision .wfv-body{padding-left:60px;padding-right:60px;position:relative;z-index:1;}
.wfv-card.wfv-decision>.wfv-stepno{left:60px;}
.wfv-card.wfv-decision .wfv-hexbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;}
.wfv-card.wfv-decision .wfv-hexbg path{
  fill:var(--wfv-card-bg);
  stroke:color-mix(in srgb, var(--wfv-r) 74%, #aeb5c1);
  stroke-width:2.5;}

/* role chip */
.wfv-role-chip{display:inline-flex;align-items:center;justify-content:center;padding:5px 11px;min-height:28px;border-radius:9999px;
  font-weight:600;font-size:12px;line-height:16px;white-space:nowrap;color:#F4F6FA;
  background:var(--wfv-r);
  border:1px solid rgba(255,255,255,.16);}
/* step-type chip (step-type colour distinction) */
.wfv-step{display:inline-flex;align-items:center;min-height:28px;padding:5px 11px;border-radius:9999px;
  font-size:12px;font-weight:600;line-height:16px;border:1px solid rgba(255,255,255,.14);white-space:nowrap;}
.wfv-step.start{background:rgba(47,74,67,.46);color:#D9EFE5;border-color:rgba(123,170,150,.55);}
.wfv-step.process{background:rgba(24,37,64,.50);color:#DCE5F5;border-color:rgba(91,113,152,.58);}
.wfv-step.decision{background:rgba(89,75,42,.52);color:#F1E4BE;border-color:rgba(197,179,88,.62);}
.wfv-step.end{background:rgba(90,56,56,.48);color:#F2CACA;border-color:rgba(190,116,110,.55);}
.wfv-step.document{background:rgba(64,57,85,.48);color:#E5DFF5;border-color:rgba(160,146,190,.55);}
/* icon chip */
.wfv-icon{display:inline-flex;width:36px;height:36px;min-width:36px;align-items:center;justify-content:center;border-radius:8px;
  color:var(--wfv-p);background:rgba(255,255,255,.06);border:1px solid color-mix(in srgb,var(--wfv-p) 62%,transparent);}
.wfv-icon svg{width:22px;height:22px;display:block;}
/* in-card note */
.wfv-card .wfv-note{margin:4px 22px 12px 22px;padding:10px 13px;border-radius:8px;background:#15181F;
  border:1px dashed rgba(82,94,114,.78);color:#C4CAD4;font-size:11.5px;line-height:1.5;text-align:left;white-space:pre-line;}
.wfv-card .wfv-note .wfv-note-t{display:block;font-weight:700;color:#D7DBE2;margin-bottom:3px;}
/* the last note must clear the bottom-left step-number badge (absolute, bottom:9px) so they never touch */
.wfv-card .wfv-note:last-child{margin-bottom:28px;}
/* wire label */
.wfv-wlabel{position:absolute;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.07em;color:#C9D1DC;
  background:var(--wfv-canvas);padding:1px 6px;border-radius:4px;transform:translate(-50%,-50%);}

/* ============================================================
   Light mode — follow the app's :root[data-mode="light"] theme.
   Re-points the --wfv-* vars (canvas/cards/edges) and fixes the
   hardcoded dark chrome; role chips keep their coloured fills.
   ============================================================ */
:root[data-mode="light"] .wfv{
  --wfv-ink:#1b1f27; --wfv-label:#5c636e;
  --wfv-canvas:#f4f6fb; --wfv-card-bg:#ffffff; --wfv-card-border:rgba(20,24,30,.18);
  --wfv-spine:#737b88; --wfv-branch:#aab0ba;
}
:root[data-mode="light"] .wfv-titlebtn{background:#fff;color:#1b1f27;}
:root[data-mode="light"] .wfv-titlebtn:hover{border-color:rgba(20,24,30,.34);}
:root[data-mode="light"] .wfv-menu{background:#fff;box-shadow:0 16px 44px rgba(20,24,30,.18);}
:root[data-mode="light"] .wfv-menu li{color:#2b313a;}
:root[data-mode="light"] .wfv-menu li:hover,:root[data-mode="light"] .wfv-menu li[aria-selected="true"]{background:#eef1f6;color:#11141a;}
:root[data-mode="light"] .wfv-filter{background:rgba(20,24,30,.03);}
:root[data-mode="light"] .wfv-clear{background:rgba(20,24,30,.04);border-color:rgba(20,24,30,.18);color:#1b1f27;}
:root[data-mode="light"] .wfv-clear:hover{background:rgba(20,24,30,.08);border-color:rgba(20,24,30,.30);}
:root[data-mode="light"] .wfv-zoom{background:#fff;}
:root[data-mode="light"] .wfv-zbtn:hover:not(:disabled),:root[data-mode="light"] .wfv-zfit:hover{background:rgba(20,24,30,.06);}
:root[data-mode="light"] .wfv-zfit{background:rgba(20,24,30,.04);}
:root[data-mode="light"] .wfv-zfit:hover{border-color:rgba(20,24,30,.34);}
:root[data-mode="light"] .wfv-card.wfv-terminal{background:#fff;}
/* role outline on white: keep close to the (already dark) role colour instead of
   brightening toward grey, so the role still reads distinctly in light mode */
:root[data-mode="light"] .wfv-card{border-color:color-mix(in srgb, var(--wfv-r, var(--wfv-card-border)) 82%, #8b93a1);}
:root[data-mode="light"] .wfv-card.wfv-decision{border-color:transparent;}
:root[data-mode="light"] .wfv-card.wfv-decision .wfv-hexbg path{stroke:color-mix(in srgb, var(--wfv-r) 82%, #8b93a1);}
:root[data-mode="light"] .wfv-icon{background:rgba(20,24,30,.05);}
:root[data-mode="light"] .wfv-card .wfv-note{background:#f3f5f9;color:#3a4150;border-color:rgba(20,24,30,.24);}
:root[data-mode="light"] .wfv-card .wfv-note .wfv-note-t{color:#22262e;}
:root[data-mode="light"] .wfv-wlabel{color:#3a4150;}
:root[data-mode="light"] .wfv-step.start{background:rgba(70,185,138,.16);color:#1f7a55;border-color:rgba(70,185,138,.5);}
:root[data-mode="light"] .wfv-step.process{background:rgba(94,139,208,.16);color:#2f5aa8;border-color:rgba(94,139,208,.5);}
:root[data-mode="light"] .wfv-step.decision{background:rgba(192,136,58,.18);color:#8a5a16;border-color:rgba(192,136,58,.5);}
:root[data-mode="light"] .wfv-step.end{background:rgba(204,107,107,.16);color:#b3403f;border-color:rgba(204,107,107,.5);}
:root[data-mode="light"] .wfv-step.document{background:rgba(124,111,164,.16);color:#5b4f8a;border-color:rgba(124,111,164,.5);}

/* =====================================================================
   AXI PASS — diagram breathing room. Same layout, same shapes; only
   the air around content changes. The engine measures rendered card
   heights (offsetHeight) before positioning, so these flow safely.
   - cards a touch taller, head/body padding +2–4px
   - step number (bottom-left) gets equal clearance from body text,
     note boxes and the card edge (was 4px from a trailing note)
   ===================================================================== */
.wfv-card{min-height:126px;}
.wfv-card .wfv-head{padding-top:24px;}
.wfv-card .wfv-body{padding-top:14px;padding-bottom:34px;}
.wfv-card>.wfv-stepno{bottom:14px;}
.wfv-card .wfv-note{margin-top:8px;}
.wfv-card .wfv-note:last-child{margin-bottom:36px;}