/* QrCode — the module path is generated in the wrapper; CSS owns the frame
 * chrome + the logo overlay. Default fg/bg are fixed-tone (scannability — see
 * the recipe note); `color` / `background` props override the tokens inline. */

[data-qr-code] {
	display: block;
	border-radius: var(--qr-code-radius);
	max-width: 100%;
	height: auto;
}

/* Logo overlay — fills the cleared centre (a foreignObject), centres the
 * media, paints its own light backing so it reads over the modules. */
/* width/height (physical) — not inline-size/block-size: logical props don't
 * size an <svg> element (it uses width/height as geometry) nor resolve cleanly
 * for HTML inside a viewBox-scaled foreignObject. */
[data-qr-code-overlay] {
	box-sizing: border-box;
	width: 100%; /* literal: fills its box — identity, not a knob */
	height: 100%; /* literal: fills its box — identity, not a knob */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--qr-code-overlay-bg);
	border-radius: var(--qr-code-overlay-radius);
	/* Padding is set inline (proportional to the cleared centre): a fixed px
	 * padding equals that many *modules* inside a viewBox-scaled foreignObject
	 * and would collapse the content box. */
}

[data-qr-code-overlay] :where(img, svg) {
	width: 100%; /* literal: fills its box — identity, not a knob */
	height: 100%; /* literal: fills its box — identity, not a knob */
	object-fit: contain;
}