/* "Share what you know" form: used by share.html on its own and inside the exhibit's panel. */
.share-form { display: flex; flex-direction: column; margin: 20px 0 8px; }
.share-form label { font: 700 19px 'Cinzel', serif; margin-top: 14px; }
.share-optional { font: 400 17px 'EB Garamond', Georgia, serif; color: var(--ink-soft); }
.share-hint { margin: 2px 0 6px; font-size: 17px; color: var(--ink-soft); }
.share-privacy { margin: 6px 0 0; }
.share-form textarea,
.share-form input[type="text"] {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: 20px/1.4 'EB Garamond', Georgia, serif;
  color: var(--ink);
  background: #fffaf0;
  border: 2px solid var(--ink-soft);
  border-radius: 6px;
}
.share-form textarea { resize: vertical; min-height: 120px; }
.share-form textarea:focus,
.share-form input[type="text"]:focus { outline: 3px solid var(--poppy); outline-offset: 1px; border-color: var(--ink); }
.share-send,
.share-again {
  align-self: flex-start;
  margin-top: 16px;
  padding: 14px 32px;
  font: 700 19px 'Cinzel', serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--poppy);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.share-send:disabled { opacity: 0.6; cursor: wait; }
/* Spam trap: invisible to people, filled in by bots. */
.share-trap { position: absolute; left: -9999px; }

.share-status { margin: 18px 0 8px; padding: 14px 18px; border-radius: 6px; border: 2px solid var(--ink-soft); background: #fffaf0; }
.share-status.ok { border-color: #3d6b35; }
.share-status.error { border-color: var(--poppy); }
.share-status p { margin: 0 0 6px; }

.share-other { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ink-soft); }
.share-other p { margin: 4px 0; }
.share-address { font-weight: 600; white-space: nowrap; }
.share-panel .share-address { font-size: 17px; }
.share-panel .share-other p { text-wrap: balance; }
.share-qr { display: block; width: 150px; height: 150px; margin: 14px auto 8px; }

/* In the exhibit's panel (a big screen): heading, intro and form on the left; email and QR code
   in a column on the right behind a dividing line. share.html on its own stays one column. */
.share-panel { width: min(1000px, 94vw); max-height: 94vh; }
.share-panel .about-body { padding-top: 22px; padding-bottom: 18px; }
.share-panel .share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 0 32px; }
.share-panel .share-main > p { margin: 0 0 10px; }
.share-panel .share-form { margin-top: 4px; }
.share-panel .share-form label { margin-top: 10px; }
.share-panel .share-other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0 0 0 32px;
  border-top: none;
  border-left: 1px solid var(--ink-soft);
  text-align: center;
}
/* Short screens (e.g. a 1366 x 768 laptop): a shorter message box, so the empty form still fits.
   Longer messages scroll inside the box. */
@media (max-height: 820px) {
  .share-panel .about-body { padding-top: 16px; }
  .share-panel .share-form textarea { min-height: 84px; height: 84px; }
}
/* The QR code is for the library screen; on a phone or at home it would just link to itself. */
.popup-only { display: none; }
body.popup .popup-only { display: block; }