/* ============================================================
   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;}
.wfv-titlebar{position:relative;display:flex;justify-content:center;margin:2px 0 6px;}
.wfv-titlebtn{display:inline-flex;align-items:center;gap:11px;max-width:100%;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;}
.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 — pinned top-right of the sticky header */
.wfv-zoom{position:absolute;top:10px;right:12px;z-index:42;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 drop the zoom cluster into its own
   centred row instead of overlapping the title in the top-right corner. */
@media(max-width:720px){
  .wfv-zoom{position:static;margin:2px auto 8px;width:max-content;}
}

/* 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:112px;
  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:13px;bottom:9px;z-index:2;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;color:#6F7884;}
/* on the pill/stadium terminal the bottom-left corner curves inward — keep the number at the
   bottom (like the square steps) but indent it to the role chip's left edge so it clears the
   curve and lines up directly under the role */
.wfv-card.wfv-terminal>.wfv-stepno{left:38px;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:17px 20px 0 20px;}
.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 24px 22px 24px;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:38px;padding-right:38px;}
.wfv-card.wfv-terminal .wfv-body{padding-left:42px;padding-right:42px;}

/* 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:48px;padding-right:48px;position:relative;z-index:1;}
.wfv-card.wfv-decision .wfv-body{padding-left:48px;padding-right:48px;position:relative;z-index:1;}
.wfv-card.wfv-decision>.wfv-stepno{left:46px;}
.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);}