/* The adding machine (adding-machine.html), on the home page's price
   slip and the price calculator. A page sets its width, --calc-w, and
   everything in it is measured from that (cqi, a hundredth of it), so
   it is the same drawing at any size. Its line, --calc-line, is set in
   pixels, not drawn to scale, so the tape's edges match the machine's;
   a large machine takes a heavier one.

   The tape comes out of the slot, printed with the sum; the machine is
   drawn over the tape's foot, its keys labelled faintly, its window
   showing the total, and what a card comes to under it.

   A sum is worked out as it appears (below): its keys pressed in turn,
   and the tape and the window following them. Everything is drawn as it
   ends, and the animations only hold it back until its beat, so with
   reduced motion, or none at all, the sum is simply there. */
.calc {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  width: var(--calc-w, 9.5rem);
}
.calc svg * { vector-effect: non-scaling-stroke; }
.calc-machine svg, .calc-tear { stroke-width: var(--calc-line, 2px); }
.calc-keys, .calc-equals { stroke-width: calc(var(--calc-line, 2px) * 0.75); }
.calc p { margin: 0; }
.calc-out {
  display: grid;
  align-items: end;
  width: 70%;
  min-height: 23cqi;
  margin-bottom: -2.6cqi;
  overflow: hidden;
}
.calc-tape { grid-area: 1 / 1; }
.calc-tear { display: block; width: 100%; height: 3.7cqi; overflow: visible; fill: var(--strip); stroke: currentColor; stroke-linejoin: round; }
.calc-tape ol {
  display: grid;
  gap: 0.5cqi;
  margin: -1px 0 0;
  padding: 2cqi 4.5cqi 6cqi;
  background: var(--strip);
  border-inline: var(--calc-line, 2px) solid currentColor;
  list-style: none;
  font: 700 7.9cqi/1.3 var(--display);
  font-stretch: var(--size-stretch);
  font-variant-numeric: tabular-nums;
}
.calc-tape li { display: flex; justify-content: space-between; gap: 5cqi; white-space: nowrap; }
.calc-machine { position: relative; width: 100%; }
.calc-machine svg { display: block; width: 100%; height: auto; overflow: visible; }
.calc-body, .calc-slot { fill: var(--strip); }
.calc-equals { fill: var(--logo-red); stroke: var(--logo-red); }
/* The keys' labels, faint, as worn print on a key. */
.calc-labels text {
  font: 650 5.5px var(--display);
  fill: currentColor;
  fill-opacity: 0.4;
  stroke: none;
  text-anchor: middle;
  dominant-baseline: central;
}
.calc-labels .calc-equals-label { font-size: 7px; fill: var(--strip); fill-opacity: 0.85; }
/* A key pressed: shaded for a moment, over its label. */
.calc-press { fill: currentColor; fill-opacity: 0; stroke: none; }
/* The window, the drawing's 16–84 across and 12–32 down, its figures
   at its right. */
.calc-window {
  position: absolute;
  top: 12cqi;
  left: 16cqi;
  width: 68cqi;
  height: 20cqi;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5cqi;
  font: 700 13cqi/1 var(--display);
  font-stretch: var(--size-stretch);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Each sum's figures stand in one place, right-aligned, each shown in
   its turn (below); as it ends, only the total. */
.calc-window > span { display: grid; justify-items: end; }
.calc-window > span > span { grid-area: 1 / 1; }
.calc-until { opacity: 0; }
/* What a card comes to, kept in its place for one card too, unseen, so
   nothing moves when the number does. */
.calc-under { display: grid; justify-items: center; margin-top: 4cqi; }
.calc-under > p {
  grid-area: 1 / 1;
  white-space: nowrap;
  font: 700 10cqi/1.3 var(--display);
  font-stretch: var(--size-stretch);
  font-variant-numeric: tabular-nums;
}
.calc-unseen { visibility: hidden; }

/* Working it out. A beat is 85ms, long enough to read each figure as
   it is typed, and each thing in the sum has its beat, at-N (machineKey,
   calculator.go): a key is pressed on its beat, and the window shows
   what it typed, from then until the next; the tape feeds its first
   line at the plus's and its second at the equals', a line a quarter of
   a second; what a card comes to arrives with the total. A sum of
   fourteen keys, about the longest there is, is done in 1.5s, and an
   ordinary one, thirteen, in 1.4s. A new sum, chosen before the old is
   done, replaces it and starts from the first beat. */
.at-0 { --at: 0; } .at-1 { --at: 1; } .at-2 { --at: 2; } .at-3 { --at: 3; } .at-4 { --at: 4; }
.at-5 { --at: 5; } .at-6 { --at: 6; } .at-7 { --at: 7; } .at-8 { --at: 8; } .at-9 { --at: 9; }
.at-10 { --at: 10; } .at-11 { --at: 11; } .at-12 { --at: 12; } .at-13 { --at: 13; } .at-14 { --at: 14; }
.at-15 { --at: 15; } .at-16 { --at: 16; } .at-17 { --at: 17; } .at-18 { --at: 18; } .at-19 { --at: 19; }
@media (prefers-reduced-motion: no-preference) {
  .calc { --beat: 85ms; }
  .calc-press { animation: calc-press 0.13s ease-out calc(var(--at) * var(--beat)); }
  /* Paper held in the slot until its line is printed: the first line
     and the tear above it, then the second line and the paper below. */
  .calc-paper { animation: calc-feed-first 0.26s ease-out calc(var(--at) * var(--beat)) backwards; }
  .calc-tape { animation: calc-feed-second 0.26s ease-out calc(var(--at) * var(--beat)) backwards; }
  /* Hidden for as many beats as it waits: a hold, not a delay, so what
     ends shown is shown however the animation is cut short. */
  .calc-from, .calc-under > p { animation: calc-wait calc(var(--at) * var(--beat)) step-end; }
  .calc-until { animation: calc-until calc(var(--at) * var(--beat)) step-end; }
}
@keyframes calc-press { from { fill-opacity: 0.35; } }
@keyframes calc-feed-first { from { transform: translateY(21cqi); } }
@keyframes calc-feed-second { from { transform: translateY(11.5cqi); } }
@keyframes calc-wait { from { opacity: 0; } }
@keyframes calc-until { from { opacity: 1; } }