/* Components of the public site. Tokens are in base.css; usage is in docs/DESIGN.md. */

:root {
  /* One diamond of the hall's parquet, repeated very quietly. */
  --parquet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='84'%3E%3Cpath d='M64 30l17 12-17 12-17-12z' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E");
  /* The same diamond as one row of whole tiles, for the footer's bottom band. */
  --parquet-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='24'%3E%3Cpath d='M64 0l17 12-17 12-17-12z' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E");
  /* The logo's swash, small, under every page title. */
  --flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M1 8C40 2 72 2 104 7s58 6 86-1' fill='none' stroke='%23dfc08a' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M195 2l4 4-4 4-4-4z' fill='%23dfc08a'/%3E%3C/svg%3E");
}

/* The page is lit, not flat: the hall's violet at the top of the document, its wine at the very end.
   On the canvas, not in a fixed layer, so no edge of it can ever show as a seam. */
body {
  background:
    radial-gradient(70vmax 46vmax at 88% 0, rgb(147 87 146 / .26), transparent 72%) no-repeat,
    radial-gradient(64vmax 44vmax at 0 100%, rgb(105 23 36 / .34), transparent 72%) no-repeat,
    radial-gradient(50vmax 30vmax at 50% 100%, rgb(242 176 94 / .07), transparent 72%) no-repeat,
    var(--page);
}

/* Moving between pages: the old one lifts away fast, the new one settles. Clicks go straight through,
   so a transition never holds up the next tap. Only same-site navigations, only where supported.
   The opt-in itself is in base.css and panel.css: see there. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
  ::view-transition { pointer-events: none; }
  ::view-transition-old(root) { animation: page-out 140ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: page-in 260ms var(--ease-out) 40ms both; }
  ::view-transition-group(topbar), ::view-transition-group(progress), ::view-transition-group(actionbar) { animation-duration: 240ms; animation-timing-function: var(--ease-in-out); }
  /* The word on the door flies up and becomes the title of the next page. */
  ::view-transition-group(route-guest), ::view-transition-group(route-performer) { animation-duration: 380ms; animation-timing-function: var(--ease-in-out); }
  ::view-transition-old(route-guest), ::view-transition-old(route-performer) { animation-duration: 90ms; }
  ::view-transition-new(route-guest), ::view-transition-new(route-performer) { animation-duration: 240ms; }
  .route-title--guest, .hero__routes .door:first-child .door__title { view-transition-name: route-guest; }
  .route-title--performer, .hero__routes .door:last-child .door__title { view-transition-name: route-performer; }
  .topbar { view-transition-name: topbar; }
  .progress__bar { view-transition-name: progress; }
  .actionbar { view-transition-name: actionbar; }
}

@keyframes rise { from { transform: translateY(var(--rise, 10px)); } }
@keyframes draw-right { from { transform: scaleX(0); } }
@keyframes wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stroke-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes bloom { from { opacity: 0; transform: scale(.9); } }
@keyframes run-line { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes light-pass { from { opacity: 1; transform: translateX(-200%) skewX(-16deg); } to { opacity: 1; transform: translateX(420%) skewX(-16deg); } }

/* Page titles carry a small piece of the gold line, drawn as the page opens. */
h1.display::after {
  content: "";
  display: block;
  width: min(200px, 62%);
  height: 14px;
  margin-top: 6px;
  background: var(--flourish) 0 50% / contain no-repeat;
  animation: wipe-right 460ms var(--ease-in-out) 100ms backwards;
}

/* Layout */
.container { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--narrow-max)); }
.page-section { padding-block: 20px 56px; }
@media (min-width: 768px) {
  .page-section { padding-block: 32px 56px; }
}
.page-section > * + * { margin-top: 16px; }
.stack > * + * { margin-top: 16px; }
.stack-large > * + * { margin-top: 28px; }
.split { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Brand: the logo is a mask, so it takes the colour of the text around it. */
.brand { display: inline-flex; align-items: flex-end; color: var(--champagne); --brand-h: 96px; }
.brand__logo {
  display: block;
  height: var(--brand-h);
  aspect-ratio: 400 / 316;
  background: currentColor;
  -webkit-mask: url("../img/logo-mask.48340669ccf8.webp") center / contain no-repeat;
  mask: url("../img/logo-mask.48340669ccf8.webp") center / contain no-repeat;
}
.brand__two {
  font: italic 600 calc(var(--brand-h) * .66) / .8 var(--font-display);
  font-feature-settings: "lnum" 1;
  margin-left: calc(var(--brand-h) * -.02);
  padding-bottom: calc(var(--brand-h) * .14);
}
.brand--small { --brand-h: 44px; }
.brand--large { --brand-h: 126px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-min);
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-small);
  background: transparent;
  color: inherit;
  font: 600 18px/1.25 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active:not([disabled], [aria-disabled="true"]) { transform: scale(.97); }
.btn:focus-visible { outline-offset: 3px; }
.btn--primary {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--champagne-bright), var(--champagne) 62%, #d9b67b);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 10px 24px -14px rgb(242 176 94 / .7);
  color: var(--ink);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 110% at 50% 0, rgb(255 255 255 / .55), transparent 70%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.btn--primary:hover, .btn--primary:focus-visible { color: var(--ink); }
.btn--ghost { border-color: var(--champagne); color: var(--champagne); }
.btn--ghost:hover { color: var(--champagne-bright); }
.btn--paper { background: var(--ink); color: var(--paper); }
.btn--paper:hover { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover::before { opacity: 1; }
  .btn--ghost:hover { background: var(--surface-raised); }
  .btn--paper:hover { background: #33263b; }
}
.btn--block { width: 100%; }
.btn { overflow-wrap: normal; }
.btn--small { min-height: 44px; padding: 8px 12px; font-size: 16px; }
.btn--link {
  min-height: 44px;
  padding: 8px 0;
  color: var(--champagne);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
/* Pressed and on its way: a short gold run under the label until the next page arrives. */
.btn.is-sending { position: relative; overflow: hidden; }
.btn.is-sending[disabled] { opacity: 1; cursor: progress; }
.btn.is-sending::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 3px;
  background: currentColor;
  animation: run-line .9s linear infinite;
}
.receipt :focus-visible, .paper :focus-visible { outline-color: var(--ink); }

/* Doors: the two equal routes */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 10px 8px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--champagne-bright), var(--champagne) 58%, #d3ae72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(122 88 34 / .35), 0 12px 28px -16px rgb(242 176 94 / .75);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out);
}
/* Hover light, for real pointers only; a touch must not leave a door lit. */
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 110% at 50% 0, rgb(255 255 255 / .6), transparent 72%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.door:hover, .door:focus-visible { color: var(--ink); }
.door:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .topbar__sections a:hover::after { transform: scaleX(1); }
  .door:hover { transform: translateY(-2px); }
  .door:hover::before { opacity: 1; }
  .door:active { transform: scale(.97); }
}
.door:focus-visible { outline-color: var(--text); outline-offset: 3px; }
.door__title { font: 600 19px/1.25 var(--font-ui); }
.door__note { font-size: 15px; line-height: 1.3; }
.doors--compact .door { min-height: var(--control-min); padding: 8px; }
.doors--compact .door__title { font-size: 17px; }
.doors--one { grid-template-columns: minmax(0, 1fr); }

