/* ==========================================================================
   oxagen.sh: figures, in Oxide
   The drawings scripts/lib/figures.mjs and the site page renderer emit, on
   the roles from oxagen.css. A research post reads them through blog.css,
   and a site page links this file directly.
   ========================================================================== */

/* ---- figures ----
   The drawings a post carries in its body (scripts/lib/figures.mjs). A
   figure is a solid panel. Marks are text tones only: magnitude in one
   tone, the mark the prose is about in the brightest, and a second series
   told apart by stroke rather than hue. Gold and rust stay out, because
   gold is identity, rust is where you are, and data is neither. Every word
   is HTML, so labels stay readable at phone width; the figure is a
   container, and its parts rearrange on its own width rather than the
   viewport's. */
.fig {
  position: relative;
  container-type: inline-size;
  margin: 2em 0;
  padding: calc(var(--ox-space) * 4.5) calc(var(--ox-space) * 5)
    calc(var(--ox-space) * 4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lit),
    var(--panel-shadow);
  font-size: var(--ox-m-micro);
  line-height: 1.45;
}
.fig-title {
  margin-bottom: calc(var(--ox-space) * 3.5);
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--ox-tracking-heading);
}
.fig figcaption {
  margin-top: calc(var(--ox-space) * 4);
  padding-top: calc(var(--ox-space) * 2.5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.fig ol,
.fig ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fig li + li {
  margin-top: 0;
}
.fig-sr {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 4.5);
  margin-bottom: calc(var(--ox-space) * 3);
  color: var(--ink-2);
  font-size: var(--fs-micro);
}
.fig-key-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2);
}
.fig-key {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.fig-key-from {
  border: 2px solid var(--ink-3);
  background: var(--panel);
}
.fig-key-to {
  background: var(--ink);
}
.fig-key-line {
  width: 24px;
  height: 0;
  border-radius: 0;
  border-top: 2px solid var(--ink);
}
.fig-key-line.fig-series-1 {
  border-top: 2px dashed var(--ink-3);
}
.fig-key-line.fig-series-2 {
  border-top: 2px dotted var(--ink-3);
}

/* rows: bars, dumbbells and timelines share one label | track | value grid */
.fig-rows {
  display: grid;
  gap: calc(var(--ox-space) * 3);
}
.fig-row {
  display: grid;
  grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--ox-space) * 3.5);
}
.fig-label {
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: 1.35;
}
.fig-row.is-emph .fig-label {
  color: var(--ink);
}
.fig-value {
  min-width: 4.5em;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-align: right;
  white-space: nowrap;
}
.fig-track {
  position: relative;
  height: 12px;
}
.fig-bars .fig-track {
  background: var(--raised);
  border-radius: var(--ox-radius-xs);
}
.fig-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink-3);
  border-radius: var(--ox-radius-xs);
}
.fig-row.is-emph .fig-fill {
  background: var(--ink);
}
.fig-track-line::before,
.fig-timeline .fig-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}
.fig-span {
  position: absolute;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--ink-3);
}
.fig-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fig-dot-from {
  background: var(--panel);
  border: 2px solid var(--ink-3);
}
.fig-dot-to {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--panel);
}
.fig-axis {
  position: relative;
  height: 18px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.fig-axis > span {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fig-axis > .is-start {
  transform: none;
}
.fig-axis > .is-end {
  transform: translateX(-100%);
}
.fig-row-axis {
  margin-top: calc(var(--ox-space) * -1.5);
}
@container (max-width: 520px) {
  .fig-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: calc(var(--ox-space) * 1.5);
  }
  .fig-row > .fig-label {
    grid-column: 1 / -1;
  }
  .fig-row-axis > .fig-label {
    display: none;
  }
}

/* timeline: validity intervals, a hollow one no longer holds */
.fig-timeline .fig-row {
  grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr);
}
.fig-timeline .fig-track {
  height: 16px;
}
.fig-when {
  display: block;
  margin-top: calc(var(--ox-space) * 0.5);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.fig-interval {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--ink-3);
  border-radius: var(--ox-radius-xs);
}
.fig-interval.is-ended {
  background: var(--panel);
  border: 1.5px solid var(--ink-3);
}
.fig-marker {
  position: absolute;
  top: -8px;
  bottom: -8px;
  border-left: 2px solid var(--ink);
}
.fig-axis > .fig-marker-label {
  color: var(--ink);
}
@container (max-width: 520px) {
  .fig-timeline .fig-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* curve: an SVG stretched to its box, words laid over it in HTML */
.fig-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: calc(var(--ox-space) * 2.5);
}
.fig-yaxis {
  position: relative;
  min-width: 3.2em;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}
