/* -- Record page ---------------------------------------------------------- */
.record { padding: 8px 0 8px }
.record-card .rates {
  display: flex;
  gap: 32px;
  margin: 8px 0 4px;
}
.record-card .rates b {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(34px, 6vw, 46px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.record-card .rates div:first-child b { color: var(--primary) }
.record-card .rates b.no-value { color: var(--hairline); font-size: 34px }
.record-card .rates div:last-child b { color: var(--text-muted) }
.record-card .rates span {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.record-card .verdict strong { display: block }
.record-card .versions {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.record-card .versions .heading {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}
.record-card .versions li + li { margin-top: 8px }
.record-card .versions span { display: block; color: var(--text-muted) }
.record-card .versions .active b { color: var(--primary) }
.record-card .versions:has(li:only-child) { margin-top: 8px; padding-top: 8px }
.record-card .versions li:only-child b { font-weight: 400; color: var(--text-muted) }

.entries { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--hairline) }
.entries li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0 10px 12px;
  border-left: 3px solid var(--hairline);
  font-size: 15px;
}
.entries li + li { margin-top: 6px }
.entries .hit { border-left-color: var(--secondary) }
.entries .miss { border-left-color: var(--accent) }
.entries b { font-weight: 600; overflow-wrap: anywhere }
.entries span { grid-column: 1; color: var(--text-muted); font-variant-numeric: tabular-nums }
.entries em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.entries .hit em { color: var(--secondary) }
.entries .miss em { color: var(--accent) }
.entries .more {
  display: block;
  padding: 12px 0 0 12px;
  border-left: none;
  color: var(--text-muted);
  font-size: 14px;
}

/* -- Protocol ------------------------------------------------------------- */
.protocol { padding: 32px 0 64px }
.ghost {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
}
.ghost:hover { background: var(--surface) }
.chain-state { font-size: 15px; color: var(--text-muted); margin: 0 0 16px }
.chain-state.broken { color: var(--accent); font-weight: 600 }

/* The chain drawn as what it is: every event hangs off the one before it. */
.chain { list-style: none; margin: 0; padding: 0 }
.event {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  animation: appear 180ms ease-out both;
  animation-delay: min(calc(var(--card-index, 0) * 60ms), 240ms);
}
.event .link {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.event .link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}
.event:first-child .link::before { top: 18px }
.event:last-child .link::before { bottom: auto; height: 18px }
.event .link code {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-muted);
}
/* Events are not .matchcard, so the stale mark needs its own rule: the chain
   is the one surface a reader trusts, and a cached copy must say so. */
.stale .event .link code { border-color: var(--accent) }
.event .body { padding: 12px 0 20px; min-width: 0 }
.event .body .meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.event .body b { display: block; margin: 4px 0; overflow-wrap: anywhere }
.event .body p { margin: 0; font-size: 15px; color: var(--text-muted); max-width: 68ch }
.event .model { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums }
/* A gap is a missing prediction, and the page shows it rather than hiding it. */
.event.is-gap .link code { border-color: var(--accent); color: var(--accent) }
.event.is-result .link code { border-color: var(--secondary); color: var(--secondary) }
@media (prefers-reduced-motion: reduce) { .event { animation: none } }
.footnote { font-size: 14px; color: var(--text-muted); margin-top: 24px }
/* On a phone the chain column takes room the reasoning needs more. */
@media (max-width: 560px) {
  .event { grid-template-columns: 64px 1fr; gap: 12px }
  .event .body .meta { flex-wrap: wrap }
  .record-card .rates { gap: 24px }
}