/* Rail: a hairline in ink across the card with a tick per version spread along it, the oldest at
   the left and the latest at the right (sheet 1c). A version that went out on a proof is a square
   with its number, hollow on the paper once sent and filled while staged; any other version is a
   dot, filled where we made it and hollow where the customer did. Under each, the version in the
   smallest mono and, under that, what came back, "staged", or "latest". The squares are cut, so
   square; the dots are versions resting on the line, so round. */
.rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  min-height: var(--rail-height);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  line-height: var(--leading-section);
}

/* The line, through the middle of the marks. */
.rail::before {
  content: "";
  position: absolute;
  top: calc(var(--rail-square) / 2);
  left: calc(var(--rail-square) / 2);
  right: calc(var(--rail-square) / 2);
  height: var(--hairline);
  background: var(--color-ink);
}

/* One version is a point, not a line. */
.rail:has(> :only-child)::before {
  content: none;
}

.rail-tick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--rail-square);
  text-align: center;
}

.rail-tick:first-child {
  align-items: flex-start;
  text-align: left;
}

.rail-tick:last-child:not(:first-child) {
  align-items: flex-end;
  text-align: right;
}

.rail-square {
  display: grid;
  place-items: center;
  width: var(--rail-square);
  height: var(--rail-square);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-paper-lattice);
  font-size: var(--rail-number);
  line-height: 1;
}

.rail-square-staged {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* A dot sits in a box the square's size, so every mark is centred on the line. */
.rail-dot {
  width: var(--rail-square);
  height: var(--rail-square);
  background: radial-gradient(
    circle,
    var(--color-ink) calc(var(--rail-dot) / 2),
    transparent calc(var(--rail-dot) / 2 + var(--hairline) / 2)
  );
}

.rail-dot-theirs {
  background: radial-gradient(
    circle,
    var(--color-paper-lattice) calc(var(--rail-dot) / 2 - var(--hairline)),
    var(--color-ink) calc(var(--rail-dot) / 2 - var(--hairline)),
    var(--color-ink) calc(var(--rail-dot) / 2),
    transparent calc(var(--rail-dot) / 2 + var(--hairline) / 2)
  );
}

.rail-words {
  display: flex;
  flex-direction: column;
  color: var(--color-meta);
  white-space: nowrap;
}

.rail-said {
  color: var(--color-ink);
}

.rail-latest .rail-version {
  color: var(--color-ink);
}