/* Multi-agent harness replay: a bug's journey. */
.au { display: grid; gap: 12px; }
.au-rT { --au-c: var(--sky, #8fb3d9); }
.au-rE { --au-c: var(--brass, #e9b46c); }
.au-rO { --au-c: var(--cream, #f1ebe0); }
.au-rR { --au-c: var(--rp-ok); }
.au-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; line-height: 1; color: var(--bg, #121826); background: var(--au-c); }
.au-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.au-head .rp-label { margin: 0; }
.au-head .rp-tag { margin-left: auto; }
.au-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted, #a9b1c2); }
.au-gone { visibility: hidden; }

/* Status card */
.au-status { display: grid; gap: 4px; }
.au-st-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.au-st-top .rp-label { margin: 0; }
.au-st-title { margin: 0; font-size: 16px; line-height: 1.35; color: var(--cream, #f1ebe0); }
.au-track { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.au-track li { display: grid; gap: 5px; font-size: 12px; line-height: 1.3; color: var(--muted, #a9b1c2); transition: color .3s; }
.au-track i { display: block; height: 4px; border-radius: 2px; background: rgba(var(--cream-rgb),.14); transition: background .4s; }
.au-track .is-done i { background: rgba(var(--brass-rgb),.55); }
.au-track .is-now { color: var(--cream, #f1ebe0); }
.au-track .is-now i { background: var(--brass, #e9b46c); box-shadow: 0 0 0 3px rgba(var(--brass-rgb),.16); }
.au-track .is-bad { color: var(--rp-bad); }
.au-track .is-bad i { background: var(--rp-bad); box-shadow: 0 0 0 3px rgba(227,154,134,.16); }

/* Thread */
.au-body { display: grid; gap: 10px 12px; }
.au-thread { grid-area: th; list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 0; overflow: hidden; background: var(--rp-sunk); border: 1px solid rgba(var(--cream-rgb),.1); border-radius: 8px; -webkit-mask-image: linear-gradient(transparent, #000 44px); mask-image: linear-gradient(transparent, #000 44px); }
.au-msg { flex: none; padding: 1px 0 1px 10px; border-left: 2px solid var(--au-c); }
.au-who { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--au-c); }
.au-time { margin-left: auto; color: var(--muted, #a9b1c2); }
.au-text { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #e0d8c9; overflow-wrap: anywhere; }
.au-text code { color: var(--cream, #f1ebe0); background: rgba(var(--cream-rgb),.07); border-radius: 4px; padding: 0 4px; }
.au-sys { flex: none; display: flex; justify-content: center; padding: 2px 0; }
.au-in { animation: au-in .5s var(--rp-ease) both; }
@keyframes au-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Issue A */
.au-i { height: 340px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "th cl" "th tl" "th ts"; }
.au-claim { grid-area: cl; }
.au-tl { grid-area: tl; }
.au-tests { grid-area: ts; }
.au-i .au-dk.is-front { border-color: var(--brass, #e9b46c); }
.au-claim-v { margin: 0; font-size: 14px; line-height: 1.4; color: var(--cream, #f1ebe0); min-height: 2.8em; }
.au-tl ol { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.au-tl li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted, #a9b1c2); opacity: .38; transition: opacity .4s, color .4s; }
.au-tl li b { font-weight: 400; }
.au-tl li.is-on { opacity: 1; }
.au-tl li.is-hot { color: var(--cream, #f1ebe0); }
.au-tl li.is-hot b { color: var(--brass, #e9b46c); }
.au-tests-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.au-pips { display: flex; gap: 3px; }
.au-pips i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(var(--cream-rgb),.22); transition: background .4s, border-color .4s; }
.au-pips i:nth-child(3) { margin-right: 7px; }
.au-tests.is-on .au-pips i { background: rgba(156,200,164,.3); border-color: var(--rp-ok); }

/* The contract */
.au-c { height: 376px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "fl th" "ow rv"; }
.au-flow { grid-area: fl; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.au-node { display: flex; align-items: center; gap: 9px; padding: 4px 10px; min-height: 29px; font-size: 13px; line-height: 1.3; }
.au-num { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; background: rgba(var(--brass-rgb),.14); color: var(--brass, #e9b46c); transition: background .4s, color .4s; }
.au-node.is-done .au-num { background: rgba(156,200,164,.2); color: var(--rp-ok); }
.au-node.is-active .au-num { background: var(--brass, #e9b46c); color: var(--bg, #121826); }
.au-node.is-bad { border-color: var(--rp-bad); }
.au-node.is-bad .au-num { background: var(--rp-bad); color: var(--bg, #121826); }
.au-node.is-dim { opacity: .45; }
.au-now { grid-area: nw; display: none; margin: 0; font-size: 13px; color: var(--cream, #f1ebe0); }
.au-own { grid-area: ow; }
.au-rv { grid-area: rv; }
.au-rv.is-dim { opacity: .6; }
.au-rv-v { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cream, #f1ebe0); min-height: 2.9em; }
.au-o { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.au-o li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; padding-left: 8px; border-left: 2px solid transparent; font-size: 12px; line-height: 1.45; color: var(--muted, #a9b1c2); transition: color .3s, border-color .3s; }
.au-o li b { font-weight: 600; }
.au-o li.is-on { color: var(--cream, #f1ebe0); border-left-color: var(--brass, #e9b46c); }

/* Before 8 Sep */
.au-b { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr); grid-template-areas: "fx lk rw" "fx id rw" "rt rt rt" "pu pu co"; }
.au-fx { grid-area: fx; }
.au-rw { grid-area: rw; }
.au-lk { grid-area: lk; }
.au-id { grid-area: id; }
.au-pu { grid-area: pu; }
.au-co { grid-area: co; }
.au-b > * { transition: opacity .5s var(--rp-ease), border-color .4s var(--rp-ease); }
.au-sess { display: grid; gap: 4px; align-content: start; justify-items: start; }
.au-sess .rp-label { margin: 0; }
.au-sess-t { margin: 0; font-size: 17px; line-height: 1.25; color: var(--cream, #f1ebe0); }
.au-sess-d { font-size: 12px; color: var(--muted, #a9b1c2); margin-bottom: 6px; }
.au-sess.is-bad { border-color: var(--rp-bad); }
.au-res { padding: 10px 12px; }
.au-res .rp-value { display: block; font-size: 13px; }
.au-res.is-hot { border-color: var(--rp-warn); }
.au-res.is-hot .rp-value { color: var(--rp-warn); }
.au-rt { grid-area: rt; margin: 0; text-align: center; font-size: 12px; color: var(--muted, #a9b1c2); opacity: .45; }
.au-rt.is-on { opacity: 1; color: var(--brass, #e9b46c); }
.au-pu { display: grid; gap: 6px; justify-items: start; }
.au-pu .rp-label { margin: 0; }
.au-code { color: var(--cream, #f1ebe0); overflow-wrap: anywhere; }
.au-pu.is-bad { border-color: var(--rp-bad); background: rgba(227,154,134,.06); }
.au-co-v { display: block; font-size: 22px; line-height: 1.2; }
/* D19 arrives as one card over the two sessions and what they fought over. */
.au-one { grid-column: 1 / -1; grid-row: 1 / 3; z-index: 1; display: grid; align-content: start; gap: 6px; border-color: var(--rp-ok); box-shadow: 0 10px 30px rgba(6,9,18,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s var(--rp-ease), transform .5s var(--rp-ease), visibility .5s; }
.au-one .au-head { margin: 0; }
.au-ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: #e0d8c9; }
.au-ol li::marker { color: var(--rp-ok); }
.au-ol .au-cost { color: var(--rp-warn); }
.au-ol .au-cost::marker { color: var(--rp-warn); }
.au-b.is-merged > .au-one { opacity: 1; visibility: visible; transform: none; }
.au-b.is-merged > :not(.au-one) { opacity: .3; }

@media (max-width: 520px) {
  .au-st-title { font-size: 15px; }
  .au-track span { display: none; }
  .au-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .au-dk { grid-area: dk; }
  .au-dk:not(.is-front) { visibility: hidden; }
  .au-thread { height: 214px; }
  .au-i { grid-template-rows: auto; grid-template-areas: "th" "dk"; }
  .au-c { grid-template-rows: auto; grid-template-areas: "fl" "nw" "th" "dk"; }
  .au-flow { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .au-node { padding: 0; min-height: 0; border: 0; background: none; justify-content: center; }
  .au-node-t { display: none; }
  .au-num { width: 26px; height: 26px; }
  .au-node.is-active .au-num { box-shadow: 0 0 0 3px rgba(var(--brass-rgb),.25); }
  .au-now { display: block; }
  .au-b { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "fx rw" "rt rt" "dk dk"; }
  .au-sess { padding: 10px 11px; }
  .au-sess-t { font-size: 15px; }
  .au-one { grid-row: 1 / 2; padding: 12px; }
  .au-ol { font-size: 12px; }
}