/* ============================================================
   /workflows (REQ-114) — loads AFTER industry.css, ledger.css and
   ledger-support.css and only adds what those do not have: the
   hand-off diagram, the state rail and the template card.

   The diagrams are plain HTML lists drawn with CSS — no script, no
   library, no image — so they follow the theme tokens in light and
   dark, wrap on a phone, and read correctly with styles off (an
   ordered list of "kind, who, what, state").

   Design-system rules this sheet has to keep (design/industry-design-system.md):
   - §1.2 never colour alone: an actor kind is a text kicker AND a
     border shape; a status is a word AND a border style.
   - §5.2 dashed + cornerless = placeholder. So "in build" notes are
     dashed and carry no corner marks; the nine cards hold real
     content and are .blueprint frames with all four corners.
   ============================================================ */

.wf-statusline{
  margin:22px 0 0;max-width:68ch;padding:12px 14px;
  border:1px dashed var(--color-accent-700);background:var(--color-accent-100);
  color:var(--color-accent-900);font-size:.95rem;line-height:1.55;
}

/* ---------- actor nodes ---------- */
.wf-flow,.wf-states,.wf-rail,.wf-legend ul{list-style:none;margin:0;padding:0}
.wf-flow{display:flex;flex-wrap:wrap;gap:10px 30px;margin:10px 0 0}
.wf-node{
  position:relative;flex:1 1 150px;min-width:0;max-width:260px;
  display:flex;flex-direction:column;gap:3px;
  padding:9px 11px 10px;border:1px solid var(--color-divider);background:var(--color-bg);
  font-size:.86rem;line-height:1.4;color:var(--color-text);
}
.wf-node strong{font-weight:600}
.wf-kind{
  font-family:var(--font-heading);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
.wf-does{color:color-mix(in srgb,var(--color-text) 84%,transparent)}
/* the arrow between two hand-offs; hidden on the last node */
.wf-flow > .wf-node:not(:last-child)::after{
  content:"\2192";position:absolute;right:-23px;top:50%;transform:translateY(-50%);
  font-family:var(--font-heading);font-size:18px;line-height:1;
  color:color-mix(in srgb,var(--color-text) 60%,transparent);
}
/* kinds: shape first, tint second */
.wf-trigger{border-style:solid;border-width:1px 1px 1px 4px;border-left-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.wf-ticket{background:var(--color-accent-100);border-color:var(--color-accent-700)}
.wf-ticket .wf-kind{color:var(--color-accent-900)}
.wf-agent{border-width:1px}
.wf-person{border-width:2px;border-color:var(--color-text)}
.wf-customer{border-width:1px 1px 3px 1px;border-bottom-color:var(--color-text)}
.wf-state{
  align-self:flex-start;margin-top:4px;padding:1px 7px;
  font-family:var(--font-heading);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--color-divider);color:color-mix(in srgb,var(--color-text) 82%,transparent);
}

/* ---------- the two loops ---------- */
.wf-loops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:26px}
.wf-loop{padding:20px 20px 22px;background:var(--color-bg)}
.wf-loop h3,.wf-bridge h3{font-family:var(--font-heading);font-size:22px;letter-spacing:.02em;text-transform:uppercase;margin:4px 0 8px}
.wf-loop p,.wf-bridge p{font-size:.95rem;max-width:62ch;margin:0 0 12px}
.wf-flow-ring .wf-node{flex-basis:120px}
.wf-bridge{margin-top:30px;padding-top:20px;border-top:1px solid var(--color-divider)}
.wf-build-note{
  margin:16px 0 0;padding:11px 13px;max-width:78ch;
  border:1px dashed var(--color-divider);font-size:.9rem;line-height:1.55;
  color:color-mix(in srgb,var(--color-text) 84%,transparent);
}
.wf-build-note .nx-badge{margin:0 8px 0 0;vertical-align:1px}

/* ---------- state rail ---------- */
.wf-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:0;border-top:2px solid var(--color-text)}
.wf-rail li{
  display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px 0;
  border-bottom:1px solid var(--color-divider);font-size:.88rem;line-height:1.45;
}
.wf-rail strong{font-family:var(--font-heading);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.wf-rail span{color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.wf-states{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 0}
.wf-states li{
  position:relative;padding:1px 8px;border:1px solid var(--color-divider);
  font-family:var(--font-heading);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.wf-states li:not(:last-child)::after{
  content:"\203A";position:absolute;right:-15px;top:50%;transform:translateY(-52%);
  color:color-mix(in srgb,var(--color-text) 55%,transparent);
}

/* ---------- legend ---------- */
.wf-legend{margin:0 0 26px;font-size:.86rem}
.wf-legend-title{display:block;font-family:var(--font-heading);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.wf-legend ul{display:flex;flex-wrap:wrap;gap:8px 22px}
.wf-legend li{display:flex;align-items:center;gap:8px}
.wf-legend .wf-node{display:inline-flex;flex:0 0 auto;padding:3px 8px;max-width:none}

/* ---------- the template card ---------- */
.wf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.wf{padding:22px clamp(16px,2.6vw,28px) 24px;background:var(--color-bg);scroll-margin-top:96px}
.wf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.wf-head h3{flex:1 1 auto;margin:0;font-family:var(--font-heading);font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.wf-n{font-family:var(--font-heading);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);font-variant-numeric:tabular-nums}
.wf-head .nx-badge{margin-left:0}
.wf-now{border-style:solid;border-width:2px;border-color:var(--color-text);color:var(--color-text)}
.wf-summary{margin:8px 0 14px;font-size:1.02rem;max-width:70ch}
.wf h4{
  margin:20px 0 0;font-family:var(--font-heading);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 72%,transparent);
}
.wf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 28px;margin:0;border-top:1px solid var(--color-divider)}
.wf-facts > div{padding:10px 0 11px;border-bottom:1px solid var(--color-divider)}
.wf-facts dt{font-family:var(--font-heading);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 72%,transparent);margin-bottom:3px}
.wf-facts dd{margin:0;font-size:.92rem;line-height:1.5}
.wf-facts-wide{margin-top:20px}
.wf-who{display:block;margin-top:4px;font-weight:600}
.wf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 28px;margin-top:6px}
.wf-col h4{margin-top:18px}
.wf-list{margin:8px 0 0;padding:0 0 0 18px;font-size:.92rem;line-height:1.55}
.wf-list li{margin:0 0 5px}
/* in build = dashed and unframed, the design system's placeholder shape */
.wf-col-build{margin-top:14px;padding:0 14px 10px;border:1px dashed var(--color-accent-700);background:var(--color-accent-100);color:var(--color-accent-900)}
.wf-col-build h4{color:var(--color-accent-900);margin-top:12px}
.wf-related{margin-top:30px;font-size:.95rem}

@media (max-width:640px){
  .wf-flow{flex-direction:column;gap:22px}
  .wf-node{max-width:none;flex-basis:auto}
  .wf-flow > .wf-node:not(:last-child)::after{content:"\2193";right:auto;left:16px;top:auto;bottom:-20px;transform:none}
  .wf-flow-ring{flex-direction:column}
}