/* The scan-to-queue poster. Always light, because it is printed and stuck on walls. */
.poster {
  width: min(380px, 100%); margin: 0 auto; background: #fff; color: #1b1d1f; border: 1px solid #e6e4dd; border-radius: 22px;
  overflow: hidden; text-align: center; box-shadow: 0 1px 2px rgb(30 28 20 / 6%), 0 12px 32px rgb(30 28 20 / 10%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.poster-band { background: #0b6e4f; color: #fff; padding: 18px 20px 16px; }
.poster-shop { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.poster-branch { font-size: 15px; opacity: .85; margin-top: 2px; }
.poster-body { padding: 22px 26px 26px; display: grid; gap: 18px; justify-items: center; }
.poster-body h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.poster-qr { width: 230px; padding: 12px; background: #fff; border: 3px solid #0b6e4f; border-radius: 20px; line-height: 0; }
.poster-qr svg { width: 100%; height: auto; }
.poster-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; text-align: left; font-size: 15px; font-weight: 600; }
.poster-steps li { display: flex; align-items: center; gap: 10px; }
.poster-steps span { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #e2f1eb; color: #0b6e4f; display: grid; place-items: center; font-size: 14px; font-weight: 800; }

/* On screen, beside the poster. */
.poster-wrap { display: grid; gap: 16px; }
.poster-actions { display: grid; gap: 12px; justify-items: center; }
.poster-link { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--paper, #f7f6f2); max-width: 100%; }

/* The printed page: one poster, centred on A5. */
.poster-print { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #fff; }
@media print {
  @page { size: A5; margin: 10mm; }
  .poster-print .poster { width: 118mm; box-shadow: none; border: 1.5px solid #d3d0c7; }
  .poster-print .poster-qr { width: 78mm; }
  .poster-print .poster-shop { font-size: 26px; }
  .poster-print .poster-body h2 { font-size: 30px; }
  .poster-print .poster-steps { font-size: 17px; }
  .poster-band, .poster-steps span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}