/* QR generator, cabinet side: "Printer's proof". Only the lede above the tool; the tool is a found artifact styled by qr-artifact.css (decisions/027).
   Token references only, as in site.css.
   App theme: a prussian proofing-ink accent over the AppZoo frame. Fixed: typefaces, az- components, ink outlines,
   offset shadows, spacing scale. Varied here: accent and wash, the module-grid texture, crop-mark and finder motifs
   (SVG files, painted through masks so they follow the day/night tokens), and a small settle motion.
   The --qr-* names are scoped to this app so they are easy to rename to match the design system's exhibit theming. */

.qr-lede {
  --qr-accent: var(--exhibit-accent, var(--prussian));
  --qr-accent-strong: var(--exhibit-accent-strong, var(--prussian-strong));
  --qr-on-accent: var(--exhibit-on-accent, var(--on-prussian));
  --qr-wash: var(--exhibit-wash, var(--prussian-wash));
  /* Motif SVGs are plain static files (tiny, short-cached); they are alpha masks, so the page tokens colour them. */
  --qr-finder: url(qr/finder.svg);
}

.qr-lede { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font: var(--type-body); margin: 0 0 var(--space-4); }
@media (min-width: 40rem) {
  .qr-lede { font: var(--type-lead); }
}
.qr-finders { display: none; gap: var(--space-2); flex: none; }
.qr-finders i {
  display: block;
  background: var(--qr-accent);
  -webkit-mask: var(--qr-finder) center / 100% 100% no-repeat;
  mask: var(--qr-finder) center / 100% 100% no-repeat;
}
.qr-finders i { width: var(--space-6); height: var(--space-6); }
@media (min-width: 40rem) {
  .qr-finders { display: flex; }
}