/* Top bar */
.topbar { position: relative; z-index: 3; background: var(--page); border-bottom: 1px solid var(--surface-raised); }
.topbar__brand { transition: transform 140ms var(--ease-out); }
.topbar__brand:active { transform: scale(.97); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 6px; }
.topbar__brand { display: inline-flex; color: var(--champagne); text-decoration: none; }
.topbar__sections, .topbar__routes { display: none; }
.topbar__actions { display: flex; align-items: center; gap: 20px; }
.topbar__account { display: inline-flex; align-items: center; min-height: 44px; }
.topbar__account[aria-current="page"] { color: var(--muted); }
@media (min-width: 1024px) {
  .topbar { position: sticky; top: 0; }
  .topbar__sections { display: flex; gap: 28px; margin-inline: auto; }
  .topbar__sections a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; transition: color 160ms ease; }
  /* Short words like "Де" still get a 44 px target; the gap between links leaves room for it. */
  .topbar__sections a::before { content: ""; position: absolute; inset: 0 -12px; }
  .topbar__sections a::after {
    content: "";
    position: absolute;
    inset: auto 0 6px;
    height: 2px;
    background: var(--thread);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 220ms var(--ease-out);
  }
  .topbar__sections a:hover { color: var(--champagne-bright); }
  .topbar__sections a[aria-current]::after { transform: scaleX(1); }
  .topbar__routes { display: block; }
  .topbar__routes .doors { grid-template-columns: repeat(2, 148px); }
  .topbar__routes .doors--one { grid-template-columns: 148px; }
  .topbar__routes .door { min-height: 48px; }
}

/* Phone bottom bar with both routes; also the action bar of a funnel step.
   Fixed only where the screen is tall enough: at 200 % zoom it must not eat the page. */
.bottombar { display: none; }
@media (max-width: 1023px) and (min-height: 560px) {
  body.has-routes { --bar-space: 84px; }
  .bottombar {
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 1;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, var(--plum), var(--surface));
    border-top: 1px solid rgb(223 192 138 / .45);
  }
}
/* The footer stays at the bottom edge on short pages, and clear of a fixed bar. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: var(--bar-space); }
main { flex: 1 0 auto; }
.site-footer { flex: none; }

.actionbar { display: grid; gap: 10px; margin-top: 24px; }
.actionbar__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-weight: 600; }
.actionbar__sum { font-size: 24px; font-variant-numeric: lining-nums tabular-nums; }
.actionbar__sum--hint { font-size: inherit; font-weight: 400; }
.actionbar__detail { flex-basis: 100%; color: var(--muted); font-size: 15px; font-weight: 400; }
@media (max-width: 767px) and (min-height: 560px) {
  body.has-actionbar { --bar-space: 148px; }
  .actionbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: linear-gradient(180deg, var(--plum), var(--surface));
    border-top: 1px solid rgb(223 192 138 / .45);
  }
}

/* Footer */
/* The parquet runs as one row of whole diamonds in the footer's own bottom band: never cut at a
   screen edge (space), never behind the links. */
.site-footer {
  margin-top: 40px;
  padding-block: 28px 64px;
  border-top: 1px solid var(--surface-raised);
  background: var(--parquet-row) left 0 bottom 20px / 128px 24px;
  background-repeat: space no-repeat;
}
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Cards */
.card {
  padding: 20px;
  background: linear-gradient(165deg, var(--plum), var(--surface) 62%);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}
.card > * + * { margin-top: 12px; }
.card__title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.card__list > * + * { margin-top: 12px; }

/* Selectable card: a radio or checkbox inside a label */
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: start;
  padding: 16px;
  min-height: var(--control-min);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(165deg, var(--plum), var(--surface) 62%);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, transform 140ms var(--ease-out);
}
/* A warm spot on the chosen card, and the gold line under it, drawn from the left. */
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 150% at 0 40%, rgb(242 176 94 / .24), transparent 72%);
  opacity: 0;
  transition: opacity 220ms ease;
}
.choice::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--thread), var(--thread-bright));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: var(--line); }
}
.choice:active:not(:has(input:disabled)) { transform: scale(.985); }
.choice:has(input:checked) { border-color: var(--champagne); }
.choice:has(input:checked)::before { opacity: 1; }
.choice:has(input:checked)::after { transform: scaleX(1); }
.choice:has(input:focus-visible) { outline: 3px solid var(--champagne); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; }
.choice input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--champagne);
}
.choice__title { font-weight: 600; }
.choice__note { grid-column: 2; color: var(--muted); font-size: 16px; }
.choice__sum { grid-column: 2; font-weight: 600; }
.choice__why { grid-column: 2; color: var(--error); font-size: 16px; }
.choices > * + * { margin-top: 10px; }

