/* 0.11 share to phone. The review QR (stage/share.js) and the Output
   panel's test QR (admin/panels/output-share.js).

   Stage: unbranded, black on white. When a QR is showing the photo moves
   left and the card sits beside it: white fill, ink outline, hard shadow.
   The only motion is the card settling in; theme.css removes it under
   prefers-reduced-motion and the Still switch (#stage[data-still]) does
   too, and the card is complete without it. */
#layer-review.sharing #review-img { width: calc(100% - 34vw); }
#review-share {
  position: absolute; right: 3vw; top: 50%; transform: translateY(-58%);
  width: 28vw; max-width: 58vh; padding: 1.6vw; box-sizing: border-box;
  background: #fff; color: #000; border: 3px solid #000; box-shadow: 8px 8px 0 #000;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#review-share .share-qr {
  display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated;
}
#review-share .share-say { margin: 1.2vh 0 .4vh; font-size: clamp(16px, 1.7vw, 30px); font-weight: 800; line-height: 1.2; }
#review-share .share-url { margin: 0; font-size: clamp(10px, .8vw, 14px); line-height: 1.3; word-break: break-all; }
#stage[data-state="review"] #review-share { animation: share-in .45s .3s ease-out both; }
@keyframes share-in { from { opacity: 0; transform: translateY(-54%); } to { opacity: 1; transform: translateY(-58%); } }
#stage[data-still] #review-share { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #review-share { animation: none !important; } }

/* Readability (Look panel): a thicker outline and a white ring on contrast,
   bigger words with big buttons. */
#stage[data-contrast] #review-share { border-width: 6px; box-shadow: 0 0 0 6px #fff; }
#stage[data-contrast] #review-share .share-url { font-size: clamp(12px, 1vw, 18px); }
#stage[data-big] #review-share .share-say { font-size: clamp(22px, 2.4vw, 42px); }

/* Admin, Output panel, Share to phone: the test QR in a printed panel. */
#admin .share-test { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 4px; }
#admin .share-test[hidden] { display: none; }
#admin .share-test canvas {
  width: 168px; height: 168px; flex: none; image-rendering: pixelated;
  background: #fff; border: 3px solid var(--ink-line); box-shadow: 4px 4px 0 var(--ink-line);
}
#admin .share-test p { margin: 0 0 6px; }
#admin .share-test .hint { word-break: break-all; }