@layer components {

.hd-scanner-mount .hd-player-surface-slot { display: grid; gap: .75rem; align-content: start; }
.hd-scanner-mount nav { display: flex; gap: .5rem; }
.hd-scanner-mount button, .hd-scanner-mount input { min-height: 44px; }
.hd-scanner-mount article { padding: .75rem; border: 1px solid var(--hd-color-border, #8b7355); border-radius: .5rem; }

/* Viewfinder. The router owns the <video>; without an explicit box it renders at
   the stream's intrinsic size (1280x720 CSS px) and overflows the portal on
   phone and iPad. It only claims layout space while a stream is actually live,
   so the idle Scan screen stays the start/manual-code controls. */
.hd-player-scanner__camera { display: none; }
.hd-player-scanner__camera.is-live { display: block; order: -1; width: 100%; max-width: 32rem; margin-inline: auto; }
.hd-player-scanner__camera video {
  display: block; width: 100%; height: auto; max-height: 60vh;
  aspect-ratio: 4 / 3; object-fit: cover; background: #000;
  border: 1px solid var(--hd-color-border, #8b7355); border-radius: .5rem;
}

}