/* Run replay page. Builds on /styles.css variables; no inline styles (CSP). */
:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --good: #2f6b3f;
  --bad: #a3392d;
  --warn: #8a5a12;
  --log-bg: #f1eee7;
  --demo: #5a6f8f;
  --live: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --good: #8fd19e;
    --bad: #f0a093;
    --warn: #e6bf7a;
    --log-bg: #121311;
    --demo: #9fb3d6;
  }
}

.replay-hero { padding-bottom: 32px; }
.replay-hero h1 { max-width: 24ch; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

code, .mono-sm { font-family: var(--mono); font-size: 0.86em; }
code { padding: 1px 5px; background: var(--tag-bg); border-radius: 4px; overflow-wrap: anywhere; }
.mono-sm { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.dim { color: var(--muted); }
h5 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Diagram */
.diagram-wrap { margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.diagram { display: block; width: 100%; height: auto; font-family: var(--sans); }
.diagram-wrap figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.d-zone { fill: none; stroke: var(--border); stroke-width: 1.5; }
.d-zone-untrusted { stroke-dasharray: 6 5; }
.d-zone-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.d-node rect { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.d-node text { font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--text); }
.d-node text.d-sub { font-size: 11.5px; font-weight: 400; fill: var(--muted); }
.d-untrusted rect { stroke: var(--warn); }
.d-external rect { stroke: var(--muted); stroke-dasharray: 3 3; }
.d-human rect { fill: var(--accent); stroke: var(--accent); }
.d-human text, .d-human text.d-sub { fill: var(--accent-text); }
.d-edge path { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.d-edge path.d-loop { stroke: var(--warn); stroke-dasharray: 4 3; }
.d-arrowhead { fill: var(--muted); }

/* Sources legend */
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.source { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid; border-radius: 10px; }
.source p { margin: 0; font-size: 15px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.stage { position: relative; padding-left: 56px; margin-bottom: 28px; }
.dot {
  position: absolute; left: 0; top: 18px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  border-radius: 50%; font-weight: 700; font-size: 15px;
}
.stage-card { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.stage-card h3 { font: 500 23px/1.25 var(--serif); }
.stage-note { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--warn); background: var(--tag-bg); border-radius: 0 6px 6px 0; font-size: 15px; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0 20px; }
.io dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.io dd { margin: 4px 0 0; font-size: 15px; }
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lane { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-top: 3px solid; border-radius: 10px; background: var(--bg); font-size: 15px; }
.lane > p { margin: 0 0 10px; }
.lane ul, .lane ol { margin: 0 0 10px; padding-left: 18px; }
.source-demo, .lane-demo { border-top-color: var(--demo); }
.source-live, .lane-live { border-top-color: var(--live); }
.source-demo h4, .lane-demo h4 { color: var(--demo); }
.source-live h4, .lane-live h4 { color: var(--live); }
.quote { padding-left: 12px; border-left: 3px solid var(--border); }
.not-run { color: var(--muted); font-style: italic; }
.verdict { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.finding { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 6px; background: var(--surface); }
.finding p { margin: 0 0 6px; }
.pr-timeline li + li, .checks li + li, .tests li + li { margin-top: 4px; }
.checks, .tests { list-style: none; padding-left: 0 !important; }

/* Badges */
.badge { display: inline-block; padding: 0 8px; border-radius: 999px; font: 600 12px/20px var(--mono); border: 1px solid; }
.badge.pass { color: var(--good); }
.badge.fail { color: var(--bad); }
.badge.warn { color: var(--warn); }

/* Logs */
.evidence { margin: 10px 0; }
.evidence summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); font-family: var(--mono); }
.evidence summary:hover { color: var(--text); }
.evidence[open] summary { margin-bottom: 6px; }
.log {
  margin: 0; padding: 12px 14px; max-height: 340px; overflow: auto;
  background: var(--log-bg); border: 1px solid var(--border); border-radius: 8px;
  font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
}
.log .good { color: var(--good); }
.log .bad { color: var(--bad); }
.log.source { white-space: pre; }

/* Failure cards */
.failures { display: grid; gap: 20px; }
.failure { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--bad); border-radius: 12px; }
.failure h3 { font: 500 22px/1.25 var(--serif); margin-bottom: 8px; }
.failure > p { margin: 0 0 12px; max-width: 75ch; }
.failure h4 { margin-top: 18px; }
.aside { font-size: 14px; color: var(--muted); }

.table-wrap { overflow-x: auto; margin: 12px 0; }
.events { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.events caption { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.events th, .events td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.events th { font-size: 12px; color: var(--muted); font-weight: 600; }
.events td:nth-child(2) code { white-space: nowrap; }
.events td.num { font-family: var(--mono); white-space: nowrap; color: var(--muted); }
.events td:last-child { overflow-wrap: anywhere; }

/* Method */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.method > div { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 15px; }
.method p { margin: 8px 0 14px; }
.method .log { font-size: 11.5px; white-space: pre-wrap; }

@media (max-width: 860px) {
  .lanes, .io, .sources, .method { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stage { padding-left: 0; }
  .timeline::before, .dot { display: none; }
  .stage-card, .failure { padding: 18px; }
}
@media (max-width: 700px) {
  .diagram-wrap { overflow-x: auto; padding: 14px; }
  .diagram { min-width: 640px; }
}