/* ─────────────────────────────────────────────────────────
   strata — layers of one thing, ordered by distance from
   the screen, and what happened at each.

   From Garrett's five planes, which is the most reproduced
   diagram in this field. What carried over is the only part
   that argues anything: depth. What did not carry over is
   everything you would recognise it by — the axonometric
   translucent planes, the icons, and the five canonical
   names. A relabelled Garrett is a citation. The point of
   drawing this at all is that on three of these case studies
   the defect sat lower than the work did, which is a finding,
   and it needs your own layers to say so.

   So: flat bands, one axis, no 3D. The 3D was doing nothing
   a vertical order does not already do, and it costs the
   site's whole visual vocabulary to buy it.

   Paint only. Geometry is the GEO block in strata.js, same
   split and same reason as funnel.css and bipartite.css.
   Palette is public/style.css: ink, 55% ink, the hairline,
   the placeholder fill. No colour.
   ───────────────────────────────────────────────────────── */

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

/* A layer that was examined, settled, or is simply not the point. */
.st-band {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* The layer the problem was actually at. Filled with the placeholder, which
   is how every other diagram on the site marks the one thing to point at. */
.st-band--defect {
  fill: var(--placeholder);
  stroke: currentColor;
  stroke-width: 1;
}

/* A layer that was never settled, or never asked about at all. Dashed,
   because the band is drawn around something that is not there. */
.st-band--open {
  fill: none;
  stroke: var(--ink-50);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* The depth axis. Two labels and a hairline: the whole claim of the form is
   that the vertical order means something, so it has to be stated. */
.st-axis {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

/* Ties a band to its annotation across the gutter. */
.st-tie {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.st-t {
  fill: currentColor;
  font-size: 13px;
}
.st-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 currentColor the
   strokes inherit. */

.st {
  --st-ink: #000;
  /* 0.55 not 0.5, matching public/style.css: #737373 on white, 4.74:1,
     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(--st-ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

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

.st 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;
}

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