/* Part Tracking — the public list of every part and where it has got to.
   Phone first: most people open this from a link in a Teams message on their phone. Everything
   here sits on the shared tokens and base.css; only the list rows and the progress strip are new. */

.wrap { max-width: 900px; }

/* One gap rule for the whole page. Stacking panels and notices with no space between them made
   them read as a single box that had been cut up, which is what "the bubbles touch" means. */
#main { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

/* ------------------------------------------------------------------ filters -- */

.trackbar { display: grid; gap: 11px; padding: 13px 18px; }
.trackbar-controls {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .trackbar-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trackbar-controls { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- the list --- */

.tracklist { display: flex; flex-direction: column; }

/* A whole row is the link: on a phone the tap target should be the card, not the title. */
.trackrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; min-height: 60px;
  border-top: 1px solid var(--rule-soft);
  color: inherit; text-decoration: none;
}
.tracklist > .trackrow:first-child { border-top: 0; }
.trackrow:hover { background: var(--sunk); }
.trackrow:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }

.trackrow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trackrow-name { font-size: var(--fs-md); line-height: 1.3; }
.trackrow-meta { font-size: var(--fs-xs); color: var(--ink-3); }

.trackrow-side { display: flex; align-items: center; gap: 10px; flex: none; }
.trackrow-qty { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trackrow-ship { font-size: var(--fs-sm); color: var(--ok); }
.trackrow-date { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }

/* Below ~600px the status/date column would squeeze the part name to three lines. */
@media (max-width: 600px) {
  .trackrow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .trackrow-side { width: 100%; }
  .trackrow-date { margin-left: auto; }
}

.trackfoot { margin: 4px 0 0; text-align: center; }

/* ------------------------------------------------------------- one part ---- */

.backlink {
  display: inline-block; margin-bottom: 6px;
  font-size: var(--fs-sm); color: var(--ink-3); text-decoration: none;
}
.backlink:hover { color: var(--ink); }

/* The progress strip: Requested -> Approved -> Ordered -> Arrived, with the date each step
   happened. The dots sit on their OWN row above the labels — running the connecting line through
   the middle of the words drew a line straight across them. A denied or cancelled part stops
   early and the trail turns red. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.steps li {
  position: relative; flex: 1 1 0; min-width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 22px 6px 0; text-align: center;
  font-size: var(--fs-sm); color: var(--ink-3);
}
/* The dot sits at the centre of its column, so its label is centred under it and — because
   every column is the same width — the whole strip is centred in the box. */
.steps li::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--rule); background: var(--surface);
  box-sizing: border-box;
}
/* From just past this dot to just before the next one. The next dot is at the centre of the
   next column, one column-width along, hence right: -50%. */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(50% + 10px); right: calc(-50% + 10px); top: 5px;
  height: 2px; background: var(--rule);
}
.steps li.done { color: var(--ink); font-weight: 500; }
.steps li.done::before { background: var(--ok); border-color: var(--ok); }
.steps li.done:not(:last-child)::after { background: var(--ok); }
.steps li.stopped { color: var(--accent-text); font-weight: 600; }
.steps li.stopped::before { background: var(--accent); border-color: var(--accent); }
.steps.terminal li.done:not(:last-child)::after { background: var(--rule); }
.steps-date { font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 400; }

/* On a phone the four steps stack, and the line turns to run down the dots. */
@media (max-width: 560px) {
  .steps { flex-direction: column; gap: 14px; }
  .steps li { min-width: 0; padding: 0 0 0 22px; align-items: flex-start; text-align: left; }
  .steps li::before { left: 0; top: 2px; transform: none; }
  .steps li:not(:last-child)::after {
    left: 5px; top: 16px; right: auto; bottom: -16px; width: 2px; height: auto;
  }
}

/* The season line above the list, and the tracking number on a part. */
.tracktop { margin: 0; }
.trackno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.trackno .muted { color: var(--ink-3); font-size: var(--fs-sm); }

/* A notice on this page carries a heading and a line of detail, so it stacks rather than
   sitting on one row like the short notices elsewhere. */
.notice > div { min-width: 0; }
.notice .small { margin-top: 2px; }
.notice .muted { color: var(--ink-3); }

/* The "Showing parts for …" bar: one line, centred, and only as tall as its text. The button
   brought its own padding, which is what pushed the box taller and the name out of line with it. */
.notice.trackfilter { align-items: center; justify-content: space-between; padding-block: 8px; }
.notice.trackfilter .btn { padding: 2px 8px; }