/* StageBar: where an order is, as the ladder it climbs. The current rung in ink, the ones behind it
   muted, the ones ahead in the line colour. On staff's six, release is a ring between the first two
   rungs, because it is the moment an order leaves the first room and not a room of its own; the
   customer's four have no ring, because for them release is where agreeing ends. */

/* ---- the full form: a rule per rung with its word under it ---- */
.stage-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--stage-gap);
  /* The bar is its own container, so it can say how it reads at its own width rather than the
     window's: HQ's bar on a phone, or in a narrow column, is the same bar. */
  container-type: inline-size;
}

.stage-bar-six {
  grid-template-columns: 1fr var(--stage-ring-column) repeat(4, 1fr);
}

/* The customer's four rungs, a rule each, and no ring: release is where agreeing ends. */
.stage-bar-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--stage-gap-four);
}


/* Six rungs do not fit six words below about a phone's width: the mono labels broke mid-word
   ("BEFOR E RELEA SE"). There the rules stay and only the current rung keeps its chip, on one line,
   running over the empty columns beside it; the ring keeps its dot and loses its word unless it is
   where the order is. */
@container (max-width: 36rem) {
  .stage-bar-six .stage-rung:not(.stage-current) .stage-rung-word,
  .stage-bar-six .stage-ring:not(.stage-current) .stage-ring-word {
    display: none;
  }

  .stage-bar-six .stage-rung.stage-current {
    overflow-wrap: normal;
  }

  .stage-bar-six .stage-rung.stage-current .chip {
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }
}

.stage-rung {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-4);
  border-top: var(--stage-rule) solid var(--color-line);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-chip);
  line-height: var(--leading-section);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.stage-rung.stage-past {
  border-top-color: var(--color-muted);
}

.stage-rung.stage-current {
  border-top-color: var(--color-ink);
}

/* The current rung's word is round 1's filled chip, at the bar's own size. It may wrap in a narrow
   column rather than push the bar wider than its page. */
.stage-rung .chip {
  font-size: var(--text-mono);
  white-space: normal;
}

/* "since 26 Aug", in the interface face under the chip. */
.stage-since {
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

/* The ring sits centred on the rules' line, with its word under it in the smallest mono. */
.stage-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0 0 var(--space-4);
  color: var(--color-muted);
  text-align: center;
}

.stage-ring-dot {
  box-sizing: border-box;
  width: var(--stage-ring);
  height: var(--stage-ring);
  margin-top: calc((var(--stage-rule) - var(--stage-ring)) / 2);
  border: var(--stage-ring-border) solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
}

.stage-ring-word {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
}

.stage-ring.stage-past .stage-ring-dot {
  border-color: var(--color-muted);
  background: var(--color-muted);
}

.stage-ring.stage-current {
  color: var(--color-ink);
}

.stage-ring.stage-current .stage-ring-dot {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

/* ---- the compact form: the bar alone, in a list row ---- */
.stage-bar-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--stage-compact-gap);
  vertical-align: middle;
}

.stage-segment {
  flex: none;
  width: var(--stage-compact-segment);
  height: var(--stage-compact-height);
  border-radius: calc(var(--stage-compact-height) / 2);
  background: var(--color-line);
}

.stage-segment.stage-past {
  background: var(--color-muted);
}

.stage-segment.stage-current {
  background: var(--color-ink);
}

.stage-dot {
  box-sizing: border-box;
  flex: none;
  width: var(--stage-compact-dot);
  height: var(--stage-compact-dot);
  border: var(--stage-compact-dot-border) solid var(--color-line);
  border-radius: 50%;
}

.stage-dot.stage-past {
  border-color: var(--color-muted);
  background: var(--color-muted);
}

.stage-dot.stage-current {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

/* ---- the legend under a list of compact bars ---- */
.stage-legend {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
}

.stage-legend > li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.stage-legend-bar {
  width: var(--space-2);
  height: var(--stage-compact-height);
  border-radius: calc(var(--stage-compact-height) / 2);
  background: currentColor;
}

.stage-legend-ring {
  box-sizing: border-box;
  width: var(--stage-compact-dot);
  height: var(--stage-compact-dot);
  border: var(--hairline) solid currentColor;
  border-radius: 50%;
}

/* ---- the customer's four, after the rules above so they win at the same specificity ---- */
/* At the snapshot's phone size, 9.5 px, so "ON ITS WAY" sits on one line in a quarter of a phone. */
.stage-bar-four .stage-rung,
.stage-bar-four .stage-rung .chip {
  font-size: var(--text-mono-sm);
  white-space: nowrap;
  overflow-wrap: normal;
}

.stage-bar-four .stage-rung {
  padding-bottom: 0;
}