/* The wire stepper: how many tickets for a concert. A label on the left and, on the right, a blue pill 60 pixels
   tall with minus, the number and plus; the number is a white wire bent into a digit, drawn by the script. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #15151a;           /* the label */
  --muted: #6d6d78;         /* the note under the label */
  --pill: #2140e8;          /* the stepper */
  --disc: rgba(255, 255, 255, 0.14);   /* the buttons' discs */
  --icon: #ffffff;          /* minus and plus */
  --wire: #ffffff;          /* the wire */
  --strain: #ffcf3d;        /* the wire's colour when it is stretched past a limit */
  --shade: #0f218f;         /* the wire's shadow on the pill */
  --limit: #2140e8;         /* the note when a limit is reached */
}

* {
  box-sizing: border-box;
}

/* quick taps on the buttons never become a double tap that zooms the page */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ---------------------------------------------------------------- the row */
.tickets {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tickets__label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tickets__name {
  font-size: 18px;
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* the note under the label: the script swaps it, sliding, when a limit is reached */
.tickets__note {
  display: grid;
  height: 19px;
  clip-path: inset(0 -16px);
}

.tickets__note-in {
  grid-area: 1 / 1;
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 460;
  line-height: 19px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.tickets__note-in.is-limit {
  color: var(--limit);
  font-weight: 560;
}

/* ---------------------------------------------------------------- the stepper */
.stepper {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 10px 24px -10px color-mix(in srgb, var(--pill) 70%, transparent),
    0 2px 5px -2px color-mix(in srgb, var(--pill) 50%, transparent);
}

.stepper__btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--icon);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.stepper__disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--disc);
  transition: background-color 0.2s ease, opacity 0.3s ease, scale 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.stepper__disc svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .stepper__btn:hover .stepper__disc {
    background: color-mix(in srgb, var(--disc), #ffffff 12%);
  }
}

.stepper__btn:active .stepper__disc {
  scale: 0.88;
  transition: background-color 0.2s ease, opacity 0.3s ease, scale 0.1s ease-out;
}

/* at a limit the button stays pressable (pushing it stretches the wire) but looks spent */
.stepper__btn[aria-disabled='true'] .stepper__disc {
  background: color-mix(in srgb, var(--disc) 45%, transparent);
}

.stepper__btn[aria-disabled='true'] svg {
  opacity: 0.38;
}

.stepper__btn[aria-disabled='true']:active .stepper__disc {
  scale: 0.95;
}

.stepper__btn:focus-visible {
  outline: none;
}

.stepper__btn:focus-visible .stepper__disc {
  box-shadow: 0 0 0 2px var(--pill), 0 0 0 4px var(--wire);
}

/* the number: as wide as one digit, or two; the wire is drawn over it and may stretch out of it */
.stepper__value {
  position: relative;
  align-self: stretch;
  width: 54px;
  border-radius: 14px;
  cursor: default;
  outline: none;
}

.stepper__value:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wire) 80%, transparent);
}

.stepper__wire {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 50.4px;
  margin: -25.2px 0 0 -36px;
  overflow: visible;
  pointer-events: none;
}

.stepper__wire path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stepper__wire .is-wire {
  stroke: var(--wire);
}

.stepper__wire .is-shade {
  stroke: var(--shade);
  stroke-opacity: 0.55;
}

@media (max-width: 380px) {
  .tickets {
    gap: 18px;
  }
}