/* x429 live line: "ticket roll". Paper, ink, ticket red for the line, paid green for money in a wallet. */
:root {
  --paper: oklch(98.6% 0.003 100);
  --ink: oklch(20.6% 0.008 286);
  --ink-2: oklch(47.8% 0.013 286);
  --rule: oklch(91.4% 0.007 106);
  --ticket: oklch(61.5% 0.201 31);
  --paid: oklch(62.9% 0.155 154);

  --font: "Archivo", "Archivo Fallback", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tw: 168px; /* ticket width */
  --radius: 14px;
  --lift: drop-shadow(0 1px 0 var(--rule)) drop-shadow(0 6px 6px color-mix(in oklch, var(--ink) 14%, transparent));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { overflow-x: clip; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

h1, h2, p, dl, dd, ol, ul { margin: 0; }
h1, h2, .receipt-headline { text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklch, var(--ink) 40%, transparent); }
a:hover { text-decoration-color: var(--ink); }
a:active { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.hex, code { font-family: var(--mono); font-size: 0.88em; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page { max-width: 1264px; margin: 0 auto; padding: 0 32px; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0 0; }
.brand { color: var(--ink-2); font-size: 16px; }
.brand b { color: var(--ink); font-size: 24px; font-weight: 800; font-stretch: 70%; margin-right: 4px; }
.status { color: var(--ink-2); font-size: 16px; text-align: right; }
.live { color: var(--ink); font-weight: 600; }

/* Hero */
.hero { padding: 40px 0 32px; }
.pitch { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 20px; align-items: end; }
h1 {
  grid-column: 1 / -1;
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.9;
  font-weight: 800;
  font-stretch: 68%;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  min-width: 0;
}
.lede { font-size: 21px; line-height: 1.4; max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.award { grid-column: 2; font-size: 15px; color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 10px;
  font-weight: 600; font-size: 17px; text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { background: color-mix(in oklch, var(--ink) 8%, var(--paper)); }
.btn.primary:hover { background: color-mix(in oklch, var(--ink) 84%, var(--paper)); }
.btn:active { transform: translateY(1px); }

/* The line: a strip of red tickets torn off the roll */
.line { margin-top: 40px; }
.line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.line-head h2 { font-size: 20px; font-weight: 700; }
.front-price { color: var(--ink-2); }
.front-price b { color: var(--ink); font-weight: 700; }
.line-note { color: var(--ink-2); margin-top: 8px; }

.strip {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 12px;
  row-gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 4px;
  padding: 0 4px 20px;
  margin: 0 -4px;
}
.serving {
  grid-column: 1; grid-row: 1;
  position: relative;
  width: var(--tw);
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}
.serving::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
  background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.serving-label { font-size: 22px; line-height: 1.1; font-weight: 800; font-stretch: 72%; }
.serving-ticket { font-size: 15px; color: color-mix(in oklch, var(--paper) 78%, var(--ink)); }

.queue { grid-column: 1; grid-row: 2; position: relative; display: flex; gap: 12px; }
.next-slot {
  grid-column: 2; grid-row: 2;
  width: var(--tw);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px;
  border: 2px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-2);
}
.next-pos { font-size: 72px; line-height: 0.9; font-weight: 800; font-stretch: 62%; color: var(--rule); }
.next-text { font-size: 15px; line-height: 1.35; }

.ticket {
  position: relative;
  flex: none;
  width: var(--tw);
  scroll-snap-align: start;
  filter: var(--lift);
}
.ticket.skipper { z-index: 2; }
.paper {
  --notch: 4px;
  --pitch: 12px;
  display: flex; flex-direction: column;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent var(--notch), black calc(var(--notch) + 0.5px)) left / 51% var(--pitch) repeat-y,
    radial-gradient(circle at 100% 50%, transparent var(--notch), black calc(var(--notch) + 0.5px)) right / 51% var(--pitch) repeat-y;
  mask:
    radial-gradient(circle at 0 50%, transparent var(--notch), black calc(var(--notch) + 0.5px)) left / 51% var(--pitch) repeat-y,
    radial-gradient(circle at 100% 50%, transparent var(--notch), black calc(var(--notch) + 0.5px)) right / 51% var(--pitch) repeat-y;
}
.face {
  background: var(--ticket);
  color: var(--paper);
  padding: 12px 16px 8px;
  display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 124px;
}
.pos { font-size: 104px; line-height: 0.82; font-weight: 800; font-stretch: 62%; letter-spacing: -0.02em; }
.pos .hash { font-size: 0.4em; vertical-align: 0.95em; margin-right: 2px; letter-spacing: 0; }
.stub {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px 16px;
  background:
    radial-gradient(circle, var(--ticket) 1.5px, transparent 2px) 0 0 / 8px 4px repeat-x,
    var(--paper);
  font-size: 15px;
  line-height: 1.3;
}
.stub .hex { font-size: 14px; }
.stub .who-note { color: var(--ink-2); }
.stub .ask b { font-weight: 700; }
.nowrap { white-space: nowrap; }

.stamp {
  position: absolute; right: 8px; top: 92px;
  padding: 4px 8px;
  border: 2px solid var(--paid); border-radius: 8px;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  color: var(--paid);
  font-size: 22px; line-height: 1; font-weight: 800; font-stretch: 75%;
  transform: rotate(-8deg);
  opacity: 0;
  pointer-events: none;
}
.stamp.on { animation: stamp 2800ms var(--ease) both; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.35); }
  10% { opacity: 1; transform: rotate(-8deg) scale(1); }
  70% { opacity: 1; transform: rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}

.queue.deal .ticket { animation: deal 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ticket.joining { animation: deal 420ms var(--ease) both; }
@keyframes deal {
  from { opacity: 0; transform: translateY(-20px) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
.ticket.leaving { animation: leave 420ms var(--ease) both; }
@keyframes leave {
  to { opacity: 0; transform: translateY(-28px) rotate(-4deg); }
}

/* Panels: flat, hairline, one level */
.panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.panel h2, .how h2 { font-size: 20px; font-weight: 700; }
.panel-note { color: var(--ink-2); font-size: 15px; }
.panel-empty { color: var(--ink-2); }

/* Last skip, as a receipt */
.receipt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.receipt-meta { color: var(--ink-2); font-size: 15px; }
.receipt-headline { margin: 8px 0 20px; font-size: 36px; line-height: 1.05; font-weight: 800; font-stretch: 70%; }
.receipt-headline.quiet { font-size: 17px; line-height: 1.5; font-weight: 400; font-stretch: 100%; color: var(--ink-2); margin-bottom: 0; }
.payouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); column-gap: 32px; }
.payout {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.payout .who { min-width: 0; overflow-wrap: anywhere; }
.payout .who-note, .earner .who-note { color: var(--ink-2); font-size: 15px; margin-left: 8px; }
.payout .state { color: var(--ink-2); font-size: 15px; }
.payout .amt, .money { color: var(--paid); font-size: 20px; font-weight: 800; font-stretch: 75%; }
.payout .tx { font-size: 14px; color: var(--ink-2); }
.payouts.fresh .payout { animation: land 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes land { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.chip { display: block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper); flex: none; }
.chip rect { fill: var(--ink); }

/* Totals */
.totals { margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.figures dt { color: var(--ink-2); font-size: 15px; }
.fig { font-size: 60px; line-height: 1; font-weight: 800; font-stretch: 66%; margin-top: 8px; white-space: nowrap; }
.fig.skeleton::before {
  content: ""; display: inline-block; width: 2.2ch; height: 0.8em;
  border-radius: 8px; background: var(--rule); vertical-align: -0.05em;
}
.totals-note { margin-top: 20px; color: var(--ink-2); }
.totals-note b { color: var(--ink); font-weight: 600; }
.roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform 700ms var(--ease); }
.roll > span > span { display: block; height: 1em; }

/* How a skip works */
.how { margin-top: 40px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 16px; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.step-n { font-size: 44px; line-height: 0.9; font-weight: 800; font-stretch: 62%; }
.steps p { max-width: 32ch; }

/* Ledger and who got paid */
.records { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 40px; align-items: start; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 15px; color: var(--ink-2); padding: 0 12px 8px 0; }
td { padding: 12px 12px 12px 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
th.when, td.when { text-align: right; padding-right: 0; white-space: nowrap; }
td.kind { font-size: 19px; font-weight: 700; font-stretch: 75%; color: var(--ink-2); white-space: nowrap; }
td.kind.skipped { color: var(--ticket); }
td.kind.passed, td.kind.paid_out { color: var(--paid); }
td.text { overflow-wrap: anywhere; }
td.when { font-size: 15px; color: var(--ink-2); }
.amt-ink { font-weight: 700; }

.more {
  margin-top: 16px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; cursor: pointer;
  transition: background-color 120ms ease-out;
}
.more:hover { background: color-mix(in oklch, var(--ink) 6%, var(--paper)); }
.more:active { transform: translateY(1px); }
.more:disabled { cursor: default; color: var(--ink-2); background: var(--rule); }

.earner {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "chip who amt" ". bar bar";
  column-gap: 12px; row-gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.earner .chip { grid-area: chip; }
.earner .who { grid-area: who; min-width: 0; overflow-wrap: anywhere; }
.earner .money { grid-area: amt; }
.earner .track { grid-area: bar; height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.earner .bar { height: 100%; background: var(--paid); transform-origin: left; transition: transform 600ms var(--ease); }

/* Footer */
.foot { margin-top: 56px; padding: 24px 0 48px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 15px; display: grid; gap: 4px; }
.foot p { max-width: 75ch; }

@media (max-width: 960px) {
  .records { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch { grid-template-columns: minmax(0, 1fr); }
  .award { grid-column: 1; }
}

@media (max-width: 600px) {
  :root { --tw: 144px; }
  body { font-size: 16px; }
  .page { padding: 0 20px; }
  .top { flex-direction: column; gap: 4px; }
  .status { text-align: left; font-size: 15px; }
  .hero { padding-top: 28px; }
  .lede { font-size: 19px; }
  .line { margin-top: 32px; }
  .strip { scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 20px; scroll-padding-inline: 20px; }
  .pos { font-size: 88px; }
  .face { min-height: 108px; }
  .stamp { top: 76px; }
  .fig { font-size: 48px; }
  .panel { padding: 20px 16px; }
  .receipt-headline { font-size: 30px; }
  .payout { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "chip who amt" ". state tx"; row-gap: 4px; }
  .payout .chip { grid-area: chip; }
  .payout .who { grid-area: who; }
  .payout .amt { grid-area: amt; }
  .payout .state { grid-area: state; }
  .payout .tx { grid-area: tx; text-align: right; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
  td { border: 0; padding: 0; }
  td.kind { grid-column: 1; }
  td.when { grid-column: 2; grid-row: 1; }
  td.text { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .queue.deal .ticket, .ticket.joining, .ticket.leaving, .payouts.fresh .payout { animation: none; }
  .stamp.on { animation: stamp-still 2800ms linear both; }
  .roll > span, .earner .bar, .btn, .more { transition: none; }
  .btn:active, .more:active { transform: none; }
}
@keyframes stamp-still {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}