/* ─────────────────────────────────────────────────────────
   bars — quantities on one axis, against a reference.

   From three reference charts: Figma's quarterly columns,
   a salary-ratio chart with a parity line at 1.0, and a set
   of 100% stacked diversity bars. Only the middle one has a
   home in this portfolio, and the reason is worth writing
   down: every figure in every case study here is a single
   point in time. There is no monthly anything. So the
   eight-quarter form cannot be drawn without inventing a
   series, and the stacked form needs two comparable
   compositions and there are none.

   What is left is the part that actually argues: a measured
   value, a line saying what it should be compared with, and
   the gap between them.

   Two affordances the portfolio genuinely needs and an
   ordinary bar chart does not have:

     a range, for a figure the source gives as an interval
     ("a quarter to two fifths of that")

     a bar bounded on one side only, for a claim that is a
     bound rather than a measurement ("more than the platform
     had taken in over its entire history" — so: somewhere
     under this line, and nobody said where)

   Both exist for the same reason as funnel's dashed box.
   Drawing a bound as a bar would turn "we know it is less
   than this" into "we measured it".

   Paint only; geometry is the GEO block in bars.js. Palette
   is public/style.css.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   Copied into public/style.css next to .d-*, .fn-*, .bp-*
   and .st-* when a case study takes one. Class names only,
   no style attributes — the site's CSP blocks those. */

/* A measured quantity. */
.bar-bar {
  fill: var(--placeholder);
  stroke: currentColor;
  stroke-width: 1;
}

/* A quantity the source gives as an interval, or a bound with nothing said
   about where inside it the answer sits. Dashed and unfilled: the bar is
   drawn around a region rather than a value. */
.bar-range {
  fill: none;
  stroke: var(--ink-50);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* The thing everything is being compared with. Runs the full height of the
   plot so a bar that overshoots it is obvious. */
.bar-ref {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.bar-axis {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

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

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

.bar {
  --bar-ink: #000;
  /* 0.55 not 0.5, matching public/style.css: #737373 on white at 4.74:1,
     which clears AA. 0.5 is 3.95:1 and fails. */
  --ink-50: rgba(0, 0, 0, 0.55);
  --rule: rgba(0, 0, 0, 0.13);
  --placeholder: rgba(0, 0, 0, 0.07);

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

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

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

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