/* A record's history, newest first and grouped by day on one sheet of the paper: the day is the conversation's event
   pill; each event is the icon in its circle, a title with the hour on its right, what it is about, the change from -> to,
   the note, and who did it with the face, each on a line of its own. A run of the same change folds into one line. */
.ds-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--ds-space-1) var(--ds-space-3) var(--ds-space-3);
  list-style: none;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}

/* The pill sits on the sheet, so it takes the fill the sheet does not have. */
.ds-timeline__day > .ds-event-pill { padding-block: var(--ds-space-3) var(--ds-space-1); }
.ds-timeline__day .ds-event-pill__text { background: var(--ds-fill); }

.ds-timeline__row {
  position: relative;
  padding-block: var(--ds-space-2);
}

/* The thread that ties one event to the next, from under a circle to the circle below; a new day cuts it. */
.ds-timeline__row:has(+ .ds-timeline__row)::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--ds-space-2) + 28px) calc(-1 * var(--ds-space-2) + 4px);
  inset-inline-start: 11.5px;
  inline-size: 1px;
  background: var(--ds-divider);
}

.ds-timeline__row,
.ds-timeline__summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--ds-space-3);
  align-items: start;
}

.ds-timeline__row--run { display: block; }

.ds-timeline__icon {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill);
  color: var(--ds-text-muted);
}

.ds-timeline__body {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  font-size: var(--ds-info-value);
  line-height: var(--ds-info-leading);
  color: var(--ds-text);
  overflow-wrap: break-word;
}

/* The title centred on the 24 px circle, the hour at the end of its line, never glued to the text. */
.ds-timeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-3);
  padding-block: max(0px, calc((24px - 1lh) / 2));
}

.ds-timeline__title { flex: 1; min-inline-size: 0; font-weight: var(--ds-weight-medium); }

.ds-timeline__time {
  flex: none;
  font-size: var(--ds-info-label);
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-timeline__detail,
.ds-timeline__change,
.ds-timeline__note,
.ds-timeline__by { margin: 0; }

.ds-timeline__change { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ds-space-2); }
.ds-timeline__detail,
.ds-timeline__field,
.ds-timeline__from,
.ds-timeline__blank,
.ds-timeline__arrow,
.ds-timeline__note { color: var(--ds-text-muted); }
.ds-timeline__arrow { display: inline-flex; }

.ds-timeline__by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--ds-space-1);
  font-size: var(--ds-info-label);
  color: var(--ds-text-muted);
}

.ds-timeline__face {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--ds-radius-full);
  object-fit: cover;
}

.ds-timeline__face--system { display: grid; place-items: center; background: var(--ds-fill); }

.ds-timeline__link { color: inherit; text-decoration: none; }
.ds-timeline__link:hover { text-decoration: underline; }

/* The folded run: the whole line opens, with a hover on the paper and the caret turning. */
.ds-timeline__summary {
  margin: calc(-1 * var(--ds-space-1));
  padding: var(--ds-space-1);
  border-radius: var(--ds-radius-lg);
  list-style: none;
  cursor: pointer;
  --hover-size: 0;
}
.ds-timeline__summary::-webkit-details-marker { display: none; }
.ds-timeline__summary:hover { background: var(--ds-fill-hover); }
.ds-timeline__summary:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.ds-timeline__caret { display: inline-flex; vertical-align: -2px; color: var(--ds-text-muted); transition: rotate 150ms; }
.ds-timeline__run[open] .ds-timeline__caret { rotate: 180deg; }

.ds-timeline__steps {
  margin: var(--ds-space-2) 0 0 calc(24px + var(--ds-space-3));
  padding: 0 0 0 var(--ds-space-3);
  list-style: none;
  border-inline-start: 1px solid var(--ds-divider);
}

/* The hour first, so the eye runs down one column of times and the action sits right beside it. */
.ds-timeline__step {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-3);
  min-block-size: 26px;
  padding-block: 3px;
  font-size: var(--ds-info-label);
  line-height: var(--ds-info-leading);
}

.ds-timeline__step-text { min-inline-size: 0; overflow-wrap: break-word; }

.ds-timeline__more { display: flex; justify-content: center; padding-block-start: var(--ds-space-2); }
.ds-timeline__more:empty { display: none; }

/* Who did it opens their profile: the line keeps its muted look, and only the name underlines on hover. */
.ds-timeline__by-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}
.ds-timeline__by-link:hover .ds-timeline__who { text-decoration: underline; }
.ds-timeline__by-link:focus-visible,
.ds-timeline__link:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: var(--ds-radius-sm); }