/* ─────────────────────────────────────────────────────────
   bipartite — two sets of things and the relationships
   between them, drawn as curves that are allowed to cross.

   From the same reference family as funnel: a Sankey, three
   social strata against eight reasons for success. What
   carried over is the layout — two columns, curves with
   horizontal tangents, crossings left in rather than routed
   around. What did not carry over is the encoding. A Sankey
   puts quantity in the thickness of a band, and neither
   diagram drawn in this style has quantities: the case
   studies state which things are related, not how much.

   So these are stroked lines, not ribbons. A constant-width
   ribbon looks like a measured flow and would be claiming a
   number that does not exist. Same rule as the dashed box in
   funnel, applied to a different axis.

   Paint only. Geometry is the GEO block in bipartite.js, for
   the reason written there and in funnel.css: a viewBox's
   units are not readable out of a computed style.

   Palette is public/style.css and nothing else.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   Copied into public/style.css next to .d-* and .fn-* when a
   case study takes one. Class names only, no style
   attributes: the site's CSP is script-src 'self' with no
   'unsafe-inline', which blocks those too. */

.bp-node {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* Something outside the portfolio — a building that is not yours. Dashed
   because the whole point is that the system has no row for it. */
.bp-node--out {
  fill: none;
  stroke: var(--ink-50);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* A relationship that exists. */
.bp-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* A relationship the model has nowhere to put. Same weight, dashed and
   dropped to 55% ink, so the second figure reads as the first figure with
   things taken away rather than as a different drawing. */
.bp-link--held {
  fill: none;
  stroke: var(--ink-50);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* A relationship that is known to exist but whose ends were never written
   down. Finer dash than --held so the two do not read as the same claim:
   one is "the system cannot store this", the other is "I do not know this". */
.bp-link--unknown {
  fill: none;
  stroke: var(--ink-50);
  stroke-width: 1;
  stroke-dasharray: 1 3;
}

/* Where a curve meets a node. One per relationship, fanned down the node's
   inner height, so a node with four of them looks like it has four rather
   than like one line arriving thick. */
.bp-port {
  fill: currentColor;
  stroke: none;
}
.bp-port--dim {
  fill: var(--ink-50);
  stroke: none;
}

.bp-t {
  fill: currentColor;
  font-size: 13px;
}
.bp-t--dim {
  fill: var(--ink-50);
  font-size: 13px;
}

/* ── The host ──────────────────────────────────────────────
   Workshop pages only. On the site .diagram already provides
   the scroll, the min-width floor and the currentColor the
   strokes inherit. */

.bp {
  --bp-ink: #000;
  /* 0.55 not 0.5, matching public/style.css: #737373 composited on white,
     4.74:1, clears AA. 0.5 is 3.95:1 and fails. */
  --ink-50: rgba(0, 0, 0, 0.55);

  color: var(--bp-ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.bp svg {
  display: block;
  width: 100%;
  height: auto;
  /* 13-unit labels shrink with the viewBox; below 34rem they pass under
     ~11px, so the figure scrolls instead. Same floor as .diagram svg. */
  min-width: 34rem;
  overflow: visible;
}

.bp-figure {
  margin: 0;
  min-width: 0;
}
.bp-figure figcaption {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.55);
  max-width: 34rem;
}