/* /review-card/ print sheet. External file on purpose: the site CSP is
   style-src 'self' — inline <style> blocks are blocked (learned live 2026-07-07). */
* { box-sizing: border-box; margin: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; color: #1e2a32; background: #eef1f3; padding: 24px; }
.screen-note { max-width: 720px; margin: 0 auto 22px; background: #fff; border-radius: 10px; padding: 18px 22px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.screen-note h1 { font-size: 22px; margin-bottom: 8px; }
.screen-note p { margin: 6px 0; line-height: 1.5; }
.screen-note button { background: #4C9543; color: #fff; border: 0; border-radius: 8px; padding: 12px 22px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.sheet { max-width: 760px; margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 30px; }
.card { border: 2px dashed #b9c4cb; border-radius: 12px; text-align: center; padding: 26px 20px; }
.card h2 { color: #1569B4; font-size: 30px; margin: 10px 0 6px; }
.card .ask { color: #444; max-width: 420px; margin: 0 auto 12px; line-height: 1.45; }
.card .qr { width: 210px; height: 210px; margin: 6px auto; display: block; }
.card .scan { font-size: 17px; margin: 10px 0 4px; line-height: 1.5; }
.card .url { color: #F18225; font-weight: 700; }
.card .fine { color: #778691; font-size: 12px; margin-top: 12px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px; color: #778691; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 2px dashed #b9c4cb; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.grid .card { padding: 18px 12px; }
.grid .card h2 { font-size: 20px; margin: 6px 0 4px; }
.grid .card .ask { display: none; }
.grid .card .qr { width: 150px; height: 150px; }
.grid .card .scan { font-size: 13px; }
.grid .card .fine { font-size: 10px; margin-top: 8px; }
/* On screen, one sample small card is enough — the printed sheet gets all 4. */
@media screen {
  .grid .card:nth-child(n+2) { display: none; }
  .grid { grid-template-columns: minmax(0, 340px); justify-content: center; }
}
@media print {
  body { background: #fff; padding: 0; }
  .screen-note { display: none; }
  .sheet { box-shadow: none; max-width: none; padding: 0; }
  .card { break-inside: avoid; }
}