/* ─────────────────────────────────────────────────────────
   funnel — stage columns, a band whose height is a share,
   and a dashed box wherever nothing was measured.

   Paint only. Unlike node-flow.css this file holds no
   geometry, because a funnel lives in a viewBox rather than
   a fixed pixel canvas: the numbers are user units that
   scale with the column, so they cannot be read back out of
   a computed style in any useful way. Every dimension is in
   the GEO block at the top of funnel.js instead, and there
   is exactly one copy of each there.

   The palette is public/style.css and nothing else: ink,
   55% ink, the hairline, the placeholder fill. No colour.
   The reference this style came from is a saturated
   blue-violet gradient on navy, and that was the one thing
   not worth borrowing — a diagram arguing about measurement
   does not need a second axis of meaning in it.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   This block is what gets copied into public/style.css next
   to the .d-* family when a case study takes one. Class
   names only, no style attributes anywhere in the generated
   markup, because the site's CSP is script-src 'self' with
   no 'unsafe-inline' and blocks inline style attributes as
   well — same constraint that made node-flow an export
   tool rather than a runtime one. */

/* Measured: we know this number, so it is drawn as an area. */
.fn-band {
  fill: var(--fn-fill);
  stroke: currentColor;
  stroke-width: 1;
}

/* Unmeasured: the region every possible shape fits inside.
   Dashed and empty on purpose — a tapered ribbon here would
   be claiming a decline nobody counted. */
.fn-gap {
  fill: none;
  stroke: var(--fn-ink-50);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* Where the denominator changes. Replaces the divider at
   that boundary so the change is not mistaken for one. */
.fn-break {
  stroke: var(--fn-ink-50);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 2 4;
}

.fn-divider,
.fn-rule {
  stroke: var(--fn-rule);
  stroke-width: 1;
  fill: none;
}

/* From the band's lower edge down to the rule. Every column
   gets one, including the tall ones that plainly do not need
   it: a leader that appears only on the small bands would
   read as a mark on those bands rather than as a pointer. */
.fn-leader {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}

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

/* ── The host ──────────────────────────────────────────────
   Only for these workshop pages. On the site .diagram
   already does all of it — the scroll, the min-width floor,
   the currentColor the strokes inherit — so none of this
   travels with the parts above. */

.fn {
  --fn-ink: #000;
  /* 0.55 rather than 0.5, matching public/style.css: composited on white
     that is #737373 at 4.74:1 and clears AA, where 0.5 fails at 3.95:1. */
  --fn-ink-50: rgba(0, 0, 0, 0.55);
  --fn-rule: rgba(0, 0, 0, 0.13);
  --fn-fill: rgba(0, 0, 0, 0.07);

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

  /* Same pair as .nf and for the same reason: a grid item's min-width is
     auto, so without this a diagram wider than its column widens the item,
     then the page, and the page scrolls sideways instead of the figure. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.fn svg {
  display: block;
  width: 100%;
  height: auto;
  /* Labels are 13 user units, so they shrink with the viewBox. 34rem is
     where they pass under ~11px; below it the figure scrolls instead. The
     site's .diagram rule uses the same floor for the same reason. */
  min-width: 34rem;
  overflow: visible;
}

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