/* QR generator (/tools/qr-generator): two-column layout, color swatches and the QR preview, which the tool kit in article.css can't express. */
.qr-layout { display: grid; gap: var(--space-24); }
@media (min-width: 712px) { .qr-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.qr-controls, .qr-side { display: grid; gap: var(--space-20); }
.qr-controls .tool-textarea { min-height: 9.6rem; }
.qr-side .tool-actions { justify-content: center; }
.qr-preview { display: grid; place-items: center; min-height: 28rem; text-align: center; }
.qr-preview.is-empty { border-style: dashed; }
.qr-preview svg { width: min(24rem, 100%); height: auto; aspect-ratio: 1; border-radius: var(--space-12); }
[data-qr-colors] .tool-option { padding: 0.6rem; }
.qr-swatch { display: block; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }