/* ─────────────────────────────────────────────────────────
   gantt — paint only. Geometry is the GEO block in gantt.js.

   Parts:

     .gt-band     an alternating calendar column, very faint
     .gt-divider  the hairline at every column boundary
     .gt-tick     the column's label, at its left edge
     .gt-bar      one span
     .gt-overlap  where a span starts before the one above it
                  has finished — the reference's one real idea
     .gt-fade     the soft right edge of a span with no
                  recorded end
     .gt-label    the span's name, under its own left edge

   The reference is seven bars in six colours. Those colours
   are not carrying anything — every bar already has its own
   row and its own label, so the hues are only telling the
   adjacent pair apart, which the stagger has already done.
   Seven hues on a site with two inks and one green would be
   the loudest thing on any page they landed on, so the bars
   are the site's grey and exactly one may be green: the one
   the caption is about. Same rule as `columns`, where the
   fill is the sentence, and `step-area`, where two accents
   would be two arguments.
   ───────────────────────────────────────────────────────── */

.gt-band {
  fill: rgba(0, 0, 0, 0.025);
}

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

.gt-tick {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--ink-50);
}

/* A span. Filled and outlined, the same treatment `.fn-band` and
   `.bar-bar` use, so a measured quantity looks the same everywhere. */
.gt-bar {
  fill: var(--placeholder);
  stroke: currentColor;
  stroke-width: 1;
}

/* The overlap, drawn over the lower bar from its start to the upper bar's
   end. Darker rather than a second hue: what it marks is more of the same
   thing — two spans running at once — not a different kind of thing. */
.gt-overlap {
  fill: var(--ink-25);
  stroke: none;
}

/* No recorded end. The fade sits on top of the bar's right end and carries
   the ground colour, so the bar dissolves instead of stopping. Three stops
   would need a gradient, which needs a url() paint server and an id; two
   flat rects at different alphas do the same job and survive being pasted
   into a page as a fragment. */
.gt-bar--open {
  stroke-dasharray: 2 3;
}
.gt-fade {
  fill: #fff;
  opacity: 0.55;
  stroke: none;
}

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

/* The one span the figure is about. */
.gt-row--on .gt-bar {
  fill: var(--go);
  stroke: var(--sa-go-ink);
}
.gt-row--on .gt-overlap {
  fill: var(--sa-go-ink);
}
.gt-row--on .gt-label {
  font-weight: 600;
  fill: var(--sa-go-ink);
}

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

.gt {
  --ink-50: rgba(0, 0, 0, 0.55);
  --ink-25: rgba(0, 0, 0, 0.25);
  --rule: rgba(0, 0, 0, 0.13);
  --placeholder: rgba(0, 0, 0, 0.07);
  --go: #60a000;
  --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;
}

.gt svg {
  display: block;
  width: 100%;
  height: auto;
  /* Labels are 13 units against a 640-unit viewBox, so below this they drop
     under ~11px and the figure scrolls rather than shrinking. */
  min-width: 34rem;
  overflow: visible;
}

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