/* The comb slider: a studio's project budget on a white page, in the minimal style. One hairline comb, one
   vermilion knob and a big figure in Roboto Flex that grows wider with the budget. The script reads the colours of
   the teeth and of the knob from here. */
:root {
  --page: #ffffff;          /* the page, and the thin halo round the knob */
  --ink: #141414;           /* the figure, the teeth already passed, the focus ring */
  --muted: #8e8981;         /* the label, the note and the two ends of the scale */
  --tooth: #d2cec7;         /* the teeth still ahead of the knob */
  --accent: #ff4b1f;        /* the knob */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.budget {
  width: min(460px, 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the label and the note */
.budget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.budget__label {
  font-size: 14px;
  font-weight: 560;
  font-stretch: 100%;
  letter-spacing: 0.005em;
}

/* the note says what the budget usually buys; it changes with a short slide inside its mask */
.budget__note {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 430;
  font-stretch: 96%;
  white-space: nowrap;
}

.budget__note-text {
  display: block;
}

/* ---------------------------------------------------------------- the figure */
/* the script moves the width axis with the knob, from narrow at the smallest budget to wide at the largest, and
   the weight drops a little while the knob runs fast */
.budget__value {
  display: flex;
  align-items: baseline;
  margin: 6px 0 0;
  height: 78px;
  line-height: 1;
  white-space: nowrap;
}

.budget__cur {
  margin-right: 4px;
  color: var(--muted);
  font-size: 34px;
  font-weight: 300;
  font-stretch: 90%;
  translate: 0 -30px;
}

.budget__num {
  font-size: 80px;
  font-weight: 620;
  font-stretch: 70%;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the comb */
.budget__comb {
  position: relative;
  height: 74px;
  margin-top: 4px;
  touch-action: pan-y;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the canvas runs a little past the comb on both sides, for the teeth that lean out at the ends and the knob */
.budget__canvas {
  position: absolute;
  left: -16px;
  top: 0;
  width: calc(100% + 32px);
  height: 100%;
  pointer-events: none;
}

/* the real slider: invisible, out of the pointer's way, but it takes the focus, the keys and the screen reader */
.budget__range {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

@media (hover: hover) {
  .budget__comb.is-near {
    cursor: grab;
  }
}

.budget.is-held .budget__comb {
  cursor: grabbing;
}

/* ---------------------------------------------------------------- the two ends */
.budget__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 460;
  font-stretch: 92%;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .budget__value {
    height: 66px;
  }

  .budget__num {
    font-size: 66px;
  }

  .budget__cur {
    font-size: 28px;
    translate: 0 -25px;
  }
}