/* Frise — un journal d'événements datés : `<ol class="timeline">` > `timeline__item`
   (`timeline__marker`, `timeline__body` : `__head` avec `__title` et `__date`, `__text`,
   `__meta`). Référence : docs/design-system.md § Composants. */

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

.timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.timeline__item + .timeline__item {
  border-top: 1px solid var(--color-border);
}

/* Une entrée qui est un lien (l'activité récente d'un tableau de bord). */
.timeline__item--clickable {
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.timeline__item--clickable:hover {
  background: var(--color-bg-hover);
}

.timeline__marker {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
}

:is(
    .timeline__marker--primary,
    .timeline__marker--success,
    .timeline__marker--warning,
    .timeline__marker--danger,
    .timeline__marker--info,
    .timeline__marker--muted
  ) {
  background: var(--tone-bg);
  color: var(--tone-text);
}

.timeline__body {
  flex: 1;
  min-width: 0;
}

.timeline__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.timeline__label {
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
}

.timeline__date,
.timeline__meta {
  color: var(--color-text-secondary);
  font-size: var(--text-12);
}

.timeline__date {
  flex-shrink: 0;
}

.timeline__text {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-13);
}

/* Dense : le journal d'audit d'une fiche. */
.timeline--compact .timeline__item {
  padding-block: var(--space-2);
}

.timeline--compact .timeline__marker {
  width: 22px;
  height: 22px;
  font-size: var(--text-12);
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.timeline__marker--success {
  --tone-bg: var(--badge-success-bg);
  --tone-text: var(--badge-success-text);
}

.timeline__marker--warning {
  --tone-bg: var(--badge-warning-bg);
  --tone-text: var(--badge-warning-text);
}

.timeline__marker--danger {
  --tone-bg: var(--badge-danger-bg);
  --tone-text: var(--badge-danger-text);
}

.timeline__marker--info {
  --tone-bg: var(--badge-info-bg);
  --tone-text: var(--badge-info-text);
}

.timeline__marker--primary {
  --tone-bg: var(--color-primary-bg);
  --tone-text: var(--color-primary);
}

.timeline__marker--muted {
  --tone-bg: var(--color-bg-subtle);
  --tone-text: var(--color-text-secondary);
}