/* =========================================================================
   Showing a code big enough to actually scan.

   The collections list draws a QR into a 76 pixel box, which is two pixels per
   module and completely unscannable. It is there to tell one collection from
   another, not to be pointed at, so it now says so: dimmed, and captioned.

   This screen is the opposite. Nothing else on the page, as large as the
   window allows, for testing with a phone and for holding a tablet up at a
   reception when somebody asks how to send their photos.
   ========================================================================= */

.qrthumb.tiny { opacity: .55; }
.qrcard:hover .qrthumb.tiny { opacity: 1; }

.codewrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--s5) var(--s4);
  background: #fff;
  color: #111;
  text-align: center;
}

/* Sized off the smaller of the two window dimensions, so it fills whatever
   screen it lands on without ever spilling off the edge. */
.codebox {
  width: min(78vw, 62vh);
  max-width: 620px;
  line-height: 0;
  background: #fff;
  padding: 14px;
  border-radius: 12px;
}
.codebox svg { width: 100%; height: auto; display: block; }

.codewrap h1 {
  font-size: clamp(20px, 3.4vw, 30px);
  margin: 18px 0 2px;
  letter-spacing: -0.02em;
  color: #111;
}
.codeurl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(13px, 1.9vw, 17px);
  color: #444;
  margin: 0 0 6px;
  word-break: break-all;
}
.codehint {
  color: #666;
  font-size: 14.5px;
  margin: 0 0 20px;
  max-width: 44ch;
}
.codeacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* The page commits to white on purpose, whatever the viewer's theme is doing.
   A dark themed QR is a QR a camera cannot read, and this is the one screen
   whose entire job is being read by a camera. */
@media print {
  .codeacts, .codehint { display: none; }
  .codewrap { min-height: 0; padding: 0; }
}