/* ==========================================================================
   .tp-timeline — P1.F2.T3 (added Wave 1b, orchestrator-assigned)
   ©2026 Vexstorm Studios – All Rights Reserved

   Chronological, attributed entries: the contribution history on an
   observation, and the status history beneath it. Every entry says who, when,
   and what — the attribution is the point, because a contribution is somebody's
   statement rather than an anonymous fact.

   Elements   __item  __item--empty  __item--superseded  __meta  __reason
   States     (non-interactive; controls inside an item carry their own)

   Consumed by observations/detail.html (contributions and status history).

   SUPERSEDED ENTRIES STAY VISIBLE. The contribution record is append-only: a
   correction supersedes its predecessor rather than replacing it, and the
   history is worthless if the superseded entry is hidden. So --superseded is
   de-emphasised and never removed, and it carries a "Superseded" badge in the
   template as well as the muted treatment here — the state is never signalled
   by opacity alone (ACC-004).

   The rail is drawn with a border rather than a pseudo-element positioned by
   hand, so it cannot fall out of alignment when an item's height changes.
   ========================================================================== */

.tp-timeline {
  display: flex;
  flex-direction: column;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */

.tp-timeline__item {
  position: relative;
  min-width: 0;
  padding: 0 0 var(--tp-space-5) var(--tp-space-6);
  border-inline-start: var(--tp-border-width-hairline) solid
    var(--tp-color-border-subtle);
  color: var(--tp-color-text-primary);
  overflow-wrap: break-word;
}

/* The node. A ::before rather than an element, because it carries no meaning
   the text does not already carry and must not reach the accessibility tree. */
.tp-timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: var(--tp-space-2);
  inset-inline-start: calc(-1 * var(--tp-space-1));
  width: var(--tp-space-2);
  height: var(--tp-space-2);
  border-radius: var(--tp-radius-pill);
  background-color: var(--tp-color-accent-default);
}

/* The rail stops at the last node instead of running into empty space. */
.tp-timeline__item:last-child {
  padding-bottom: 0;
  border-inline-start-color: transparent;
}

/* Attribution line: contributor, timestamp, confidence, count. Tabular figures
   so the counts down a column of entries line up. */
.tp-timeline__meta {
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
  font-variant-numeric: tabular-nums;
}

/* Why a contribution was corrected. Set apart from the narrative because it is
   a statement about the record rather than about the observation. */
.tp-timeline__reason {
  margin-top: var(--tp-space-2);
  padding: var(--tp-space-2) var(--tp-space-3);
  border-inline-start: var(--tp-border-width-thick) solid
    var(--tp-color-state-info);
  border-radius: var(--tp-radius-sm);
  background-color: var(--tp-color-state-info-subtle);
  color: var(--tp-color-state-info-text);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

/* Present in the history, no longer the current statement. Muted and given a
   hollow node, alongside the template's "Superseded" badge. */
.tp-timeline__item--superseded {
  color: var(--tp-color-text-muted);
}

.tp-timeline__item--superseded::before {
  background-color: var(--tp-color-surface-base);
  box-shadow: inset 0 0 0 var(--tp-border-width-hairline)
    var(--tp-color-border-strong);
}

/* "No contributions have been recorded yet." An empty history is a fact about
   the record, so it is stated rather than left blank. */
.tp-timeline__item--empty {
  padding-inline-start: 0;
  border-inline-start: 0;
  color: var(--tp-color-text-muted);
  font-style: italic;
}

.tp-timeline__item--empty::before {
  content: none;
}