/* The tally counter: a minimal type piece. A white page, the words Checked in and Room holds 25 in small print, one
   big light number with a minus and a plus beside it, and under them the same count kept as tally marks standing on
   a hairline that ends at a thin wall. The stroke across every five is the only colour. */
:root {
  --page: #ffffff;      /* the page */
  --ink: #141414;       /* the number, the marks and the signs on the buttons */
  --muted: #8b8780;     /* the small print */
  --rule: #d6d3cc;      /* the hairline the marks stand on, and the wall */
  --ring: #e4e1da;      /* the buttons' thin ring at rest */
  --accent: #2a3cff;    /* the stroke across every five, a note at a limit, the focus ring */
  --size: 96px;         /* how big the number is */
  --width: 440px;       /* how wide the whole counter is */
}

* {
  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: 'Roboto Flex Variable', 'Helvetica Neue', Arial, 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 counter */
.tally {
  position: relative;
  width: min(var(--width), 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* the number never gets so big that the row is wider than a phone */
  --fs: min(var(--size), 25vw);
}

/* the script shows it once the typeface is there, so the number never swaps face under the eye */
.tally.is-waiting {
  visibility: hidden;
}

.tally__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.tally__label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-variation-settings: 'wght' 560, 'wdth' 112;
  letter-spacing: 0.16em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tally__note {
  position: relative;
  display: grid;
  justify-items: end;
  height: 18px;
  margin: 0;
  overflow: hidden;
}

.tally__note > span {
  grid-area: 1 / 1;
  color: var(--muted);
  font-size: 13px;
  font-variation-settings: 'wght' 430, 'wdth' 100;
  line-height: 18px;
  white-space: nowrap;
}

.tally__note > .is-limit {
  color: var(--accent);
  font-variation-settings: 'wght' 560, 'wdth' 100;
}

.tally__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

/* ---------------------------------------------------------------- the number */
.tally__value {
  position: relative;
  min-width: 0;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: 12px;
}

.tally__value:focus {
  outline: none;
}

.tally__value::after {
  content: '';
  position: absolute;
  inset: 4% 0 7%;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tally__value:focus-visible::after {
  opacity: 1;
}

/* the figures, one cell each: a cell is as wide as a zero (the script measures it), and a figure changing in it
   squeezes out on the width axis while the next one opens up */
.tally__num {
  display: flex;
  height: calc(var(--fs) * 1.02);
  font-size: var(--fs);
  font-kerning: none;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.tally__cell {
  display: grid;
  justify-items: center;
  overflow: visible;
}

.tally__fig {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  font-variation-settings: 'wght' var(--wg, 280), 'wdth' var(--wd, 100);
  will-change: opacity;
}

/* ---------------------------------------------------------------- minus and plus */
.tally__keys {
  flex: none;
  display: flex;
  gap: 10px;
}

.tally__btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* a larger target for a finger, without a larger drawing */
.tally__btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.tally__btn:focus {
  outline: none;
}

/* the wrapper is pressed by the CSS, the SVG inside is nudged by the script: one element each */
.tally__btn-in {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 70%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.tally__btn svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tally__ring {
  fill: none;
  stroke: var(--ring);
  stroke-width: 1;
  transition: stroke 0.3s, stroke-width 0.3s;
}

.tally__icon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke-width 0.25s, opacity 0.25s;
}

@media (hover: hover) {
  .tally__btn:hover .tally__ring {
    stroke: var(--ink);
  }

  .tally__btn:hover .tally__icon {
    stroke-width: 2;
  }
}

/* pressed, the button gives a little, lower than its middle, like a soft key */
.tally__btn.is-pressed .tally__btn-in {
  transform: scale(0.93, 0.88);
  transition-duration: 0.07s;
  transition-timing-function: ease-out;
}

.tally__btn.is-pressed .tally__ring {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.tally__btn.is-pressed .tally__icon {
  stroke-width: 2.4;
}

.tally__btn:focus-visible .tally__ring {
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* at a limit the button is still there to press, but it only says no */
.tally__btn[aria-disabled='true'] {
  cursor: default;
}

.tally__btn[aria-disabled='true'] .tally__icon {
  opacity: 0.28;
}

.tally__btn[aria-disabled='true'] .tally__ring {
  stroke: var(--ring);
  stroke-width: 1;
}

/* ---------------------------------------------------------------- the marks */
.tally__field {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 8px;
  overflow: visible;
}

.tally__base,
.tally__wall {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  stroke-linecap: round;
}

.tally__wall {
  transition: stroke 0.9s ease-out, stroke-width 0.9s ease-out;
}

.tally__wall.is-hit {
  stroke: var(--accent);
  stroke-width: 1.5;
  transition-duration: 0.08s;
}

.tally__mark {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.tally__mark.is-slash {
  stroke: var(--accent);
}