.replay-control {
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.7rem;
  background: #fff;
  color: #1c1917;
  font: 600 0.75rem/1.25 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.replay-control:hover:not(:disabled) { border-color: #1c1917; background: #f4f2ec; transform: translateY(-1px); }
.replay-control-primary { border-color: #1c1917; background: #1c1917; color: #fff; }
.replay-control-primary:hover:not(:disabled) { background: #44403c; color: #fff; }
.replay-control:disabled { opacity: .45; cursor: not-allowed; }
.replay-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.replay-steps li { min-width: 0; }
.replay-steps button {
  width: 100%; min-height: 52px; padding: .6rem; text-align: left;
  border-radius: .7rem; border: 1px solid #e8e5df; background: #faf8f5;
  color: #57534e; font: 600 .72rem/1.2 'Plus Jakarta Sans', sans-serif;
  cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease;
}
.replay-steps button span { display: block; font: 500 .64rem/1.1 'JetBrains Mono', monospace; margin-bottom: .25rem; }
.replay-steps button[aria-current="step"] { border-color: #1c1917; background: #1c1917; color: #fff; }
.replay-steps button:hover:not([aria-current="step"]) { border-color: #1c1917; }
.replay-stage.replay-enter { animation: replay-enter 230ms ease-out both; }
@keyframes replay-enter { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.replay-kicker { font: 600 .65rem/1.4 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: #8a4a24; }
.replay-heading { margin-top: .35rem; font: italic 400 clamp(1.5rem, 3vw, 2.3rem)/1.15 'Newsreader', Georgia, serif; color: #1c1917; }
.replay-copy { margin-top: .8rem; max-width: 68ch; font-size: .84rem; line-height: 1.65; color: #57534e; }
.replay-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1.4rem; }
.replay-fact { border: 1px solid #e8e5df; border-radius: .75rem; background: #faf8f5; padding: .85rem; min-width: 0; }
.replay-fact dt { font: 600 .62rem/1.4 'JetBrains Mono', monospace; text-transform: uppercase; color: #78716c; }
.replay-fact dd { margin-top: .35rem; color: #1c1917; font-size: .82rem; overflow-wrap: anywhere; }
.replay-address { font: 500 .7rem/1.55 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
.replay-link { color: #215b9e; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.replay-link:hover { color: #173d68; }
.replay-evidence-list { display: grid; gap: .6rem; margin-top: 1.25rem; }
.replay-evidence-item { border-left: 3px solid #a8a29e; padding: .35rem .75rem; background: #faf8f5; }
.replay-evidence-item strong { display: block; color: #1c1917; font-size: .78rem; }
.replay-graph { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; gap: .5rem; margin-top: 1.3rem; }
.replay-node { width: 100%; min-height: 112px; padding: .85rem; border: 1px solid #d6d3d1; border-radius: .85rem; background: #faf8f5; text-align: left; cursor: pointer; }
.replay-node[aria-pressed="true"] { border: 2px solid #1c1917; background: #f4f2ec; }
.replay-node .replay-node-label { display: block; font: 700 .68rem/1.4 'Plus Jakarta Sans', sans-serif; color: #1c1917; }
.replay-node .replay-address { display: block; margin-top: .45rem; color: #57534e; }
.replay-connector { text-align: center; color: #78716c; font: 600 .6rem/1.4 'JetBrains Mono', monospace; }
.replay-connector span { display: block; font-size: 1.35rem; }
.replay-graph-detail { margin-top: .8rem; padding: .9rem; border: 1px solid #e8e5df; border-radius: .75rem; background: #fff; font-size: .75rem; line-height: 1.6; color: #57534e; overflow-wrap: anywhere; }
.replay-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.replay-legend span { border: 1px solid #e8e5df; border-radius: 999px; padding: .3rem .55rem; color: #57534e; font: 500 .64rem/1.3 'JetBrains Mono', monospace; }
.replay-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid #e8e5df; }
.replay-check:last-child { border-bottom: 0; }
.replay-check strong { font-size: .8rem; color: #1c1917; }
.replay-check p { margin-top: .25rem; font-size: .72rem; line-height: 1.5; color: #57534e; }
.replay-impact { font: 700 .7rem/1.3 'JetBrains Mono', monospace; white-space: nowrap; }
.replay-impact.fail { color: #9a3412; }
.replay-meter { height: .55rem; border-radius: 999px; background: #e8e5df; overflow: hidden; }
.replay-meter-fill { height: 100%; background: #9a3412; border-radius: inherit; transition: width 230ms ease; }
.replay-verdict { display: inline-block; padding: .45rem .7rem; border-radius: 999px; font: 700 .7rem/1.2 'JetBrains Mono', monospace; }
.replay-verdict.pass { color: #166534; background: #dcfce7; }
.replay-verdict.flag { color: #854d0e; background: #fef3c7; }
.replay-verdict.block { color: #9a3412; background: #ffedd5; }
@media (max-width: 640px) {
  .replay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replay-steps li:last-child { grid-column: span 2; }
  .replay-facts { grid-template-columns: minmax(0, 1fr); }
  .replay-graph { grid-template-columns: minmax(0, 1fr); }
  .replay-connector { padding: .15rem; }
  .replay-connector span { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .replay-stage.replay-enter { animation: none; }
  .replay-meter-fill, .replay-control, .replay-steps button { transition: none; }
}
/* Responsive SVG evidence, with the same controls available as full-size HTML buttons. */
.evidence-network { min-width: 0; margin-top: 1rem; padding: .6rem; border: 1px solid #e8e5df; border-radius: 1rem; background: radial-gradient(#d6d3d166 1px, transparent 1px) 0 0 / 16px 16px #faf8f5; }
.evidence-network-svg { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; }
.graph-address { cursor: pointer; }
.graph-address circle { fill: #fff; stroke: #a8a29e; stroke-width: 2; transition: stroke 180ms, fill 180ms; }
.graph-address.sender circle { stroke: #215b9e; }
.graph-address[aria-pressed="true"] circle, .graph-address:focus-visible circle { fill: #f1eee7; stroke: #1c1917; stroke-width: 4; }
.graph-address-label { font: 600 14px 'Plus Jakarta Sans', sans-serif; fill: #44403c; }
.graph-address-short { font: 600 16px 'JetBrains Mono', monospace; fill: #1c1917; }
.graph-edge { cursor: pointer; outline: none; }
.graph-edge-line { stroke-width: 2.5; stroke: #267365; }
.graph-edge-hit { stroke: transparent; stroke-width: 22; }
.graph-edge[aria-pressed="true"] .graph-edge-line, .graph-edge:focus-visible .graph-edge-line { stroke-width: 5; }
.graph-edge.proposed .graph-edge-line { stroke: #78716c; stroke-dasharray: 8 6; }
.graph-edge.incoming .graph-edge-line { stroke: #996228; }
.graph-edge.configured .graph-edge-line { stroke: #6a567d; }
.graph-edge.similarity .graph-edge-line { stroke: #b45309; stroke-dasharray: 3 5; }
.graph-arrow.observed { fill: #267365; }
.graph-arrow.proposed { fill: #78716c; }
.graph-arrow.incoming { fill: #996228; }
.graph-arrow.configured { fill: #6a567d; }
.graph-arrow.similarity { fill: #b45309; }
.graph-node-controls, .graph-edge-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.graph-node-controls .replay-control, .graph-edge-controls .replay-control { white-space: normal; text-align: left; }
.graph-node-controls [aria-pressed="true"], .graph-edge-controls [aria-pressed="true"] { border-color: #1c1917; background: #f1eee7; }
.graph-key::before { content: ''; display: inline-block; width: 18px; margin-right: 5px; border-top: 2px solid #267365; vertical-align: middle; }
.graph-key.proposed::before { border-top: 2px dashed #78716c; }
.graph-key.incoming::before { border-color: #996228; }
.graph-key.configured::before { border-color: #6a567d; }
.graph-key.similarity::before { border-top: 2px dotted #b45309; }
.replay-progress-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .72rem; color: #57534e; }
.replay-progress-row progress { flex: 1 1 140px; min-width: 80px; height: 6px; accent-color: #8a4a24; }
.replay-progress-row label:first-child { flex: 1 1 190px; }
@media (max-width: 640px) {
  .evidence-network { padding: .4rem; }
  .evidence-network-svg { max-height: 500px; }
  .graph-address-label { font-size: 15px; }
  .graph-node-controls, .graph-edge-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .replay-progress-row label:first-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .graph-edge-line { animation: edge-reveal 420ms ease-out both; }
  @keyframes edge-reveal { from { opacity: 0; } to { opacity: 1; } }
}