/* Forms */
.form > * + * { margin-top: 18px; }
.field__label { display: block; margin-bottom: 6px; font-weight: 500; }
.field__optional { color: var(--muted); font-weight: 400; }
.field__help { margin-bottom: 8px; color: var(--muted); font-size: 16px; }
.field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: var(--control-min);
  padding: 12px 14px;
  background: var(--page);
  border: 1.5px solid #8d7c92;
  border-radius: var(--radius-small);
  color: var(--text);
  transition: border-color 160ms ease;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--champagne);
  outline-offset: 0;
}
.field__label { transition: color 160ms ease; }
.field:focus-within > .field__label { color: var(--champagne-bright); }
.field--invalid input:not([type="checkbox"], [type="radio"]) { border-color: var(--error); }
.field__errors { list-style: none; margin: 6px 0 0; padding: 0; color: var(--error); font-size: 16px; font-weight: 500; }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; min-height: var(--control-min); padding-block: 12px; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--champagne); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Stepper. Without JS the buttons submit the form and the server recounts. */
.stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.stepper__label { font-weight: 500; }
.stepper__controls { display: inline-flex; align-items: center; gap: 8px; }
.stepper__button {
  flex: none;
  width: var(--control-min);
  height: var(--control-min);
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  color: var(--champagne);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 160ms ease;
}
.stepper__button:active:not([disabled]) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .stepper__button:hover:not([disabled]) { background: var(--surface-raised); }
}
.stepper__button[disabled] { opacity: .5; cursor: not-allowed; }
/* The digit rolls inside this window; see tickets/js/flow.js. Without script it is a plain box. */
.stepper__window {
  position: relative;
  width: 72px;
  height: var(--control-min);
  overflow: hidden;
  background: var(--page);
  border: 1.5px solid #8d7c92;
  border-radius: var(--radius-small);
}
.stepper__window:has(input:focus-visible) { border-color: var(--champagne); outline: 3px solid var(--champagne); outline-offset: 0; }
.field--invalid .stepper__window { border-color: var(--error); }
.field input.stepper__value, .stepper__ghost {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
}
.field input.stepper__value { appearance: textfield; outline: 0; }
.stepper__ghost { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
span.stepper__value { min-width: 2ch; font-size: 24px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.stepper__value::-webkit-inner-spin-button, .stepper__value::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* Funnel progress: words carry the meaning, the line only echoes it. The newest stretch draws forward,
   with a diamond of the parquet at its tip. */
.progress { margin-bottom: 8px; }
.progress__text { color: var(--muted); font-size: 16px; }
.progress__bar { display: flex; gap: 3px; margin-top: 10px; }
.progress__seg { position: relative; flex: 1; height: 3px; background: var(--surface-raised); border-radius: 2px; }
.progress__seg--done { background: linear-gradient(90deg, var(--thread), var(--champagne-bright)); }
.progress__seg--done:not(:has(+ .progress__seg--done)) { transform-origin: 0 50%; animation: draw-right 460ms var(--ease-out) 120ms backwards; }
.progress__seg--done:not(:has(+ .progress__seg--done))::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -3.5px;
  width: 10px;
  height: 10px;
  background: var(--champagne-bright);
  transform: rotate(45deg);
}

/* Notices */
.alert { padding: 14px 16px; background: var(--surface); border-left: 4px solid var(--champagne); border-radius: var(--radius-small); animation: rise 260ms var(--ease-out) backwards; --rise: 6px; }
.alert:focus { outline: none; }
.alert > * + * { margin-top: 8px; }
.alert--error { border-left-color: var(--error); color: var(--error); }
.alert--ok { border-left-color: var(--ok); }
.alert a { color: inherit; }
.banner { padding: 8px 12px; background: var(--surface-raised); border-radius: var(--radius-small); font-size: 16px; }

/* Status pills: always text, the tone only supports it */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.4; background: var(--surface-raised); color: var(--text); }
.pill--ok { background: #1f3f2a; color: var(--ok); }
.pill--warn { background: #493819; color: var(--champagne-bright); }
.pill--error { background: #4c211c; color: var(--error); }
.pill--quiet { background: var(--surface-raised); color: var(--muted); }
.pill--info { background: var(--surface-raised); color: var(--champagne); }

/* Receipt: the paper island for payment details and summaries. It comes up like paper from a printer:
   only moving, because everything on it is what the person came for. */
.paper, .receipt { background: var(--paper); color: var(--ink); }
.receipt {
  position: relative;
  padding: 22px 20px 26px;
  --paper-low: #f7efdf;
  background: linear-gradient(178deg, #fffdf6, var(--paper) 18%, var(--paper-low));
  border-radius: 4px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 28px 50px -28px rgb(0 0 0 / .9), 0 2px 6px rgb(0 0 0 / .25);
  font-size: 17px;
  animation: rise 460ms var(--ease-drawer) 40ms backwards;
  --rise: 16px;
}
/* The gold line traces the top edge of the paper. */
.receipt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #c79a4f, var(--champagne) 45%, #c79a4f);
  transform-origin: 0 50%;
  animation: draw-right 480ms var(--ease-in-out) 120ms backwards;
}
.receipt::after {
  content: "";
  position: absolute;
  inset: auto 0 -7px;
  height: 8px;
  background: radial-gradient(circle at 6px 0, var(--paper-low) 5.5px, transparent 6px) 0 0 / 12px 8px repeat-x;
}
.receipt a { color: var(--ink); }
.receipt a.btn--paper, .receipt a.btn--paper:hover { color: var(--paper); }
.receipt__heading { margin: 0; font: inherit; }
.receipt__kicker { display: block; color: var(--ink-muted); font-size: 15px; font-weight: 400; }
.receipt__number { display: block; font: 700 34px/1.1 var(--font-ui); }
.receipt__status { margin-top: 10px; padding: 10px 12px; background: var(--paper-tint); border-radius: var(--radius-small); font-size: 16px; }
/* A settled state: a seal drawn in gold beside the words. The words carry the meaning. */
.receipt__status--settled { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.seal { display: block; flex: none; width: 44px; height: 44px; }
.seal circle, .seal path { fill: none; stroke: #94691a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.seal circle { transform: rotate(-90deg); transform-origin: 50% 50%; animation: stroke-draw 480ms var(--ease-in-out) 200ms backwards; }
.seal path { animation: stroke-draw 240ms var(--ease-out) 620ms backwards; }
/* Still being checked, which takes hours: a small still clock. A spinner would stall and lie. */
.seal--waiting { width: 32px; height: 32px; }
.seal--waiting circle, .seal--waiting path { stroke-width: 3; animation: none; transform: none; }
/* Calm, warm light blooms behind the confirmed paper. No confetti. */
.receipt-glow { position: relative; isolation: isolate; }
.receipt-glow::before {
  content: "";
  position: absolute;
  inset: -40px calc(-1 * var(--gutter));
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(242 176 94 / .42), transparent);
  animation: bloom 700ms var(--ease-out) 200ms backwards;
  pointer-events: none;
}
.btn--paper { transition: transform 140ms var(--ease-out), background-color 160ms ease; }
[data-copy] { white-space: nowrap; }
/* A check drawn on copy. Added by script, so it can only appear when the copy worked. */
.copy-check { width: 18px; height: 18px; margin-right: 2px; flex: none; }
.copy-check path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: stroke-draw 220ms var(--ease-out) backwards; }
.receipt__rows { margin-top: 14px; }
.receipt__row { position: relative; padding-block: 10px; border-top: 1px dashed var(--paper-line); }
.receipt__cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.receipt__cell .btn { flex: none; }
.receipt__label { color: var(--ink-muted); font-size: 15px; overflow-wrap: normal; }
.receipt__value { font-weight: 600; overflow-wrap: anywhere; }
.receipt__people { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.receipt__people li + li { padding-top: 6px; border-top: 1px dotted var(--paper-line); }
.receipt__value--select { user-select: all; -webkit-user-select: all; }
/* A long code read aloud in fours: the gap is a margin, so a copy has no spaces. */
.code-group:not(:last-child) { margin-right: .32em; }
/* On a phone the value takes the whole line and the button sits by the label, so it never wraps or shifts. */
@media (max-width: 479px) {
  .receipt__row:has([data-copy]:not([hidden])) { min-height: 76px; }
  .receipt__row:has([data-copy]:not([hidden])) .receipt__label { min-height: 44px; padding-right: 156px; }
  .receipt__cell .btn[data-copy] { position: absolute; top: 6px; right: 0; }
  .receipt__row:has([data-copy]:not([hidden])) .receipt__value { font-size: 16px; }
}
/* The narrowest phones: no room for a label beside the button, so the button goes under the value. */
@media (max-width: 359px) {
  .receipt__row:has([data-copy]:not([hidden])) { min-height: 0; }
  .receipt__row:has([data-copy]:not([hidden])) .receipt__label { min-height: 0; padding-right: 0; }
  .receipt__cell:has([data-copy]:not([hidden])) { flex-direction: column; align-items: flex-start; gap: 8px; }
  .receipt__cell .btn[data-copy] { position: static; }
}
.receipt__total { font-size: 24px; }
.receipt__note { margin-top: 12px; color: var(--ink-muted); font-size: 15px; }
.receipt .pill { background: var(--ink); color: var(--paper); margin-right: 6px; }
/* What the money is for: event, date and place above an order's sums. */
.event-line { display: grid; gap: 4px; margin-bottom: 14px; font-size: 15px; }
.event-line__name { font-weight: 600; font-size: 17px; }
.receipt .event-line { color: var(--ink-muted); }
.receipt .event-line__name { color: var(--ink); }
.receipt__rows:first-child { margin-top: 0; }
.receipt__rows:first-child .receipt__row:first-child { border-top: 0; padding-top: 0; }

/* Numbered steps */
.numbered { counter-reset: step; list-style: none; padding: 0; }
.numbered > li { position: relative; counter-increment: step; padding: 0 0 12px 44px; }
/* Steps are beads on the gold line. */
.numbered > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--thread), rgb(223 192 138 / .25));
}
.numbered > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -6px;
  color: var(--champagne);
  font: 600 32px/1.2 var(--font-display);
  font-feature-settings: "lnum" 1;
}

