/* ------------------------------------------------------------ ID camera
 * The ID is photographed live (mr-camera.js, mode "id"): a wider stage, a
 * card-shaped guide with the rest of the picture dimmed, nothing mirrored, so
 * the print reads the right way round. The slots that open it are buttons
 * dressed as the upload boxes they replace. */
button.mr-dropzone { width: 100%; margin: 0; font: inherit; color: inherit; }
/* A long file name shortens with "…" instead of widening the list past the card. */
.mr-filelist { grid-template-columns: minmax(0, 1fr); }
.mr-camera-card { display: none; }
.mr-camera-box--id { max-width: 640px; }
.mr-camera-box--id .mr-camera-stage { width: 100%; height: auto; aspect-ratio: 4 / 3; background: #0e1511; }
.mr-camera-box--id .mr-camera-face,
.mr-camera-box--id .mr-camera-oval,
.mr-camera-box--id .mr-camera-mirror { display: none; }
.mr-camera-box--id .mr-camera-video { transform: none; }
.mr-camera-box--id .mr-camera-shot { object-fit: contain; background: #0e1511; }
.mr-camera-box--id .mr-camera-card {
	display: block;
	position: absolute;
	left: 50%; top: 50%;
	width: 82%;
	aspect-ratio: 1.586; /* an ID card, 85.6 × 54 mm */
	transform: translate(-50%, -50%);
	border: 3px dashed #fff;
	border-radius: 14px;
	box-shadow: 0 0 0 999px rgba(0, 0, 0, .32);
	opacity: .9;
	pointer-events: none;
	z-index: 2; /* above the video, which some phones draw on its own layer */
}
.mr-camera-box--id[data-state="captured"] .mr-camera-card { display: none; }
@media (max-width: 600px) {
	.mr-camera-box--id { max-width: none; }
	.mr-camera-box--id .mr-camera-stage { height: 440px; max-height: 58vh; aspect-ratio: auto; }
	.mr-camera-box--id .mr-camera-card { width: 88%; }
}

/* The names as printed on the ID, at the top of the ID card. */
.mr-idname { display: block; margin: 4px 0 6px; font-size: 14px; font-weight: 600; color: var(--mr-ink, #15201a); }
.mr-reqcard .mr-idname-input { width: 100%; max-width: none; margin: 0; }
.mr-idname-help { margin: 6px 0 4px; }
.mr-reqcard .mr-idname-help + .mr-fielderror { margin-bottom: 4px; }
.mr-reqcard .mr-idname-help ~ .mr-slots { margin-top: 14px; }
.mr-reqcard.has-name-error { border-color: var(--mr-red-line); }