/* One Question / print: build a deck, print A4 sheets (2 x 4 cards, cut lines). Screen styles reuse ../style.css. */
.pr { padding: 10px clamp(16px, 4vw, 40px) 56px; max-width: 1080px; margin: 0 auto; }
.pr h1 { font: 800 clamp(30px, 5vw, 52px)/1.05 var(--serif); font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -.02em; margin: 8px 0 10px; text-align: center; color: var(--cream); }
.pr .sub { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 26px; }
.ctl { display: grid; gap: 14px; max-width: 760px; margin: 0 auto 20px; }
.ctl .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.ctl .lab { flex: 0 0 100%; text-align: center; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctl button { border: 1.5px solid rgba(246,236,217,.28); background: none; color: var(--cream); font: 700 13px var(--sans); padding: 9px 14px; min-height: 40px; border-radius: 999px; cursor: pointer; }
.ctl button:hover { background: rgba(0,0,0,.25); }
.ctl button.on { background: var(--cream); color: var(--table); border-color: var(--cream); }
.ctl button small { font-weight: 700; opacity: .6; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 6px; }
.acts .btn.main { background: var(--paper); color: var(--ink, #2a0f08); border-color: transparent; }
.note { text-align: center; color: var(--muted); font-size: 14px; max-width: 64ch; margin: 6px auto 22px; min-height: 1.4em; }
.sheets { display: grid; justify-content: center; gap: 22px; }
.pg { --z: 1; zoom: var(--z); width: 210mm; height: 297mm; padding: 8mm 7.5mm; background: #fff; color: #111; box-shadow: 0 14px 40px rgba(0,0,0,.45); break-after: page; page-break-after: always; }
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); width: 100%; height: 100%; border-top: .3mm dashed #777; border-left: .3mm dashed #777; }
.qc { border-right: .3mm dashed #777; border-bottom: .3mm dashed #777; padding: 7mm 8mm 5mm; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.qc .th { font: 700 7.5pt var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #777; }
.qc .q { margin: auto 0; font: 700 15pt/1.2 var(--serif); font-variation-settings: 'SOFT' 100, 'WONK' 0; color: #111; text-wrap: balance; }
.qc .q.l { font-size: 13.5pt; } .qc .q.xl { font-size: 12pt; }
.qc .ft { display: flex; justify-content: space-between; font: 500 7.5pt var(--sans); letter-spacing: .08em; color: #777; }
.qc.blank .q { color: #bbb; font-weight: 400; font-style: italic; font-size: 11pt; }
.qc.qr { align-items: center; text-align: center; }
.qc.qr .qrb { margin: auto 0 2mm; width: 34mm; height: 34mm; }
.qc.qr svg { width: 100%; height: 100%; display: block; }
.qc.qr .q { margin: 0 0 2mm; font-size: 10.5pt; }
.qc.qr .ft { width: 100%; }
.eco .here a::after { color: var(--cream); }
@media (max-width: 860px) { .pg { --z: .42; } .sheets { justify-content: start; } }
@media (max-width: 560px) { .pg { --z: .34; } }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #000 !important; }
  body > :not(#sheets) { display: none !important; }
  .sheets { display: block; gap: 0; }
  .pg { zoom: 1 !important; box-shadow: none; margin: 0; }
  .pg:last-child { break-after: auto; page-break-after: auto; }
  .qc, .qc .q, .qc .th, .qc .ft { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}