/* Disclosure */
.disclosure { background: var(--surface); border-radius: var(--radius); }
.disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--control-min); padding: 12px 16px; cursor: pointer; font-weight: 500; }
.disclosure summary::after, .receipt__more summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--ease-out);
}
details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.disclosure__body { padding: 0 16px 16px; }

/* Definition rows on dark surfaces */
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-block: 10px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; }

/* Rows inside a card, as in the cabinet lists */
.rowlink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.rowlink:first-child { border-top: 0; }
.rowlink__main { min-width: 0; }
.rowlink__title { font-weight: 600; }
a.rowlink__title { display: inline-flex; align-items: center; min-height: 44px; }
.rowlink__meta { color: var(--muted); font-size: 16px; }
.empty { color: var(--muted); }

/* Value with a copy button, on a dark surface */
.copyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copyline__value { flex: 1 1 240px; min-width: 0; padding: 10px 12px; background: var(--page); border-radius: var(--radius-small); font-size: 16px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* Funnel steps */
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset legend { padding: 0; }
.fieldset.card { padding: 20px; }
.person > * + * { margin-top: 14px; }
.person__title { float: left; width: 100%; padding: 0; margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.person__title + * { clear: both; }
.flow > * + * { margin-top: 16px; }
.flow > .progress + * { margin-top: 0; }
.flow-actions > * + * { margin-top: 8px; }
.flow-back { display: flex; width: fit-content; }
/* A link that stands alone on its line: a 44 px target, the look of a plain link. */
.solo-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.flow-note { color: var(--muted); font-size: 16px; }
.receipt__action { margin-top: 14px; }
.receipt__share { margin-top: 14px; }
/* Pay in the bank app: a button where the app is on this device, a QR code where it is not. */
.bankpay { margin-top: 14px; }
.bankpay__desk { display: none; margin: 0; }
.bankpay__code { display: block; width: 196px; height: 196px; }
@media (min-width: 768px) and (hover: hover) {
  .bankpay__phone { display: none; }
  .bankpay__desk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .bankpay__desk .receipt__note { margin-top: 0; }
}
.receipt__share .copyline { margin-top: 6px; }
.receipt .copyline__value { background: var(--paper-tint); color: var(--ink); }
.receipt__more { margin-top: 12px; }
.receipt__more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--control-min); cursor: pointer; font-weight: 600; }