.fig-yaxis span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}
.fig-plot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fig-chart > .fig-axis {
  grid-column: 2;
  margin-top: calc(var(--ox-space) * 1.5);
}
.fig-grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.fig-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fig-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-line.fig-series-1 {
  stroke: var(--ink-3);
  stroke-dasharray: 7 5;
}
.fig-line.fig-series-2 {
  stroke: var(--ink-3);
  stroke-dasharray: 1.5 5;
}
.fig-plot .fig-dot {
  top: auto;
  transform: translate(-50%, 50%);
}
.fig-end {
  position: absolute;
  padding: 0 var(--ox-space);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  white-space: nowrap;
  transform: translate(calc(-100% - 6px), calc(100% + 6px));
}
.fig-axis-title {
  margin-top: calc(var(--ox-space) * 1.5);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  text-align: center;
}
@container (max-width: 520px) {
  .fig-plot {
    aspect-ratio: 4 / 3;
  }
}

/* flow: numbered steps, a column when narrow and rows when there is room.
   The figure carries --n (steps), --cols (steps per row) and --last (the
   column the last step sits in); a step carries --i (its index). A figure
   that runs a unit (is-run) also animates --k, the fraction of one pass,
   from 0 to 1 over --n plus one dwells. --p is that pass measured in steps,
   and each token, bar, and the loop reads its own moment from --p against
   its --i. No script: the stylesheet is the whole animation. */
@property --k {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.fig-flow {
  --gap: calc(var(--ox-space) * 5.5);
  --row-gap: calc(var(--ox-space) * 5.5);
  --dwell: 1.5s;
}
.fig-steps {
  display: grid;
  column-gap: var(--gap);
  row-gap: var(--row-gap);
}
.fig-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ox-space);
  padding: calc(var(--ox-space) * 3) calc(var(--ox-space) * 3.5);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.fig-step.is-emph {
  border-color: var(--ink-3);
}
.fig-step-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ox-space) calc(var(--ox-space) * 1.5);
}
.fig-step-n {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
}
.fig-step-label {
  color: var(--ink);
  font-size: var(--ox-m-micro);
  font-weight: 600;
  line-height: 1.3;
}
.fig-step-detail {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.4;
}
/* the arrow into a step: from the step above when stacked */
.fig-step + .fig-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateX(-50%) rotate(45deg);
}
/* the unit: one piece of work, shown at the step it is at */
.fig-token {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: var(--ox-space) calc(var(--ox-space) * 1.75);
  border-radius: var(--ox-radius-sm);
  background: var(--ink);
  color: var(--ground);
  font-size: var(--fs-micro);
  line-height: 1.25;
  opacity: 0;
}
.fig-token-id {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fig-token-mark {
  white-space: nowrap;
}
/* the bar under a step: full once the unit has passed it */
.fig-step-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
}
.fig-step-bar::before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink-2);
}
.fig-loop {
  margin-top: calc(var(--ox-space) * 3);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}
.fig-loop::before {
  content: "\21BA\00A0";
}
/* the run: one pass takes a dwell per step and one more for the return */
.fig-flow.is-run {
  animation: fig-run calc((var(--n) + 1) * var(--dwell)) linear infinite;
}
@keyframes fig-run {
  from {
    --k: 0;
  }
  to {
    --k: 1;
  }
}
.fig-flow.is-run .fig-step,
.fig-flow.is-run .fig-loop {
  --p: calc(var(--k) * (var(--n) + 1));
  /* how far the pass is from this element's own moment, in steps */
  --u: calc(var(--p) - var(--i) - 0.5);
  /* 1 through the middle half of the moment, fading over a quarter each side */
  --on: clamp(0, 1.5 - 2 * max(var(--u), -1 * var(--u)), 1);
}
.fig-flow.is-run .fig-loop {
  --i: var(--n);
  color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--ink-3));
}
.fig-flow.is-run .fig-token {
  opacity: var(--on);
  /* arrives from below and leaves upward */
  transform: translateY(
    calc(-24px * (max(0, var(--u) - 0.25) + min(0, var(--u) + 0.25)))
  );
}
.fig-flow.is-run .fig-step-bar::before {
  width: calc(clamp(0, var(--p) - var(--i), 1) * 100%);
}
@media (prefers-reduced-motion: reduce) {
  .fig-flow.is-run {
    animation: none;
    /* the unit rests on the first step */
    --k: calc(0.5 / (var(--n) + 1));
  }
  .fig-flow.is-run .fig-step-bar {
    display: none;
  }
}
@container (min-width: 600px) {
  .fig-flow {
    --gap: calc(var(--ox-space) * 7);
    --row-gap: calc(var(--ox-space) * 10);
  }
  .fig-flow.is-dense {
    --gap: calc(var(--ox-space) * 4.5);
  }
  .fig-steps {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
  /* the arrow into a step: from the step before it on the row */
  .fig-step + .fig-step::before {
    left: calc(-1 * var(--gap) / 2 - 5px);
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  /* the turn to a new row: a stem down from the row's last step, a rail
     back along the gap, and a stem down into the next row's first step. The
     2px is the step's two borders, which a percentage of the padding box
     leaves out. */
  .fig-step.is-row-end::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--row-gap) / 2);
    height: calc(var(--row-gap) / 2);
    border-left: 1.5px solid var(--rule);
  }
  .fig-step.is-row-start::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--row-gap) / 2);
    width: calc((var(--cols) - 1) * (100% + var(--gap) + 2px));
    height: calc(var(--row-gap) / 2);
    border-top: 1.5px solid var(--rule);
    border-left: 1.5px solid var(--rule);
  }
  .fig-step.is-row-start::before {
    left: 50%;
    top: -11px;
    transform: translateX(-50%) rotate(45deg);
  }
  /* the loop: a rail from under the last step back to under the first */
  .fig-loop {
    --w: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    position: relative;
    height: 24px;
    margin: calc(var(--ox-space) * 2)
      calc(
        var(--w) /
        2 +
        (var(--cols) - 1 - var(--last)) *
        (var(--w) + var(--gap))
      )
      calc(var(--ox-space) * 2.5) calc(var(--w) / 2);
    border: 1.5px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
  }
  .fig-loop::before {
    content: "";
    position: absolute;
    left: -5.5px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-left: 1.5px solid var(--rule);
    border-top: 1.5px solid var(--rule);
    transform: rotate(45deg);
  }
  .fig-flow.is-run .fig-loop,
  .fig-flow.is-run .fig-loop::before {
    border-color: color-mix(
      in srgb,
      var(--ink-2) calc(var(--on) * 100%),
      var(--rule)
    );
  }
  .fig-loop span {
    position: absolute;
    left: 50%;
    bottom: 0;
    padding: 0 calc(var(--ox-space) * 2.5);
    background: var(--panel);
    white-space: nowrap;
    transform: translate(-50%, 50%);
  }
}
/* ladder: rungs that rise, bottoms aligned whatever the labels wrap to */
.fig-ladder {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: calc(var(--ox-space) * 3);
  align-items: start;
}
.fig-rung {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 1.5);
  padding-top: calc((var(--n) - var(--i)) * var(--ox-space) * 6.5);
}
.fig-rung-bar {
  height: calc(var(--i) * 26px);
  background: var(--raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-3);
  border-radius: var(--ox-radius-xs);
}
.fig-rung:last-child .fig-rung-bar {
  border-top-color: var(--ink);
}
.fig-rung-label {
  margin-top: var(--ox-space);
  color: var(--ink);
  font-size: var(--ox-m-micro);
  font-weight: 600;
  line-height: 1.3;
}
.fig-rung-detail {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.4;
}
.fig-ladder-axis {
  display: flex;
  align-items: center;
  gap: calc(var(--ox-space) * 2.5);
  margin-top: calc(var(--ox-space) * 3.5);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fig-ladder-axis::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* schema: class, relation on an arrow, class */
.fig-schema {
  display: grid;
  gap: calc(var(--ox-space) * 3.5);
}
.fig-edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}
.fig-node {
  padding: calc(var(--ox-space) * 2.5) calc(var(--ox-space) * 3);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--ox-m-micro);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.fig-rel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: calc(var(--ox-space) * 1.25);
  padding: 0 calc(var(--ox-space) * 3);
}
.fig-rel-name {
  align-self: end;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.fig-rel-line {
  position: relative;
  justify-self: stretch;
  margin: 0 calc(var(--ox-space) * -3);
  border-top: 1.5px solid var(--ink-3);
}
.fig-rel-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5.5px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
.fig-rel-notes {
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 2.5);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  text-align: center;
}
@container (max-width: 520px) {
  .fig-edge {
    grid-template-columns: minmax(0, 1fr);
  }
  .fig-rel {
    grid-template-rows: auto;
    justify-items: start;
    padding: calc(var(--ox-space) * 2.5) 0 calc(var(--ox-space) * 2.5)
      calc(var(--ox-space) * 6);
  }
  .fig-rel-line {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: 0;
    border-top: 0;
    border-left: 1.5px solid var(--ink-3);
  }
  .fig-rel-line::after {
    left: -5.25px;
    right: auto;
    top: auto;
    bottom: 1px;
    transform: rotate(45deg);
  }
  .fig-rel-notes {
    justify-content: flex-start;
    text-align: left;
  }
}

