/* ProgressLine: where an order stands (the 12 Oct order overview handoff, "Stages, runs and the
   line"; docs/decisions.md, 12 Oct 2026, "Where an order stands, built"). Round marks on a rounded
   line: done filled with a tick, the current mark larger with a soft ring and its column on a light
   grey panel, later hollow grey, not recorded dashed with a question mark, forced hatched, held a
   pause, followed from Asana hollow with the ring, settling draining. The A sits on the mark where
   the card is. Stage names in the interface face, dates in grey under them, the checks hanging under
   each stage. Seven columns from 52rem; one, with the line down the left, under it. Grid alone:
   nothing is measured, and nothing scrolls sideways. */

.progress-line {
  --line-mark-box: var(--line-node-current);
}

.line-stages {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One stage: its track (the mark between two half-segments of the line), its name, its date, its
   checks. The live one stands on the panel. */
.line-stage,
.line-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--space-3) var(--space-1) var(--space-3);
  border-radius: var(--radius-card);
  text-align: center;
}

.line-stage.line-live,
.line-step.line-live {
  background: var(--color-line-panel);
}

.line-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: calc(var(--line-node-current) + 2 * var(--line-ring) + var(--space-1));
}

/* The two halves of the line on either side of the mark, ink where the order has reached. */
.line-track::before,
.line-track::after {
  content: "";
  position: absolute;
  top: 50%;
  height: var(--line-weight);
  margin-top: calc(var(--line-weight) / -2);
  border-radius: calc(var(--line-weight) / 2);
  background: var(--color-line);
}

.line-track::before {
  left: calc(-1 * var(--space-1));
  right: 50%;
}

.line-track::after {
  left: 50%;
  right: calc(-1 * var(--space-1));
}

.line-stage:first-child .line-track::before,
.line-stage:last-child .line-track::after,
.line-step:first-child .line-track::before,
.line-step:last-child .line-track::after {
  visibility: hidden;
}

.line-reached > .line-track::before,
.line-onward > .line-track::after {
  background: var(--color-ink);
}

.line-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
}

.line-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--line-node);
  height: var(--line-node);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  line-height: 1;
}

.line-node-done {
  background: var(--color-ink);
  color: var(--color-shell);
}

.line-node-current,
.line-node-held,
.line-node-following,
.line-node-settling {
  width: var(--line-node-current);
  height: var(--line-node-current);
  box-shadow: 0 0 0 var(--line-ring) var(--color-rule);
}

.line-node-current,
.line-node-held {
  background: var(--color-ink);
  color: var(--color-shell);
}

.line-node-following {
  border: 2px solid var(--color-ink);
  background: var(--color-shell);
}

/* Settling: the fill drains out of the hollow mark (the Sources frame's "draining fill"). */
.line-node-settling {
  border: 2px solid var(--color-ink);
  background: linear-gradient(90deg, var(--color-line-hatch) 0 35%, var(--color-shell) 35%);
}

.line-node-later {
  border: 2px solid var(--color-line-later);
  background: var(--color-shell);
}

.line-node-not-recorded {
  border: 2px dashed var(--color-line-hatch);
  background: var(--color-shell);
  color: var(--color-muted);
}

.line-node-forced {
  border: 2px solid var(--color-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 3px,
    var(--color-line-hatch) 3px 5px
  );
}

/* The A: where the Asana card is, a small outlined square at the mark's shoulder. */
.line-asana {
  position: absolute;
  top: -9px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-drawn);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-strong);
  line-height: 1;
}

.line-name {
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-control-small);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

button.line-name {
  cursor: pointer;
}

/* **Pressed whole** (13 Oct correction): a stage or step that may be pressed is pressed anywhere on
   its column. The name is still the one button; its press is stretched over the column by a layer
   above the mark, and the checks sit above that layer so a pointer over one still says who passed
   it. The hover says it can: the column on the quiet panel, a ring round the mark, the name
   underlined. */
.line-pressable {
  position: relative;
  cursor: pointer;
}

.line-pressable > button.line-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-card);
}

.line-pressable > .line-checks,
.line-pressable > .line-step-notes {
  position: relative;
  z-index: 3;
}

.line-pressable:hover {
  background: var(--color-line-panel-quiet);
  box-shadow: inset 0 0 0 var(--hairline) var(--color-line);
}

.line-pressable:hover .line-node {
  box-shadow: 0 0 0 var(--line-ring) var(--color-rule);
}

.line-step.line-pressable:hover .line-node {
  box-shadow: 0 0 0 var(--line-ring-step) var(--color-rule);
}

.line-pressable:hover > button.line-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* **Held back, and saying why** (Reed's second look, 13 Oct 2026): once released, a stage's name is a
   button marked unavailable; a pointer over it gives the words, a press puts them under it. */
button.line-name-held {
  cursor: help;
}

.line-held {
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-quiet);
  overflow-wrap: anywhere;
}

