/* Traces page story (10-26, as on the landing's How it works).
   One run fails, Earlyman names the cause, the fix is saved for next time, the next run passes. Both runs share one
   time axis, so the second run is visibly shorter. Drawn in the dashboard's language: a span list on the left, timing
   bars on the right, the UI font with tabular figures, one red for a failure. trace-story.js plays one number q
   (0-1); elements carry .on while q is inside their data-in window and --k (0-1) across data-s / data-e.
   Only transform and opacity animate. Base styles are the finished story (no JS, reduced motion). */
.ts-wrap { width: 100%; max-width: 1040px; }
.ts-steps { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 20px; padding: 0; }
.ts-steps button { all: unset; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; font: 500 var(--t-sm)/16px var(--font-ui); color: var(--fg-3); cursor: pointer; transition: opacity 200ms var(--ease); }
.ts-steps b { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-2); font: 500 10px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.ts-steps li.on button, .ts-steps button:hover { color: var(--fg-0); }
.ts-steps li.on b { background: var(--fg-0); border-color: var(--fg-0); color: var(--bg-0); }
.ts-steps li.done b { border-color: var(--fg-2); color: var(--fg-1); }
.ts-steps button:focus-visible { outline: 1px solid var(--fg-0); outline-offset: 2px; }

.frame.ts { width: 100%; max-width: 1040px; margin: 0 auto; background: var(--bg-1); border: 1px solid var(--line-1); text-align: left; }
.frame.ts .frame-bar { height: 36px; padding: 0 16px; background: var(--bg-2); font: 500 var(--t-sm)/16px var(--font-ui); color: var(--fg-2); }
.frame.ts .frame-bar .tag-sample { font-family: var(--font-ui); }
.ts-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.ts-runs { padding: 8px 0 12px; border-right: 1px solid var(--line-1); min-width: 0; }
.ts-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; min-width: 0; }

/* the waterfall: name | timeline | time | cost, all runs on one axis */
.ts-run { position: relative; padding: 0 20px; }
.ts-run + .ts-run { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); }
.ts-r { position: relative; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 56px 52px; gap: 14px; align-items: center; height: 34px; font-size: var(--t-base); line-height: 20px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.ts-r.hd { height: 28px; font-size: var(--t-xs); color: var(--fg-3); }
.ts-r.root { color: var(--fg-0); font-weight: 500; }
.ts-r .nm { min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-r:not(.root):not(.hd) .nm { padding-left: 16px; }
.ts-r .d, .ts-r .c { text-align: right; white-space: nowrap; }
.ts-r .c { color: var(--fg-2); }
.ts-r.root .c { color: var(--fg-0); }
.ts-tk { position: relative; height: 8px; }
.ts-tk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-1); }
.ts-tk i { position: absolute; top: 0; bottom: 0; left: var(--l); width: max(2px, var(--w)); background: var(--fg-2); transform-origin: left; transform: scaleX(var(--k, 1)); }
.ts-r.root .ts-tk i { background: var(--fg-3); height: 4px; top: 2px; }
.ts-r.bad .ts-tk i { background: var(--bad); }
.ts-r.ok .ts-tk i { background: var(--fg-0); }
.ts-x { flex: none; width: 6px; height: 6px; background: var(--bad); }
.ts-ok { flex: none; width: 10px; height: 10px; }
.ts-ok path { fill: none; stroke: var(--fg-0); stroke-width: 1.6; }
.ts-tag { flex: none; padding: 0 6px; border: 1px solid var(--line-2); font: 500 var(--t-xs)/16px var(--font-ui); color: var(--fg-1); }
.ts-tag.cause { border-color: var(--bad); color: var(--fg-0); }
.ts-tag.rule { border-color: var(--fg-0); color: var(--fg-0); }
.ts-hl { position: absolute; inset: 0 -20px; background: var(--hl-2); opacity: 0; pointer-events: none; }
.ts-r.bad .ts-hl { opacity: 1; }
.ts-back { position: absolute; left: 22px; width: 10px; overflow: visible; pointer-events: none; }
.ts-back path { fill: none; stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 1)); }

