/* Evals and acceptance replay: "Test the test, live". */
.rg { display: grid; gap: 12px; font-variant-numeric: tabular-nums; }
.rg-note { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted, #a9b1c2); border-left: 2px solid rgba(var(--brass-rgb),.3); padding: 2px 0 2px 10px; transition: color .4s, border-color .4s; }
.rg-note.is-active { color: var(--cream, #f1ebe0); border-left-color: var(--brass, #e9b46c); }
.rg-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--rp-sunk); }
.rg-h { display: block; font-size: 13px; color: var(--cream, #f1ebe0); margin-bottom: 6px; }
.rg-v { display: block; color: var(--cream, #f1ebe0); }
.rg-stack { display: grid; }
.rg-stack > * { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s var(--rp-ease); }
.rg-stack > .is-on { visibility: visible; opacity: 1; }
.rg-pane { margin: 0; padding: 8px 10px; border-radius: 6px; background: rgba(var(--cream-rgb),.03); border-left: 2px solid rgba(var(--muted-rgb),.35); }
.rg-pane.ok { border-left-color: var(--rp-ok); }
.rg-pane.bad { border-left-color: var(--rp-bad); }
.rg-pane.warn { border-left-color: var(--rp-warn); }
.rg-pane p, .rg-pane pre { margin: 0; line-height: 1.6; color: #e0d8c9; white-space: pre-wrap; overflow-wrap: anywhere; }
.rg-pane.muted p { color: var(--muted, #a9b1c2); }
.rg-nw { white-space: nowrap; }
.rg-jest { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 1ch; margin: 0; line-height: 1.6; color: #e0d8c9; }
.rg-jest dt { grid-column: 1; }
.rg-jest dd { grid-column: 2; margin: 0; }
.rg-pane.ok p { color: var(--rp-ok); }

/* Live check */
.rg-live { grid-template-columns: minmax(0, 236px) minmax(0, 1fr); align-items: start; gap: 12px 18px; }
.rg-imgs { display: grid; gap: 8px; }
.rg-img { display: grid; gap: 8px; padding: 8px; }
.rg-img.is-warn { border-color: var(--rp-warn); }
.rg-img-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rg-img-foot .rp-label { margin: 0; }
.rg-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 1.35; }
.rg-table caption { text-align: left; font-size: 12px; color: var(--brass, #e9b46c); padding-bottom: 6px; }
.rg-table th, .rg-table td { padding: 6px 8px; border-bottom: 1px solid rgba(var(--cream-rgb),.08); text-align: right; vertical-align: top; font-weight: 400; transition: background .3s; }
.rg-table thead th { font-size: 12px; color: var(--muted, #a9b1c2); width: 30%; padding-top: 0; }
.rg-table thead th:first-child { width: 40%; text-align: left; }
.rg-table tbody th { text-align: left; }
.rg-rn { display: block; color: var(--cream, #f1ebe0); }
.rg-rule, .rg-d { display: block; font-size: 12px; color: var(--muted, #a9b1c2); }
.rg-table tr.is-active > * { background: rgba(var(--brass-rgb),.08); }
.rg-table tr.is-active > th { box-shadow: inset 2px 0 var(--brass, #e9b46c); }
.rg-table td.is-idle .rg-v { color: var(--muted, #a9b1c2); }
.rg-table td.is-ok .rg-v { color: var(--rp-ok); }
.rg-table td.is-bad .rg-v { color: var(--rp-bad); }
.rg-table td.is-warn .rg-v { color: var(--rp-warn); }

/* Mutation test */
.rg-chk { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.rg-thumb { display: grid; gap: 6px; }
.rg-thumb .rp-label { margin: 0; }
.rg-conds { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; }
.rg-conds li { display: grid; grid-template-columns: minmax(0, 1fr) 52px 78px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(var(--cream-rgb),.07); transition: opacity .35s; }
.rg-conds code { color: var(--cream, #f1ebe0); }
.rg-conds .rg-v { text-align: right; font-size: 13px; }
.rg-conds .rp-tag, .rg-gr .rp-tag, .rg-test-row .rp-tag { justify-self: end; }
.rg-conds li.is-off { opacity: .55; }
.rg-conds li.is-off code, .rg-conds li.is-off .rg-v { text-decoration: line-through; color: var(--muted, #a9b1c2); }
.rg-out { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; }
.rg-test { display: grid; gap: 10px; }
.rg-test.is-bad { border-color: var(--rp-bad); }
.rg-test-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; align-items: center; font-size: 13px; }

/* Paid-run gate */
.rg-gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.rg-gate-l { display: grid; gap: 12px; }
.rg-hashes { display: grid; gap: 4px; }
.rg-hr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; margin: 0 -8px; padding: 7px 8px; border-radius: 6px; transition: background .4s, box-shadow .4s; }
.rg-hr .rg-h { margin: 0; overflow-wrap: anywhere; }
.rg-hr .rp-mono { color: var(--cream, #f1ebe0); }
.rg-hr > :last-child { grid-column: 1 / -1; justify-self: start; margin: 0; }
.rg-hr.is-active { background: rgba(var(--brass-rgb),.08); box-shadow: inset 2px 0 var(--brass, #e9b46c); }
.rg-gr { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(var(--cream-rgb),.07); font-size: 13px; }
.rg-g.is-bad { border-color: var(--rp-bad); }
.rg-gout { margin-top: 10px; }
.rg-verdict { display: block; color: var(--rp-bad); font-size: 13px; margin-bottom: 4px; }
.rg-pane.ok .rg-verdict { color: var(--rp-ok); }
.rg-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rg-ladder .rp-label { margin: 0 4px 0 0; }
.rg-rung { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(var(--cream-rgb),.14); color: var(--muted, #a9b1c2); transition: color .4s, border-color .4s, opacity .4s; }
.rg-ladder[data-state="allowed"] .rg-rung { color: var(--rp-ok); border-color: rgba(156,200,164,.55); }
.rg-ladder[data-state="blocked"] .rg-rung { opacity: .45; }

@media (max-width: 600px) {
  .rg-live, .rg-gate, .rg-chk { grid-template-columns: minmax(0, 1fr); }
  .rg-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-img-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rg-table th, .rg-table td { padding: 5px 4px; }
  .rg-table tbody th { padding-left: 6px; }
  .rg-thumb { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
  .rg-conds li { grid-template-columns: minmax(0, 1fr) 44px 72px; gap: 6px; }
  .rg-chk, .rg-test, .rg-g, .rg-hashes { padding: 10px 11px; }
  .rg-test-row { grid-template-columns: minmax(0, 1fr) 80px; }
}