button.line-name:focus-visible {
  outline: none;
}

button.line-name:focus-visible::after {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

/* A held-back name presses only itself, so its focus is on itself. */
button.line-name-held:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* **What the tray would move**, until Record: the stretch of line it covers hatched and faded, the
   mark it goes to ringed in dashes. Either way along the line, and down it when narrow. */
.line-staged-before > .line-track::before,
.line-staged-after > .line-track::after {
  background: repeating-linear-gradient(
    135deg,
    var(--color-ink) 0 3px,
    transparent 3px 6px
  );
  opacity: 0.5;
}

.line-staged-to .line-node {
  outline: 2px dashed var(--color-line-hatch);
  outline-offset: 3px;
}

.line-live > .line-name {
  font-weight: var(--weight-strong);
}

.line-node-is-later > .line-name,
.line-node-is-not-recorded > .line-name {
  color: var(--color-muted);
}

.line-detail {
  min-height: 1.4em;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* The checks hanging under a stage: a tick, a ring, a hatched or dashed square, the A, a ≠. */
.line-checks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-meta);
}

.line-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
}

.line-check-open,
.line-check-not-recorded {
  color: var(--color-muted);
}

.line-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-weight: var(--weight-strong);
}

.line-check-open .line-check-mark {
  color: var(--color-line-hatch);
  font-weight: var(--weight-regular);
}

.line-check-not-recorded .line-check-mark,
.line-check-forced .line-check-mark {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
}

.line-check-not-recorded .line-check-mark {
  border: 1px dashed var(--color-line-hatch);
}

.line-check-forced .line-check-mark {
  border: 1px solid var(--color-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 2px,
    var(--color-line-hatch) 2px 4px
  );
}

.line-check-asana .line-check-mark {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-drawn);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
}

/* ---- the runs, under In Production ---- */

/* A row of their own across In Production, Ready and Complete, joined to In Production's mark by a
   short line: the li is placed explicitly, so the stages after it flow on along the first row. */
.line-runs {
  position: relative;
  grid-row: 2;
  grid-column: 5 / span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.line-runs::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% / 6 - 1px);
  width: 2px;
  height: var(--space-4);
  background: var(--color-ink);
}

.line-run {
  padding: var(--space-3) var(--space-1) var(--space-2);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-line-panel-quiet);
}

.line-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: 0 var(--space-3);
}

