/* ---------------------------------------------------------------------------
   The live replay in the Podium section.

   Not a video. The real reads from a real motocross race — 32 chip crossings
   over fourteen minutes — replayed at 17x through a leaderboard that works out
   the positions as they arrive, exactly as the cloud does. Crisp at any size,
   about 50 KB against 20 MB of MP4, and it cannot go stale in the way a
   recording of a screen does.
   --------------------------------------------------------------------------- */
.replay{margin:56px 0 0;background:#12161c;border:1px solid var(--line-d);border-radius:8px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.45)}

.rp-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-d);
  background:rgba(255,255,255,.03)}
.rp-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#4ade80}
.rp-live i{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:rpPulse 1.6s ease-in-out infinite}
@keyframes rpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.rp-event{font-size:13px;color:rgba(255,255,255,.7);font-weight:600}
.rp-clock{margin-left:auto;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:14px;
  font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

.rp-body{display:grid;grid-template-columns:330px 1fr}
.rp-side{padding:16px 18px;border-right:1px solid var(--line-d);min-width:0}
.rp-main{padding:16px 18px;min-width:0}
.rp-cap{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin:0 0 12px}

/* raw reads streaming in at the line */
.rp-reads{height:268px;overflow:hidden;display:flex;flex-direction:column;gap:5px}
.rp-read{display:flex;align-items:baseline;gap:9px;font-family:ui-monospace,Consolas,Menlo,monospace;
  font-size:11.5px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.04);
  border-left:2px solid var(--red);padding:5px 9px;border-radius:0 3px 3px 0;
  animation:rpIn .32s cubic-bezier(.2,.8,.3,1)}
@keyframes rpIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.rp-read b{color:#fff;font-weight:700}
.rp-read span{margin-left:auto;color:rgba(255,255,255,.4);font-size:10.5px}
.rp-flow{margin:12px 0 0;font-size:11.5px;color:rgba(255,255,255,.4)}
.rp-flow span{color:var(--red);font-weight:700}

/* the leaderboard */
.rp-board{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;height:auto;min-height:268px}
.rp-row{display:grid;grid-template-columns:26px 30px 40px minmax(0,1fr) 92px 96px;gap:12px;align-items:center;
  padding:7px 10px;border-radius:4px;background:rgba(255,255,255,.04);font-size:13px;
  transition:background .3s}
.rp-row.is-moved{background:rgba(224,42,32,.16)}
.rp-pos{font-family:var(--disp);font-size:17px;font-weight:700;color:#fff;text-align:center}
/* The leader used to be marked by colouring the position number gold. The medal disc
   does that job now, and this rule was more specific than .rp-medal — so it painted gold
   text on a gold disc and the "1" vanished. */
.rp-bib{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:11.5px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.1);border-radius:3px;padding:2px 0;text-align:center}
/* Two lines: the name, then gender, age band and club in fine print — which is the
   shape of a Podium result row. */
.rp-name{color:rgba(255,255,255,.88);overflow:hidden;line-height:1.2}
.rp-name em{display:block;font-style:normal;color:rgba(255,255,255,.42);font-size:10.5px;
  letter-spacing:.02em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-laps{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);white-space:nowrap}
.rp-gap{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:11.5px;color:rgba(255,255,255,.55);
  white-space:nowrap;min-width:62px;text-align:right}

.rp-foot{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line-d);
  background:rgba(255,255,255,.03)}
.rp-btn{background:none;border:1px solid var(--line-d);border-radius:3px;color:rgba(255,255,255,.75);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;cursor:pointer;transition:.15s;white-space:nowrap}
.rp-btn:hover{border-color:var(--red);color:#fff}
.rp-bar{flex:1;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.rp-bar i{display:block;height:100%;width:0;background:var(--red);border-radius:2px}
.rp-rate{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.34);white-space:nowrap}

.replay figcaption{font-size:13px;color:rgba(255,255,255,.5);background:#0e1116;padding:13px 18px;
  border-top:1px solid var(--line-d);line-height:1.55}

@media(max-width:980px){
  .rp-body{grid-template-columns:1fr}
  .rp-side{border-right:0;border-bottom:1px solid var(--line-d)}
  .rp-reads{height:120px}
  .rp-board{height:auto}
  .rp-rate{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rp-live i{animation:none}
  .rp-read{animation:none}
}

/* race tabs — two real races, because a lap race and a running race look
   nothing like each other and running is the majority case */
.rp-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-d);background:rgba(0,0,0,.25)}
.rp-tabs button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  color:rgba(255,255,255,.45);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 20px;cursor:pointer;transition:.15s}
.rp-tabs button:hover{color:rgba(255,255,255,.8)}
.rp-tabs button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--red)}
.rp-row.is-out{opacity:.45}
.rp-row.is-out .rp-pos{color:rgba(255,255,255,.35)}
/* position change, the moment it happens */
.rp-mv{font-size:11px;font-weight:700;letter-spacing:.02em;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums}
.rp-mv.up{color:#4ade80}
.rp-mv.down{color:#f87171}

/* ---- phone ---- most people will meet this on a phone, so it is framed for one:
   reads on top as a short ticker, board beneath, and the columns that do not
   earn their place on a 360px screen are dropped rather than squeezed. */
@media(max-width:620px){
  .replay{margin-top:36px;border-radius:6px}
  .rp-tabs button{flex:1;min-width:0;padding:11px 4px;font-size:10px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rp-top{padding:11px 13px;gap:9px}
  .rp-event{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rp-live{font-size:9.5px;letter-spacing:.08em}
  .rp-clock{font-size:13px}
  .rp-side,.rp-main{padding:13px}
  .rp-cap{font-size:9.5px;letter-spacing:.1em;margin-bottom:9px}
  .rp-reads{height:82px;gap:4px}
  .rp-read{font-size:10.5px;padding:4px 7px;gap:7px}
  .rp-read span{font-size:9.5px}
  .rp-flow{font-size:10.5px;margin-top:9px}
  .rp-board{height:auto;gap:4px}
  .rp-row{grid-template-columns:20px 26px 34px minmax(0,1fr) auto;gap:8px;padding:8px;font-size:12.5px}
  .rp-pos{font-size:15px}
  .rp-bib{font-size:10px}
  .rp-name em{font-size:9.5px}       /* keeps gender + category on a phone; it is the result */
  .rp-laps{font-size:10px}
  .rp-gap{display:none}              /* the gap is the least useful thing on a narrow screen */
  .rp-foot{padding:10px 13px;gap:10px}
  .rp-btn{padding:6px 11px;font-size:10px}
  .replay figcaption{font-size:12px;padding:11px 13px}
}

/* Podium places. A disc rather than an emoji: emoji medals render differently on
   every platform and at this size read as coloured mush. */
.rp-medal{position:relative;color:#1a1200;border-radius:50%;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.rp-medal.m1{background:linear-gradient(160deg,#f7dd7a,#d9a520)}
.rp-medal.m2{background:linear-gradient(160deg,#e6e9ee,#a9b1bd)}
.rp-medal.m3{background:linear-gradient(160deg,#e8b591,#b3713f)}