/* the side: the issue Earlyman wrote, the fixes kept for next time, what the next run saved */
.ts-card { border: 1px solid var(--line-2); background: var(--bg-2); padding: 14px 16px; }
.ts-card .k { display: block; font: 500 var(--t-xs)/16px var(--font-ui); color: var(--fg-3); }
.ts-card b { display: block; margin-top: 4px; font: 500 var(--t-base)/20px var(--font-ui); color: var(--fg-0); }
.ts-card p { margin: 6px 0 0; font-size: var(--t-sm); line-height: 18px; color: var(--fg-2); }
.ts-card .ts-fix { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-1); }
.ts-card .ts-fix b { display: flex; gap: 8px; align-items: baseline; }
.ts-tray .k .n { color: var(--fg-0); font-variant-numeric: tabular-nums; }
.ts-chip { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--fg-0); font: 500 var(--t-sm)/18px var(--font-ui); color: var(--fg-0); }
.ts-chip::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--fg-0); }
.ts-saved { margin-top: auto; }
.ts-saved b { font-size: var(--t-xl); line-height: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* playing (.ts-play, set by trace-story.js only while motion is on) */
.ts-play [data-in] { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 360ms var(--ease), transform 480ms var(--ease); }
.ts-play [data-in].on { opacity: 1; transform: none; }
.ts-play .ts-r.bad-at:not(.bad) .ts-tk i { background: var(--fg-2); }
.ts-play .ts-r.bad-at:not(.bad) .ts-x { opacity: 0; }
.ts-play .ts-r.bad-at .ts-hl { transition: opacity 300ms var(--ease); }
.ts-play .ts-r.bad-at:not(.bad) .ts-hl { opacity: 0; }
.ts-play .ts-r .ts-hl.now { opacity: 1; }
.frame.ts { transition: opacity 600ms var(--ease); }
.ts-fade .frame.ts { opacity: 0; }

@media (max-width: 860px) {
  .ts-body { grid-template-columns: minmax(0, 1fr); }
  .ts-runs { border-right: 0; border-bottom: 1px solid var(--line-1); }
  .ts-r { grid-template-columns: minmax(0, 1fr) 56px 44px 44px; gap: 8px; font-size: var(--t-sm); }
  .ts-run { padding: 0 14px; }
  .ts-back { left: 14px; }
  .ts-r:not(.root):not(.hd) .nm { padding-left: 14px; }
  .ts-r .ts-tag { display: none; }
  .ts-side { padding: 14px; }
  .ts-steps button { padding: 6px 8px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-play [data-in], .ts-steps button, .frame.ts, .ts-play .ts-r.bad-at .ts-hl { transition: none; }
}
html.rm .ts-play [data-in], html.rm .ts-steps button, html.rm .frame.ts, html.rm .ts-play .ts-r.bad-at .ts-hl { transition: none; }

/* sharper page (10-26): under the story, two short notes, then the gap note, details and the PR link; one
   type family, one size step, labels in plain case */
.fp-stage .tx-ex.tx-ex-page { max-width: 1040px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 28px; }
.tx-ex-page .tx-s { margin-top: 0; padding: 16px 0 4px; }
.tx-ex-page .tx-s .k { font: 500 var(--t-sm)/16px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.tx-ex-page .tx-s p { margin-top: 6px; font-size: var(--t-md); line-height: 22px; color: var(--fg-1); }
.tx-ex-page .tx-gap, .tx-ex-page .tx-det { grid-column: 1 / -1; }
.tx-ex-page .tx-gap { margin-top: 20px; font-size: var(--t-base); }
.tx-ex-page .tx-det p { font: 400 var(--t-base)/20px var(--font-ui); font-variant-numeric: tabular-nums; }
.tx-ex-page .tx-det summary::after { font-family: var(--font-ui); }
@media (max-width: 860px) { .fp-stage .tx-ex.tx-ex-page { grid-template-columns: minmax(0, 1fr); } }
/* the rest of the traces page, same pass: labels and step numbers in the UI font, plain case */
.fp-proof .dp-stats dt, .fp-how .fp-steps .n { font: 500 var(--t-sm)/16px var(--font-ui); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.fp-proof .dp-how > summary::after { font-family: var(--font-ui); }