/* The checkout belt button: a graphite counter on a white page, with the rubber belt along its top, four groceries
   riding it and the reader hanging over it. The counter, the belt, the groceries and the scan line are drawn by
   script.js on a canvas (their colours come from here); the words and the states are CSS. */
:root {
  --page: #ffffff;          /* the page */
  --counter: #2a2f34;       /* the counter, at its top */
  --counter-deep: #121518;  /* the counter, at its foot */
  --belt: #1b1d20;          /* the rubber belt */
  --rib: #3a3e43;           /* the ribs of the belt */
  --steel: #c9d0d6;         /* the steel edge of the counter and the reader's post */
  --ink: #f3f1ec;           /* the words */
  --muted: #a8b0b8;         /* the small words */
  --scan: #ff2c3c;          /* the scan line */
  --paid: #7ee0a1;          /* the tick of Paid */
  --milk: #2f6fd8;          /* the carton of milk */
  --apple: #d9282f;         /* the apple */
  --honey: #f0a321;         /* the jar of honey */
  --lid: #d63a36;           /* the jar's lid */
  --bread: #d99a48;         /* the baguette */
  --focus: #2a2f34;         /* 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(--counter);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, -apple-system, 'Segoe 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: 72px 16px;
}

/* the whole thing: the groceries and the reader stand over the pill, which is the counter */
.till {
  position: relative;
  /* the script sets the width from the room; this is the width before it does */
  width: 330px;
  max-width: calc(100vw - 32px);
  height: 108px;
}

/* the canvas: the counter, the belt, the groceries, the reader; a margin round it for the counter's swell and shadow */
.till__art {
  position: absolute;
  left: -12px;
  top: 0;
  width: calc(100% + 24px);
  height: 136px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the pill */
/* the button is the counter's face: its fill is drawn on the canvas under it, so it can swell and squash with the belt */
.till__btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

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

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

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

/* ---------------------------------------------------------------- the words */
/* two faces on top of each other, in the counter's face under the belt: at rest, and the total */
.till__faces {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  bottom: 0;
  pointer-events: none;
}

.till__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.till__face--sum {
  opacity: 0;
  visibility: hidden;
}

/* the word at rest widens on the typeface's width axis under the pointer */
.till__word {
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 620;
  font-stretch: 100%;
  letter-spacing: -0.008em;
  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);
}

.till__items {
  padding-bottom: 1px;
  font-size: 15px;
  font-weight: 540;
  line-height: 1;
  color: var(--muted);
}

.till__items::before {
  content: '·';
  margin-right: 8px;
}

.till__state {
  display: flex;
  align-items: center;
  gap: 6px;
}

.till__tick {
  width: 0;
  height: 16px;
  fill: none;
  stroke: var(--paid);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Scanning and Paid in the same place; the box takes the width of the one showing */
.till__says {
  display: grid;
  justify-items: start;
  overflow: hidden;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.008em;
  line-height: 1;
}

.till__say {
  grid-area: 1 / 1;
}

.till__say--paid {
  opacity: 0;
  visibility: hidden;
}

.till__dot {
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

/* the total, on rolling digits */
.till__sum {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}

.till__drum {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  text-align: center;
}

.till__col {
  display: grid;
}

/* ---------------------------------------------------------------- under the pointer */
@media (hover: hover) and (pointer: fine) {
  .till__btn:not([aria-disabled='true']):hover .till__word {
    font-stretch: 116%;
    font-weight: 680;
  }
}

/* the keys bring the focus: the word widens as under the pointer */
html[data-using='keys'] .till__btn:focus-visible .till__word {
  font-stretch: 116%;
  font-weight: 680;
}

/* ---------------------------------------------------------------- reduced motion: no widening */
@media (prefers-reduced-motion: reduce) {
  .till__word {
    transition: none;
  }

  html[data-using='keys'] .till__btn:focus-visible .till__word {
    font-stretch: 100%;
    font-weight: 620;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .till__btn:not([aria-disabled='true']):hover .till__word {
    font-stretch: 100%;
    font-weight: 620;
  }
}