/* The barbell rating: a question, a barbell and a word, on a white page. The bar is graphite steel with chrome
   sleeves, the plates are rubber, warmer and darker for each step of effort; while choosing, the empty places for the plates
   show as a pale silhouette. The script reads the colours from here. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #17191d;           /* the question, the word */
  --muted: #8b9099;         /* the thanks, the hint before a pick */
  --steel: #2f343c;         /* the bar's shaft */
  --steel-light: #9aa1ab;   /* its highlight and the knurling */
  --chrome: #b8bdc5;        /* the sleeves and the fixed collars */
  --chrome-light: #f5f6f8;
  --chrome-dark: #69707a;
  --ghost: #eceef2;         /* the pale places for the plates, while choosing */
  --plate-1: #f5c443;       /* the lightest load: yellow */
  --plate-2: #f39232;       /* orange */
  --plate-3: #e95a2c;       /* vermilion */
  --plate-4: #c9302e;       /* red */
  --plate-5: #6b1c2a;       /* the heaviest: oxblood */
  --collar: #2a2e35;        /* the lock collars */
  --lever: #ff6a1c;         /* their levers */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Anybody Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.lift {
  display: grid;
  justify-items: center;
  width: min(380px, 100%);
  margin: 0;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.lift__ask {
  margin: 0 0 4px;
  font-size: clamp(22px, 6.2vw, 26px);
  font-weight: 700;
  font-stretch: 74%;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- the bar */
.lift__bar {
  position: relative;
  width: min(360px, 100%);
  touch-action: pan-y;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lift__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lift__shaft,
.lift__sleeve,
.lift__knurl,
.lift__shine,
.lift__shade,
.lift__gleam {
  fill: none;
  stroke-linejoin: round;
}

.lift__shaft {
  stroke: var(--steel);
}

.lift__knurl {
  stroke: var(--steel-light);
  stroke-dasharray: 0.7 1.1;
  opacity: 0.55;
}

.lift__gleam {
  stroke: var(--steel-light);
  opacity: 0.75;
}

.lift__sleeve {
  stroke: var(--chrome);
}

.lift__shine {
  stroke: var(--chrome-light);
}

.lift__shade {
  stroke: var(--chrome-dark);
}

/* the real control: a range input lying over the bar, see-through; the hand works on the bar, the keyboard and
   screen readers on the input */
.lift__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* the keyboard's ring: round the bar */
.lift__ring {
  position: absolute;
  inset: 8px -8px;
  border-radius: 20px;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  pointer-events: none;
}

.lift__range:focus-visible + .lift__ring {
  opacity: 1;
}

/* ---------------------------------------------------------------- the word and the thanks */
.lift__word {
  height: 34px;
  margin: 2px 0 0;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.01em;
}

.lift__word span {
  display: inline-block;
  font-weight: 600;
  transform-origin: 50% 100%;
}

.lift__word .is-idle {
  color: var(--muted);
  font-weight: 450;
  font-stretch: 100%;
  font-size: 20px;
}

.lift__thanks {
  min-height: 22px;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 460;
  color: var(--muted);
}