/* ============================================================================================
   BPMN swimlane styling.

   Colour comes from the guide's own tokens, so a diagram is never the one thing on the page that
   ignores dark mode. Nothing here is decorative: every distinction carries meaning, and anything
   that carried none was removed.
   ============================================================================================ */

.bp-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 6px;
}

.bp-frame > .bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.bp-frame > .bar .n {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-2);
  font-weight: 700;
}
.bp-frame > .bar .t { font-weight: 700; font-size: .93rem; }
.bp-frame > .bar .ar { font-size: .84rem; color: var(--muted); }

/* No bleed out of the content column. An earlier version widened the frames to the left to gain
   270px, and they slid under the sticky table of contents — trading a readable diagram for a
   broken-looking page. The column is the honest maximum; Fit is what makes the whole process
   visible inside it. */

.bp-scroll { overflow-x: auto; padding: 4px 0 2px; }
.bp-scroll.fit { overflow-x: hidden; }
.bp-scroll.fit > .bpmn { width: 100%; height: auto; min-width: 0; }

.bp-fit {
  margin-inline-start: auto;
  font: 600 .76rem var(--sans);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 4px 11px;
  cursor: pointer;
}
.bp-fit:hover { background: var(--bg-2); }
.bp-fit[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); border-color: var(--gold-deep); }
.bp-frame > .bar .ar { margin-inline-start: 10px; }
.bp-scroll::-webkit-scrollbar { height: 9px; }
.bp-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; }

.bpmn { display: block; min-width: 100%; }

.bp-frame > figcaption {
  padding: 12px 16px;
  font-size: .86rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.bp-frame > figcaption b { color: var(--ink-2); font-weight: 650; }

/* ---------------------------------------------------------------- lanes */
.bp-lane { fill: var(--surface); }
.bp-lane.alt { fill: color-mix(in srgb, var(--bg-2) 55%, var(--surface)); }
.bp-lanehead { fill: color-mix(in srgb, var(--navy) 5%, var(--surface)); }
:root[data-theme="dark"] .bp-lanehead { fill: color-mix(in srgb, #fff 4%, var(--surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-lanehead { fill: color-mix(in srgb, #fff 4%, var(--surface)); }
}
.bp-lanesep { stroke: var(--line); stroke-width: 1; }

.bp-laneLbl {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 750;
  fill: var(--ink);
  letter-spacing: .01em;
}
.bp-laneSub {
  font-family: var(--mono);
  font-size: 9.5px;
  fill: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- nodes */
.bp-node { stroke-width: 1.6; }

.bp-task   { fill: var(--surface); stroke: var(--line-2); }
.bp-system { fill: color-mix(in srgb, var(--teal) 9%, var(--surface)); stroke: color-mix(in srgb, var(--teal) 38%, var(--line-2)); }
.bp-data   { fill: color-mix(in srgb, var(--gold) 12%, var(--surface)); stroke: color-mix(in srgb, var(--gold-deep) 45%, var(--line-2)); }
.bp-gate,
.bp-fork   { fill: color-mix(in srgb, var(--gold) 16%, var(--surface)); stroke: var(--gold-deep); }
.bp-start  { fill: color-mix(in srgb, var(--good) 15%, var(--surface)); stroke: var(--good); }
.bp-end    { fill: color-mix(in srgb, var(--navy) 8%, var(--surface)); stroke: var(--ink-2); }
.bp-terminate { fill: color-mix(in srgb, var(--crit) 14%, var(--surface)); stroke: var(--crit); }
.bp-timer  { fill: color-mix(in srgb, var(--info) 13%, var(--surface)); stroke: var(--info); }

.bp-ring  { fill: none; stroke: currentColor; stroke-width: 1.5; }
.bp-end .bp-ring, .bp-terminate + .bp-ring { stroke: var(--ink-2); }
.bp-nodes .bp-ring { stroke: var(--ink-2); fill: none; }
.bp-glyph { stroke: var(--ink-2); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.bp-dot   { fill: var(--teal-2); }

.bp-lbl {
  font-family: var(--sans);
  font-size: 11.6px;
  font-weight: 620;
  fill: var(--ink);
  dominant-baseline: middle;
}
.bp-lbl-out {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  fill: var(--ink-2);
  dominant-baseline: middle;
}
.bp-lbl-note {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--muted);
  dominant-baseline: middle;
}

/* ---------------------------------------------------------------- edges */
.bp-edge {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.bp-edge-no   { stroke: var(--warn); stroke-dasharray: 6 4; }
.bp-edge-back { stroke: var(--warn); stroke-dasharray: 6 4; }
.bp-edge-msg  { stroke: var(--info); stroke-dasharray: 3 4; }

.bp-head      { fill: var(--line-2); stroke: none; }
.arrow-no     { fill: var(--warn); }
.arrow-msg    { fill: var(--info); }

.bp-edgeLbl {
  font-family: var(--mono);
  font-size: 9.6px;
  font-weight: 700;
  fill: var(--muted);
  letter-spacing: .03em;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.bp-edgeLbl.no { fill: var(--warn); }

.bp-missing { padding: 20px; color: var(--crit); font-size: .9rem; }

/* ---------------------------------------------------------------- legend */
.bp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 13px 16px;
  border-top: 1px dashed var(--line-2);
  background: var(--surface-2);
}
.bp-legend .i { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-2); }
.bp-legend .i svg { width: 30px; height: 22px; flex: none; }
.bp-legend .i b { font-weight: 700; }