/* The workflow blueprint (web/blueprint.js). Restrained cards, directional links, visible conditions, state in
   words beside its colour. Uses the page's tokens with fallbacks, so the public pages and the console agree. */
.bp { --bp-line: var(--line-2, #3a3d42); --bp-card: var(--card, #1b1d20); --bp-text: var(--text, #ededee);
  --bp-dim: var(--text-2, #a6a9ae); --bp-mute: var(--text-3, #71757c); --bp-ok: var(--green, #3ddc97);
  --bp-bad: var(--rose, #ff6b6b); --bp-wait: #e2b44b; --bp-bg: var(--deep, #121314);
  display: block; color: var(--bp-text); font-size: 14px; }
.bp-loading, .bp-error { color: var(--bp-dim); padding: 24px; }
.bp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bp-views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bp-line); border-radius: 10px; }
.bp-views button { border: 0; background: none; color: var(--bp-dim); padding: 7px 12px; border-radius: 8px; cursor: pointer; font: inherit; }
.bp-views button[aria-selected="true"] { background: rgb(127 127 127 / .16); color: var(--bp-text); }
.bp-rev { color: var(--bp-mute); font-size: 12.5px; }
.bp-rev code, .bp-mode code { font-size: 12px; }
.bp-mode { border: 1px solid var(--bp-line); border-left: 4px solid var(--bp-wait); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bp-mode.m-live { border-left-color: var(--bp-bad); }
.bp-mode.m-demo { border-left-color: var(--bp-ok); }
.bp-mode .bad { color: var(--bp-bad); }
.bp-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.bp-canvas { position: relative; height: 560px; overflow: hidden; border: 1px solid var(--bp-line); border-radius: 12px; background: var(--bp-bg); cursor: grab; touch-action: none; }
.bp-canvas:focus-visible { outline: 2px solid var(--bp-ok); outline-offset: 2px; }
.bp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bp-ctrl { position: absolute; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: calc(100% - 20px); z-index: 3; }
.bp-ctrl button, .bp-search { border: 1px solid var(--bp-line); background: var(--bp-card); color: var(--bp-text); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.bp-ctrl button[aria-pressed="true"] { border-color: var(--bp-ok); }
.bp-search { width: 150px; cursor: text; }
.bp-at { position: absolute; }
.bp-card { display: flex; flex-direction: column; gap: 4px; width: 230px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--bp-line); border-radius: 10px; background: var(--bp-card); color: var(--bp-text); cursor: pointer; text-align: left; }
.bp-at .bp-card { width: 100%; }
.bp-card:focus-visible { outline: 2px solid var(--bp-ok); outline-offset: 2px; }
.bp-card.sel { border-color: var(--bp-text); box-shadow: 0 0 0 2px rgb(127 127 127 / .35); }
.bp-card.bp-found { outline: 2px dashed var(--bp-wait); }
.bp-kind { font: 500 10.5px/1.2 var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; color: var(--bp-mute); }
.bp-label { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bp-sub { color: var(--bp-dim); font-size: 12.5px; }
.bp-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.bp-meta i { font-style: normal; font-size: 11px; color: var(--bp-mute); border: 1px solid var(--bp-line); border-radius: 6px; padding: 0 5px; }
.bp-meta i.warn { color: var(--bp-wait); border-color: var(--bp-wait); }
.bp-state { font-size: 12px; font-weight: 600; }
.bp-card.k-trigger { border-top: 3px solid var(--bp-dim); }
.bp-card.k-decision { border-style: dashed; }
.bp-card.k-approval { border-top: 3px solid var(--bp-wait); }
.bp-card.k-outcome { border-radius: 22px; }
.bp-card.k-gap { border: 1px dashed var(--bp-bad); color: var(--bp-dim); }
.bp-card.k-judge, .bp-card.k-action.a-agent { border-left: 3px solid #8a7bd8; }
.bp-card.s-ok { border-color: var(--bp-ok); } .bp-card.s-ok .bp-state { color: var(--bp-ok); }
.bp-card.s-wait { border-color: var(--bp-wait); } .bp-card.s-wait .bp-state { color: var(--bp-wait); }
.bp-card.s-bad { border-color: var(--bp-bad); } .bp-card.s-bad .bp-state { color: var(--bp-bad); }
.bp-card.s-off { opacity: .6; } .bp-card.s-off .bp-state { color: var(--bp-mute); }
.bp-card.s-unknown { border-style: dotted; } .bp-card.s-unknown .bp-state { color: var(--bp-mute); }
.bp-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.bp-edge { fill: none; stroke: var(--bp-dim); stroke-width: 1.6; }
.bp-edge.k-condition { stroke: var(--bp-text); }
.bp-edge.k-order, .bp-edge.k-data { stroke-dasharray: 5 4; }
.bp-edge.k-data { stroke: var(--bp-mute); stroke-width: 1.2; }
.bp-edge.k-forbid { stroke: var(--bp-bad); stroke-dasharray: 6 4; }
.bp-edge.s-ok { stroke: var(--bp-ok); stroke-width: 2.4; } .bp-edge.s-off { opacity: .35; } .bp-edge.s-unknown { stroke-dasharray: 2 3; }
.bp-arrow { fill: var(--bp-dim); } .bp-x { stroke: var(--bp-bad); stroke-width: 2; fill: none; }
.bp-elabel { position: absolute; box-sizing: border-box; font: inherit; font-size: 12px; line-height: 1.25; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--bp-line); background: var(--bp-bg); color: var(--bp-text); white-space: normal; overflow-wrap: anywhere; max-width: 200px; text-align: left; cursor: pointer; }
.bp-measure .bp-elabel { position: static; display: inline-block; width: max-content; max-width: 200px; }
.bp-elabel.k-forbid { color: var(--bp-bad); border-color: var(--bp-bad); }
.bp-elabel.k-flow, .bp-elabel.k-order, .bp-elabel.k-data { color: var(--bp-dim); }
.bp-elabel em { font-style: normal; font-size: 11px; color: var(--bp-mute); }
.bp-elabel.s-ok em { color: var(--bp-ok); }
.bp-group { position: absolute; border: 1px dashed var(--bp-line); border-radius: 14px; background: rgb(127 127 127 / .04); }
.bp-gtitle { position: absolute; left: 12px; top: 8px; font: 500 11px/1.2 var(--mono, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--bp-mute); white-space: nowrap; }
.bp-measure { position: absolute; left: -99999px; top: 0; visibility: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: 4000px; }
.bp-measure .bp-gtitle { position: static; }
.bp-dimmed .bp-world .bp-card:not(.bp-hl), .bp-dimmed .bp-world .bp-elabel:not(.bp-hl) { opacity: .28; }
.bp-dimmed .bp-world .bp-edge:not(.bp-hl) { opacity: .15; }
.bp-hl { outline: 2px solid var(--bp-wait); } path.bp-hl { stroke: var(--bp-wait); stroke-width: 3; outline: 0; }
.bp-detail { border: 1px solid var(--bp-line); border-radius: 12px; padding: 14px 16px; max-height: 560px; overflow-y: auto; position: relative; background: var(--bp-card); }
.bp-detail:empty::before { content: "Select a step, a link or a requirement to see where it comes from."; color: var(--bp-mute); }
.bp-detail h4 { margin: 2px 0 8px; font-size: 16px; }
.bp-detail p { margin: 0 0 8px; } .bp-detail ul { margin: 0 0 10px; padding-left: 18px; }
.bp-detail .label, .bp-reqs .label, .bp-issues .label { font: 500 11px/1.3 var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; color: var(--bp-mute); margin: 12px 0 6px; }
.bp-detail pre { white-space: pre-wrap; font-size: 11.5px; }
.bp-close { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: var(--bp-dim); font-size: 20px; cursor: pointer; }
.bp-deriv { color: var(--bp-dim); font-size: 13px; }
.bp-val { margin-top: 4px; color: var(--bp-ok); }
.bp-dim, .bp-note { color: var(--bp-mute); font-size: 12.5px; }
.bp-ostate.s-ok { color: var(--bp-ok); } .bp-ostate.s-bad { color: var(--bp-bad); } .bp-ostate.s-wait { color: var(--bp-wait); }
.warn { color: var(--bp-wait); }
.bp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; font-size: 12px; color: var(--bp-dim); }
.bp-legend .t::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 2px solid var(--bp-mute); }
.bp-legend .ok::before { border-color: var(--bp-ok); } .bp-legend .wait::before { border-color: var(--bp-wait); } .bp-legend .bad::before { border-color: var(--bp-bad); }
.bp-legend .unknown::before { border-style: dotted; }
.bp-legend .l::before { content: ""; display: inline-block; width: 22px; border-top: 2px dashed var(--bp-dim); margin-right: 5px; vertical-align: 3px; }
.bp-legend .forbid::before { border-top-color: var(--bp-bad); }
.bp-reqs { display: flex; flex-wrap: wrap; gap: 6px; } .bp-reqs .label { flex-basis: 100%; }
.bp-req { border: 1px solid var(--bp-line); background: none; color: var(--bp-dim); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; max-width: 100%; }
.bp-req b { color: var(--bp-text); margin-right: 4px; } .bp-req.on { border-color: var(--bp-wait); color: var(--bp-text); } .bp-req.none { border-style: dashed; }
.bp-issues ul { margin: 0; padding-left: 18px; } .bp-issues li { margin: 4px 0; color: var(--bp-dim); }
.bp-issues li b { color: var(--bp-wait); font-weight: 600; text-transform: capitalize; margin-right: 4px; }
.bp-link { border: 0; background: none; color: var(--bp-text); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.bp-outline { padding-left: 20px; } .bp-outline li { margin: 6px 0; } .bp-outline ul { color: var(--bp-dim); padding-left: 18px; }
.bp-olink { border: 0; background: none; color: var(--bp-text); cursor: pointer; font: inherit; padding: 0; text-align: left; }
.bp.bp-full { position: fixed; inset: 0; z-index: 60; background: var(--bg, #0e0f10); padding: 16px; overflow: auto; }
.bp.bp-full .bp-canvas { height: calc(100vh - 150px); }
@media (max-width: 860px) {
  .bp-stage { grid-template-columns: minmax(0, 1fr); }
  .bp-canvas { height: 460px; }
  .bp-detail { max-height: none; }
  .bp-search { width: 110px; }
}
@media (prefers-reduced-motion: no-preference) { .bp-world { transition: transform .12s ease-out; } }
.bp-page { max-width: 1400px; margin: 0 auto; padding: 28px 24px 64px; }
.bp-page h1 { font-size: 28px; margin: 4px 0 6px; }
.bp-page .bp-canvas { height: 640px; }