/* The gold line traces the whole edge of a confirmed receipt or a live ticket, once. */
@keyframes trace-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
.trace { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trace rect { fill: none; stroke: #c79a4f; stroke-width: 2; stroke-dasharray: 1.01 1; animation: trace-draw 1s var(--ease-in-out) 200ms backwards; }

/* Change links under a summary: separate targets, nothing left dangling when they wrap. */
.edit-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.edit-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* The confirmed page is a moment of its own: the paper sits in the middle of the screen. */
main:has(.receipt-glow) { display: flex; flex-direction: column; justify-content: center; }

/* The ticket: something to show at the door, with a tear line and the hall's parquet on its head. */
.ticket { padding: 0; animation-duration: 520ms; }
.ticket::before, .ticket::after { display: none; }
.ticket__head {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 24px;
  background:
    var(--parquet),
    radial-gradient(120% 130% at 90% -20%, rgb(147 87 146 / .55), transparent 70%),
    linear-gradient(170deg, #2c1a33, #17101a);
  border-radius: 4px 4px 0 0;
  color: var(--text);
}
.ticket__date {
  margin-top: 14px;
  color: var(--text);
  font: 600 40px/1.05 var(--font-display);
  font-feature-settings: "lnum" 1;
}
.ticket__place { margin-top: 4px; color: var(--muted); font-size: 16px; }
.ticket__tear { position: relative; height: 0; border-top: 2px dashed var(--paper-line); }
.ticket__tear::before, .ticket__tear::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--page);
}
.ticket__tear::before { left: -10px; }
.ticket__tear::after { right: -10px; }
.ticket__body { padding: 18px 20px 24px; }
.ticket__body .receipt__number { font-size: 30px; }
.ticket--void .ticket__head { background: linear-gradient(170deg, #3a3238, #231c22); }
.ticket--void .ticket__date { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
/* One pass of light across a live ticket when it opens. */
.ticket--live .ticket__head::after {
  content: "";
  position: absolute;
  inset: -10% auto -10% 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgb(255 241 207 / .32), transparent);
  opacity: 0;
  animation: light-pass .8s var(--ease-in-out) 320ms backwards;
}
@media (min-width: 640px) {
  .ticket { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); }
  .ticket__head { border-radius: 4px 0 0 4px; padding: 24px; }
  .ticket__date { margin-top: 28px; font-size: 44px; }
  .ticket__tear { height: auto; border-top: 0; border-left: 2px dashed var(--paper-line); }
  .ticket__tear::before { top: -10px; left: -11px; }
  .ticket__tear::after { top: auto; bottom: -10px; right: auto; left: -11px; }
  .ticket__body { padding: 24px; }
}

/* The page not found: the line wandered off and stopped. */
.lost { padding-block: 48px 24px; }
.lost__line { display: block; width: 100%; height: 150px; margin-bottom: 8px; overflow: visible; }
.lost__line { animation: wipe-right .9s var(--ease-in-out) 80ms backwards; }
.lost__line path { fill: none; stroke: var(--thread); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lost__line circle { fill: var(--thread); }
.lost > * + * { margin-top: 14px; }

@media print {
  .thread, .hero__light, .hero__spot, .hero__line, .hero__glints, .trace { display: none; }
  .ticket__head { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}