/* ─────────────────────────────────────────────────────────
   step-area — two shares, side by side, each labelled at its
   own height.

   From a dark referral chart: two blocks on one baseline, a
   thick line along the top of each, the percentage floating
   above on a dotted leader. Inverted to ink on white with
   the rest of this repo.

   What the inversion cost, and what replaced it:

     The reference's fill is a gradient from the accent down
     to the background. On black that reads as the block
     dissolving; on white the same gradient reads as a
     printing error, because a pale wash on white has no
     floor. So the fill here is flat and faint, and the top
     edge carries the weight instead — which is where the
     measurement lives anyway.

     The muted series was white-on-black, the brightest thing
     in the frame. Ink-on-white would make it the brightest
     thing here too, and it is the series you are meant to
     read second. It is grey.

   The edge is 5px against every other line on this site
   being 1px. That is deliberate and it is the reference's
   one real idea: the top edge is the quantity, the fill is
   only a body under it, and at 1px the two read as a box
   with a lid.

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

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

/* The measurement. Round caps and joins so the fall at the right reads as one
   continuous edge rather than as two segments meeting. */
.sa-edge {
  fill: none;
  stroke: var(--sa-line);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A body under the edge, and nothing more. Faint enough that two blocks
   overlapping in the eye still read as two. */
.sa-fill {
  fill: var(--sa-wash);
  stroke: none;
}

/* Where the shape changes. Dotted, and stopping at the baseline. */
.sa-guides path {
  fill: none;
  stroke: var(--sa-line);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
  opacity: 0.55;
}

/* The leader from the number down to the edge it names. Dotted and ending in
   a dot rather than an arrow: "this number belongs to that edge" is a weaker
   claim than "this causes that", and it is the true one. */
.sa-lead {
  fill: none;
  stroke: var(--sa-line);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}
.sa-dot {
  fill: var(--sa-line);
}

/* The shared ground. Both blocks stand on it, which is what makes the two
   heights comparable at a glance. */
.sa-base {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.sa-value {
  fill: var(--sa-line);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sa-caption {
  fill: var(--sa-caption);
  font-size: 13px;
}

/* The two roles. The accent series is the one the caption is about; the muted
   one is there to be compared with. Two accents would be two arguments. */
.sa--accent {
  --sa-line: var(--sa-go);
  --sa-wash: rgba(96, 160, 0, 0.1);
  --sa-caption: var(--sa-go-ink);
}
.sa--muted {
  --sa-line: var(--ink-40);
  --sa-wash: rgba(0, 0, 0, 0.05);
  --sa-caption: var(--ink-50);
}

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

.sa-host {
  /* 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);
  --ink-40: rgba(0, 0, 0, 0.4);
  --rule: rgba(0, 0, 0, 0.13);
  /* --go from public/style.css, for the shape and the big number. */
  --sa-go: #60a000;
  /* The caption under an accent number is a sentence, so it has to clear AA
     as body text and --go does not. Same hue, taken darker. */
  --sa-go-ink: #4a7c00;

  color: #000;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

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

.sa-host svg {
  display: block;
  width: 100%;
  height: auto;
  /* The captions are 13-unit sentences over a half-width block. Below this
     they wrap in the viewBox but shrink under ~11px on screen. */
  min-width: 32rem;
  overflow: visible;
}

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