/* Opaque paper, printed facts and a hand-marked result. */
/* Keep keyboard focus on a tall receipt from scrolling the window title away. */
.window--receipts { overflow: clip; }
.window--receipts .win-body {
  box-sizing: border-box;
  padding: 22px 36px 34px;
}
.receipt-experience { max-width: 380px; margin: 0 auto; }
.win-body .receipt-instruction {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 0 auto 21px; padding: 7px 12px;
  border: 1px dashed #d6d1c4; border-radius: 20px; background: #f8f7f2;
  font-size: 12px; font-weight: 500; line-height: 1.4; color: #696c5e;
}
.receipt-tap { display: none; }
.receipt-stack { display: grid; position: relative; isolation: isolate; margin: 0 5px 6px; }
.receipt-active { grid-area: 1 / 1; align-self: start; position: relative; isolation: isolate; min-width: 0; }
.receipt-sizing { grid-area: 1 / 1; display: grid; visibility: hidden; pointer-events: none; min-width: 0; }
.receipt-sizing .receipt-paper { grid-area: 1 / 1; align-self: start; min-width: 0; }
.receipt-sheets { position: absolute; inset: 3px 0 0; z-index: -1; }
.receipt-sheets::before, .receipt-sheets::after {
  content: ''; position: absolute; inset: 0;
  background: #f6f3e9; border: 1px solid #e2dfd4;
  box-shadow: 0 4px 9px #27291c0b;
  transform: translate(3px, 5px) rotate(1.5deg);
}
.receipt-sheets::after { transform: translate(-2px, 3px) rotate(-1deg); background: #faf8ef; }
.receipt-paper {
  appearance: none; display: block; box-sizing: border-box;
  width: 100%; margin: 0; padding: 22px 25px 28px;
  border: 0; border-top: 1px dashed #c9c6b9; border-radius: 0;
  background: #fffdf5; color: #33372e;
  box-shadow: 0 1px 1px #3b3c2421, 0 7px 22px #3b3c2412;
  text-align: left; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer; touch-action: manipulation;
  transform-origin: 12% 0; -webkit-tap-highlight-color: transparent;
}
.receipt-paper::after {
  content: ''; position: absolute; height: 7px; inset: auto 0 -6px;
  background: linear-gradient(135deg, #fffdf5 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, #fffdf5 25%, transparent 25%) -7px 0;
  background-size: 14px 14px;
}
.receipt-paper { position: relative; }
.receipt-paper:focus-visible { outline: 3px solid #59766c; outline-offset: 6px; }
.receipt-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: .055em; text-transform: uppercase; color: #78796f; }
.receipt-meta>span:last-child { white-space: nowrap; }
.receipt-title { display: block; margin: 17px 0 10px; font-size: 21px; line-height: 1.2; font-weight: 750; letter-spacing: -.045em; }
.receipt-role { display: block; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #626557; }
.receipt-scope { display: block; margin: 18px 0 -7px; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; }
.receipt-results { display: grid; gap: 20px; margin: 23px 0 20px; }
.receipt-results--pair { grid-template-columns: 1fr 1fr; gap: 16px; }
.receipt-result { min-width: 0; }
.receipt-paper mark { position: relative; isolation: isolate; background: none; color: inherit; font-weight: 750; }
.receipt-paper mark::before {
  content: ''; position: absolute; z-index: -1; inset: 20% -5px 1%;
  background: #edea8c; transform: rotate(-2deg);
  clip-path: polygon(1% 8%, 98% 0, 100% 92%, 0 100%);
}
.receipt-result>mark { display: table; font-size: 42px; line-height: 1.2; letter-spacing: -.07em; }
.receipt-result>mark.receipt-result--words { font-size: 29px; }
.receipt-result>span { display: block; margin-top: 9px; font-size: 12px; line-height: 1.5; max-width: 27ch; }
.receipt-results--pair .receipt-result>mark { font-size: 36px; }
.receipt-lines { display: grid; gap: 10px; border-top: 1px dashed #c6c7b9; padding-top: 17px; }
.receipt-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; }
.receipt-line>span { color: #646757; }
.receipt-line>b, .receipt-line>mark { max-width: 18ch; text-align: right; font-weight: 650; }
.receipt-line>mark::before { background: #d7e6ad; }
.receipt-stamp { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px dashed #c6c7b9; text-align: center; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .025em; }
.receipt-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.receipt-paper--torn { animation: receipt-tear .46s cubic-bezier(.36, .01, .78, .6) forwards; pointer-events: none; }
@keyframes receipt-tear {
  20% { transform: translate(0, 5px) rotate(-3deg); }
  55% { opacity: 1; }
  100% { transform: translate(25px, 90px) rotate(12deg); opacity: 0; }
}
@media (max-width: 719px) {
  .window--receipts .win-body { padding: 18px 20px 30px; }
  .receipt-paper { padding: 20px 21px 26px; }
}
@media (hover: none), (pointer: coarse), (max-width: 719px) {
  .receipt-click { display: none; }
  .receipt-tap { display: inline; }
}
@media (max-width: 360px) {
  .window--receipts .win-body { padding: 17px 12px 28px; }
  .receipt-paper { padding: 18px 17px 24px; }
  .receipt-title { font-size: 20px; }
  .receipt-meta { font-size: 8px; gap: 8px; }
  .receipt-line { gap: 10px; font-size: 11px; }
  .receipt-results--pair .receipt-result>mark { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-paper--torn { animation: none; }
}