/* =========================================================================
   The logo an organisation puts on its own gallery.

   Constrained by height rather than width, because logos arrive in every
   shape there is and a wide one must not push the gallery off the screen.
   object-fit keeps a tall crest and a long wordmark both looking deliberate.
   ========================================================================= */
.evlogo {
  display: block;
  max-height: 72px;
  max-width: min(70%, 260px);
  margin: 0 auto 14px;
  object-fit: contain;
}
.evlock .evlogo { margin-bottom: 18px; }

/* =========================================================================
   The face matching notice.

   Read once, standing up, on a phone, by somebody who came here to send four
   photographs and did not expect a question. So: full width, generous type,
   nothing collapsed behind a link, and the decline is a real button rather
   than a greyed-out afterthought.
   ========================================================================= */
.evconsent {
  margin: 16px 0 4px;
  padding: 18px;
  border: 1px solid var(--line, #d8dcda);
  border-radius: 12px;
  background: var(--surface, #fff);
  text-align: left;
}
.evconsent[hidden] { display: none; }
.evconsent h2 { margin: 0 0 8px; font-size: 18px; }
.evconsent p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.evconsent ul { margin: 0 0 14px; padding-left: 20px; font-size: 14.5px; line-height: 1.55; }
.evconsent li { margin-bottom: 6px; }
.evck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.evck input { width: 20px; height: 20px; flex: none; }
.evfine { font-size: 13px !important; opacity: .75; margin-left: 30px !important; }
.evcbtns { display: grid; gap: 10px; margin-top: 16px; justify-items: center; }
.evcbtns .linkbtn { font-size: 14px; }

.evfind { margin: 14px 0 6px; }
.evfind .evhint { min-height: 20px; margin-top: 8px; }
.evfind .linkbtn { font-size: inherit; }

/* =========================================================================
   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; }
}