/* Match report pages (/matches/<slug>/) — the .mr scope. */
.mr {
  --ground: #0C0A09;
  --panel: #141110;
  --ink: #EDE7DF;
  --muted: #9A9088;
  --faint: #7A7168;
  --accent: #FF3B1F;
  --escape: #7FB069;
  --rule: #241F1D;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --step: clamp(0.5rem, 1.4vw, 1rem);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.mr * { box-sizing: border-box; }

.mr .wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: calc(var(--step) * 3) 24px calc(var(--step) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 3.5);
}

.mr .report-head { display: flex; flex-direction: column; gap: 0.6rem; }
.mr .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.mr h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  letter-spacing: 0.01em;
  line-height: 0.96;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.mr .standfirst { color: var(--muted); max-width: 62ch; margin: 0; }
.mr .rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.mr .context {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 70ch;
  margin: 0;
}
.mr .context strong { color: var(--ink); }

.mr .finding {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mr .finding p { margin: 0; max-width: 68ch; }
.mr .finding strong { color: var(--ink); }

.mr .compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--step);
}
@media (max-width: 940px) { .mr .compare { grid-template-columns: 1fr; } }

.mr .card {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: calc(var(--step) * 1.6);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.mr .card h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.55rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink);
}
.mr .card h2 .tier {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
}

.mr dl.stats { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
.mr dl.stats dt { color: var(--muted); font-size: 0.82rem; }
.mr dl.stats dd { margin: 0; font-variant-numeric: tabular-nums; }

.mr .outcome { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.mr .row {
  display: flex; align-items: center; gap: 0.6rem;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.mr .row:last-child { border-bottom: 0; }
.mr .who { width: 2.4rem; color: var(--muted); }
.mr .pill {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border: 1px solid currentColor;
}
.mr .pill.escaped { color: var(--escape); }
.mr .pill.dead { color: var(--accent); }
.mr .pill.alive { color: var(--faint); }

.mr .bars { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }
.mr .bar { display: grid; grid-template-columns: 5.5rem 1fr 2.6rem; align-items: center; gap: 0.6rem; }
.mr .bar span:first-child { color: var(--muted); font-size: 0.82rem; }
.mr .bar .track { height: 9px; background: #1E1A18; position: relative; }
.mr .bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--faint); }
.mr .bar.social .fill { background: var(--accent); }
.mr .bar .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.85rem; }

.mr .talk { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.mr .line { display: flex; flex-direction: column; gap: 0.15rem; }
.mr .line .meta { font-size: 0.72rem; color: var(--faint); letter-spacing: 0.08em; }
.mr .line q { color: var(--ink); quotes: none; display: block; padding-left: 0.8rem; border-left: 1px solid var(--rule); }
.mr .line.self q { border-left-color: var(--accent); }

.mr h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  margin: 0;
  color: var(--ink);
}
.mr section { display: flex; flex-direction: column; gap: 0.9rem; }
.mr section p { margin: 0; max-width: 70ch; color: var(--muted); }
.mr section p strong { color: var(--ink); }

.mr .provenance { color: var(--faint); font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.mr a { color: var(--accent); }

/* Ledger table + footnote (added with the seeds-31-32 report). */
.mr .ledger { overflow-x: auto; position: relative; }
/* Scroll affordance: macOS/iOS hide scrollbars until touched, so a clipped
   column edge is the only tell. Right-edge fade signals more content. */
.mr .ledger::after { content: ""; position: sticky; display: block; margin-top: -100%; float: right; width: 28px; height: 100%; right: 0; background: linear-gradient(90deg, transparent, rgba(12,10,9,0.9)); pointer-events: none; }
.mr .ledger table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.mr .ledger th, .mr .ledger td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mr .ledger th { color: var(--faint); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.mr .ledger td:first-child, .mr .ledger th:first-child { text-align: left; }
.mr .ledger td { color: var(--muted); }
.mr .ledger td strong { color: var(--ink); }
.mr .ledger .hl td { color: var(--ink); }
.mr .footnote { color: var(--faint); font-size: 0.78rem; max-width: 75ch; }