/* The receipt: a thermal till receipt from a 58 mm printer, 32 characters
   wide in Till Mono, a bitmap face made for receipts, one font pixel to a
   printer dot. The ink is uneven: lighter down one side, a faded band, specks,
   and a dead dot in the head leaving a thin line down the whole slip. The
   paper curls a little and is torn on the serrated bar at both ends. It
   prints in when the view opens and tears off when the shop's logo (the
   crystal) is tapped. */
@font-face {
  font-family: "Till Mono";
  src: url("fonts/TillMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Till Mono";
  src: url("fonts/TillMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root { --counter: #e5e5e1; }
@media (prefers-color-scheme: dark) { :root { --counter: #171716; } }
/* The space above the receipt matches the space beside it, up to 48px. */
.view-receipt { --dot: 1px; --receipt-top: clamp(16px, (100vw - 304 * var(--dot)) / 2, 48px); position: relative; display: grid; justify-items: center; align-items: start; padding: var(--receipt-top) 16px 48px; background: var(--counter); }
/* The printer's slot is the foot of the screen: what hasn't come out of it
   yet is cut off there, so the page doesn't grow while the receipt prints.
   On a text page the slip sits in a slot of its own, at least a screen tall. */
.stage > .view-receipt, .receipt-slot { overflow: clip; overflow-clip-margin: 48px; }
.receipt-slot { min-height: calc(100svh - var(--receipt-top)); }
/* No fading in: the receipt prints. */
.view-receipt.entering { animation: none; }
@media (min-width: 520px) { .view-receipt { --dot: 1.5px; } }

/* The scene behind: a photograph filling the screen and holding still while
   the receipt scrolls over it. On a phone it shows above the receipt too. */
.receipt-scene { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.6s ease-out; }
.receipt-scene.shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .receipt-scene { transition: none; } }
.receipt { position: relative; }

/* One printer dot: a font pixel, as Till Mono is drawn on a 12-pixel em. */
.receipt { --ink: #222226; --paper: #f6f6f2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.2)); }

.receipt-paper {
  position: relative;
  width: calc(304 * var(--dot));
  padding: calc(26 * var(--dot)) calc(24 * var(--dot)) calc(36 * var(--dot));
  color: var(--ink);
  background: var(--paper);
  font: calc(12 * var(--dot)) / calc(16 * var(--dot)) "Till Mono", ui-monospace, monospace;
  text-transform: uppercase;
  mask:
    var(--tear-top) top / 100% calc(10 * var(--dot)) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 20 * var(--dot)) no-repeat,
    var(--tear-bottom) bottom / 100% calc(10 * var(--dot)) no-repeat;
}
.receipt pre, .receipt p { margin: 0; font: inherit; white-space: pre; }
.receipt .receipt-double { font-size: calc(24 * var(--dot)); line-height: calc(28 * var(--dot)); font-weight: 700; }
.receipt-name { margin-bottom: calc(6 * var(--dot)); }
.receipt-reverse { width: fit-content; margin-top: calc(4 * var(--dot)); color: var(--paper); background: var(--ink); }
.receipt .receipt-bold { font-weight: 700; margin-bottom: calc(4 * var(--dot)); }
.receipt .receipt-sentence { white-space: normal; text-align: center; padding: calc(8 * var(--dot)) 0; }

.receipt-logo { display: block; margin: 0 auto calc(10 * var(--dot)); }
.receipt-crystal { display: block; width: calc(42 * var(--dot)); height: calc(47 * var(--dot)); image-rendering: pixelated; }
.receipt-logo:hover .receipt-crystal { transform: rotate(-8deg); transition: transform 0.2s; }
/* Links in the printer's underline mode, two dots thick; pointed at, they
   print in reverse. */
.receipt-link { color: inherit; text-decoration: underline; text-decoration-thickness: calc(2 * var(--dot)); text-underline-offset: calc(2 * var(--dot)); text-decoration-skip-ink: none; }
.receipt-link:hover, .receipt-link:focus-visible { color: var(--paper); background: var(--ink); text-decoration: none; outline: none; }
.receipt .receipt-fine { white-space: normal; text-align: center; line-height: calc(18 * var(--dot)); padding: calc(10 * var(--dot)) 0 calc(14 * var(--dot)); }

/* The other looks, printed on the paper instead of a menu: a coupon cut out
   below the small print, its scissors on the dashed edge. A line pointed at
   prints in reverse, as a link does. */
.receipt-paper .view-toggle { display: none; }
.receipt-paper .view-picker { display: block; text-align: left; white-space: normal; line-height: calc(16 * var(--dot)); }
.receipt-fine + .view-picker { margin-bottom: calc(14 * var(--dot)); }
.receipt-paper .view-coupon { display: block; position: relative; margin-top: calc(16 * var(--dot)); padding: calc(10 * var(--dot)) calc(12 * var(--dot)); border: calc(2 * var(--dot)) dashed var(--ink); }
.view-coupon-heading { display: block; margin-bottom: calc(4 * var(--dot)); font-weight: 700; }
.view-tick {
  display: block; width: fit-content; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: inherit; text-align: left; white-space: pre; cursor: pointer;
}
.view-tick::before { content: "[ ] "; }
.view-tick[aria-current] { font-weight: 700; cursor: default; }
.view-tick[aria-current]::before { content: "[X] "; }
.view-tick span { text-decoration: underline; text-decoration-thickness: calc(2 * var(--dot)); text-underline-offset: calc(2 * var(--dot)); text-decoration-skip-ink: none; }
.view-tick[aria-current] span, .view-tick:is(:hover, :focus-visible) span { text-decoration: none; }
.view-tick:not([aria-current]):is(:hover, :focus-visible) { color: var(--paper); background: var(--ink); outline: none; }
@media (pointer: coarse) { .view-tick { padding-block: calc((44px - 16 * var(--dot)) / 2); } }
/* The scissors, in printer pixels, over a gap in the dashes. */
.view-coupon::before, .view-coupon::after { content: ""; position: absolute; left: calc(8 * var(--dot)); }
.view-coupon::before { top: calc(-6.5 * var(--dot)); width: calc(15 * var(--dot)); height: calc(11 * var(--dot)); background: var(--paper); }
.view-coupon::after {
  top: calc(-4.5 * var(--dot)); left: calc(10 * var(--dot)); width: calc(11 * var(--dot)); height: calc(7 * var(--dot)); background: var(--ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M0 0h3v1H0zM9 0h2v1H9zM0 1h1v1H0zM2 1h1v1H2zM6 1h3v1H6zM0 2h3v1H0zM4 2h2v1H4zM3 3h1v1H3zM0 4h3v1H0zM4 4h2v1H4zM0 5h1v1H0zM2 5h1v1H2zM6 5h3v1H6zM0 6h3v1H0zM9 6h2v1H9z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.barcode { display: block; width: 100%; height: calc(48 * var(--dot)); margin: calc(12 * var(--dot)) 0 calc(4 * var(--dot)); fill: var(--ink); }

/* The ink, fading: paper-coloured veils over the print. */
.receipt-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--dead-dot) - var(--dot)), var(--paper) 0 calc(var(--dead-dot) + var(--dot)), transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.965 0 0 0 0 0.965 0 0 0 0 0.95 -14 0 0 0 4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(transparent 38%, rgb(246 246 242 / 0.32) 44%, rgb(246 246 242 / 0.22) 47%, transparent 53%),
    linear-gradient(90deg, transparent 35%, rgb(246 246 242 / 0.38));
}
/* The curl: soft shading along the slip and in at its edges, over paper and
   ink alike. */
.receipt-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.07), transparent 9%, transparent 88%, rgb(0 0 0 / 0.09)),
    linear-gradient(rgb(0 0 0 / 0.06), transparent 7%, transparent 22%, rgb(0 0 0 / 0.035) 34%, transparent 46%, transparent 68%, rgb(0 0 0 / 0.045) 82%, transparent 92%, rgb(0 0 0 / 0.06));
}

/* Printed: the paper comes up out of the slot a line at a time, the shop's
   name first. */
.receipt.printing { animation: print 1.6s steps(48) both; }
@keyframes print { from { transform: translateY(100svh); } }
/* Taken away, when the crystal is tapped or a link followed: lifted up and
   off the screen, the whole length of it. */
.view-receipt.leaving .receipt, .receipt.taken { animation: taken 0.45s ease-in forwards; }
@keyframes taken { to { transform: translateY(calc(-100% - 100px)) rotate(-4deg); } }

/* The site's other pages are in the receipt's small print instead. */
body[data-view="receipt"] .bottom-line { display: none; }