/* Thread: the order's history, one row per occasion, as the snapshot draws "what has happened":
   the day in a narrow mono column, with the time under it when the pointer is on the row, and
   beside it the occasion as one sentence, then whatever anybody wrote on it. Hairlines between
   rows, nothing boxed. */
.thread {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.thread-occasion {
  display: grid;
  grid-template-columns: var(--thread-date-column) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.thread-when {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  line-height: 1.6;
}

/* The time, and which clock it is on, under the day: there when the pointer is on the row or the
   keyboard is in it, and always where nothing hovers. */
.thread-clock {
  display: block;
}

@media (hover: hover) {
  .thread-clock {
    opacity: 0;
    transition: opacity 0.12s;
  }

  .thread-occasion:hover .thread-clock,
  .thread-occasion:focus-within .thread-clock {
    opacity: 1;
  }
}

.thread-body {
  min-width: 0;
}

.thread-said {
  margin: 0;
  max-width: none;
}

/* What somebody wrote, quoted in italics under the sentence it was written on. */
.thread-words {
  margin-top: var(--space-1);
  font-style: italic;
}

/* The quotation marks go round the words, so a paragraph that is only a pasted picture takes
   none. */
.thread-words > :first-child:not(:has(img:only-child))::before {
  content: "\201C";
}

.thread-words > :last-child:not(:has(img:only-child))::after {
  content: "\201D";
}

/* An internal note: indented on a dashed rule, quiet, as the snapshot sets a note only we see. */
.thread-note {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-left: var(--stage-ring-border) dashed var(--color-muted);
  color: var(--color-muted);
  font-size: var(--text-control-small);
}

.thread-words > :last-child,
.thread-note > :last-child {
  margin-bottom: 0;
}

.thread-body .attachments {
  margin-top: var(--space-2);
}

/* Where the facts came from — a person acting, a staff set, the system, a peer — on HQ's thread
   alone. Monospace, because it is the word the column holds. */
.thread-source {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

/* ---- What's happened: the customer's page -------------------------------------------------
   One quiet line per occasion, the day in front, and no hairlines between rows. */
.thread-conversation {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.thread-aside > p {
  margin: 0;
  max-width: none;
  color: var(--color-muted);
  font-size: var(--text-label);
}