/* Above the route (z-index 1) and opaque, so while pinned the line passes behind it. */
.run-stage { min-height: 100svh; display: grid; align-content: center; gap: 1rem; z-index: 2; background: var(--bg); }
.run__name { font: 400 clamp(1.75rem, 4vw, 3rem)/1 var(--font-poster); text-transform: uppercase; }
.run__big { font: 400 clamp(4rem, 14vw, 10rem)/0.9 var(--font-poster); color: var(--accent); }
.unit { display: inline-block; }
.run__plot { width: 100%; position: relative; }
.run__svg { width: 100%; height: clamp(180px, 32vh, 320px); display: block; overflow: visible; }
.run__ghost { fill: none; stroke: rgba(242, 242, 234, 0.25); stroke-width: 2; vector-effect: non-scaling-stroke; }
.run__area { fill: var(--acid); opacity: 0.15; }
.run__line { fill: none; stroke: var(--acid); stroke-width: 3; vector-effect: non-scaling-stroke; }
/* The plot SVG stretches (preserveAspectRatio="none"), which would squash a
   circle, so the runner is an HTML dot moved with transforms in plot pixels. */
.run__dot {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px var(--black);
  will-change: transform;
}
.run__stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; }
.run__stats dd { margin: 0; font: 400 clamp(1.5rem, 3.5vw, 2.25rem)/1.1 var(--font-poster); }
.run__time[hidden] { display: none; }
/* The profile is drawn by JS; without it, show the numbers and no empty chart. */
html.no-js .run__plot { display: none; }
@media (max-width: 40rem) {
  .run__stats { display: grid; grid-template-columns: 1fr 1fr; }
  .run__svg { height: 22vh; } /* a tall plot on a narrow screen squashes the profile into spikes */
}