/* THE TRACE PANE — one turn an agent took.
 *
 * Read to answer two questions, in this order: what did it cost, and what was
 * said. So the figures are a band across the top and the text below it, rather
 * than a form-shaped thing where the numbers hide among labels.
 *
 * Every selector sits under .trace so the short names cannot escape. */
.trace { display: flex; flex-direction: column; gap: 1.25rem; }

.trace__head { display: flex; flex-direction: column; gap: 0.15rem; }
.trace__title { margin: 0; font-size: 1.2rem; font-weight: 600; }
.trace__when { margin: 0; color: var(--ink-3); font-size: 0.85rem; }

.trace__figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem 1rem; margin: 0;
  padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--surface-2, transparent);
}
.trace__figures div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.trace__figures dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
/* Tabular figures so costs and token counts line up down the row. */
.trace__figures dd { margin: 0; font-size: 0.98rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.trace__asker { margin: 0; color: var(--ink-2); font-size: 0.9rem; }

.trace__block { display: flex; flex-direction: column; gap: 0.4rem; }
.trace__block h3, .trace__block summary {
  margin: 0; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600;
}
.trace__block summary { cursor: pointer; }
.trace__block pre {
  margin: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--surface-2, transparent);
  /* The prompt and the reply are prose, not code: wrap rather than scroll. */
  white-space: pre-wrap; word-break: break-word;
  font-size: 0.85rem; line-height: 1.5; max-height: 22rem; overflow-y: auto;
}
.trace__block--bad pre { border-color: var(--bad, #a8431d); }