/* The run replay player (player.js), on whichever page mounts it: /replay/ and /sts2/. It takes the page's colour
   tokens (--surface, --sunken, --border, --rule, --ink, --muted, --accent, --accent-ink, --ok, --alert) and fonts
   (--display, --mono); a page whose tokens are named otherwise maps them onto these around the player. */
.rp-player { display:flex; flex-direction:column; gap:16px; min-width:0; }
#player-body { display:flex; flex-direction:column; gap:16px; min-width:0; }
#player-body[hidden] { display:none; }
.rp-runhead { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; }
.rp-runhead h3 { font-family:var(--display); font-size:20px; margin:0; }
.rp-runhead .rp-meta { font-family:var(--mono); font-size:11.5px; color:var(--muted); }

.rp-stage { padding:18px 20px; display:flex; flex-direction:column; gap:14px; min-height:270px; }
.rp-stage .rp-where { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-ink); }
.rp-stage .rp-headline { font-family:var(--display); font-size:clamp(18px,3.2vw,25px); font-weight:600; line-height:1.25; }
.rp-stage .rp-kindtag { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
                        color:var(--muted); border:1px solid var(--border); border-radius:2px; padding:2px 7px; align-self:flex-start; }

.rp-vitals { display:flex; flex-wrap:wrap; gap:18px; }
.rp-vital { display:flex; flex-direction:column; gap:4px; min-width:130px; }
.rp-vital .rp-vk { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.rp-vital .rp-vv { font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; }
.rp-bar { height:5px; background:var(--sunken); border-radius:3px; overflow:hidden; display:block; }
.rp-bar i { display:block; height:100%; background:var(--accent); }
.rp-bar.hp i { background:var(--ok); }
.rp-bar.hp.low i { background:var(--alert); }

.rp-votes { display:flex; flex-direction:column; gap:7px; }
.rp-vote { display:grid; grid-template-columns: 1fr auto; gap:4px 10px; align-items:center; }
.rp-vote .rp-vl { font-size:14px; }
.rp-vote .rp-vn { font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rp-vote .rp-track { grid-column:1 / -1; height:6px; background:var(--sunken); border-radius:3px; overflow:hidden; }
.rp-vote .rp-track i { display:block; height:100%; background:var(--rule); }
.rp-vote.won .rp-vl { font-weight:600; }
.rp-vote.won .rp-track i { background:var(--accent); }
.rp-hint { font-size:12.5px; color:var(--muted); }

pre.rp-view {
  margin:0; font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--sunken);
  border-radius:3px; padding:10px 12px; overflow-x:auto; max-height:150px;
}

.rp-transport { display:flex; flex-direction:column; gap:10px; padding:14px 16px; }
.rp-scrub { display:flex; align-items:center; gap:12px; }
.rp-scrub input[type="range"] { flex:1; accent-color:var(--accent); min-width:120px; }
.rp-transport .rp-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rp-transport .rp-pos { font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

.rp-timeline { display:flex; flex-direction:column; max-height:320px; overflow-y:auto; }
.rp-tl {
  display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:baseline;
  padding:7px 13px; border-bottom:1px solid var(--border); background:transparent; border-left:3px solid transparent;
  cursor:pointer; text-align:left; font:inherit; color:inherit; border-top:0; border-right:0; width:100%;
}
.rp-tl:hover { background:var(--sunken); }
.rp-tl[aria-current="true"] { background:var(--sunken); border-left-color:var(--accent); }
.rp-tl .rp-seq { font-family:var(--mono); font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rp-tl .rp-k { font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.rp-tl .rp-l { font-size:13.5px; }
.rp-tl.decision .rp-k { color:var(--accent-ink); }
.rp-tl.achievement .rp-k { color:var(--ok); }
.rp-h2 { font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
         color:var(--muted); margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--rule); }
.rp-empty { padding:28px 20px; color:var(--muted); font-size:14px; }