/* Ticket pass: the admission ticket as a page — a paper card with the event,
   the date and place, and a tear-off stub with the code to scan.

   It is always light paper, even in a dark shop: scanners read dark on light,
   and it should look like the PDF. The light theme's palette is re-bound
   here, so every block inside (chip, notice, date tile) reads on the paper.

   --ticket-accent  the account's colour, a band across the top
   --ticket-color   the ticket type's colour, its swatch */
.ticket-pass {
  --color-text: oklch(0.18 0 0);
  --color-muted: oklch(0.47 0 0);
  --color-subtle: oklch(0.9 0 0);
  --color-surface-0: oklch(0.975 0 0);
  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.955 0 0);
  --color-surface-3: oklch(0.92 0 0);
  --color-green: oklch(0.6 0.15 150);
  --color-amber: oklch(0.7 0.15 75);
  --color-red: oklch(0.58 0.2 25);

  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  color: var(--color-text);
  color-scheme: light;
  overflow: hidden;
}

.ticket-pass__rail {
  background: var(--ticket-accent);
  block-size: var(--space-3xs);
}

.ticket-pass__banner {
  border-block-end: var(--border-width) solid var(--color-subtle);
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.ticket-pass__body,
.ticket-pass__stub {
  padding: var(--space-m);
}

.ticket-pass__logo {
  block-size: 2.5rem;
  inline-size: auto;
  max-inline-size: 7rem;
  object-fit: contain;
}

.ticket-pass__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  hyphens: auto;
  letter-spacing: var(--font-display-tracking);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.ticket-pass__type {
  align-items: center;
  display: flex;
  font-weight: var(--weight-semibold);
  gap: var(--space-2xs);
}

.ticket-pass__swatch {
  aspect-ratio: 1;
  background: var(--ticket-color);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--border-width) oklch(from var(--color-text) l c h / 0.15);
  flex-shrink: 0;
  inline-size: 0.75em;
}

/* The seat or area, set off in the account's colour */
.ticket-pass__place {
  align-items: center;
  background: oklch(from var(--ticket-accent) l c h / 0.12);
  border-radius: var(--radius-m);
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
  padding: var(--space-xs) var(--space-s);
}

.ticket-pass__place-label {
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
}

/* The stub, torn off along a dashed line */
.ticket-pass__stub {
  background: var(--color-surface-2);
  border-block-start: calc(var(--border-width) * 2) dashed var(--color-subtle);
}

/* Sponsors on the stub, under a hairline */
.ticket-pass__section {
  border-block-start: var(--border-width) solid var(--color-subtle);
  padding-block-start: var(--space-s);
}

.ticket-pass__qr {
  background: var(--color-surface-1);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 var(--border-width) var(--color-subtle);
  flex-shrink: 0;
  padding: var(--space-xs);
}

.ticket-pass__code {
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}