/* =========================================================================
   What goes on the table.

   Measured in millimetres throughout, because this is the one output in the
   product that gets checked with a ruler. A QR at 40mm on a lectern is a code
   nobody scans from the third row, so the desk sign fixes the symbol at 110mm
   and everything else is arranged around it.

   Everything is scoped under .signwrap. This bundle loads on every screen.
   ========================================================================= */

.signwrap { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }

.signbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.signhint {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2, #55605c);
  margin: 0 0 18px;
}

/* The sheet is shown on screen as a page-shaped white area so what you see is
   roughly what comes out, then becomes the actual page when printing. */
.sheet {
  background: #fff;
  color: #000;
  border: 1px solid var(--line, #d8dcda);
  border-radius: 4px;
  padding: 12mm;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- one sign */

.desk { text-align: center; }

.desklogo {
  display: block;
  margin: 0 auto 6mm;
  max-height: 26mm;
  max-width: 90mm;
  object-fit: contain;
}

.deskname {
  font-size: 13mm;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 3mm;
}

.desksay {
  font-size: 7mm;
  font-weight: 600;
  opacity: .75;
  margin-bottom: 6mm;
}

.deskqr { width: 110mm; height: 110mm; margin: 0 auto 6mm; }
.deskqr svg { display: block; width: 100%; height: 100%; }

.deskhow { font-size: 6mm; line-height: 1.45; margin-bottom: 4mm; }

.deskurl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 4.6mm;
  opacity: .7;
  word-break: break-all;
}

/* ---------------------------------------------------------------- cards */

.sign-table .sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* A dashed edge on every card so there is a line to cut along, and no double
   thickness where two cards meet. */
.card {
  border: 1px dashed #999;
  margin: -0.5px;
  padding: 7mm 5mm;
  text-align: center;
  break-inside: avoid;
}

.cardlogo {
  display: block;
  margin: 0 auto 2mm;
  max-height: 10mm;
  max-width: 40mm;
  object-fit: contain;
}

.cardname { font-size: 4.6mm; font-weight: 700; margin-bottom: 2mm; line-height: 1.2; }
.cardqr { width: 42mm; height: 42mm; margin: 0 auto 2mm; }
.cardqr svg { display: block; width: 100%; height: 100%; }
.cardsay { font-size: 3.4mm; line-height: 1.35; margin-bottom: 1.5mm; }

.cardurl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.9mm;
  opacity: .65;
  word-break: break-all;
}

/* ---------------------------------------------------------------- paper */

@media print {
  @page { margin: 10mm; }

  /* The app frame, the buttons and the advice are all screen furniture. */
  body > *:not(.signwrap) { display: none !important; }
  .signbar, .signhint { display: none !important; }

  .signwrap { max-width: none; margin: 0; padding: 0; }

  .sheet {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  /* A logo printed as a pale grey rectangle is worse than no logo. */
  .desklogo, .cardlogo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}