/* Ticket Vault
 * Ticket upload, readiness tracking, and full-screen display.
 */

@layer components {
  /* ── Readiness row ── */

  .ticket-readiness {
    padding: var(--block-space) var(--inline-space-l);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .ticket-readiness__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink-subtle);
    margin: 0 0 var(--block-space-s);
  }

  .ticket-readiness__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .ticket-readiness__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .ticket-readiness__status {
    font-size: 0.75rem;
    font-weight: 700;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
  }

  .ticket-readiness__status--ready {
    color: oklch(55% 0.2 145);
    background: color-mix(in oklch, oklch(55% 0.2 145) 15%, transparent);
  }

  .ticket-readiness__status--missing {
    color: oklch(55% 0.2 27);
    background: color-mix(in oklch, oklch(55% 0.2 27) 15%, transparent);
  }

  .ticket-readiness__banner--complete {
    padding: var(--block-space-s) var(--inline-space);
    background: color-mix(in oklch, oklch(55% 0.2 145) 10%, var(--color-surface));
    border: 1px solid color-mix(in oklch, oklch(55% 0.2 145) 30%, var(--color-border));
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    color: oklch(55% 0.2 145);
    text-align: center;
  }

  /* ── Full-screen ticket display ── */

  .ticket-display {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: #fff;
  }

  .ticket-display__nav {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) var(--inline-space);
    background: #fff;
  }

  .ticket-display__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink-subtle);
  }

  .ticket-display__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--inline-space);
    background: #fff;
  }

  .ticket-display__image {
    max-width: 100%;
    max-height: 80dvh;
    object-fit: contain;
  }

  .ticket-display__pdf {
    width: 100%;
    min-height: 80dvh;
    border: none;
  }
}