/* ============================================================
   Workflow View — module styles (scoped under .wfv)
   Drop-in read-only diagram view for the AXD SOP.
   All selectors are namespaced so nothing leaks into the host app.
   ============================================================ */
.wfv{
  --wfv-ink:#E7E9ED; --wfv-label:#A3A3A3;
  /* 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:#A3A3A3; --wfv-branch:#6E6E6E;
  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:var(--color-surface2);border:1px solid var(--wfv-card-border);border-radius:12px;padding:9px 18px;
  color:#F4F6FA;font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.wfv-titlebtn:hover{border-color:#2A2A2A;}
.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:var(--color-surface);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:#A3A3A3;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wfv-menu li:hover{background:var(--color-control);color:#fff;}
.wfv-menu li[aria-selected="true"]{background:var(--color-control);color:#fff;font-weight:600;}
.wfv-sub{display:none;}

/* ---- Badges follow the AXD-I language, matching the table view -------------------------
   The diagram's role filter, role badges and step-type badges were still on the old pill
   language: 9999px radius, 12px/600. The table view's equivalents are the chip rung (8px)
   at 11px/500 with .05em (roles) / .04em (step types), so these now match.

   Deliberately NOT changed: `padding` and `min-height:28px` stay exactly as they were, so
   the badge box keeps its height and neither the card head row nor the node geometry the
   layout is built around moves — the brief was badges only, everything else identical.
   The terminal nodes keep `border-radius:9999px` + `corner-shape:round`; that stadium is an
   owner-approved departure and is a NODE shape, not a badge. ---- */
.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-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:var(--radius-chip,8px);
  font-weight:500;font-size:11px;line-height:16px;letter-spacing:.05em;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;
  /* ENGAGED is a STEP OF TONE, no line at all (rulebook v1.8). v1.7.1's 1px ink outline lived
     for exactly one version — v1.7.2 retired it as "harsh on a segmented control". These chips
     already carry the state as tone: when any filter is on, the UNPRESSED chips drop to .45
     opacity (the rule below), so the pressed one reads as the lit object. The outline slot is
     left to focus, which §6 keeps at 2px ink / 2px outside. */
  outline:2px solid transparent;outline-offset:2px;}
.wfv-role:hover{opacity:1;}
.wfv-role[aria-pressed="true"]{color:var(--color-ink);}
.wfv-role:focus-visible{outline-color:var(--color-ink);}
.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:var(--color-surface2);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:#2A2A2A;}
/* 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%, #A3A3A3);}
/* 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:#6E6E6E;}
/* 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. */
/* On a stadium the cap radius is half the card height, so the bottom-left corner curves
   away faster the TALLER the card gets — the opposite of a fixed 40px radius. At
   bottom:13 the number leaves the cap once a terminal passes ~225px tall; the tallest in
   the Alphabeta set is 195, so it clears today but a wordier End step would not.
   Lifting it to 22px moves it toward the cap's widest point and pushes that ceiling to
   ~270px, while also lowering the floor for short cards. Terminals only — the square
   steps keep their own inset, which has no cap to clear. */
.wfv-card.wfv-terminal>.wfv-stepno{left:60px;bottom:22px;color:var(--color-faint);}
.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:14px;line-height:1.5;color:var(--wfv-ink);text-align:center;}
/* terminals (start / end): a TRUE stadium — fully rounded caps.
   This is a deliberate, owner-approved departure from AXD-I §Shape ("No pill buttons",
   radius-full reserved for dots). An earlier pass read that rule as binding here and
   softened the stadium to a 40px superellipse squircle; reviewed rendered on 2026-08-06,
   Abdulla called the squircle wrong for this shape and chose the pill knowing it is
   off-book. An octagon was explored first and rejected on sight — the whole exploration
   is in docs/design/axdi-v12-mockups/html/prop-02-octagon-terminals.html so it does not
   get re-proposed. DO NOT "fix" this back to 40px without asking.
   corner-shape:round, not the house superellipse: at radius-full a superellipse is a
   squircle, which is the thing being rejected. The rulebook already carves this out —
   "radius-full dots use corner-shape: round". */
.wfv-card.wfv-terminal{border-radius:9999px;background:var(--wfv-card-bg);}
@supports (corner-shape: round){
  .wfv-card.wfv-terminal{corner-shape:round;}
}
.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%, #A3A3A3);
  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:var(--radius-chip,8px);
  font-weight:500;font-size:11px;line-height:16px;letter-spacing:.05em;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:var(--radius-chip,8px);
  font-size:11px;font-weight:500;line-height:16px;letter-spacing:.04em;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:var(--color-surface2);
  border:1px dashed rgba(82,94,114,.78);color:#D4D4D4;font-size:12px;line-height:1.5;text-align:left;white-space:pre-line;}
.wfv-card .wfv-note .wfv-note-t{display:block;font-weight:700;color:#D4D4D4;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:12px;font-weight:700;letter-spacing:.07em;color:#A3A3A3;
  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:#111111; --wfv-label:#5F5F5F;
  --wfv-canvas:#FAFAFA; --wfv-card-bg:#ffffff; --wfv-card-border:rgba(20,24,30,.18);
  --wfv-spine:#737373; --wfv-branch:#A3A3A3;
}
:root[data-mode="light"] .wfv-titlebtn{background:#fff;color:#111111;}
: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:#1C1C1C;}
:root[data-mode="light"] .wfv-menu li:hover,:root[data-mode="light"] .wfv-menu li[aria-selected="true"]{background:#F5F5F5;color:#000000;}
: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:#111111;}
: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%, #8A8A8A);}
: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%, #8A8A8A);}
:root[data-mode="light"] .wfv-icon{background:rgba(20,24,30,.05);}
:root[data-mode="light"] .wfv-card .wfv-note{background:#f3f5f9;color:#2A2A2A;border-color:rgba(20,24,30,.24);}
:root[data-mode="light"] .wfv-card .wfv-note .wfv-note-t{color:#171717;}
:root[data-mode="light"] .wfv-wlabel{color:#2A2A2A;}
: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;}

/* ==========================================================================
   Phone: the zoom cluster takes the touch target (owner call 2026-08-14)
   ==========================================================================
   §5: "Control height 36px with pointer input; 44px on touch." The zoom controls are
   28px — the smallest interactive things on the screen that most needs precision, since
   this is the view a user pinches and nudges. They already wrap onto their own centred
   row below 720 (see above), so there is width to spend: only the height and hit box
   change, and the cluster's own padding grows with them. The 18px glyph and 12px labels
   are unchanged — this is hit area, not type. */
@media(max-width:720px){
  .wfv-zoom{padding:4px;gap:4px}
  .wfv-zbtn{width:44px;height:44px;border-radius:10px}
  .wfv-zlabel{min-width:56px;height:44px}
  .wfv-zfit{height:44px;padding:0 16px;border-radius:10px}
}

/* Phone: the diagram header stops bleeding past its container (owner call 2026-08-14).
   .wfv-header runs margin:0 -8px so its sticky background reaches the edges — deliberate,
   and harmless on desktop where there is room either side. At 375 it makes the header 355
   inside a 339 container, which gives the diagram pane an 8px horizontal scroll range: the
   page does not overflow, but the view can be nudged sideways under a thumb for no reason.
   The bleed is dropped rather than clipped, because overflow:clip on the ancestor is what
   the sticky header depends on NOT having. */
@media(max-width:720px){
  .wfv-header{margin:0;padding-left:0;padding-right:0}
}