.line-run-kind {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.line-run-what {
  font-size: var(--text-quiet);
}

.line-run-note {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.line-steps {
  display: flex;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.line-step {
  flex: 1 1 0;
  padding: var(--space-2) 0;
}

.line-step .line-track {
  height: calc(var(--line-node-step-current) + 2 * var(--line-ring-step) + var(--space-1));
}

.line-step .line-track::before,
.line-step .line-track::after {
  height: var(--line-weight-step);
  margin-top: calc(var(--line-weight-step) / -2);
}

.line-step .line-node {
  width: var(--line-node-step);
  height: var(--line-node-step);
  font-size: var(--text-mono-chip);
}

.line-step .line-node-current,
.line-step .line-node-held,
.line-step .line-node-following,
.line-step .line-node-settling {
  width: var(--line-node-step-current);
  height: var(--line-node-step-current);
  box-shadow: 0 0 0 var(--line-ring-step) var(--color-rule);
}

.line-step .line-asana {
  top: -8px;
  right: -13px;
}

.line-step .line-name {
  margin-top: var(--space-1);
  font-size: var(--text-meta);
}

.line-step .line-detail {
  font-size: var(--text-mono-lg);
}

/* ---- what was recorded at a step, and what it asks (Production) ---- */

.line-step-notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-2);
  list-style: none;
}

.line-step-note {
  font-size: var(--text-meta);
  color: var(--color-muted);
  text-align: center;
}

.line-step-note-strong {
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}

/* ---- what the customer reads, a band under the steps ---- */

.line-reads {
  margin-top: var(--space-4);
}

.line-reads-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.line-reads-band {
  display: grid;
  grid-template-columns: repeat(var(--line-reads-steps), minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-read {
  grid-column: span var(--line-read-span);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border: var(--hairline) solid transparent;
  font-size: var(--text-quiet);
  font-style: italic;
}

.line-read-before {
  background: var(--color-line-panel);
  color: var(--color-ink);
}

.line-read-now {
  background: var(--color-ink);
  color: var(--color-shell);
}

.line-read-ahead {
  border: var(--hairline) dashed var(--color-line-hatch);
  color: var(--color-muted);
}

.line-read-note {
  font-style: normal;
  font-size: var(--text-meta);
  opacity: 0.8;
}

/* ---- narrow: one column, the line down the left ---- */

@media (max-width: 52rem) {
  .line-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A stage is a row: its mark in the left column with the line through it, its name level with
     the mark, then its date and its checks under the name. The track runs the row's whole height so
     the line joins the next stage, and the mark sits at its top, level with the name, however many
     checks hang under it (the verification of 13 Oct: at 390 a mark sat in the middle of its row,
     beside the checks rather than its name). */
  .line-stage {
    --line-stage-track: calc(var(--line-node-current) + 2 * var(--line-ring) + var(--space-2));
    display: grid;
    grid-template-columns: var(--line-stage-track) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: var(--space-3);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    text-align: left;
  }

  .line-stage > .line-track {
    grid-row: 1 / -1;
    grid-column: 1;
    align-self: stretch;
    align-items: flex-start;
    height: auto;
    min-height: var(--line-stage-track);
  }

  /* The mark centred on the track's first square, a small one and a large one alike. */
  .line-stage > .line-track > .line-mark {
    margin-top: calc((var(--line-stage-track) - var(--line-node)) / 2);
  }

  .line-stage.line-node-is-current > .line-track > .line-mark,
  .line-stage.line-node-is-held > .line-track > .line-mark,
  .line-stage.line-node-is-following > .line-track > .line-mark,
  .line-stage.line-node-is-settling > .line-track > .line-mark {
    margin-top: calc((var(--line-stage-track) - var(--line-node-current)) / 2);
  }

  /* The line runs down: the half above the mark and the rest of the row below it. */
  .line-stage > .line-track::before,
  .line-stage > .line-track::after {
    left: 50%;
    right: auto;
    width: var(--line-weight);
    height: auto;
    margin-top: 0;
    margin-left: calc(var(--line-weight) / -2);
  }

  .line-stage > .line-track::before {
    top: calc(-1 * var(--space-1));
    height: calc(var(--line-stage-track) / 2 + var(--space-1));
  }

  .line-stage > .line-track::after {
    top: calc(var(--line-stage-track) / 2);
    bottom: calc(-1 * var(--space-1));
  }

  .line-stage > .line-name,
  .line-stage > .line-detail,
  .line-stage > .line-checks {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  /* The name's first line level with the mark (its line is 1.3em). */
  .line-stage > .line-name {
    margin-top: calc((var(--line-stage-track) - 1.3em) / 2);
  }

  .line-stage > .line-checks {
    align-items: flex-start;
    margin-bottom: var(--space-2);
  }

  /* A run's steps run down as well, each a row in the same way: its mark, its name beside it, then
     since when and the notes under the name (the same verification: at 390 a step's name, day and
     notes had slid beside the next mark, and the line broke under a step with notes). */
  .line-steps {
    flex-direction: column;
  }

  .line-step {
    --line-step-track: calc(var(--line-node-step-current) + 2 * var(--line-ring-step));
    display: grid;
    grid-template-columns: calc(var(--line-step-track) + var(--space-2)) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: var(--space-2);
    padding: 0 var(--space-2);
    text-align: left;
  }

  .line-step > .line-track {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    align-items: flex-start;
    height: auto;
    min-height: var(--line-step-track);
  }

  .line-step > .line-track > .line-mark {
    margin-top: calc((var(--line-step-track) - var(--line-node-step)) / 2);
  }

  .line-step.line-node-is-current > .line-track > .line-mark,
  .line-step.line-node-is-held > .line-track > .line-mark,
  .line-step.line-node-is-following > .line-track > .line-mark,
  .line-step.line-node-is-settling > .line-track > .line-mark {
    margin-top: calc((var(--line-step-track) - var(--line-node-step-current)) / 2);
  }

  .line-step > .line-track::before,
  .line-step > .line-track::after {
    left: 50%;
    right: auto;
    width: var(--line-weight-step);
    height: auto;
    margin-top: 0;
    margin-left: calc(var(--line-weight-step) / -2);
  }

  .line-step > .line-track::before {
    top: 0;
    height: calc(var(--line-step-track) / 2);
  }

  .line-step > .line-track::after {
    top: calc(var(--line-step-track) / 2);
    bottom: 0;
  }

  .line-step > .line-name,
  .line-step > .line-detail {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .line-step > .line-name {
    margin-top: calc((var(--line-step-track) - 1.3em) / 2);
  }

  .line-step > .line-detail:empty {
    display: none;
  }

  .line-step > .line-step-notes {
    grid-column: 2;
    align-items: flex-start;
    margin-bottom: var(--space-2);
    padding: 0;
  }

  .line-step-note {
    text-align: left;
  }

  /* The band runs down too, a segment a row. */
  .line-reads-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-read {
    grid-column: auto;
  }

  .line-runs {
    grid-row: auto;
    grid-column: 1;
    padding: var(--space-2) 0 var(--space-2) calc(var(--line-node-current) + 2 * var(--line-ring) + var(--space-5));
  }

  .line-runs::before {
    left: calc((var(--line-node-current) + 2 * var(--line-ring) + var(--space-2)) / 2 + var(--space-1) - 1px);
    height: 100%;
  }
}