/* ──────── Lot & Pallet Trace ──────── */

.trace-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
.trace-side { display: grid; gap: 18px; }

.trace-head-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  align-items: start;
}
.trace-head-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.back-link { color: var(--bfc-indigo-dark); text-decoration: none; font-weight: 600; }
.back-link:hover { text-decoration: underline; }

/* Biography timeline: a vertical rail with one node per event, color-coded
   by action family. Pure CSS, no external assets (the C2 "MRC can't" claim
   is the point of this component). */
.timeline {
  position: relative;
  padding-left: 26px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--bfc-line-strong);
  border-radius: 2px;
}
.tl-event { position: relative; padding: 0 0 14px 0; }
.tl-event:last-child { padding-bottom: 2px; }
.tl-dot {
  position: absolute;
  left: -24px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bfc-muted);
  box-shadow: 0 0 0 3px var(--bfc-surface);
}
.tl-in .tl-dot { background: var(--bfc-teal); }
.tl-out .tl-dot { background: var(--bfc-indigo); }
.tl-move .tl-dot { background: var(--bfc-muted); }
.tl-adjust .tl-dot { background: var(--bfc-yellow); }
.tl-change .tl-dot { background: var(--bfc-violet); }

.tl-card {
  background: var(--bfc-soft);
  border: 1px solid var(--bfc-line);
  border-radius: 12px;
  padding: 10px 14px;
}
.tl-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tl-action { font-weight: 700; }
.tl-in .tl-action { color: var(--bfc-success-text); }
.tl-out .tl-action { color: var(--bfc-indigo-dark); }
.tl-adjust .tl-action { color: var(--bfc-warn-text); }
.tl-qty { font-family: var(--font-mono); font-size: 13px; }
.tl-when { margin-left: auto; font-size: 12px; color: var(--bfc-muted); white-space: nowrap; }
.tl-detail { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-audit { margin-top: 5px; font-size: 11.5px; color: var(--bfc-muted); }
.tl-link { color: var(--bfc-indigo-dark); text-decoration: none; font-weight: 600; }
.tl-link:hover { text-decoration: underline; }

/* Pallet family: indented generations with a connector edge. */
.chain { display: grid; gap: 6px; margin-bottom: 10px; }
.chain-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.chain-node::before {
  content: "└";
  color: var(--bfc-line-strong);
  margin-right: 2px;
}

@media (max-width: 1100px) {
  .trace-layout { grid-template-columns: 1fr; }
  .trace-head-row { grid-template-columns: 1fr; }
  .trace-head-pills { align-items: flex-start; flex-direction: row; }
}