/* The inflatable button: a pill of glossy pink vinyl with cream letters, on a white page. The vinyl is a canvas the
   script paints from a height map; the colours of the plastic are read from here. */
:root {
  --page: #ffffff;          /* the page */
  --vinyl: #ff4f74;         /* the vinyl of the pill */
  --letters: #fff4e4;       /* the vinyl of the puffed letters */
  --ink: #1b1820;           /* the ring of the focus */
  --muted: #8b8590;         /* the line under the button */
  --done: #1f9d63;          /* the line once you are on the list */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

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

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

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 56px 16px;
}

.float {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: 26px 22px 10px;
}

/* the pill and its shadow on the page; the script lifts, squashes and hops this box */
.float__body {
  position: relative;
  transform-origin: 50% 100%;
}

/* the soft shadow on the page: it spreads and fades as the pill fills and floats up */
.float__shadow {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: -14px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 20, 50, 0.32), rgba(120, 20, 50, 0.12) 60%, rgba(120, 20, 50, 0));
  filter: blur(4px);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.float__btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.float__vinyl {
  display: block;
  pointer-events: none;
}

/* the focus of the keys: a ring round the pill, a little away from it */
.float__btn:focus-visible {
  box-shadow: 0 0 0 4px var(--page), 0 0 0 6.5px var(--ink);
}

.float__btn[aria-disabled='true'] {
  cursor: default;
}

/* the line under the button: grey, then green once you are on the list */
.float__note {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 450;
  text-align: center;
  transition: color 0.3s;
}

.float.is-done .float__note {
  color: var(--done);
}