/* generations: stacks of real (solid) and generated (hollow) data */
.fig-generations .fig-key-to {
  background: var(--ink-3);
  border-radius: var(--ox-radius-xs);
}
.fig-generations .fig-key-from {
  border-width: 1.5px;
  border-radius: var(--ox-radius-xs);
}
.fig-gen-rows {
  display: grid;
  gap: calc(var(--ox-space) * 4.5);
}
.fig-gen-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--ox-space) * 0.5) calc(var(--ox-space) * 3);
  margin-bottom: calc(var(--ox-space) * 2);
}
.fig-gen-label {
  color: var(--ink);
  font-weight: 600;
}
.fig-gen-outcome {
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.fig-gens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: calc(var(--ox-space) * 2.5);
}
.fig-gen {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ox-space) * 1.5);
}
.fig-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--ox-space) * 0.75);
  min-height: calc(var(--max) * 17px);
}
.fig-block {
  height: 14px;
  border-radius: var(--ox-radius-xs);
}
.fig-block-real {
  background: var(--ink-3);
}
.fig-block-synthetic {
  border: 1.5px solid var(--ink-3);
}
.fig-gen-n {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-align: center;
}

/* ---- figures a site page draws (scripts/lib/site-pages.mjs) ----
   A record figure lists one record's fields as label and value rows. A
   states figure lists separate states in order, each reached or pending:
   reached is a solid mark, pending a dashed ring, and each says so in a
   word, so no state rides on a tone. A drawing is a page's own checked SVG
   in currentColor. "Illustrative" in a caption marks made-up values. */
.fig-tag {
  display: inline-block;
  margin-right: calc(var(--ox-space) * 1.5);
  padding: 0 calc(var(--ox-space) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-badge);
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.fig-fields {
  display: grid;
  margin: 0;
}
.fig-field {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: calc(var(--ox-space) * 4);
  padding: calc(var(--ox-space) * 2.5) 0;
  border-top: 1px solid var(--line);
}
.fig-field:first-child {
  border-top: 0;
  padding-top: 0;
}
.fig-field dt {
  color: var(--ink-3);
}
.fig-field dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--ox-space) * 1.5) calc(var(--ox-space) * 3);
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fig-field-state {
  padding: 0 calc(var(--ox-space) * 2);
  border: 1px solid var(--rule);
  border-radius: var(--r-badge);
  color: var(--ink-2);
}
.fig-field.is-open .fig-field-state {
  border-style: dashed;
}
.fig-field.is-blocked .fig-field-state {
  border-color: var(--fail);
  color: var(--fail-ink);
}
@container (max-width: 420px) {
  .fig-field {
    grid-template-columns: 1fr;
    gap: calc(var(--ox-space) * 0.75);
  }
}
.fig-state-list {
  display: grid;
  gap: calc(var(--ox-space) * 3);
}
.fig-state {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--ox-space) * 3);
  align-items: start;
}
.fig-state + .fig-state::before {
  content: "";
  position: absolute;
  top: calc(var(--ox-space) * -3);
  left: calc(var(--ox-space) * 1.5 - 0.5px);
  height: calc(var(--ox-space) * 3.5);
  border-left: 1px solid var(--line);
}
.fig-state-mark {
  box-sizing: border-box;
  width: calc(var(--ox-space) * 3);
  height: calc(var(--ox-space) * 3);
  margin-top: calc(var(--ox-space) * 0.5);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
}
.fig-state.is-reached .fig-state-mark {
  background: var(--ink);
}
.fig-state.is-pending .fig-state-mark {
  border-style: dashed;
  border-color: var(--ink-3);
}
.fig-state-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--ox-space) * 1) calc(var(--ox-space) * 2.5);
}
.fig-state-label {
  color: var(--ink);
}
.fig-state.is-pending .fig-state-label {
  color: var(--ink-3);
}
.fig-state-word {
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: var(--ox-tracking-eyebrow);
  text-transform: uppercase;
}
.fig-state-note {
  flex-basis: 100%;
  color: var(--ink-2);
}
.fig-art svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink-2);
}