/* The grocer's scale button: a grocer's green pill on a white page, with a spring scale in its round left end and the
   brass pan standing just over it. The scale and the bags are drawn by script.js in an SVG (their colours come from
   here); the pill, the words and the states are CSS. */
:root {
  --page: #ffffff;          /* the page */
  --pill: #24493a;          /* the pill, at its top */
  --pill-deep: #142c22;     /* the pill, at its foot */
  --ink: #f6eedb;           /* the words */
  --muted: #a9c0ae;         /* the small words, and the price at rest */
  --chrome-light: #f7f9fa;  /* the rim of the dial and the column, where the light falls */
  --chrome: #b4bcc1;        /* the rim and the column */
  --chrome-dark: #5d676d;   /* the rim and the column, in their shadow */
  --face: #fbf6e8;          /* the dial's enamel face */
  --print: #2b2a26;         /* the ticks and the figures printed on the face */
  --needle: #cf3b2a;        /* the needle */
  --brass-light: #fbe7a8;   /* the pan, where the light falls */
  --brass: #c99a45;         /* the pan */
  --brass-dark: #6e4b16;    /* the pan, in its shadow */
  --kraft: #c0915a;         /* the paper of the bags */
  --kraft-dark: #8a5f33;    /* the paper, in its folds and seals */
  --label: #f3e9d2;         /* the label on the bags */
  --bean: #4a2c1b;          /* the coffee bean printed on the label */
  --focus: #24493a;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--pill);
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe 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;
  place-items: center;
  padding: 72px 16px;
}

.scale {
  display: grid;
  justify-items: center;
}

/* the unit holds the pill and, over its left end, the room the pan and the bags stand in */
.scale__unit {
  position: relative;
  padding-top: 50px;
}

/* ---------------------------------------------------------------- the pill */
.scale__btn {
  position: relative;
  display: block;
  /* the script sets the width from the widest words; this is the width before it does */
  width: 262px;
  max-width: calc(100vw - 32px);
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.scale__btn[aria-disabled='true'] {
  cursor: progress;
}

/* the fill is a layer of its own, so it can swell past the pill with a bounce without moving anything */
.scale__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 140% at 20% 0%, rgba(255, 255, 255, 0.08), transparent 62%),
    linear-gradient(180deg, var(--pill), var(--pill-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(20, 44, 34, 0.22),
    0 14px 28px -14px rgba(20, 44, 34, 0.62);
  transition:
    inset 0.6s cubic-bezier(0.34, 1.9, 0.45, 1),
    box-shadow 0.4s ease;
}

.scale__btn:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 5px;
}

html[data-using='pointer'] .scale__btn:focus-visible {
  outline: none;
}

/* the scale stands over the pill; the pointer goes through it */
.scale__art {
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 104px;
  height: 152px;
  overflow: visible;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the words */
/* three faces on top of each other, right of the dial: at rest, while it weighs, and added */
.scale__faces {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  right: 0;
  pointer-events: none;
}

.scale__face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* as wide as the words, not as the pill is now: the script measures them to size the pill */
  width: max-content;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  white-space: nowrap;
}

.scale__face--two {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

[data-face='busy'],
[data-face='done'] {
  opacity: 0;
  visibility: hidden;
}

/* the words at rest widen on the typeface's width axis under the pointer; the wide copy, invisible and zero high,
   holds their room, so nothing moves beside them */
.scale__word {
  display: inline-grid;
  padding-bottom: 1px;
  font-size: 17.5px;
  font-weight: 640;
  font-stretch: 86%;
  letter-spacing: -0.006em;
  line-height: 1;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.9, 0.45, 1), font-weight 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.scale__word::before {
  content: attr(data-wide);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 100%;
  font-weight: 700;
}

.scale__price {
  padding: 5px 9px 6px;
  border-radius: 999px;
  background: rgba(246, 238, 219, 0.1);
  box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.12);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.scale__small {
  font-size: 11.5px;
  font-weight: 540;
  font-stretch: 94%;
  letter-spacing: 0.012em;
  line-height: 1;
  color: var(--muted);
}

.scale__big {
  font-size: 16.5px;
  font-weight: 650;
  font-stretch: 90%;
  letter-spacing: -0.006em;
  line-height: 1.05;
}

/* figures that change while the needle swings keep their width */
.scale__digits {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- under the pointer */
@media (hover: hover) and (pointer: fine) {
  .scale__btn:not([aria-disabled='true']):hover .scale__fill {
    inset: -2px -7px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      0 1px 2px rgba(20, 44, 34, 0.22),
      0 18px 32px -14px rgba(20, 44, 34, 0.68);
  }

  .scale__btn:not([aria-disabled='true']):hover .scale__word {
    font-stretch: 100%;
    font-weight: 700;
  }

  .scale__btn:not([aria-disabled='true']):hover .scale__price {
    background: rgba(246, 238, 219, 0.17);
    box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.22);
  }
}

/* the keys bring the focus: the words widen as under the pointer */
html[data-using='keys'] .scale__btn:focus-visible .scale__word {
  font-stretch: 100%;
  font-weight: 700;
}

/* ---------------------------------------------------------------- reduced motion: no swelling, no widening */
@media (prefers-reduced-motion: reduce) {
  .scale__fill,
  .scale__word {
    transition: box-shadow 0.3s ease, filter 0.3s ease;
  }

  html[data-using='keys'] .scale__btn:focus-visible .scale__word {
    font-stretch: 86%;
    font-weight: 640;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .scale__btn:not([aria-disabled='true']):hover .scale__fill {
    inset: 0;
    filter: brightness(1.2);
  }

  .scale__btn:not([aria-disabled='true']):hover .scale__word {
    font-stretch: 86%;
    font-weight: 640;
  }
}