/* Ampersand episode timeline. Tokens fall back to the blog's own variables when embedded there. */
.amp-tl {
  --tl-bg: var(--bg, #f3f2ed);
  --tl-surface: var(--surface, #f8f7f3);
  --tl-ink: var(--ink, #3b3d37);
  --tl-muted: var(--muted, #6b6e65);
  --tl-line: var(--line, #d9dcd3);
  --tl-serif: var(--serif, "Newsreader", Georgia, serif);
  --tl-sans: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --tl-done: #3f6b3a;
  --tl-row-h: 46px;
  --tl-label-w: 112px;
  --tl-score-w: 72px;
  container: amptl / inline-size;
  position: relative;
  display: block;
  color: var(--tl-ink);
  font-family: var(--tl-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.amp-tl *, .amp-tl *::before, .amp-tl *::after { box-sizing: border-box; }
.amp-tl [hidden] { display: none !important; }
.amp-tl button { font: inherit; color: inherit; }
.amp-tl :focus-visible { outline: 2px solid #8b5caf; outline-offset: 2px; }
.amp-tl .tl-swatch { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--arm, var(--tl-muted)); }
.amp-tl .tl-arm-ink, .amp-tl .tl-strip-label, .amp-tl .tl-card-arm, .amp-tl .tl-outcome-arm { color: color-mix(in srgb, var(--arm) 72%, #000); }

/* ---------- header (the blog hides this and carries the setup in prose) ---------- */
.amp-tl .tl-head { margin-bottom: 24px; }
.amp-tl .tl-title { font-family: var(--tl-serif); font-size: 28px; font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.amp-tl .tl-subtitle { margin-top: 6px; color: var(--tl-muted); font-family: var(--tl-serif); font-size: 18px; line-height: 1.4; }
.amp-tl .tl-setting { max-width: 68ch; margin-top: 12px; font-size: 14px; line-height: 1.65; }

/* ---------- controls ---------- */
.amp-tl .tl-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.amp-tl .tl-step { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 2px; border: 1px solid var(--tl-line); border-radius: 50%; background: var(--tl-surface); font-size: 19px; line-height: 1; cursor: pointer; }
.amp-tl .tl-step:hover { border-color: #b9bcb2; background: #fff; }
.amp-tl .tl-step:disabled { opacity: .35; cursor: default; background: transparent; border-color: var(--tl-line); }
.amp-tl .tl-counter { margin-left: 8px; color: var(--tl-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- overview strip ---------- */
.amp-tl .tl-strip { display: grid; grid-template-columns: var(--tl-label-w) minmax(0, 1fr) var(--tl-score-w); align-items: start; }
.amp-tl.is-unscored .tl-strip { grid-template-columns: var(--tl-label-w) minmax(0, 1fr); }
.amp-tl .tl-strip-labels > div, .amp-tl .tl-strip-scores > div { display: flex; align-items: center; height: var(--tl-row-h); }
.amp-tl .tl-strip-label { padding-right: 10px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.amp-tl .tl-strip-score { justify-content: flex-end; font-family: var(--tl-serif); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.amp-tl .tl-lane-area { position: relative; min-width: 0; }
.amp-tl .tl-lane-svg { position: absolute; inset: 0; display: block; }
.amp-tl .tl-day-line { stroke: var(--tl-line); stroke-width: 1; }
.amp-tl .tl-lane-line { stroke-width: 2; stroke-linecap: round; opacity: .55; }
.amp-tl .tl-tick { stroke-width: 1; opacity: .22; }
.amp-tl .tl-cursor { stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.amp-tl .tl-axis-labels { position: relative; height: 26px; color: var(--tl-muted); font-size: 11px; }
.amp-tl .tl-axis-lead { padding-top: 6px; color: var(--tl-muted); font-size: 11px; }
.amp-tl .tl-axis-labels span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }

.amp-tl .tl-dot { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--arm); border-radius: 50%; background: var(--tl-bg); color: color-mix(in srgb, var(--arm) 72%, #000); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; transform: translate(-50%, -50%); cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; }
.amp-tl .tl-dot:hover { transform: translate(-50%, -50%) scale(1.12); }
.amp-tl .tl-dot.is-selected { background: var(--arm); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--arm) 22%, transparent); }
.amp-tl .tl-dot-check { position: absolute; top: -7px; right: -8px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--tl-done); color: #fff; font-size: 8.5px; font-weight: 700; box-shadow: 0 0 0 1.5px var(--tl-bg); }

/* ---------- moment card ---------- */
.amp-tl .tl-card { min-height: 290px; margin-top: 10px; padding: 20px 22px 18px; border: 1px solid var(--tl-line); border-top: 3px solid var(--arm); border-radius: 4px; background: var(--tl-surface); }
.amp-tl .tl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--tl-muted); font-size: 12.5px; }
.amp-tl .tl-card-arm { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.amp-tl .tl-card-headline { margin: 6px 0 14px; font-family: var(--tl-serif); font-size: 23px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.amp-tl .tl-excerpt { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.amp-tl .tl-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
.amp-tl .tl-msg.is-grouped { margin-top: -6px; }
/* Neighboring messages around a moment, shown faded so the excerpt reads as part of a longer chat. */
.amp-tl .tl-msg.is-grouped .tl-avatar { visibility: hidden; height: 0; }
.amp-tl .tl-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #d6d2c6; color: #34362f; font-size: 10px; font-weight: 600; }
.amp-tl .tl-msg.is-assistant .tl-avatar { background: var(--arm); color: #fff; font-family: var(--tl-serif); font-size: 15px; font-weight: 500; }
.amp-tl .tl-msg-meta { display: flex; align-items: baseline; gap: 7px; font-size: 13px; line-height: 1.3; }
.amp-tl .tl-msg-meta b { font-weight: 600; }
.amp-tl .tl-msg-meta time { color: var(--tl-muted); font-size: 11px; }
.amp-tl .tl-msg-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.amp-tl .tl-msg-text b { font-weight: 600; }
.amp-tl .tl-link { color: #4d6a86; }
[data-surface="imessage"].amp-tl .tl-msg { grid-template-columns: minmax(0, 1fr); }
[data-surface="imessage"].amp-tl .tl-msg-text { display: inline-block; max-width: 90%; padding: 6px 12px 7px; border-radius: 16px 16px 16px 5px; background: #e7e6df; }
[data-surface="imessage"].amp-tl .tl-msg.is-assistant .tl-msg-text { background: color-mix(in srgb, var(--arm) 15%, var(--tl-surface)); }
[data-surface="imessage"].amp-tl .tl-msg-meta { margin: 0 0 2px 4px; font-size: 11.5px; }

.amp-tl .tl-goal-chip { display: inline-grid; grid-template-columns: 12px minmax(0, auto) auto; align-items: baseline; gap: 2px 8px; max-width: 100%; padding: 4px 10px 5px; border-radius: 6px; background: #e9ebe2; font-size: 12.5px; line-height: 1.4; }
.amp-tl .tl-goal-chip.is-open { background: #ecebe6; color: var(--tl-muted); }
.amp-tl .tl-goal-chip.is-large { margin-top: 14px; font-size: 13px; }
.amp-tl .tl-goal-mark { font-weight: 700; }
.amp-tl .tl-goal-chip.is-done .tl-goal-mark { color: var(--tl-done); }
.amp-tl .tl-goal-chip.is-partial .tl-goal-mark { color: #7d6a3a; font-weight: 400; }
.amp-tl .tl-goal-text b { font-weight: 600; }
.amp-tl .tl-goal-amount { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amp-tl .tl-goal-chip.is-open .tl-goal-amount { font-weight: 400; }


/* ---------- outcome ---------- */
.amp-tl .tl-outcome { margin-top: 30px; }
.amp-tl .tl-outcome-title { font-size: 16px; font-weight: 500; }
.amp-tl .tl-outcome-sub { margin: 2px 0 10px; color: var(--tl-muted); font-size: 12.5px; }
.amp-tl .tl-outcome-row { display: grid; grid-template-columns: var(--tl-label-w) 84px minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--tl-line); }
.amp-tl .tl-outcome-arm { display: flex; align-items: center; gap: 7px; padding-top: 3px; font-size: 13px; font-weight: 500; }
.amp-tl .tl-outcome-total { font-family: var(--tl-serif); font-size: 22px; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.amp-tl .tl-outcome-goals { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- details ---------- */
.amp-tl .tl-error { padding: 16px; border: 1px solid #d7b3a3; background: #f6ece6; color: #7a3b22; font-size: 13px; }

/* ---------- motion ---------- */
.amp-tl .tl-enter { animation: tl-rise .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tl-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .amp-tl *, .amp-tl *::before, .amp-tl *::after { animation: none !important; transition: none !important; }
}

/* ---------- conversation playback (also used by the blog's eval examples) ---------- */
/* Steps keep their final box while waiting, so only opacity changes and nothing reflows. */
.pb-host { position: relative; }
.pb-host > *, .pb-early { transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1); }
.pb-step.pb-pending.pb-host > :not(.pb-indicator), .pb-step.pb-pending .pb-host > :not(.pb-indicator) { opacity: 0; transform: translateY(4px); }
.pb-step.pb-pending:not(.pb-busy) .pb-early { opacity: 0; }
.pb-indicator { position: absolute; top: 2px; left: 0; display: none; align-items: center; gap: 7px; color: var(--pb-accent, var(--arm, #8b5caf)); font: 500 12.5px/1.4 Inter, system-ui, sans-serif; pointer-events: none; }
.pb-busy .pb-indicator { display: inline-flex; }
.pb-indicator-message { padding: 7px 10px; border-radius: 12px; background: #e7e6df; color: #6b6e65; }
.pb-indicator-think, .pb-indicator-tool { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--pb-accent, var(--arm, #8b5caf)) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--pb-accent, var(--arm, #8b5caf)) 9%, transparent); }
.pb-dots { display: inline-flex; gap: 3px; }
.pb-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: pb-dot 1s ease-in-out infinite; }
.pb-dots i:nth-child(2) { animation-delay: .15s; }
.pb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pb-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.pb-chat.pb-playing { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .pb-host > *, .pb-early, .pb-dots i { transition: none !important; animation: none !important; }
}

/* ---------- narrow containers ---------- */
@container amptl (max-width: 560px) {
  .amp-tl .tl-strip { --tl-label-w: 78px; --tl-score-w: 58px; --tl-row-h: 44px; }
  .amp-tl .tl-strip-label { font-size: 12px; }
  .amp-tl .tl-strip-score { font-size: 15px; }
  .amp-tl .tl-dot { width: 19px; height: 19px; font-size: 10px; }
  .amp-tl .tl-dot-check { top: -6px; right: -7px; width: 12px; height: 12px; font-size: 8px; }
  .amp-tl .tl-card { min-height: 0; padding: 16px 14px 14px; }
  .amp-tl .tl-card-headline { font-size: 20px; }
  .amp-tl .tl-outcome-row { grid-template-columns: minmax(0, 1fr) auto; }
  .amp-tl .tl-outcome-goals { grid-column: 1 / -1; }
  .amp-tl .tl-goal-chip { grid-template-columns: 12px minmax(0, 1fr); }
  .amp-tl .tl-goal-amount { grid-column: 2; }
  .amp-tl .tl-outcome-total { text-align: right; }
}