/* The Speed Lab (lab.js): a sports lab at night. The treadmill sits in the dark and the scroll through the lab's
   section is its throttle. One dark look, by design.
   Every selector is scoped under .speed-lab, the section a page mounts the lab in, and the lab's custom properties
   are its own, set on that section, so nothing leaks into the page or out of it. A page with a bar fixed over the
   top of the window sets --clear-top on the section to the bar's height (spec.css does, for the site's header), and
   the lab's own bar and stats stand below it. A page can set --side on the section too: how far the lab's bar,
   throttle, readout and stats stand in from the stage's sides, the gutter if it does not (spec.css sets 0, to line
   them up with its margins). The lab lays out by its stage's width, not the window's (a container query), as a
   page may set the stage narrower than the window.
   The type is the page's own: KH Teka (base.css) in its one weight, at the size and on the line of the page's
   text, which the section inherits from the page, so the hierarchy is colour. The speed is the one display
   figure, and the stats (P), a tool for checking a device, keep a small size of their own. Figures are set
   tabular where a number changes every frame, so it holds still; elsewhere they stay proportional, as its tabular
   figures space the point and the comma as wide as a digit. */

/* The section is the scroll runway: its length is the throttle's travel */
.speed-lab {
  --runway: 300vh; /* the section's height; the belt runs from stopped to top speed over all of it but the last window */
  --steel: #8a8f99;
  --mist: #c6c9ce;
  --white: #f3f4f5;
  --lime: #91ff00;
  --rule: rgba(243, 244, 245, 0.14);
  --gutter: clamp(16px, 3cqi, 40px); /* 3% of the stage's width, from 16 to 40 px */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --throttle: 0; /* share of the scroll travelled, set by the script */

  position: relative;
  height: var(--runway);
  color: var(--mist);
  -webkit-tap-highlight-color: transparent;
}

.speed-lab [hidden] {
  display: none !important;
}

.speed-lab .lab {
  container: lab / inline-size;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* The stage stays dark until every shader is compiled and every texture is on the GPU, then the lights come up */
.speed-lab .stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  transition: opacity 1.4s var(--ease-out);
}

.speed-lab .stage.is-lit {
  opacity: 1;
}

.speed-lab .stage.is-turning {
  cursor: grabbing;
}

.speed-lab .bar {
  position: absolute;
  top: calc(var(--clear-top, 0px) + var(--gutter));
  left: var(--side, var(--gutter));
  right: var(--side, var(--gutter));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

/* The lab's name as it is written, Mercurial / Speed Lab, in the lime of the readout's labels */
.speed-lab .brand {
  margin: 0;
  color: var(--lime);
}

.speed-lab .sound {
  pointer-events: auto;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--steel);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.speed-lab .sound[aria-pressed="true"] {
  border-color: rgba(145, 255, 0, 0.45);
  color: var(--lime);
}

.speed-lab .sound:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* The lab readout */
.speed-lab .readout {
  position: absolute;
  top: 50%;
  right: var(--side, var(--gutter));
  width: 15em; /* its widest row, O2 uptake at 60.0 ml/kg/min, with room to spare: 14.2 em */
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.speed-lab .readout > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.speed-lab .readout dt {
  color: var(--lime);
}

.speed-lab .readout dd {
  margin: 0;
  color: var(--mist);
  text-align: right;
}

.speed-lab .readout .speed {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}

.speed-lab .readout .speed dt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speed-lab .readout .speed dt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel);
  transition: background 0.3s;
}

.speed-lab .lab.is-running .readout .speed dt::before {
  background: var(--lime);
  box-shadow: 0 0 10px rgba(145, 255, 0, 0.6);
}

.speed-lab .readout .speed dd {
  line-height: 1;
  color: var(--white);
  text-align: left;
}

/* The speed: the lab's one display figure, as large as a share of the stage allows */
.speed-lab .speed-value {
  font-size: clamp(44px, 5.4cqi, 72px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.speed-lab .readout .speed small {
  margin-left: 10px;
  font-size: inherit;
  color: var(--steel);
}

/* The throttle: how far down the runway the page is */
.speed-lab .throttle {
  position: absolute;
  top: 50%;
  left: var(--side, var(--gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.speed-lab .throttle-track {
  position: relative;
  width: 2px;
  height: 32vh;
  background: var(--rule);
}

.speed-lab .throttle-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: scaleY(var(--throttle));
  transform-origin: 50% 0;
}

.speed-lab .throttle-label {
  color: var(--steel);
}

.speed-lab .hint {
  position: absolute;
  bottom: calc(var(--gutter) + 34px);
  left: 50%;
  margin: 0;
  color: var(--white);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.speed-lab .hint.is-hidden {
  opacity: 0;
}

/* Frame times and render scale, for checking a device: P shows and hides it */
.speed-lab .stats {
  position: absolute;
  top: calc(var(--clear-top, 0px) + var(--gutter) + 52px); /* below the bar, whose sound button is 36 px tall at 18 px */
  left: var(--side, var(--gutter));
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  color: var(--steel);
  pointer-events: none;
}

.speed-lab .fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100% - 2 * var(--gutter)));
  margin: 0;
  text-align: center;
  color: var(--mist);
  transform: translate(-50%, -50%);
}

/* A stage narrower than VIEW.narrow (lab.js): the readout stacks under the athlete */
@container lab (width < 720px) {
  .speed-lab .readout {
    top: auto;
    right: var(--side, var(--gutter));
    bottom: calc(var(--gutter) + 64px);
    left: var(--side, var(--gutter));
    width: auto;
    transform: none;
  }

  .speed-lab .readout > div:not(.speed):not(.stage-row) {
    display: none;
  }

  .speed-lab .speed-value {
    font-size: 44px;
  }

  .speed-lab .throttle {
    display: none;
  }

  .speed-lab .hint {
    bottom: calc(var(--gutter) + 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .speed-lab .hint,
  .speed-lab .sound,
  .speed-lab .readout .speed dt::before {
    transition: none;
  }

  .speed-lab .stage {
    transition-duration: 0.6s;
  }
}