/* Scan to open (2026-10-20) — see js/scan-open.js.
   A full-screen camera overlay. Everything is created by the script, so nothing here
   affects the page until a phone user taps "Scan QR". */
.vv-scan-overlay {
  position: fixed; inset: 0; z-index: 2147483200; background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.vv-scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vv-scan-guide {
  position: relative; width: min(68vmin, 320px); height: min(68vmin, 320px);
  border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); pointer-events: none;
}
.vv-scan-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  min-height: 44px; min-width: 44px; padding: 0 18px; border: 0; border-radius: 22px;
  background: rgba(20, 24, 32, 0.82); color: #fff; cursor: pointer;
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* Keyboard focus is always visible here, by project rule (:focus, not :focus-visible). */
.vv-scan-close:focus { outline: 3px solid #5aa9ff; outline-offset: 2px; }
.vv-scan-status {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: min(90%, 420px);
  padding: 10px 14px; border-radius: 14px; text-align: center;
  background: rgba(20, 24, 32, 0.82);
  font: 500 14px/1.4 system-ui, -apple-system, sans-serif;
}