/* Print layouts: gate poster (A4, one page) and receipt (Section 10.5.9, 10.5.10).
   They always use the Bookshelf fonts and colours, whatever theme a person picked. */
.print-body{background:#F3F2EE;color:#1E1E1C}
.print-main{max-width:820px;margin:0 auto;padding:16px}
.print-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}

/* Poster: sizes use --u, one millimetre of the A4 width, so it is fluid on screen and exact in print */
.poster-wrap{container-type:inline-size;width:100%;max-width:210mm;margin:0 auto}
.poster{--u:calc(100cqw / 210);aspect-ratio:210 / 297;width:100%;background:#FFFFFF;color:#1E1E1C;overflow:hidden;display:flex;flex-direction:column;border:1px solid #E3E1D9;font-size:calc(var(--u) * 4.6);line-height:1.3}
.poster-band{background:#233A73;color:#FFFFFF;padding:calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10)}
.poster-lib{margin:0 0 calc(var(--u) * 5);font-size:calc(var(--u) * 6.2);font-weight:600;opacity:.95;overflow-wrap:anywhere}
.poster-h{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:calc(var(--u) * 17)}
.poster-sub{margin:calc(var(--u) * 4) 0 0;font-size:calc(var(--u) * 6)}
.poster-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 6);padding:calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 10)}
.qr-box{width:calc(var(--u) * 70);height:calc(var(--u) * 70);flex:none;display:flex;align-items:center;justify-content:center}
.qr-box svg{width:100%;height:100%;display:block}
.qr-cap{margin:0;font-weight:800;font-size:calc(var(--u) * 6)}
.poster-steps{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 5)}
.poster-step{display:flex;flex-direction:column;gap:calc(var(--u) * 1.5)}
.poster-n{display:flex;align-items:center;justify-content:center;width:calc(var(--u) * 11);height:calc(var(--u) * 11);border-radius:50%;background:#B5452F;color:#FFFFFF;font-weight:800;font-size:calc(var(--u) * 6)}
.poster-step strong{font-size:calc(var(--u) * 5.2)}
.poster-step span.sm{font-size:calc(var(--u) * 4);color:#5C5A53}
.poster-box{width:100%;border:calc(var(--u) * .7) dashed #1E1E1C;border-radius:calc(var(--u) * 3);padding:calc(var(--u) * 4) calc(var(--u) * 5);text-align:center;font-size:calc(var(--u) * 5)}
.poster-link{margin:0;font-size:calc(var(--u) * 4.2);color:#5C5A53;overflow-wrap:anywhere;text-align:center}

/* Receipt */
.receipt{max-width:640px;margin:0 auto;background:#FFFFFF;color:#1E1E1C;border:1px solid #E3E1D9;border-radius:14px;padding:24px}
.receipt h1{margin:0 0 4px;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,6vw,30px)}
.receipt-head{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.receipt-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 0;border-bottom:1px solid #ECEAE3}
.receipt-row:last-child{border-bottom:0}
.receipt-total{font-weight:800;font-size:20px}
.receipt .meta{color:#5C5A53;font-size:14px}

@page{size:A4 portrait;margin:0}
@media print{
  html,body{background:#FFFFFF !important}
  .hide-print,.skip-link{display:none !important}
  .print-main{max-width:none;padding:0;margin:0}
  .poster-wrap{width:210mm;max-width:none}
  .poster{border:0;height:296.5mm;aspect-ratio:auto;break-inside:avoid;page-break-inside:avoid}
  .receipt{border:0;border-radius:0;max-width:none;padding:16mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}