/* wikey® QR panel (Task #248) — the shared detail-page QR & NFC card.
   Screen styles follow the neon card language; print styles use the
   visibility pattern of the Paper-QR sheet (works through arbitrary
   nesting, leaves no phantom pages) and mm units so labels stay exact
   at 100 % print scale. */

.qrp { margin-top: 14px; }
.qrp--dead { display: none; } /* engine missing → explicit self-hide */
.qrp__title { margin: 0 0 .5em; font-size: 1rem; }

.qrp__tabs { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .7em; }
.qrp__tab {
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: #cfd8ea; border-radius: 999px; padding: .35em 1em;
  font-size: .8em; font-weight: 700; letter-spacing: .08em; cursor: pointer;
  overflow-wrap: break-word;
}
.qrp__tab[aria-selected="true"] {
  border-color: #00ccff; color: #00ffff;
  box-shadow: 0 0 10px rgba(0,204,255,.35);
}

.qrp__preview {
  background: #fff; border-radius: 8px; padding: 10px; text-align: center;
}
.qrp__preview svg { width: min(100%, 260px); height: auto; display: inline-block; }
.qrp__over { color: #b8002e; margin: 0; font-size: .85em; }

.qrp__meta { margin: .5em 0 0; font-size: .8em; }
.qrp__hint { margin: .2em 0 .6em; font-size: .78em; }

.qrp__row {
  display: flex; flex-wrap: wrap; gap: .3em .9em;
  align-items: baseline; margin-bottom: .4em;
}
.qrp__row--off { opacity: .45; }
.qrp__lbl { font-size: .75em; color: #9aa7bd; min-width: 5.5em; }
.qrp__choice { font-size: .82em; display: inline-flex; gap: .3em; align-items: center; }

.qrp__actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .7em; }

/* ---- Print: A4 label sheet / window poster ---------------------------- */
.qrp-print { display: none; }

/* Print isolation (review fix): visibility:hidden alone keeps the app in
   the layout flow, so long detail pages paginate AFTER the sheet — blank
   trailing pages. qr_panel.js therefore moves .qrp-print to <body> on
   beforeprint and sets body.qrp-printing; display:none then removes every
   sibling from the flow entirely, and the sheet is the ONLY thing that can
   paginate. Without JS the class is never set and printing degrades to the
   normal page — never to phantom blanks. */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body.qrp-printing > *:not(.qrp-print) { display: none !important; }
  body.qrp-printing .qrp-print {
    display: block !important; color: #161616;
    width: 190mm; font-family: sans-serif;
  }
  .qrp-sheet {
    display: grid; grid-template-columns: repeat(3, 62mm);
    grid-auto-rows: 66mm;
  }
  .qrp-label {
    width: 62mm; height: 66mm; box-sizing: border-box;
    padding: 2.5mm 2mm; text-align: center; overflow: hidden;
    border: .2mm dashed #999;
    page-break-inside: avoid; break-inside: avoid;
  }
  .qrp-label__title { font-size: 8pt; font-weight: 700; overflow-wrap: break-word; }
  .qrp-label__price { font-size: 7.5pt; margin-top: .5mm; }
  .qrp-label__qr svg { display: block; width: 34mm; height: 34mm; margin: 1mm auto; }
  .qrp-label__url { font-size: 6.5pt; overflow-wrap: break-word; }

  .qrp-poster { text-align: center; padding-top: 10mm; }
  .qrp-poster__title { font-size: 22pt; font-weight: 700; overflow-wrap: break-word; }
  .qrp-poster__qr svg { display: block; width: 140mm; height: 140mm; margin: 8mm auto; }
  .qrp-poster__sub { font-size: 11pt; color: #333; }
  .qrp-poster__url { font-size: 13pt; font-weight: 700; margin-top: 6mm; overflow-wrap: break-word; }
}